405 lines
20 KiB
HTML
405 lines
20 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" />
|
|
|
|
<meta name="fwd:nav:target" content="#nav" />
|
|
<!-- Remove experimental after release -->
|
|
<meta name="fwd:nav:highlight-path" content="/Tools/Experimental/Death Notifier/" />
|
|
<meta name="fwd:footer:target" content="#footer" />
|
|
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/death-notifier/" />
|
|
<meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
|
|
<meta name="fwd:validation:load-forms" />
|
|
|
|
<title>Death Notifier | FWDekker</title>
|
|
|
|
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
|
|
<!--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 class="fwd-js-notice">
|
|
<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>
|
|
<nav id="nav"></nav>
|
|
<main class="container hidden">
|
|
<div role="document">
|
|
<section>
|
|
<header class="fwd-header">
|
|
<hgroup>
|
|
<h1><a href=".">Death Notifier</a></h1>
|
|
<h2>Get notified when a famous person dies.</h2>
|
|
</hgroup>
|
|
</header>
|
|
|
|
<article id="global-message" class="status-card hidden">
|
|
<output></output>
|
|
</article>
|
|
<article id="shared-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
<p id="shared-home-link" class="hidden">
|
|
<a href="./">Click here to return to the main page</a>
|
|
</p>
|
|
|
|
<div id="welcome-part" class="grid hidden">
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h2>Log in</h2>
|
|
<h3>Already have an account? Welcome back!</h3>
|
|
</hgroup>
|
|
</header>
|
|
<div class="article-contents">
|
|
<form id="login-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="login-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<label for="login-email">Email</label>
|
|
<input id="login-email" type="email" name="email" autocomplete="email" />
|
|
<small id="login-email-hint" data-hint-for="login-email"></small>
|
|
|
|
<label for="login-password">Password</label>
|
|
<input id="login-password" type="password" name="password"
|
|
autocomplete="current-password" />
|
|
<small id="login-password-hint" data-hint-for="login-password"></small>
|
|
|
|
<input type="checkbox" role="switch" id="login-password-toggle" class="password-toggle"
|
|
data-toggles="login-password" />
|
|
<label for="login-password-toggle">Show password</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="login-submit">Log in</button>
|
|
<a role="button" id="forgot-password-go-to" class="outline" href="#">
|
|
Forgot password?
|
|
</a>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h2>Register</h2>
|
|
<h3>
|
|
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.
|
|
</h3>
|
|
</hgroup>
|
|
</header>
|
|
<div class="article-contents">
|
|
<form id="register-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="register-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<label for="register-email">Email</label>
|
|
<input id="register-email" type="email" name="email" autocomplete="email" />
|
|
<small id="register-email-hint" data-hint-for="register-email"></small>
|
|
|
|
<label for="register-password">Password</label>
|
|
<input id="register-password" type="password" name="password"
|
|
autocomplete="new-password" />
|
|
<small id="register-password-hint" data-hint-for="register-password"
|
|
data-hint="Use at least 8 characters."></small>
|
|
|
|
<input type="checkbox" role="switch" id="register-password-toggle"
|
|
class="password-toggle"
|
|
data-toggles="register-password" />
|
|
<label for="register-password-toggle">Show password</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="register-submit">Create account</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div id="send-forgot-password-part" class="grid hidden">
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h2>Forgot password</h2>
|
|
<h3>Send an email to help reset your password.</h3>
|
|
</hgroup>
|
|
</header>
|
|
<div class="article-contents">
|
|
<form id="send-password-reset-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="send-password-reset-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<label for="send-password-reset-email">Email</label>
|
|
<input id="send-password-reset-email" type="email" name="email" autocomplete="email" />
|
|
<small id="send-password-reset-email-hint"
|
|
data-hint-for="send-password-reset-email"></small>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="send-password-reset-submit">Send email</button>
|
|
</fieldset>
|
|
</form>
|
|
<a role="button" id="forgot-password-go-back" class="outline" href="#">Return to log in form</a>
|
|
</div>
|
|
</article>
|
|
<div></div>
|
|
</div>
|
|
<div id="reset-password-part" class="grid hidden">
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h2>Reset password</h2>
|
|
<h3>Set a new password for your account.</h3>
|
|
</hgroup>
|
|
</header>
|
|
|
|
<form id="reset-password-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="reset-password-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<input id="reset-password-token" type="hidden" name="token" />
|
|
|
|
<label for="reset-password-email">Email</label>
|
|
<input id="reset-password-email" type="email" name="email" disabled />
|
|
<small id="reset-password-email-hint" data-hint-for="reset-password-email"></small>
|
|
|
|
<label for="reset-password-password">Password</label>
|
|
<input id="reset-password-password" type="password" name="password"
|
|
autocomplete="new-password" />
|
|
<small id="reset-password-password-hint" data-hint-for="reset-password-password"
|
|
data-hint="Use at least 8 characters."></small>
|
|
|
|
<input type="checkbox" role="switch" id="reset-password-password-toggle"
|
|
class="password-toggle"
|
|
data-toggles="reset-password-password" />
|
|
<label for="reset-password-password-toggle">Show password</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="reset-password-submit">Set password</button>
|
|
</fieldset>
|
|
</form>
|
|
<a role="button" id="reset-password-go-back" class="outline" href="./">Return to log in form</a>
|
|
</article>
|
|
<div></div>
|
|
</div>
|
|
|
|
<article id="tracking-part" class="hidden">
|
|
<header>
|
|
<h2>Tracked articles</h2>
|
|
</header>
|
|
<article class="status-card hidden" id="remove-trackings-status-card">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
<form id="filter-trackings-form" novalidate>
|
|
<fieldset>
|
|
<!--suppress HtmlFormInputWithoutLabel -->
|
|
<input id="filter-trackings-query" type="search" name="query" />
|
|
</fieldset>
|
|
</form>
|
|
<div id="trackings-wrapper">
|
|
<table id="trackings">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<form id="add-tracking-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="add-tracking-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<!-- TODO: Show random suggestions on who to track -->
|
|
<label for="add-tracking-name">Track another article</label>
|
|
<input id="add-tracking-name" type="text" name="person_name" autocomplete="name" />
|
|
<small id="add-tracking-name-hint" data-hint-for="add-tracking-name"></small>
|
|
|
|
<button id="add-tracking-submit">Add</button>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
|
|
<div id="settings-part" class="hidden">
|
|
<article>
|
|
<header>
|
|
<h2>Account settings</h2>
|
|
</header>
|
|
<form id="logout-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="logout-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<button id="logoutButton">Log out</button>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h3>Email address</h3>
|
|
<h4>
|
|
You use your email address to log in.
|
|
If you have verified your email address, you also receive notifications about tracked
|
|
articles at this address.
|
|
You can always disable notifications.
|
|
</h4>
|
|
</hgroup>
|
|
</header>
|
|
<form id="update-email-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="update-email-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<label for="update-email-email">Email address</label>
|
|
<input id="update-email-email" type="email" name="email" autocomplete="email" />
|
|
<small id="update-email-email-hint" data-hint-for="update-email-email"></small>
|
|
|
|
<button id="updateEmailButton">Change email</button>
|
|
</fieldset>
|
|
</form>
|
|
<form id="resend-email-verification-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="resend-email-verification-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<input type="checkbox" id="email-verified-checkbox" disabled />
|
|
<label for="email-verified-checkbox">Verified</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="resend-email-verification-submit" class="hidden">resend link</button>
|
|
</fieldset>
|
|
</form>
|
|
<form id="toggle-notifications-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="toggle-notifications-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<input type="checkbox" id="notifications-enabled-checkbox" />
|
|
<label for="notifications-enabled-checkbox">Notifications</label>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<h3>Password</h3>
|
|
</header>
|
|
<form><b>Last changed:</b> <span id="password-last-changed">...</span></form>
|
|
<form id="update-password-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="update-password-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<label for="update-password-password-old">Old password</label>
|
|
<input id="update-password-password-old" type="password" name="password"
|
|
autocomplete="current-password" />
|
|
<small id="update-password-password-old-hint"
|
|
data-hint-for="update-password-password-old"></small>
|
|
|
|
<input type="checkbox" role="switch" id="update-password-password-old-toggle"
|
|
class="password-toggle"
|
|
data-toggles="update-password-password-old" />
|
|
<label for="update-password-password-old-toggle">Show password</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<label for="update-password-password-new">New password</label>
|
|
<input id="update-password-password-new" type="password" name="password"
|
|
autocomplete="new-password" />
|
|
<small id="update-password-password-new-hint" data-hint-for="update-password-password-new"
|
|
data-hint="Use at least 8 characters."></small>
|
|
|
|
<input type="checkbox" role="switch" id="update-password-password-new-toggle"
|
|
class="password-toggle"
|
|
data-toggles="update-password-password-new" />
|
|
<label for="update-password-password-new-toggle">Show password</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="updatePasswordButton">Change password</button>
|
|
</fieldset>
|
|
</form>
|
|
<!-- TODO: Add forgot password button after logging in -->
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h3>Delete account</h3>
|
|
<h4>If you no longer want to use Death Notifier, you can permanently delete your
|
|
account.</h4>
|
|
</hgroup>
|
|
</header>
|
|
<form id="delete-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="delete-form">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<input id="delete-email" type="hidden" name="email" />
|
|
<button id="delete-button">Delete account</button>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<footer id="footer"></footer>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
|
|
</body>
|
|
</html>
|