add image generation tab and fix mobile menu

2026-05-05 09:13:17 -04:00
parent 695a3a510e
commit 6359aefd18
10 changed files with 1017 additions and 41 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -23,46 +23,70 @@ body {
  color: var(--pink-900);
  line-height: 1.6;
  min-height: 100vh;
+  padding-left: 240px;
 }

 a { color: var(--pink-500); text-decoration: none; }
 a:hover { color: var(--pink-700); text-decoration: underline; }

-/* Navigation */
+/* Navigation - Sidebar */
 nav {
-  background: linear-gradient(90deg, var(--pink-600), var(--pink-500), var(--pink-600));
-  padding: 0 2rem;
-  position: sticky;
+  background: linear-gradient(180deg, var(--pink-600), var(--pink-500), var(--pink-600));
+  position: fixed;
  top: 0;
+  left: 0;
+  width: 240px;
+  height: 100vh;
  z-index: 100;
-  box-shadow: 0 4px 20px rgba(255,20,147,0.3);
+  box-shadow: 4px 0 20px rgba(255,20,147,0.2);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }

 .nav-inner {
-  max-width: 1100px;
-  margin: 0 auto;
  display: flex;
-  align-items: center;
-  gap: 1rem;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 1.5rem 1rem;
+  gap: 0.5rem;
+  flex: 1;
 }

 .nav-brand {
  color: var(--white);
  font-weight: 800;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
  letter-spacing: -0.5px;
-  padding: 1rem 0;
+  padding: 0.5rem 0.8rem;
+  text-decoration: none;
+  white-space: nowrap;
+  border-radius: 8px;
 }

-.nav-links { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+.nav-brand:hover {
+  background: rgba(255,255,255,0.1);
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1;
+}

 .nav-links a {
  color: var(--pink-100);
-  padding: 0.6rem 1rem;
+  padding: 0.6rem 0.8rem;
  border-radius: 8px;
-  font-size: 0.9rem;
+  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.2s;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .nav-links a:hover,
@@ -73,12 +97,97 @@ nav {
  box-shadow: 0 0 10px rgba(255,62,196,0.3);
 }

+.nav-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(255,255,255,0.15);
+}
+
+/* Menu Toggle (Hamburger) - mobile only */
+.menu-toggle {
+  background: var(--pink-800);
+  border: 2px solid var(--pink-400);
+  color: var(--white);
+  padding: 0.4rem 0.7rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: background 0.2s, border-color 0.2s;
+  line-height: 1;
+  display: none;
+  position: fixed;
+  top: 0.8rem;
+  left: 0.8rem;
+  z-index: 10001;
+}
+
+.menu-toggle:hover {
+  background: var(--pink-900);
+  border-color: var(--pink-300);
+}
+
+/* Dark mode toggle in sidebar */
+.dark-toggle {
+  background: rgba(0,0,0,0.2);
+  border: 2px solid rgba(255,255,255,0.2);
+  color: var(--white);
+  padding: 0.5rem 0.7rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.2s, border-color 0.2s;
+  line-height: 1;
+  align-self: stretch;
+}
+
+.dark-toggle:hover {
+  background: rgba(0,0,0,0.3);
+  border-color: rgba(255,255,255,0.3);
+}
+
+/* Mobile responsive - sidebar becomes overlay */
+@media (max-width: 900px) {
+  nav {
+    width: 260px;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    z-index: 9999;
+  }
+
+  nav.sidebar-open {
+    transform: translateX(0);
+  }
+
+  .menu-toggle {
+    display: block;
+  }
+
+  .nav-links a {
+    padding: 0.7rem 0.8rem;
+    font-size: 0.95rem;
+  }
+
+  body {
+    padding-left: 0;
+  }
+
+  .hero {
+    padding-left: 3.5rem;
+  }
+
+  .container {
+    padding-left: 1rem;
+  }
+}
+
 /* Hero */
 .hero {
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600), var(--pink-700));
  color: var(--white);
  text-align: center;
-  padding: 5rem 2rem;
+  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
 }
@@ -304,25 +413,13 @@ footer {
  padding: 1.8rem;
  font-size: 0.9rem;
  box-shadow: 0 -4px 20px rgba(255,20,147,0.3);
+  margin-left: 240px;
 }

