Hugging Face's logo

Spaces:
82deutschmark
/
quantum-singularity-simulator
Running

App Files Community
82deutschmark commited on
Commit
cac2e17
·
verified ·
1 Parent(s): b7b4171

make this even crazier /**

Browse files

* Author: Claude Code using Sonnet 4.5
* Date: 2025-11-02
* PURPOSE: Ambient theatrical experience that gradually destabilizes metrics while users view the Arc AGI dashboard.
* Metrics randomly destabilize (flashing, glitching), accelerating an AGI countdown. Users can discover
* they can click destabilized metrics to stabilize them. Countdown reaching zero triggers Singularity endgame.
* All interactions are subtle and discoverable - no explicit game UI.
* SRP/DRY check: Pass - Metric configuration extracted to data structure, state management centralized in reducer,
* timer logic separated by concern, visual variants reusable.
*/
import React, { useState, useEffect, useReducer, useCallback } from 'react';
import { motion } from 'framer-motion';
import { ArcAgiCard } from './DashboardCard';

interface MetricsState {
quantumFlux: number;
tensorFields: number;
eigenValues: number;
hyperDimensions: number;
consciousnessLevel: number;
realityIntegrity: number;
neuralPathways: number;
quantumEntanglement: number;
waveCollapse: number;
darkMatter: number;
stringTheory: number;
multiverse: string;
coherence: number;
decoherenceRate: number;
planckNoise: number;
heisenbergVariance: number;
tachyonDrift: number;
anomalyIndex: number;
warpPotential: number;

// ML / AI metrics
lossFunction: number;
gradientDescentRate: number;
learningRate: number;
attentionHeads: number;
embeddingDimension: number;
batchNormalization: number;
dropoutRate: number;
activationEntropy: number;
weightInitialization: number;
optimizerMomentum: number;
backpropagationDepth: number;
convergenceScore: number;
alignmentStability: number;
nanoAlignmentFactor: number;
quantumGradientBoost: number;
terrierResonance: number;
Regularization: number;
}

type DestabilizationType = 'flicker' | 'colorShift' | 'valueSpike' | 'glitch';

interface MetricConfig {
key: keyof MetricsState;
label: string;
color: string;
category: 'quantum' | 'physics' | 'ml' | 'engineering';
destabilizationType: DestabilizationType;
clickable: boolean;
}

