Merge branch 'main' of github.com:DJSaunders1997/GPTeasers

Author: DJSaunders1997

frontend/index.html

@@ -4,14 +4,17 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
     <title>GPTeasers Quiz App</title>
     <link
       rel="icon"
       href="static/flavicon.png"
       type="image/png"
       sizes="32x32"
     />
-    <link rel="stylesheet" href="static/styles.css" />
+    <link rel="stylesheet" href="static/styles.css?v=20251221" />
     <!-- Google tag (gtag.js) -->
     <script
       async
@@ -33,11 +36,16 @@
         <div class="navbar-brand">
           <h1>GPTeasers 🧠💡</h1>
         </div>
-        <ul class="navbar-links">
+        <div class="navbar-toggle" id="navbar-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <ul class="navbar-links" id="navbar-links">
           <li><a href="index.html">Home</a></li>
-          <li><a href="readme.html">README</a></li>
           <li><a href="https://github.com/DJSaunders1997/GPTeasers">Github Repo</a></li>
           <li><a href="mailto:DJSaunders1997@gmail.com">Contact</a></li>
+          <li><a href="readme.html">README</a></li>
         </ul>
       </nav>
       <h1>GPTeasers 🧠💡</h1>
@@ -80,7 +88,7 @@ <h1>GPTeasers 🧠💡</h1>
           </select>
         </div>
 
-        <button id="fetchQuizButton">Fetch Quiz Data</button>
+        <button id="fetchQuizButton">Generate AI Quiz ✨</button>
       </section>
 
       <section id="quizSection">
@@ -134,10 +142,10 @@ <h2></h2>
           </div>
         </template>
       </section>
+      
+      <footer>Website by David Saunders.</footer>
     </main>
 
-    <footer>Website by David Saunders.</footer>
-
-    <script type="module" src="scripts/app.js"></script>
+    <script type="module" src="scripts/app.js?v=20251220"></script>
   </body>
 </html>

frontend/scripts/app.js

@@ -14,6 +14,9 @@ class App {
     this.controller = new Controller(this.quiz);
     this.ui = new UI();
 
+    // Initialize mobile menu toggle
+    this.initMobileMenu();
+
     // Load supported models dynamically
     this.loadSupportedModels();
 
@@ -48,6 +51,39 @@ class App {
       });
   }
 
+  /**
+   * Initialize mobile menu toggle functionality
+   */
+  initMobileMenu() {
+    const navbarToggle = document.getElementById('navbar-toggle');
+    const navbarLinks = document.getElementById('navbar-links');
+    
+    if (navbarToggle && navbarLinks) {
+      navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle('active');
+        
+        // Add animation to hamburger menu
+        navbarToggle.classList.toggle('active');
+      });
+
+      // Close mobile menu when clicking on a link
+      navbarLinks.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
+          navbarLinks.classList.remove('active');
+          navbarToggle.classList.remove('active');
+        });
+      });
+
+      // Close mobile menu when clicking outside
+      document.addEventListener('click', (event) => {
+        if (!navbarToggle.contains(event.target) && !navbarLinks.contains(event.target)) {
+          navbarLinks.classList.remove('active');
+          navbarToggle.classList.remove('active');
+        }
+      });
+    }
+  }
+
   async fetchQuizData() {
     // Get the topic and difficulty from the input field
     const topic = this.ui.getTopic();

frontend/scripts/controller.js

@@ -120,7 +120,7 @@ class Controller {
   async callImageAPI(prompt) {
     console.log("Generating image for prompt:", prompt);
 
-    const encodedPrompt = encodeURIComponent(prompt + " Pixel art");
+    const encodedPrompt = encodeURIComponent(prompt + " vibrant colors, modern aesthetic");
     const url = `${this.baseURLImage}?code=&prompt=${encodedPrompt}`;
     console.log(`Sending request to: ${url}`);