Amolith created
root.go | 2
templates/edit.html | 45 +++++++---------
templates/edit.html.license | 3 +
templates/home_authenticated.html | 54 +++++++++++---------
templates/home_authenticated.html.license | 3 +
templates/home_unauthenticated.html | 51 +++++++++----------
templates/home_unauthenticated.html.license | 3 +
templates/login.html | 60 +++++++++++++++-------
templates/login.html.license | 3 +
9 files changed, 127 insertions(+), 97 deletions(-)
@@ -142,7 +142,7 @@ func (m model) genTable() string {
table = table + fmt.Sprintf(`<tr>
<td><p>%s</p></td>
<td><p>%s</p></td>
- <td><a href="/?action=edit&name=%s&url=%s">Edit</a><a href="/?action=delete&name=%s">Delete</a></td>
+ <td><a class="button" href="/?action=edit&name=%s&url=%s">Edit</a><a class="button" href="/?action=delete&name=%s">Delete</a></td>
</tr>`, k, v, k, url.QueryEscape(string(v)), k)
return nil
})
@@ -1,9 +1,3 @@
-<!--
-SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
-
-SPDX-License-Identifier: BSD-2-Clause
--->
-
<!DOCTYPE html>
<html lang="en-GB">
<head>
@@ -20,21 +14,23 @@ SPDX-License-Identifier: BSD-2-Clause
height: 100%;
margin: 0 auto;
}
+ html * {
+ font-size: 16px;
+ }
body {
min-height: 100%;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
- justify-content: center;
- max-width: 450px;
+ max-width: 580px;
}
.title {
font-size: 50px;
}
form {
margin: 0 auto;
- width: min(300px, calc(70% + 100px));
+ width: min(350px, calc(70% + 100px));
text-align: left;
display: flex;
justify-content: center;
@@ -54,22 +50,21 @@ SPDX-License-Identifier: BSD-2-Clause
display: flex;
justify-content: space-between;
}
- details {
- margin: 20px 0;
- }
- .link_info {
- text-align: left;
- }
- table {
- text-align: center;
- }
- tr:nth-child(even) {
- background-color: #2B2B2B;
- } td > p {
- font-family: monospace;
+ .button {
+ background: #1C1C1C;
+ color: #DCDCDC;
+ border: solid 2px #DCDCDC;
+ border-radius: 5px;
+ padding: 7px;
+ margin: 8px;
+ text-decoration: none;
+ transition-duration: 0.2s;
+ cursor: pointer;
}
- td {
- padding: 10px;
+ .button:hover {
+ background: #DCDCDC;
+ color: #1C1C1C;
+ border-color: #DCDCDC;
}
</style>
</head>
@@ -86,7 +81,7 @@ SPDX-License-Identifier: BSD-2-Clause
</div>
<input type="text" id="oldName" name="oldName" value="{{.Name}}" hidden="">
<input type="text" id="action" name="action" value="update" hidden="">
- <input type="submit" formaction="/" value="Update shortened URL">
+ <input class="button" type="submit" formaction="/" value="Update shortened URL">
</form>
</body>
</html>
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
+
+SPDX-License-Identifier: CC0-1.0
@@ -1,9 +1,3 @@
-<!--
-SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
-
-SPDX-License-Identifier: BSD-2-Clause
--->
-
<!DOCTYPE html>
<html lang="en-GB">
<head>
@@ -20,21 +14,23 @@ SPDX-License-Identifier: BSD-2-Clause
height: 100%;
margin: 0 auto;
}
+ html * {
+ font-size: 16px;
+ }
body {
min-height: 100%;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
- justify-content: center;
- max-width: 450px;
+ max-width: 580px;
}
.title {
font-size: 50px;
}
form {
margin: 0 auto;
- width: min(300px, calc(70% + 100px));
+ width: min(350px, calc(70% + 100px));
text-align: left;
display: flex;
justify-content: center;
@@ -54,14 +50,27 @@ SPDX-License-Identifier: BSD-2-Clause
display: flex;
justify-content: space-between;
}
- details {
- margin: 20px 0;
+ .button {
+ background: #1C1C1C;
+ color: #DCDCDC;
+ border: solid 2px #DCDCDC;
+ border-radius: 5px;
+ padding: 7px;
+ margin: 8px;
+ text-decoration: none;
+ transition-duration: 0.2s;
+ cursor: pointer;
}
- .link_info {
- text-align: left;
+ .button:hover {
+ background: #DCDCDC;
+ color: #1C1C1C;
+ border-color: #DCDCDC;
}
table {
+ margin-top: 50px;
text-align: center;
+ overflow-x: scroll;
+ display: block;
}
tr:nth-child(even) {
background-color: #2B2B2B;
@@ -85,18 +94,13 @@ SPDX-License-Identifier: BSD-2-Clause
<input type="text" id="name" name="name">
</div>
<input type="text" id="action" name="action" value="create" hidden="">
- <input type="submit" formaction="/?action=create" value="Shorten URL">
+ <input class="button" type="submit" formaction="/?action=create" value="Shorten URL">
</form>
- <details>
- <summary>Shortened URLs</summary>
- <div class="link_info">
- <table>
- <th>Short link</th>
- <th>Long link</th>
- <th>Actions</th>
- {{ . }}
- </table>
- </div>
- </details>
+ <table>
+ <th>Short link</th>
+ <th>Long link</th>
+ <th>Actions</th>
+ {{ . }}
+ </table>
</body>
</html>
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
+
+SPDX-License-Identifier: CC0-1.0
@@ -1,9 +1,3 @@
-<!--
-SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
-
-SPDX-License-Identifier: BSD-2-Clause
--->
-
<!DOCTYPE html>
<html lang="en-GB">
<head>
@@ -12,29 +6,32 @@ SPDX-License-Identifier: BSD-2-Clause
<meta name="title" content="umu">
<meta name="description" content="umu">
<style>
- html {
- background: #1C1C1C;
- color: #dcdcdc;
- font-family: sans-serif;
- text-align: center;
- height: 100%;
- margin: 0 auto;
- }
- body {
- height: 100%;
- padding: 0;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- max-width: 450px;
- }
- p {
- font-size: 50px;
- }
+ html {
+ background: #1C1C1C;
+ color: #DCDCDC;
+ font-family: sans-serif;
+ text-align: center;
+ height: 100%;
+ margin: 0 auto;
+ }
+ html * {
+ font-size: 16px;
+ }
+ body {
+ min-height: 100%;
+ padding: 0;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ max-width: 580px;
+ }
+ .title {
+ font-size: 50px;
+ }
</style>
</head>
<body>
- <p>umu</p>
+ <p class="title">umu</p>
</body>
</html>
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
+
+SPDX-License-Identifier: CC0-1.0
@@ -1,9 +1,3 @@
-<!--
-SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
-
-SPDX-License-Identifier: BSD-2-Clause
--->
-
<!DOCTYPE html>
<html lang="en-GB">
<head>
@@ -14,46 +8,74 @@ SPDX-License-Identifier: BSD-2-Clause
<style>
html {
background: #1C1C1C;
- color: #dcdcdc;
+ color: #DCDCDC;
font-family: sans-serif;
text-align: center;
height: 100%;
margin: 0 auto;
}
+ html * {
+ font-size: 16px;
+ }
body {
- height: 100%;
+ min-height: 100%;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
- justify-content: center;
- max-width: 450px;
+ max-width: 580px;
}
- p {
+ .title {
font-size: 50px;
}
form {
+ margin: 0 auto;
+ width: min(350px, calc(70% + 100px));
+ text-align: left;
display: flex;
- align-items: center;
justify-content: center;
- flex-wrap: wrap;
- gap: 10px;
+ flex-direction: column;
+ }
+ form > * {
+ margin-bottom: 0.3em;
}
label {
flex: 0 0 auto;
- font-size: 30px;
}
input {
font-family: inherit;
}
+ .input {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ }
+ .button {
+ background: #1C1C1C;
+ color: #DCDCDC;
+ border: solid 2px #DCDCDC;
+ border-radius: 5px;
+ padding: 7px;
+ margin: 8px;
+ text-decoration: none;
+ transition-duration: 0.2s;
+ cursor: pointer;
+ }
+ .button:hover {
+ background: #DCDCDC;
+ color: #1C1C1C;
+ border-color: #DCDCDC;
+ }
</style>
</head>
<body>
- <p>umu</p>
+ <p class="title">umu</p>
<form>
- <label for="access_token">Access token:</label>
- <input type="password" id="access_token" name="access_token">
- <input type="submit" value="Log in">
+ <div class="input"
+ <label for="access_token">Access token:</label>
+ <input type="password" id="access_token" name="access_token">
+ </div>
+ <input class="button" type="submit" value="Log in">
</form>
</body>
</html>
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2022 Amolith <amolith@secluded.site>
+
+SPDX-License-Identifier: CC0-1.0