<!-- static/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Solar System Fluid Simulator</title>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<div id="container">
<div id="controls">
<h1>3D Solar System Fluid Simulator</h1>
<p>Adjust the parameters (real-world values), then click "Start Simulation".</p>
<div class="sphere-controls">
<h3>Sun</h3>
<label>Mass (kg): <input type="range" id="sun-mass" min="1e30" max="3e30" step="1e28" value="1.989e30"></label>
<p>Scaled Mass: <span id="sun-mass-scaled"></span></p>
<label>X (km): <input type="range" id="sun-x" min="-1e6" max="1e6" step="1e4" value="0"></label>
<label>Y (km): <input type="range" id="sun-y" min="-1e6" max="1e6" step="1e4" value="0"></label>
<label>Z (km): <input type="range" id="sun-z" min="-1e6" max="1e6" step="1e4" value="0"></label>
</div>
<div class="sphere-controls">
<h3>Earth</h3>
<label>Mass (kg): <input type="range" id="earth-mass" min="1e24" max="1e25" step="1e22" value="5.972e24"></label>
<p>Scaled Mass: <span id="earth-mass-scaled"></span></p>
<label>X (km): <input type="range" id="earth-x" min="-300e6" max="300e6" step="1e6" value="149.6e6"></label>
<label>Y (km): <input type="range" id="earth-y" min="-300e6" max="300e6" step="1e6" value="0"></label>
<label>Z (km): <input type="range" id="earth-z" min="-300e6" max="300e6" step="1e6" value="0"></label>
<label>Orbital Velocity (km/s): <input type="range" id="earth-orbital-velocity" min="0" max="50" step="0.1" value="29.8"></label>
<p>Scaled Velocity: <span id="earth-velocity-scaled"></span></p>
<label>Centripetal Force Scale: <input type="range" id="earth-centripetal" min="0.5" max="2" step="0.1" value="1"></label>
</div>
<div class="sphere-controls">
<h3>Mars</h3>
<label>Mass (kg): <input type="range" id="mars-mass" min="1e23" max="1e24" step="1e21" value="6.417e23"></label>
<p>Scaled Mass: <span id="mars-mass-scaled"></span></p>
<label>X (km): <input type="range" id="mars-x" min="-300e6" max="300e6" step="1e6" value="227.9e6"></label>
<label>Y (km): <input type="range" id="mars-y" min="-300e6" max="300e6" step="1e6" value="0"></label>
<label>Z (km): <input type="range" id="mars-z" min="-300e6" max="300e6" step="1e6" value="0"></label>
<label>Orbital Velocity (km/s): <input type="range" id="mars-orbital-velocity" min="0" max="50" step="0.1" value="24.1"></label>
<p>Scaled Velocity: <span id="mars-velocity-scaled"></span></p>
<label>Centripetal Force Scale: <input type="range" id="mars-centripetal" min="0.5" max="2" step="0.1" value="1"></label>
</div>
<div class="fluid-controls">
<h3>Fluid Interactions</h3>
<label>Friction (0-1): <input type="range" id="fluid-friction" min="0" max="1" step="0.01" value="0.9"></label>
<label>Deflection Strength: <input type="range" id="fluid-deflection" min="0" max="0.5" step="0.01" value="0.1"></label>
</div>
<button id="start-btn">Start Simulation</button>
<button id="stop-btn">Stop Simulation</button>
<button id="reset-btn">Reset Simulation</button>
<button id="save-btn">Save Settings</button>
<button id="load-btn">Load Settings</button>
<p id="status-message"></p>
</div>
<div id="scene-container"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/controls/OrbitControls.js"></script>
<script src="/static/script.js"></script>
</body>
</html>