Frontend Features and refactor

html/plan.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Make a Bible Reading Plan - KJV API</title>
+<link rel="stylesheet" href="/styles/page.css?v=__V__">
+<style>
+.fieldset { border: none; padding: 0; margin: 0 0 var(--space-lg); }
+.fieldset legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
+.inline-field { display: inline-block; width: 6rem; margin: 0 0.4rem; }
+.inline-field input[type=text], input[type=number] {
+    min-height: 44px; padding: 0.4rem 0.6rem; font-size: 1rem; font-family: var(--font-ui);
+    background-color: var(--color-bg-primary); color: var(--color-text-primary);
+    border: 2px solid var(--color-border); border-radius: var(--border-radius-sm);
+}
+select {
+    min-height: 44px; font-size: 1rem; font-family: var(--font-ui); margin-left: 0.4rem;
+    background-color: var(--color-bg-primary); color: var(--color-text-primary);
+    border: 2px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0 0.5rem;
+}
+input[type=number] { width: 6rem; margin: 0 0.4rem; }
+.quick-start { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
+.quick-start button {
+    min-height: 40px; padding: 0.3rem 1rem; background-color: var(--color-bg-tertiary);
+    color: var(--color-text-primary); border: 1px solid var(--color-border);
+}
+.continue-box { display: none; background-color: var(--color-bg-secondary); border: 1px solid var(--color-accent-primary);
+    border-radius: var(--border-radius); padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0; }
+.continue-box a { font-weight: 600; }
+</style>
+<script src="/js/book_suggest.js?v=__V__" defer></script>
+</head>
+<body>
+<header>
+<a href="/">Home</a> <a href="/find">Quick Search</a>
+<a href="/random?view=rich">Random Verse</a> <a href="/votd?view=rich">Verse of the Day</a>
+<a href="/saved">Saved</a>
+</header>
+<h2>Make a Bible Reading Plan</h2>
+
+<div class="continue-box" id="continue-box">
+    You already have a plan in this browser: <a id="continue-link" href="#">continue reading</a>.
+</div>
+
+<p>Pick where to start and how much to read each day. You'll get a page to bookmark; open it
+each day to see today's reading, press <b>Done</b> when you've read it, and the plan moves on.
+You can always go back to the previous reading or jump to any verse.</p>
+
+<form action="/plan/new" method="post">
+    <div class="fieldset">
+        <label for="start">Start at</label>
+        <div class="quick-start">
+            <button type="button" data-start="Genesis 1:1">Genesis (whole Bible)</button>
+            <button type="button" data-start="Matthew 1:1">Matthew (New Testament)</button>
+            <button type="button" data-start="Psalms 1:1">Psalms</button>
+            <button type="button" data-start="John 1:1">John</button>
+        </div>
+        <input type="text" name="start" id="start" data-book-suggest placeholder="Genesis 1:1" autocapitalize="off" autocomplete="off">
+    </div>
+
+    <fieldset class="fieldset">
+        <legend>How much each day</legend>
+        <label class="choice"><input type="radio" name="pace" value="days" checked>
+            Finish the Bible in
+            <select name="days" aria-label="Finish in">
+                <option value="365" selected>1 year</option>
+                <option value="180">6 months</option>
+                <option value="90">90 days</option>
+                <option value="30">30 days</option>
+            </select>
+        </label><br>
+        <label class="choice"><input type="radio" name="pace" value="verses">
+            Read <input type="number" name="verses" value="30" min="1" max="500" aria-label="Verses per day"> verses a day
+        </label>
+    </fieldset>
+
+    <input type="submit" value="Create my plan">
+</form>
+
+<p>Your plan is saved on this server under a short code in the page address, so the bookmark
+is all you need. Plans unused for 90 days are removed.</p>
+
+<script>
+var startInput = document.getElementById('start');
+document.querySelectorAll('[data-start]').forEach(function (b) {
+    b.addEventListener('click', function () { startInput.value = b.getAttribute('data-start'); });
+});
+try {
+    var plan = JSON.parse(localStorage.getItem('kjv.plan'));
+    if (plan && /^[0-9A-Z]+$/.test(plan.uid)) {
+        document.getElementById('continue-link').href = '/plan/' + plan.uid + '?n=' + (parseInt(plan.n, 10) || 25);
+        document.getElementById('continue-box').style.display = 'block';
+    }
+} catch (e) {}
+</script>
+</body>
+</html>