Unbewohnte
/
dela
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

UI: Massive UI changes

master
Kasianov Nikolai Alekseevich 3 months ago
parent
192c48eaa6
commit
d0b0cc4c5b
10 changed files with 146 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      pages/about.html
  2. 8
      pages/category.html
  3. 7
      pages/error.html
  4. 17
      pages/index.html
  5. 56
      pages/login.html
  6. 122
      pages/register.html
  7. 2
      src/main.go
  8. BIN
      static/images/dela_main.png
  9. 4
      static/images/emoji-frown.svg
  10. 4
      static/images/info-circle.svg

24
pages/about.html
Unescape View File

@ -1,14 +1,22 @@
{{ template "base" . }} {{ template "base" . }}
{{ define "content" }} {{ define "content" }}
<main class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<div class="p-2 flex-fill text-wrap text-center"> <main class="container my-5">
<h1>Dela.</h1> <div class="px-4 pt-5 my-5 text-center border shadow-lg">
<p class="lead">Simple and elegant web TODO list</p> <h1 class="display-4 fw-bold text-body-emphasis">Dela</h1>
<p class="lead"> <div class="col-lg-6 mx-auto">
<a href="/login" class="btn btn-lg btn-primary">Login</a> <p class="lead mb-4">a dead simple and minimalistic web TODO list</p>
<a href="/register" class="btn btn-lg btn-primary">Register</a> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
</p> <a href="/register" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Register</a>
<a href="/login" class="btn btn-outline-secondary btn-lg px-4">Log in</a>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh;">
<div class="container px-5">
<img src="/static/images/dela_main.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Dela interface" width="980" height="700" loading="lazy">
</div>
</div>
</div> </div>
</main> </main>

8
pages/category.html
Unescape View File

@ -8,7 +8,7 @@
<main class="d-flex flex-wrap"> <main class="d-flex flex-wrap">
<!-- Sidebar --> <!-- Sidebar -->
<div id="sidebar" class="flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;"> <div id="sidebar" class="border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg"> <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
<span class="fs-5 fw-semibold">Categories</span> <span class="fs-5 fw-semibold">Categories</span>
@ -67,8 +67,8 @@
<td class="todo-due">{{ .Due }}</td> <td class="todo-due">{{ .Due }}</td>
<td class="todo-due-unix" style="display: none;">{{ .DueUnix }}</td> <td class="todo-due-unix" style="display: none;">{{ .DueUnix }}</td>
<td> <td>
<button class="btn btn-success" onclick="markAsDoneRefresh({{.ID}});"><img src='/static/images/check.svg'></button> <button class="btn btn-success" onclick="markAsDoneRefresh('{{.ID}}');"><img src='/static/images/check.svg'></button>
<button class="btn btn-danger" onclick="deleteTodoRefresh({{.ID}});"><img src='/static/images/trash3-fill.svg'></button> <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
</td> </td>
</tr> </tr>
{{ end }} {{ end }}
@ -91,7 +91,7 @@
<td>{{ .TimeCreated }}</td> <td>{{ .TimeCreated }}</td>
<td>{{ .CompletionTime }}</td> <td>{{ .CompletionTime }}</td>
<td> <td>
<button class="btn btn-danger" onclick="deleteTodoRefresh({{.ID}});"><img src='/static/images/trash3-fill.svg'></button> <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
</td> </td>
</tr> </tr>
{{ end }} {{ end }}

7
pages/error.html
Unescape View File

@ -3,9 +3,10 @@
{{ define "content" }} {{ define "content" }}
<main class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> <main class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<div class="p-2 flex-fill text-wrap text-center"> <div class="p-2 flex-fill text-wrap text-center">
<h1>Error!</h1> <h1 class="text-danger display-2">Error!</h1>
<p>You have encountered an error</p> <img src="/static/images/emoji-frown.svg" alt="Sad face" width="128px" >
<p>Try to reload the page or try again later</p> <p>Sorry! Something went wrong somewhere!</p>
<p><u>Try to reload the faulty page or try again later</u></p>
</div> </div>
</main> </main>

17
pages/index.html
Unescape View File

