Initial commit
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
<div class="todo-add-container">
|
||||
<details>
|
||||
<summary>New</summary>
|
||||
<form action="./" method="POST" autocomplete="off">
|
||||
<input type="hidden" name="action" value="add" />
|
||||
<div class="todo-add-div">
|
||||
<p>{{ ADD_NOTICE }}</p>
|
||||
</div>
|
||||
|
||||
<div class="todo-add-div">
|
||||
<label class="label" for="todo_title">Title</label>
|
||||
<input id="todo_title" type="text" list="todo_titles" name="todo_title" required />
|
||||
</div>
|
||||
|
||||
<div class="todo-add-div">
|
||||
<label class="label" for="todo_description">Description</label>
|
||||
<input id="todo_description" type="text" name="todo_description" />
|
||||
</div>
|
||||
|
||||
<div class="todo-add-div">
|
||||
<label class="label" for="todo_deadline">Deadline</label>
|
||||
<input id="todo_deadline" type="date" name="todo_deadline" /><!--time-local-->
|
||||
<i>(optional)</i>
|
||||
</div>
|
||||
|
||||
<div class="todo-add-div">
|
||||
<label class="label" for="todo_category">Category</label>
|
||||
<input id="todo_category" type="text" list="todo_categories" name="todo_category" />
|
||||
<i>(optional)</i>
|
||||
</div>
|
||||
|
||||
<div class="todo-add-div">
|
||||
<input class="todo-add-button" type="submit" value="Add" />
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
<html><head>{{ HEAD }}</head><body id="body">{{ BODY }}</body></html>
|
||||
@@ -0,0 +1,3 @@
|
||||
{{ HEADER }}
|
||||
{{ CONTENT }}
|
||||
{{ FOOTER }}
|
||||
@@ -0,0 +1 @@
|
||||
<option value="{{ DATALIST_AUTOFILL_DATA }}" />
|
||||
@@ -0,0 +1,3 @@
|
||||
<datalist id="{{ DATALIST_ID }}">
|
||||
{{ DATALIST_AUTOFILLS }}
|
||||
</datalist>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="footer" id="footer">
|
||||
{{ DATALISTS }}
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<title>Zvg: {{ TITLE }}</title>
|
||||
<style>{{ STYLE }}</style>
|
||||
<script>{{ SCRIPT }}</script>
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="/_src/favicon/64.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/_src/favicon/32.png">
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="header" id="header">
|
||||
<h1>{{ TITLE }}</h1>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="login-container">
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="intent" value="login" />
|
||||
<div class="login-div">
|
||||
<p>{{ LOGIN_NOTICE }}</p>
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<label class="label" for="uname">Username</label>
|
||||
<input class="login-input" id="uname" type="text" name="uname" required />
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<label class="label" for="pwd">Password</label>
|
||||
<input class="login-input" id="pwd" type="password" autocomplete="off" name="pwd" required />
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<input class="login-button" type="submit" value="Log in" />
|
||||
</div>
|
||||
</form>
|
||||
<p>Don't have an account? <a href="./?reg">Sign up!</a></p>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="navbar">
|
||||
<form action="./" method="GET" class="navbar-form">
|
||||
<input type="hidden" name="backup" value="1">
|
||||
<!-- Backing up actually works but there is no restore function yet... -->
|
||||
<!-- <input type="submit" value="Back up"> -->
|
||||
<input type="submit" value="Back up">
|
||||
</form>
|
||||
<form action="./" method="GET" class="navbar-form">
|
||||
<input type="hidden" name="restore-list" value="1">
|
||||
<input type="submit" value="Restore">
|
||||
</form>
|
||||
<form action="./" method="GET" class="navbar-form">
|
||||
<input type="hidden" name="logout" value="1">
|
||||
<input type="submit" value="Log out">
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="login-container">
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="intent" value="register" />
|
||||
<div class="login-div">
|
||||
<p>{{ REGISTER_NOTICE }}</p>
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<label class="label" for="uname">Username</label>
|
||||
<input class="login-input" id="uname" type="text" name="uname" required />
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<label class="label" for="pwd">Password</label>
|
||||
<input class="login-input" id="pwd" type="password" autocomplete="off" name="pwd" required />
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<label class="label" for="pwd2">Password (Again)</label>
|
||||
<input class="login-input" id="pwd2" type="password" autocomplete="off" name="pwd2" required />
|
||||
</div>
|
||||
<div class="login-div">
|
||||
<input class="login-button" type="submit" value="Sign Up" />
|
||||
</div>
|
||||
</form>
|
||||
<p>Have an account? <a href="./?">Log in!</a></p>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="navbar">
|
||||
<form action="./" method="GET" class="navbar-form">
|
||||
<input type="submit" value="Cancel">
|
||||
</form>
|
||||
</div>
|
||||
<div class="todo-list">{{ RESTORE_ITEMS }}</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="todo-item" id="todo-item-{{ RESTORE_ITEM_TIMESTAMP }}">
|
||||
<details>
|
||||
<summary>{{ RESTORE_ITEM_TITLE }}</summary>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="restore" value="{{ RESTORE_ITEM_TIMESTAMP }}" />
|
||||
<input type="submit" value="Restore" />
|
||||
</form>
|
||||
|
||||
<div style="display:inline-block;width:1em;"></div>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="delete-restore" value="{{ RESTORE_ITEM_TIMESTAMP }}" />
|
||||
<input type="submit" value="Delete" />
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="todo-item" id="todo-item-{{ RESTORE_ITEM_TIMESTAMP }}">
|
||||
<summary>WARNING: Restoring a backup will overwrite your current list.</summary>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
// Fetch all the details element.
|
||||
const details = document.querySelectorAll("details");
|
||||
|
||||
// Add the onclick listeners.
|
||||
details.forEach((targetDetail) => {
|
||||
targetDetail.addEventListener("click", () => {
|
||||
// Close all the details that are not targetDetail.
|
||||
details.forEach((detail) => {
|
||||
if (detail !== targetDetail) {
|
||||
detail.removeAttribute("open");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,153 @@
|
||||
html {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #111111;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link, a:hover, a:visited, a:active {
|
||||
color: DeepPink;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 800px;
|
||||
margin: 30px auto;
|
||||
text-align: left;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-container form {
|
||||
width: inherit;
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.todo-category {
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #222222;
|
||||
}
|
||||
|
||||
.todo-category .todo-item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.todo-item form, .navbar-form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.todo-item form input, .navbar-form input {
|
||||
border: 2px solid #333333;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.todo-item form input:focus, .navbar-form input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.todo-item form input:active, .navbar-form input:active {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
summary, details[open] {
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin: -0.5em;
|
||||
margin-bottom: 0.7em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
border: 1px solid #222222;
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
summary:focus {
|
||||
outline: none;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.todo-add-div, .todo-add-container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.todo-add-div input[type="text"],
|
||||
.todo-add-div input[type="datetime-local"],
|
||||
.todo-add-div input[type="date"]
|
||||
{
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
.todo-add-div label {
|
||||
display: inline-block;
|
||||
width: 6em;
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.todo-add-button {
|
||||
border: none;
|
||||
background-color: Green;
|
||||
color: White;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
.todo-add-button:active {
|
||||
background-color: Lime;
|
||||
color: DimGrey;
|
||||
}
|
||||
.navbar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* LOGIN */
|
||||
.login-input {
|
||||
width: 100%;
|
||||
border: 1px solid LightPink;
|
||||
background-color: transparent;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
.login-button {
|
||||
border: none;
|
||||
background-color: DeepPink;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
.login-button:active {
|
||||
background-color: MediumVioletRed;
|
||||
}
|
||||
.login-div {
|
||||
margin: 20px;
|
||||
}
|
||||
.login-container {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.login-container p {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="todo-category" id="todo-category-{{ TODO_CATEGORY_ID }}">
|
||||
<h3>{{ TODO_CATEGORY_TITLE }}</h3>
|
||||
{{ TODO_CATEGORY_ITEMS }}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
<b>{{ TODO_ITEM_TITLE }}:</b> {{ TODO_ITEM_DESCRIPTION }}
|
||||
@@ -0,0 +1 @@
|
||||
<b>{{ TODO_ITEM_TITLE }}</b>
|
||||
@@ -0,0 +1,45 @@
|
||||
<div class="todo-item" id="todo-item-{{ TODO_ITEM_ID }}">
|
||||
<details>
|
||||
<summary>{{ TODO_ITEM_SUMMARY }}</summary>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="action" value="delay" />
|
||||
<input type="hidden" name="delay_by" value="-1 week" />
|
||||
<input type="hidden" name="todo_item_id" value="{{ TODO_ITEM_ID }}" />
|
||||
<input type="submit" value="-1 week" />
|
||||
</form>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="action" value="delay" />
|
||||
<input type="hidden" name="delay_by" value="-1 day" />
|
||||
<input type="hidden" name="todo_item_id" value="{{ TODO_ITEM_ID }}" />
|
||||
<input type="submit" value="-1 day" />
|
||||
</form>
|
||||
|
||||
<div style="display:inline-block;width:1em;"></div>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="action" value="delay" />
|
||||
<input type="hidden" name="delay_by" value="+1 day" />
|
||||
<input type="hidden" name="todo_item_id" value="{{ TODO_ITEM_ID }}" />
|
||||
<input type="submit" value="+1 day" />
|
||||
</form>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="action" value="delay" />
|
||||
<input type="hidden" name="delay_by" value="+1 week" />
|
||||
<input type="hidden" name="todo_item_id" value="{{ TODO_ITEM_ID }}" />
|
||||
<input type="submit" value="+1 week" />
|
||||
</form>
|
||||
|
||||
<div style="display:inline-block;width:1em;"></div>
|
||||
<div style="display:inline-block;width:1em;"></div>
|
||||
|
||||
<form action="./" method="POST">
|
||||
<input type="hidden" name="action" value="remove" />
|
||||
<input type="hidden" name="todo_item_id" value="{{ TODO_ITEM_ID }}" />
|
||||
<input type="submit" value="Remove" />
|
||||
</form>
|
||||
|
||||
</details>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
Nothing here yet...
|
||||
@@ -0,0 +1 @@
|
||||
<div class="todo-list">{{ TODO_ITEMS }}</div>
|
||||
Reference in New Issue
Block a user