1<!DOCTYPE html>
2<html lang="en-GB">
3 <head>
4 <title>umu</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="title" content="umu">
7 <meta name="description" content="umu">
8 <style>
9 html {
10 background: #1C1C1C;
11 color: #DCDCDC;
12 font-family: sans-serif;
13 text-align: center;
14 height: 100%;
15 margin: 0 auto;
16 }
17 body {
18 min-height: 100%;
19 padding: 0;
20 margin: 0 auto;
21 display: flex;
22 flex-direction: column;
23 justify-content: center;
24 max-width: 450px;
25 }
26 .title {
27 font-size: 50px;
28 }
29 form {
30 margin: 0 auto;
31 width: min(300px, calc(70% + 100px));
32 text-align: left;
33 display: flex;
34 justify-content: center;
35 flex-direction: column;
36 }
37 form > * {
38 margin-bottom: 0.3em;
39 }
40 label {
41 flex: 0 0 auto;
42 }
43 input {
44 font-family: inherit;
45 }
46 .input {
47 width: 100%;
48 display: flex;
49 justify-content: space-between;
50 }
51 details {
52 margin: 20px 0;
53 }
54 .link_info {
55 text-align: left;
56 }
57 table {
58 text-align: center;
59 }
60 tr:nth-child(even) {
61 background-color: #2B2B2B;
62 } td > p {
63 font-family: monospace;
64 }
65 td {
66 padding: 10px;
67 }
68 </style>
69 </head>
70 <body>
71 <p class="title">umu</p>
72 <form>
73 <div class="input">
74 <label for="url">URL:</label>
75 <input type="text" id="url" name="url">
76 </div>
77 <div class="input">
78 <label for="name">Name (optional):</label>
79 <input type="text" id="name" name="name">
80 </div>
81 <input type="text" id="action" name="action" value="create" hidden="">
82 <input type="submit" formaction="/?action=create" value="Shorten URL">
83 </form>
84 <details>
85 <summary>Shortened URLs</summary>
86 <div class="link_info">
87 <table>
88 <th>Short link</th>
89 <th>Long link</th>
90 <th>Actions</th>
91 {{ . }}
92 </table>
93 </div>
94 </details>
95 </body>
96</html>