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