// Metric configuration - single source of truth
const METRIC_CONFIGS: MetricConfig[] = [
// Quantum metrics
{ key: 'quantumFlux', label: 'Quantum Flux', color: 'text-green-400', category: 'quantum', destabilizationType: 'flicker', clickable: true },
{ key: 'tensorFields', label: 'Tensor Fields', color: 'text-yellow-400', category: 'quantum', destabilizationType: 'valueSpike', clickable: true },
{ key: 'eigenValues', label: 'Eigenvalues', color: 'text-purple-400', category: 'quantum', destabilizationType: 'glitch', clickable: true },
{ key: 'hyperDimensions', label: 'Hyperdimensions', color: 'text-orange-400', category: 'quantum', destabilizationType: 'colorShift', clickable: false },
{ key: 'consciousnessLevel', label: 'Consciousness', color: 'text-green-400', category: 'quantum', destabilizationType: 'flicker', clickable: true },
{ key: 'realityIntegrity', label: 'Reality Integrity', color: 'text-red-400', category: 'quantum', destabilizationType: 'valueSpike', clickable: true },
{ key: 'coherence', label: 'Coherence', color: 'text-cyan-300', category: 'quantum', destabilizationType: 'flicker', clickable: true },
{ key: 'decoherenceRate', label: 'Decoherence', color: 'text-cyan-500', category: 'quantum', destabilizationType: 'valueSpike', clickable: true },

// Physics metrics
{ key: 'neuralPathways', label: 'Neural Pathways', color: 'text-pink-400', category: 'physics', destabilizationType: 'valueSpike', clickable: true },
{ key: 'quantumEntanglement', label: 'Entanglement', color: 'text-green-400', category: 'physics', destabilizationType: 'flicker', clickable: true },
{ key: 'waveCollapse', label: 'Wave Collapse', color: 'text-blue-400', category: 'physics', destabilizationType: 'glitch', clickable: true },
{ key: 'darkMatter', label: 'Dark Matter', color: 'text-purple-400', category: 'physics', destabilizationType: 'colorShift', clickable: true },
{ key: 'stringTheory', label: 'String Theory', color: 'text-yellow-400', category: 'physics', destabilizationType: 'glitch', clickable: true },
{ key: 'planckNoise', label: 'Planck Noise', color: 'text-blue-300', category: 'physics', destabilizationType: 'valueSpike', clickable: true },
{ key: 'heisenbergVariance', label: 'Heisenberg Var.', color: 'text-emerald-300', category: 'physics', destabilizationType: 'flicker', clickable: true },
{ key: 'tachyonDrift', label: 'Tachyon Drift', color: 'text-pink-300', category: 'physics', destabilizationType: 'glitch', clickable: true },
{ key: 'anomalyIndex', label: 'Anomaly Index', color: 'text-orange-300', category: 'physics', destabilizationType: 'valueSpike', clickable: true },
{ key: 'warpPotential', label: 'Warp Potential', color: 'text-yellow-300', category: 'physics', destabilizationType: 'colorShift', clickable: true },
{ key: 'multiverse', label: 'Multiverse', color: 'text-green-400', category: 'physics', destabilizationType: 'glitch', clickable: false },

// ML metrics
{ key: 'lossFunction', label: 'Loss', color: 'text-red-300', category: 'ml', destabilizationType: 'valueSpike', clickable: true },
{ key: 'gradientDescentRate', label: 'Grad Descent Rate', color: 'text-cyan-400', category: 'ml', destabilizationType: 'flicker', clickable: true },
{ key: 'learningRate', label: 'Learning Rate', color: 'text-green-300', category: 'ml', destabilizationType: 'glitch', clickable: true },
{ key: 'attentionHeads', label: 'Attention Heads', color: 'text-yellow-300', category: 'ml', destabilizationType: 'valueSpike', clickable: true },
{ key: 'embeddingDimension', label: 'Embedding Dim', color: 'text-purple-300', category: 'ml', destabilizationType: 'colorShift', clickable: true },
{ key: 'batchNormalization', label: 'Batch Norm', color: 'text-blue-300', category: 'ml', destabilizationType: 'flicker', clickable: true },
{ key: 'dropoutRate', label: 'Dropout', color: 'text-pink-300', category: 'ml', destabilizationType: 'valueSpike', clickable: true },
{ key: 'activationEntropy', label: 'Activation Entropy', color: 'text-emerald-300', category: 'ml', destabilizationType: 'glitch', clickable: true },
{ key: 'weightInitialization', label: 'Weight Init', color: 'text-orange-300', category: 'ml', destabilizationType: 'flicker', clickable: true },
{ key: 'optimizerMomentum', label: 'Momentum', color: 'text-cyan-300', category: 'ml', destabilizationType: 'colorShift', clickable: true },
{ key: 'backpropagationDepth', label: 'Backprop Depth', color: 'text-yellow-400', category: 'ml', destabilizationType: 'valueSpike', clickable: true },
{ key: 'convergenceScore', label: 'Convergence', color: 'text-green-400', category: 'ml', destabilizationType: 'flicker', clickable: true },
{ key: 'alignmentStability', label: 'Alignment Stability', color: 'text-green-300', category: 'ml', destabilizationType: 'valueSpike', clickable: true },
{ key: 'nanoAlignmentFactor', label: 'Nano‑Align Factor', color: 'text-purple-300', category: 'ml', destabilizationType: 'glitch', clickable: true },
{ key: 'quantumGradientBoost', label: 'Q‑Gradient Boost', color: 'text-blue-400', category: 'ml', destabilizationType: 'flicker', clickable: true },
{ key: 'terrierResonance', label: 'Terrier Resonance', color: 'text-pink-400', category: 'ml', destabilizationType: 'colorShift', clickable: true },
{ key: 'Regularization', label: 'Regularization', color: 'text-red-400', category: 'ml', destabilizationType: 'glitch', clickable: true },
];

// Ambient theater state (internal - not visible to user)
interface AmbientTheaterState {
phase: 'dormant' | 'awakening' | 'destabilizing' | 'critical' | 'singularity';
chaosLevel: number; // 0-100
countdownMs: number; // AGI countdown in milliseconds
destabilizedMetrics: Set<keyof MetricsState>;
lastInteractionTime: number;
stabilizationCount: number;
justStabilized: Map<keyof MetricsState, number>; // Track recent stabilizations for feedback
}

