body { margin: 0; font-family: 'Orbitron', sans-serif; background: url('C:/Users/User/Desktop/HD-wallpaper-light-in-the-dark-blue-galaxy-nebula-night-sky-space-star.jpg') no-repeat center center fixed; background-size: cover; color: #fff; overflow-x: hidden; position: relative; }
h1 { text-align: center; margin-top: 20px; font-size: 2em; text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff; }
.container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 20px; }
.subject-card { background: rgba(0,0,30,0.7); border-radius: 15px; padding: 15px; width: 320px; box-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff; transition: transform 0.3s, box-shadow 0.3s; position: relative; }
.subject-card:hover { transform: scale(1.05); box-shadow: 0 0 25px #ff00ff, 0 0 50px #00ffff; }
h2 { text-align: center; margin-bottom: 10px; font-size: 1.5em; text-shadow: 0 0 5px #fff; }
.tab-buttons { display: flex; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.tab-buttons button { margin: 5px; padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; background: rgba(255,255,255,0.2); color: #fff; transition: 0.2s; }
.tab-buttons button.active { background: rgba(255,255,255,0.6); color: #000; }
.tab-buttons button:hover { transform: scale(1.1); }
textarea { width: 100%; padding: 10px; border-radius: 10px; border: none; margin-bottom: 10px; resize: none; font-size: 1em; }
.notes { max-height: 150px; overflow-y: auto; margin-bottom: 10px; }
.note { background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 8px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; }
.note:hover { background: rgba(255,255,255,0.3); }
.delete-btn { color: #ff4444; font-weight: bold; cursor: pointer; margin-left: 10px; }
.sparkle { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; opacity: 0; animation: sparkle 1s linear forwards; }
@keyframes sparkle { 0% {opacity:1; transform: translate(0,0) scale(1);} 100% {opacity:0; transform: translate(100px, -100px) scale(0);} }
.shooting-star { position: absolute; width: 2px; background: linear-gradient(white, rgba(255,255,255,0)); opacity: 0; animation: fall linear forwards; }
@keyframes fall { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(800px); } } </style>
<script> const subjects = document.querySelectorAll('.subject-card'); const tabs = ['covered','todo','questions','pastpapers']; subjects.forEach(card => { const tabContainer = document.createElement('div'); tabContainer.className = 'tab-buttons'; tabs.forEach((tab,i) => { const btn = document.createElement('button'); btn.textContent = tab.charAt(0).toUpperCase() + tab.slice(1); if(i===0) btn.classList.add('active'); btn.addEventListener('click', ()=>switchTab(card,tab,btn)); tabContainer.appendChild(btn); }); card.appendChild(tabContainer); const textarea = document.createElement('textarea'); textarea.rows = 4; textarea.placeholder = 'Add your notes here...'; card.appendChild(textarea); const notesDiv = document.createElement('div'); notesDiv.className = 'notes'; card.appendChild(notesDiv); card.currentTab = 'covered'; const saved = JSON.parse(localStorage.getItem(card.dataset.subject) || '{}'); tabs.forEach(tab => { if(!saved[tab]) saved[tab]=[]; }); card.saved = saved; loadNotes(card); textarea.addEventListener('keypress', function(e){ if(e.key==='Enter'){ e.preventDefault(); const val = this.value.trim(); if(val!==''){ card.saved[card.currentTab].push(val); addNote(notesDiv,val,card,card.currentTab); createSparkle(card); saveCard(card); this.value=''; } } }); }); function switchTab(card,tab,btn){ card.currentTab = tab; card.querySelectorAll('.tab-buttons button').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); loadNotes(card); } function loadNotes(card){ const notesDiv = card.querySelector('.notes'); notesDiv.innerHTML=''; card.saved[card.currentTab].forEach(n => addNote(notesDiv,n,card,card.currentTab)); } function addNote(container,text,card,tab){ const note = document.createElement('div'); note.className='note'; note.innerHTML = text + '✖'; container.appendChild(note); note.querySelector('.delete-btn').addEventListener('click', ()=>{ card.saved[tab] = card.saved[tab].filter(nt => nt!==text); note.remove(); saveCard(card); }); } function saveCard(card){ localStorage.setItem(card.dataset.subject,JSON.stringify(card.saved)); } function createSparkle(card){ const sparkle = document.createElement('div'); sparkle.className='sparkle'; sparkle.style.top=Math.random()*100+'%'; sparkle.style.left=Math.random()*100+'%'; card.appendChild(sparkle); setTimeout(()=>sparkle.remove(),1000); } // Shooting stars function spawnShootingStars(count){ for(let i=0;istar.remove(), duration*1000); } } // spawn multiple shooting stars continuously setInterval(()=>{ spawnShootingStars(5); }, 800); </script>