tooltip fixes, formatting

README.md

@@ -1 +1,96 @@
-# SBLGNT_Reader
+# SBL Greek New Testament Reader
+
+A web-based reader for the **SBL Greek New Testament** that allows you to customize your reading experience based on your progress with **Bill Mounce's _Basics of Biblical Greek Grammar_, 4th Edition**. Select the vocabulary chapter you've learned, and the app will bold the words you haven't learned yet. Click on any word to view detailed information about it.
+
+*Example of the reader highlighting unknown words.*
+
+![image](https://github.com/user-attachments/assets/d082e95c-a789-41bc-bf8a-d1675c9aff35)
+
+
+*Word details displayed upon clicking a word.*
+
+![image](https://github.com/user-attachments/assets/002ac2e5-7728-40dd-a02a-2d898671ba8f)
+
+## Features
+
+- **Vocabulary Integration**: Tailor your reading by selecting your current chapter in Mounce's textbook. Unlearned words are bolded for easy identification.
+- **Interactive Word Details**: Click on any Greek word to access its lexical form, gloss, part of speech, parsing information, and more.
+- **Customizable Settings**:
+  - **Font Size Adjustment**: Modify the text size for optimal readability.
+  - **Dark Mode**: Toggle between light and dark themes.
+  - **Paragraph Mode**: Switch between paragraph and verse layouts.
+  - **Verse Numbers**: Show or hide verse numbers according to your preference.
+  - **Tooltips**: Enable or disable on-click word details.
+
+## Usage
+
+You can use the SBLGNT Reader directly in your browser without downloading anything at:
+
+[https://jspann21.github.io/SBLGNT_Reader/](https://jspann21.github.io/SBLGNT_Reader/)
+
+1. **Set Your Vocabulary Level**:
+
+   - Click on the settings icon ![image](https://github.com/user-attachments/assets/9dc85929-b081-481f-be8e-53ac818032cd)
+ to open the settings modal.
+   - Select your current Mounce vocabulary chapter from the dropdown menu.
+   - Adjust other settings like theme, font size, and display options as desired.
+   - Click **Save** to apply your settings.
+
+2. **Navigate Through the Text**:
+
+   - Use the side navigation menu to select a book and chapter.
+   - Alternatively, use the next and previous arrows at the bottom of the screen to move between chapters.
+
+3. **Interact with the Text**:
+
+   - Bolded words are ones you haven't learned yet based on your selected chapter.
+   - Click on any word to view detailed information, including gloss, part of speech, and parsing.
+
+## Data Sources and Credits
+
+This project utilizes data from the following sources:
+
+- **SBL Greek New Testament (SBLGNT)**:
+  - Text: [https://github.com/LogosBible/SBLGNT](https://github.com/LogosBible/SBLGNT)
+  - Paragraph Divisions: [https://github.com/aaronshaf/sblgnt](https://github.com/aaronshaf/sblgnt)
+- **MORPHGNT**:
+  - Morphological and Lexical Data: [https://github.com/morphgnt/sblgnt](https://github.com/morphgnt/sblgnt)
+- **Lexham English Bible English–Greek Reverse Interlinear New Testament**:
+  - *Used with permission.*
+  - Available at: [https://www.sblgnt.com/download/](https://www.sblgnt.com/download/)
+- **Additional Resources**:
+  - [Greek New Testament](https://github.com/jcuenod/greek-new-testament) by [jcuenod](https://github.com/jcuenod)
+  - [Awesome Bible Data](https://github.com/jcuenod/awesome-bible-data) by [jcuenod](https://github.com/jcuenod)
+  - [MACULA Greek](https://github.com/Clear-Bible/macula-greek) by [Clear-Bible](https://github.com/Clear-Bible)
+  - [SBLGNT Add-ons](https://github.com/eliranwong/SBLGNT-add-ons/tree/master) by [eliranwong](https://github.com/eliranwong)
+  - [Missing data for John 7:53-8:11](https://gist.github.com/chadwhitacre/21497c4d0a7326dccfed79798cfb9dc8) by [chadwhitacre](https://gist.github.com/chadwhitacre)
+
+## Screenshots
+
+*Settings modal where you can customize your experience.*
+
+![image](https://github.com/user-attachments/assets/b7cc6cdb-b3f0-4d65-b459-835536a812e1)
+
+*Dark mode with adjusted font size.*
+
+![image](https://github.com/user-attachments/assets/1a03016d-03ef-4c88-ae01-103ddff1a219)
+
+## Contributing
+
+Contributions are welcome! Submit your pull request for review.
+
+## License
+
+The SBLGNT text itself is subject to the [SBLGNT EULA](http://sblgnt.com/license/).
+This project is licensed under the [GPL-3.0 license](LICENSE).
+
+## Contact
+
+For questions or feedback, please reach out:
+
+- **Email**: [jspann21@shepherds.edu](mailto:jspann21@shepherds.edu)
+- **GitHub Issues**: [Create an issue](https://github.com/yourusername/your-repo-name/issues)
+
+---
+
+*This project is not affiliated with Bill Mounce or the publishers of _Basics of Biblical Greek Grammar_. All rights reserved to their respective owners.*

index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>SBLGNT Reader</title>
+    <link rel="stylesheet" href="styles.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha384-iw3OoTErCYJJB9mCa8LNS2hbsQ7M3C0EpIsO/H5+EGAkPGc6rk+V8i04oW/K5xq0"
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+</head>
+<body>
+    <header>
+        <button id="hamburger-button" class="hamburger-button" title="Open Navigation" aria-label="Open Navigation">
+            <i class="fas fa-bars"></i>
+        </button>
+        <div class="logo">
+            <i class="fas fa-book-reader"></i> SBLGNT
+        </div>
+        <button id="settings-button" class="settings-button" title="Settings" aria-label="Settings">
+            <i class="fas fa-cog"></i>
+        </button>
+    </header>
+
+    <nav id="side-nav" class="side-nav">
+        <ul class="book-list">
+            <!-- Dynamically populated list of books with nested chapters -->
+        </ul>
+    </nav>
+    <div id="side-nav-backdrop" class="side-nav-backdrop"></div>
+
+    <main id="content">
+        <!-- Dynamic content will be loaded here -->
+    </main>
+    <!-- Navigation Arrows -->
+    <div class="chapter-navigation">
+        <button id="prev-chapter" class="nav-button" title="Previous Chapter">
+            <i class="fas fa-arrow-left"></i>
+        </button>
+        <button id="next-chapter" class="nav-button" title="Next Chapter">
+            <i class="fas fa-arrow-right"></i>
+        </button>
+    </div>
+
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="modal hidden">
+        <div class="modal-content">
+            <span class="close-button">&times;</span>
+            <h2>Settings</h2>
+            <div class="setting">
+                <label for="mounce-chapter">Mounce Vocab Chapter:</label>
+                <select id="mounce-chapter">
+                    <option value="99">None</option>
+                    <!-- Dynamically populated options -->
+                </select>
+            </div>
+            <div class="setting">
+                <label for="theme-toggle">Dark Mode:</label>
+                <input type="checkbox" id="theme-toggle">
+            </div>
+            <div class="setting">
+                <label for="font-size-slider">Font Size:</label>
+                <div class="font-size-setting">
+                    <span class="font-size-icon small">A</span>
+                    <input type="range" id="font-size-slider" min="1" max="5" value="3">
+                    <span class="font-size-icon large">A</span>
+                </div>
+            </div>
+            <div class="setting">
+                <label for="paragraph-toggle">Paragraph Mode:</label>
+                <input type="checkbox" id="paragraph-toggle">
+            </div>
+            <div class="setting">
+                <label for="show-verse-numbers">Show Verse Numbers:</label>
+                <input type="checkbox" id="show-verse-numbers" checked>
+            </div>
+            <div class="setting">
+                <label for="tooltip-toggle">Enable Tooltips:</label>
+                <input type="checkbox" id="tooltip-toggle" checked>
+            </div>
+            <!-- Save Button -->
+            <div class="setting">
+                <button id="save-settings-button">Save</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>