Spaces:

SolarumAsteridion
/

ExamTimer

Running

App Files Files Community

SolarumAsteridion commited on 8 days ago

Commit

1e9ce14

verified ·

1 Parent(s): bb4a445

Update index.html

Browse files

Files changed (1) hide show

index.html +146 -547

index.html CHANGED Viewed

@@ -3,430 +3,159 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Exam Countdown</title>
     <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">
 <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    :root {
-        --glass-bg: rgba(255, 255, 255, 0.03);
-        --glass-border: rgba(255, 255, 255, 0.08);
-        --text-primary: rgba(255, 255, 255, 0.95);
-        --text-secondary: rgba(255, 255, 255, 0.6);
-        --text-muted: rgba(255, 255, 255, 0.4);
-    }
     body {
-        font-family: 'Lexend', sans-serif;
-        background: #000000;
         min-height: 100vh;
-        color: var(--text-primary);
-        overflow-x: hidden;
-        position: relative;
     }
-    /* Subtle animated gradient orbs */
-    body::before,
-    body::after {
-        content: '';
         position: fixed;
-        border-radius: 50%;
-        filter: blur(150px);
-        opacity: 0.15;
-        animation: float 20s infinite ease-in-out;
-        pointer-events: none;
     }
-    body::before {
-        width: 600px; height: 600px;
-        background: radial-gradient(circle, #ffffff 0%, transparent 70%);
-        top: -200px; right: -200px;
-    }
-    body::after {
-        width: 800px; height: 800px;
-        background: radial-gradient(circle, #ffffff 0%, transparent 70%);
-        bottom: -300px; left: -300px;
-        animation-delay: 10s;
-    }
-    @keyframes float {
-        0%, 100% { transform: translate(0, 0) scale(1); }
-        33% { transform: translate(30px, -30px) scale(1.1); }
-        66% { transform: translate(-20px, 20px) scale(0.9); }
     }
-    /* Subtle particles */
-    .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
-    .particle { position: absolute; width: 1px; height: 1px; background: white; border-radius: 50%; opacity: 0; animation: twinkle 5s infinite; }
-    @keyframes twinkle {
-        0%, 100% { opacity: 0; transform: scale(0.5); }
-        50% { opacity: 0.8; transform: scale(1); }
-    }
-    /* Full-width container */
-    .container {
-        width: 100%;
-        max-width: none;
-        margin: 0 auto;
-        padding: 3rem 2rem;
-        position: relative;
-        z-index: 2;
-    }
-    /* Clean header */
-    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5rem; padding-bottom: 2rem; position: relative; }
-    .header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent); }
-    h1 {
-        font-family: 'Lexend', sans-serif;
-        font-size: 2.5rem;
-        font-weight: 300;
-        letter-spacing: -1px;
-        background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
-        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     }
-    /* Glass settings button */
-    .settings-btn { width: 50px; height: 50px; background: var(--glass-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); position: relative; overflow: hidden; }
-    .settings-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; }
-    .settings-btn:hover { transform: scale(1.05); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); }
-    .settings-btn:hover::before { opacity: 1; }
-    .settings-btn svg { width: 24px; height: 24px; fill: var(--text-primary); transition: transform 0.4s ease; }
-    .settings-btn:hover svg { transform: rotate(90deg); }
-    /* Glass exam grid (rectangular cards, auto height) */
-    .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; 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); }
-    .exam-card:hover::before, .exam-card:hover::after { opacity: 1; }
-    .exam-name {
-        font-size: 1.4rem;
-        font-weight: 400;
-        margin-bottom: 2rem;
-        color: var(--text-primary);
-        letter-spacing: -0.5px;
     }
