vite-corex-themex-tailwind/timer.html at master · netoum/vite-corex-themex-tailwind · 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
121
122
123
124
125
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/images/corex.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Corex Timer</title>
  <script type="module" src="/src/main.ts"></script>
</head>

<body>
  <header>
    <a href="/">
      <svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 428 136" version="1.1">
        <path
          d="M70.573 1.67C33.94 1.67 4.243 31.367 4.243 68c0 36.634 29.697 66.33 66.33 66.33s66.33-29.696 66.33-66.33c0-36.633-29.697-66.33-66.33-66.33m.05 102.736c-20.117 0-36.427-16.308-36.427-36.427 0-20.118 16.31-36.427 36.427-36.427 17.055 0 31.37 11.723 35.333 27.55H89.845c-3.365-7.255-10.713-12.301-19.222-12.301-11.678 0-21.179 9.501-21.179 21.18s9.501 21.178 21.18 21.178c8.539 0 15.907-5.08 19.256-12.377h16.095c-3.939 15.864-18.269 27.624-35.352 27.624"
          fill="currentColor" />
        <path
          d="M181.505 108.48q-10.5 0-19.24-4.88-8.75-4.87-13.89-13.62-5.14-8.74-5.14-19.66t5.14-19.61q5.14-8.69 13.89-13.57 8.74-4.87 19.24-4.87 10.49 0 19.24 4.87 8.74 4.88 13.78 13.57 5.03 8.69 5.03 19.61t-5.09 19.66q-5.09 8.75-13.78 13.62-8.69 4.88-19.18 4.88m0-16.54q8.9 0 14.25-5.93 5.36-5.94 5.36-15.69 0-9.86-5.36-15.74-5.35-5.88-14.25-5.88-9.01 0-14.37 5.83-5.35 5.83-5.35 15.79 0 9.86 5.35 15.74 5.36 5.88 14.37 5.88"
          fill="currentColor" />
        <path
          d="m267.575 107.74-15.48-28.09h-4.34v28.09h-18.13V33.33h30.42q8.8 0 15 3.07 6.2 3.07 9.28 8.43 3.07 5.35 3.07 11.92 0 7.42-4.19 13.25-4.18 5.83-12.35 8.27l17.18 29.47Zm-19.82-40.92h11.23q4.98 0 7.48-2.44 2.49-2.43 2.49-6.89 0-4.24-2.49-6.67-2.5-2.44-7.48-2.44h-11.23Z"
          fill="currentColor" />
        <path d="M316.865 47.85V62.9h24.27v13.99h-24.27v16.33h27.45v14.52h-45.58V33.33h45.58v14.52Z"
          fill="currentColor" />
        <path
          d="m401.665 107.74-15.16-22.79-13.36 22.79h-20.56l23.85-37.84-24.38-36.57h21.09l14.95 22.47 13.14-22.47h20.57l-23.64 37.52 24.59 36.89Z"
          fill="currentColor" />
      </svg>
    </a>
    <div class="switcher switcher-js switcher--duo switcher--sm switcher--circle" data-default-value="light"
      data-key="mode" data-on-value-change="update-mode-switcher-demo">
      <div data-part="root">
        <button data-part="item" data-value="light" aria-label="Switch to light color mode">
          <svg class="item__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
          </svg>
        </button>
        <button data-part="item" data-value="dark" aria-label="Switch to dark color mode">
          <svg class="item__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
          </svg>
        </button>
      </div>
    </div>
    <div class="switcher switcher-js switcher--sm" data-default-value="neo" data-key="theme">
      <div data-part="root">
        <button data-part="item" data-value="neo"
          class="data-[state=on]:bg-accent-brand data-[state=on]:text-accent-contrast data-[state=on]:hover:bg-accent-brand-1 data-[state=on]:active:bg-accent-brand-2"
          aria-label="Switch to Neo theme">
          Neo
        </button>
        <button data-part="item" data-value="revo"
          class="data-[state=on]:bg-accent-brand data-[state=on]:text-accent-contrast data-[state=on]:hover:bg-accent-brand-1 data-[state=on]:active:bg-accent-brand-2"
          aria-label="Switch to Revo theme">
          Revo
        </button>
        <button data-part="item" data-value="uno"
          class="data-[state=on]:bg-accent-brand data-[state=on]:text-accent-contrast data-[state=on]:hover:bg-accent-brand-1 data-[state=on]:active:bg-accent-brand-2"
          aria-label="Switch to Uno theme">
          Uno
        </button>
      </div>
    </div>
  </header>
  <main>
    <h1>Timer</h1>
    <div class="preview">
      <div class="timer timer-js" data-countdown="true" data-auto-start="true" data-interval="1000" data-days="1"
        data-hours="0" data-minutes="0" data-seconds="0">
        <div data-part="root">
          <div data-part="area">
            <div data-part="item" data-type="days"></div>
            <div data-part="separator">:</div>
            <div data-part="item" data-type="hours"></div>
            <div data-part="separator">:</div>
            <div data-part="item" data-type="minutes"></div>
            <div data-part="separator">:</div>
            <div data-part="item" data-type="seconds"></div>
          </div>
        </div>
        <div data-part="control">
          <button class="button button--circle button--sm" data-part="action-trigger" data-action="start">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="button__icon">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z">
              </path>
            </svg>
          </button>
          <button class="button button--circle button--sm" data-part="action-trigger" data-action="pause">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="button__icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5"></path>
            </svg>
          </button>
          <button class="button button--circle button--sm" data-part="action-trigger" data-action="resume">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="button__icon">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z">
              </path>
            </svg>
          </button>
          <button class="button button--circle button--sm" data-part="action-trigger" data-action="reset">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="button__icon">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3">
              </path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </main>
</body>

</html>