-/* Dark Mode Toggle */
-.dark-toggle {
-  background: var(--pink-800);
-  border: 2px solid var(--pink-400);
-  color: var(--white);
-  padding: 0.4rem 0.7rem;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 1.1rem;
-  margin-left: auto;
-  transition: background 0.2s, border-color 0.2s;
-  line-height: 1;
-}
-
-.dark-toggle:hover {
-  background: var(--pink-900);
-  border-color: var(--pink-300);
+@media (max-width: 900px) {
+  footer {
+    margin-left: 0;
+  }
 }

 /* Dark Mode */
@@ -366,8 +463,8 @@ footer {
 }

 [data-theme="dark"] nav {
-  background: linear-gradient(90deg, #0f3460, #1a1a3e, #0f3460);
-  box-shadow: 0 4px 20px rgba(255,20,147,0.15);
+  background: linear-gradient(180deg, #0f3460, #1a1a3e, #0f3460);
+  box-shadow: 4px 0 20px rgba(255,20,147,0.1);
 }

 [data-theme="dark"] .nav-links a {
@@ -378,7 +475,46 @@ footer {
 [data-theme="dark"] .nav-links a.active {
  background: #0f3460;
  color: var(--text-nav-hover);
-  box-shadow: 0 0 10px rgba(255,62,196,0.2);
+  box-shadow: 0 0 10px rgba(255,62,196,0.15);
+}
+
+/* Dark mode sidebar toggle buttons */
+[data-theme="dark"] .menu-toggle {
+  background: #0f3460;
+  border-color: var(--pink-500);
+}
+
+[data-theme="dark"] .menu-toggle:hover {
+  background: #1a1a3e;
+  border-color: var(--pink-400);
+}
+
+[data-theme="dark"] .dark-toggle {
+  background: rgba(255,255,255,0.05);
+  border-color: rgba(255,255,255,0.15);
+}
+
+[data-theme="dark"] .dark-toggle:hover {
+  background: rgba(255,255,255,0.1);
+  border-color: rgba(255,255,255,0.25);
+}
+
+/* Mobile sidebar backdrop */
+@media (max-width: 900px) {
+  .sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 9998;
+    display: none;
+  }
+
+  .sidebar-backdrop.visible {
+    display: block;
+  }
 }

 [data-theme="dark"] .hero {
@@ -1244,3 +1380,238 @@ footer {
  color: var(--text-primary);
 }

+/* Image generation styles */
+.image-gen-prompt-area {
+  background: var(--white);
+  border-radius: 16px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow-lg);
+  border: 2px solid var(--pink-200);
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.image-gen-prompt-area label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--pink-600);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.image-gen-prompt-area textarea {
+  padding: 0.8rem 1rem;
+  border: 2px solid var(--pink-200);
+  border-radius: 12px;
+  font-size: 0.95rem;
+  color: var(--pink-900);
+  background: var(--pink-50);
+  font-family: inherit;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.image-gen-prompt-area textarea:focus {
+  border-color: var(--pink-400);
+  background: var(--white);
+}
+
+.image-gen-prompt-area textarea::placeholder {
+  color: var(--pink-300);
+}
+
+.generate-btn {
+  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
+  color: var(--white);
+  border: none;
+  padding: 0.7rem 1.5rem;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: 700;
+  transition: background 0.2s, transform 0.1s, opacity 0.2s;
+  align-self: flex-start;
+}
+
+.generate-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--pink-600), var(--pink-700));
+  transform: translateY(-1px);
+}
+
+.generate-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.image-gen-results {
+  background: var(--white);
+  border-radius: 16px;
+  border: 2px solid var(--pink-200);
+  box-shadow: var(--shadow-lg);
+  min-height: 200px;
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 1.5rem;
+  scroll-behavior: smooth;
+}
+
+.image-gen-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.image-gen-placeholder p {
+  color: var(--pink-400);
+  font-style: italic;
+  font-size: 0.95rem;
+}
+
+.image-gen-loading {
+  color: var(--pink-500);
+  font-style: italic;
+}
+
+.image-gen-error {
+  color: var(--pink-700);
+  font-weight: 600;
+  text-align: center;
+}
+
+.generated-image-card {
+  background: var(--pink-50);
+  border: 2px solid var(--pink-200);
+  border-radius: 16px;
+  padding: 1.2rem;
+  margin-bottom: 1rem;
+  animation: llmFadeIn 0.3s ease-out;
+}
+
+.generated-image-prompt {
+  font-size: 0.9rem;
+  color: var(--pink-700);
+  margin-bottom: 0.8rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--pink-200);
+  font-weight: 600;
+}
+
+.generated-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.8rem;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--white);
+}
+
+.generated-image {
+  max-width: 100%;
+  max-height: 512px;
+  width: auto;
+  height: auto;
+  display: block;
+  border-radius: 8px;
+}
+
+.generated-image-actions {
+  display: flex;
+  gap: 0.8rem;
+}
+
+.image-action-btn {
+  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
+  color: var(--white);
+  border: none;
+  padding: 0.5rem 1.2rem;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 700;
+  transition: background 0.2s, transform 0.1s;
+}
+
+.image-action-btn:hover {
+  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
+  transform: translateY(-1px);
+}
+
+/* Dark mode image generation styles */
+[data-theme="dark"] .image-gen-prompt-area {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+[data-theme="dark"] .image-gen-prompt-area label {
+  color: var(--text-heading-strong);
+}
+
+[data-theme="dark"] .image-gen-prompt-area textarea {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .image-gen-prompt-area textarea:focus {
+  border-color: var(--border-accent);
+  background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .image-gen-prompt-area textarea::placeholder {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .generate-btn {
+  background: linear-gradient(135deg, var(--pink-600), #0f3460);
+}
+
+[data-theme="dark"] .generate-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--pink-500), #1a1a3e);
+}
+
+[data-theme="dark"] .image-gen-results {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+[data-theme="dark"] .image-gen-placeholder p {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .image-gen-loading {
+  color: var(--pink-400);
+}
+
+[data-theme="dark"] .image-gen-error {
+  color: var(--pink-300);
+}
+
+[data-theme="dark"] .generated-image-card {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .generated-image-prompt {
+  color: var(--text-heading);
+  border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .generated-image-container {
+  background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .image-action-btn {
+  background: linear-gradient(135deg, var(--pink-600), #0f3460);
+}
+
+[data-theme="dark"] .image-action-btn:hover {
+  background: linear-gradient(135deg, var(--pink-500), #1a1a3e);
+}
+
--- a/index.html
+++ b/index.html
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/chat.html
+++ b/pages/chat.html
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html" class="active">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/image-gen.html
+++ b/pages/image-gen.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Generation - AI Cheat Sheet</title>
+  <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+
+<nav>
+  <div class="nav-inner">
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
+    <div class="nav-links">
+      <a href="/pages/terminology.html">Terminology</a>
+      <a href="/pages/techniques.html">Techniques</a>
+      <a href="/pages/use-cases.html">Use Cases</a>
+      <a href="/pages/model-types.html">Model Types</a>
+      <a href="/pages/prompts.html">Prompt Guide</a>
+      <a href="/pages/math.html">Math & Concepts</a>
+      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html" class="active">Image Gen</a>
+    </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
+  </div>
+</nav>
+
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
+<script>
+(function(){
+  var btn = document.getElementById('darkToggle');
+  var saved = localStorage.getItem('theme');
+  if(saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)){
+    document.documentElement.setAttribute('data-theme','dark');
+    btn.textContent = '☀️';
+  }
+  btn.addEventListener('click', function(){
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    if(isDark){
+      document.documentElement.removeAttribute('data-theme');
+      btn.textContent = '🌙';
+      localStorage.setItem('theme','light');
+    } else {
+      document.documentElement.setAttribute('data-theme','dark');
+      btn.textContent = '☀️';
+      localStorage.setItem('theme','dark');
+    }
+  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
+})();
+</script>
+
+<div class="hero">
+  <h1>Image Generation</h1>
+  <p>Generate images from text prompts using AI.</p>
+</div>
+
+<div class="container">
+  <div class="chat-config">
+    <div class="config-row">
+      <label for="apiUrl">API Endpoint</label>
+      <input type="text" id="apiUrl" value="https://image-gen.reeselink.com/v1">
+    </div>
+    <div class="config-row">
+      <label for="apiToken">API Token</label>
+      <input type="password" id="apiToken" placeholder="Enter your API token">
+    </div>
+    <div class="config-row">
+      <label for="modelName">Model</label>
+      <input type="text" id="modelName" value="flux">
+    </div>
+  </div>
+
+  <div class="image-gen-prompt-area">
+    <label for="promptInput">Prompt</label>
+    <textarea id="promptInput" placeholder="Describe the image you want to generate..." rows="3"></textarea>
+    <button id="generateBtn" class="generate-btn">Generate</button>
+  </div>
+
+  <div class="image-gen-results" id="imageResults">
+    <div class="image-gen-placeholder" id="imagePlaceholder">
+      <p>Your generated image will appear here.</p>
+    </div>
+  </div>
+</div>
+
+<footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
+
+<script>
+(function(){
+  var apiUrlInput = document.getElementById('apiUrl');
+  var apiTokenInput = document.getElementById('apiToken');
+  var modelNameInput = document.getElementById('modelName');
+  var promptInput = document.getElementById('promptInput');
+  var generateBtn = document.getElementById('generateBtn');
+  var imageResults = document.getElementById('imageResults');
+  var imagePlaceholder = document.getElementById('imagePlaceholder');
+
+  var savedToken = localStorage.getItem('imageGenToken');
+  if(savedToken) apiTokenInput.value = savedToken;
+  var savedModel = localStorage.getItem('imageGenModel');
+  if(savedModel) modelNameInput.value = savedModel;
+  var savedUrl = localStorage.getItem('imageGenUrl');
+  if(savedUrl) apiUrlInput.value = savedUrl;
+
+  var isGenerating = false;
+
+  function setLoading(loading) {
+    isGenerating = loading;
+    generateBtn.disabled = loading;
+    generateBtn.textContent = loading ? 'Generating...' : 'Generate';
+    promptInput.disabled = loading;
+  }
+
+  function showImage(dataUrl, prompt) {
+    if(imagePlaceholder) {
+      imagePlaceholder.style.display = 'none';
+    }
+
+    var existingImages = imageResults.querySelectorAll('.generated-image-card');
+    for(var i = 0; i < existingImages.length; i++) {
+      existingImages[i].remove();
+    }
+
+    var card = document.createElement('div');
+    card.className = 'generated-image-card';
+
+    var promptText = document.createElement('p');
+    promptText.className = 'generated-image-prompt';
+    promptText.textContent = prompt;
+
+    var imgContainer = document.createElement('div');
+    imgContainer.className = 'generated-image-container';
+
+    var img = document.createElement('img');
+    img.className = 'generated-image';
+    img.src = dataUrl;
+    img.alt = prompt;
+    imgContainer.appendChild(img);
+
+    var actions = document.createElement('div');
+    actions.className = 'generated-image-actions';
+
+    var copyBtn = document.createElement('button');
+    copyBtn.className = 'image-action-btn';
+    copyBtn.textContent = 'Copy Image';
+    copyBtn.addEventListener('click', function() {
+      copyToClipboard(dataUrl, copyBtn);
+    });
+
+    var downloadBtn = document.createElement('button');
+    downloadBtn.className = 'image-action-btn';
+    downloadBtn.textContent = 'Download';
+    downloadBtn.addEventListener('click', function() {
+      var a = document.createElement('a');
+      a.href = dataUrl;
+      a.download = 'generated-image-' + Date.now() + '.png';
+      a.click();
+    });
+
+    actions.appendChild(copyBtn);
+    actions.appendChild(downloadBtn);
+
+    card.appendChild(promptText);
+    card.appendChild(imgContainer);
+    card.appendChild(actions);
+
+    imageResults.appendChild(card);
+    imageResults.scrollTop = imageResults.scrollHeight;
+  }
+
+  function copyToClipboard(dataUrl, copyBtn) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', dataUrl, true);
+    xhr.responseType = 'blob';
+    xhr.onload = function() {
+      var blob = xhr.response;
+      if(navigator.clipboard && navigator.clipboard.write) {
+        navigator.clipboard.write([
+          new ClipboardItem({ 'image/png': blob })
+        ]).then(function() {
+          copyBtn.textContent = 'Copied!';
+          setTimeout(function() {
+            copyBtn.textContent = 'Copy Image';
+          }, 2000);
+        }).catch(function() {
+          fallbackCopy(dataUrl);
+        });
+      } else {
+        fallbackCopy(dataUrl);
+      }
+    };
+    xhr.send();
+  }
+
+  function fallbackCopy(dataUrl) {
+    var textarea = document.createElement('textarea');
+    textarea.value = dataUrl;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    alert('Image URL copied to clipboard.');
+  }
+
+  function showError(message) {
+    if(imagePlaceholder) {
+      imagePlaceholder.style.display = 'block';
+      imagePlaceholder.innerHTML = '<p class="image-gen-error">' + message + '</p>';
+    }
+  }
+
+  function generate() {
+    if(isGenerating) return;
+
+    var prompt = promptInput.value.trim();
+    if(!prompt) {
+      alert('Please enter a prompt.');
+      promptInput.focus();
+      return;
+    }
+
+    var model = modelNameInput.value.trim();
+    if(!model) {
+      alert('Please enter a model name.');
+      modelNameInput.focus();
+      return;
+    }
+
+    setLoading(true);
+    if(imagePlaceholder) {
+      imagePlaceholder.style.display = 'block';
+      imagePlaceholder.innerHTML = '<p class="image-gen-loading">Generating image... This may take a few seconds.</p>';
+    }
+
+    var existingImages = imageResults.querySelectorAll('.generated-image-card');
+    for(var i = 0; i < existingImages.length; i++) {
+      existingImages[i].remove();
+    }
+
+    var apiEndpoint = apiUrlInput.value.trim().replace(/\/+$/, '');
+    var apiToken = apiTokenInput.value.trim();
+
+    var headers = { 'Content-Type': 'application/json' };
+    if(apiToken) {
+      headers['Authorization'] = 'Bearer ' + apiToken;
+    }
+
+    fetch(apiEndpoint + '/images/generations', {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({
+        prompt: prompt,
+        model: model,
+        n: 1,
+        size: '1024x1024'
+      })
+    })
+    .then(function(response) {
+      if(!response.ok) {
+        return response.text().then(function(text) {
+          throw new Error('API error ' + response.status + ': ' + (text || response.statusText));
+        });
+      }
+      return response.json();
+    })
+    .then(function(data) {
+      setLoading(false);
+      if(data.data && data.data[0]) {
+        var imageData = data.data[0];
+        var dataUrl;
+        if(imageData.url) {
+          dataUrl = imageData.url;
+        } else if(imageData.b64_json) {
+          dataUrl = 'data:image/png;base64,' + imageData.b64_json;
+        } else {
+          showError('Unexpected response format from the API.');
+          return;
+        }
+        showImage(dataUrl, prompt);
+      } else {
+        showError('No image returned from the API.');
+      }
+    })
+    .catch(function(err) {
+      setLoading(false);
+      showError('Error: ' + err.message);
+    });
+  }
+
+  generateBtn.addEventListener('click', generate);
+
+  promptInput.addEventListener('keydown', function(e) {
+    if(e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      generate();
+    }
+  });
+
+  promptInput.addEventListener('input', function() {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+  });
+
+  apiTokenInput.addEventListener('change', function() {
+    localStorage.setItem('imageGenToken', this.value);
+  });
+  modelNameInput.addEventListener('change', function() {
+    localStorage.setItem('imageGenModel', this.value);
+  });
+  apiUrlInput.addEventListener('change', function() {
+    localStorage.setItem('imageGenUrl', this.value);
+  });
+
+  promptInput.focus();
+})();
+</script>
+
+</body>
+</html>
--- a/pages/math.html
+++ b/pages/math.html
@@ -10,7 +10,7 @@

 <nav>
  <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
    <div class="nav-links">
      <a href="/pages/terminology.html">Terminology</a>
      <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html" class="active">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/model-types.html
+++ b/pages/model-types.html
@@ -10,7 +10,7 @@

 <nav>
  <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
    <div class="nav-links">
      <a href="/pages/terminology.html">Terminology</a>
      <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/prompts.html
+++ b/pages/prompts.html
@@ -10,7 +10,7 @@

 <nav>
  <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
    <div class="nav-links">
      <a href="/pages/terminology.html">Terminology</a>
      <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html" class="active">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/techniques.html
+++ b/pages/techniques.html
@@ -10,7 +10,7 @@

 <nav>
  <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
    <div class="nav-links">
      <a href="/pages/terminology.html">Terminology</a>
      <a href="/pages/techniques.html" class="active">Techniques</a>
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/terminology.html
+++ b/pages/terminology.html
@@ -10,7 +10,7 @@

 <nav>
  <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
    <div class="nav-links">
      <a href="/pages/terminology.html" class="active">Terminology</a>
      <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>

--- a/pages/use-cases.html
+++ b/pages/use-cases.html
@@ -10,7 +10,7 @@

 <nav>
  <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
    <div class="nav-links">
      <a href="/pages/terminology.html">Terminology</a>
      <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
      <a href="/pages/prompts.html">Prompt Guide</a>
      <a href="/pages/math.html">Math & Concepts</a>
      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
    </div>
    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
  </div>
 </nav>

+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
  var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
      localStorage.setItem('theme','dark');
    }
  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>