Spaces:

SolarumAsteridion
/

ExamTimer

Running

App Files Files Community

SolarumAsteridion commited on 4 days ago

Commit

ee9a3f3

verified ·

1 Parent(s): 7fa47a9

Update index.html

Browse files

Files changed (1) hide show

index.html +128 -57

index.html CHANGED Viewed

@@ -3,16 +3,17 @@
 <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: #0a0a0b;
-        --brass: #c5a059;
-        --etch: #2a2a2c;
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -23,6 +24,17 @@
         font-family: 'Space Grotesk', sans-serif;
         min-height: 100vh;
         padding: 40px;
     }
     .container { width: 100%; max-width: 100%; }
@@ -36,118 +48,156 @@
         align-items: center;
     }
-    h1 { font-weight: 300; letter-spacing: 0.4em; text-transform: uppercase; color: var(--brass); font-size: 1.2rem; }
     .add-btn {
-        background: none; border: 1px solid var(--brass); color: var(--brass);
-        padding: 12px 30px; cursor: pointer; font-family: inherit; font-size: 0.8rem;
-        transition: 0.3s; letter-spacing: 2px;
     }
-    .add-btn:hover { background: var(--brass); color: #000; }
-    /* Grid with large spacing */
     .exams-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-        gap: 60px; /* Increased spacing */
         width: 100%;
     }
-    /* 4x3 Rectangular Plate */
     .brushed-plate {
         position: relative;
-        background: #111;
         border: 1px solid var(--etch);
-        box-shadow: 20px 20px 60px rgba(0,0,0,0.5);
-        padding: 40px;
-        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
         cursor: pointer;
-        aspect-ratio: 4 / 3; /* 4x width, 3x height */
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }
     .brushed-plate:hover {
         border-color: var(--brass);
-        transform: translateY(-10px);
-        background: #161618;
     }
     .card-header {
-        font-weight: 300;
         letter-spacing: 0.2em;
         text-transform: uppercase;
         color: var(--brass);
-        font-size: 1rem;
-        border-left: 3px solid var(--brass);
         padding-left: 15px;
     }
     .digit-flipper {
-        font-size: clamp(5rem, 12vw, 9rem);
         font-weight: 700;
         line-height: 0.8;
         color: #fff;
         margin: 20px 0;
     }
     .label-text {
-        font-size: 0.9rem;
-        letter-spacing: 0.5em;
         opacity: 0.4;
         text-transform: uppercase;
-        margin-top: 10px;
     }
     footer {
         font-family: monospace;
-        opacity: 0.2;
-        letter-spacing: 2px;
-        font-size: 0.8rem;
         text-transform: uppercase;
     }
     .del {
         position: absolute; top: 20px; right: 20px;
-        color: #444; background: none; border: none;
         cursor: pointer; font-size: 1.5rem; transition: 0.3s;
     }
