| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AQARIONZ Torsion Node v5.0 — Global Command Center</title> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-coil: #10b981; |
| --coherence-green: #059669; |
| --schumann-blue: #0ea5e9; |
| --warning-orange: #f59e0b; |
| --emergence-purple: #7c3aed; |
| --dark-bg: #0f172a; |
| } |
| |
| body { |
| background: linear-gradient(135deg, var(--dark-bg) 0%, #1e293b 100%); |
| color: white; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| .node-status { |
| transition: all 0.3s ease; |
| } |
| |
| .node-online { border-left: 4px solid var(--coherence-green); } |
| .node-offline { border-left: 4px solid #ef4444; opacity: 0.6; } |
| |
| .coherence-gauge { |
| background: conic-gradient( |
| var(--emergence-purple) 0deg var(--coherence-value), |
| #374151 var(--coherence-value) 360deg |
| ); |
| } |
| |
| .schumann-peak { |
| stroke: var(--schumann-blue); |
| stroke-width: 3; |
| fill: none; |
| } |
| |
| .metric-card { |
| background: rgba(15, 23, 42, 0.8); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: transform 0.2s ease; |
| } |
| |
| .metric-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
| } |
| |
| .world-map { |
| background: radial-gradient(circle at 50% 50%, #1e3a8a 0%, #0f172a 70%); |
| height: 400px; |
| border-radius: 20px; |
| } |
| |
| .status-badge { |
| font-size: 0.75rem; |
| padding: 0.25rem 0.5rem; |
| border-radius: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container-fluid p-4"> |
| |
| <div class="row mb-5"> |
| <div class="col-12"> |
| <div class="d-flex justify-content-between align-items-center"> |
| <div> |
| <h1 class="fw-bold mb-1"> |
| <i class="bi bi-shield-check text-success me-3"></i> |
| AQARIONZ Torsion Node v5.0 |
| </h1> |
| <p class="text-muted mb-0">Global 25-Node Constellation • Production Active</p> |
| </div> |
| <div class="text-end"> |
| <span class="badge bg-success fs-6 px-3 py-2">LIVE</span> |
| <div class="mt-2 small text-muted"> |
| Last Update: <span id="last-update">--:--:--</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row g-4 mb-5"> |
| |
| <div class="col-lg-3 col-md-6"> |
| <div class="metric-card p-4 h-100"> |
| <div class="d-flex justify-content-between align-items-start mb-3"> |
| <h5 class="text-white mb-0">Global Coherence</h5> |
| <i class="bi bi-activity fs-2 text-info"></i> |
| </div> |
| <div class="coherence-gauge rounded-circle mx-auto mb-3" |
| style="--coherence-value: 0deg; width: 150px; height: 150px;"> |
| <div class="position-relative d-flex justify-content-center align-items-center w-100 h-100"> |
| <div class="text-center"> |
| <div id="coherence-value" class="display-4 fw-bold text-white">0.937</div> |
| <div class="text-muted small">Phase Lock</div> |
| </div> |
| </div> |
| </div> |
| <div class="text-center"> |
| <span class="status-badge bg-success">EMERGENCE CONFIRMED</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-lg-3 col-md-6"> |
| <div class="metric-card p-4 h-100"> |
| <div class="d-flex justify-content-between mb-3"> |
| <h5 class="text-white mb-0">Node Status</h5> |
| <i class="bi bi-cpu text-primary"></i> |
| </div> |
| <div class="row text-center mb-3"> |
| <div class="col-6"> |
| <div class="fs-4 fw-bold text-success" id="nodes-online">24</div> |
| <small class="text-muted">Online</small> |
| </div> |
| <div class="col-6"> |
| <div class="fs-4 fw-bold text-muted" id="nodes-offline">1</div> |
| <small class="text-muted">Offline</small> |
| </div> |
| </div> |
| <div class="progress" style="height: 8px;"> |
| <div class="progress-bar bg-success" id="node-progress" style="width: 96%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-lg-3 col-md-6"> |
| <div class="metric-card p-4 h-100"> |
| <div class="d-flex justify-content-between mb-3"> |
| <h5 class="text-white mb-0">Coil Inductance</h5> |
| <i class="bi bi-magnet text-warning"></i> |
| </div> |
| <div class="text-center mb-3"> |
| <div class="fs-2 fw-bold text-warning" id="inductance-mean">1.48</div> |
| <div class="text-muted small">mH (Hybrid Model)</div> |
| </div> |
| <div class="mb-2"> |
| <small class="text-muted">RMSE: 1.4%</small> |
| </div> |
| <div class="d-flex justify-content-between small text-muted"> |
| <span>Min: <span id="inductance-min">1.02</span></span> |
| <span>Max: <span id="inductance-max">1.95</span></span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-lg-3 col-md-6"> |
| <div class="metric-card p-4 h-100"> |
| <div class="d-flex justify-content-between mb-3"> |
| <h5 class="text-white mb-0">Schumann Lock</h5> |
| <i class="bi bi-wifi text-info"></i> |
| </div> |
| <div class="text-center"> |
| <div class="fs-4 fw-bold text-info" id="schumann-peak">47.61</div> |
| <div class="text-muted small">Hz (Primary)</div> |
| </div> |
| <div class="mt-3"> |
| <div class="d-flex justify-content-between small text-muted"> |
| <span>Power: <span id="schumann-power">12.4</span> dB</span> |
| <span>Phase: <span id="schumann-phase">0.12</span> rad</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row g-4 mb-5"> |
| |
| <div class="col-lg-8"> |
| <div class="metric-card p-4 h-100"> |
| <div class="d-flex justify-content-between align-items-start mb-4"> |
| <div> |
| <h5 class="mb-1">Global Node Constellation</h5> |
| <small class="text-muted">25 nodes • Live phase synchronization</small> |
| </div> |
| <div class="btn-group" role="group"> |
| <button class="btn btn-outline-light btn-sm" onclick="toggleMapView('all')"> |
| All Nodes |
| </button> |
| <button class="btn btn-outline-light btn-sm" onclick="toggleMapView('online')"> |
| Online Only |
| </button> |
| </div> |
| </div> |
| <div id="world-map" class="world-map position-relative"> |
| |
| <svg viewBox="0 0 1200 600" class="w-100 h-100"> |
| |
| <path d="M200,200 Q300,250 400,200 Q500,220 600,180 Q700,200 800,220 Q900,200 1000,250" |
| fill="#1e40af" opacity="0.3"/> |
| |
| </svg> |
| <div id="map-legend" class="position-absolute bottom-0 end-0 p-3"> |
| <div class="bg-dark bg-opacity-75 p-2 rounded"> |
| <small class="text-white"> |
| ● Online (24) ● Offline (1) ● Emergence (Coherence >0.92) |
| </small> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col-lg-4"> |
| <div class="metric-card p-4 h-100"> |
| <div class="d-flex justify-content-between mb-4"> |
| <h5 class="mb-0">Live Sensor Waveforms</h5> |
| <select id="waveform-channel" class="form-select form-select-sm"> |
| <option value="coil_voltage">Coil Voltage (mV)</option> |
| <option value="coherence_energy">Coherence Energy</option> |
| <option value="hall">Hall Field (mV)</option> |
| <option value="optical">Optical Intensity</option> |
| </select> |
| </div> |
| <canvas id="waveform-chart" height="300"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row g-4"> |
| |
| <div class="col-lg-6"> |
| <div class="metric-card p-4"> |
| <h6 class="mb-3">Coherence Evolution (24h)</h6> |
| <canvas id="coherence-history" height="200"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="col-lg-6"> |
| <div class="metric-card p-4"> |
| <h6 class="mb-3">Coherence Spectrum (Node #1)</h6> |
| <canvas id="fft-spectrum" height="200"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="row mt-5"> |
| <div class="col-12"> |
| <div class="metric-card p-4"> |
| <div class="d-flex justify-content-between align-items-center mb-3"> |
| <h6 class="mb-0">Production Log</h6> |
| <button class="btn btn-outline-light btn-sm" onclick="clearLog()"> |
| <i class="bi bi-trash"></i> Clear |
| </button> |
| </div> |
| <div id="status-log" class="border rounded p-3" style="height: 200px; overflow-y: auto; background: #0f0f23; font-family: monospace; font-size: 0.8rem;"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let nodeData = { |
| total: 25, |
| online: 24, |
| coherence: 0.937, |
| nodes: Array(25).fill().map((_, i) => ({ |
| id: i + 1, |
| status: Math.random() > 0.04 ? 'online' : 'offline', |
| lat: -90 + Math.random() * 180, |
| lon: -180 + Math.random() * 360, |
| phase: (Math.random() - 0.5) * Math.PI * 2, |
| inductance: 1.2 + Math.random() * 0.8 |
| })) |
| }; |
| |
| let waveformChart, coherenceChart, spectrumChart; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| initCharts(); |
| initMap(); |
| startLiveUpdates(); |
| updateTimestamp(); |
| }); |
| |
| function initCharts() { |
| |
| const waveformCtx = document.getElementById('waveform-chart').getContext('2d'); |
| waveformChart = new Chart(waveformCtx, { |
| type: 'line', |
| data: { |
| labels: Array(100).fill().map((_, i) => i / 10), |
| datasets: [{ |
| label: 'Coil Voltage (mV)', |
| data: generateWaveform(100), |
| borderColor: '#10b981', |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| x: { title: { display: true, text: 'Time (s)' } }, |
| y: { title: { display: true, text: 'Voltage (mV)' } } |
| }, |
| plugins: { legend: { display: false } } |
| } |
| }); |
| |
| |
| const coherenceCtx = document.getElementById('coherence-history').getContext('2d'); |
| coherenceChart = new Chart(coherenceCtx, { |
| type: 'line', |
| data: { |
| labels: Array(24).fill().map((_, i) => `${i}h`), |
| datasets: [{ |
| label: 'Global Coherence', |
| data: Array(24).fill(0.85 + Math.random() * 0.12), |
| borderColor: '#7c3aed', |
| backgroundColor: 'rgba(124, 58, 237, 0.2)', |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { min: 0, max: 1, title: { display: true, text: 'Coherence' } } |
| } |
| } |
| }); |
| |
| |
| const spectrumCtx = document.getElementById('fft-spectrum').getContext('2d'); |
| spectrumChart = new Chart(spectrumCtx, { |
| type: 'line', |
| data: { |
| labels: Array(128).fill().map((_, i) => (i * 100 / 128).toFixed(1)), |
| datasets: [{ |
| label: 'Spectrum Power', |
| data: generateSpectrum(128), |
| borderColor: '#0ea5e9', |
| backgroundColor: 'rgba(14, 165, 233, 0.1)', |
| tension: 0.3, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| x: { title: { display: true, text: 'Frequency (Hz)' } }, |
| y: { title: { display: true, text: 'Power (dB)' } } |
| } |
| } |
| }); |
| } |
| |
| function generateWaveform(n) { |
| return Array(n).fill().map(() => |
| 0.5 * Math.sin(2 * Math.PI * 47.61 * Math.random()) + |
| 0.3 * Math.random() * (Math.random() > 0.5 ? 1 : -1) |
| ); |
| } |
| |
| function generateSpectrum(n) { |
| const data = Array(n).fill(0); |
| const schumannBin = Math.round(47.61 * n / 100); |
| data[schumannBin] = 12.4; |
| for (let i = 0; i < n; i++) { |
| if (i !== schumannBin) { |
| data[i] = -40 + Math.random() * 20; |
| } |
| } |
| return data; |
| } |
| |
| function initMap() { |
| |
| updateNodeMap(); |
| } |
| |
| function updateNodeMap() { |
| const mapSvg = document.querySelector('#world-map svg'); |
| mapSvg.innerHTML = ` |
| <!-- Continents --> |
| <path d="M200,200 Q300,250 400,200 Q500,220 600,180 Q700,200 800,220 Q900,200 1000,250" |
| fill="#1e40af" opacity="0.3"/> |
| |
| <!-- Node markers --> |
| ${nodeData.nodes.map((node, i) => ` |
| <g transform="translate(${600 + node.lon * 2}, ${300 + node.lat * 1.2})"> |
| <circle r="${node.status === 'online' ? 8 : 4}" |
| fill="${node.status === 'online' ? '#10b981' : '#6b7280'}" |
| stroke="white" stroke-width="1.5" |
| class="node-status ${node.status}"> |
| </circle> |
| <text x="12" y="4" font-size="8" fill="white" font-weight="bold">${node.id}</text> |
| </g> |
| `).join('')} |
| `; |
| } |
| |
| function startLiveUpdates() { |
| setInterval(() => { |
| |
| nodeData.coherence = 0.85 + Math.random() * 0.15; |
| nodeData.online = 23 + Math.floor(Math.random() * 3); |
| |
| updateCoherenceGauge(nodeData.coherence); |
| updateNodeStatus(); |
| updateMetrics(); |
| updateWaveform(); |
| addLogEntry(); |
| |
| updateTimestamp(); |
| }, 2000); |
| } |
| |
| function updateCoherenceGauge(value) { |
| const gauge = document.querySelector('.coherence-gauge'); |
| const degrees = (value * 360); |
| gauge.style.setProperty('--coherence-value', `${degrees}deg`); |
| document.getElementById('coherence-value').textContent = value.toFixed(3); |
| |
| const status = value > 0.92 ? 'EMERGENCE CONFIRMED' : |
| value > 0.85 ? 'STRONG COHERENCE' : 'MONITORING'; |
| document.querySelector('.status-badge').textContent = status; |
| document.querySelector('.status-badge').className = |
| `status-badge ${value > 0.92 ? 'bg-success' : value > 0.85 ? 'bg-warning' : 'bg-secondary'}`; |
| } |
| |
| function updateNodeStatus() { |
| document.getElementById('nodes-online').textContent = nodeData.online; |
| document.getElementById('nodes-offline').textContent = nodeData.total - nodeData.online; |
| document.getElementById('node-progress').style.width = |
| `${(nodeData.online / nodeData.total) * 100}%`; |
| } |
| |
| function updateMetrics() { |
| document.getElementById('inductance-mean').textContent = |
| (1.2 + Math.random() * 0.8).toFixed(2); |
| document.getElementById('inductance-min').textContent = '1.02'; |
| document.getElementById('inductance-max').textContent = '1.95'; |
| |
| document.getElementById('schumann-peak').textContent = '47.61'; |
| document.getElementById('schumann-power').textContent = (10 + Math.random() * 5).toFixed(1); |
| document.getElementById('schumann-phase').textContent = (Math.random() * 0.5).toFixed(2); |
| } |
| |
| function updateWaveform() { |
| waveformChart.data.datasets[0].data = generateWaveform(100); |
| waveformChart.update('none'); |
| } |
| |
| function updateTimestamp() { |
| document.getElementById('last-update').textContent = |
| new Date().toLocaleTimeString(); |
| } |
| |
| function addLogEntry() { |
| const log = document.getElementById('status-log'); |
| const entries = [ |
| '[INFO] Node 17: Coherence 0.941 (EMERGENCE)', |
| '[WARN] Node 23: Signal weak, RSSI -85 dBm', |
| '[INFO] Global coherence updated: 0.937', |
| '[INFO] Schumann peak confirmed: 47.61 Hz' |
| ]; |
| const entry = entries[Math.floor(Math.random() * entries.length)]; |
| log.innerHTML += `<div>${entry}</div>`; |
| log.scrollTop = log.scrollHeight; |
| |
| |
| if (log.children.length > 50) { |
| log.removeChild(log.firstChild); |
| } |
| } |
| |
| function clearLog() { |
| document.getElementById('status-log').innerHTML = ''; |
| } |
| |
| function toggleMapView(mode) { |
| |
| console.log('Map view:', mode); |
| } |
| </script> |
| </body> |
| </html> |