@ -7,7 +7,7 @@
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
<!-- Sidebar --> <!-- Sidebar -->
<div id="sidebar" class="flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;"> <div id="sidebar" class="border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg"> <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
<span class="fs-5 fw-semibold">Categories</span> <span class="fs-5 fw-semibold">Categories</span>
@ -28,16 +28,13 @@
</div> </div>
<!-- <div class="d-flex flex-column p-4 gap-4 py-md-5 align-items-start justify-content-center"> --> <div class="input-group mb-3 py-md-5">
<div class="py-md-5"> <input type="text" name="newCategory"aria-label="Category Name" aria-describedby="button-new-category" class="form-control" id="new-category-input" placeholder="Category Name">
<form onsubmit="return false;"> <button id="button-new-category" onclick="createNewCategory();" class="btn btn-primary">Create</button >
<input type="text" name="newCategory" class="form-control" id="new-category-input" placeholder="Category Name">
<input type="submit" value="Create" onclick="createNewCategory();" class="btn btn-primary">
</form>
</div> </div>
</div> </div>
<!-- <div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center flex-grow-1"> --> <!-- Groups -->
<div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5"> <div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5">
<div class="list-group flex-grow-1"> <div class="list-group flex-grow-1">
{{ range .Groups }} {{ range .Groups }}
@ -54,7 +51,7 @@
</a> </a>
{{ if .Removable }} {{ if .Removable }}
<div class="small"> <div class="small">
<button class="btn btn-danger" onclick="deleteCategoryRefresh({{.ID}})"> <button class="btn btn-danger" onclick="deleteCategoryRefresh('{{.ID}}')">
<img src="/static/images/trash3-fill.svg" alt="Remove category"> <img src="/static/images/trash3-fill.svg" alt="Remove category">
</button> </button>
</div> </div>
@ -65,8 +62,6 @@
</div> </div>
</div> </div>
<!-- d-flex flex-column align-items-center justify-content-center -->
</main> </main>
<script> <script>

56
pages/login.html
Unescape View File

