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/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>