99 lines
4.4 KiB
HTML
99 lines
4.4 KiB
HTML
<!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>
|