Spaces:

itamarlifshitz
/

smartstudy-buddyhub

Running

App Files Files Community

itamarlifshitz commited on Nov 5

Commit

2a1f177

verified ·

1 Parent(s): 9882ee8

make the site look bettrer and every button working and doing its job

Browse files

Files changed (6) hide show

chat.html +3 -3
components/navbar.js +6 -4
index.html +322 -44
login.html +6 -4
script.js +56 -0
style.css +103 -16

chat.html CHANGED Viewed

@@ -20,10 +20,10 @@
                     </div>
                 </div>
                 <div class="input-area">
-                    <input type="text" placeholder="כתוב את שאלתך כאן...">
-                    <button class="btn primary"><i class="fas fa-paper-plane"></i></button>
                 </div>
-            </div>
         </section>
     </main>

                     </div>
                 </div>
                 <div class="input-area">
+                    <input type="text" id="chatInput" placeholder="כתוב את שאלתך כאן...">
+                    <button class="btn primary" id="sendMessage"><i class="fas fa-paper-plane"></i> של שלח</button>
                 </div>
+</div>
         </section>
     </main>

components/navbar.js CHANGED Viewed

@@ -5,15 +5,17 @@ class CustomNavbar extends HTMLElement {
       <style>
         nav {
           background-color: var(--primary-color);
-          color: white;
           padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
-        .logo {
           display: flex;
           align-items: center;
           font-weight: bold;

       <style>
         nav {
           background-color: var(--primary-color);
+          color: var(--light-text);
           padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          box-shadow: var(--shadow-md);
+          position: sticky;
+          top: 0;
+          z-index: 1000;
         }
+.logo {
           display: flex;
           align-items: center;
           font-weight: bold;

index.html CHANGED Viewed

@@ -1,49 +1,327 @@
-<!DOCTYPE html>
 <html lang="he" dir="rtl">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SmartStudy BuddyHub - בית הספר יצחק שמיר</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
-    <custom-navbar></custom-navbar>
-    <main class="container">
-        <section class="hero">
-            <h1>ברוכים הבאים ל-SmartStudy BuddyHub</h1>
-            <p>העוזר הלימודי החכם שלך! שאל שאלות, קבל תשובות והשאר מעודכן בהכרזות בית הספר.</p>
-            <div class="cta-buttons">
-                <a href="/login.html" class="btn primary">התחברות</a>
-                <a href="/register.html" class="btn secondary">��רשמה</a>
-            </div>
-        </section>
-        <section class="features">
-            <div class="feature-card">
-                <i class="fas fa-robot"></i>
-                <h3>עוזר לימודי AI</h3>
-                <p>קבל תשובות חכמות המבוססות על חומרי הלימוד שלך</p>
-            </div>
-            <div class="feature-card">
-                <i class="fas fa-bullhorn"></i>
-                <h3>הכרזות בית ספר</h3>
-                <p>הישאר מעודכן בכל ההכרזות החשובות</p>
-            </div>
-            <div class="feature-card">
-                <i class="fas fa-book"></i>
-                <h3>ניהול חומרים</h3>
-                <p>אחסן וסדר את כל חומרי הלימוד במקום אחד</p>
-            </div>
-        </section>
-    </main>
-    <custom-footer></custom-footer>
-    <script src="components/navbar.js"></script>
-    <script src="components/footer.js"></script>
-    <script src="script.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>

+// server.mjs
+// One-file MVP: Node server + HTML chat UI (RTL Hebrew) + AI proxy
+// ===== HOW TO RUN =====
+// 1) Save this file as server.mjs
+// 2) In terminal set env vars (PowerShell example):
+//    $env:AI_API_KEY="YOUR_KEY_HERE"
+//    $env:AI_BASE_URL="https://ai.gateway.lovable.dev/v1"   # optional, default set below
+//    $env:AI_MODEL="google/gemini-2.5-flash"                # optional
+//    node server.mjs
+// 3) Open http://localhost:5173
+//
+// Notes:
+// - Your API key stays on the server (safe). The browser never sees it.
+// - You can paste your own study text ("context") so the bot answers based on it.
+// - Context is saved in localStorage, and also sent per-message to the server as part of the system prompt.
+import http from "node:http";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+// ====== CONFIG ======
+const PORT = process.env.PORT ? Number(process.env.PORT) : 5173;
+const AI_BASE_URL = process.env.AI_BASE_URL || "https://ai.gateway.lovable.dev/v1";
+const AI_MODEL    = process.env.AI_MODEL    || "google/gemini-2.5-flash";
+const AI_API_KEY  = process.env.AI_API_KEY  || ""; // MUST be set!
+// ====== MINI ASSETS (single-file, inline CSS/JS) ======
+const HTML = `<!doctype html>
 <html lang="he" dir="rtl">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>עוזר לימודים בית-ספרי — MVP</title>
+  <style>
+    :root{
+      --bg: hsl(210 40% 98%);
+      --card: #fff;
+      --border: hsl(220 13% 91%);
+      --text: hsl(220 15% 20%);
+      --muted: hsl(220 15% 55%);
+      --primary: hsl(195 85% 45%);
+      --primary2: hsl(195 85% 65%);
+      --shadow: 0 8px 24px rgba(14,165,233,.12);
+      --radius: 16px;
+    }
+    *{box-sizing:border-box}
+    html{font-family:system-ui,-apple-system,Segoe UI,Rubik,Arial,sans-serif;background:var(--bg);color:var(--text)}
+    .container{max-width:980px;margin:0 auto;padding:16px}
+    header{background:var(--card);border-bottom:1px solid var(--border)}
+    .head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
+    .brand{display:flex;align-items:center;gap:10px}
+    .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;box-shadow:var(--shadow)}
+    .logo svg{fill:#fff;opacity:.9}
+    .title{font-weight:700}
+    .sub{font-size:12px;color:var(--muted)}
+    nav{display:flex;gap:8px}
+    .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}
+    .btn:hover{filter:brightness(1.05)}
+    .btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
+    .btn-ghost:hover{background:rgba(14,165,233,.06)}
+    .grid{display:grid;gap:16px}
+    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
+    .row{display:grid;grid-template-columns:1fr 2fr;gap:16px}
+    @media (max-width:800px){.row{grid-template-columns:1fr}}
+    label{font-size:14px;color:var(--muted);display:block;margin-bottom:6px}
+    input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;outline:none}
+    textarea{min-height:120px;resize:vertical}
+    .muted{color:var(--muted);font-size:13px}
+    .chat{min-height:50vh;max-height:70vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
+    .bubble{max-width:76%;border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:#fff}
+    .me{margin-left:auto;background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.25)}
+    .bot .who,.me .who{font-size:12px;color:var(--muted);margin-bottom:4px}
+    .toolbar{display:flex;gap:8px}
+    .badge{display:inline-flex;align-items:center;font-size:12px;color:var(--muted);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
+    .row-compact{display:flex;gap:8px}
+  </style>
 </head>
 <body>
+  <header>
+    <div class="container head">
+      <div class="brand">
+        <div class="logo" title="יצחק שמיר — סמל מרובע, ללא עיגול פינות">
+          <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 3l7 4v6c0 3.866-3.582 7-8 7s-8-3.134-8-7V7l9-4z"/></svg>
+        </div>
+        <div>
+          <div class="title">עוזר לימודים בית-ספרי</div>
+          <div class="sub">MVP • צ׳אט + הקשר לימודי (RTL)</div>
+        </div>
+      </div>
+      <nav>
+        <a class="btn-ghost" href="#context">חומרי לימוד</a>
+        <a class="btn" href="#chat">צ׳אט</a>
+      </nav>
+    </div>
+  </header>
+  <main class="container grid" id="app">
+    <!-- Context / Materials -->
+    <section id="context" class="card">
+      <h2 style="margin:0 0 8px 0;">📚 חומרי לימוד / הקשר</h2>
+      <p class="muted" style="margin-top:0">הדביקו כאן תקציר/טקסט מהמחברת/גוגל דוקס/אתר. הבוט יתבסס עליו בתשובות.</p>
+      <div class="row">
+        <div>
+          <label>שם “מרחב” (למשל: מתמטיקה — פרק חזקות)</label>
+          <input id="spaceName" placeholder="שם המרחב" />
+          <div style="height:8px"></div>
+          <label>שפת הבוט</label>
+          <select id="botLang">
+            <option value="he">עברית</option>
+            <option value="en">English</option>
+          </select>
+          <div style="height:8px"></div>
+          <span class="badge" id="stats">0 תווים בקונטקסט</span>
+        </div>
+        <div>
+          <label>טקסט הקשר (נשמר בדפדפן, נשלח לבוט כתמיכת הקשר)</label>
+          <textarea id="contextText" placeholder="הדביקו כאן טקסט חשוב מהחומר..."></textarea>
+          <div style="height:8px"></div>
+          <div class="row-compact">
+            <button class="btn" id="saveCtx">שמירה</button>
+            <button class="btn-ghost" id="clearCtx">ניקוי</button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Chat -->
+    <section id="chat" class="card">
+      <h2 style="margin-top:0;">💬 צ׳אט</h2>
+      <div class="row">
+        <div>
+          <label>הוראות מערכת (אופציונלי)</label>
+          <textarea id="systemHint" placeholder="למשל: ענה בקצרה, ציין שלבים, השתמש בדוגמאות פשוטות."></textarea>
+          <div style="height:8px"></div>
+          <label>מודל (אופציונלי)</label>
+          <input id="model" placeholder="google/gemini-2.5-flash (ברירת מחדל בשרת)" />
+          <div style="height:8px"></div>
+          <div class="muted">ה-API key נשאר על השרת — בטוח. אין צורך לשים אותו בדפדפן.</div>
+        </div>
+        <div>
+          <div id="chatBox" class="chat" style="border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff"></div>
+          <div style="height:8px"></div>
+          <div class="row-compact">
+            <input id="msg" placeholder="שאל/י שאלה על סמך החומר..." />
+            <button class="btn" id="send">שליחה</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script>
+    const LS_SPACE  = "mvp_space_name";
+    const LS_TEXT   = "mvp_context_text";
+    const LS_LANG   = "mvp_bot_lang";
+    const chatBox   = document.getElementById("chatBox");
+    const msgInput  = document.getElementById("msg");
+    const sendBtn   = document.getElementById("send");
+    const stats     = document.getElementById("stats");
+    const spaceName = document.getElementById("spaceName");
+    const contextEl = document.getElementById("contextText");
+    const saveCtx   = document.getElementById("saveCtx");
+    const clearCtx  = document.getElementById("clearCtx");
+    const botLang   = document.getElementById("botLang");
+    const systemEl  = document.getElementById("systemHint");
+    const modelEl   = document.getElementById("model");
+    // Load persisted context
+    spaceName.value = localStorage.getItem(LS_SPACE) || "";
+    contextEl.value = localStorage.getItem(LS_TEXT)  || "";
+    botLang.value   = localStorage.getItem(LS_LANG)  || "he";
+    stats.textContent = (contextEl.value.length || 0) + " תווים בקונטקסט";
+    contextEl.addEventListener("input", () => {
+      stats.textContent = (contextEl.value.length || 0) + " תווים בקונטקסט";
+    });
+    saveCtx.addEventListener("click", () => {
+      localStorage.setItem(LS_SPACE, spaceName.value || "");
+      localStorage.setItem(LS_TEXT,  contextEl.value || "");
+      localStorage.setItem(LS_LANG,  botLang.value || "he");
+      alert("נשמר בהצלחה");
+    });
+    clearCtx.addEventListener("click", () => {
+      spaceName.value = "";
+      contextEl.value = "";
+      localStorage.removeItem(LS_SPACE);
+      localStorage.removeItem(LS_TEXT);
+      stats.textContent = "0 תווים בקונטקסט";
+    });
+    function appendBubble(role, text){
+      const wrap = document.createElement("div");
+      wrap.className = "bubble " + (role === "user" ? "me" : "bot");
+      const who = document.createElement("div");
+      who.className = "who";
+      who.textContent = role === "user" ? "את/ה" : "בוט";
+      const body = document.createElement("div");
+      body.textContent = text;
+      wrap.appendChild(who);
+      wrap.appendChild(body);
+      chatBox.appendChild(wrap);
+      chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    async function ask(){
+      const q = (msgInput.value || "").trim();
+      if(!q) return;
+      appendBubble("user", q);
+      msgInput.value = "";
+      const ctx     = contextEl.value || "";
+      const space   = spaceName.value || "ברירת מחדל";
+      const lang    = botLang.value || "he";
+      const system  = (systemEl.value || "") + "\\n" +
+        (lang === "he"
+          ? \`ענה בעברית, בקצרה ובבהירות. השתמש קודם כול בתוכן הקשר סביר להלן.\`
+          : \`Answer briefly and clearly. Prioritize the provided study context.\`) +
+        "\\n" +
+        \`שם המרחב: "\${space}".\\n\\nהקשר/חומרי לימוד:\\n\${ctx}\`;
+      try{
+        const resp = await fetch("/api/chat", {
+          method: "POST",
+          headers: {"Content-Type":"application/json"},
+          body: JSON.stringify({ message: q, system, model: (modelEl.value || undefined) })
+        });
+        const j = await resp.json();
+        if(!resp.ok || !j.ok){
+          appendBubble("assistant", (j.error || "שגיאה בשירות הבינה"));
+          return;
+        }
+        appendBubble("assistant", j.text || (lang==="he"?"אין תשובה":"No response"));
+      }catch(e){
+        appendBubble("assistant", (e?.message || "שגיאת רשת"));
+      }
+    }
+    sendBtn.addEventListener("click", ask);
+    msgInput.addEventListener("keydown", (e)=>{ if(e.key==="Enter") ask(); });
+    // Warm greeting
+    if(!contextEl.value){
+      appendBubble("assistant", "היי! הוסיפו טקסט הקשר (למשל תקציר חומר לימוד), ואז שאלו אותי שאלות עליו.");
+    } else {
+      appendBubble("assistant", "מעולה! יש לי הקשר לימודי. אפשר לשאול כל שאלה.");
+    }
+  </script>
 </body>
+</html>`;
+const INDEX = Buffer.from(HTML);
+// ====== SERVER (static + /api/chat) ======
+const server = http.createServer(async (req, res) => {
+  try {
+    // Simple router
+    if (req.method === "GET" && (req.url === "/" || req.url?.startsWith("/#"))) {
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(INDEX);
+      return;
+    }
+    if (req.method === "POST" && req.url === "/api/chat") {
+      if (!AI_API_KEY) {
+        const msg = "Missing AI_API_KEY env var";
+        res.writeHead(500, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({ error: msg }));
+        return;
+      }
+      const chunks = [];
+      for await (const c of req) chunks.push(c);
+      const bodyStr = Buffer.concat(chunks).toString("utf-8");
+      const payload = JSON.parse(bodyStr || "{}");
+      const model  = payload.model || AI_MODEL;
+      const system = payload.system || "Answer briefly and clearly in Hebrew.";
+      const user   = payload.message || "";
+      // OpenAI-compatible /chat/completions
+      const resp = await fetch(`${AI_BASE_URL}/chat/completions`, {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${AI_API_KEY}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          model,
+          messages: [
+            { role: "system", content: system },
+            { role: "user",   content: user   }
+          ],
+        })
+      });
+      if (!resp.ok) {
+        const text = await resp.text();
+        res.writeHead(500, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({ error: `AI error ${resp.status}`, details: text }));
+        return;
+      }
+      const data = await resp.json();
+      const text = data?.choices?.[0]?.message?.content ?? "";
+      res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+      res.end(JSON.stringify({ ok: true, text }));
+      return;
+    }
+    // 404
+    res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+    res.end("Not found");
+  } catch (e) {
+    res.writeHead(500, { "Content-Type": "application/json; charset=utf-8" });
+    res.end(JSON.stringify({ error: e?.message || "server error" }));
+  }
+});
+server.listen(PORT, () => {
+  console.log(`✅ Study Assistant MVP running on http://localhost:${PORT}`);
+  if (!AI_API_KEY) {
+    console.warn("⚠️  AI_API_KEY is missing. Set it before chatting.");
+  } else {
+    console.log("🔐 AI key loaded. Ready to chat.");
+  }
+});

@@ -13,8 +13,8 @@
     <main class="container">
         <section class="auth-form">
             <h1>התחברות</h1>
-            <form>
-                <div class="form-group">
                     <label for="email">אימייל</label>
                     <input type="email" id="email" required>
                 </div>
@@ -22,8 +22,10 @@
                     <label for="password">סיסמה</label>
                     <input type="password" id="password" required>
                 </div>
-                <button type="submit" class="btn primary">התחבר</button>
-            </form>
             <p>אין לך חשבון? <a href="/register.html">הירשם עכשיו</a></p>
         </section>
     </main>

     <main class="container">
         <section class="auth-form">
             <h1>התחברות</h1>
+            <form id="loginForm">
+<div class="form-group">
                     <label for="email">אימייל</label>
                     <input type="email" id="email" required>
                 </div>
                     <label for="password">סיסמה</label>
                     <input type="password" id="password" required>
                 </div>
+                <button type="submit" class="btn primary">
+                    <i class="fas fa-sign-in-alt"></i> התחבר
+                </button>
+</form>
             <p>אין לך חשבון? <a href="/register.html">הירשם עכשיו</a></p>
         </section>
     </main>

script.js ADDED Viewed

	@@ -0,0 +1,56 @@

+// Utility functions
+function showToast(message, type = 'success') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => {
+        toast.classList.add('show');
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }, 100);
+}
+// Form handling
+function setupForms() {
+    document.querySelectorAll('form').forEach(form => {
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const submitBtn = form.querySelector('button[type="submit"]');
+            const originalText = submitBtn.textContent;
+            try {
+                submitBtn.disabled = true;
+                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> מע מעבד...';
+                // Simulate form submission
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                showToast('ההפעולה בוצעה בהצלחה!', 'success');
+                form.reset();
+            } catch (error) {
+                showToast('אירעה שגיאה. נסה שוב.', 'danger');
+                console.error(error);
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.textContent = originalText;
+            }
+        });
+    });
+}
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    setupForms();
+    // Set active nav link
+    const currentPath = window.location.pathname;
+    document.querySelectorAll('.nav-links a').forEach(link => {
+        if (link.getAttribute('href') === currentPath) {
+            link.classList.add('active');
+        }
+    });
+});

