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 html * {
18 font-size: 16px;
19 }
20 body {
21 min-height: 100%;
22 padding: 0;
23 margin: 0 auto;
24 display: flex;
25 flex-direction: column;
26 max-width: 580px;
27 }
28 .title {
29 font-size: 50px;
30 }
31 form {
32 margin: 0 auto;
33 width: min(350px, calc(70% + 100px));
34 text-align: left;
35 display: flex;
36 justify-content: center;
37 flex-direction: column;
38 }
39 form > * {
40 margin-bottom: 0.3em;
41 }
42 label {
43 flex: 0 0 auto;
44 }
45 input {
46 font-family: inherit;
47 }
48 .input {
49 width: 100%;
50 display: flex;
51 justify-content: space-between;
52 }
53 .button {
54 background: #1C1C1C;
55 color: #DCDCDC;
56 border: solid 2px #DCDCDC;
57 border-radius: 5px;
58 padding: 7px;
59 margin: 8px;
60 text-decoration: none;
61 transition-duration: 0.2s;
62 cursor: pointer;
63 }
64 .button:hover {
65 background: #DCDCDC;
66 color: #1C1C1C;
67 border-color: #DCDCDC;
68 }
69 table {
70 margin-top: 50px;
71 text-align: center;
72 overflow-x: scroll;
73 display: block;
74 }
75 tr:nth-child(even) {
76 background-color: #2B2B2B;
77 } td > p {
78 font-family: monospace;
79 }
80 td {
81 padding: 10px;
82 }
83 </style>
84 </head>
85 <body>
86 <p class="title">umu</p>
87 <form>
88 <div class="input">
89 <label for="url">URL:</label>
90 <input type="text" id="url" name="url">
91 </div>
92 <div class="input">
93 <label for="name">Name (optional):</label>
94 <input type="text" id="name" name="name">
95 </div>
96 <input type="text" id="action" name="action" value="create" hidden="">
97 <input class="button" type="submit" formaction="/?action=create" value="Shorten URL">
98 </form>
99 <table>
100 <th>Short link</th>
101 <th>Long link</th>
102 <th>Actions</th>
103 {{ . }}
104 </table>
105 </body>
106</html>