Spaces:

SolarumAsteridion
/

ExamTimer

Running

App Files Files Community

SolarumAsteridion commited on Dec 17, 2025

Commit

4898051

verified ·

1 Parent(s): 1e9ce14

Update index.html

Browse files

Files changed (1) hide show

index.html +101 -172

index.html CHANGED Viewed

@@ -3,151 +3,112 @@
 <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>
@@ -169,83 +130,51 @@
         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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Industrial Exam Tracker</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=Space+Grotesk:wght@300;700&display=swap" rel="stylesheet">
 <style>
+    :root { --metal: #1a1a1c; --brass: #c5a059; --etch: #4a4a4f; }
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
+        background: #0a0a0b;
         color: #fff;
+        font-family: 'Space Grotesk', sans-serif;
         min-height: 100vh;
+        padding: 40px;
     }
+    .container { max-width: 1200px; margin: 0 auto; }
+    header { border-bottom: 2px solid var(--etch); padding-bottom: 20px; margin-bottom: 50px; display: flex; justify-content: space-between; align-items: center; }
+    h1 { font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); }
+    .add-btn {
+        background: none; border: 1px solid var(--brass); color: var(--brass);
+        padding: 10px 25px; cursor: pointer; font-family: inherit; font-size: 0.8rem;
+        transition: 0.3s;
     }
+    .add-btn:hover { background: var(--brass); color: #000; }
     /* Grid */
+    .exams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 40px; }
+    /* Industrial Card */
+    .brushed-plate {
+        position: relative; padding: 40px;
+        background: linear-gradient(135deg, #222, #111);
+        border: 2px solid var(--etch);
+        box-shadow: 15px 15px 40px #000, inset 1px 1px 0px rgba(255,255,255,0.05);
+        border-radius: 4px;
+        transition: 0.3s;
         cursor: pointer;
     }
+    .brushed-plate:hover { transform: scale(1.02); border-color: var(--brass); }
+    .rotating-bezel {
+        position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px;
+        border: 1px dashed var(--brass); border-radius: 8px; opacity: 0.15;
+        animation: rotate 20s linear infinite; pointer-events: none;
     }
+    @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+    .card-header { font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--etch); padding-bottom: 15px; color: var(--brass); font-size: 0.9rem; }
+    .digit-flipper { font-size: 8rem; font-weight: 700; line-height: 0.8; margin: 30px 0; color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.1); }
+    .digit-flipper small { display: block; font-size: 0.9rem; letter-spacing: 0.4em; margin-top: 15px; opacity: 0.4; }
+    footer { font-family: monospace; opacity: 0.3; letter-spacing: 1px; font-size: 0.8rem; margin-top: 20px; text-transform: uppercase; }
+    /* Delete */
+    .del { position: absolute; top: 15px; right: 15px; color: var(--etch); background: none; border: none; cursor: pointer; font-size: 1.2rem; }
+    .del:hover { color: #ff4b2b; }
+    /* Modal */
+    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 100; align-items: center; justify-content: center; }
+    .modal.active { display: flex; }
+    .modal-box { background: #1a1a1c; border: 2px solid var(--etch); padding: 40px; width: 100%; max-width: 500px; position: relative; }
+    input, textarea { width: 100%; background: #000; border: 1px solid var(--etch); padding: 15px; color: #fff; font-family: inherit; margin: 15px 0; outline: none; }
+    input:focus { border-color: var(--brass); }
+    .action-btn { background: var(--brass); color: #000; border: none; padding: 15px; width: 100%; font-weight: 700; cursor: pointer; text-transform: uppercase; }
+    @media (max-width: 500px) {
         .exams-grid { grid-template-columns: 1fr; }
+        .digit-flipper { font-size: 6rem; }
     }
 </style>
 </head>
 <body>
     <div class="container">
         <header>
+            <h1>SYSTEM.EXAMS</h1>
+            <button class="add-btn" id="openBtn">INSTANTIATE NEW</button>
         </header>
         <div id="examsGrid" class="exams-grid"></div>
     </div>
+    <div class="modal" id="addModal">
+        <div class="modal-box">
+            <h2 style="color: var(--brass); letter-spacing: 3px;">ADD_ENTRY</h2>
+            <form id="addForm">
+                <input type="text" id="nameIn" placeholder="IDENTIFIER" required>
+                <input type="date" id="dateIn" required>
+                <button type="submit" class="action-btn">COMMIT</button>
             </form>
         </div>
     </div>
+    <div class="modal" id="syllModal">
+        <div class="modal-box" style="max-width: 700px;">
+            <h2 id="syllTitle" style="color: var(--brass);"></h2>
+            <form id="syllForm">
+                <textarea id="syllArea" rows="12" placeholder="TOPICS_LIST..."></textarea>
+                <input type="hidden" id="syllId">
+                <button type="submit" class="action-btn">SAVE_DATA</button>
             </form>
         </div>
     </div>
         const app = initializeApp(firebaseConfig);
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
+        let dataStore = [];
+        onValue(examsRef, (s) => {
+            const d = s.val();
+            dataStore = d ? Object.entries(d).map(([id, v]) => ({ id, ...v })) : [];
+            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);
+                const val = diff < 0 ? 'OK' : diff;
+                const label = diff < 0 ? 'COMPLETED' : 'DAYS LEFT';
                 return `
+                <div class="brushed-plate" onclick="showSyll('${e.id}')">
+                    <div class="rotating-bezel"></div>
+                    <button class="del" onclick="event.stopPropagation(); window.delEx('${e.id}')">×</button>
+                    <div class="card-header">${e.name}</div>
+                    <div class="digit-flipper">${val}<small>${label}</small></div>
+                    <footer>${new Date(e.date).toDateString()}</footer>
                 </div>`;
             }).join('');
+        });
+        window.delEx = (id) => 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('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>