Spaces:
Sleeping
Sleeping
Create index.html
Browse files- index.html +79 -0
index.html
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
| 6 |
+
<title>DEFRAG.APP // CORE</title>
|
| 7 |
+
|
| 8 |
+
<!-- iOS Native App Meta Tags -->
|
| 9 |
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
| 10 |
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
| 11 |
+
<link rel="manifest" href="/manifest.json">
|
| 12 |
+
|
| 13 |
+
<!-- Styling: Tailwind & Premium Fonts -->
|
| 14 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 15 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap" rel="stylesheet">
|
| 16 |
+
|
| 17 |
+
<style>
|
| 18 |
+
body { font-family: 'Inter', sans-serif; background: black; color: white; margin: 0; padding: 0; overflow: hidden; }
|
| 19 |
+
.defrag-bg { background: radial-gradient(circle at 50% 50%, #0a0a0a 0%, #000000 100%); height: 100vh; width: 100vw; }
|
| 20 |
+
.glass-ui { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
|
| 21 |
+
.agent-glow { background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%); filter: blur(80px); }
|
| 22 |
+
.safe-pb { padding-bottom: env(safe-area-inset-bottom); }
|
| 23 |
+
</style>
|
| 24 |
+
</head>
|
| 25 |
+
<body>
|
| 26 |
+
<div id="root" class="defrag-bg flex flex-col items-center justify-between p-8 safe-pb">
|
| 27 |
+
<!-- HEADER -->
|
| 28 |
+
<nav class="w-full flex justify-between items-center z-50 mt-4">
|
| 29 |
+
<div class="flex items-center gap-3">
|
| 30 |
+
<div class="h-1.5 w-1.5 rounded-full bg-cyan-500 animate-pulse"></div>
|
| 31 |
+
<span class="text-[10px] tracking-[0.4em] uppercase opacity-40 font-bold">DEFRAG.APP // OS</span>
|
| 32 |
+
</div>
|
| 33 |
+
<div id="status-pill" class="glass-ui px-4 py-1.5 rounded-full text-[9px] font-bold uppercase tracking-widest opacity-80">System Idle</div>
|
| 34 |
+
</nav>
|
| 35 |
+
|
| 36 |
+
<!-- CENTRAL CANVAS -->
|
| 37 |
+
<div class="relative flex-grow w-full flex items-center justify-center">
|
| 38 |
+
<div id="glow" class="agent-glow absolute h-[80vh] w-[80vh] rounded-full opacity-40 transition-all duration-300 scale-100"></div>
|
| 39 |
+
<canvas id="rive-canvas" class="z-10 w-[75vh] h-[75vh]"></canvas>
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<!-- FOOTER: AGENT CONTROL -->
|
| 43 |
+
<footer class="w-full max-w-2xl glass-ui rounded-[2.5rem] p-6 mb-4 flex items-center gap-6 z-50">
|
| 44 |
+
<button id="mic-btn" class="relative h-16 w-16 flex-shrink-0">
|
| 45 |
+
<div id="btn-blur" class="absolute inset-0 rounded-full blur-xl bg-cyan-500/10 transition-all duration-500"></div>
|
| 46 |
+
<div class="relative h-full w-full rounded-full border border-white/10 bg-white/5 flex items-center justify-center">
|
| 47 |
+
<div id="btn-core" class="h-4 w-4 bg-cyan-500 rounded-full animate-pulse"></div>
|
| 48 |
+
</div>
|
| 49 |
+
</button>
|
| 50 |
+
<div class="flex-grow">
|
| 51 |
+
<p id="synthesis-text" class="text-sm font-light leading-snug tracking-tight opacity-70">Initialize the Pioneer to begin analysis.</p>
|
| 52 |
+
</div>
|
| 53 |
+
</footer>
|
| 54 |
+
</div>
|
| 55 |
+
|
| 56 |
+
<!-- Scripts -->
|
| 57 |
+
<script src="https://unpkg.com/@rive-app/canvas@latest"></script>
|
| 58 |
+
|
| 59 |
+
<script>
|
| 60 |
+
const statusPill = document.getElementById('status-pill');
|
| 61 |
+
const synthesisText = document.getElementById('synthesis-text');
|
| 62 |
+
const micBtn = document.getElementById('mic-btn');
|
| 63 |
+
const glow = document.getElementById('glow');
|
| 64 |
+
|
| 65 |
+
const r = new rive.Rive({
|
| 66 |
+
src: '/assets/defrag_agent.riv',
|
| 67 |
+
canvas: document.getElementById('rive-canvas'),
|
| 68 |
+
autoplay: true,
|
| 69 |
+
stateMachines: 'DefragOS',
|
| 70 |
+
onLoad: () => { r.resizeDrawingSurfaceToCanvas(); }
|
| 71 |
+
});
|
| 72 |
+
|
| 73 |
+
micBtn.onclick = async () => {
|
| 74 |
+
statusPill.innerText = "Synthesizing...";
|
| 75 |
+
synthesisText.innerText = "Connecting to DEFRAG Core...";
|
| 76 |
+
};
|
| 77 |
+
</script>
|
| 78 |
+
</body>
|
| 79 |
+
</html>
|