@ -3,26 +3,38 @@
{{ define "content" }} {{ define "content" }}
<main class="d-flex flex-wrap align-content-center align-items-center"> <main class="d-flex flex-wrap align-content-center align-items-center container my-5 flex-column">
<div class="p-2 flex-fill text-wrap text-center"> <div class="p-2 flex-fill text-wrap text-center border shadow-lg">
<!-- text-center --> <h3 class="h3 mb-3 fw-normal">Log in</h3>
<h3>Log in</h3> <form onsubmit="return false;">
<form name="loginForm" onsubmit="return false;"> <div class="mb-3 input-group">
<p> <img src="/static/images/universal-access.svg" alt="Login" class="input-group-text">
<img src="/static/images/universal-access.svg" alt="Login"> <input
<input type="text" name="login" minlength="3" placeholder="Login" required> type="text"
</p> class="form-control"
id="input-login"
<p> aria-describedby="Login"
<img src="/static/images/key.svg" alt="Password"> aria-label="Login"
<input type="password" name="password" minlength="3" placeholder="Password" required> placeholder="Login"
</p> required
minlength="3">
</div>
<div class="mb-3 input-group">
<img src="/static/images/key.svg" alt="Password" class="input-group-text">
<input
type="password"
class="form-control"
id="input-password"
aria-describedby="Password"
aria-label="Password"
placeholder="Password"
required
minlength="3">
</div>
<p><span id="error_message" class="text-danger"></span></p> <p><span id="error_message" class="text-danger"></span></p>
<input type="submit" value="Log in" class="btn btn-primary" onclick="logIn()">
<p>
<input type="submit" value="Log in" class="btn btn-primary" onclick="logIn()">
</p>
</form> </form>
</div> </div>
@ -30,14 +42,14 @@
<script> <script>
async function logIn() { async function logIn() {
let loginForm = document.forms["loginForm"]; let loginInput = document.getElementById("input-login");
let login = String(loginInput.value).trim();
let login = String(loginForm.elements["login"].value).trim();
if (login.length < 3) { if (login.length < 3) {
return; return;
} }
let password = String(loginForm.elements["password"].value); let passwordInput = document.getElementById("input-password");
let password = String(passwordInput.value);
if (password.length < 3) { if (password.length < 3) {
return; return;
} }

122
pages/register.html
Unescape View File

@ -2,67 +2,91 @@
{{ define "content" }} {{ define "content" }}
<main class="d-flex flex-wrap align-content-center"> <main class="d-flex flex-wrap align-content-center container my-5 flex-column">
<div class="p-2 flex-fill text-wrap text-center"> <div class="p-2 flex-fill text-wrap text-center border shadow-lg">
<h3>Register</h3> <h3 class="h3 mb-3 fw-normal">Register <span title="Passwords are hashed client-side, your information is protected">
<form name="registerForm" onsubmit="return false;"> <img src="/static/images/info-circle.svg" alt="Information"></span>
<p> </h3>
<img src="/static/images/universal-access.svg" alt="Login"> <form onsubmit="return false;">
<input type="text" name="login" minlength="3" placeholder="Login" required> <div class="mb-3 input-group">
</p> <img src="/static/images/universal-access.svg" alt="Login" class="input-group-text">
<input
<p> type="text"
<img src="/static/images/envelope-at.svg" alt="E-mail"> class="form-control"
<input type="email" name="email" minlength="3" placeholder="login@example.com" required> id="input-login"
</p> aria-describedby="Login"
aria-label="Login"
<p> placeholder="Login"
<img src="/static/images/key.svg" alt="Password"> required
<input type="password" name="password" minlength="3" placeholder="Password" required> minlength="3">
</p> </div>
<div class="mb-3 input-group">
<img src="/static/images/envelope-at.svg" alt="Email" class="input-group-text">
<input
type="email"
class="form-control"
id="input-email"
aria-describedby="Email"
aria-label="login@example.com"
placeholder="login@example.com"
required
minlength="3">
</div>
<div class="mb-3 input-group">
<img src="/static/images/key.svg" alt="Password" class="input-group-text">
<input
type="password"
class="form-control"
id="input-password"
aria-describedby="Password"
aria-label="Password"
placeholder="Password"
required
minlength="3">
</div>
<p><span id="error_message" class="text-danger"></span></p> <p><span id="error_message" class="text-danger"></span></p>
<input type="submit" value="Register" class="btn btn-primary" onclick="register();">
<p>
<input type="submit" value="Register" class="btn btn-primary" onclick="register();">
</p>
</form> </form>
</div> </div>
</main> </main>
<script> <script>
async function register() { async function register() {
let registerForm = document.forms["registerForm"]; let loginInput = document.getElementById("input-login");
let login = String(loginInput.value).trim();
let login = String(registerForm.elements["login"].value).trim(); if (login.length < 3) {
if (login.length < 3) { return;
return; }
}
let email = String(registerForm.elements["email"].value).trim(); let emailInput = document.getElementById("input-email");
if (email.length < 3) { let email = String(emailInput.value).trim();
return; if (email.length < 3) {
} return;
}
let password = String(registerForm.elements["password"].value); let passwordInput = document.getElementById("input-password");
if (password.length < 3) { let password = String(passwordInput.value);
return; if (password.length < 3) {
} return;
}
let passwordSHA256 = sha256(password); let passwordSHA256 = sha256(password);
let postData = { let postData = {
login: login, login: login,
email: email, email: email,
password: passwordSHA256, password: passwordSHA256,
}; };
let response = await postNewUser(postData); let response = await postNewUser(postData);
if (response.ok) { if (response.ok) {
window.location.replace("/"); window.location.replace("/");
} else { } else {
document.getElementById("error_message").innerText = await response.text(); document.getElementById("error_message").innerText = await response.text();
} }
}; };
</script> </script>
{{ end }} {{ end }}

2
src/main.go
Unescape View File

@ -28,7 +28,7 @@ import (
"path/filepath" "path/filepath"
) )
const Version string = "0.1.2" const Version string = "0.2.0"
var ( var (
printVersion *bool = flag.Bool("version", false, "Print version information and exit") printVersion *bool = flag.Bool("version", false, "Print version information and exit")

BIN
static/images/dela_main.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

4
static/images/emoji-frown.svg
Unescape View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-frown" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.5 3.5 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.5 4.5 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

4
static/images/info-circle.svg
Unescape View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 460 B

Write Preview
Loading…
Cancel
Save