make an studiyng site that will be in hebrew and i have to upload files and it will make me exames and notes and get grades for the exames and more

components/footer.js

@@ -4,7 +4,7 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background-color: var(--secondary-color);
+          background: #1e293b;
           color: white;
           text-align: center;
           padding: 2rem;
@@ -46,7 +46,7 @@ class CustomFooter extends HTMLElement {
             <a href="/contact.html">צור קשר</a>
           </div>
           <div class="copyright">
-            © 2023 SmartStudy BuddyHub - כל הזכויות שמורות
+            © 2023 StudyMate - כל הזכויות שמורות
           </div>
         </div>
       </footer>

components/navbar.js

@@ -4,27 +4,28 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background-color: var(--primary-color);
-          color: var(--light-text);
+          background: linear-gradient(90deg, #4f46e5, #7c3aed);
+          color: white;
           padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          box-shadow: var(--shadow-md);
+          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
           position: sticky;
           top: 0;
           z-index: 1000;
         }
-.logo {
+        
+        .logo {
           display: flex;
           align-items: center;
           font-weight: bold;
-          font-size: 1.2rem;
+          font-size: 1.5rem;
+          gap: 10px;
         }
         
         .logo img {
           height: 40px;
-          margin-left: 10px;
         }
         
         .nav-links {
@@ -36,12 +37,16 @@ class CustomNavbar extends HTMLElement {
           color: white;
           text-decoration: none;
           padding: 0.5rem 1rem;
-          border-radius: 5px;
-          transition: background-color 0.3s;
+          border-radius: 8px;
+          transition: background 0.3s;
         }
         
         .nav-links a:hover {
-          background-color: rgba(255, 255, 255, 0.2);
+          background: rgba(255,255,255,0.2);
+        }
+        
+        .nav-links a.active {
+          background: rgba(255,255,255,0.3);
         }
         
         @media (max-width: 768px) {
@@ -55,23 +60,18 @@ class CustomNavbar extends HTMLElement {
             width: 100%;
             justify-content: space-around;
           }
-          
-          .nav-links a {
-            padding: 0.5rem;
-          }
         }
       </style>
       <nav>
         <div class="logo">
-          <img src="http://static.photos/education/200x200/1" alt="School Logo">
-          <span>בית ספר יצחק שמיר</span>
+          <img src="http://static.photos/education/200x200/1" alt="StudyMate Logo">
+          <span>StudyMate</span>
         </div>
         <div class="nav-links">
-          <a href="/">בית</a>
-          <a href="/chat.html">צ'אט AI</a>
-          <a href="/materials.html">חומרי לימוד</a>
-          <a href="/announcements.html">הכרזות</a>
-          <a href="/login.html">התחברות</a>
+          <a href="/" class="active">בית</a>
+          <a href="/materials.html">חומרים</a>
+          <a href="/grades.html">ציונים</a>
+          <a href="/profile.html">פרופיל</a>
         </div>
       </nav>
     `;

index.html

@@ -1,567 +1,70 @@
-npm i express multer openai pdf-parse mammoth cors dotenv uuid body-parser helmet express-rate-limit
-node app.js
-/**
- * DeepStudy Pro — One-File Ultra-MVP for DeepSite
- * Author: ChatGPT (for Olga)
- *
- * Highlights:
- *  - Upload: PDF / DOCX / TXT
- *  - Robust text extraction and cleaning
- *  - Chunking + Map-Reduce summaries with "citations" (section refs)
- *  - Study Pack (Summary, Key Points, Glossary, Flashcards, Quiz + AnswerKey JSON)
- *  - Streaming Chat via SSE with typing indicator
- *  - Quiz grading with rubric (JSON in/JSON out)
- *  - Download Study Pack as .md
- *  - RTL Hebrew UI, persistent chat history (localStorage)
- *  - Safety first: school-only topics, gentle tone, avoid unsafe content
- *  - Security: helmet + rate limit; simple input sanitization
- *
- * ENV:
- *   OPENAI_API_KEY=sk-...
- *   (optional) OPENAI_MODEL=gpt-4o-mini (or another chat-capable model)
- *
- * RUN:
- *   node app.js  (default port 3000)
- *   open http://localhost:3000
- */
-
-require('dotenv').config();
-const path = require('path');
-const fs = require('fs');
-const os = require('os');
-const express = require('express');
-const cors = require('cors');
-const bodyParser = require('body-parser');
-const multer = require('multer');
-const pdfParse = require('pdf-parse');
-const mammoth = require('mammoth');
-const { v4: uuidv4 } = require('uuid');
-const helmet = require('helmet');
-const rateLimit = require('express-rate-limit');
-
-const OpenAI = require('openai');
-const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-const MODEL = process.env.OPENAI_MODEL || 'gpt-4o-mini';
-
-const app = express();
-
-// ---- Security & basics ----
-app.use(helmet({ contentSecurityPolicy: false }));
-app.use(cors());
-app.use(bodyParser.json({ limit: '12mb' }));
-const limiter = rateLimit({ windowMs: 60_000, max: 120 }); // 120 req/min/IP
-app.use(limiter);
-
-// ---- Uploads temp ----
-const upload = multer({
-  dest: path.join(os.tmpdir(), 'deepstudypro_uploads'),
-  limits: { fileSize: 30 * 1024 * 1024 } // 30MB
-});
-
-// ---- Utils ----
-const sanitize = (s) => (s || '').toString().replace(/\u0000/g, '').trim();
-const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
-
-function approxTokenLen(str) {
-  // גס: 1 טוקן ~ 3.5 תווים לטיניים; בעברית קרוב ~ 2-3. נלך על 3.
-  return Math.ceil((str || '').length / 3);
-}
-
-function chunkText(str, targetTokens = 1200, overlapTokens = 120) {
-  // פיצול קשיח באורך תווים (בערך), עם חפיפה קלה בין מקטעים לשמירה על הקשר
-  const tokenSize = clamp(targetTokens, 400, 2000);
-  const overlap = clamp(overlapTokens, 0, Math.floor(tokenSize / 3));
-
-  const charsPerToken = 3; // הערכה
-  const chunkChars = tokenSize * charsPerToken;
-  const overlapChars = overlap * charsPerToken;
-
-  const text = sanitize(str);
-  const chunks = [];
-  let i = 0, idx = 0;
-  while (i < text.length) {
-    const end = Math.min(text.length, i + chunkChars);
-    const slice = text.slice(i, end);
-    chunks.push({ id: `S${idx + 1}`, text: slice });
-    idx++;
-    i = end - overlapChars;
-    if (i < 0) i = 0;
-    if (i >= text.length) break;
-  }
-  return chunks;
-}
-
-async function extractText(filePath, originalName) {
-  const ext = (path.extname(originalName || '').toLowerCase() || '').replace('.', '');
-  if (ext === 'pdf') {
-    const data = await pdfParse(fs.readFileSync(filePath));
-    return sanitize(data.text);
-  } else if (ext === 'docx') {
-    const { value } = await mammoth.extractRawText({ path: filePath });
-    return sanitize(value);
-  } else if (ext === 'txt' || ext === '') {
-    return sanitize(fs.readFileSync(filePath, 'utf8'));
-  }
-  throw new Error(`סוג קובץ לא נתמך עדיין: ${ext} (נתמך: PDF/DOCX/TXT)`);
-}
-
-async function chat(messages, system = 'You are a careful, school-safe Hebrew tutor for middle/high-school. Avoid unsafe content. Prefer Hebrew, keep answers clear & kind.') {
-  const resp = await openai.chat.completions.create({
-    model: MODEL,
-    temperature: 0.35,
-    messages: [{ role: 'system', content: system }, ...messages]
-  });
-  return resp.choices?.[0]?.message?.content?.trim() || '';
-}
-
-function safeParseJSON(s) {
-  try { return JSON.parse(s); } catch { return null; }
-}
-
-// ---- Study Pack Map-Reduce prompts ----
-function mapPrompt(goal, sectionId, sectionText) {
-  return [
-    { role: 'user', content:
-`קלט: מקטע לימודי מסומן "${sectionId}" מתוך חומר רחב.
-מטרה פדגוגית: ${sanitize(goal) || 'הכנה לבוחן קצר + הבנה משמעותית.'}
-
-טקסט המקטע:
-"""
-${sectionText}
-"""
-
-הפק נא תקציר ממוקד למקטע זה בלבד (5–8 משפטים), נקודות מפתח קצרות, ומושגים מרכזיים.
-פורמט (Markdown):
-## ${sectionId}
-### תקציר
-- ...
-### נקודות מפתח
-- ...
-### מושגים
-- מושג | הסבר קצר
-- ...
-דגשים: עברית פשוטה, גיל חט"ב/ת��כון, ללא תוכן לא ראוי.`}
-  ];
-}
-
-function reducePrompt(goal, mappedMarkdown, mergedText) {
-  return [
-    { role: 'user', content:
-`יש לנו סט סיכומים ממקטעים שונים (להלן). איחד אותם ל"חבילת לימוד" אחודה בעברית, עם שמירה על עקביות והפניות למקטעים (לציטוטים).
-מטרה: ${sanitize(goal) || 'הבנה + הכנה למבחן קצר'}
-
-סיכומי המקטעים (Map):
-""" 
-${mappedMarkdown}
-"""
-
-(לרשותך גם הטקסט הגולמי המאוחד לקריאת הקשר, אם נדרש):
-"""
-${mergedText.slice(0, 20000)}
-"""
-
-הפק פורמט Markdown מדויק:
-
-# סיכום (8–12 משפטים) עם אזכורי מקטעים (למשל [S2], [S5])
-# נקודות מפתח (בולטים קצרים) כולל [Si] כאשר רלוונטי
-# מילון מושגים (טבלה: מושג | הסבר קצר | מקטעים)
-# כרטיסיות (8–14) — כל שורה: שאלה → תשובה קצרה
-# מבחן לדוגמה (10–14 שאלות מעורבות)
-- בסוף החזר מקטע JSON תקני עם מפתח תשובות בלבד:
-{"answerKey":[{"qid":"Q1","correct":"B","explanation":"..."}, ...]}
-
-כללי בטיחות: אין תכנים פוגעניים/מסוכנים. התאמה לגיל. שמירה על בהירות.`}
-  ];
-}
-
-async function gradeRubric(questions, userAnswers, answerKey) {
-  const payload = { questions, userAnswers, answerKey };
-  const messages = [
-    { role: 'user', content:
-`You are a deterministic grader for school practice quizzes.
-Return STRICT JSON only:
-{
- "perQuestion":[{"qid":"Q1","correct":true,"feedback":"..."}, ...],
- "score":{"correct":N,"total":T,"percent":P}
-}
-Be concise and supportive.`},
-    { role: 'user', content: JSON.stringify(payload) }
-  ];
-  const out = await chat(messages, 'You are a fair JSON-only grader. No chatter — JSON only.');
-  const parsed = safeParseJSON(out);
-  if (parsed?.perQuestion && parsed?.score) return parsed;
-
-  // Fallback strict compare
-  const keyMap = {};
-  (answerKey?.answerKey || []).forEach(k => keyMap[String(k.qid)] = String(k.correct).trim().toLowerCase());
-  const per = (questions || []).map((q, i) => {
-    const qid = q.qid || `Q${i+1}`;
-    const ua = String(userAnswers?.[qid] ?? '').trim().toLowerCase();
-    const ca = keyMap[qid] || '';
-    const correct = !!ua && ua === ca;
-    return { qid, correct, feedback: correct ? 'נכון — מעולה!' : `שגוי. התשובה: ${answerKey?.answerKey?.find(x=>String(x.qid)===qid)?.correct ?? '—'}` };
-  });
-  const c = per.filter(p => p.correct).length;
-  return { perQuestion: per, score: { correct: c, total: per.length, percent: per.length ? Math.round(100*c/per.length) : 0 } };
-}
-
-// ------------- API -------------
-
-app.get('/api/health', (_req, res) => res.json({ ok: true, model: MODEL }));
-
-// Study Pack Pro: upload OR raw text, chunk → map → reduce
-app.post('/api/study-pack', upload.array('files', 6), async (req, res) => {
-  const cleanup = () => (req.files || []).forEach(f => fs.existsSync(f.path) && fs.unlinkSync(f.path));
-  try {
-    const goal = sanitize(req.body.goal).slice(0, 600);
-    let merged = '';
-
-    if (req.files?.length) {
-      for (const f of req.files) {
-        const t = await extractText(f.path, f.originalname);
-        merged += `\n\n===== ${f.originalname} =====\n${t}\n`;
-      }
-    }
-    const rawText = sanitize(req.body.text || '');
-    if (rawText) merged += `\n\n===== Pasted Text =====\n${rawText}\n`;
-
-    if (!merged.trim()) return res.status(400).json({ ok: false, error: 'לא התקבל טקסט. העלו קבצים או הדביקו טקסט.' });
-
-    // Chunking
-    const chunks = chunkText(merged, 1200, 120);
-    // Map
-    const mappedParts = [];
-    for (const ch of chunks) {
-      const md = await chat(mapPrompt(goal, ch.id, ch.text));
-      mappedParts.push(md);
-    }
-    const mappedMarkdown = mappedParts.join('\n\n');
-
-    // Reduce
-    const reduced = await chat(reducePrompt(goal, mappedMarkdown, merged));
-
-    // Try extracting the last JSON block as answerKey
-    let answerKey = { answerKey: [] };
-    const matches = reduced.match(/\{[\s\S]*\}/g) || [];
-    for (let i = matches.length - 1; i >= 0; i--) {
-      const candidate = safeParseJSON(matches[i]);
-      if (candidate?.answerKey) { answerKey = candidate; break; }
-    }
-
-    res.json({ ok: true, studyPackMarkdown: reduced, mappedMarkdown, answerKey, sections: chunks.map(c => c.id) });
-  } catch (e) {
-    console.error(e);
-    res.status(500).json({ ok: false, error: 'שגיאה ביצירת החבילה', details: String(e.message || e) });
-  } finally { cleanup(); }
-});
-
-// Quiz grading
-app.post('/api/grade', async (req, res) => {
-  try {
-    const { questions, userAnswers, answerKey } = req.body || {};
-    if (!questions || !userAnswers || !answerKey) {
-      return res.status(400).json({ ok: false, error: 'חסר שאלות/תשובות/מפתח.' });
-    }
-    const result = await gradeRubric(questions, userAnswers, answerKey);
-    res.json({ ok: true, result });
-  } catch (e) {
-    console.error(e);
-    res.status(500).json({ ok: false, error: 'שגיאה בבדיקה', details: String(e.message || e) });
-  }
-});
-
-// Streaming Chat via SSE
-app.get('/api/chat/stream', async (req, res) => {
-  // Simple, non-chunk streaming (simulate typing via SSE) — robust for DeepSite proxies.
-  res.set({
-    'Cache-Control': 'no-cache',
-    'Content-Type': 'text/event-stream',
-    Connection: 'keep-alive'
-  });
-  res.flushHeaders();
-
-  const history = safeParseJSON(req.query.history || '[]') || [];
-  const message = sanitize(req.query.message || '');
-  const msgs = [];
-  for (const m of history) {
-    const role = m.role === 'assistant' ? 'assistant' : 'user';
-    msgs.push({ role, content: String(m.content || '') });
-  }
-  msgs.push({ role: 'user', content: message });
-
-  try {
-    const reply = await chat(
-      msgs,
-      'You are a friendly Hebrew tutor. Keep it short unless asked for more, include one example, avoid unsafe topics.'
-    );
-    // simulate streaming: send in slices
-    const parts = reply.match(/.{1,60}/g) || [reply];
-    for (const p of parts) {
-      res.write(`data: ${JSON.stringify({ chunk: p })}\n\n`);
-      await new Promise(r => setTimeout(r, 20));
-    }
-    res.write(`data: ${JSON.stringify({ done: true })}\n\n`);
-    res.end();
-  } catch (e) {
-    res.write(`data: ${JSON.stringify({ error: 'שגיאה בצ׳אט' })}\n\n`);
-    res.end();
-  }
-});
-
-// -------- Frontend (one HTML) --------
-app.get('/', (_req, res) => {
-  res.setHeader('Content-Type', 'text/html; charset=utf-8');
-  res.end(`<!doctype html>
+<!DOCTYPE html>
 <html lang="he" dir="rtl">
 <head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>DeepStudy Pro — deepsite GPT לתלמידים</title>
-<style>
-:root{--bg:#060a1a;--ink:#eef1ff;--muted:#b9c3ff;--card:#0b1130;--line:rgba(255,255,255,.12);--acc:#8eb1ff;--acc2:#7affe1}
-*{box-sizing:border-box} body{margin:0;background:radial-gradient(1200px 600px at 60% -200px,#0e1849,transparent),linear-gradient(180deg,#060a1a 0%,#0b1027 100%);color:var(--ink);font-family:Inter,Segoe UI,system-ui,Arial}
-.wrap{max-width:1100px;margin:40px auto;padding:0 16px}
-h1{margin:0 0 8px;font-size:32px;font-weight:900;letter-spacing:.2px}
-.sub{margin:0 0 22px;color:var(--muted)}
-.grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
-@media(max-width:950px){.grid{grid-template-columns:1fr}}
-.card{background:rgba(11,17,48,.7);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
-h3{margin:0 0 10px}
-.row{display:flex;gap:8px;align-items:center;margin:10px 0}
-input[type="text"],textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0a1030;color:var(--ink);resize:vertical}
-textarea{min-height:110px}
-input[type="file"]{border:1px dashed var(--line);padding:10px;border-radius:12px;width:100%;color:var(--muted)}
-.btn{cursor:pointer;border:0;border-radius:12px;padding:11px 16px;font-weight:800;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#03122a}
-.btn.sec{background:transparent;color:var(--acc);border:1px solid var(--acc)}
-.pill{display:inline-flex;align-items:center;gap:8px;background:#0a143b;padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}
-.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:16px 0}
-.out{white-space:pre-wrap;line-height:1.6}
-.chat{height:420px;overflow:auto;background:#080f2b;border-radius:14px;padding:12px;border:1px solid var(--line)}
-.bubble{padding:10px 12px;border-radius:12px;margin:8px 0;max-width:85%}
-.me{background:#0f1c4e;margin-left:auto}
-.bot{background:#0b1540;border:1px solid var(--line)}
-.small{font-size:12px;color:var(--muted)}
-.actions{display:flex;gap:8px;flex-wrap:wrap}
-kbd{background:#09122e;border:1px solid var(--line);padding:2px 6px;border-radius:6px;font-size:12px}
-table{border-collapse:collapse;width:100%}
-td,th{border:1px solid var(--line);padding:6px}
-.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#0b1438;border:1px solid var(--line);color:var(--ink);padding:10px 12px;border-radius:10px;display:none}
-</style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StudyMate - עוזר לימודי חכם</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>
-<div class="wrap">
-  <h1>DeepStudy Pro — עוזר לימודי משוגע טוב</h1>
-  <p class="sub">מעלים חומר → מקבלים חבילת לימוד מפורטת (סיכום, מושגים, כרטיסיות, מבחן + מפתח) + צ׳אט מורה זורם. נבנה במיוחד ל־DeepSite.</p>
-
-  <div class="grid">
-    <div class="card">
-      <h3>1) יצירת חבילת לימוד (Pro)</h3>
-      <div class="row"><input id="goal" type="text" placeholder="מטרה (למשל: 'להיערך למבחן בגאוגרפיה על אקלים')"></div>
-      <div class="row"><input id="files" type="file" multiple accept=".pdf,.docx,.txt"></div>
-      <div class="row"><textarea id="rawText" placeholder="או הדביקו טקסט במקום קבצים"></textarea></div>
-      <div class="actions">
-        <button class="btn" id="buildBtn">צור חבילת לימוד</button>
-        <button class="btn sec" id="downloadBtn" title="מוריד את החבילה האחרונה כ-Markdown">הורדת Markdown</button>
-        <span class="pill" id="health">מודל: —</span>
-      </div>
-      <div class="hr"></div>
-      <div class="out" id="studyPackOut">—</div>
-      <div class="hr"></div>
-
-      <h3>בדיקת מבחן</h3>
-      <p class="small">אם נוצר מפתח תשובות JSON — מלאו תשובות וקבלו ציון.</p>
-      <textarea id="questionsJSON" placeholder='לדוגמה: [{"qid":"Q1","type":"mcq","question":"...","choices":["A","B","C","D"]}]'></textarea>
-      <textarea id="userAnswersJSON" placeholder='לדוגמה: {"Q1":"B","Q2":"True"}'></textarea>
-      <div class="actions">
-        <button class="btn sec" id="gradeBtn">בדיקה וציון</button>
-        <button class="btn sec" id="refineBtn" title="בקשו הרחבה/חידוד לנושא ספציפי">שדרוג נושא</button>
-      </div>
-      <div class="out" id="gradeOut"></div>
-    </div>
-
-    <div class="card">
-      <h3>2) צ׳אט מורה (SSE)</h3>
-      <div class="chat" id="chat"></div>
-      <div class="row">
-        <input id="msg" type="text" placeholder="שאלה למורה... (למשל: 'תסבירי את חוק אום עם דוגמה')">
-        <button class="btn" id="send">שלח</button>
-      </div>
-      <p class="small">טיפ: <kbd>↑</kbd> מחזיר הודעה אחרונה. ההיסטוריה נשמרת אוטומטית (localStorage).</p>
-    </div>
-  </div>
-</div>
-
-<div class="toast" id="toast"></div>
-
-<script>
-const $ = (id) => document.getElementById(id);
-const chatEl = $('chat'), msgEl = $('msg'), sendBtn = $('send');
-const studyPackOut = $('studyPackOut'), healthEl = $('health');
-const filesEl = $('files'), rawTextEl = $('rawText'), goalEl = $('goal');
-const buildBtn = $('buildBtn'), downloadBtn = $('downloadBtn');
-const questionsJSONEl = $('questionsJSON'), userAnswersJSONEl = $('userAnswersJSON');
-const gradeBtn = $('gradeBtn'), gradeOut = $('gradeOut'), refineBtn = $('refineBtn');
-const toastEl = $('toast');
-
-let chatHistory = JSON.parse(localStorage.getItem('dsp_chat') || '[]');
-let lastUserMsg = '';
-let latestMarkdown = '';
-let latestAnswerKey = { answerKey: [] };
-
-function toast(txt) {
-  toastEl.textContent = txt;
-  toastEl.style.display = 'block';
-  setTimeout(()=> toastEl.style.display='none', 2200);
-}
-
-function addBubble(txt, who='bot'){
-  const b = document.createElement('div');
-  b.className = 'bubble ' + (who==='me'?'me':'bot');
-  b.textContent = txt;
-  chatEl.appendChild(b);
-  chatEl.scrollTop = chatEl.scrollHeight;
-}
-
-function renderHistory(){
-  chatEl.innerHTML = '';
-  chatHistory.forEach(m => addBubble(m.content, m.role==='user'?'me':'bot'));
-}
-renderHistory();
-
-async function health() {
-  try {
-    const r = await fetch('/api/health');
-    const j = await r.json();
-    if (j.ok) healthEl.textContent = 'מודל: ' + (j.model || '—');
-  } catch {}
-}
-health();
-
-sendBtn.onclick = async () => {
-  const m = msgEl.value.trim();
-  if (!m) return;
-  lastUserMsg = m;
-  addBubble(m, 'me');
-  msgEl.value = '';
-  chatHistory.push({ role:'user', content:m });
-  localStorage.setItem('dsp_chat', JSON.stringify(chatHistory));
-
-  const src = new EventSource('/api/chat/stream?'+new URLSearchParams({
-    message: m,
-    history: JSON.stringify(chatHistory.slice(-20)) // שומרים על הקשר קצר
-  }));
-
-  let acc = '';
-  const typing = document.createElement('div');
-  typing.className = 'bubble bot';
-  typing.textContent = 'המורה מקלידה…';
-  chatEl.appendChild(typing);
-  chatEl.scrollTop = chatEl.scrollHeight;
-
-  src.onmessage = (e) => {
-    const data = JSON.parse(e.data || '{}');
-    if (data.chunk) {
-      acc += data.chunk;
-      typing.textContent = acc;
-    }
-    if (data.done) {
-      chatHistory.push({ role:'assistant', content:acc });
-      localStorage.setItem('dsp_chat', JSON.stringify(chatHistory));
-      src.close();
-    }
-    if (data.error) {
-      typing.textContent = 'שגיאה בצ׳אט.';
-      src.close();
-    }
-  };
-};
-
-document.addEventListener('keydown', (ev)=>{
-  if (ev.key === 'ArrowUp' && document.activeElement === msgEl && !msgEl.value) {
-    msgEl.value = lastUserMsg;
-  }
-});
-
-buildBtn.onclick = async () => {
-  studyPackOut.textContent = '⏳ מעבד קבצים, מפצל למקטעים, ומריץ סי��ומים חכמים...';
-  const fd = new FormData();
-  if (goalEl.value.trim()) fd.append('goal', goalEl.value.trim());
-  if (rawTextEl.value.trim()) fd.append('text', rawTextEl.value.trim());
-  for (const f of filesEl.files) fd.append('files', f);
-
-  const r = await fetch('/api/study-pack', { method:'POST', body: fd });
-  const j = await r.json();
-  if (!j.ok) {
-    studyPackOut.textContent = '❌ ' + (j.error || 'שגיאה');
-    if (j.details) studyPackOut.textContent += '\\n' + j.details;
-    return;
-  }
-
-  latestMarkdown = j.studyPackMarkdown || '';
-  latestAnswerKey = j.answerKey || { answerKey: [] };
-  studyPackOut.textContent = latestMarkdown;
-
-  // דוגמאות JSON בשדות בדיקה
-  if (!questionsJSONEl.value.trim()) {
-    questionsJSONEl.value = JSON.stringify([
-      {"qid":"Q1","type":"mcq","question":"דוגמה: מהי אנרגיה קינטית?","choices":["A","B","C","D"]},
-      {"qid":"Q2","type":"tf","question":"דוגמה: לחץ מִדָּה סקלרית. (True/False)"},
-      {"qid":"Q3","type":"short","question":"דוגמה: כתבי את החוק הראשון של ניוטון במשפט אחד."}
-    ], null, 2);
-  }
-  if (!userAnswersJSONEl.value.trim()) {
-    userAnswersJSONEl.value = JSON.stringify({"Q1":"B","Q2":"True","Q3":"גוף שומר על מצבו..."}, null, 2);
-  }
-  toast('החבילה מוכנה ✔');
-};
-
-downloadBtn.onclick = () => {
-  if (!latestMarkdown.trim()) return toast('אין תוכן להוריד עדיין');
-  const blob = new Blob([latestMarkdown], { type:'text/markdown;charset=utf-8' });
-  const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
-  a.download = 'deepstudy_pack.md';
-  a.click();
-  URL.revokeObjectURL(a.href);
-};
-
-gradeBtn.onclick = async () => {
-  gradeOut.textContent = 'בודק...';
-  let questions=null, userAnswers=null;
-  try { questions = JSON.parse(questionsJSONEl.value); } catch { return gradeOut.textContent='JSON לא תקין בשדה שאלות'; }
-  try { userAnswers = JSON.parse(userAnswersJSONEl.value); } catch { return gradeOut.textContent='JSON לא תקין בשדה תשובות'; }
-
-  const r = await fetch('/api/grade', {
-    method:'POST', headers:{'Content-Type':'application/json'},
-    body: JSON.stringify({ questions, userAnswers, answerKey: latestAnswerKey })
-  });
-  const j = await r.json();
-  if (!j.ok) return gradeOut.textContent = 'שגיאה בבדיקה.';
-  const g = j.result;
-  const lines = [];
-  lines.push('תוצאה: ' + g.score.correct + '/' + g.score.total + ' (' + g.score.percent + '%)');
-  lines.push('');
-  (g.perQuestion||[]).forEach(p => lines.push(`${p.qid}: ${p.correct?'✓ נכון':'✗ שגוי'} — ${p.feedback||''}`));
-  gradeOut.textContent = lines.join('\\n');
-};
-
-refineBtn.onclick = async () => {
-  const sel = prompt('איזה נושא לשדרג/להרחיב (למשל: "חוק שני של ניוטון")?');
-  if (!sel) return;
-  const ask = 'שדרג/י והרחיבי במיוחד את הנושא: ' + sel + '\\nכללי: הסבר מדורג + דוגמה מספרית + תרגיל קצר עם פתרון.';
-  msgEl.value = ask;
-  sendBtn.click();
-};
-</script>
+    <custom-navbar></custom-navbar>
+    
+    <main class="container">
+        <section class="hero">
+            <h1>StudyMate - הפיכת הלמידה לחכמה יותר</h1>
+            <p>העלה חומרי לימוד וקבל סיכומים, מבחנים וכרטיסיות לימוד - הכל אוטומטי!</p>
+        </section>
+
+        <div class="study-tools">
+            <div class="tool-card">
+                <h2><i class="fas fa-file-upload"></i> העלאת קבצים</h2>
+                <div class="upload-area" id="dropZone">
+                    <input type="file" id="fileInput" multiple accept=".pdf,.docx,.txt">
+                    <label for="fileInput" class="upload-btn">
+                        <i class="fas fa-cloud-upload-alt"></i> גרור קבצים או לחץ לבחירה
+                    </label>
+                    <div class="file-list" id="fileList"></div>
+                </div>
+                <textarea id="studyGoal" placeholder="מה המטרה הלימודית? (למשל: הכנה למבחן בתנ״ך)"></textarea>
+                <button class="btn primary" id="processBtn">
+                    <i class="fas fa-magic"></i> צור חומרי לימוד
+                </button>
+            </div>
+
+            <div class="tool-card">
+                <h2><i class="fas fa-book"></i> חומרי הלימוד שלי</h2>
+                <div class="tabs">
+                    <button class="tab-btn active" data-tab="notes">סיכומים</button>
+                    <button class="tab-btn" data-tab="flashcards">כרטיסיות</button>
+                    <button class="tab-btn" data-tab="exams">מבחנים</button>
+                </div>
+                <div class="tab-content active" id="notes">
+                    <div class="empty-state">
+                        <i class="fas fa-book-open"></i>
+                        <p>עדיין אין סיכומים. העלה קבצים כדי להתחיל!</p>
+                    </div>
+                </div>
+                <div class="tab-content" id="flashcards">
+                    <div class="empty-state">
+                        <i class="fas fa-layer-group"></i>
+                        <p>עדיין אין כרטיסיות. העלה קבצים כדי להתחיל!</p>
+                    </div>
+                </div>
+                <div class="tab-content" id="exams">
+                    <div class="empty-state">
+                        <i class="fas fa-file-alt"></i>
+                        <p>עדיין אין מבחנים. העלה קבצים כדי להתחיל!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
 </body>
-</html>`);
-});
-
-// ---- Start ----
-const PORT = process.env.PORT || 3000;
-if (!process.env.OPENAI_API_KEY) {
-  console.warn('⚠️  חסר OPENAI_API_KEY — הגדירי משתנה סביבה לפני ההרצה.');
-}
-app.listen(PORT, () => {
-  console.log('DeepStudy Pro up on http://localhost:'+PORT);
-});
+</html>

script.js

@@ -1,56 +1,150 @@
-// 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;
-            }
-        });
+```javascript
+document.addEventListener('DOMContentLoaded', () => {
+  // File upload handling
+  const fileInput = document.getElementById('fileInput');
+  const fileList = document.getElementById('fileList');
+  const dropZone = document.getElementById('dropZone');
+  const processBtn = document.getElementById('processBtn');
+  
+  // Tab switching
+  const tabBtns = document.querySelectorAll('.tab-btn');
+  tabBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      // Remove active class from all buttons and tabs
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+      
+      // Add active class to clicked button and corresponding tab
+      btn.classList.add('active');
+      const tabId = btn.getAttribute('data-tab');
+      document.getElementById(tabId).classList.add('active');
     });
-}
+  });
 
-// Initialize when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    setupForms();
+  // Drag and drop functionality
+  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, preventDefaults, false);
+  });
+
+  function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  ['dragenter', 'dragover'].forEach(eventName => {
+    dropZone.addEventListener(eventName, highlight, false);
+  });
+
+  ['dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, unhighlight, false);
+  });
+
+  function highlight() {
+    dropZone.classList.add('drag-over');
+  }
+
+  function unhighlight() {
+    dropZone.classList.remove('drag-over');
+  }
+
+  dropZone.addEventListener('drop', handleDrop, false);
+
+  function handleDrop(e) {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    handleFiles(files);
+  }
+
+  fileInput.addEventListener('change', function() {
+    handleFiles(this.files);
+  });
+
+  function handleFiles(files) {
+    fileList.innerHTML = '';
+    if (files.length === 0) return;
     
-    // 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');
-        }
-    });
-});
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (!file.type.match('application/pdf|application/vnd.openxmlformats-officedocument.wordprocessingml.document|text/plain')) {
+        continue;
+      }
+      
+      const fileItem = document.createElement('div');
+      fileItem.className = 'file-item';
+      fileItem.innerHTML = `
+        <span>${file.name}</span>
+        <i class="fas fa-times" data-index="${i}"></i>
+      `;
+      fileList.appendChild(fileItem);
+      
+      // Add remove file functionality
+      fileItem.querySelector('i').addEventListener('click', function() {
+        fileItem.remove();
+        // In a real app, you would remove the file from the upload list
+      });
+    }
+    
+    if (fileList.children.length > 0) {
+      processBtn.disabled = false;
+    } else {
+      processBtn.disabled = true;
+    }
+  }
+
+  // Process files button
+  processBtn.addEventListener('click', async function() {
+    if (fileList.children.length === 0) {
+      alert('אנא העלה לפחות קובץ אחד');
+      return;
+    }
+    
+    const goal = document.getElementById('studyGoal').value.trim();
+    if (!goal) {
+      alert('אנא הזן מטרה לימודית');
+      return;
+    }
+    
+    // Show loading state
+    const originalText = processBtn.innerHTML;
+    processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> מעבד...';
+    processBtn.disabled = true;
+    
+    try {
+      // Simulate processing (in a real app, this would be an API call)
+      await new Promise(resolve => setTimeout(resolve, 3000));
+      
+      // Generate sample study materials
+      generateSampleMaterials();
+      
+      // Show success message
+      alert('חומרי הלימוד נוצרו בהצלחה!');
+      
+      // Switch to notes tab
+      document.querySelector('.tab-btn[data-tab="notes"]').click();
+      
+    } catch (error) {
+      console.error('Error processing files:', error);
+      alert('אירעה שגיאה בעיבוד הקבצים. נסה שוב.');
+    } finally {
+      processBtn.innerHTML = originalText;
+      processBtn.disabled = false;
+    }
+  });
+
+  function generateSampleMaterials() {
+    // Generate sample notes
+    const notesTab = document.getElementById('notes');
+    notesTab.innerHTML = `
+      <div class="study-material">
+        <h3>סיכום המסמך</h3>
+        <div class="content">
+          <p>המסמך דן בנושאים מרכזיים בתחום הלימוד. להלן עיקרי הדברים:</p>
+          <ul>
+            <li>הקדמה היסטורית להתפתחות התחום</li>
+            <li>הגדרות יסוד ומושגי מפתח</li>
+            <li>תיאוריות מרכזיות והשוואה ביניהן</li>
+            <li>יישומים מעשיים ורלוונטיות לתקופה הנוכחית</li>
+          </ul>
+          <p>הסיכום מבוסס על ניתוח של 3 מסמכים שהעלית.</p>
+        </div>
+        <div class

