Spaces:

SolarumAsteridion
/

ExamTimer

Running

App Files Files Community

SolarumAsteridion commited on Nov 3

Commit

f9e7215

verified ·

1 Parent(s): 7c6653c

Update index.html

Browse files

Files changed (1) hide show

index.html +262 -651

index.html CHANGED Viewed

@@ -3,74 +3,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Neon Exam Countdown</title>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        :root {
-            --neon-pink: #FF006E;
-            --neon-blue: #00D9FF;
-            --neon-purple: #8B39FF;
-            --neon-green: #39FF14;
-            --neon-yellow: #FFFF00;
-            --dark-bg: #0A0A0F;
-        }
         body {
-            font-family: 'Space Grotesk', sans-serif;
-            background: var(--dark-bg);
             min-height: 100vh;
             color: #fff;
             overflow-x: hidden;
-            position: relative;
         }
-        /* Animated gradient background */
-        body::before {
-            content: '';
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background:
-                radial-gradient(circle at 20% 80%, rgba(255, 0, 110, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(0, 217, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 40%, rgba(139, 57, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 90% 70%, rgba(57, 255, 20, 0.05) 0%, transparent 50%);
-            animation: gradientShift 15s ease infinite;
             z-index: 0;
         }
-        @keyframes gradientShift {
-            0%, 100% { transform: rotate(0deg) scale(1); }
-            33% { transform: rotate(120deg) scale(1.1); }
-            66% { transform: rotate(240deg) scale(1.05); }
-        }
-        /* Grid background */
-        body::after {
             content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
-            background-image:
-                linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px);
-            background-size: 50px 50px;
-            animation: gridMove 10s linear infinite;
-            z-index: 0;
-        }
-        @keyframes gridMove {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(50px, 50px); }
         }
-        /* Enhanced particles */
         .particles {
             position: fixed;
             top: 0;
@@ -79,353 +47,246 @@
             height: 100%;
             overflow: hidden;
             z-index: 1;
         }
         .particle {
             position: absolute;
-            border-radius: 50%;
-            pointer-events: none;
-        }
-        .particle.orb {
-            width: 6px;
-            height: 6px;
-            background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
-            box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
-            animation: floatOrb 20s infinite linear;
-        }
-        .particle.star {
             width: 2px;
             height: 2px;
-            background: white;
-            box-shadow: 0 0 6px white;
-            animation: twinkle 3s infinite;
         }
-        @keyframes floatOrb {
             from {
-                transform: translateY(100vh) translateX(0) scale(0);
                 opacity: 0;
             }
-            10% {
                 opacity: 1;
-                transform: translateY(90vh) translateX(10px) scale(1);
             }
-            90% {
                 opacity: 1;
-                transform: translateY(10vh) translateX(-10px) scale(1);
             }
             to {
-                transform: translateY(-100vh) translateX(100px) scale(0);
                 opacity: 0;
             }
         }
-        @keyframes twinkle {
-            0%, 100% { opacity: 0; transform: scale(0.5); }
-            50% { opacity: 1; transform: scale(1); }
-        }
         .container {
-            max-width: 1400px;
             margin: 0 auto;
-            padding: 2rem;
             position: relative;
             z-index: 2;
         }
-        /* Enhanced header */
         .header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 4rem;
-            padding: 2rem 0;
-            position: relative;
-        }
-        .header::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 100%;
-            height: 1px;
-            background: linear-gradient(90deg,
-                transparent,
-                var(--neon-blue) 20%,
-                var(--neon-pink) 50%,
-                var(--neon-purple) 80%,
-                transparent);
-            animation: lineGlow 3s ease-in-out infinite;
-        }
-        @keyframes lineGlow {
-            0%, 100% { opacity: 0.3; }
-            50% { opacity: 1; }
         }
         h1 {
-            font-family: 'Orbitron', monospace;
-            font-size: 3.5rem;
-            font-weight: 900;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            background: linear-gradient(135deg,
-                var(--neon-blue) 0%,
-                var(--neon-pink) 25%,
-                var(--neon-purple) 50%,
-                var(--neon-green) 75%,
-                var(--neon-blue) 100%);
-            background-size: 300% 300%;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            animation: gradientFlow 4s ease infinite;
-            filter: drop-shadow(0 0 30px rgba(0, 217, 255, 0.5))
-                    drop-shadow(0 0 60px rgba(255, 0, 110, 0.3));
-        }
-        @keyframes gradientFlow {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        /* Enhanced settings button */
-        .settings-btn {
-            width: 60px;
-            height: 60px;
-            background: linear-gradient(135deg,
-                rgba(0, 217, 255, 0.1) 0%,
-                rgba(255, 0, 110, 0.1) 100%);
-            backdrop-filter: blur(20px);
-            border: 2px solid transparent;
-            background-origin: border-box;
-            background-clip: padding-box, border-box;
-            border-image: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)) 1;
             border-radius: 16px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            position: relative;