style.css CHANGED Viewed

@@ -1,12 +1,25 @@
 :root {
-    --primary-color: #4a6fa5;
-    --secondary-color: #166088;
-    --accent-color: #4fc3f7;
-    --text-color: #333;
-    --light-bg: #f5f9fc;
     --rtl: rtl;
 }
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 0;
@@ -46,31 +59,64 @@ body {
     justify-content: center;
     gap: 20px;
 }
 .btn {
     padding: 12px 24px;
-    border-radius: 5px;
     text-decoration: none;
-    font-weight: bold;
-    transition: all 0.3s ease;
 }
 .btn.primary {
-    background-color: white;
-    color: var(--primary-color);
 }
 .btn.secondary {
     background-color: transparent;
-    color: white;
-    border: 2px solid white;
 }
 .btn:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 .features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -282,6 +328,47 @@ body {
     font-size: 1rem;
     font-family: inherit;
 }
 /* Responsive Adjustments */
 @media (max-width: 768px) {

 :root {
+    --primary-color: #4361ee;
+    --secondary-color: #3a0ca3;
+    --accent-color: #4cc9f0;
+    --success-color: #4caf50;
+    --warning-color: #ff9800;
+    --danger-color: #f44336;
+    --text-color: #2b2d42;
+    --light-text: #f8f9fa;
+    --light-bg: #f8f9fa;
+    --card-bg: #ffffff;
+    --border-color: #e9ecef;
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
     --rtl: rtl;
+    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 0;
     justify-content: center;
     gap: 20px;
 }
 .btn {
     padding: 12px 24px;
+    border-radius: var(--radius-sm);
     text-decoration: none;
+    font-weight: 600;
+    transition: var(--transition);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+    border: none;
 }
 .btn.primary {
+    background-color: var(--primary-color);
+    color: var(--light-text);
 }
 .btn.secondary {
     background-color: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+}
+.btn.success {
+    background-color: var(--success-color);
+    color: var(--light-text);
+}
+.btn.warning {
+    background-color: var(--warning-color);
+    color: var(--light-text);
+}
+.btn.danger {
+    background-color: var(--danger-color);
+    color: var(--light-text);
 }
 .btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+.btn:active {
+    transform: translateY(0);
+    box-shadow: var(--shadow-sm);
+}
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
+.btn i {
+    font-size: 1rem;
+}
 .features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     font-size: 1rem;
     font-family: inherit;
 }
+/* Toast Notifications */
+.toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 12px 24px;
+    border-radius: var(--radius-sm);
+    color: white;
+    font-weight: 500;
+    transform: translateY(100px);
+    opacity: 0;
+    transition: var(--transition);
+    z-index: 9999;
+}
+.toast.show {
+    transform: translateY(0);
+    opacity: 1;
+}
+.toast-success {
+    background-color: var(--success-color);
+}
+.toast-danger {
+    background-color: var(--danger-color);
+}
+.toast-warning {
+    background-color: var(--warning-color);
+}
+/* Loading Spinner */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+.fa-spin {
+    animation: spin 1s linear infinite;
+}
 /* Responsive Adjustments */
 @media (max-width: 768px) {