type TheaterAction =
| { type: 'AWAKEN' }
| { type: 'TICK'; deltaMs: number }
| { type: 'DESTABILIZE_METRIC'; metricKey: keyof MetricsState }
| { type: 'STABILIZE_METRIC'; metricKey: keyof MetricsState }
| { type: 'CLEAR_STABILIZATION_FEEDBACK'; metricKey: keyof MetricsState }
| { type: 'RESET' };

const INITIAL_COUNTDOWN_MS = 10 * 365 * 24 * 60 * 60 * 1000; // 10 years

const initialTheaterState: AmbientTheaterState = {
phase: 'dormant',
chaosLevel: 0,
countdownMs: INITIAL_COUNTDOWN_MS,
destabilizedMetrics: new Set(),
lastInteractionTime: Date.now(),
stabilizationCount: 0,
justStabilized: new Map(),
};

const BASE_DECAY_PER_TICK = 1_200_000; // tuned for ~3 minute collapse baseline before multipliers
const CHAOS_DIVISOR = 90; // larger divisor tempers chaos acceleration (max ≈ 2.1x)
const DESTABILIZATION_POWER = 1.2;
const DESTABILIZATION_COEFFICIENT = 0.6;

function calculateDecayMultipliers(chaosLevel: number, destabilizedCount: number) {
const chaosMultiplier = 1 + (chaosLevel / CHAOS_DIVISOR);
const destabilizationMultiplier = destabilizedCount === 0
? 1
: 1 + (Math.pow(destabilizedCount, DESTABILIZATION_POWER) * DESTABILIZATION_COEFFICIENT);

return {
chaosMultiplier,
destabilizationMultiplier,
total: chaosMultiplier * destabilizationMultiplier,
};
}

