Spaces:

SolarumAsteridion
/

ExamTimer

Running

App Files Files Community

SolarumAsteridion commited on Nov 2

Commit

ff8268d

verified ·

1 Parent(s): 42d2284

Update index.html

Browse files

Files changed (1) hide show

index.html +82 -73

index.html CHANGED Viewed

@@ -19,11 +19,9 @@
         .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; }
@@ -36,15 +34,10 @@
         .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>
@@ -66,9 +59,11 @@
     </div>
     <script type="module">
-        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";
         const firebaseConfig = {
             apiKey: "AIzaSyCBGYdGdPjYJiKsTMjVYZ9mf9F82ns7g4Q",
             authDomain: "pikachu-rxppbp.firebaseapp.com",
@@ -79,109 +74,123 @@
             appId: "1:241970333280:web:704e8930bd591c138d6505"
         };
         const app = initializeApp(firebaseConfig);
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
-        const openModalBtn = document.getElementById('openModalBtn');
-        const closeModalBtn = document.getElementById('closeModalBtn');
-        const modal = document.getElementById('modal');
-        const addExamForm = document.getElementById('addExamForm');
-        const examNameInput = document.getElementById('examName');
-        const examDateInput = document.getElementById('examDate');
-        function createParticles() {
-            const container = document.getElementById('particles');
-            if (container.children.length > 0) return;
-            for (let i = 0; i < 50; i++) {
-                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);
-            }
-        }
-        function openModal() { modal.classList.add('active'); }
-        function closeModal() { modal.classList.remove('active'); addExamForm.reset(); }
-        function addExam(event) {
             event.preventDefault();
-            push(examsRef, { name: examNameInput.value, date: examDateInput.value });
             closeModal();
-        }
-        function deleteExam(id) { remove(child(examsRef, id)); }
-        function calculateDaysUntil(examDate) {
             const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            return Math.ceil((new Date(examDate) - today) / 86400000);
-        }
-        function renderExams(examsList) {
-            const grid = document.getElementById('examsGrid');
-            const emptyState = document.getElementById('emptyState');
-            grid.innerHTML = '';
-            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';
                 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>
                     <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>
                     <div class="exam-date">${new Date(exam.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>`;
                 card.querySelector('.delete-btn').addEventListener('click', () => deleteExam(exam.id));
-                grid.appendChild(card);
             });
-        }
         // ===================================================================================
         // 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 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"}];
-            console.log(`Starting import of ${dataToImport.length} exams...`);
-            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
         // ===================================================================================
         createParticles();
-        examDateInput.min = new Date().toISOString().split('T')[0];
-        openModalBtn.addEventListener('click', openModal);
-        closeModalBtn.addEventListener('click', closeModal);
-        addExamForm.addEventListener('submit', addExam);
-        window.addEventListener('click', e => { if (e.target === modal) closeModal(); });
         onValue(examsRef, (snapshot) => {
             const data = snapshot.val();
-            const list = data ? Object.entries(data).map(([id, value]) => ({ id, ...value })) : [];
-            renderExams(list);
         });
     </script>
 </body>

         .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:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); }
         .exam-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #fff; }
+        .countdown { font-size: 3rem; font-weight: 700; 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; }
         .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); }
         .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; }
     </style>
 </head>
 <body>
     </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";
+        // Your web app's Firebase configuration
         const firebaseConfig = {
             apiKey: "AIzaSyCBGYdGdPjYJiKsTMjVYZ9mf9F82ns7g4Q",
             authDomain: "pikachu-rxppbp.firebaseapp.com",
             appId: "1:241970333280:web:704e8930bd591c138d6505"
         };
+        // Initialize Firebase and Database
         const app = initializeApp(firebaseConfig);
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
+        // DOM Element References
+        const elements = {
+            openModalBtn: document.getElementById('openModalBtn'),
+            closeModalBtn: document.getElementById('closeModalBtn'),
+            modal: document.getElementById('modal'),
+            addExamForm: document.getElementById('addExamForm'),
+            examNameInput: document.getElementById('examName'),
+            examDateInput: document.getElementById('examDate'),
+            examsGrid: document.getElementById('examsGrid'),
+            emptyState: document.getElementById('emptyState'),
+            particlesContainer: document.getElementById('particles')
+        };
+        // --- Core Functions ---
+        const openModal = () => elements.modal.classList.add('active');
+        const closeModal = () => {
+            elements.modal.classList.remove('active');
+            elements.addExamForm.reset();
+        };
+        const addExam = (event) => {
             event.preventDefault();
+            const newExam = {
+                name: elements.examNameInput.value,
+                date: elements.examDateInput.value
+            };
+            push(examsRef, newExam).catch(err => console.error("Failed to add exam:", err));
             closeModal();
+        };
+        const deleteExam = (id) => {
+            if (!id) return;
+            remove(ref(database, `exams/${id}`)).catch(err => console.error("Failed to delete exam:", err));
+        };
+        // --- Rendering ---
+        const calculateDaysUntil = (examDate) => {
             const today = new Date();
+            today.setHours(0, 0, 0, 0); // Normalize to midnight
+            return Math.ceil((new Date(examDate) - today) / 86400000); // 1000*60*60*24
+        };
+        const renderExams = (exams) => {
+            elements.examsGrid.innerHTML = '';
+            const hasExams = exams && exams.length > 0;
+            elements.emptyState.style.display = hasExams ? 'none' : 'block';
+            if (!hasExams) return;
+            exams.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';
                 const color = daysUntil <= 3 ? '#FF0080' : (daysUntil <= 7 ? '#00FF88' : '#00D4FF');
                 card.innerHTML = `
+                    <div class="delete-btn" title="Delete Exam"><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};">${daysUntil}</div>
                     <div class="countdown-label">days remaining</div>
                     <div class="exam-date">${new Date(exam.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>`;
                 card.querySelector('.delete-btn').addEventListener('click', () => deleteExam(exam.id));
+                elements.examsGrid.appendChild(card);
             });
+        };
+        // --- Particle Effect ---
+        const createParticles = () => {
+            if (elements.particlesContainer.children.length > 0) return;
+            let particleHtml = '';
+            for (let i = 0; i < 50; i++) {
+                const style = `left:${Math.random()*100}%;animation-delay:${Math.random()*20}s;animation-duration:${15+Math.random()*10}s;`;
+                particleHtml += `<div class="particle" style="${style}"></div>`;
+            }
+            elements.particlesContainer.innerHTML = particleHtml;
+        };
         // ===================================================================================
         // 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 FROM YOUR CODE.
         // ===================================================================================
         window.runManualImport = function() {
+            const data = [{"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"}];
+            console.log(`Starting import of ${data.length} exams...`);
+            const promises = data.map(exam => push(examsRef, { name: exam.name, date: exam.date }));
+            Promise.all(promises)
+                .then(() => alert(`Successfully imported ${data.length} exams to Firebase.`))
+                .catch(err => console.error("IMPORT FAILED:", err));
         };
         // ===================================================================================
         // END OF IMPORT FUNCTION - REMOVE AFTER USE
         // ===================================================================================
+        // --- App Initialization ---
         createParticles();
+        elements.examDateInput.min = new Date().toISOString().split('T')[0];
+        // Event 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(); });
+        // 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. Check console for errors and verify database rules.");
         });
     </script>
 </body>