שיש אופציה של מבחן / עבודה חדשה ואז רק אפשר להעלות קבצים וזה מסדר לך את זה לפי איך שקראת לעבודה אחרי שהעלת את הקבצים אתה בוחר מה בא לך שהוא יעשה (כרטיסיות עם שאלות/מבחנים/סיכומים ועוד) נוסף על כך תעשה שלםני שאפשר לעשות משהו צריך להירשם ולרשום את המייל וכל פעם שמישהו נרשם הוא מקבל למייל הודעה ( ברוך הבא לstudy mate בנוסף תוריד את התמונה ששמת ותעצב את האתר שיהיה ממש מושקע אבל צבעים רגועים

components/navbar.js

@@ -64,8 +64,8 @@ class CustomNavbar extends HTMLElement {
       </style>
       <nav>
         <div class="logo">
-          <img src="http://static.photos/education/200x200/1" alt="StudyMate Logo">
-          <span>StudyMate</span>
+          <i class="fas fa-graduation-cap" style="font-size: 2rem;"></i>
+<span>StudyMate</span>
         </div>
         <div class="nav-links">
           <a href="/" class="active">בית</a>

components/register-form.js

@@ -0,0 +1,116 @@
+class RegisterForm extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .register-form {
+          max-width: 500px;
+          margin: 0 auto;
+          padding: 2rem;
+          background: var(--card-bg);
+          border-radius: 16px;
+          box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+        }
+        
+        .form-group {
+          margin-bottom: 1.5rem;
+        }
+        
+        label {
+          display: block;
+          margin-bottom: 0.5rem;
+          font-weight: 600;
+        }
+        
+        input {
+          width: 100%;
+          padding: 12px;
+          border: 1px solid #ddd;
+          border-radius: 8px;
+          font-family: inherit;
+        }
+        
+        .btn {
+          width: 100%;
+          padding: 12px;
+          border-radius: 8px;
+          border: none;
+          font-weight: bold;
+          cursor: pointer;
+          background: var(--primary);
+          color: white;
+          transition: background 0.3s;
+        }
+        
+        .btn:hover {
+          background: var(--primary-light);
+        }
+        
+        .login-link {
+          text-align: center;
+          margin-top: 1rem;
+        }
+        
+        .login-link a {
+          color: var(--primary);
+          text-decoration: none;
+        }
+      </style>
+      <div class="register-form">
+        <h2>הרשמה</h2>
+        <form id="registerForm">
+          <div class="form-group">
+            <label for="name">שם מלא</label>
+            <input type="text" id="name" required>
+          </div>
+          <div class="form-group">
+            <label for="email">אימייל</label>
+            <input type="email" id="email" required>
+          </div>
+          <div class="form-group">
+            <label for="password">סיסמה</label>
+            <input type="password" id="password" required>
+          </div>
+          <div class="form-group">
+            <label for="confirm-password">אימות סיסמה</label>
+            <input type="password" id="confirm-password" required>
+          </div>
+          <button type="submit" class="btn">הרשם</button>
+        </form>
+        <div class="login-link">
+          כבר יש לך חשבון? <a href="/login.html">התחבר כאן</a>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('registerForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const email = this.shadowRoot.getElementById('email').value;
+      const password = this.shadowRoot.getElementById('password').value;
+      
+      // Send welcome email
+      await fetch('https://api.emailjs.com/api/v1.0/email/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          service_id: 'YOUR_SERVICE_ID',
+          template_id: 'YOUR_TEMPLATE_ID',
+          user_id: 'YOUR_USER_ID',
+          template_params: {
+            to_email: email,
+            subject: 'ברוך הבא ל-StudyMate!',
+            message: 'תודה שנרשמת ל-StudyMate! אנו שמחים להצטרפותך למערכת.'
+          }
+        })
+      });
+      
+      // Register user (simplified)
+      alert('ההרשמה בוצעה בהצלחה! נא לבדוק את האימייל שלך להודעת ברוך הבא.');
+    });
+  }
+}
+
+customElements.define('register-form', RegisterForm);

index.html

@@ -15,24 +15,54 @@
             <h1>StudyMate - הפיכת הלמידה לחכמה יותר</h1>
             <p>העלה חומרי לימוד וקבל סיכומים, מבחנים וכרטיסיות לימוד - הכל אוטומטי!</p>
         </section>
