liquidstonk-visualizer/index.html at main · Giorgio-Cottini/liquidstonk-visualizer · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <title>GioVisualizer</title>
    <style>
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      body { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-page); }
      button { font-family: inherit; }

      :root {
        --bg-page:     #F2F2F7;
        --bg-card:     #FFFFFF;
        --bg-plot:     #FAFAFC;
        --bg-spark:    #F9F9FB;
        --bg-panel:    #FAFAFC;
        --bg-header:   #FFFFFF;
        --border-card: 0 2px 12px #00000012;
        --border-primary:  #E5E5EA;
        --border-subtle:   #F0F0F5;
        --border-grid:     #EBEBF0;
        --text-primary:    #1C1C1E;
        --text-secondary:  #6C6C70;
        --text-tertiary:   #AEAEB2;
        --hover-bg:        #FFFFFF;
        --hover-border:    #E5E5EA;
        --hover-text:      #1C1C1E;
        --color-accent:    #007AFF;
        --color-positive:  #34C759;
        --color-negative:  #FF3B30;
        --grid-line:       rgba(0, 0, 0, 0.045);
        --grid-fade:       #F2F2F7;
        --glass-bg:        rgba(255, 255, 255, 0.72);
        --glass-border:    rgba(255, 255, 255, 0.65);
        --glass-shadow:    0 12px 40px rgba(0, 0, 0, 0.12);
        --dash-idle:       rgba(0, 122, 255, 0.45);
        --dash-active:     rgba(0, 122, 255, 0.95);
        --dropzone-fill:   rgba(0, 122, 255, 0.04);
      }

      :root.dark {
        --bg-page:     #1C1917;
        --bg-card:     #262220;
        --bg-plot:     #211F1D;
        --bg-spark:    #1E1C1A;
        --bg-panel:    #1F1D1B;
        --bg-header:   #201E1B;
        --border-card: 0 2px 12px #00000040;
        --border-primary:  #3D3830;
        --border-subtle:   #302C28;
        --border-grid:     #353028;
        --text-primary:    #F0EBE3;
        --text-secondary:  #9E9590;
        --text-tertiary:   #7A7268;
        --hover-bg:        #262220;
        --hover-border:    #3D3830;
        --hover-text:      #F0EBE3;
        --grid-line:       rgba(255, 255, 255, 0.035);
        --grid-fade:       #1C1917;
        --glass-bg:        rgba(38, 34, 32, 0.55);
        --glass-border:    rgba(255, 255, 255, 0.08);
        --glass-shadow:    0 12px 40px rgba(0, 0, 0, 0.45);
        --dash-idle:       rgba(90, 169, 255, 0.45);
        --dash-active:     rgba(120, 185, 255, 1);
        --dropzone-fill:   rgba(0, 122, 255, 0.07);
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>