<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2457d6">
<title>Wred notebook</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="/static/app.css">
<script src="/static/app.js" defer></script>
</head>
<body>
<div class="shell">
<header class="app-header">
<a class="brand" href="/" aria-label="Wred notebook home"><span class="book-mark" aria-hidden="true"></span>Wred notebook</a>
<div id="account" class="account" hidden>
<span id="username"></span>
<button id="export" class="quiet" type="button">Export notes</button>
<button id="logout" class="quiet" type="button">Log out</button>
</div>
</header>
<p id="notice" class="notice" role="status" aria-live="polite" hidden></p>
<main id="welcome" class="welcome">
<section class="introduction">
<h1>A notebook<br>of your own.</h1>
<p>Keep your ideas, lists, and little reminders in one place. Find them when you need them.</p>
<div class="paper-preview" aria-hidden="true">
<span class="preview-title">Things to remember</span>
<span class="preview-line">Leave a little room for the next idea.</span>
<span class="preview-line">Start with a blank page.</span>
<span class="preview-line"></span>
</div>
</section>
<section class="auth-panel" aria-labelledby="auth-title">
<div class="auth-switch" aria-label="Choose how to sign in">
<button id="login-mode" type="button" aria-pressed="true">Log in</button>
<button id="signup-mode" type="button" aria-pressed="false">Create account</button>
</div>
<h2 id="auth-title">Open your notebook</h2>
<p id="auth-description">Log in to pick up where you left off.</p>
<form id="auth-form">
<label for="auth-username">Username</label>
<input id="auth-username" name="username" autocomplete="username" maxlength="64" required>
<label for="auth-password">Password</label>
<input id="auth-password" name="password" type="password" autocomplete="current-password" minlength="15" maxlength="128" aria-describedby="password-help" required>
<p id="password-help" class="field-help">Use 15–128 characters. Spaces are welcome.</p>
<button id="auth-submit" class="primary" type="submit">Log in</button>
</form>
</section>
</main>
<main id="workspace" class="workspace" hidden>
<aside class="notes-pane" aria-labelledby="notes-heading">
<div class="pane-heading">
<h1 id="notes-heading">Your notes</h1>
<button id="new-note" class="primary small" type="button">+ New note</button>
</div>
<label class="sr-only" for="search">Search notes</label>
<input id="search" type="search" placeholder="Search your notes…" maxlength="200">
<label class="check filter"><input id="pinned-filter" type="checkbox"> Pinned only</label>
<p id="list-summary" class="list-summary" aria-live="polite"></p>
<div id="note-list" class="note-list" aria-label="Notes"></div>
<p id="empty-list" class="empty-list" hidden>Your first note starts on the right. Give it a title and save it.</p>
<nav id="pagination" class="pagination" aria-label="Notes pages" hidden>
<button id="previous" class="quiet" type="button">← Previous</button>
<span id="page-number"></span>
<button id="next" class="quiet" type="button">Next →</button>
</nav>
</aside>
<section class="editor" aria-labelledby="editor-heading">
<div class="editor-heading">
<h2 id="editor-heading">New note</h2>
<span id="save-state" class="save-state">Ready when you are</span>
</div>
<form id="note-form">
<label for="note-title">Title</label>
<input id="note-title" name="title" placeholder="Give this thought a title" maxlength="100" required>
<label for="note-body">Note</label>
<textarea id="note-body" name="body" placeholder="Start writing…" maxlength="10000" rows="12"></textarea>
<div class="editor-details">
<label class="check"><input id="note-pinned" name="pinned" type="checkbox"> Keep at top</label>
<span id="character-count">0 / 10,000</span>
</div>
<div class="editor-actions">
<button id="save-note" class="primary" type="submit">Save note</button>
<button id="discard" class="quiet" type="button">Clear draft</button>
<button id="delete-note" class="danger" type="button" hidden>Delete note</button>
</div>
</form>
<p id="note-date" class="note-date"></p>
</section>
</main>
<details class="demo-tools">
<summary>Try request limits</summary>
<p>This demo endpoint accepts three requests every ten seconds. Extra requests return HTTP 429 and tell you when to retry.</p>
<button id="rate-demo" class="quiet" type="button">Send 5 requests</button>
<p id="rate-result" role="status" aria-live="polite"></p>
</details>
<footer class="app-footer">This is a demo. Your login survives reloads for up to seven days; data and logins reset when the server restarts.</footer>
</div>
</body>
</html>