death-notifier/src/main/index.html

177 lines
7.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Florine W. Dekker" />
<meta name="application-name" content="Death Notifier" />
<meta name="description" content="Get notified when a famous person dies." />
<meta name="theme-color" content="#0033cc" />
<title>Death Notifier | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
<!--suppress HtmlUnknownTarget -->
<link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
<script async src="https://stats.fwdekker.com/count.js"
data-goatcounter="https://stats.fwdekker.com/count"></script>
</head>
<body>
<noscript>
<img src="https://stats.fwdekker.com/count?p=/tools/death-notifier/" alt="Counting pixel" />
<p>
This website does not function if JavaScript is disabled.
Please check the
<a href="https://www.enable-javascript.com/">instructions on how to enable JavaScript in your web browser</a>.
</p>
</noscript>
<main class="hidden">
<div id="nav"></div>
<div id="contents">
<div id="header"></div>
<section class="container">
<div class="row">
<div class="column">
<!-- Move form-specific messages closer to the form! -->
<p id="validationInfoShared">
<span class="validationInfo"></span>
</p>
</div>
</div>
<div class="row hidden" id="loginRow">
<div class="column">
<h2>Log in</h2>
<p>Already have an account? Welcome back!</p>
<form id="loginForm" novalidate>
<label for="loginEmail">
Email
<input id="loginEmail" type="email" name="email" autocomplete="on" />
<span class="validationInfo"></span>
</label>
<label for="loginPassword">
Password
<input id="loginPassword" type="password" name="password" />
<span class="validationInfo"></span>
</label>
<button id="loginButton">Log in</button>
</form>
</div>
<div class="column">
<h2>Register</h2>
<p>
New user?
Create an account!
You can always delete your account and associated data.
Check the <a href="https://fwdekker.com/privacy/">privacy policy</a> for more information.
</p>
<form id="registerForm" novalidate>
<label for="registerEmail">
Email
<input id="registerEmail" type="email" name="email" autocomplete="on" />
<span class="validationInfo"></span>
</label>
<label for="registerPassword">
Password
<input id="registerPassword" type="password" name="password" />
<span class="validationInfo"></span>
</label>
<label for="registerPasswordConfirm">
Confirm password
<input id="registerPasswordConfirm" type="password" name="passwordConfirm" />
<span class="validationInfo"></span>
</label>
<button id="registerButton">Create account</button>
</form>
</div>
</div>
<div class="row hidden" id="trackingRow">
<div class="column">
<h2>Has this person died?</h2>
<table id="trackings">
<thead>
<tr>
<th>Name</th>
<th>Deceased?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<form id="addTrackingForm" novalidate>
<label for="addTrackingPersonName">
<input id="addTrackingPersonName" type="text" name="personName"
autocomplete="on" />
<button id="addTrackingButton">Add</button>
<span class="validationInfo"></span>
</label>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row hidden" id="accountRow">
<div class="column">
<h2>Manage account</h2>
<!-- TODO: Add way to delete account -->
<form id="logoutForm" novalidate>
<button id="logoutButton">Log out</button>
</form>
</div>
<div class="column">
<h3>Change email</h3>
<p>
<b>Current email:</b> <span id="emailCurrent">TODO</span><br />
<b>Validated:</b> <span id="emailValidated">TODO</span>
</p>
<form id="updateEmailForm" novalidate>
<label for="updateEmailEmail">
Email
<input id="updateEmailEmail" type="email" name="email" autocomplete="on" />
<span class="validationInfo"></span>
</label>
<button id="updateEmailButton">Change email</button>
</form>
</div>
<div class="column">
<h3>Change password</h3>
<p>Last changed: <span id="passwordLastChanged">TODO</span></p>
<form id="updatePasswordForm" novalidate>
<label for="updatePasswordPasswordOld">
Old password
<input id="updatePasswordPasswordOld" type="password" name="passwordOld" />
<span class="validationInfo"></span>
</label>
<label for="updatePasswordPasswordNew">
New password
<input id="updatePasswordPasswordNew" type="password" name="passwordNew" />
<span class="validationInfo"></span>
</label>
<label for="updatePasswordPasswordConfirm">
Confirm new password
<input id="updatePasswordPasswordConfirm" type="password" name="passwordConfirm" />
<span class="validationInfo"></span>
</label>
<button id="updatePasswordButton">Change password</button>
</form>
</div>
</div>
</section>
</div>
<div id="footer"></div>
</main>
<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script>
<!--suppress HtmlUnknownTarget -->
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
</body>
</html>