Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AQUILA - TEOS-10 Visual Simulator</title> | |
| <style> | |
| body { margin: 0; padding: 0; background-color: #0f172a; color: #38bdf8; font-family: 'Courier New', Courier, monospace; overflow: hidden; } | |
| .container { display: flex; height: 100vh; } | |
| .ocean { flex: 1; position: relative; background: linear-gradient(to bottom, #0284c7 0%, #082f49 100%); border-right: 2px solid #38bdf8; overflow: hidden; } | |
| .auv { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); width: 80px; height: 30px; background: #fbbf24; border-radius: 15px; display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; transition: top 1s linear; z-index: 10; } | |
| .auv::after { content: ''; position: absolute; right: -15px; top: 10px; border-left: 15px solid #fbbf24; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } | |
| .sensor-wave { position: absolute; width: 150px; height: 150px; border: 2px solid rgba(56, 189, 248, 0.5); border-radius: 50%; top: -60px; left: -35px; animation: ping 2s infinite; pointer-events: none; } | |
| @keyframes ping { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } | |
| .depth-markers { position: absolute; right: 10px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; color: white; padding: 20px 0; } | |
| .dashboard { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 20px; } | |
| .panel { background: #1e293b; border: 1px solid #38bdf8; border-radius: 8px; padding: 15px; } | |
| .panel h2 { margin-top: 0; color: #f8fafc; font-size: 1.2rem; border-bottom: 1px solid #334155; padding-bottom: 10px; } | |
| .data-row { display: flex; justify-content: space-between; margin: 10px 0; font-size: 1.1rem; } | |
| .teos-box { background: #0f172a; border: 2px dashed #64748b; padding: 20px; text-align: center; border-radius: 8px; transition: all 0.3s ease; } | |
| .teos-box.active-good { border-color: #22c55e; background: rgba(34, 197, 94, 0.1); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); } | |
| .teos-box.active-bad { border-color: #ef4444; background: rgba(239, 68, 68, 0.1); box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); } | |
| .status-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; font-weight: bold; margin-top: 10px; } | |
| .bg-green { background: #22c55e; color: white; } | |
| .bg-red { background: #ef4444; color: white; } | |
| .bg-gray { background: #64748b; color: white; } | |
| .log-box { flex-grow: 1; background: black; padding: 10px; font-size: 0.9rem; overflow-y: auto; border: 1px solid #334155; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Ocean View --> | |
| <div class="ocean"> | |
| <div class="auv" id="auv"> | |
| AQUILA | |
| <div class="sensor-wave"></div> | |
| </div> | |
| <div class="depth-markers"> | |
| <span>0m (Surface)</span> | |
| <span>100m</span> | |
| <span>200m</span> | |
| <span>300m</span> | |
| <span>400m</span> | |
| <span>500m (Abyss)</span> | |
| </div> | |
| </div> | |
| <!-- Dashboard View --> | |
| <div class="dashboard"> | |
| <div class="panel"> | |
| <h2>1. Raw Sensor Ingestion</h2> | |
| <div class="data-row"><span>Depth:</span> <span id="val-depth">0.0 m</span></div> | |
| <div class="data-row"><span>Raw Temp:</span> <span id="val-temp">1.20 °C</span></div> | |
| <div class="data-row"><span>Raw Salinity:</span> <span id="val-sal">34.00 PSU</span></div> | |
| </div> | |
| <div class="panel teos-box" id="teos-node"> | |
| <h2>2. TEOS-10 Physics Cage</h2> | |
| <div style="font-size: 0.9rem; color: #94a3b8; margin-bottom: 10px;">Validating Absolute Salinity & Density...</div> | |
| <div id="density-calc">Calculating Density: 1027.5 kg/m³</div> | |
| <div class="status-badge bg-gray" id="qc-flag">QC FLAG: PENDING</div> | |
| </div> | |
| <div class="panel"> | |
| <h2>3. Backend Database / UI</h2> | |
| <div class="log-box" id="sys-log"> | |
| > System initialized.<br> | |
| > Waiting for TEOS-10 validation...<br> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let depth = 0; | |
| let descending = true; | |
| const auv = document.getElementById('auv'); | |
| const teosNode = document.getElementById('teos-node'); | |
| const qcFlag = document.getElementById('qc-flag'); | |
| const sysLog = document.getElementById('sys-log'); | |
| function addLog(msg, color="#38bdf8") { | |
| sysLog.innerHTML += `<span style="color:${color}">> ${msg}</span><br>`; | |
| sysLog.scrollTop = sysLog.scrollHeight; | |
| } | |
| setInterval(() => { | |
| // 1. Move AUV | |
| if (descending) { depth += 10; if (depth >= 500) descending = false; } | |
| else { depth -= 10; if (depth <= 0) descending = true; } | |
| // Visual position (10% to 90% of screen height) | |
| const topPos = 10 + (depth / 500) * 80; | |
| auv.style.top = topPos + '%'; | |
| // 2. Generate Sensor Data based on depth | |
| // Temp drops as depth increases. Salinity stays around 34-35. | |
| let temp = (1.5 - (depth / 100)).toFixed(2); | |
| let sal = (34.0 + (depth / 1000)).toFixed(2); | |
| // Simulate a hardware failure randomly | |
| let isFailure = Math.random() < 0.05; | |
| if (isFailure) { | |
| temp = 45.0; // Impossible ocean temp | |
| sal = 10.0; // Impossible deep ocean salinity | |
| } | |
| document.getElementById('val-depth').innerText = depth + ' m'; | |
| document.getElementById('val-temp').innerText = temp + ' °C'; | |
| document.getElementById('val-sal').innerText = sal + ' PSU'; | |
| // 3. TEOS-10 Logic Simulation | |
| teosNode.className = 'panel teos-box'; | |
| qcFlag.className = 'status-badge bg-gray'; | |
| qcFlag.innerText = 'QC FLAG: CALCULATING...'; | |
| setTimeout(() => { | |
| if (isFailure) { | |
| // Bad Data | |
| const badDensity = (990.5 + Math.random()).toFixed(1); | |
| document.getElementById('density-calc').innerText = `Calculating Density: ${badDensity} kg/m³ (PHYSICS VIOLATION)`; | |
| teosNode.className = 'panel teos-box active-bad'; | |
| qcFlag.className = 'status-badge bg-red'; | |
| qcFlag.innerText = 'QC FLAG = 4 (BAD DATA)'; | |
| addLog(`[REJECTED] Depth ${depth}m: Data violates thermodynamics. Density ${badDensity} is impossible.`, "#ef4444"); | |
| } else { | |
| // Good Data | |
| const goodDensity = (1027.0 + (depth/1000)).toFixed(2); | |
| document.getElementById('density-calc').innerText = `Calculating Density: ${goodDensity} kg/m³ (VERIFIED)`; | |
| teosNode.className = 'panel teos-box active-good'; | |
| qcFlag.className = 'status-badge bg-green'; | |
| qcFlag.innerText = 'QC FLAG = 1 (GOOD DATA)'; | |
| addLog(`[SAVED] Depth ${depth}m: Temp ${temp}°C | Salinity ${sal} | Density ${goodDensity}`, "#22c55e"); | |
| } | |
| }, 500); | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> | |