From 5daabd2347941a710c7652c3b3f85db39c38d135 Mon Sep 17 00:00:00 2001
From: Evan J <63916296+EvEbEJ@users.noreply.github.com>
Date: Sat, 12 Oct 2024 14:24:35 +0000
Subject: [PATCH] Add customization options

---
 index.html | 31 ++++++++++++++++++++++++++++++
 style.css  | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/index.html b/index.html
index a4b63f5..8081a47 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,17 @@
                     <input id="max_words" type="text" class="form-control wpm" style="display: inline" placeholder="170" /> words
                 </div>
             </div>
+            <div id="text-size-ctr" class="form-group">
+                <label>Text Size</label>
+                <br>
+                <label for="small"><input id="small" name="text-size" class="text-size" value="14px" type="radio" checked>S</label>
+                <label for="mid"><input id="mid" name="text-size" class="text-size" value="18px" type="radio">M</label>
+                <label for="large"><input id="large" name="text-size" class="text-size" value="22px" type="radio">L</label>
+            </div>
+            <div class="form-group">
+                <input type="checkbox" name="hide-text" id="hide-text">
+                <label for="hide-text">Hide Text</label>
+            </div>
             <div class="form-group">
                 <button id="generate" type="button" class="btn btn-primary">Generate</button> 12 passages to recite in 8 minutes
             </div>
@@ -59,5 +70,25 @@
         </div>
     </div>
     </div>
+    <script>
+        // passage settings
+        const passages = document.querySelector("#passages")
+        const hideTextCheck = document.querySelector("#hide-text")
+
+        hideTextCheck.addEventListener("change", () => {
+            if (hideTextCheck.checked) {
+                passages.classList.add("hide-text-ctr")
+            }
+            else {
+                passages.classList.remove("hide-text-ctr")
+            }
+        })
+
+        document.querySelectorAll(".text-size").forEach(radio => {
+            radio.addEventListener("change", () => {
+                passages.style.fontSize = radio.value
+            })
+        })
+    </script>
 </body>
 </html>
diff --git a/style.css b/style.css
index f356024..f4cd481 100644
--- a/style.css
+++ b/style.css
@@ -14,6 +14,60 @@ div.container-fluid > div {
     max-width: 300px;
 }
 
+#text-size-ctr label:has([type=radio]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 50px;
+    height: 40px;
+    border: 2px solid #aaa;
+    border-radius: 10px;
+    transition: background-color 0.3s;    
+}
+
+#text-size-ctr label:has([type=radio]:not(:disabled)) {
+    cursor: pointer;
+}
+
+#text-size-ctr label:has([type=radio]):hover {
+    background-color: #d3e8ee;
+    border-color: rgb(148, 171, 190);
+}
+
+#text-size-ctr label:has([type=radio]:checked) {
+    color: #fff;
+    background-color: rgb(83, 158, 219);
+    border-color: rgb(83, 158, 219);
+}
+
+#text-size-ctr input[type=radio] {
+    display:none;
+}
+
+.hide-text-ctr .passage {
+    display: flex;
+    align-items: space-between;
+    justify-content: center;
+    position: relative;
+    width: clamp(300px, 90vw, 600px);
+}
+
+.hide-text-ctr .reference-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.hide-text-ctr .passage p, .hide-text-ctr .reference-bottom {
+    display:none;
+}
+
+.hide-text-ctr .reference-top {
+    margin: 0;
+}
+
 #passages {
     padding: 20px 0;
 }
@@ -60,6 +114,7 @@ div.reference-bottom a {
     width: 2em;
     text-align: center;
     float: right;
+    color: #999;
 }
 
 @media screen {