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
Split 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" . }}
{{ 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">
<h1>Dela.</h1>
<p class="lead">Simple and elegant web TODO list</p>
<p class="lead">
<a href="/login" class="btn btn-lg btn-primary">Login</a>
<a href="/register" class="btn btn-lg btn-primary">Register</a>
</p>
<main class="container my-5">
<div class="px-4 pt-5 my-5 text-center border shadow-lg">
<h1 class="display-4 fw-bold text-body-emphasis">Dela</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">a dead simple and minimalistic web TODO list</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<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>
</main>

8
pages/category.html
Unescape View File

@ -8,7 +8,7 @@
<main class="d-flex flex-wrap">
<!-- 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">
<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>
@ -67,8 +67,8 @@
<td class="todo-due">{{ .Due }}</td>
<td class="todo-due-unix" style="display: none;">{{ .DueUnix }}</td>
<td>
<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-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>
</td>
</tr>
{{ end }}
@ -91,7 +91,7 @@
<td>{{ .TimeCreated }}</td>
<td>{{ .CompletionTime }}</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>
</tr>
{{ end }}

7
pages/error.html
Unescape View File

@ -3,9 +3,10 @@
{{ 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">
<h1>Error!</h1>
<p>You have encountered an error</p>
<p>Try to reload the page or try again later</p>
<h1 class="text-danger display-2">Error!</h1>
<img src="/static/images/emoji-frown.svg" alt="Sad face" width="128px" >
<p>Sorry! Something went wrong somewhere!</p>
<p><u>Try to reload the faulty page or try again later</u></p>
</div>
</main>

17
pages/index.html
Unescape View File

@ -7,7 +7,7 @@
<div class="d-flex flex-wrap">
<!-- 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">
<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>
@ -28,16 +28,13 @@
</div>
<!-- <div class="d-flex flex-column p-4 gap-4 py-md-5 align-items-start justify-content-center"> -->
<div class="py-md-5">
<form onsubmit="return false;">
<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 class="input-group mb-3 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">
<button id="button-new-category" onclick="createNewCategory();" class="btn btn-primary">Create</button >
</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="list-group flex-grow-1">
{{ range .Groups }}
@ -54,7 +51,7 @@
</a>
{{ if .Removable }}
<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">
</button>
</div>
@ -65,8 +62,6 @@
</div>
</div>
<!-- d-flex flex-column align-items-center justify-content-center -->
</main>
<script>

56
pages/login.html
Unescape View File

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

122
pages/register.html
Unescape View File

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

2
src/main.go
Unescape View File

@ -28,7 +28,7 @@ import (
"path/filepath"
)
const Version string = "0.1.2"
const Version string = "0.2.0"
var (
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