-
         <div class="study-tools">
             <div class="tool-card">
-                <h2><i class="fas fa-file-upload"></i> העלאת קבצים</h2>
+                <h2><i class="fas fa-file-upload"></i> יצירת פרויקט חדש</h2>
+                <div class="project-type-selector">
+                    <button class="project-type active" data-type="exam">
+                        <i class="fas fa-file-alt"></i> מבחן
+                    </button>
+                    <button class="project-type" data-type="assignment">
+                        <i class="fas fa-tasks"></i> עבודה
+                    </button>
+                    <button class="project-type" data-type="presentation">
+                        <i class="fas fa-chalkboard-teacher"></i> מצגת
+                    </button>
+                </div>
+                <input type="text" id="projectName" placeholder="שם הפרויקט (למשל: מבחן בתנ״ך)">
                 <div class="upload-area" id="dropZone">
-                    <input type="file" id="fileInput" multiple accept=".pdf,.docx,.txt">
+                    <input type="file" id="fileInput" multiple accept=".pdf,.docx,.txt,.ppt,.pptx">
                     <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>
+                <div class="output-options">
+                    <h3>מה תרצו לקבל?</h3>
+                    <div class="options-grid">
+                        <label class="option-checkbox">
+                            <input type="checkbox" name="output" value="summary" checked>
+                            <span>סיכומים</span>
+                        </label>
+                        <label class="option-checkbox">
+                            <input type="checkbox" name="output" value="flashcards" checked>
+                            <span>כרטיסיות</span>
+                        </label>
+                        <label class="option-checkbox">
+                            <input type="checkbox" name="output" value="quiz">
+                            <span>מבחן תרגול</span>
+                        </label>
+                        <label class="option-checkbox">
+                            <input type="checkbox" name="output" value="presentation">
+                            <span>מצגת</span>
+                        </label>
+                    </div>
+                </div>
                 <button class="btn primary" id="processBtn">
-                    <i class="fas fa-magic"></i> צור חומרי לימוד
+                    <i class="fas fa-magic"></i> צור פרויקט
                 </button>
             </div>
-
-            <div class="tool-card">
+<div class="tool-card">
                 <h2><i class="fas fa-book"></i> חומרי הלימוד שלי</h2>
                 <div class="tabs">
                     <button class="tab-btn active" data-tab="notes">סיכומים</button>

register.html

@@ -11,35 +11,12 @@
     <custom-navbar></custom-navbar>
     
     <main class="container">
-        <section class="auth-form">
-            <h1>הרשמה</h1>
-            <form>
-                <div class="form-group">
-                    <label for="name">שם מלא</label>
-                    <input type="text" id="name" required>
-                </div>
-                <div class="form-group">
-                    <label for="email">אימייל</label>
-                    <input type="email" id="email" required>
-                </div>
-                <div class="form-group">
-                    <label for="password">סיסמה</label>
-                    <input type="password" id="password" required>
-                </div>
-                <div class="form-group">
-                    <label for="confirm-password">אימות סיסמה</label>
-                    <input type="password" id="confirm-password" required>
-                </div>
-                <button type="submit" class="btn primary">הרשם</button>
-            </form>
-            <p>כבר יש לך חשבון? <a href="/login.html">התחבר כאן</a></p>
-        </section>
+        <register-form></register-form>
     </main>
-
-    <custom-footer></custom-footer>
-
+<custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/register-form.js"></script>
     <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -1,12 +1,21 @@
 ```javascript
 document.addEventListener('DOMContentLoaded', () => {
-  // File upload handling
+  // Project creation handling
   const fileInput = document.getElementById('fileInput');
   const fileList = document.getElementById('fileList');
   const dropZone = document.getElementById('dropZone');
   const processBtn = document.getElementById('processBtn');
+  const projectName = document.getElementById('projectName');
+  const projectTypes = document.querySelectorAll('.project-type');
   
-  // Tab switching
+  // Project type selection
+  projectTypes.forEach(type => {
+    type.addEventListener('click', () => {
+      projectTypes.forEach(t => t.classList.remove('active'));
+      type.classList.add('active');
+    });
+  });
+// Tab switching
   const tabBtns = document.querySelectorAll('.tab-btn');
   tabBtns.forEach(btn => {
     btn.addEventListener('click', () => {
@@ -58,18 +67,16 @@ document.addEventListener('DOMContentLoaded', () => {
   fileInput.addEventListener('change', function() {
     handleFiles(this.files);
   });
-
   function handleFiles(files) {
     fileList.innerHTML = '';
     if (files.length === 0) return;
     
     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')) {
+      if (!file.type.match('application/pdf|application/vnd.openxmlformats-officedocument.wordprocessingml.document|text/plain|application/vnd.ms-powerpoint|application/vnd.openxmlformats-officedocument.presentationml.presentation')) {
         continue;
       }
-      
-      const fileItem = document.createElement('div');
+const fileItem = document.createElement('div');
       fileItem.className = 'file-item';
       fileItem.innerHTML = `
         <span>${file.name}</span>