style.css

@@ -1,378 +1,221 @@
-
 :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);
+  --primary: #4f46e5;
+  --primary-light: #6366f1;
+  --secondary: #7c3aed;
+  --dark: #1e293b;
+  --light: #f8fafc;
+  --gray: #94a3b8;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
+
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 0;
-    padding: 0;
-    color: var(--text-color);
-    direction: var(--rtl);
-    background-color: var(--light-bg);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f1f5f9;
+  color: var(--dark);
+  direction: rtl;
 }
 
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
 }
 
 .hero {
-    text-align: center;
-    padding: 60px 20px;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    border-radius: 10px;
-    margin-bottom: 40px;
+  text-align: center;
+  padding: 60px 20px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 40px;
 }
 
 .hero h1 {
-    font-size: 2.5rem;
-    margin-bottom: 20px;
+  font-size: 2.5rem;
+  margin-bottom: 20px;
 }
 
 .hero p {
-    font-size: 1.2rem;
-    margin-bottom: 30px;
-}
-
-.cta-buttons {
-    display: flex;
-    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;
+  font-size: 1.2rem;
+  opacity: 0.9;
 }
 
-.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);
+.study-tools {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 40px;
 }
 
-.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));
-    gap: 30px;
-    margin-bottom: 40px;
-}
-
-.feature-card {
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-    text-align: center;
-    transition: transform 0.3s ease;
-}
-
-.feature-card:hover {
-    transform: translateY(-10px);
-}
-
-.feature-card i {
-    font-size: 3rem;
-    color: var(--accent-color);
-    margin-bottom: 20px;
-}
-.feature-card h3 {
-    font-size: 1.5rem;
-    margin-bottom: 15px;
-}
-
-/* Authentication Forms */
-.auth-form {
-    max-width: 500px;
-    margin: 0 auto;
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-}
-
-.auth-form h1 {
-    text-align: center;
-    margin-bottom: 30px;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: bold;
-}
-
-.form-group input {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    font-size: 1rem;
-}
-
-/* Chat Page */
-.chat-container {
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.chat-box {
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-.messages {
-    height: 500px;
-    padding: 20px;
-    overflow-y: auto;
-    background: #f9f9f9;
-}
-
-.message {
-    margin-bottom: 15px;
-    padding: 10px 15px;
-    border-radius: 10px;
-    max-width: 70%;
-}
-
-.message.bot {
-    background: #e3f2fd;
-    margin-left: auto;
-}
-
-.message.user {
-    background: #bbdefb;
-    margin-right: auto;
-}
-
-.input-area {
-    display: flex;
-    padding: 15px;
-    background: white;
-    border-top: 1px solid #ddd;
+@media (max-width: 768px) {
+  .study-tools {
+    grid-template-columns: 1fr;
+  }
 }
 
-.input-area input {
-    flex-grow: 1;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 5px 0 0 5px;
+.tool-card {
+  background: white;
+  border-radius: 16px;
+  padding: 25px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
 }
 
-.input-area button {
-    border-radius: 0 5px 5px 0;
+.tool-card h2 {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--primary);
 }
 
-/* Materials Page */
-.materials-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 20px;
+.upload-area {
+  border: 2px dashed var(--gray);
+  border-radius: 12px;
+  padding: 30px;
+  text-align: center;
+  margin-bottom: 20px;
+  transition: all 0.3s;
+  position: relative;
 }
 
-.material-card {
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-    text-align: center;
+.upload-area:hover {
+  border-color: var(--primary);
 }
 
-.material-card i {
-    font-size: 2.5rem;
-    color: var(--accent-color);
-    margin-bottom: 15px;
+.upload-area input[type="file"] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  top: 0;
+  right: 0;
+  cursor: pointer;
 }
 
-/* Announcements Page */
-.announcements-list {
-    max-width: 800px;
-    margin: 0 auto;
+.upload-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: var(--gray);
+  cursor: pointer;
 }
 
-.announcement-card {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-    margin-bottom: 20px;
+.upload-btn i {
+  font-size: 2rem;
+  color: var(--primary);
 }
 
-.announcement-card .date {
-    color: #666;
-    font-size: 0.9rem;
-    margin-bottom: 10px;
+.file-list {
+  margin-top: 15px;
+  text-align: right;
 }
 
-/* About Page */
-.team-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 30px;
-    margin-top: 30px;
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f1f5f9;
+  border-radius: 8px;
+  margin-bottom: 8px;
 }
 
-.team-member {
-    text-align: center;
+.file-item i {
+  color: var(--danger);
+  cursor: pointer;
 }
 
-.team-member img {
-    width: 100%;
-    height: auto;
-    border-radius: 50%;
-    margin-bottom: 15px;
+#studyGoal {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  min-height: 80px;
+  font-family: inherit;
 }
 
-/* Contact Page */
-.contact-content {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 40px;
+.btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  border: none;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.contact-info {
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+.btn.primary {
+  background: var(--primary);
+  color: white;
 }
 
-.contact-info i {
-    margin-left: 10px;
-    color: var(--accent-color);
+.btn.primary:hover {
+  background: var(--primary-light);
 }
 
-.contact-form {
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 20px;
 }
 
-.contact-form textarea {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    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;
+.tab-btn {
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  color: var(--gray);
 }
 
-.toast.show {
-    transform: translateY(0);
-    opacity: 1;
+.tab-btn.active {
+  color: var(--primary);
 }
 
-.toast-success {
-    background-color: var(--success-color);
+.tab-btn.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  right: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--primary);
 }
 
-.toast-danger {
-    background-color: var(--danger-color);
+.tab-content {
+  display: none;
 }
 
-.toast-warning {
-    background-color: var(--warning-color);
+.tab-content.active {
+  display: block;
 }
 
-/* Loading Spinner */
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--gray);
 }
 
-.fa-spin {
-    animation: spin 1s linear infinite;
+.empty-state i {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  color: #ddd;
 }
 
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-    .contact-content {
-        grid-template-columns: 1fr;
-    }
-}
+/* Drag and drop styles */
+.drag-over {
+  background: rgba(79, 70, 229, 0.1);
+  border-color: var(--primary);
+}