| <html lang="th"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ω NEXUS — Live Dashboard</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0a1a; color: #e0e0e0; min-height: 100vh; } | |
| .header { background: linear-gradient(135deg, #0d0d2b, #1a1a3e); padding: 20px 30px; border-bottom: 1px solid #1e1e3a; display: flex; justify-content: space-between; align-items: center; } | |
| .logo { font-size: 28px; font-weight: bold; background: linear-gradient(135deg, #00d4ff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| .status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8888aa; } | |
| .dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 8px #00ff88; animation: pulse 2s infinite; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } | |
| .container { max-width: 1400px; margin: 0 auto; padding: 24px; } | |
| .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } | |
| .kpi-card { background: #12122a; border: 1px solid #1e1e3a; border-radius: 12px; padding: 20px; position: relative; overflow: hidden; } | |
| .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } | |
| .kpi-card.cyan::before { background: #00d4ff; } | |
| .kpi-card.magenta::before { background: #ff00ff; } | |
| .kpi-card.green::before { background: #00ff88; } | |
| .kpi-card.yellow::before { background: #ffcc00; } | |
| .kpi-card.purple::before { background: #8855ff; } | |
| .kpi-card.orange::before { background: #ff8844; } | |
| .kpi-label { font-size: 12px; color: #8888aa; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } | |
| .kpi-value { font-size: 28px; font-weight: bold; } | |
| .kpi-sub { font-size: 11px; color: #8888aa; margin-top: 4px; } | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } | |
| @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } } | |
| .card { background: #12122a; border: 1px solid #1e1e3a; border-radius: 12px; padding: 20px; } | |
| .card-title { font-size: 14px; color: #8888aa; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; font-weight: 600; } | |
| .layer-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1e1e3a; } | |
| .layer-row:last-child { border-bottom: none; } | |
| .layer-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; } | |
| .layer-info { flex: 1; } | |
| .layer-name { font-size: 13px; font-weight: 600; } | |
| .layer-status { font-size: 11px; color: #8888aa; } | |
| .layer-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; } | |
| .badge-green { background: #00ff8822; color: #00ff88; } | |
| .badge-yellow { background: #ffcc0022; color: #ffcc00; } | |
| .bar-chart { display: flex; flex-direction: column; gap: 8px; } | |
| .bar-item { display: flex; align-items: center; gap: 10px; } | |
| .bar-label { width: 120px; font-size: 11px; color: #8888aa; text-align: right; } | |
| .bar-track { flex: 1; height: 20px; background: #1a1a3a; border-radius: 4px; overflow: hidden; } | |
| .bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; } | |
| .bar-value { width: 50px; font-size: 12px; font-weight: 600; } | |
| .log-container { max-height: 250px; overflow-y: auto; font-family: 'Consolas', 'Fira Code', monospace; font-size: 12px; } | |
| .log-entry { padding: 4px 8px; border-left: 3px solid #1e1e3a; margin-bottom: 2px; border-radius: 0 4px 4px 0; } | |
| .log-entry.INFO { border-color: #00d4ff; } | |
| .log-entry.WARN { border-color: #ffcc00; } | |
| .log-entry.ERROR { border-color: #ff4466; } | |
| .log-entry.SUCCESS { border-color: #00ff88; } | |
| .log-time { color: #555577; } | |
| .log-level { font-weight: 600; } | |
| .log-level.INFO { color: #00d4ff; } | |
| .log-level.WARN { color: #ffcc00; } | |
| .log-level.ERROR { color: #ff4466; } | |
| .log-level.SUCCESS { color: #00ff88; } | |
| .avs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } | |
| .avs-item { background: #0a0a1a; border: 1px solid #1e1e3a; border-radius: 8px; padding: 12px; } | |
| .avs-name { font-size: 11px; font-weight: 600; margin-bottom: 6px; } | |
| .avs-metric { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; } | |
| .avs-metric span:first-child { color: #8888aa; } | |
| .chart-canvas { width: 100%; height: 200px; } | |
| .footer { text-align: center; padding: 20px; color: #555577; font-size: 11px; border-top: 1px solid #1e1e3a; margin-top: 24px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="logo">Ω NEXUS</div> | |
| <div class="status"><div class="dot"></div> <span id="clock">--:--:--</span> | SYSTEM ONLINE</div> | |
| </div> | |
| <div class="container"> | |
| <!-- KPI Cards --> | |
| <div class="kpi-grid"> | |
| <div class="kpi-card cyan"> | |
| <div class="kpi-label">🖥️ Active Nodes</div> | |
| <div class="kpi-value" id="kpi-nodes" style="color:#00d4ff">—</div> | |
| <div class="kpi-sub">of 1,000,000 total</div> | |
| </div> | |
| <div class="kpi-card magenta"> | |
| <div class="kpi-label">🧠 Decisions Made</div> | |
| <div class="kpi-value" id="kpi-decisions" style="color:#ff00ff">—</div> | |
| <div class="kpi-sub" id="kpi-netvalue">Net Value: —</div> | |
| </div> | |
| <div class="kpi-card green"> | |
| <div class="kpi-label">⚡ Skill Level</div> | |
| <div class="kpi-value" id="kpi-skill" style="color:#00ff88">—</div> | |
| <div class="kpi-sub" id="kpi-selfperc">Self-Perception: —</div> | |
| </div> | |
| <div class="kpi-card yellow"> | |
| <div class="kpi-label">🛡️ Intent Certainty</div> | |
| <div class="kpi-value" id="kpi-intent" style="color:#ffcc00">—</div> | |
| <div class="kpi-sub">GC-CI: ACTIVE</div> | |
| </div> | |
| <div class="kpi-card purple"> | |
| <div class="kpi-label">📊 Error Rate</div> | |
| <div class="kpi-value" id="kpi-error" style="color:#8855ff">—</div> | |
| <div class="kpi-sub" id="kpi-throughput">Throughput: —</div> | |
| </div> | |
| <div class="kpi-card orange"> | |
| <div class="kpi-label">💰 Est. Revenue (THB)</div> | |
| <div class="kpi-value" id="kpi-revenue" style="color:#ff8844">—</div> | |
| <div class="kpi-sub">Year 1 projection</div> | |
| </div> | |
| </div> | |
| <!-- Layer Status + AVS-10 --> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <div class="card-title">🏗️ System Layer Status</div> | |
| <div class="layer-row"> | |
| <div class="layer-icon" style="background:#ffcc0022;color:#ffcc00">🛡️</div> | |
| <div class="layer-info"><div class="layer-name">L4: Sovereign Doctrine</div><div class="layer-status">Intent Vector Locked</div></div> | |
| <span class="layer-badge badge-green">ACTIVE</span> | |
| </div> | |
| <div class="layer-row"> | |
| <div class="layer-icon" style="background:#00ff8822;color:#00ff88">⚡</div> | |
| <div class="layer-info"><div class="layer-name">L3: Evolution Engine</div><div class="layer-status">Learning Cycle Running</div></div> | |
| <span class="layer-badge badge-green">ACTIVE</span> | |
| </div> | |
| <div class="layer-row"> | |
| <div class="layer-icon" style="background:#ff00ff22;color:#ff00ff">🧠</div> | |
| <div class="layer-info"><div class="layer-name">L2: Prometheus Engine</div><div class="layer-status">Causal Vetting Online</div></div> | |
| <span class="layer-badge badge-green">ACTIVE</span> | |
| </div> | |
| <div class="layer-row"> | |
| <div class="layer-icon" style="background:#00d4ff22;color:#00d4ff">🖥️</div> | |
| <div class="layer-info"><div class="layer-name">L1: Orchestrator</div><div class="layer-status">Genesis Swarm Synced</div></div> | |
| <span class="layer-badge badge-green">ACTIVE</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">🌐 AVS-10 Omni-Dimensional Scores</div> | |
| <div class="bar-chart" id="avs-bars"></div> | |
| </div> | |
| </div> | |
| <!-- Revenue Chart + Logs --> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <div class="card-title">📈 Revenue Projection (ล้านบาท)</div> | |
| <canvas id="revenueChart" class="chart-canvas"></canvas> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">📋 System Logs</div> | |
| <div class="log-container" id="logs"></div> | |
| </div> | |
| </div> | |
| <!-- Product Comparison --> | |
| <div class="card" style="margin-bottom:24px"> | |
| <div class="card-title">💼 7 Products Extension — Revenue vs Cost (ล้านบาท)</div> | |
| <canvas id="productChart" class="chart-canvas" style="height:250px"></canvas> | |
| </div> | |
| </div> | |
| <div class="footer">Ω NEXUS Dashboard v1.0 — Single HTML File — No Build Tools Required — Last Update: <span id="lastUpdate">—</span></div> | |
| <script> | |
| // ============================================================ | |
| // DATA GENERATION (Simulated Real-Time) | |
| // ============================================================ | |
| const rand = (min, max) => Math.random() * (max - min) + min; | |
| const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); | |
| function generateMetrics() { | |
| return { | |
| nodes: Math.floor(rand(850000, 995000)), | |
| decisions: Math.floor(rand(5000, 15000)), | |
| netValue: rand(0.85, 1.15), | |
| skill: rand(65, 92), | |
| selfPerc: rand(0.5, 0.95), | |
| intent: rand(0.88, 0.99), | |
| errorRate: rand(0.1, 2.5), | |
| throughput: Math.floor(rand(2000, 8000)), | |
| revenue: Math.floor(rand(180, 250)) | |
| }; | |
| } | |
| function generateAVS() { | |
| return [ | |
| { name: 'QuantumSpirit', value: rand(60, 95) }, | |
| { name: 'SmartCity', value: rand(50, 85) }, | |
| { name: 'HumanAugment', value: rand(40, 80) }, | |
| { name: 'DigitalGaia', value: rand(55, 90) }, | |
| { name: 'SimUniverse', value: rand(35, 75) }, | |
| { name: 'FutureMed', value: rand(45, 85) }, | |
| { name: 'ZeroPointE', value: rand(70, 98) }, | |
| { name: 'FutureEdu', value: rand(55, 90) }, | |
| { name: 'CosmicEcon', value: rand(40, 80) }, | |
| { name: 'DigitalSoc', value: rand(50, 85) } | |
| ]; | |
| } | |
| const logMessages = [ | |
| { level: 'INFO', module: 'L1:ORCHESTRATOR', msg: 'Genesis Swarm node sync complete' }, | |
| { level: 'SUCCESS', module: 'L2:PROMETHEUS', msg: 'Causal vetting passed — NetValue above tolerance' }, | |
| { level: 'INFO', module: 'L3:EVOLUTION', msg: 'Learning cycle complete — Skill level increased' }, | |
| { level: 'SUCCESS', module: 'L4:SOVEREIGN', msg: 'GC-CI outcome locked — Reality shift confirmed' }, | |
| { level: 'WARN', module: 'AVS-10', msg: 'Entropy spike detected in DigitalGaia dimension' }, | |
| { level: 'INFO', module: 'L2:PROMETHEUS', msg: 'Optimal vector found — Decision: ACCEPTED' }, | |
| { level: 'SUCCESS', module: 'L3:EVOLUTION', msg: 'Self-perception updated: 0.847' }, | |
| { level: 'INFO', module: 'L1:ORCHESTRATOR', msg: 'Job dispatched to swarm — 10,000 nodes active' }, | |
| { level: 'WARN', module: 'L4:SOVEREIGN', msg: 'Intent certainty dropped below 0.90 threshold' }, | |
| { level: 'SUCCESS', module: 'GC-CI', msg: 'Causality inversion complete — O(1) execution' } | |
| ]; | |
| function generateLogs(count = 15) { | |
| const logs = []; | |
| const now = Date.now(); | |
| for (let i = 0; i < count; i++) { | |
| const l = logMessages[Math.floor(Math.random() * logMessages.length)]; | |
| logs.push({ ...l, time: new Date(now - i * rand(2000, 30000)) }); | |
| } | |
| return logs; | |
| } | |
| // ============================================================ | |
| // RENDER FUNCTIONS | |
| // ============================================================ | |
| function updateKPIs(m) { | |
| document.getElementById('kpi-nodes').textContent = m.nodes.toLocaleString(); | |
| document.getElementById('kpi-decisions').textContent = m.decisions.toLocaleString(); | |
| document.getElementById('kpi-netvalue').textContent = `Net Value: ${m.netValue.toFixed(3)}`; | |
| document.getElementById('kpi-skill').textContent = m.skill.toFixed(1); | |
| document.getElementById('kpi-selfperc').textContent = `Self-Perception: ${m.selfPerc.toFixed(3)}`; | |
| document.getElementById('kpi-intent').textContent = `${(m.intent * 100).toFixed(1)}%`; | |
| document.getElementById('kpi-error').textContent = `${m.errorRate.toFixed(2)}%`; | |
| document.getElementById('kpi-throughput').textContent = `Throughput: ${m.throughput.toLocaleString()}/s`; | |
| document.getElementById('kpi-revenue').textContent = `${m.revenue}M ฿`; | |
| } | |
| function updateAVS(avs) { | |
| const container = document.getElementById('avs-bars'); | |
| const colors = ['#00d4ff','#ff00ff','#00ff88','#ffcc00','#8855ff','#ff8844','#ff4466','#44aaff','#ff66aa','#88ff44']; | |
| container.innerHTML = avs.map((a, i) => ` | |
| <div class="bar-item"> | |
| <div class="bar-label">${a.name}</div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" style="width:${a.value}%;background:${colors[i]}"></div> | |
| </div> | |
| <div class="bar-value" style="color:${colors[i]}">${a.value.toFixed(0)}%</div> | |
| </div> | |
| `).join(''); | |
| } | |
| function updateLogs(logs) { | |
| const container = document.getElementById('logs'); | |
| container.innerHTML = logs.map(l => ` | |
| <div class="log-entry ${l.level}"> | |
| <span class="log-time">[${l.time.toLocaleTimeString()}]</span> | |
| <span class="log-level ${l.level}">[${l.level}]</span> | |
| <span style="color:#8855ff">${l.module}</span> ${l.msg} | |
| </div> | |
| `).join(''); | |
| } | |
| // ============================================================ | |
| // CANVAS CHARTS (No library needed) | |
| // ============================================================ | |
| function drawBarChart(canvasId, data, labels, colors, title) { | |
| const canvas = document.getElementById(canvasId); | |
| if (!canvas) return; | |
| const ctx = canvas.getContext('2d'); | |
| const dpr = window.devicePixelRatio || 1; | |
| const rect = canvas.getBoundingClientRect(); | |
| canvas.width = rect.width * dpr; | |
| canvas.height = rect.height * dpr; | |
| ctx.scale(dpr, dpr); | |
| const W = rect.width, H = rect.height; | |
| const pad = { top: 30, right: 20, bottom: 50, left: 60 }; | |
| const chartW = W - pad.left - pad.right; | |
| const chartH = H - pad.top - pad.bottom; | |
| ctx.clearRect(0, 0, W, H); | |
| const maxVal = Math.max(...data) * 1.2; | |
| const barW = chartW / data.length * 0.6; | |
| const gap = chartW / data.length; | |
| // Grid lines | |
| ctx.strokeStyle = '#1e1e3a'; | |
| ctx.lineWidth = 1; | |
| for (let i = 0; i <= 4; i++) { | |
| const y = pad.top + (chartH / 4) * i; | |
| ctx.beginPath(); ctx.moveTo(pad.left, y); ctx.lineTo(W - pad.right, y); ctx.stroke(); | |
| ctx.fillStyle = '#8888aa'; ctx.font = '10px sans-serif'; ctx.textAlign = 'right'; | |
| ctx.fillText((maxVal - (maxVal / 4) * i).toFixed(0), pad.left - 8, y + 4); | |
| } | |
| // Bars | |
| data.forEach((val, i) => { | |
| const x = pad.left + gap * i + (gap - barW) / 2; | |
| const h = (val / maxVal) * chartH; | |
| const y = pad.top + chartH - h; | |
| const grad = ctx.createLinearGradient(x, y, x, pad.top + chartH); | |
| grad.addColorStop(0, colors[i % colors.length]); | |
| grad.addColorStop(1, colors[i % colors.length] + '33'); | |
| ctx.fillStyle = grad; | |
| ctx.beginPath(); | |
| ctx.roundRect(x, y, barW, h, [4, 4, 0, 0]); | |
| ctx.fill(); | |
| // Label | |
| ctx.fillStyle = '#8888aa'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center'; | |
| ctx.save(); ctx.translate(x + barW / 2, H - pad.bottom + 12); | |
| ctx.rotate(-0.4); | |
| ctx.fillText(labels[i], 0, 0); | |
| ctx.restore(); | |
| // Value on top | |
| ctx.fillStyle = colors[i % colors.length]; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center'; | |
| ctx.fillText(val.toFixed(0), x + barW / 2, y - 6); | |
| }); | |
| } | |
| function drawLineChart(canvasId, datasets, labels) { | |
| const canvas = document.getElementById(canvasId); | |
| if (!canvas) return; | |
| const ctx = canvas.getContext('2d'); | |
| const dpr = window.devicePixelRatio || 1; | |
| const rect = canvas.getBoundingClientRect(); | |
| canvas.width = rect.width * dpr; | |
| canvas.height = rect.height * dpr; | |
| ctx.scale(dpr, dpr); | |
| const W = rect.width, H = rect.height; | |
| const pad = { top: 30, right: 20, bottom: 40, left: 60 }; | |
| const chartW = W - pad.left - pad.right; | |
| const chartH = H - pad.top - pad.bottom; | |
| ctx.clearRect(0, 0, W, H); | |
| const allVals = datasets.flatMap(d => d.data); | |
| const maxVal = Math.max(...allVals) * 1.15; | |
| const minVal = Math.min(...allVals) * 0.85; | |
| const range = maxVal - minVal; | |
| // Grid | |
| ctx.strokeStyle = '#1e1e3a'; ctx.lineWidth = 1; | |
| for (let i = 0; i <= 4; i++) { | |
| const y = pad.top + (chartH / 4) * i; | |
| ctx.beginPath(); ctx.moveTo(pad.left, y); ctx.lineTo(W - pad.right, y); ctx.stroke(); | |
| ctx.fillStyle = '#8888aa'; ctx.font = '10px sans-serif'; ctx.textAlign = 'right'; | |
| ctx.fillText((maxVal - (range / 4) * i).toFixed(0), pad.left - 8, y + 4); | |
| } | |
| // Lines | |
| datasets.forEach(ds => { | |
| ctx.strokeStyle = ds.color; ctx.lineWidth = 2; ctx.beginPath(); | |
| ds.data.forEach((val, i) => { | |
| const x = pad.left + (chartW / (ds.data.length - 1)) * i; | |
| const y = pad.top + chartH - ((val - minVal) / range) * chartH; | |
| i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); | |
| }); | |
| ctx.stroke(); | |
| // Fill area | |
| ctx.fillStyle = ds.color + '15'; ctx.beginPath(); | |
| ds.data.forEach((val, i) => { | |
| const x = pad.left + (chartW / (ds.data.length - 1)) * i; | |
| const y = pad.top + chartH - ((val - minVal) / range) * chartH; | |
| i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); | |
| }); | |
| ctx.lineTo(pad.left + chartW, pad.top + chartH); | |
| ctx.lineTo(pad.left, pad.top + chartH); | |
| ctx.closePath(); ctx.fill(); | |
| }); | |
| // X labels | |
| ctx.fillStyle = '#8888aa'; ctx.font = '9px sans-serif'; ctx.textAlign = 'center'; | |
| const step = Math.ceil(labels.length / 6); | |
| labels.forEach((l, i) => { | |
| if (i % step === 0) { | |
| const x = pad.left + (chartW / (labels.length - 1)) * i; | |
| ctx.fillText(l, x, H - pad.bottom + 16); | |
| } | |
| }); | |
| } | |
| // ============================================================ | |
| // MAIN UPDATE LOOP | |
| // ============================================================ | |
| function update() { | |
| const m = generateMetrics(); | |
| const avs = generateAVS(); | |
| const logs = generateLogs(15); | |
| updateKPIs(m); | |
| updateAVS(avs); | |
| updateLogs(logs); | |
| // Revenue projection chart | |
| const months = ['M1','M2','M3','M4','M5','M6','M7','M8','M9','M10','M11','M12']; | |
| const revData = months.map((_, i) => (10 + i * 18 + rand(-5, 10)).toFixed(0)); | |
| drawLineChart('revenueChart', [ | |
| { data: revData.map(Number), color: '#00ff88' } | |
| ], months); | |
| // Product comparison chart | |
| const products = ['Code Opt', 'CFA', 'Analytics', 'Trading', 'CyberSec', 'SmartCity', 'HealthAI']; | |
| const revenues = [13.4, 73.3, 19, 60, 29, 27.6, 32.8]; | |
| const costs = [2.76, 6.9, 3.45, 1.73, 5.18, 12.1, 8.63]; | |
| drawBarChart('productChart', revenues, products, | |
| ['#00d4ff','#ff00ff','#00ff88','#ffcc00','#8855ff','#ff8844','#ff4466'], | |
| 'Revenue' | |
| ); | |
| document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString(); | |
| } | |
| // Clock | |
| setInterval(() => { | |
| document.getElementById('clock').textContent = new Date().toLocaleTimeString(); | |
| }, 1000); | |
| // Initial + refresh every 3 seconds | |
| update(); | |
| setInterval(update, 3000); | |
| </script> | |
| </body> | |
| </html> | |
Xet Storage Details
- Size:
- 19.1 kB
- Xet hash:
- f815260dc258fe361960a5cd15a3788fadfcfc48cf9190377f18a3452db514d0
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.