-            overflow: hidden;
-        }
-        .settings-btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
-            transform: translate(-50%, -50%) scale(0);
-            transition: transform 0.5s ease;
-            z-index: -1;
-        }
-        .settings-btn:hover {
-            transform: scale(1.1) rotate(90deg);
-            box-shadow:
-                0 0 30px rgba(0, 217, 255, 0.6),
-                0 0 60px rgba(255, 0, 110, 0.4),
-                inset 0 0 20px rgba(0, 217, 255, 0.2);
-        }
-        .settings-btn:hover::before {
-            transform: translate(-50%, -50%) scale(2);
         }
-        .settings-btn svg {
-            width: 28px;
-            height: 28px;
-            fill: url(#iconGradient);
-            filter: drop-shadow(0 0 10px var(--neon-blue));
-            transition: transform 0.4s ease;
         }
-        .settings-btn:hover svg {
-            transform: rotate(-90deg);
         }
-        /* Enhanced exam grid */
         .exams-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-            gap: 2.5rem;
-            padding: 2rem 0;
         }
-        /* Ultra enhanced exam cards */
         .exam-card {
-            background: linear-gradient(135deg,
-                rgba(0, 217, 255, 0.05) 0%,
-                rgba(255, 0, 110, 0.05) 100%);
-            backdrop-filter: blur(40px) saturate(150%);
-            border: 1px solid transparent;
-            background-origin: border-box;
-            background-clip: padding-box, border-box;
-            border-image: linear-gradient(135deg,
-                rgba(0, 217, 255, 0.3),
-                rgba(255, 0, 110, 0.3)) 1;
             border-radius: 24px;
-            padding: 2.5rem;
-            text-align: center;
-            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             position: relative;
             overflow: hidden;
-            transform-style: preserve-3d;
-            perspective: 1000px;
         }
         .exam-card::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle,
-                rgba(0, 217, 255, 0.1) 0%,
-                transparent 40%);
-            animation: cardPulse 4s ease-in-out infinite;
-            pointer-events: none;
-        }
-        .exam-card::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
-            bottom: 0;
-            background: linear-gradient(105deg,
-                transparent 40%,
-                rgba(255, 255, 255, 0.05) 45%,
-                rgba(255, 255, 255, 0.1) 50%,
-                rgba(255, 255, 255, 0.05) 55%,
-                transparent 60%);
-            transform: translateX(-100%);
-            transition: transform 0.6s;
-            pointer-events: none;
         }
-        @keyframes cardPulse {
-            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
-            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
         }
         .exam-card:hover {
-            transform: translateY(-10px) rotateX(5deg) scale(1.02);
             box-shadow:
-                0 20px 40px rgba(0, 217, 255, 0.3),
-                0 40px 80px rgba(255, 0, 110, 0.2),
-                inset 0 0 30px rgba(0, 217, 255, 0.1);
-            border-image: linear-gradient(135deg,
-                var(--neon-blue),
-                var(--neon-pink)) 1;
-        }
-        .exam-card:hover::after {
-            transform: translateX(100%);
         }
