1<!DOCTYPE html>
2<html lang="en-GB">
3 <head>
4 <title>earl</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="title" content="earl">
7 <meta name="description" content="earl">
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 justify-content: center;
27 max-width: 650px;
28 }
29 .title {
30 font-size: 50px;
31 }
32 form {
33 margin: 0 auto;
34 width: min(350px, calc(70% + 100px));
35 text-align: left;
36 display: flex;
37 justify-content: center;
38 flex-direction: column;
39 }
40 form > * {
41 margin-bottom: 0.3em;
42 }
43 label {
44 flex: 0 0 auto;
45 }
46 input {
47 font-family: inherit;
48 }
49 .input {
50 width: 100%;
51 display: flex;
52 justify-content: space-between;
53 }
54 .button {
55 background: #1C1C1C;
56 color: #DCDCDC;
57 border: solid 2px #DCDCDC;
58 border-radius: 5px;
59 padding: 7px;
60 margin: 8px;
61 text-decoration: none;
62 transition-duration: 0.2s;
63 cursor: pointer;
64 }
65 .button:hover {
66 background: #DCDCDC;
67 color: #1C1C1C;
68 border-color: #DCDCDC;
69 }
70 table {
71 margin-top: 50px;
72 text-align: center;
73 margin: auto;
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 .links_table {
84 overflow: scroll;
85 }
86 </style>
87 </head>
88 <body>
89 <p class="title">earl</p>
90 <form>
91 <div class="input">
92 <label for="url">URL:</label>
93 <input type="text" id="url" name="url">
94 </div>
95 <div class="input">
96 <label for="name">Name (optional):</label>
97 <input type="text" id="name" name="name">
98 </div>
99 <input type="text" id="action" name="action" value="create" hidden="">
100 <input class="button" type="submit" formaction="/?action=create" value="Shorten URL">
101 </form>
102 <div class="links_table">
103 <table>
104 <th>Short link</th>
105 <th>Long link</th>
106 <th>Actions</th>
107 {{ . }}
108 </table>
109 </div>
110 </body>
111</html>