-    .del:hover { color: #ff4b2b; }
     /* Modal Styles */
     .modal {
         display: none; position: fixed; inset: 0;
-        background: rgba(0,0,0,0.9); z-index: 100;
         align-items: center; justify-content: center; padding: 20px;
     }
     .modal.active { display: flex; }
-    .modal-box { background: #111; border: 1px solid var(--etch); padding: 50px; width: 100%; max-width: 600px; }
     input, textarea {
         width: 100%; background: #000; border: 1px solid var(--etch);
         padding: 20px; color: #fff; font-family: inherit;
         margin: 20px 0; outline: none; font-size: 1rem;
     }
-    input:focus, textarea:focus { border-color: var(--brass); }
     .action-btn {
         background: var(--brass); color: #000; border: none;
         padding: 20px; width: 100%; font-weight: 700;
-        cursor: pointer; text-transform: uppercase; letter-spacing: 2px;
     }
-    @media (max-width: 600px) {
-        .exams-grid { grid-template-columns: 1fr; gap: 30px; }
-        body { padding: 20px; }
     }
 </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1>LOG_STORAGE</h1>
-            <button class="add-btn" id="openBtn">NEW_ENTRY</button>
         </header>
         <div id="examsGrid" class="exams-grid"></div>
     </div>
@@ -155,22 +205,22 @@
     <!-- Modals -->
     <div class="modal" id="addModal">
         <div class="modal-box">
-            <h2 style="color: var(--brass); letter-spacing: 4px; font-weight: 300;">INITIALIZE</h2>
             <form id="addForm">
-                <input type="text" id="nameIn" placeholder="IDENTIFIER (e.g. MATH FINAL)" required>
                 <input type="date" id="dateIn" required>
-                <button type="submit" class="action-btn">EXECUTE</button>
             </form>
         </div>
     </div>
     <div class="modal" id="syllModal">
-        <div class="modal-box" style="max-width: 800px;">
-            <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="syllId">
-                <button type="submit" class="action-btn">SAVE_CHANGES</button>
             </form>
         </div>
     </div>
@@ -208,26 +258,47 @@
                 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');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Exam Interface</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: #050506;
+        --brass: #00d4ff; /* Switched to a Sci-Fi Cyan, or keep #c5a059 if you prefer gold */
+        --etch: #1a1a1c;
+        --glow: rgba(0, 212, 255, 0.3);
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
         font-family: 'Space Grotesk', sans-serif;
         min-height: 100vh;
         padding: 40px;
+        overflow-x: hidden;
+    }
+    /* Background Detail */
+    body::before {
+        content: "";
+        position: fixed;
+        top: 0; left: 0; width: 100%; height: 100%;
+        background-image: radial-gradient(circle at 2px 2px, #111 1px, transparent 0);
+        background-size: 40px 40px;
+        z-index: -1;
     }
     .container { width: 100%; max-width: 100%; }
         align-items: center;
     }
+    h1 {
+        font-weight: 300;
+        letter-spacing: 0.5em;
+        text-transform: uppercase;
+        color: var(--brass);
+        font-size: 1.1rem;
+        text-shadow: 0 0 10px var(--glow);
+    }
     .add-btn {
+        background: none;
+        border: 1px solid var(--brass);
+        color: var(--brass);
+        padding: 12px 30px;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 0.75rem;
+        transition: 0.3s;
+        letter-spacing: 3px;
+        box-shadow: inset 0 0 0 0 var(--glow);
+    }
+    .add-btn:hover {
+        background: var(--brass);
+        color: #000;
+        box-shadow: 0 0 20px var(--glow);
     }
+    /* Grid */
     .exams-grid {
         display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+        gap: 80px;
         width: 100%;
+        perspective: 2000px; /* Essential for 3D */
     }
+    /* 4x3 Rectangular Plate with 3D Effect */
     .brushed-plate {
         position: relative;
+        background: #0d0d0f;
         border: 1px solid var(--etch);
+        padding: 45px;
+        transition: transform 0.2s ease-out, border-color 0.3s, box-shadow 0.3s;
         cursor: pointer;
+        aspect-ratio: 4 / 3;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        transform-style: preserve-3d;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
     }
+    /* Hover state - handled by JS for tilt, but fallback here */
     .brushed-plate:hover {
         border-color: var(--brass);
+        box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 15px var(--glow);
+    }
+    /* 3D Inner Elements */
+    .card-content {
+        transform: translateZ(50px); /* Makes content "pop" off the plate */
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        pointer-events: none;
     }
     .card-header {
+        font-weight: 700;
         letter-spacing: 0.2em;
         text-transform: uppercase;
         color: var(--brass);
+        font-size: 0.9rem;
+        border-left: 2px solid var(--brass);
         padding-left: 15px;
     }
     .digit-flipper {
+        font-size: clamp(6rem, 14vw, 10rem);
         font-weight: 700;
         line-height: 0.8;
         color: #fff;
         margin: 20px 0;
+        filter: drop-shadow(0 0 15px rgba(255,255,255,0.1));
     }
     .label-text {
+        font-size: 0.8rem;
+        letter-spacing: 0.6em;
         opacity: 0.4;
         text-transform: uppercase;
     }
     footer {
         font-family: monospace;
+        opacity: 0.6;
+        letter-spacing: 3px;
+        font-size: 1.1rem; /* Larger Date */
         text-transform: uppercase;
+        color: var(--brass);
     }
     .del {
         position: absolute; top: 20px; right: 20px;
+        color: #333; background: none; border: none;
         cursor: pointer; font-size: 1.5rem; transition: 0.3s;
+        z-index: 10;
+        transform: translateZ(20px);
     }
+    .del:hover { color: #ff4b2b; transform: translateZ(30px) scale(1.2); }
     /* Modal Styles */
     .modal {
         display: none; position: fixed; inset: 0;
+        background: rgba(0,0,0,0.95); z-index: 100;
         align-items: center; justify-content: center; padding: 20px;
+        backdrop-filter: blur(10px);
     }
     .modal.active { display: flex; }
+    .modal-box {
+        background: #0d0d0f; border: 1px solid var(--brass);
+        padding: 60px; width: 100%; max-width: 600px;
+        box-shadow: 0 0 50px var(--glow);
+    }
     input, textarea {
         width: 100%; background: #000; border: 1px solid var(--etch);
         padding: 20px; color: #fff; font-family: inherit;
         margin: 20px 0; outline: none; font-size: 1rem;
     }
+    input:focus { border-color: var(--brass); }
     .action-btn {
         background: var(--brass); color: #000; border: none;
         padding: 20px; width: 100%; font-weight: 700;
+        cursor: pointer; text-transform: uppercase; letter-spacing: 4px;
     }
+    @media (max-width: 700px) {
+        .exams-grid { grid-template-columns: 1fr; gap: 40px; }
+        .brushed-plate { aspect-ratio: auto; min-height: 400px; }
     }
 </style>
 </head>
 <body>
     <div class="container">
         <header>
+            <h1>NEURAL_EXAM_INTERFACE_v4.0</h1>
+            <button class="add-btn" id="openBtn">INITIALIZE_DATA_LINK</button>
         </header>
         <div id="examsGrid" class="exams-grid"></div>
     </div>
     <!-- Modals -->
     <div class="modal" id="addModal">
         <div class="modal-box">
+            <h2 style="color: var(--brass); letter-spacing: 5px; font-weight: 300; margin-bottom: 20px;">SYNC_NEW_NODE</h2>
             <form id="addForm">
+                <input type="text" id="nameIn" placeholder="NODE_IDENTIFIER" required>
                 <input type="date" id="dateIn" required>
+                <button type="submit" class="action-btn">ESTABLISH_LINK</button>
             </form>
         </div>
     </div>
     <div class="modal" id="syllModal">
+        <div class="modal-box" style="max-width: 900px;">
+            <h2 id="syllTitle" style="color: var(--brass); font-weight: 300; letter-spacing: 2px;"></h2>
             <form id="syllForm">
+                <textarea id="syllArea" rows="15" placeholder="DECRYPTING_SYLLABUS_DATA..."></textarea>
                 <input type="hidden" id="syllId">
+                <button type="submit" class="action-btn">UPDATE_CORE_MEMORY</button>
             </form>
         </div>
     </div>
                 const diff = Math.ceil((target - now) / 86400000);
                 let val = diff < 0 ? 'OK' : diff;
+                let label = diff < 0 ? 'MISSION_COMPLETE' : (diff === 1 ? 'CYCLE_REMAINING' : 'CYCLES_REMAINING');
                 return `
+                <div class="brushed-plate" onmousemove="tilt(event, this)" onmouseleave="resetTilt(this)" onclick="showSyll('${e.id}')">
                     <button class="del" onclick="event.stopPropagation(); window.delEx('${e.id}')">×</button>
+                    <div class="card-content">
+                        <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).toLocaleDateString('en-US', {month: 'long', day: 'numeric', year: 'numeric'})}</footer>
                     </div>
                 </div>`;
             }).join('');
         }
+        // --- 3D Tilt Logic ---
+        window.tilt = (e, card) => {
+            const rect = card.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            const rotateX = (y - centerY) / 10;
+            const rotateY = (centerX - x) / 10;
+            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
+        };
+        window.resetTilt = (card) => {
+            card.style.transform = `rotateX(0deg) rotateY(0deg) translateY(0px)`;
+        };
+        window.delEx = (id) => { if(confirm("DESTRUCT NODE?")) remove(ref(database, `exams/${id}`)); };
         window.showSyll = (id) => {
             const e = dataStore.find(x => x.id === id);
+            document.getElementById('syllTitle').innerText = `ACCESSING_FILE: ${e.name}`;
             document.getElementById('syllArea').value = e.syllabus || '';
             document.getElementById('syllId').value = id;
             document.getElementById('syllModal').classList.add('active');