-        .exam-name {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 1.5rem;
-            background: linear-gradient(135deg, #fff 0%, #00D9FF 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            filter: drop-shadow(0 2px 10px rgba(0, 217, 255, 0.5));
-        }
-        .countdown {
-            font-family: 'Orbitron', monospace;
-            font-size: 4rem;
-            font-weight: 900;
-            background: linear-gradient(135deg,
-                var(--neon-blue) 0%,
-                var(--neon-pink) 50%,
-                var(--neon-purple) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-shadow:
-                0 0 40px currentColor,
-                0 0 80px currentColor;
-            margin-bottom: 0.5rem;
-            animation: countdownPulse 2s ease-in-out infinite;
-            letter-spacing: 3px;
         }
-        @keyframes countdownPulse {
-            0%, 100% { transform: scale(1); filter: brightness(1); }
-            50% { transform: scale(1.05); filter: brightness(1.2); }
         }
-        .countdown-label {
-            font-size: 1.1rem;
-            color: rgba(255, 255, 255, 0.9);
-            text-transform: uppercase;
-            letter-spacing: 4px;
-            font-weight: 300;
         }
-        .exam-date {
-            font-size: 0.95rem;
-            color: rgba(0, 217, 255, 0.7);
-            margin-top: 1.5rem;
-            padding: 0.5rem 1rem;
-            background: rgba(0, 217, 255, 0.1);
-            border-radius: 20px;
-            display: inline-block;
-            border: 1px solid rgba(0, 217, 255, 0.3);
         }
-        /* Enhanced delete button */
         .delete-btn {
-            position: absolute;
-            top: 1.5rem;
-            right: 1.5rem;
             width: 36px;
             height: 36px;
-            background: linear-gradient(135deg,
-                rgba(255, 0, 110, 0.2) 0%,
-                rgba(255, 0, 0, 0.2) 100%);
-            border: 2px solid rgba(255, 0, 110, 0.5);
-            border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s ease;
             opacity: 0;
-            transform: scale(0.8);
         }
         .exam-card:hover .delete-btn {
-            opacity: 1;
-            transform: scale(1);
         }
         .delete-btn:hover {
-            background: linear-gradient(135deg,
-                rgba(255, 0, 110, 0.4) 0%,
-                rgba(255, 0, 0, 0.4) 100%);
-            transform: scale(1.2) rotate(90deg);
-            box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
         }
-        /* Enhanced modal */
         .modal {
             display: none;
             position: fixed;
@@ -433,16 +294,16 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.9);
             backdrop-filter: blur(10px);
             z-index: 1000;
             align-items: center;
             justify-content: center;
             padding: 2rem;
-            animation: modalFadeIn 0.3s ease;
         }
-        @keyframes modalFadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
@@ -452,76 +313,49 @@
         }
         .modal-content {
-            background: linear-gradient(135deg,
-                rgba(20, 20, 30, 0.98) 0%,
-                rgba(30, 20, 40, 0.98) 100%);
-            backdrop-filter: blur(40px) saturate(150%);
-            border: 2px solid transparent;
-            background-origin: border-box;
-            background-clip: padding-box, border-box;
-            border-image: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)) 1;
-            border-radius: 30px;
-            padding: 3rem;
             width: 100%;
-            max-width: 500px;
             box-shadow:
-                0 30px 60px rgba(0, 0, 0, 0.5),
-                0 0 100px rgba(0, 217, 255, 0.2),
-                inset 0 0 30px rgba(0, 217, 255, 0.05);
-            animation: modalSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            position: relative;
-            overflow: hidden;
-        }
-        .modal-content::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle,
-                rgba(0, 217, 255, 0.1) 0%,
-                transparent 40%);
-            animation: modalGlow 4s ease-in-out infinite;
         }
         @keyframes modalSlideIn {
-            from { transform: translateY(-50px) scale(0.9); opacity: 0; }
-            to { transform: translateY(0) scale(1); opacity: 1; }
-        }
-        @keyframes modalGlow {
-            0%, 100% { transform: rotate(0deg); }
-            50% { transform: rotate(180deg); }
         }
         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 2.5rem;
