Spaces:

SolarumAsteridion
/

ExamTimer

Running

App Files Files Community

SolarumAsteridion commited on Nov 2

Commit

1eac0d3

verified ·

1 Parent(s): 01baaf3

Update index.html

Browse files

Files changed (1) hide show

index.html +110 -87

index.html CHANGED Viewed

@@ -341,40 +341,32 @@
     </style>
 </head>
 <body>
-    <!-- Animated particles background -->
     <div class="particles" id="particles"></div>
     <div class="container">
         <div class="header">
             <h1>Exam Countdown</h1>
-            <div class="settings-btn" onclick="openModal()">
                 <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">
-            <!-- Exam cards will be inserted here -->
-        </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>
-    <!-- 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" onclick="closeModal()">
                     <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 onsubmit="addExam(event)">
                 <div class="form-group">
                     <label for="examName">Exam Name</label>
                     <input type="text" id="examName" required placeholder="e.g., Physics Final">
@@ -388,10 +380,39 @@
         </div>
     </div>
-    <script>
-        // Initialize particles
         function createParticles() {
             const particlesContainer = document.getElementById('particles');
             for (let i = 0; i < 50; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'particle';
@@ -402,120 +423,122 @@
             }
         }
-        // Load exams from localStorage
-        let exams = JSON.parse(localStorage.getItem('exams')) || [];
-        // Modal functions
-        function openModal() {
-            document.getElementById('modal').classList.add('active');
-        }
-        function closeModal() {
-            document.getElementById('modal').classList.remove('active');
-            document.getElementById('examName').value = '';
-            document.getElementById('examDate').value = '';
-        }
-        // Add exam
         function addExam(event) {
             event.preventDefault();
-            const name = document.getElementById('examName').value;
-            const date = document.getElementById('examDate').value;
-            const exam = {
-                id: Date.now(),
-                name,
-                date
-            };
-            exams.push(exam);
-            localStorage.setItem('exams', JSON.stringify(exams));
             closeModal();
-            renderExams();
         }
-        // Delete exam
         function deleteExam(id) {
-            exams = exams.filter(exam => exam.id !== id);
-            localStorage.setItem('exams', JSON.stringify(exams));
-            renderExams();
         }
-        // Calculate days until exam
         function calculateDaysUntil(examDate) {
             const today = new Date();
             const exam = new Date(examDate);
-            const diffTime = exam - today;
-            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-            return diffDays;
         }
-        // Render exams
-        function renderExams() {
             const grid = document.getElementById('examsGrid');
             const emptyState = document.getElementById('emptyState');
             grid.innerHTML = '';
-            if (exams.length === 0) {
                 emptyState.style.display = 'block';
                 return;
             }
             emptyState.style.display = 'none';
-            // Sort exams by date
-            const sortedExams = [...exams].sort((a, b) => new Date(a.date) - new Date(b.date));
             sortedExams.forEach(exam => {
                 const daysUntil = calculateDaysUntil(exam.date);
                 const card = document.createElement('div');
                 card.className = 'exam-card';
-                let countdownColor = '#00D4FF';
-                if (daysUntil <= 3) countdownColor = '#FF0080';
-                else if (daysUntil <= 7) countdownColor = '#00FF88';
                 card.innerHTML = `
-                    <div class="delete-btn" onclick="deleteExam(${exam.id})">
-                        <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: ${countdownColor}; text-shadow: 0 0 20px ${countdownColor}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>
-                `;
                 grid.appendChild(card);
             });
         }
-        // Set minimum date to today
-        document.getElementById('examDate').min = new Date().toISOString().split('T')[0];
-        // Initialize
         createParticles();
-        renderExams();
-        // Update countdown every day
-        setInterval(renderExams, 86400000);
-        // Close modal on outside click
-        window.onclick = function(event) {
-            const modal = document.getElementById('modal');
-            if (event.target === modal) {
-                closeModal();
             }
-        }
     </script>
 </body>
 </html>

     </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;">
             <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>
+            <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>
+    <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",
+            databaseURL: "https://pikachu-rxppbp.firebaseio.com",
+            projectId: "pikachu-rxppbp",
+            storageBucket: "pikachu-rxppbp.appspot.com",
+            messagingSenderId: "241970333280",
+            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');
+        const addExamForm = document.getElementById('addExamForm');
+        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;
             for (let i = 0; i < 50; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'particle';
             }
         }
+        // --- 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);
             closeModal();
         }
         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));
         }
+        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 => {
                 const daysUntil = calculateDaysUntil(exam.date);
                 const card = document.createElement('div');
                 card.className = 'exam-card';
+                let 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);
             });
         }
+        // ===================================================================================
+        // 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;
+            }
+            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);
+                    });
+                    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.");
+            }
+        };
+        // ===================================================================================
+        // 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();
+        });
+        // 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);
+        });
     </script>
 </body>
 </html>