curstat/index.html at main · apptension/curstat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CURSTAT // VISUALIZER</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" crossorigin="anonymous">
    <style>
      /* Brand Colors */
      :root {
        --brand-yellow: #FFFE25;
        --brand-green: #42F272;
        --top-tier-gradient: linear-gradient(to right, var(--brand-yellow), var(--brand-green));
        --top-tier-gradient-v: linear-gradient(to top, var(--brand-yellow), var(--brand-green));
        --standard-cyan: #00E5FF;
        --standard-cyan-glow: rgba(0, 229, 255, 0.4);
      }

      body {
        font-family: 'Share Tech Mono', monospace;
        background-color: #030303;
        background-image:
          radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.8) 0%, rgba(3, 3, 3, 1) 100%),
          url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10L90 90M90 10L10 90' stroke='rgba(255, 254, 37, 0.02)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
        color: #e4e4e7; /* zinc-200 */
        overflow-x: hidden;
        min-height: 100vh;
      }
      .font-pixel {
        font-family: 'VT323', monospace;
      }
      .font-code {
        font-family: 'JetBrains Mono', monospace;
      }
      /* Custom Scrollbar */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: #000;
      }
      ::-webkit-scrollbar-thumb {
        background: #3f3f46; /* zinc-700 */
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #52525b; /* zinc-600 */
      }

      /* Cyberpunk Timeline Scrollbar */
      .timeline-scroll::-webkit-scrollbar {
        height: 6px; /* Slightly taller for visibility */
      }
      .timeline-scroll::-webkit-scrollbar-track {
        background: #0a0a0a;
        border-top: 1px solid #18181b; /* Zinc-900 line */
      }
      .timeline-scroll::-webkit-scrollbar-thumb {
        background: #27272a; /* Zinc-800 */
        border: 1px solid #000;
      }
      .timeline-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--standard-cyan);
        border-color: var(--standard-cyan);
        box-shadow: 0 0 10px var(--standard-cyan-glow);
      }
      /* Glassmorphism Classes */
      .glass-panel {
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .glass-border-amber {
        border-color: rgba(245, 158, 11, 0.2);
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);
      }

      .brand-gradient-text {
        background: var(--top-tier-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .brand-gradient-bg {
        background: var(--top-tier-gradient);
      }
      /* Link hover: brand gradient */
      a:hover {
        background: var(--top-tier-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  <script type="importmap">
{
  "imports": {
    "@google/genai": "https://esm.sh/@google/genai@^1.38.0",
    "react/": "https://esm.sh/react@^19.2.3/",
    "react": "https://esm.sh/react@^19.2.3",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "react-markdown": "https://esm.sh/react-markdown@^10.1.0",
    "framer-motion": "https://esm.sh/framer-motion@^12.29.0",
    "recharts": "https://esm.sh/recharts@^3.7.0",
    "lucide-react": "https://esm.sh/lucide-react@^0.562.0",
    "react-dom": "https://esm.sh/react-dom@^19.2.3",
    "html-to-image": "https://esm.sh/html-to-image@^1.11.11"
  }
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
  <body>
    <div id="root"></div>
  <script type="module" src="/index.tsx"></script>
</body>
</html>