add darkmode

pages/math.html

@@ -19,9 +19,33 @@
       <a href="prompts.html">Prompt Guide</a>
       <a href="math.html" class="active">Math & Concepts</a>
     </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<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');
+    }
+  });
+})();
+</script>
+
 <div class="hero">
   <h1>Math & Concepts</h1>
   <p>The underlying ideas that make AI work — explained simply.</p>

pages/model-types.html

@@ -19,9 +19,33 @@
       <a href="prompts.html">Prompt Guide</a>
       <a href="math.html">Math & Concepts</a>
     </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<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');
+    }
+  });
+})();
+</script>
+
 <div class="hero">
   <h1>Model Types</h1>
   <p>Architectures and families of AI models — what they are and what they do.</p>
@@ -98,7 +122,7 @@
     <span class="category">Generative</span>
     <h3>Flow Models</h3>
     <p>Models that learn a reversible transformation between data and noise, enabling exact likelihood computation and fast generation.</p>
-    <div class="example"><strong>Examples:</strong> DALL-E 2 uses flow matching, Glow, RealNVP</div>
+    <div class="example"><strong>Examples:</strong> Glow, RealNVP, Rectified Flow</div>
   </div>
 
   <h2 class="section-title">Other Architectures</h2>
@@ -112,7 +136,7 @@
     <span class="category">Architecture</span>
     <h3>Mixture of Experts (MoE)</h3>
     <p>A model with multiple "expert" subnetworks. A routing mechanism selects which experts to use for each input, enabling large models that are computationally efficient at inference.</p>
-    <div class="example"><strong>Examples:</strong> Mixtral 8x7B, Google's PaLM-E</div>
+    <div class="example"><strong>Examples:</strong> Mixtral 8x7B, Google's Switch Transformer, Grok-1</div>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
@@ -137,7 +161,7 @@
       <tr><td>Claude 3.5</td><td>Decoder LLM</td><td>Long-context analysis, coding, writing</td></tr>
       <tr><td>Gemini 1.5 Pro</td><td>Decoder LLM</td><td>Massive context windows, multimodal</td></tr>
       <tr><td>Llama 3</td><td>Decoder LLM</td><td>Open-source, self-hosting, fine-tuning</td></tr>
-      <tr><td>Mistral Large</td><td>MoE LLM</td><td>Efficient inference, multilingual</td></tr>
+      <tr><td>Mistral Large</td><td>Dense LLM</td><td>High-quality reasoning, multilingual</td></tr>
       <tr><td>Stable Diffusion</td><td>Diffusion</td><td>Image generation, open-source</td></tr>
       <tr><td>CLIP</td><td>Encoder (Vision+Text)</td><td>Image-text matching, embeddings</td></tr>
       <tr><td>BERT</td><td>Encoder</td><td>Text classification, search, NLU</td></tr>

pages/prompts.html

@@ -19,9 +19,33 @@
       <a href="prompts.html" class="active">Prompt Guide</a>
       <a href="math.html">Math & Concepts</a>
     </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<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');
+    }
+  });
+})();
+</script>
+
 <div class="hero">
   <h1>Prompt Engineering Guide</h1>
   <p>Techniques for getting the best results from language models.</p>

pages/techniques.html

@@ -19,9 +19,33 @@
       <a href="prompts.html">Prompt Guide</a>
       <a href="math.html">Math & Concepts</a>
     </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<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');
+    }
+  });
+})();
+</script>
+
 <div class="hero">
   <h1>AI Techniques</h1>
   <p>How AI models are built, trained, and optimized.</p>

pages/terminology.html

@@ -19,9 +19,33 @@
       <a href="prompts.html">Prompt Guide</a>
       <a href="math.html">Math & Concepts</a>
     </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<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');
+    }
+  });
+})();
+</script>
+
 <div class="hero">
   <h1>AI Terminology</h1>
   <p>Essential terms every AI learner should know.</p>
@@ -152,7 +176,6 @@
       <tr><td>PoC</td><td>Proof of Concept</td></tr>
       <tr><td>GAN</td><td>Generative Adversarial Network</td></tr>
       <tr><td>CNN</td><td>Convolutional Neural Network</td></tr>
-      <tr><td>GAN</td><td>Generative Adversarial Network</td></tr>
       <tr><td>AGI</td><td>Artificial General Intelligence</td></tr>
       <tr><td>STT / ASR</td><td>Speech-to-Text / Automatic Speech Recognition</td></tr>
       <tr><td>TTS</td><td>Text-to-Speech</td></tr>

pages/use-cases.html

@@ -19,9 +19,33 @@
       <a href="prompts.html">Prompt Guide</a>
       <a href="math.html">Math & Concepts</a>
     </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<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');
+    }
+  });
+})();
+</script>
+
 <div class="hero">
   <h1>AI Use Cases</h1>
   <p>Real-world applications of AI across industries.</p>