Frontend Features and refactor

html/navbar.html

@@ -1,28 +1,35 @@
-<div class="topbar" align="center">
-
-</div>
-
-<header>
-<div class="header" id="NavHeader" align="center">
-
-    <a href="/">Home</a> |
-    <a href="/random?view=rich">Random Verse</a> | 
-    <a href="/votd?view=rich">Verse of the Day</a>
-    <form action="/find">
-        <input type="text" name="kw" value="{query}" id="searchBar">
-        <input type="submit" value="Search">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
+<title>{title} - KJV API</title>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+{css}
+<script src="/js/verse_menu.js?v=__V__" defer></script>
+<script src="/js/book_suggest.js?v=__V__" defer></script>
+</head>
+<body>
+<header class="site-header">
+    <div class="site-bar">
+        <a class="brand" href="/">KJV API</a>
+        <nav class="site-links" aria-label="Site">
+            <a href="/random?view=rich">Random Verse</a>
+            <a href="/votd?view=rich">Verse of the Day</a>
+            <a href="/plan">Reading Plan</a>
+            <a href="/saved">Saved</a>
+        </nav>
+    </div>
+    <form class="search-form" action="/find" role="search">
+        <input type="text" name="kw" value="{query}" id="searchBar" data-book-suggest aria-label="Search scripture" placeholder="Verse reference or keywords..." autocapitalize="off" autocomplete="off" enterkeyhint="search">
         <input type="hidden" name="view" value="rich">
+        <input type="submit" value="Search">
     </form>
-    <button onclick="make_shortcode()">Get Shortcode: </button>
-    <a id="context_href" href=''></a>
-    <br>
-    &leftarrow;
-    <a href="{prev_chapter_link}">{prev_chapter_name}</a> |
-    {current_chapter_name} |
-    <a href="{next_chapter_link}">{next_chapter_name}</a>
-    &rightarrow;
-</div>
-<script src="js/shortcode.js">
-	make_shortcode();
-</script>
+    <div class="shortcode">
+        <button type="button" class="btn-small" onclick="make_shortcode()">Get shortcode</button>
+        <a id="context_href" href=""></a>
+    </div>
 </header>
+{chapter_nav}
+<script src="/js/shortcode.js?v=__V__"></script>