Update index.html

index.html

@@ -169,4 +169,91 @@
             <h2 id="syllTitle" style="color: var(--brass); font-weight: 300;"></h2>
             <form id="syllForm">
                 <textarea id="syllArea" rows="12" placeholder="ENTRY_DATA..."></textarea>
-                <input type="hidden" id="syllI
+                <input type="hidden" id="syllId">
+                <button type="submit" class="action-btn">SAVE_CHANGES</button>
+            </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",
+            databaseURL: "https://pikachu-rxppbp.firebaseio.com",
+            projectId: "pikachu-rxppbp",
+            storageBucket: "pikachu-rxppbp.appspot.com",
+            messagingSenderId: "241970333280",
+            appId: "1:241970333280:web:704e8930bd591c138d6505"
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const database = getDatabase(app);
+        const examsRef = ref(database, 'exams');
+        let dataStore = [];
+
+        onValue(examsRef, (snapshot) => {
+            const data = snapshot.val();
+            dataStore = data ? Object.entries(data).map(([id, v]) => ({ id, ...v })) : [];
+            render();
+        });
+
+        function render() {
+            const grid = document.getElementById('examsGrid');
+            grid.innerHTML = dataStore.sort((a,b)=>a.date-b.date).map(e => {
+                const now = new Date(); now.setHours(0,0,0,0);
+                const target = new Date(e.date); target.setHours(0,0,0,0);
+                const diff = Math.ceil((target - now) / 86400000);
+                
+                let val = diff < 0 ? 'OK' : diff;
+                let label = diff < 0 ? 'COMPLETED' : (diff === 1 ? 'DAY LEFT' : 'DAYS LEFT');
+
+                return `
+                <div class="brushed-plate" onclick="showSyll('${e.id}')">
+                    <button class="del" onclick="event.stopPropagation(); window.delEx('${e.id}')">×</button>
+                    <div class="card-header">${e.name}</div>
+                    <div>
+                        <div class="digit-flipper">${val}</div>
+                        <div class="label-text">${label}</div>
+                    </div>
+                    <footer>${new Date(e.date).toDateString()}</footer>
+                </div>`;
+            }).join('');
+        }
+
+        window.delEx = (id) => { if(confirm("Delete entry?")) remove(ref(database, `exams/${id}`)); };
+
+        window.showSyll = (id) => {
+            const e = dataStore.find(x => x.id === id);
+            document.getElementById('syllTitle').innerText = e.name;
+            document.getElementById('syllArea').value = e.syllabus || '';
+            document.getElementById('syllId').value = id;
+            document.getElementById('syllModal').classList.add('active');
+        };
+
+        document.getElementById('openBtn').onclick = () => document.getElementById('addModal').classList.add('active');
+        window.onclick = (e) => { if(e.target.classList.contains('modal')) e.target.classList.remove('active'); };
+        
+        document.getElementById('addForm').onsubmit = (e) => {
+            e.preventDefault();
+            push(examsRef, { 
+                name: document.getElementById('nameIn').value, 
+                date: new Date(document.getElementById('dateIn').value).getTime(), 
+                syllabus: '' 
+            });
+            document.getElementById('addModal').classList.remove('active');
+            document.getElementById('addForm').reset();
+        };
+
+        document.getElementById('syllForm').onsubmit = (e) => {
+            e.preventDefault();
+            update(ref(database, `exams/${document.getElementById('syllId').value}`), { 
+                syllabus: document.getElementById('syllArea').value 
+            });
+            document.getElementById('syllModal').classList.remove('active');
+        };
+    </script>
+</body>
+</html>