-            position: relative;
-            z-index: 1;
         }
         .modal-title {
-            font-size: 2rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-transform: uppercase;
-            letter-spacing: 2px;
         }
         .close-btn {
-            width: 40px;
-            height: 40px;
-            background: rgba(255, 0, 110, 0.1);
-            border: 2px solid rgba(255, 0, 110, 0.3);
-            border-radius: 12px;
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -530,162 +364,123 @@
         }
         .close-btn:hover {
-            transform: rotate(90deg) scale(1.1);
-            background: rgba(255, 0, 110, 0.2);
-            box-shadow: 0 0 20px rgba(255, 0, 110, 0.5);
         }
-        /* Enhanced form */
         .form-group {
-            margin-bottom: 2rem;
-            position: relative;
-            z-index: 1;
         }
         .form-group label {
             display: block;
-            margin-bottom: 0.75rem;
-            font-size: 0.95rem;
-            color: var(--neon-blue);
-            text-transform: uppercase;
-            letter-spacing: 2px;
             font-weight: 500;
         }
         .form-group input {
             width: 100%;
-            padding: 1.2rem;
-            background: rgba(0, 217, 255, 0.05);
-            border: 2px solid rgba(0, 217, 255, 0.2);
             border-radius: 12px;
             color: #fff;
-            font-size: 1.1rem;
             transition: all 0.3s ease;
-            font-family: 'Space Grotesk', sans-serif;
         }
         .form-group input:focus {
             outline: none;
-            border-color: var(--neon-blue);
-            background: rgba(0, 217, 255, 0.1);
-            box-shadow:
-                0 0 20px rgba(0, 217, 255, 0.3),
-                inset 0 0 10px rgba(0, 217, 255, 0.1);
         }
         .form-group input::placeholder {
             color: rgba(255, 255, 255, 0.3);
         }
-        /* Enhanced add button */
-        .add-btn {
             width: 100%;
-            padding: 1.5rem;
-            background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
-            border: none;
-            border-radius: 16px;
             color: #fff;
-            font-size: 1.2rem;
-            font-weight: 700;
             cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            position: relative;
-            overflow: hidden;
-            z-index: 1;
-        }
-        .add-btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            background: radial-gradient(circle,
-                rgba(255, 255, 255, 0.3) 0%,
-                transparent 70%);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
         }
-        .add-btn:hover {
-            transform: translateY(-3px) scale(1.02);
-            box-shadow:
-                0 10px 30px rgba(0, 217, 255, 0.5),
-                0 20px 60px rgba(255, 0, 110, 0.3);
         }
-        .add-btn:hover::before {
-            width: 300px;
-            height: 300px;
         }