-    .countdown {
-        font-family: 'Playfair Display', serif;
-        font-size: 4.5rem;
-        font-weight: 700;
-        margin-bottom: 0.5rem;
-        letter-spacing: -2px;
-        line-height: 1.1;
-        background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
-        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     }
-    .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; z-index: 10; }
-    .exam-card:hover .delete-btn { opacity: 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: 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; }
-    .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,
-    .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; }
-    .empty-state p { font-size: 1.1rem; color: var(--text-secondary); max-width: 400px; line-height: 1.6; font-weight: 300; }
-    input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
-    /* Enhanced scrollbar */
-    ::-webkit-scrollbar { width: 8px; }
-    ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
-    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
-    /* Responsive tweaks */
-    @media (max-width: 768px) {
-        h1 { font-size: 2rem; }
-        .countdown { font-size: 3.5rem; }
-        .exams-grid { grid-template-columns: 1fr; }
-        .container { padding: 2rem 1rem; }
-        .modal-content.syllabus-modal-content { max-width: 100%; }
     }
 </style>
 </head>
 <body>
-    <div class="particles" id="particles"></div>
     <div class="container">
-        <div class="header">
-            <h1>Exam Countdown</h1>
-            <div class="settings-btn" id="openModalBtn">
-                <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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
-                </svg>
-            </div>
-        </div>
-        <div class="exams-grid" id="examsGrid"></div>
-        <div class="empty-state" id="emptyState" style="display: none;">
-            <div class="empty-icon">📚</div>
-            <p>No exams scheduled yet. Add your first exam to start tracking.</p>
-        </div>
     </div>
-    <!-- Add Exam Modal -->
     <div class="modal" id="modal">
         <div class="modal-content">
-            <div class="modal-header">
-                <h2 class="modal-title">Add New Exam</h2>
-                <button class="close-btn" id="closeModalBtn">
-                    <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>
             <form id="addExamForm">
-                <div class="form-group">
-                    <label for="examName">Exam Name</label>
-                    <input type="text" id="examName" required placeholder="e.g., Mathematics Final">
-                </div>
-                <div class="form-group">
-                    <label for="examDate">Exam Date</label>
-                    <input type="date" id="examDate" required>
-                </div>
-                <button type="submit" class="add-btn">Add Exam</button>
             </form>
         </div>
     </div>
-    <!-- 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>
             <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, update } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
-        // Your web app's Firebase configuration
         const firebaseConfig = {
             apiKey: "AIzaSyCBGYdGdPjYJiKsTMjVYZ9mf9F82ns7g4Q",
             authDomain: "pikachu-rxppbp.firebaseapp.com",
@@ -437,217 +166,87 @@ Important Formulas:
             appId: "1:241970333280:web:704e8930bd591c138d6505"
         };
-        // Initialize Firebase
         const app = initializeApp(firebaseConfig);
         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'),
             openModalBtn: document.getElementById('openModalBtn'),
-            closeModalBtn: document.getElementById('closeModalBtn'),
             addExamForm: document.getElementById('addExamForm'),
-            examNameInput: document.getElementById('examName'),
-            examDateInput: document.getElementById('examDate'),
             examsGrid: document.getElementById('examsGrid'),
             emptyState: document.getElementById('emptyState'),
-            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 ---
-        const openModal = () => elements.modal.classList.add('active');
-        const closeModal = () => {
-            elements.modal.classList.remove('active');
-            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();
-            const newExam = {
-                name: elements.examNameInput.value,
-                date: new Date(elements.examDateInput.value).getTime(),
                 syllabus: ''
-            };
-            push(examsRef, newExam);
-            closeModal();
-        };
-        const deleteExam = (id) => remove(ref(database, `exams/${id}`));
-        // --- Rendering Logic ---
-        const calculateCountdown = (examDate) => {
-            const now = new Date();
-            now.setHours(0, 0, 0, 0);
-            const targetDate = new Date(examDate);
-            targetDate.setHours(0, 0, 0, 0);
-            const diff = targetDate.getTime() - now.getTime();
-            const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
-            if (days < 0) {
-                return { days: '✔', label: 'COMPLETED' };
-            }
-            return { days, label: days === 1 ? 'DAY LEFT' : 'DAYS LEFT' };
         };
