Update index.html

index.html

@@ -6,386 +6,69 @@
     <title>Neon Exam Countdown</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, #0A0A0B 0%, #141419 100%);
-            min-height: 100vh;
-            color: #fff;
-            overflow-x: hidden;
-            position: relative;
-        }
-
-        /* Animated background */
-        .particles {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            z-index: 1;
-        }
-
-        .particle {
-            position: absolute;
-            width: 4px;
-            height: 4px;
-            background: radial-gradient(circle, rgba(0, 212, 255, 0.5) 0%, transparent 70%);
-            border-radius: 50%;
-            animation: float 20s infinite linear;
-        }
-
-        @keyframes float {
-            from {
-                transform: translateY(100vh) translateX(0);
-                opacity: 0;
-            }
-            10% {
-                opacity: 1;
-            }
-            90% {
-                opacity: 1;
-            }
-            to {
-                transform: translateY(-100vh) translateX(100px);
-                opacity: 0;
-            }
-        }
-
-        /* Main container */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-            position: relative;
-            z-index: 2;
-        }
-
-        /* Header */
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 3rem;
-        }
-
-        h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 50%, #00FF88 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
-        }
-
-        /* Settings button */
-        .settings-btn {
-            width: 50px;
-            height: 50px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .settings-btn:hover {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: #00D4FF;
-            box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
-            transform: scale(1.05);
-        }
-
-        .settings-btn svg {
-            width: 24px;
-            height: 24px;
-            fill: #00D4FF;
-        }
-
-        /* Exam cards grid */
-        .exams-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-
-        /* Exam card */
-        .exam-card {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 20px;
-            padding: 2rem;
-            text-align: center;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .exam-card::before {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(45deg, #00D4FF, #FF0080, #00FF88, #00D4FF);
-            border-radius: 20px;
-            opacity: 0;
-            z-index: -1;
-            transition: opacity 0.3s ease;
-        }
-
-        .exam-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
-        }
-
-        .exam-card:hover::before {
-            opacity: 0.5;
-        }
-
-        .exam-name {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 1rem;
-            color: #fff;
-        }
-
-        .countdown {
-            font-size: 3rem;
-            font-weight: 700;
-            color: #00D4FF;
-            text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
-            margin-bottom: 0.5rem;
-        }
-
-        .countdown-label {
-            font-size: 1rem;
-            color: rgba(255, 255, 255, 0.7);
-        }
-
-        .exam-date {
-            font-size: 0.9rem;
-            color: rgba(255, 255, 255, 0.5);
-            margin-top: 1rem;
-        }
-
-        .delete-btn {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            width: 30px;
-            height: 30px;
-            background: rgba(255, 0, 128, 0.2);
-            border: 1px solid rgba(255, 0, 128, 0.5);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            opacity: 0;
-        }
-
-        .exam-card:hover .delete-btn {
-            opacity: 1;
-        }
-
-        .delete-btn:hover {
-            background: rgba(255, 0, 128, 0.4);
-            transform: scale(1.1);
-        }
-
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
-        }
-
-        .modal.active {
-            display: flex;
-        }
-
-        .modal-content {
-            background: rgba(20, 20, 25, 0.95);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 20px;
-            padding: 2rem;
-            width: 100%;
-            max-width: 400px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-        }
-
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-        }
-
-        .modal-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-        }
-
-        .close-btn {
-            width: 30px;
-            height: 30px;
-            background: transparent;
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: transform 0.3s ease;
-        }
-
-        .close-btn:hover {
-            transform: rotate(90deg);
-        }
-
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 0.9rem;
-        }
-
-        input {
-            width: 100%;
-            padding: 0.75rem 1rem;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            color: #fff;
-            font-size: 1rem;
-            transition: all 0.3s ease;
-        }
-
-        input:focus {
-            outline: none;
-            border-color: #00D4FF;
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
-        }
-
-        .add-btn {
-            width: 100%;
-            padding: 1rem;
-            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 100%);
-            border: none;
-            border-radius: 10px;
-            color: #fff;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .add-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 20px rgba(0, 212, 255, 0.5);
-        }
-
-        /* Empty state */
-        .empty-state {
-            text-align: center;
-            padding: 4rem 2rem;
-        }
-
-        .empty-state p {
-            font-size: 1.2rem;
-            color: rgba(255, 255, 255, 0.5);
-            margin-bottom: 2rem;
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            h1 {
-                font-size: 2rem;
-            }
-            
-            .exams-grid {
-                grid-template-columns: 1fr;
-            }
-            
-            .countdown {
-                font-size: 2.5rem;
-            }
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0A0A0B 0%, #141419 100%); min-height: 100vh; color: #fff; overflow-x: hidden; position: relative; }
+        .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
+        .particle { position: absolute; width: 4px; height: 4px; background: radial-gradient(circle, rgba(0, 212, 255, 0.5) 0%, transparent 70%); border-radius: 50%; animation: float 20s infinite linear; }
+        @keyframes float { from { transform: translateY(100vh) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(-100vh) translateX(100px); opacity: 0; } }
+        .container { max-width: 1200px; margin: 0 auto; padding: 2rem; position: relative; z-index: 2; }
+        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
+        h1 { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #00D4FF 0%, #FF0080 50%, #00FF88 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(0, 212, 255, 0.5); }
+        .settings-btn { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
+        .settings-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: #00D4FF; box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); transform: scale(1.05); }
+        .settings-btn svg { width: 24px; height: 24px; fill: #00D4FF; }
+        .exams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
+        .exam-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2rem; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; }
+        .exam-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #00D4FF, #FF0080, #00FF88, #00D4FF); border-radius: 20px; opacity: 0; z-index: -1; transition: opacity 0.3s ease; }
+        .exam-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); }
+        .exam-card:hover::before { opacity: 0.5; }
+        .exam-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #fff; }
+        .countdown { font-size: 3rem; font-weight: 700; color: #00D4FF; text-shadow: 0 0 20px rgba(0, 212, 255, 0.8); margin-bottom: 0.5rem; }
+        .countdown-label { font-size: 1rem; color: rgba(255, 255, 255, 0.7); }
+        .exam-date { font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); margin-top: 1rem; }
+        .delete-btn { position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px; background: rgba(255, 0, 128, 0.2); border: 1px solid rgba(255, 0, 128, 0.5); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; opacity: 0; }
+        .exam-card:hover .delete-btn { opacity: 1; }
+        .delete-btn:hover { background: rgba(255, 0, 128, 0.4); transform: scale(1.1); }
+        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; align-items: center; justify-content: center; padding: 2rem; }
+        .modal.active { display: flex; }
+        .modal-content { background: rgba(20, 20, 25, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+        .modal-title { font-size: 1.5rem; font-weight: 600; }
+        .close-btn { width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
+        .close-btn:hover { transform: rotate(90deg); }
+        .form-group { margin-bottom: 1.5rem; }
+        label { display: block; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; }
+        input { width: 100%; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: #fff; font-size: 1rem; transition: all 0.3s ease; }
+        input:focus { outline: none; border-color: #00D4FF; box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); }
+        .add-btn { width: 100%; padding: 1rem; background: linear-gradient(135deg, #00D4FF 0%, #FF0080 100%); border: none; border-radius: 10px; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
+        .add-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0, 212, 255, 0.5); }
+        .empty-state { text-align: center; padding: 4rem 2rem; }
+        .empty-state p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 2rem; }
+        @media (max-width: 768px) { h1 { font-size: 2rem; } .exams-grid { grid-template-columns: 1fr; } .countdown { font-size: 2.5rem; } }
     </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="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;">
-            <p>No exams scheduled yet. Click the + button to add your first exam!</p>
-        </div>
+        <div class="empty-state" id="emptyState" style="display: none;"><p>No exams scheduled yet. Click the + button to add your first exam!</p></div>
     </div>
     <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 width="24" height="24" viewBox="0 0 24 24" fill="#fff">
-                        <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="modal-header"><h2 class="modal-title">Add New Exam</h2><button class="close-btn" id="closeModalBtn"><svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"><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., Physics Final">
-                </div>
-                <div class="form-group">
-                    <label for="examDate">Exam Date</label>
-                    <input type="date" id="examDate" required>
-                </div>
+                <div class="form-group"><label for="examName">Exam Name</label><input type="text" id="examName" required placeholder="e.g., Physics 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>
 
     <script type="module">
-        // Import the functions you need from the SDKs you need
         import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-app.js";
         import { getDatabase, ref, onValue, push, remove, child } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-database.js";
 
-        // Your web app's Firebase configuration
         const firebaseConfig = {
             apiKey: "AIzaSyCBGYdGdPjYJiKsTMjVYZ9mf9F82ns7g4Q",
             authDomain: "pikachu-rxppbp.firebaseapp.com",
@@ -396,12 +79,10 @@
             appId: "1:241970333280:web:704e8930bd591c138d6505"
         };
 
-        // Initialize Firebase
         const app = initializeApp(firebaseConfig);
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
 
-        // --- DOM Elements ---
         const openModalBtn = document.getElementById('openModalBtn');
         const closeModalBtn = document.getElementById('closeModalBtn');
         const modal = document.getElementById('modal');
@@ -409,67 +90,51 @@
         const examNameInput = document.getElementById('examName');
         const examDateInput = document.getElementById('examDate');
 
-        // --- Particle Background ---
         function createParticles() {
-            const particlesContainer = document.getElementById('particles');
-            if (particlesContainer.children.length > 0) return;
+            const container = document.getElementById('particles');
+            if (container.children.length > 0) return;
             for (let i = 0; i < 50; i++) {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 20 + 's';
-                particle.style.animationDuration = (15 + Math.random() * 10) + 's';
-                particlesContainer.appendChild(particle);
+                const p = document.createElement('div');
+                p.className = 'particle';
+                p.style.left = `${Math.random() * 100}%`;
+                p.style.animationDelay = `${Math.random() * 20}s`;
+                p.style.animationDuration = `${15 + Math.random() * 10}s`;
+                container.appendChild(p);
             }
         }
 
-        // --- Modal ---
         function openModal() { modal.classList.add('active'); }
         function closeModal() { modal.classList.remove('active'); addExamForm.reset(); }
 
-        // --- Firebase Data Operations ---
         function addExam(event) {
             event.preventDefault();
-            const newExam = { name: examNameInput.value, date: examDateInput.value };
-            push(examsRef, newExam);
+            push(examsRef, { name: examNameInput.value, date: examDateInput.value });
             closeModal();
         }
 
-        function deleteExam(id) {
-            remove(child(examsRef, id));
-        }
+        function deleteExam(id) { remove(child(examsRef, id)); }
 
-        // --- Rendering Logic ---
         function calculateDaysUntil(examDate) {
             const today = new Date();
             today.setHours(0, 0, 0, 0);
-            const exam = new Date(examDate);
-            return Math.ceil((exam - today) / (1000 * 60 * 60 * 24));
+            return Math.ceil((new Date(examDate) - today) / 86400000);
         }
 
         function renderExams(examsList) {
             const grid = document.getElementById('examsGrid');
             const emptyState = document.getElementById('emptyState');
             grid.innerHTML = '';
-            
-            if (!examsList || examsList.length === 0) {
-                emptyState.style.display = 'block';
-                return;
-            }
-            
-            emptyState.style.display = 'none';
-            const sortedExams = [...examsList].sort((a, b) => new Date(a.date) - new Date(b.date));
-            
-            sortedExams.forEach(exam => {
+            emptyState.style.display = (!examsList || examsList.length === 0) ? 'block' : 'none';
+            if (!examsList) return;
+
+            examsList.sort((a, b) => new Date(a.date) - new Date(b.date)).forEach(exam => {
                 const daysUntil = calculateDaysUntil(exam.date);
                 const card = document.createElement('div');
                 card.className = 'exam-card';
-                let color = daysUntil <= 3 ? '#FF0080' : (daysUntil <= 7 ? '#00FF88' : '#00D4FF');
+                const color = daysUntil <= 3 ? '#FF0080' : (daysUntil <= 7 ? '#00FF88' : '#00D4FF');
                 
                 card.innerHTML = `
-                    <div class="delete-btn">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF0080"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                    </div>
+                    <div class="delete-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="#FF0080"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></div>
                     <h3 class="exam-name">${exam.name}</h3>
                     <div class="countdown" style="color: ${color}; text-shadow: 0 0 20px ${color}80;">${daysUntil}</div>
                     <div class="countdown-label">days remaining</div>
@@ -481,64 +146,43 @@
         }
         
         // ===================================================================================
-        // ONE-TIME MANUAL IMPORT FUNCTION
+        // START: ONE-TIME MANUAL IMPORT FUNCTION
         // TO USE: Open developer console (F12) and type `runManualImport()` then press Enter.
         // AFTER RUNNING ONCE, DELETE THIS ENTIRE FUNCTION.
         // ===================================================================================
         window.runManualImport = function() {
-            const localExamsJSON = localStorage.getItem('exams');
-            if (!localExamsJSON) {
-                console.log("No data found in LocalStorage. Nothing to import.");
-                return;
-            }
+            const dataToImport = [{"name":"NSEA","date":"2025-11-22"},{"name":"NSEP","date":"2025-11-23"},{"name":"IMO ","date":"2025-11-28"},{"name":"NSO ","date":"2025-12-11"},{"name":"IEO ","date":"2025-11-26"},{"name":"Mathematics Boards","date":"2026-02-17"},{"name":"Science Boards","date":"2026-02-25"},{"name":"ISSO ","date":"2025-11-20"},{"name":"Periodic Test 2","date":"2025-11-03"},{"name":"Pre-Boards 2 ","date":"2026-01-19"},{"name":"Pre-Boards 1","date":"2025-12-29"},{"name":"English Boards","date":"2026-02-21"},{"name":"IT Boards","date":"2026-02-27"},{"name":"Hindi Boards","date":"2026-03-02"},{"name":"Social Science Boards","date":"2026-03-07"}];
 
-            try {
-                const localExams = JSON.parse(localExamsJSON);
-                if (Array.isArray(localExams) && localExams.length > 0) {
-                    console.log(`Found ${localExams.length} exams in LocalStorage. Importing...`);
-                    
-                    const importPromises = localExams.map(exam => {
-                        const examToPush = { name: exam.name, date: exam.date };
-                        return push(examsRef, examToPush);
-                    });
+            console.log(`Starting import of ${dataToImport.length} exams...`);
 
-                    Promise.all(importPromises).then(() => {
-                        console.log("SUCCESS: All exams have been imported to Firebase.");
-                        alert("Import complete! Your data is now in Firebase. You can now delete the runManualImport function from your code.");
-                    });
-                } else {
-                    console.log("LocalStorage data is empty or invalid. Nothing to import.");
-                }
-            } catch (error) {
-                console.error("FAILED to parse or import from LocalStorage:", error);
-                alert("Import failed. Check the console for errors.");
-            }
+            const importPromises = dataToImport.map(exam => push(examsRef, { name: exam.name, date: exam.date }));
+
+            Promise.all(importPromises)
+                .then(() => {
+                    console.log("SUCCESS: All exams have been imported to Firebase.");
+                    alert("Import complete! Your data is now in Firebase. You can now delete the `runManualImport` function from your code.");
+                })
+                .catch(error => {
+                    console.error("IMPORT FAILED:", error);
+                    alert("An error occurred during import. Check the console for details.");
+                });
         };
         // ===================================================================================
         // END OF IMPORT FUNCTION - REMOVE AFTER USE
         // ===================================================================================
 
-        // --- INITIALIZATION & EVENT LISTENERS ---
         createParticles();
         examDateInput.min = new Date().toISOString().split('T')[0];
-
         openModalBtn.addEventListener('click', openModal);
         closeModalBtn.addEventListener('click', closeModal);
         addExamForm.addEventListener('submit', addExam);
-        window.addEventListener('click', (event) => {
-            if (event.target === modal) closeModal();
-        });
+        window.addEventListener('click', e => { if (e.target === modal) closeModal(); });
 
-        // Real-time listener for Firebase data
         onValue(examsRef, (snapshot) => {
-            const examsData = snapshot.val();
-            const examsList = [];
-            for (let id in examsData) {
-                examsList.push({ id, ...examsData[id] });
-            }
-            renderExams(examsList);
+            const data = snapshot.val();
+            const list = data ? Object.entries(data).map(([id, value]) => ({ id, ...value })) : [];
+            renderExams(list);
         });
-        
     </script>
 </body>
 </html>