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 .pagination {
87 margin: 35px 0;
88 }
89 </style>
90 </head>
91 <body>
92 <p class="title">earl</p>
93 <form>
94 <div class="input">
95 <label for="url">URL:</label>
96 <input type="text" id="url" name="url">
97 </div>
98 <div class="input">
99 <label for="name">Name (optional):</label>
100 <input type="text" id="name" name="name">
101 </div>
102 <input type="text" id="action" name="action" value="create" hidden="">
103 <input class="button" type="submit" formaction="/?action=create" value="Shorten URL">
104 </form>
105 <div class="links_table">
106 <table>
107 <th>Short link</th>
108 <th>Long link</th>
109 <th>Actions</th>
110 {{ .Table }}
111 </table>
112 </div>
113 <div class="pagination">
114 <p>
115 <a class="button" href="/?count=15&start={{ .Start }}">←</a> | <a class="button" href="/?count=15&end={{ .End }}">→</a>
116 </p>
117 </div>
118 </body>
119</html>