432 lines
22 KiB
HTML
432 lines
22 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" />
|
|
<!-- TODO: 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>
|
|
|
|
<article id="about-part" class="hidden">
|
|
<header>
|
|
<hgroup>
|
|
<h2>About</h2>
|
|
<h3>What is Death Notifier?</h3>
|
|
</hgroup>
|
|
</header>
|
|
<p>
|
|
Wikipedia's editors are
|
|
<a href="https://knowyourmeme.com/memes/wikipedia-editors-when-someone-dies" target="_blank">infamous</a>
|
|
for the speed at which they update the encyclopedia if someone has died.
|
|
<b>What if you could harness this power for yourself?</b>
|
|
</p>
|
|
|
|
<p>
|
|
Add the famous people that are important to you, and Death Notifier will automatically email you if
|
|
they have passed away (according to some random editor).
|
|
</p>
|
|
</article>
|
|
|
|
<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" data-status-card="login-status-card" novalidate>
|
|
<article id="login-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<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>
|
|
<br /><br />
|
|
|
|
<button id="login-submit">Log in</button>
|
|
<a role="button" id="forgot-password-go-to" class="outline" href="#">
|
|
Forgot password?
|
|
</a>
|
|
</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" data-status-card="register-status-card" novalidate>
|
|
<article id="register-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<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>
|
|
<br /><br />
|
|
|
|
<button id="register-submit">Create account</button>
|
|
</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" data-status-card="send-password-reset-status-card"
|
|
novalidate>
|
|
<article id="send-password-reset-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<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>
|
|
|
|
<button id="send-password-reset-submit">Send email</button>
|
|
</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" data-status-card="reset-password-status-card" novalidate>
|
|
<article id="reset-password-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<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>
|
|
<br /><br />
|
|
|
|
<button id="reset-password-submit">Set password</button>
|
|
</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 id="trackings-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
<div class="grid">
|
|
<form id="add-tracking-form" data-status-card="trackings-status-card" novalidate>
|
|
<div class="flex-form">
|
|
<!--suppress HtmlFormInputWithoutLabel -->
|
|
<input id="add-tracking-name" class="flex-form-grow" type="text" name="person_name"
|
|
autocomplete="name" placeholder="Who do you want to track?" />
|
|
<button id="add-tracking-submit">Add</button>
|
|
</div>
|
|
|
|
<small id="add-tracking-name-hint" class="input-hint" data-hint-for="add-tracking-name"></small>
|
|
</form>
|
|
<form id="filter-trackings-form" data-status-card="trackings-status-card" novalidate>
|
|
<!--suppress HtmlFormInputWithoutLabel -->
|
|
<input id="filter-trackings-query" type="search" name="query" placeholder="Search" />
|
|
</form>
|
|
</div>
|
|
<div id="trackings-wrapper">
|
|
<table id="trackings">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>Added</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="100">
|
|
<progress></progress>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
|
|
<div id="settings-part" class="hidden">
|
|
<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" data-status-card="update-email-status-card" novalidate>
|
|
<article id="update-email-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<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>
|
|
</form>
|
|
<footer>
|
|
<form id="resend-email-verification-form" data-status-card="resend-email-status-card"
|
|
novalidate>
|
|
<article id="resend-email-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<input type="checkbox" id="email-verified-checkbox" disabled />
|
|
<label for="email-verified-checkbox">Verified</label>
|
|
|
|
<button id="resend-email-verification-submit" class="hidden inline-button">
|
|
resend link
|
|
</button>
|
|
</form>
|
|
<form id="toggle-notifications-form" data-status-card="toggle-notifications-status-card"
|
|
novalidate>
|
|
<article id="toggle-notifications-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<input type="checkbox" id="notifications-enabled-checkbox" />
|
|
<label for="notifications-enabled-checkbox">Notifications</label>
|
|
<br />
|
|
<small id="notifications-enabled-checkbox-hint"
|
|
data-hint-for="notifications-enabled-checkbox"></small>
|
|
</form>
|
|
</footer>
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<h3>Password</h3>
|
|
</header>
|
|
<form id="update-password-form" data-status-card="update-password-status-card" novalidate>
|
|
<article id="update-password-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<b>Last changed:</b>
|
|
<span id="password-last-changed"><span aria-busy="true"></span></span>
|
|
<br /><br />
|
|
|
|
<label for="update-password-password-old">Old password</label>
|
|
<input id="update-password-password-old" type="password" name="password_old"
|
|
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>
|
|
<br /><br />
|
|
|
|
<label for="update-password-password-new">New password</label>
|
|
<input id="update-password-password-new" type="password" name="password_new"
|
|
autocomplete="new-password" />
|
|
<!-- TODO: Add password strength indicator -->
|
|
<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>
|
|
<br /><br />
|
|
|
|
<button id="update-password-button">Change password</button>
|
|
</form>
|
|
<form id="forgot-password-after-login-form"
|
|
data-status-card="forgot-password-after-login-status-card" novalidate>
|
|
<article id="forgot-password-after-login-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<input id="forgot-password-after-login-email" type="hidden" name="email" />
|
|
|
|
<a role="button" id="forgot-password-after-login-button" class="outline" href="#">
|
|
Forgot password?
|
|
</a>
|
|
</form>
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h3>Account management</h3>
|
|
<h4>Log out or delete your account.</h4>
|
|
</hgroup>
|
|
</header>
|
|
<form id="logout-form" data-status-card="logout-status-card" novalidate>
|
|
<article id="logout-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<button id="logoutButton">Log out</button>
|
|
</form>
|
|
|
|
<footer>
|
|
<h4>Delete account</h4>
|
|
<p>
|
|
If you no longer want to use Death Notifier, you can permanently delete your account.
|
|
This choice is permanent and cannot be reverted.
|
|
</p>
|
|
<form id="delete-account-form" data-status-card="delete-status-card" novalidate>
|
|
<article id="delete-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<input id="delete-account-actual-email" type="hidden" name="email" />
|
|
|
|
<label for="delete-account-email">Confirm email</label>
|
|
<input id="delete-account-email" name="email" autocomplete="off" />
|
|
<small id="delete-account-email-hint" data-hint-for="delete-account-email"></small>
|
|
|
|
<input type="checkbox" role="switch" id="delete-account-confirm" />
|
|
<label for="delete-account-confirm">I want to permanently delete my account.</label>
|
|
<br />
|
|
<small id="delete-account-confirm-hint" data-hint-for="delete-account-confirm"></small>
|
|
<br /><br />
|
|
|
|
<button id="delete-account-button" class="outline">Delete account</button>
|
|
</form>
|
|
</footer>
|
|
</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>
|