Add tips buttons to settings & index pages

css/index.css

@@ -23,10 +23,10 @@ header h1 {
 }
 
 /* Install button */
-#installbutton {
+#installbutton, #tipsbutton {
     position: fixed;
     right: 10px;
-    top: 10px;
+    top: 66px;
 
     min-width: fit-content;
     font-size: 2.75vh;
@@ -44,11 +44,11 @@ header h1 {
     transition: opacity 300ms ease-in-out 500ms, color 300ms ease-in-out;
 }
 
-#installbutton:hover {
+:is(#installbutton, #tipsbutton):hover {
     color: #36393e;
 }
 
-#installbutton img {
+:is(#installbutton, #tipsbutton) img {
     vertical-align: middle;
     margin-right: 0.25vw;
 }
@@ -58,6 +58,13 @@ header h1 {
     cursor: pointer;
 }
 
+#tipsbutton {
+    top: 10px;
+    height: 46px;
+    opacity: 1;
+    cursor: pointer;
+}
+
 div#itemdescription {
     text-align: center;
     display: block;

index.html

@@ -15,6 +15,7 @@ <h1>KanjiThing</h1>
 
     <!-- Button to install KanjiThing on the chrome store -->
     <button id="installbutton"><img src="https://www.google.com/images/icons/product/chrome_web_store-32.png" draggable="false" />Install</button>
+    <button id="tipsbutton"><img src="https://icons.iconarchive.com/icons/dtafalonso/ios8/32/Tips-icon.png" draggable="false" />Tips page</button>
 
     <!-- Badges -->
     <div id="githubbadges" style="text-align: center">

js/index.js

@@ -37,6 +37,10 @@ chrome.extension || document.getElementById("installbutton").addEventListener("c
     window.open("https://chrome.google.com/webstore/detail/kanjithing/nccfelhkfpbnefflolffkclhenplhiab/");
 });
 
+document.getElementById("tipsbutton").addEventListener("click", () => {
+    window.open("/tips.html");
+});
+
 // Helper function to transform date to human readable time
 function howLongAgo(datestamp) {
     var delta = (new Date() - new Date(datestamp)) / 1000;

js/settings.js

@@ -152,6 +152,10 @@ async function generateSettingsPage() {
     // Ensure default settings are available
     await ensureDefaultConfiguration();
 
+    document.getElementById("tipsbutton").addEventListener("click", () => {
+        window.open("/tips.html");
+    });    
+
     generateKanjiSets();
     generateMisc();
 }

settings.html

@@ -15,6 +15,9 @@
         <h1>KanjiThing</h1>
     </header>
 
+    <!-- Tips page -->
+    <button id="tipsbutton"><img src="https://icons.iconarchive.com/icons/dtafalonso/ios8/32/Tips-icon.png" draggable="false" />Tips page</button>
+
     <!-- Config panel for the custom sets -->
     <h2>Kanji sets</h2>
     <div id="setscontainer">