add chat link to index.html

css/style.css

@@ -132,6 +132,18 @@ nav {
   border-color: var(--pink-400);
 }
 
+.card-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+.card-link:hover .card {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 35px rgba(255,20,147,0.25);
+  border-color: var(--pink-400);
+}
+
 .card h3 {
   color: var(--pink-600);
   font-size: 1.2rem;
@@ -383,7 +395,8 @@ footer {
   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 {
+[data-theme="dark"] .card:hover,
+[data-theme="dark"] .card-link:hover .card {
   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);
 }

index.html

@@ -55,30 +55,42 @@
 <div class="container">
   <h2 class="section-title">Browse Topics</h2>
   <div class="cards">
+    <a href="/pages/terminology.html" class="card-link">
       <div class="card">
         <h3>📖 Terminology</h3>
         <p>Key AI terms from ML and NLP — supervised learning, fine-tuning, tokens, embeddings, and more.</p>
       </div>
+    </a>
+    <a href="/pages/techniques.html" class="card-link">
       <div class="card">
         <h3>⚙️ Techniques</h3>
         <p>How AI models are trained and improved — backpropagation, RLHF, quantization, RAG, and more.</p>
       </div>
+    </a>
+    <a href="/pages/use-cases.html" class="card-link">
       <div class="card">
         <h3>🎯 Use Cases</h3>
         <p>Where AI is used in the real world — healthcare, finance, creative work, customer support, and more.</p>
       </div>
+    </a>
+    <a href="/pages/model-types.html" class="card-link">
       <div class="card">
         <h3>🤖 Model Types</h3>
         <p>LLMs, diffusion models, CNNs, GANs, transformers, and other AI architectures explained.</p>
       </div>
+    </a>
+    <a href="/pages/prompts.html" class="card-link">
       <div class="card">
         <h3>✍️ Prompt Engineering</h3>
         <p>How to write effective prompts — zero-shot, few-shot, chain-of-thought, and structured prompts.</p>
       </div>
+    </a>
+    <a href="/pages/math.html" class="card-link">
       <div class="card">
         <h3>📐 Math & Concepts</h3>
         <p>Underlying concepts — loss functions, attention, temperature, perplexity, and accuracy metrics.</p>
       </div>
+    </a>
   </div>
 
   <h2 class="section-title">Quick Start</h2>
@@ -92,6 +104,14 @@
     <h3>LLM vs Traditional ML</h3>
     <p>Traditional ML models are built for one specific task (e.g., classify spam). Large Language Models are general-purpose — trained on massive text corpora to understand and generate human language across countless tasks.</p>
   </div>
+
+  <h2 class="section-title">Interactive</h2>
+  <a href="/pages/chat.html" class="card-link">
+    <div class="card">
+      <h3>💬 Chat</h3>
+      <p>Try AI right now — ask questions, brainstorm ideas, get explanations, or just experiment. Powered by a real LLM API.</p>
+    </div>
+  </a>
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>

pages/chat.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="index.html" 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>