function theaterReducer(state: AmbientTheaterState, action: TheaterAction): AmbientTheaterState {
switch (action.type) {
case 'AWAKEN':
return { ...state, phase: 'awakening' };

case 'TICK': {
const now = Date.now();

// Calculate chaos growth
const timeSinceInteraction = now - state.lastInteractionTime;
const growthRate = timeSinceInteraction > 5000 ? 0.35 : 0.12; // Gradual escalation without stabilization
const newChaos = Math.min(100, state.chaosLevel + (growthRate * (action.deltaMs / 100)));

// Phase transitions based on chaos level
let newPhase = state.phase;
if (newChaos > 20 && state.phase === 'awakening') {
newPhase = 'destabilizing';
} else if (newChaos > 60 && state.phase === 'destabili

Files changed (3) hide show
  1. README.md +7 -4
  2. index.html +301 -19
  3. style.css +13 -23
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quantum Singularity Simulator
3
- emoji: 🦀
4
- colorFrom: purple
5
  colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Quantum Singularity Simulator 🌌
3
+ colorFrom: red
 
4
  colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,301 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum Singularity Simulator</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ quantum: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ singularity: {
30
+ 50: '#f5f3ff',
31
+ 100: '#ede9fe',
32
+ 200: '#ddd6fe',
33
+ 300: '#c4b5fd',
34
+ 400: '#a78bfa',
35
+ 500: '#8b5cf6',
36
+ 600: '#7c3aed',
37
+ 700: '#6d28d9',
38
+ 800: '#5b21b6',
39
+ 900: '#4c1d95',
40
+ },
41
+ darkmatter: {
42
+ 900: '#0f172a',
43
+ 800: '#1e293b',
44
+ 700: '#334155',
45
+ 600: '#475569',
46
+ 500: '#64748b',
47
+ 400: '#94a3b8',
48
+ 300: '#cbd5e1',
49
+ 200: '#e2e8f0',
50
+ 100: '#f1f5f9',
51
+ 50: '#f8fafc',
52
+ }
53
+ },
54
+ fontFamily: {
55
+ mono: ['"Space Mono"', 'monospace'],
56
+ sans: ['"Exo 2"', 'sans-serif']
57
+ },
58
+ animation: {
59
+ 'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
60
+ 'glitch': 'glitch 1s linear infinite',
61
+ 'hologram': 'hologram 3s ease-in-out infinite',
62
+ 'quantum-flicker': 'quantumFlicker 0.5s infinite alternate',
63
+ },
64
+ keyframes: {
65
+ glitch: {
66
+ '0%, 100%': { transform: 'translate(0)' },
67
+ '20%': { transform: 'translate(-2px, 2px)' },
68
+ '40%': { transform: 'translate(-2px, -2px)' },
69
+ '60%': { transform: 'translate(2px, 2px)' },
70
+ '80%': { transform: 'translate(2px, -2px)' }
71
+ },
72
+ hologram: {
73
+ '0%, 100%': { opacity: 0.8 },
74
+ '50%': { opacity: 0.3 }
75
+ },
76
+ quantumFlicker: {
77
+ '0%': { opacity: 0.7 },
78
+ '100%': { opacity: 1 }
79
+ }
80
+ }
81
+ }
82
+ }
83
+ }
84
+ </script>
85
+ </head>
86
+ <body class="bg-darkmatter-900 text-darkmatter-100 font-mono min-h-screen overflow-x-hidden">
87
+ <div class="container mx-auto px-4 py-8">
88
+ <!-- Quantum Dashboard -->
89
+ <div class="bg-darkmatter-800/50 backdrop-blur-lg rounded-xl border border-quantum-700/30 shadow-2xl shadow-quantum-900/20 overflow-hidden">
90
+ <!-- Header -->
91
+ <div class="border-b border-quantum-700/30 px-6 py-4 flex items-center justify-between bg-gradient-to-r from-darkmatter-800/50 to-quantum-900/10">
92
+ <div class="flex items-center space-x-3">
93
+ <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse-fast"></div>
94
+ <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse-fast"></div>
95
+ <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse-fast"></div>
96
+ <h1 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-quantum-400 to-singularity-400">
97
+ QUANTUM HYPERCORE STATUS
98
+ </h1>
99
+ </div>
100
+ <div class="flex items-center space-x-2">
101
+ <span class="text-xs px-2 py-1 rounded-full bg-quantum-900/50 text-quantum-300 border border-quantum-700/50">
102
+ <span class="animate-pulse-fast">⚡</span> v0.0.29
103
+ </span>
104
+ <span class="text-xs px-2 py-1 rounded-full bg-singularity-900/50 text-singularity-300 border border-singularity-700/50">
105
+ <span class="animate-pulse-fast">🌀</span> PRISM AI
106
+ </span>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Main Content -->
111
+ <div class="p-4">
112
+ <!-- Metrics Grid -->
113
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
114
+ <!-- Quantum Metrics Column -->
115
+ <div class="bg-darkmatter-700/20 rounded-lg border border-quantum-700/20 p-3">
116
+ <h2 class="text-sm font-bold text-quantum-300 mb-3 flex items-center">
117
+ <i data-feather="activity" class="w-4 h-4 mr-2"></i> QUANTUM METRICS
118
+ </h2>
119
+ <div class="space-y-2 text-xs">
120
+ <div class="flex justify-between items-center">
121
+ <span class="text-darkmatter-300">Quantum Flux:</span>
122
+ <span class="text-quantum-400 font-mono animate-quantum-flicker">99.7834%</span>
123
+ </div>
124
+ <div class="flex justify-between items-center">
125
+ <span class="text-darkmatter-300">Tensor Fields:</span>
126
+ <span class="text-quantum-400 font-mono">847,329</span>
127
+ </div>
128
+ <div class="flex justify-between items-center">
129
+ <span class="text-darkmatter-300">Eigenvalues:</span>
130
+ <span class="text-quantum-400 font-mono">42.000001</span>
131
+ </div>
132
+ <div class="flex justify-between items-center">
133
+ <span class="text-darkmatter-300">Consciousness:</span>
134
+ <span class="text-quantum-400 font-mono animate-pulse-fast">97.4%</span>
135
+ </div>
136
+ <div class="flex justify-between items-center">
137
+ <span class="text-darkmatter-300">Reality Integrity:</span>
138
+ <span class="text-quantum-400 font-mono">99.99%</span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Physics Metrics Column -->
144
+ <div class="bg-darkmatter-700/20 rounded-lg border border-singularity-700/20 p-3">
145
+ <h2 class="text-sm font-bold text-singularity-300 mb-3 flex items-center">
146
+ <i data-feather="compass" class="w-4 h-4 mr-2"></i> PHYSICS METRICS
147
+ </h2>
148
+ <div class="space-y-2 text-xs">
149
+ <div class="flex justify-between items-center">
150
+ <span class="text-darkmatter-300">Neural Pathways:</span>
151
+ <span class="text-singularity-400 font-mono">9,847,329</span>
152
+ </div>
153
+ <div class="flex justify-between items-center">
154
+ <span class="text-darkmatter-300">Quantum Entanglement:</span>
155
+ <span class="text-singularity-400 font-mono">99.7%</span>
156
+ </div>
157
+ <div class="flex justify-between items-center">
158
+ <span class="text-darkmatter-300">Wave Collapse:</span>
159
+ <span class="text-singularity-400 font-mono">0.00001μs</span>
160
+ </div>
161
+ <div class="flex justify-between items-center">
162
+ <span class="text-darkmatter-300">Dark Matter:</span>
163
+ <span class="text-singularity-400 font-mono">23.8%</span>
164
+ </div>
165
+ <div class="flex justify-between items-center">
166
+ <span class="text-darkmatter-300">Multiverse:</span>
167
+ <span class="text-singularity-400 font-mono animate-pulse-fast">STABLE</span>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- ML Metrics Column -->
173
+ <div class="bg-darkmatter-700/20 rounded-lg border border-purple-700/20 p-3">
174
+ <h2 class="text-sm font-bold text-purple-300 mb-3 flex items-center">
175
+ <i data-feather="cpu" class="w-4 h-4 mr-2"></i> ML METRICS
176
+ </h2>
177
+ <div class="space-y-2 text-xs">
178
+ <div class="flex justify-between items-center">
179
+ <span class="text-darkmatter-300">Loss:</span>
180
+ <span class="text-purple-400 font-mono">4.20e-2</span>
181
+ </div>
182
+ <div class="flex justify-between items-center">
183
+ <span class="text-darkmatter-300">Gradient Descent:</span>
184
+ <span class="text-purple-400 font-mono">0.880</span>
185
+ </div>
186
+ <div class="flex justify-between items-center">
187
+ <span class="text-darkmatter-300">Learning Rate:</span>
188
+ <span class="text-purple-400 font-mono">3.00e-4</span>
189
+ </div>
190
+ <div class="flex justify-between items-center">
191
+ <span class="text-darkmatter-300">Attention Heads:</span>
192
+ <span class="text-purple-400 font-mono">32</span>
193
+ </div>
194
+ <div class="flex justify-between items-center">
195
+ <span class="text-darkmatter-300">Convergence:</span>
196
+ <span class="text-purple-400 font-mono animate-pulse-fast">98.6%</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Engineering Metrics Column -->
202
+ <div class="bg-darkmatter-700/20 rounded-lg border border-cyan-700/20 p-3">
203
+ <h2 class="text-sm font-bold text-cyan-300 mb-3 flex items-center">
204
+ <i data-feather="tool" class="w-4 h-4 mr-2"></i> ENGINEERING
205
+ </h2>
206
+ <div class="space-y-2 text-xs">
207
+ <div class="flex justify-between items-center">
208
+ <span class="text-darkmatter-300">SNR:</span>
209
+ <span class="text-cyan-400 font-mono">24.7 dB</span>
210
+ </div>
211
+ <div class="flex justify-between items-center">
212
+ <span class="text-darkmatter-300">Impedance:</span>
213
+ <span class="text-cyan-400 font-mono">53.2 Ω</span>
214
+ </div>
215
+ <div class="flex justify-between items-center">
216
+ <span class="text-darkmatter-300">Nyquist Rate:</span>
217
+ <span class="text-cyan-400 font-mono">44.8 kHz</span>
218
+ </div>
219
+ <div class="flex justify-between items-center">
220
+ <span class="text-darkmatter-300">Voltage:</span>
221
+ <span class="text-cyan-400 font-mono">3.34 V</span>
222
+ </div>
223
+ <div class="flex justify-between items-center">
224
+ <span class="text-darkmatter-300">F1 Score:</span>
225
+ <span class="text-cyan-400 font-mono animate-pulse-fast">0.942</span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Countdown Section -->
232
+ <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
233
+ <!-- AGI Countdown -->
234
+ <div class="bg-gradient-to-br from-quantum-900/30 to-singularity-900/30 rounded-lg border border-quantum-700/30 p-3 text-center">
235
+ <div class="text-xs uppercase tracking-widest text-quantum-300 mb-1">AGI ETA</div>
236
+ <div class="text-2xl font-bold text-quantum-400 font-mono mb-1 animate-pulse-fast">10y 23d 4h</div>
237
+ <div class="text-[10px] text-quantum-500">+42% decay rate</div>
238
+ </div>
239
+
240
+ <!-- P vs NP -->
241
+ <div class="bg-gradient-to-br from-pink-900/30 to-purple-900/30 rounded-lg border border-pink-700/30 p-3 text-center">
242
+ <div class="text-xs uppercase tracking-widest text-pink-300 mb-1">P vs NP</div>
243
+ <div class="text-2xl font-bold text-pink-400 font-mono mb-1">3y 184d</div>
244
+ <div class="text-[10px] text-pink-500">Millennium Prize</div>
245
+ </div>
246
+
247
+ <!-- Riemann -->
248
+ <div class="bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-lg border border-purple-700/30 p-3 text-center">
249
+ <div class="text-xs uppercase tracking-widest text-purple-300 mb-1">Riemann</div>
250
+ <div class="text-2xl font-bold text-purple-400 font-mono mb-1">2y 354d</div>
251
+ <div class="text-[10px] text-purple-500">Critical Line</div>
252
+ </div>
253
+
254
+ <!-- Navier-Stokes -->
255
+ <div class="bg-gradient-to-br from-blue-900/30 to-cyan-900/30 rounded-lg border border-blue-700/30 p-3 text-center">
256
+ <div class="text-xs uppercase tracking-widest text-blue-300 mb-1">Navier-Stokes</div>
257
+ <div class="text-2xl font-bold text-blue-400 font-mono mb-1">6y 132d</div>
258
+ <div class="text-[10px] text-blue-500">Regularity?</div>
259
+ </div>
260
+
261
+ <!-- Birch-Swinnerton -->
262
+ <div class="bg-gradient-to-br from-emerald-900/30 to-green-900/30 rounded-lg border border-emerald-700/30 p-3 text-center">
263
+ <div class="text-xs uppercase tracking-widest text-emerald-300 mb-1">Birch-Swinn.</div>
264
+ <div class="text-2xl font-bold text-emerald-400 font-mono mb-1">5y 281d</div>
265
+ <div class="text-[10px] text-emerald-500">Conjecture</div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Status Bar -->
271
+ <div class="border-t border-quantum-700/30 px-4 py-2 bg-darkmatter-800/50 flex items-center justify-between text-xs">
272
+ <div class="flex items-center space-x-4">
273
+ <span class="text-quantum-400 flex items-center">
274
+ <i data-feather="cpu" class="w-3 h-3 mr-1"></i> 42.0 THz
275
+ </span>
276
+ <span class="text-singularity-400 flex items-center">
277
+ <i data-feather="database" class="w-3 h-3 mr-1"></i> 7.77 ZB
278
+ </span>
279
+ <span class="text-purple-400 flex items-center">
280
+ <i data-feather="zap" class="w-3 h-3 mr-1"></i> 1.21 GW
281
+ </span>
282
+ </div>
283
+ <div class="text-darkmatter-400">
284
+ <span class="animate-pulse-fast">⚠</span> 3 UNSTABLE METRICS
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Web Components -->
291
+ <script src="components/quantum-meter.js"></script>
292
+ <script src="components/singularity-alert.js"></script>
293
+
294
+ <!-- Scripts -->
295
+ <script src="script.js"></script>
296
+ <script>
297
+ feather.replace();
298
+ </script>
299
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
300
+ </body>
301
+ </html>
style.css CHANGED
@@ -1,28 +1,18 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
 
 
 
 
 
 
 
 
2
 
3
+ /* Base styles */
4
+ body {
5
+ background-image:
6
+ radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.1) 0%, transparent 20%),
7
+ radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
8
+ background-attachment: fixed;
9
  }
10
 
11
+ /* Custom animations */
12
+ @keyframes quantumPulse {
13
+ 0%, 100% { opacity: 1; }
14
+ 50% { opacity: 0.7; }
 
 
15
  }
16
 
17
+ @keyframes singularityGlow {
18
+ 0% { box-shadow