kot.pink
1{{ define "user/login" }}
2 <!doctype html>
3 <html lang="en" class="dark:bg-gray-900">
4 <head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta property="og:title" content="login · tangled" />
8 <meta property="og:url" content="https://tangled.sh/login" />
9 <meta property="og:description" content="login to for tangled" />
10 <script src="/static/htmx.min.js"></script>
11 <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
12 <title>login · tangled</title>
13 </head>
14 <body class="flex items-center justify-center min-h-screen">
15 <main class="max-w-md px-6 -mt-4">
16 <h1 class="text-center text-2xl font-semibold italic dark:text-white" >
17 tangled
18 </h1>
19 <h2 class="text-center text-xl italic dark:text-white">
20 tightly-knit social coding.
21 </h2>
22 <form
23 class="mt-4 max-w-sm mx-auto"
24 hx-post="/login"
25 hx-swap="none"
26 hx-disabled-elt="#login-button"
27 >
28 <div class="flex flex-col">
29 <label for="handle">handle</label>
30 <input
31 type="text"
32 id="handle"
33 name="handle"
34 tabindex="1"
35 required
36 placeholder="akshay.tngl.sh"
37 />
38 <span class="text-sm text-gray-500 mt-1">
39 Use your <a href="https://atproto.com">ATProto</a>
40 handle to log in. If you're unsure, this is likely
41 your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account.
42 </span>
43 </div>
44
45 <button
46 class="btn w-full my-2 mt-6 text-base "
47 type="submit"
48 id="login-button"
49 tabindex="3"
50 >
51 <span>login</span>
52 </button>
53 </form>
54 <p class="text-sm text-gray-500">
55 Don't have an account? <a href="/signup" class="underline">Create an account</a> on Tangled now!
56 </p>
57
58 <p id="login-msg" class="error w-full"></p>
59 </main>
60 </body>
61 </html>
62{{ end }}