add darkmode

css/style.css

@@ -293,3 +293,207 @@ footer {
   font-size: 0.9rem;
   box-shadow: 0 -4px 20px rgba(255,20,147,0.3);
 }
+
+/* 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);
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  --bg-primary: #0d0d0d;
+  --bg-secondary: #1a1a2e;
+  --bg-card: #16213e;
+  --bg-table: #1a1a2e;
+  --bg-table-head: #0f3460;
+  --bg-table-hover: #1a1a3e;
+  --bg-example: #1a1a3e;
+  --bg-badge: #e91082;
+  --text-primary: #e0e0e0;
+  --text-secondary: #b0b0b0;
+  --text-heading: #ffb6d9;
+  --text-heading-strong: #ff69b4;
+  --text-link: #ff69b4;
+  --text-link-hover: #ffa8c8;
+  --text-nav: #ffcce0;
+  --text-nav-hover: #ffffff;
+  --text-footer: #ffa8c8;
+  --border-primary: #2a2a4a;
+  --border-secondary: #3a3a5a;
+  --border-accent: #ff69b4;
+  --shadow-color: rgba(255,20,147,0.15);
+  --shadow-lg-color: rgba(255,20,147,0.2);
+  --hero-overlay: rgba(13,13,13,0.3);
+}
+
+[data-theme="dark"] body {
+  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] a {
+  color: var(--text-link);
+}
+
+[data-theme="dark"] a:hover {
+  color: var(--text-link-hover);
+}
+
+[data-theme="dark"] nav {
+  background: linear-gradient(90deg, #0f3460, #1a1a3e, #0f3460);
+  box-shadow: 0 4px 20px rgba(255,20,147,0.15);
+}
+
+[data-theme="dark"] .nav-links a {
+  color: var(--text-nav);
+}
+
+[data-theme="dark"] .nav-links a:hover,
+[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);
+}
+
+[data-theme="dark"] .hero {
+  background: linear-gradient(135deg, #1a1a3e, #0f3460, #0d0d2b);
+}
+
+[data-theme="dark"] .hero::before {
+  background: radial-gradient(circle, rgba(255,62,196,0.05) 0%, transparent 60%);
+}
+
+[data-theme="dark"] .card {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 4px 10px rgba(255,20,147,0.08);
+}
+
+[data-theme="dark"] .card:hover {
+  box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 4px 10px rgba(255,20,147,0.15);
+  border-color: var(--border-accent);
+}
+
+[data-theme="dark"] .card h3 {
+  color: var(--text-heading-strong);
+}
+
+[data-theme="dark"] .card p {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] h2.section-title {
+  color: var(--text-heading);
+  border-color: var(--border-accent);
+}
+
+[data-theme="dark"] .glossary-table {
+  background: var(--bg-table);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+[data-theme="dark"] .glossary-table thead {
+  background: linear-gradient(90deg, #e91082, #0f3460);
+}
+
+[data-theme="dark"] .glossary-table tbody tr {
+  border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .glossary-table tbody tr:hover {
+  background: var(--bg-table-hover);
+}
+
+[data-theme="dark"] .glossary-table td:first-child {
+  color: var(--text-heading-strong);
+}
+
+[data-theme="dark"] .def-card {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+[data-theme="dark"] .def-card:hover {
+  border-color: var(--border-accent);
+}
+
+[data-theme="dark"] .def-card h3 {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .def-card .category {
+  background: linear-gradient(135deg, #e91082, #ff1493);
+}
+
+[data-theme="dark"] .def-card p {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .example {
+  background: linear-gradient(135deg, var(--bg-table-hover), var(--bg-card));
+  color: var(--text-primary);
+  border-color: var(--border-secondary);
+}
+
+[data-theme="dark"] .example strong {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .use-card {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+[data-theme="dark"] .use-card:hover {
+  box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 4px 10px rgba(255,20,147,0.15);
+  border-color: var(--border-accent);
+}
+
+[data-theme="dark"] .use-card h3 {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .use-card p {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .prompt-block {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+[data-theme="dark"] .prompt-block:hover {
+  border-color: var(--border-accent);
+}
+
+[data-theme="dark"] .prompt-block h3 {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .prompt-block .label {
+  color: var(--text-heading-strong);
+}
+
+[data-theme="dark"] footer {
+  background: linear-gradient(90deg, #0f3460, #1a1a3e, #0f3460);
+  color: var(--text-footer);
+  box-shadow: 0 -4px 20px rgba(255,20,147,0.1);
+}

index.html

@@ -19,9 +19,33 @@
       <a href="pages/prompts.html">Prompt Guide</a>
       <a href="pages/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 Cheat Sheet</h1>
   <p>Your quick reference for artificial intelligence terminology, techniques, and real-world applications.</p>

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>