open-pencil/index.html at master · phuhao000/open-pencil · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#1e1e1e" />
    <title>OpenPencil</title>
    <style>
      :root {
        --loader-bg: #1e1e1e;
        --loader-fg: 255, 255, 255;
      }
      @media (prefers-color-scheme: light) {
        :root {
          --loader-bg: #f3f4f6;
          --loader-fg: 32, 33, 36;
        }
      }
      html[data-theme='dark'] {
        --loader-bg: #1e1e1e;
        --loader-fg: 255, 255, 255;
      }
      html[data-theme='light'] {
        --loader-bg: #f3f4f6;
        --loader-fg: 32, 33, 36;
      }
      body { margin: 0; background: var(--loader-bg); }
      #loader {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        color: rgb(var(--loader-fg));
        background: var(--loader-bg);
        transition: opacity 0.3s;
      }
      #loader.fade-out { opacity: 0; pointer-events: none; }
      #loader svg { width: 32px; height: 32px; opacity: 0.45; }
      #loader .bar {
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 40px);
        width: 100px;
        height: 2px;
        background: rgba(var(--loader-fg), 0.08);
        border-radius: 1px;
        overflow: hidden;
      }
      #loader .bar::after {
        content: '';
        display: block;
        height: 100%;
        width: 40%;
        background: rgba(var(--loader-fg), 0.25);
        border-radius: 1px;
        animation: slide 1s ease-in-out infinite;
      }
      @keyframes slide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(350%); }
      }
    </style>
  </head>

  <body>
    <div id="loader">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="m15.232 5.232 3.536 3.536m-2.036-5.036a2.5 2.5 0 0 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732Z"/>
      </svg>
      <div class="bar"></div>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>