-        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;
-            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);
-                const hasSyllabus = exam.syllabus && exam.syllabus.trim().length > 0;
-                return `
-                    <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="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('');
         };
-        // --- Visual Effects ---
-        function createParticles() {
-            const particleCount = 50;
-            let particleHtml = '';
-            for (let i = 0; i < particleCount; i++) {
-                const delay = Math.random() * 5;
-                const duration = 5 + Math.random() * 5;
-                const style = `
-                    left: ${Math.random() * 100}%;
-                    top: ${Math.random() * 100}%;
-                    animation-delay: ${delay}s;
-                    animation-duration: ${duration}s;
-                `;
-                particleHtml += `<div class="particle" style="${style}"></div>`;
-            }
-            elements.particlesContainer.innerHTML = particleHtml;
-        }
-        document.addEventListener('mousemove', (e) => {
-            document.querySelectorAll('.exam-card').forEach(card => {
-                const rect = card.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                card.style.setProperty('--mouse-x', `${x}px`);
-                card.style.setProperty('--mouse-y', `${y}px`);
-            });
-        });
-        // --- App Initialization & Event Listeners ---
-        createParticles();
-        elements.examDateInput.min = new Date().toISOString().split('T')[0];
-        // Modal Listeners
-        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();
-            if (e.target === elements.syllabusModal) closeSyllabusModal();
-        });
-        // Syllabus Modal Listeners
-        elements.closeSyllabusModalBtn.addEventListener('click', closeSyllabusModal);
-        elements.syllabusForm.addEventListener('submit', saveSyllabus);
-        // 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);
-            }
-        });
-        // Firebase real-time data listener
-        onValue(examsRef, (snapshot) => {
-            const data = snapshot.val();
-            const examList = data ? Object.entries(data).map(([id, value]) => ({ id, ...value })) : [];
-            renderExams(examList);
-        }, (error) => {
-            console.error("Firebase read failed:", error);
-            alert("Could not connect to the database. Please check your configuration.");
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nebula Exam Countdown</title>
     <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=Outfit:wght@200;400;600&display=swap" rel="stylesheet">
 <style>
+    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;600&display=swap');
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
+        background: #020012;
+        color: #fff;
+        font-family: 'Outfit', sans-serif;
         min-height: 100vh;
+        overflow-x: hidden;
     }
+    /* Nebula Background Effects */
+    .nebula-bg {
         position: fixed;
+        top: 0; left: 0; width: 100%; height: 100%;
+        z-index: -1;
+        overflow: hidden;
     }
+    .bg-glow {
+        position: absolute;
+        width: 600px; height: 600px;
+        background: radial-gradient(circle, rgba(100,50,255,0.2) 0%, rgba(0,212,255,0) 70%);
+        filter: blur(60px);
+        animation: pulse 12s infinite alternate;
     }
+    .bg-glow:nth-child(2) { top: -200px; right: -100px; background: radial-gradient(circle, rgba(0,212,255,0.15) 0%, rgba(0,212,255,0) 70%); animation-delay: -4s; }
+    .bg-glow:nth-child(3) { bottom: -200px; left: -100px; background: radial-gradient(circle, rgba(255,50,150,0.1) 0%, rgba(0,212,255,0) 70%); animation-delay: -8s; }
+    @keyframes pulse { 0% { transform: scale(1) translate(0, 0); opacity: 0.5; } 100% { transform: scale(1.3) translate(50px, 50px); opacity: 0.8; } }
+    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; position: relative; z-index: 1; }
+    header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; }
+    h1 { font-weight: 200; letter-spacing: 0.3em; text-transform: uppercase; font-size: 1.5rem; color: #00d4ff; }
+    /* Add Button */
+    .add-trigger {
+        background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
+        color: white; padding: 12px 24px; border-radius: 50px; cursor: pointer; backdrop-filter: blur(10px);
+        transition: all 0.3s ease; font-family: 'Outfit'; font-size: 0.9rem; letter-spacing: 0.1em;
     }
+    .add-trigger:hover { background: rgba(0, 212, 255, 0.2); border-color: #00d4ff; transform: translateY(-3px); }
+    /* Grid */
+    .exams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 3rem; }
+    /* Nebula Card */
+    .glass-card {
+        background: rgba(255, 255, 255, 0.02);
+        backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 40px;
+        padding: 40px;
+        position: relative;
+        box-shadow: 0 8px 32px 0 rgba(0,0,0,0.4);
+        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        text-align: center;
+        cursor: pointer;
     }
+    .glass-card:hover { transform: translateY(-10px) rotateX(5deg); background: rgba(255, 255, 255, 0.05); border-color: rgba(0,212,255,0.3); }
+    .subject { font-size: 0.8rem; letter-spacing: 0.4em; color: #00d4ff; font-weight: 200; margin-bottom: 15px; text-transform: uppercase; }
+    .counter {
+        font-size: 6rem; font-weight: 600; line-height: 1;
+        background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.2) 100%);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 20px rgba(0,212,255,0.2));
     }
+    .sub-text { font-size: 1rem; opacity: 0.5; margin-bottom: 25px; font-weight: 200; letter-spacing: 0.2em; }
+    .footer-date { font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.3); }
+    /* Delete Button */
+    .delete-btn {
+        position: absolute; top: 20px; right: 25px; background: none; border: none; color: rgba(255,255,255,0.2);
+        cursor: pointer; font-size: 1.2rem; transition: color 0.3s; z-index: 5;
     }
+    .delete-btn:hover { color: #ff4b2b; }
+    /* Modal Styling */
+    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(15px); z-index: 100; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease; }
     .modal.active { display: flex; opacity: 1; }
+    .modal-content { background: #0a0a1a; border: 1px solid rgba(0,212,255,0.2); padding: 40px; border-radius: 30px; width: 100%; max-width: 500px; box-shadow: 0 0 50px rgba(0,212,255,0.1); }
+    input, textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 12px; color: white; font-family: 'Outfit'; margin-top: 10px; margin-bottom: 20px; outline: none; }
+    input:focus { border-color: #00d4ff; }
+    label { font-size: 0.8rem; color: #00d4ff; letter-spacing: 0.1em; }
+    .save-btn { width: 100%; padding: 15px; border-radius: 12px; border: none; background: #00d4ff; color: #020012; font-weight: 600; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 0.1em; }
+    .save-btn:hover { background: #fff; transform: scale(1.02); }
+    .empty-state { text-align: center; padding: 100px; opacity: 0.5; font-weight: 200; letter-spacing: 0.2em; }
+    @media (max-width: 600px) {
+        .exams-grid { grid-template-columns: 1fr; }
+        .counter { font-size: 4.5rem; }
     }
 </style>
 </head>
 <body>
+    <div class="nebula-bg">
+        <div class="bg-glow"></div>
+        <div class="bg-glow"></div>
+        <div class="bg-glow"></div>
+    </div>
     <div class="container">
+        <header>
+            <h1>Exams</h1>
+            <button class="add-trigger" id="openModalBtn">+ ADD EXAM</button>
+        </header>
+        <div id="examsGrid" class="exams-grid"></div>
+        <div id="emptyState" class="empty-state">NO EXAMS SCHEDULED</div>
     </div>
+    <!-- Modals (Add & Syllabus) same structure as original but with new CSS -->
     <div class="modal" id="modal">
         <div class="modal-content">
+            <h2 style="font-weight: 200; margin-bottom: 20px; letter-spacing: 2px;">NEW SCHEDULE</h2>
             <form id="addExamForm">
+                <label>EXAM NAME</label>
+                <input type="text" id="examName" required placeholder="e.g. Physics Midterm">
+                <label>DATE</label>
+                <input type="date" id="examDate" required>
+                <button type="submit" class="save-btn">Initialize</button>
             </form>
         </div>
     </div>
     <div class="modal" id="syllabusModal">
+        <div class="modal-content" style="max-width: 700px;">
+            <h2 id="syllabusExamName" style="font-weight: 200; color: #00d4ff; letter-spacing: 2px;"></h2>
+            <p id="syllabusExamDate" style="font-size: 0.8rem; opacity: 0.5; margin-bottom: 20px;"></p>
             <form id="syllabusForm">
+                <textarea id="syllabusContent" rows="10" placeholder="Enter study topics..."></textarea>
                 <input type="hidden" id="syllabusExamId">
+                <button type="submit" class="save-btn">Update Syllabus</button>
+                <div id="savedIndicator" style="display:none; color: #00d4ff; text-align: center; margin-top: 10px; font-size: 0.8rem;">Saved successfully</div>
             </form>
         </div>
     </div>
     <script type="module">
         import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
         import { getDatabase, ref, onValue, push, remove, update } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
         const firebaseConfig = {
             apiKey: "AIzaSyCBGYdGdPjYJiKsTMjVYZ9mf9F82ns7g4Q",
             authDomain: "pikachu-rxppbp.firebaseapp.com",
             appId: "1:241970333280:web:704e8930bd591c138d6505"
         };
         const app = initializeApp(firebaseConfig);
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
         let examsData = [];
         const elements = {
             modal: document.getElementById('modal'),
             openModalBtn: document.getElementById('openModalBtn'),
             addExamForm: document.getElementById('addExamForm'),
             examsGrid: document.getElementById('examsGrid'),
             emptyState: document.getElementById('emptyState'),
             syllabusModal: document.getElementById('syllabusModal'),
             syllabusForm: document.getElementById('syllabusForm'),
             syllabusContent: document.getElementById('syllabusContent'),
             syllabusExamId: document.getElementById('syllabusExamId'),
+            syllabusExamName: document.getElementById('syllabusExamName'),
+            syllabusExamDate: document.getElementById('syllabusExamDate'),
             savedIndicator: document.getElementById('savedIndicator')
         };
+        const calculateCountdown = (examDate) => {
+            const now = new Date(); now.setHours(0,0,0,0);
+            const target = new Date(examDate); target.setHours(0,0,0,0);
+            const diff = target.getTime() - now.getTime();
+            const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+            return days < 0 ? { days: '✔', label: 'COMPLETE' } : { days, label: 'DAYS REMAINING' };
         };
+        onValue(examsRef, (snapshot) => {
+            const data = snapshot.val();
+            examsData = data ? Object.entries(data).map(([id, val]) => ({ id, ...val })) : [];
+            renderExams();
+        });
+        function renderExams() {
+            elements.emptyState.style.display = examsData.length ? 'none' : 'block';
+            elements.examsGrid.innerHTML = examsData.sort((a,b) => a.date - b.date).map(exam => {
+                const count = calculateCountdown(exam.date);
+                const dateStr = new Date(exam.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+                return `
+                <div class="glass-card" onclick="openSyllabus('${exam.id}')">
+                    <button class="delete-btn" onclick="event.stopPropagation(); deleteExam('${exam.id}')">✕</button>
+                    <div class="subject">${exam.name}</div>
+                    <div class="counter">${count.days}</div>
+                    <div class="sub-text">${count.label}</div>
+                    <div class="footer-date">${dateStr}</div>
+                </div>`;
+            }).join('');
+        }
+        window.openSyllabus = (id) => {
+            const exam = examsData.find(e => e.id === id);
             elements.syllabusExamName.textContent = exam.name;
+            elements.syllabusExamDate.textContent = new Date(exam.date).toDateString();
             elements.syllabusContent.value = exam.syllabus || '';
+            elements.syllabusExamId.value = id;
             elements.syllabusModal.classList.add('active');
         };
+        window.deleteExam = (id) => { if(confirm('Remove this exam?')) remove(ref(database, `exams/${id}`)); };
+        elements.openModalBtn.onclick = () => elements.modal.classList.add('active');
+        window.onclick = (e) => { if(e.target.classList.contains('modal')) { e.target.classList.remove('active'); elements.savedIndicator.style.display='none'; }};
+        elements.addExamForm.onsubmit = (e) => {
+            e.preventDefault();
+            push(examsRef, {
+                name: document.getElementById('examName').value,
+                date: new Date(document.getElementById('examDate').value).getTime(),
                 syllabus: ''
+            });
+            elements.modal.classList.remove('active');
+            elements.addExamForm.reset();
         };
+        elements.syllabusForm.onsubmit = (e) => {
+            e.preventDefault();
+            update(ref(database, `exams/${elements.syllabusExamId.value}`), { syllabus: elements.syllabusContent.value });
+            elements.savedIndicator.style.display = 'block';
+            setTimeout(() => elements.syllabusModal.classList.remove('active'), 1000);
         };
     </script>
 </body>
 </html>