Update index.html

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Exam Countdown</title>
-    <!-- NEW: Updated Google Fonts Link -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
@@ -100,7 +99,7 @@
     .exams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; grid-auto-rows: auto; align-items: start; }
 
     /* Glassmorphic exam cards */
-    .exam-card { background: var(--glass-bg); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.5rem; text-align: center; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); position: relative; overflow: hidden; min-height: 220px; }
+    .exam-card { background: var(--glass-bg); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.5rem; text-align: center; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); position: relative; overflow: hidden; min-height: 220px; cursor: pointer; }
     .exam-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 50%, transparent); opacity: 0; transition: opacity 0.3s ease; }
     .exam-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient( 600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
     .exam-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
@@ -128,36 +127,184 @@
     .countdown-label { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
     .exam-date { font-size: 0.9rem; color: var(--text-muted); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
 
+    /* Syllabus indicator badge */
+    .syllabus-badge {
+        position: absolute;
+        top: 1.5rem;
+        left: 1.5rem;
+        padding: 0.4rem 0.8rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        font-size: 0.7rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    .syllabus-badge.has-syllabus {
+        opacity: 1;
+        background: rgba(100, 200, 100, 0.15);
+        border-color: rgba(100, 200, 100, 0.3);
+        color: rgba(150, 255, 150, 0.9);
+    }
+    .exam-card:hover .syllabus-badge {
+        opacity: 1;
+    }
+    .syllabus-badge svg {
+        width: 12px;
+        height: 12px;
+        fill: currentColor;
+    }
+
+    /* Click hint */
+    .click-hint {
+        position: absolute;
+        bottom: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 0.7rem;
+        color: var(--text-muted);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+    .exam-card:hover .click-hint {
+        opacity: 0.6;
+    }
+
     /* Minimal delete button */
-    .delete-btn { position: absolute; top: 1.5rem; right: 1.5rem; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; opacity: 0; }
+    .delete-btn { position: absolute; top: 1.5rem; right: 1.5rem; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; opacity: 0; z-index: 10; }
     .exam-card:hover .delete-btn { opacity: 1; }
-    .delete-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
+    .delete-btn:hover { background: rgba(255, 100, 100, 0.15); border-color: rgba(255, 100, 100, 0.3); transform: scale(1.1); }
     .delete-btn svg { width: 16px; height: 16px; fill: var(--text-secondary); transition: fill 0.3s ease; pointer-events: none; }
-    .delete-btn:hover svg { fill: var(--text-primary); }
+    .delete-btn:hover svg { fill: rgba(255, 150, 150, 1); }
 
     /* Glass modal */
     .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; align-items: center; justify-content: center; padding: 2rem; opacity: 0; transition: opacity 0.3s ease; }
     .modal.active { display: flex; opacity: 1; }
     .modal-content { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 3rem; width: 100%; max-width: 450px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: modalSlide 0.4s cubic-bezier(0.23, 1, 0.320, 1); }
+    
+    /* Syllabus modal is wider */
+    .modal-content.syllabus-modal-content {
+        max-width: 650px;
+        max-height: 85vh;
+        overflow-y: auto;
+    }
+
     @keyframes modalSlide { from { transform: translateY(-20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
     .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
     .modal-title { font-family: 'Lexend', sans-serif; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.5px; }
-    .close-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
+    .modal-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
+    .close-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; }
     .close-btn:hover { background: rgba(255, 255, 255, 0.08); transform: rotate(90deg); }
     .close-btn svg { width: 18px; height: 18px; fill: var(--text-secondary); }
 
     /* Clean form */
     .form-group { margin-bottom: 2rem; }
     .form-group label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; }
-    .form-group input { width: 100%; padding: 1rem 1.25rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--text-primary); font-size: 1rem; transition: all 0.3s ease; font-family: 'Lexend', sans-serif; }
-    .form-group input:focus { outline: none; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
-    .form-group input::placeholder { color: var(--text-muted); }
+    .form-group input,
+    .form-group textarea { 
+        width: 100%; 
+        padding: 1rem 1.25rem; 
+        background: rgba(255, 255, 255, 0.03); 
+        border: 1px solid rgba(255, 255, 255, 0.08); 
+        border-radius: 12px; 
+        color: var(--text-primary); 
+        font-size: 1rem; 
+        transition: all 0.3s ease; 
+        font-family: 'Lexend', sans-serif; 
+    }
+    .form-group textarea {
+        resize: vertical;
+        min-height: 200px;
+        line-height: 1.7;
+    }
+    .form-group input:focus,
+    .form-group textarea:focus { 
+        outline: none; 
+        background: rgba(255, 255, 255, 0.05); 
+        border-color: rgba(255, 255, 255, 0.2); 
+        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.1); 
+    }
+    .form-group input::placeholder,
+    .form-group textarea::placeholder { 
+        color: var(--text-muted); 
+    }
+
+    /* Syllabus tips */
+    .syllabus-tips {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 12px;
+        padding: 1.25rem;
+        margin-bottom: 2rem;
+    }
+    .syllabus-tips-title {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin-bottom: 0.75rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .syllabus-tips-title svg {
+        width: 14px;
+        height: 14px;
+        fill: var(--text-secondary);
+    }
+    .syllabus-tips ul {
+        list-style: none;
+        font-size: 0.85rem;
+        color: var(--text-muted);
+        line-height: 1.8;
+    }
+    .syllabus-tips li::before {
+        content: '→';
+        margin-right: 0.5rem;
+        color: var(--text-secondary);
+    }
 
     /* Sleek add button */
     .add-btn { width: 100%; padding: 1.25rem; background: rgba(255, 255, 255, 0.95); border: none; border-radius: 12px; color: #000; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); position: relative; overflow: hidden; letter-spacing: 0.5px; }
     .add-btn:hover { transform: translateY(-2px); background: white; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2); }
     .add-btn:active { transform: translateY(0); }
 
+    /* Saved indicator */
+    .saved-indicator {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 1rem;
+        background: rgba(100, 200, 100, 0.1);
+        border: 1px solid rgba(100, 200, 100, 0.2);
+        border-radius: 12px;
+        color: rgba(150, 255, 150, 0.9);
+        font-size: 0.9rem;
+        margin-top: 1rem;
+        animation: fadeIn 0.3s ease;
+    }
+    .saved-indicator.show {
+        display: flex;
+    }
+    .saved-indicator svg {
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(-10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
     /* Elegant empty state */
     .empty-state { text-align: center; padding: 6rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
     .empty-icon { width: 80px; height: 80px; margin-bottom: 2rem; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
@@ -176,7 +323,8 @@
         h1 { font-size: 2rem; } 
         .countdown { font-size: 3.5rem; } 
         .exams-grid { grid-template-columns: 1fr; } 
-        .container { padding: 2rem 1rem; } 
+        .container { padding: 2rem 1rem; }
+        .modal-content.syllabus-modal-content { max-width: 100%; }
     }
 </style>
 </head>
@@ -201,6 +349,7 @@
         </div>
     </div>
     
+    <!-- Add Exam Modal -->
     <div class="modal" id="modal">
         <div class="modal-content">
             <div class="modal-header">
@@ -226,11 +375,70 @@
         </div>
     </div>
 
-    <!-- The Javascript below is unchanged and remains fully functional -->
+    <!-- Syllabus Modal -->
+    <div class="modal" id="syllabusModal">
+        <div class="modal-content syllabus-modal-content">
+            <div class="modal-header">
+                <div>
+                    <h2 class="modal-title" id="syllabusExamName">Exam Syllabus</h2>
+                    <p class="modal-subtitle" id="syllabusExamDate"></p>
+                </div>
+                <button class="close-btn" id="closeSyllabusModalBtn">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                    </svg>
+                </button>
+            </div>
+            
+            <div class="syllabus-tips">
+                <div class="syllabus-tips-title">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+                    </svg>
+                    Tips for your syllabus
+                </div>
+                <ul>
+                    <li>List all chapters and topics</li>
+                    <li>Add important formulas or concepts</li>
+                    <li>Include page numbers from textbooks</li>
+                    <li>Mark high-priority topics with ★</li>
+                </ul>
+            </div>
+
+            <form id="syllabusForm">
+                <div class="form-group">
+                    <label for="syllabusContent">Syllabus / Topics to Study</label>
+                    <textarea id="syllabusContent" rows="12" placeholder="Enter your syllabus here...
+
+Example:
+Chapter 1: Introduction to Calculus
+  - Limits and Continuity (pg 1-25)
+  - Derivatives (pg 26-50) ★
+  
+Chapter 2: Integration
+  - Definite Integrals (pg 51-75)
+  - Applications (pg 76-100)
+
+Important Formulas:
+  - d/dx(x^n) = nx^(n-1)
+  - ∫x^n dx = x^(n+1)/(n+1) + C"></textarea>
+                </div>
+                <input type="hidden" id="syllabusExamId">
+                <button type="submit" class="add-btn">Save Syllabus</button>
+                <div class="saved-indicator" id="savedIndicator">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                    </svg>
+                    Syllabus saved successfully!
+                </div>
+            </form>
+        </div>
+    </div>
+
     <script type="module">
         // Firebase SDK modules
         import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
-        import { getDatabase, ref, onValue, push, remove } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
+        import { getDatabase, ref, onValue, push, remove, update } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
 
         // Your web app's Firebase configuration
         const firebaseConfig = {
@@ -248,6 +456,9 @@
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
 
+        // Store exams data globally for easy access
+        let examsData = [];
+
         // DOM Elements
         const elements = {
             modal: document.getElementById('modal'),
@@ -258,7 +469,16 @@
             examDateInput: document.getElementById('examDate'),
             examsGrid: document.getElementById('examsGrid'),
             emptyState: document.getElementById('emptyState'),
-            particlesContainer: document.getElementById('particles')
+            particlesContainer: document.getElementById('particles'),
+            // Syllabus modal elements
+            syllabusModal: document.getElementById('syllabusModal'),
+            closeSyllabusModalBtn: document.getElementById('closeSyllabusModalBtn'),
+            syllabusForm: document.getElementById('syllabusForm'),
+            syllabusExamName: document.getElementById('syllabusExamName'),
+            syllabusExamDate: document.getElementById('syllabusExamDate'),
+            syllabusContent: document.getElementById('syllabusContent'),
+            syllabusExamId: document.getElementById('syllabusExamId'),
+            savedIndicator: document.getElementById('savedIndicator')
         };
 
         // --- Core Functions ---
@@ -268,12 +488,52 @@
             elements.addExamForm.reset();
         };
 
+        const openSyllabusModal = (examId) => {
+            const exam = examsData.find(e => e.id === examId);
+            if (!exam) return;
+
+            elements.syllabusExamName.textContent = exam.name;
+            const dateObject = new Date(exam.date);
+            elements.syllabusExamDate.textContent = dateObject.toLocaleDateString('en-US', {
+                weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+            });
+            elements.syllabusContent.value = exam.syllabus || '';
+            elements.syllabusExamId.value = examId;
+            elements.savedIndicator.classList.remove('show');
+            elements.syllabusModal.classList.add('active');
+        };
+
+        const closeSyllabusModal = () => {
+            elements.syllabusModal.classList.remove('active');
+            elements.savedIndicator.classList.remove('show');
+        };
+
+        const saveSyllabus = (event) => {
+            event.preventDefault();
+            const examId = elements.syllabusExamId.value;
+            const syllabusContent = elements.syllabusContent.value;
+
+            // Update the syllabus in Firebase
+            const examRef = ref(database, `exams/${examId}`);
+            update(examRef, { syllabus: syllabusContent })
+                .then(() => {
+                    elements.savedIndicator.classList.add('show');
+                    setTimeout(() => {
+                        elements.savedIndicator.classList.remove('show');
+                    }, 3000);
+                })
+                .catch((error) => {
+                    console.error("Error saving syllabus:", error);
+                    alert("Failed to save syllabus. Please try again.");
+                });
+        };
+
         const addExam = (event) => {
             event.preventDefault();
-            // Save the date as a numeric timestamp for consistency and accuracy
             const newExam = {
                 name: elements.examNameInput.value,
-                date: new Date(elements.examDateInput.value).getTime()
+                date: new Date(elements.examDateInput.value).getTime(),
+                syllabus: ''
             };
             push(examsRef, newExam);
             closeModal();
@@ -284,9 +544,8 @@
         // --- Rendering Logic ---
         const calculateCountdown = (examDate) => {
             const now = new Date();
-            now.setHours(0, 0, 0, 0); // Set to midnight for accurate day comparison
+            now.setHours(0, 0, 0, 0);
 
-            // This constructor handles both numbers (timestamps) and "YYYY-MM-DD" strings
             const targetDate = new Date(examDate);
             targetDate.setHours(0, 0, 0, 0);
             
@@ -300,32 +559,40 @@
         };
 
         const renderExams = (exams) => {
+            examsData = exams; // Store for later access
             const hasExams = exams && exams.length > 0;
             elements.examsGrid.style.display = hasExams ? 'grid' : 'none';
             elements.emptyState.style.display = hasExams ? 'none' : 'flex';
 
             if (!hasExams) return;
 
-            // Sort by date so the soonest exam is first
             exams.sort((a, b) => new Date(a.date) - new Date(b.date));
 
             elements.examsGrid.innerHTML = exams.map(exam => {
                 const countdown = calculateCountdown(exam.date);
-                const dateObject = new Date(exam.date); // Works for both old and new data
+                const dateObject = new Date(exam.date);
+                const hasSyllabus = exam.syllabus && exam.syllabus.trim().length > 0;
 
                 return `
-                    <div class="exam-card">
+                    <div class="exam-card" data-exam-id="${exam.id}">
                         <button class="delete-btn" data-delete-id="${exam.id}">
                             <svg viewBox="0 0 24 24">
                                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                             </svg>
                         </button>
+                        <div class="syllabus-badge ${hasSyllabus ? 'has-syllabus' : ''}">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+                            </svg>
+                            ${hasSyllabus ? 'Syllabus Added' : 'Add Syllabus'}
+                        </div>
                         <div class="exam-name">${exam.name}</div>
                         <div class="countdown">${countdown.days}</div>
                         <div class="countdown-label">${countdown.label}</div>
                         <div class="exam-date">${dateObject.toLocaleDateString('en-US', { 
                             weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' 
                         })}</div>
+                        <div class="click-hint">Click to ${hasSyllabus ? 'view' : 'add'} syllabus</div>
                     </div>`;
             }).join('');
         };
@@ -366,13 +633,28 @@
         elements.openModalBtn.addEventListener('click', openModal);
         elements.closeModalBtn.addEventListener('click', closeModal);
         elements.addExamForm.addEventListener('submit', addExam);
-        window.addEventListener('click', e => { if (e.target === elements.modal) closeModal(); });
+        window.addEventListener('click', e => { 
+            if (e.target === elements.modal) closeModal();
+            if (e.target === elements.syllabusModal) closeSyllabusModal();
+        });
+
+        // Syllabus Modal Listeners
+        elements.closeSyllabusModalBtn.addEventListener('click', closeSyllabusModal);
+        elements.syllabusForm.addEventListener('submit', saveSyllabus);
 
-        // Delete button listener (using event delegation)
+        // Exam card click listener (using event delegation)
         elements.examsGrid.addEventListener('click', (event) => {
             const deleteBtn = event.target.closest('.delete-btn');
             if (deleteBtn) {
+                event.stopPropagation();
                 deleteExam(deleteBtn.dataset.deleteId);
+                return;
+            }
+
+            const examCard = event.target.closest('.exam-card');
+            if (examCard) {
+                const examId = examCard.dataset.examId;
+                openSyllabusModal(examId);
             }
         });