-        /* Enhanced empty state */
         .empty-state {
             text-align: center;
             padding: 6rem 2rem;
-            position: relative;
-        }
-        .empty-state::before {
-            content: '📚';
-            font-size: 6rem;
-            display: block;
-            margin-bottom: 2rem;
-            animation: bounce 2s ease-in-out infinite;
         }
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-20px); }
         }
         .empty-state p {
-            font-size: 1.4rem;
-            background: linear-gradient(135deg,
-                rgba(255, 255, 255, 0.8) 0%,
-                rgba(0, 217, 255, 0.8) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 2rem;
-            font-weight: 500;
-        }
-        /* Loading animation */
-        @keyframes shimmer {
-            0% { background-position: -1000px 0; }
-            100% { background-position: 1000px 0; }
         }
         /* Responsive */
         @media (max-width: 768px) {
             h1 { font-size: 2rem; }
-            .countdown { font-size: 3rem; }
             .exams-grid { grid-template-columns: 1fr; }
         }
     </style>
 </head>
 <body>
-    <svg width="0" height="0">
-        <defs>
-            <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" style="stop-color:#00D9FF;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#FF006E;stop-opacity:1" />
-            </linearGradient>
-        </defs>
-    </svg>
     <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>
@@ -693,231 +488,47 @@
         <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="#FF006E">
-                        <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 class="form-group">
-                    <label for="examDate">Exam Date</label>
-                    <input type="date" id="examDate" required>
                 </div>
-                <button type="submit" class="add-btn">Add Exam</button>
             </form>
         </div>
     </div>
     <script>
-        // Enhanced particle system
-        function createParticles() {
-            const particlesContainer = document.getElementById('particles');
-            // Create orbs
-            for (let i = 0; i < 15; i++) {
-                const particle = document.createElement('div');
-                particle.classList.add('particle', 'orb');
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 20 + 's';
-                particle.style.animationDuration = (15 + Math.random() * 10) + 's';
-                // Random colors for orbs
-                const colors = ['#00D9FF', '#FF006E', '#8B39FF', '#39FF14'];
-                const color = colors[Math.floor(Math.random() * colors.length)];
-                particle.style.background = `radial-gradient(circle, ${color} 0%, transparent 70%)`;
-                particle.style.boxShadow = `0 0 10px ${color}, 0 0 20px ${color}`;
-                particlesContainer.appendChild(particle);
-            }
-            // Create stars
-            for (let i = 0; i < 30; i++) {
-                const star = document.createElement('div');
-                star.classList.add('particle', 'star');
-                star.style.left = Math.random() * 100 + '%';
-                star.style.top = Math.random() * 100 + '%';
-                star.style.animationDelay = Math.random() * 3 + 's';
-                particlesContainer.appendChild(star);
-            }
-        }
-        // Initialize particles
-        createParticles();
-        // Create particles
         const particlesContainer = document.getElementById('particles');
-        for (let i = 0; i < 50; i++) {
             const particle = document.createElement('div');
             particle.className = 'particle';
-            particle.style.width = Math.random() * 6 + 2 + 'px';
-            particle.style.height = particle.style.width;
             particle.style.left = Math.random() * 100 + '%';
-            particle.style.animationDuration = Math.random() * 15 + 10 + 's';
             particle.style.animationDelay = Math.random() * 5 + 's';
             particlesContainer.appendChild(particle);
         }
-        // Exam icons
-        const examIcons = ['📚', '📖', '✏️', '📝', '🎓', '📊', '🧮', '🔬', '💻', '🎨'];
-        // Modal functionality
-        const modal = document.getElementById('modal');
-        const openModalBtn = document.getElementById('openModalBtn');
-        const closeModalBtn = document.getElementById('closeModalBtn');
-        const addExamForm = document.getElementById('addExamForm');
-        const examsGrid = document.getElementById('examsGrid');
-        const emptyState = document.getElementById('emptyState');
-        openModalBtn.addEventListener('click', () => modal.classList.add('active'));
-        closeModalBtn.addEventListener('click', () => modal.classList.remove('active'));
-        modal.addEventListener('click', (e) => {
-            if (e.target === modal) modal.classList.remove('active');
-        });
-        // Load exams from localStorage
-        let exams = JSON.parse(localStorage.getItem('exams')) || [];
-        // Add exam
-        addExamForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const name = document.getElementById('examName').value;
-            const date = document.getElementById('examDate').value;
-            const icon = examIcons[Math.floor(Math.random() * examIcons.length)];
-            const exam = {
-                id: Date.now(),
-                name,
-                date: new Date(date).getTime(),
-                icon,
-                createdAt: Date.now()
-            };
-            exams.push(exam);
-            localStorage.setItem('exams', JSON.stringify(exams));
-            addExamForm.reset();
-            modal.classList.remove('active');
-            renderExams();
-        });
-        // Delete exam
-        function deleteExam(id) {
-            exams = exams.filter(exam => exam.id !== id);
-            localStorage.setItem('exams', JSON.stringify(exams));
-            renderExams();
-        }
-        // Calculate countdown
-        function getCountdown(targetDate) {
-            const now = new Date().getTime();
-            const distance = targetDate - now;
-            if (distance < 0) {
-                return { days: 0, hours: 0, minutes: 0, seconds: 0, isPast: true };
-            }
-            return {
-                days: Math.floor(distance / (1000 * 60 * 60 * 24)),
-                hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-                minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
-                seconds: Math.floor((distance % (1000 * 60)) / 1000),
-                isPast: false
-            };
-        }
-        // Calculate progress
-        function getProgress(createdAt, targetDate) {
-            const now = new Date().getTime();
-            const total = targetDate - createdAt;
-            const elapsed = now - createdAt;
-            return Math.min(100, Math.max(0, (elapsed / total) * 100));
-        }
-        // Render exams
-        function renderExams() {
-            if (exams.length === 0) {
-                examsGrid.innerHTML = '';
-                emptyState.style.display = 'block';
-                return;
-            }
-            emptyState.style.display = 'none';
-            examsGrid.innerHTML = exams.map(exam => {
-                const countdown = getCountdown(exam.date);
-                const progress = getProgress(exam.createdAt, exam.date);
-                const isUrgent = countdown.days < 7 && !countdown.isPast;
-                const examDate = new Date(exam.date);
-                return `
-                    <div class="exam-card ${isUrgent ? 'urgent' : ''}" data-id="${exam.id}">
-                        <div class="exam-card-inner">
-                            <div class="delete-btn" onclick="deleteExam(${exam.id})">
-                                <svg width="20" height="20" 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>
-                            </div>
-                            <div class="exam-icon">${exam.icon}</div>
-                            <div class="exam-name">${exam.name}</div>
-                            <div class="countdown-wrapper">
-                                <div class="countdown-item">
-                                    <div class="countdown-number">${countdown.days}</div>
-                                    <div class="countdown-label">Days</div>
-                                </div>
-                                <div class="countdown-item">
-                                    <div class="countdown-number">${countdown.hours}</div>
-                                    <div class="countdown-label">Hours</div>
-                                </div>
-                                <div class="countdown-item">
-                                    <div class="countdown-number">${countdown.minutes}</div>
-                                    <div class="countdown-label">Minutes</div>
-                                </div>
-                                <div class="countdown-item">
-                                    <div class="countdown-number">${countdown.seconds}</div>
-                                    <div class="countdown-label">Seconds</div>
-                                </div>
-                            </div>
-                            <div class="progress-container">
-                                <div class="progress-bar" style="width: ${progress}%"></div>
-                            </div>
-                            <div class="exam-date">
-                                📅 ${examDate.toLocaleDateString('en-US', {
-                                    weekday: 'long',
-                                    year: 'numeric',
-                                    month: 'long',
-                                    day: 'numeric',
-                                    hour: '2-digit',
-                                    minute: '2-digit'
-                                })}
-                            </div>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-        // Update countdowns every second
-        setInterval(renderExams, 1000);
-        // Initial render
-        renderExams();
-    </script>
-</body>
-</html>
     <script type="module">
         // Firebase SDK modules
         import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exam Countdown</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
+            font-family: 'Inter', sans-serif;
+            background: #000000;
             min-height: 100vh;
             color: #fff;
             overflow-x: hidden;
+            position: relative;
         }
+        /* Subtle Background */
+        .animated-bg {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: 0;
+            background: #000000;
         }
+        .animated-bg::before {
             content: '';
+            position: absolute;
             width: 100%;
             height: 100%;
+            background:
+                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
         }
+        /* Minimal Particles */
         .particles {
             position: fixed;
             top: 0;
             height: 100%;
             overflow: hidden;
             z-index: 1;
+            pointer-events: none;
         }
         .particle {
             position: absolute;
             width: 2px;
             height: 2px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            animation: float linear infinite;
         }
+        @keyframes float {
             from {
+                transform: translateY(100vh) translateX(0);
                 opacity: 0;
             }
+            20% {
                 opacity: 1;
             }
+            80% {
                 opacity: 1;
             }
             to {
+                transform: translateY(-10vh) translateX(50px);
                 opacity: 0;
             }
         }
         .container {
+            max-width: 1200px;
             margin: 0 auto;
+            padding: 4rem 2rem;
             position: relative;
             z-index: 2;
         }
+        /* Clean Header */
         .header {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            margin-bottom: 4rem;
+            padding-bottom: 2rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         h1 {
+            font-size: 2.5rem;
+            font-weight: 600;
+            color: #ffffff;
+            letter-spacing: -0.5px;
+        }
+        .add-btn-header {
+            width: 56px;
+            height: 56px;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
             border-radius: 16px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
+            transition: all 0.3s ease;
         }
+        .add-btn-header:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1);
         }
+        .add-btn-header svg {
+            width: 24px;
+            height: 24px;
+            fill: #ffffff;
         }
+        /* Grid */
         .exams-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 1.5rem;
         }
+        /* Glassmorphic Card */
         .exam-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(30px) saturate(150%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 24px;
+            padding: 2rem;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             overflow: hidden;
         }
         .exam-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            opacity: 0;
+            transition: opacity 0.4s;
         }
+        .exam-card:hover::before {
+            opacity: 1;
         }
         .exam-card:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.2);
+            transform: translateY(-8px);
             box-shadow:
+                0 20px 60px rgba(0, 0, 0, 0.5),
+                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
         }
+        .exam-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 2rem;
         }
+        .exam-info {
+            flex: 1;
         }
+        .exam-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #ffffff;
+            line-height: 1.3;
         }
+        .exam-date-small {
+            font-size: 0.875rem;
+            color: rgba(255, 255, 255, 0.5);
+            font-weight: 400;
         }
         .delete-btn {
             width: 36px;
             height: 36px;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s ease;
             opacity: 0;
+            flex-shrink: 0;
         }
         .exam-card:hover .delete-btn {
+            opacity: 1;
         }
         .delete-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+            transform: scale(1.1);
+        }
+        .delete-btn svg {
+            width: 16px;
+            height: 16px;
+            stroke: rgba(255, 255, 255, 0.7);
+            fill: none;
+            stroke-width: 2;
+        }
+        /* Countdown */
+        .countdown-wrapper {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 0.75rem;
+            margin: 1.5rem 0;
         }
+        .countdown-item {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 12px;
+            padding: 1rem 0.5rem;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        .countdown-item:hover {
+            background: rgba(255, 255, 255, 0.05);
+            border-color: rgba(255, 255, 255, 0.12);
+        }
+        .countdown-number {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #ffffff;
+            line-height: 1;
+            margin-bottom: 0.4rem;
+        }
+        .countdown-label {
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.5);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+        /* Progress Bar */
+        .progress-container {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            overflow: hidden;
+            margin-top: 1.5rem;
+        }
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
+            border-radius: 10px;
+            transition: width 1s ease;
+        }
+        /* Modal */
         .modal {
             display: none;
             position: fixed;
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0, 0, 0, 0.8);
             backdrop-filter: blur(10px);
             z-index: 1000;
             align-items: center;
             justify-content: center;
             padding: 2rem;
+            animation: fadeIn 0.3s ease;
         }
+        @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
         }
         .modal-content {
+            background: rgba(15, 15, 15, 0.95);
+            backdrop-filter: blur(40px) saturate(150%);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 24px;
+            padding: 2.5rem;
             width: 100%;
+            max-width: 480px;
             box-shadow:
+                0 30px 80px rgba(0, 0, 0, 0.8),
+                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+            animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
         @keyframes modalSlideIn {
+            from {
+                transform: translateY(20px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
         }
         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            margin-bottom: 2rem;
         }
         .modal-title {
+            font-size: 1.75rem;
+            font-weight: 600;
+            color: #ffffff;
         }
         .close-btn {
+            width: 36px;
+            height: 36px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
             cursor: pointer;
             display: flex;
             align-items: center;
         }
         .close-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
         }
+        .close-btn svg {
+            stroke: rgba(255, 255, 255, 0.7);
+            fill: none;
+            stroke-width: 2;
+        }
+        /* Form */
         .form-group {
+            margin-bottom: 1.5rem;
         }
         .form-group label {
             display: block;
+            margin-bottom: 0.6rem;
             font-weight: 500;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.9rem;
         }
         .form-group input {
             width: 100%;
+            padding: 1rem 1.25rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 12px;
             color: #fff;
+            font-size: 1rem;
+            font-family: 'Inter', sans-serif;
             transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
         }
         .form-group input:focus {
             outline: none;
+            border-color: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 0.08);
+            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
         }
         .form-group input::placeholder {
             color: rgba(255, 255, 255, 0.3);
         }
+        .submit-btn {
             width: 100%;
+            padding: 1.1rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
             color: #fff;
+            font-size: 1rem;
+            font-weight: 600;
             cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Inter', sans-serif;
+            backdrop-filter: blur(10px);
+            margin-top: 1rem;
         }
+        .submit-btn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
         }
+        .submit-btn:active {
+            transform: translateY(0);
         }
+        /* Empty State */
         .empty-state {
             text-align: center;
             padding: 6rem 2rem;
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
+            border: 1px dashed rgba(255, 255, 255, 0.1);
         }
+        .empty-state-icon {
+            font-size: 4rem;
+            margin-bottom: 1.5rem;
+            opacity: 0.3;
         }
         .empty-state p {
+            font-size: 1.1rem;
+            color: rgba(255, 255, 255, 0.4);
+            line-height: 1.6;
+            font-weight: 400;
         }
         /* Responsive */
         @media (max-width: 768px) {
             h1 { font-size: 2rem; }
+            .container { padding: 2rem 1.5rem; }
             .exams-grid { grid-template-columns: 1fr; }
+            .countdown-number { font-size: 1.75rem; }
+            .modal-content { padding: 2rem; }
         }
     </style>
 </head>
 <body>
+    <div class="animated-bg"></div>
     <div class="particles" id="particles"></div>
     <div class="container">
         <div class="header">
             <h1>Exam Countdown</h1>
+            <div class="add-btn-header" id="openModalBtn">
                 <svg viewBox="0 0 24 24">
+                    <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>
                 </svg>
             </div>
         </div>
         <div class="exams-grid" id="examsGrid"></div>
         <div class="empty-state" id="emptyState" style="display: none;">
+            <div class="empty-state-icon">📚</div>
+            <p>No exams yet. Add your first exam to get started.</p>
         </div>
     </div>
     <div class="modal" id="modal">
         <div class="modal-content">
             <div class="modal-header">
+                <h2 class="modal-title">Add Exam</h2>
                 <button class="close-btn" id="closeModalBtn">
+                    <svg width="20" height="20" viewBox="0 0 24 24">
+                        <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                     </svg>
                 </button>
             </div>
             <form id="addExamForm">
                 <div class="form-group">
                     <label for="examName">Exam Name</label>
+                    <input type="text" id="examName" required placeholder="Physics Final">
                 </div>
                 <div class="form-group">
+                    <label for="examDate">Date & Time</label>
+                    <input type="datetime-local" id="examDate" required>
                 </div>
+                <button type="submit" class="submit-btn">Add Exam</button>
             </form>
         </div>
     </div>
     <script>
+        // Create minimal particles
         const particlesContainer = document.getElementById('particles');
+        for (let i = 0; i < 30; i++) {
             const particle = document.createElement('div');
             particle.className = 'particle';
             particle.style.left = Math.random() * 100 + '%';
+            particle.style.animationDuration = Math.random() * 20 + 15 + 's';
             particle.style.animationDelay = Math.random() * 5 + 's';
             particlesContainer.appendChild(particle);
         }
     <script type="module">
         // Firebase SDK modules
         import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";