zenv/index.html at main · ashroxy/zenv · 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
<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Zenv</title>
    <style>
      html, body, #root {
        height: 100%;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden; /* Prevent body scroll, handle scroll in containers */
        background-color: #000000;
        color: #ffffff;
        -webkit-tap-highlight-color: transparent;
      }

      /* Safe Area Padding Utility */
      .pt-safe {
        padding-top: env(safe-area-inset-top);
      }
      .pb-safe {
        padding-bottom: env(safe-area-inset-bottom);
      }

      /* Smooth scrolling */
      .scroll-smooth {
        -webkit-overflow-scrolling: touch;
      }

      /* Custom Scrollbar for hidden but functional scrolling */
      ::-webkit-scrollbar {
        width: 0px;
        background: transparent;
      }

      /* Input Range Reset */
      input[type=range] {
        -webkit-appearance: none;
        background: transparent;
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 10px rgba(255,255,255,0.5);
        cursor: pointer;
        margin-top: -8px;
      }
      input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 999px;
      }
    </style>

<link rel="stylesheet" href="/index.css">
</head>
  <body>
    <div id="root"></div>
  <script type="module" src="/index.tsx"></script>
</body>
</html>