@@ -98,13 +105,23 @@ document.addEventListener('DOMContentLoaded', () => {
       return;
     }
     
-    const goal = document.getElementById('studyGoal').value.trim();
-    if (!goal) {
-      alert('אנא הזן מטרה לימודית');
+    const projectNameValue = projectName.value.trim();
+    if (!projectNameValue) {
+      alert('אנא הזן שם לפרויקט');
       return;
     }
     
-    // Show loading state
+    // Get selected output options
+    const outputOptions = [];
+    document.querySelectorAll('input[name="output"]:checked').forEach(checkbox => {
+      outputOptions.push(checkbox.value);
+    });
+    
+    if (outputOptions.length === 0) {
+      alert('אנא בחר לפחות אפשרות פלט אחת');
+      return;
+    }
+// Show loading state
     const originalText = processBtn.innerHTML;
     processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> מעבד...';
     processBtn.disabled = true;

style.css

@@ -1,43 +1,44 @@
+
 :root {
-  --primary: #4f46e5;
-  --primary-light: #6366f1;
-  --secondary: #7c3aed;
-  --dark: #1e293b;
-  --light: #f8fafc;
-  --gray: #94a3b8;
-  --success: #10b981;
-  --warning: #f59e0b;
-  --danger: #ef4444;
+  --primary: #5d5fef;
+  --primary-light: #8183f2;
+  --secondary: #6d8bff;
+  --dark: #2d3748;
+  --light: #f7fafc;
+  --gray: #a0aec0;
+  --success: #48bb78;
+  --warning: #ed8936;
+  --danger: #f56565;
+  --accent: #9f7aea;
+  --background: #f8f9fa;
+  --card-bg: #ffffff;
 }
-
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
-
 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f1f5f9;
+  background-color: var(--background);
   color: var(--dark);
   direction: rtl;
+  line-height: 1.6;
 }
-
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
-
 .hero {
   text-align: center;
-  padding: 60px 20px;
+  padding: 80px 20px;
   background: linear-gradient(135deg, var(--primary), var(--secondary));
   color: white;
   border-radius: 16px;
   margin-bottom: 40px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
-
 .hero h1 {
   font-size: 2.5rem;
   margin-bottom: 20px;
@@ -60,14 +61,18 @@ body {
     grid-template-columns: 1fr;
   }
 }
-
 .tool-card {
-  background: white;
+  background: var(--card-bg);
   border-radius: 16px;
-  padding: 25px;
+  padding: 30px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
+.tool-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
 .tool-card h2 {
   margin-bottom: 20px;
   display: flex;
@@ -75,17 +80,85 @@ body {
   gap: 10px;
   color: var(--primary);
 }
+.project-type-selector {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.project-type {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid var(--gray);
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.project-type.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.project-type i {
+  font-size: 1.5rem;
+}
+
+#projectName {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  font-family: inherit;
+}
+
+.output-options {
+  margin: 20px 0;
+}
+
+.output-options h3 {
+  margin-bottom: 15px;
+  color: var(--dark);
+}
+
+.options-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.option-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  background: var(--light);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.option-checkbox:hover {
+  background: #e2e8f0;
+}
 
 .upload-area {
   border: 2px dashed var(--gray);
   border-radius: 12px;
-  padding: 30px;
+  padding: 40px;
   text-align: center;
   margin-bottom: 20px;
   transition: all 0.3s;
   position: relative;
+  background: var(--light);
 }
-
 .upload-area:hover {
   border-color: var(--primary);
 }