sixteen/index.html at main · karnstack/sixteen · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!doctype html>
<html lang="en" class="antialiased" data-state="asking">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>sixteen.sh — do you wanna work sixteen hours a day?</title>
    <meta name="description" content="One question. Two answers. Only one of them works." />

    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://sixteen.sh/" />
    <meta property="og:site_name" content="sixteen.sh" />
    <meta property="og:title" content="do you wanna work sixteen hours a day?" />
    <meta property="og:description" content="One question. Two answers. Only one of them works." />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="do you wanna work sixteen hours a day?" />
    <meta name="twitter:description" content="One question. Two answers. Only one of them works." />

    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="canonical" href="https://sixteen.sh/" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <script>
      // Pre-paint so the page never flashes the wrong theme. Stored preference
      // wins over the OS; `d` writes that preference.
      ;(() => {
        let stored = null
        try {
          stored = localStorage.getItem('theme')
        } catch {}
        const dark = stored ? stored === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches
        document.documentElement.classList.toggle('dark', dark)
      })()
    </script>

    <link rel="stylesheet" href="/src/styles.css" />
  </head>

  <body class="bg-white font-mono text-zinc-950 dark:bg-zinc-950 dark:text-white">
    <div
      class="isolate mx-auto grid min-h-dvh max-w-2xl grid-rows-[auto_1fr_auto] gap-12 px-6 py-6 sm:px-8"
    >
      <header class="flex animate-fade items-center justify-between text-base sm:text-sm">
        <p class="text-zinc-500 dark:text-zinc-400">sixteen.sh</p>

        <button
          type="button"
          data-theme-toggle
          class="relative flex items-center gap-2 text-zinc-500 hover:text-zinc-950 focus-visible:outline-2 focus-visible:outline-teal-500 focus-visible:outline-offset-2 dark:text-zinc-400 dark:hover:text-white"
        >
          <kbd class="rounded-xs border border-zinc-950/15 px-1.5 py-0.5 dark:border-white/20"
            >d</kbd
          >
          <span data-theme-label>dark</span>
          <span
            class="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden"
            aria-hidden="true"
          ></span>
        </button>
      </header>

      <main class="flex flex-col justify-center">
        <!-- The question. -->
        <div class="flex flex-col gap-10 stuck:hidden">
          <h1
            class="max-w-[30ch] animate-rise text-3xl font-medium tracking-tight text-balance [animation-delay:80ms] sm:text-4xl lg:text-5xl"
          >
            do you wanna work sixteen hours a day?
          </h1>

          <div class="flex flex-col gap-3">
            <div class="flex items-end gap-1 sm:gap-1.5" aria-hidden="true">
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 0"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 1"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 2"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 3"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 4"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 5"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 6"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 7"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 8"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 9"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 10"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 11"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 12"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 13"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 14"></i>
              <i class="tick bg-teal-600 dark:bg-teal-400" style="--i: 15"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 16"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 17"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 18"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 19"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 20"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 21"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 22"></i>
              <i class="tick bg-zinc-950/10 dark:bg-white/10" style="--i: 23"></i>
            </div>

            <p
              class="animate-fade text-base tracking-wide tabular-nums text-teal-700 [animation-delay:1180ms] sm:text-sm dark:text-teal-400"
            >
              16 of 24 hours
            </p>
          </div>

          <div class="flex flex-col gap-5">
            <a
              href="https://flue.sh"
              class="block animate-rise rounded-md bg-teal-600 px-3 py-4 text-center text-base font-medium text-white [animation-delay:1300ms] hover:bg-teal-500 focus-visible:outline-2 focus-visible:outline-teal-500 focus-visible:outline-offset-2 dark:bg-teal-400 dark:text-zinc-950 dark:hover:bg-teal-300"
            >
              yes
            </a>

            <button
              type="button"
              data-no
              class="relative animate-rise self-start text-base text-zinc-500 [animation-delay:1420ms] hover:text-zinc-950 hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-teal-500 focus-visible:outline-offset-2 sm:text-sm dark:text-zinc-400 dark:hover:text-white"
            >
              no
              <span
                class="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden"
                aria-hidden="true"
              ></span>
            </button>
          </div>
        </div>

        <!-- What saying no gets you. -->
        <div class="flex flex-col gap-6 asking:hidden">
          <p
            class="max-w-[40ch] animate-rise text-2xl font-medium tracking-tight text-pretty [animation-delay:80ms] sm:text-3xl"
          >
            your browser won't let me close this tab.
          </p>

          <p
            class="max-w-[40ch] animate-rise text-2xl tracking-tight text-pretty text-zinc-500 [animation-delay:900ms] sm:text-3xl dark:text-zinc-400"
          >
            so. sixteen hours it is.
          </p>

          <a
            href="https://flue.sh"
            class="block animate-rise self-start pt-4 text-base text-teal-700 [animation-delay:1800ms] hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-teal-500 focus-visible:outline-offset-2 sm:text-sm dark:text-teal-400"
          >
            → flue.sh
          </a>
        </div>
      </main>

      <footer class="animate-fade text-base [animation-delay:1500ms] sm:text-sm">
        <a
          href="https://karnstack.com"
          class="font-normal text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
          >karnstack</a
        >
      </footer>
    </div>

    <script type="module">
      const root = document.documentElement
      const label = document.querySelector('[data-theme-label]')
      const toggle = document.querySelector('[data-theme-toggle]')

      // The button names the theme you are one press away from, not the one
      // you are in, so the label and the `d` next to it read as one sentence.
      function sync() {
        const next = root.classList.contains('dark') ? 'light' : 'dark'
        label.textContent = next
        toggle.setAttribute('aria-label', `Switch to ${next} theme`)
      }

      function switchTheme() {
        const dark = !root.classList.contains('dark')
        root.classList.toggle('dark', dark)
        try {
          localStorage.setItem('theme', dark ? 'dark' : 'light')
        } catch {}
        sync()
      }

      sync()
      toggle.addEventListener('click', switchTheme)

      addEventListener('keydown', (event) => {
        if (event.key !== 'd' || event.metaKey || event.ctrlKey || event.altKey) return
        switchTheme()
      })

      // window.close() only works on a tab a script opened, which is almost
      // never how anyone arrives here. Rather than hide that, the page waits to
      // see whether it is still alive and then says so.
      document.querySelector('[data-no]').addEventListener('click', () => {
        window.close()
        setTimeout(() => {
          root.dataset.state = 'stuck'
        }, 220)
      })
    </script>
  </body>
</html>