Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lumina | The Light of Productivity</title> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0f172a; | |
| --bg-card: rgba(30, 41, 59, 0.7); | |
| --primary: #8b5cf6; /* Violet */ | |
| --secondary: #06b6d4; /* Cyan */ | |
| --accent: #f43f5e; /* Rose */ | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --glass-border: 1px solid rgba(255, 255, 255, 0.1); | |
| --glow-primary: 0 0 20px rgba(139, 92, 246, 0.5); | |
| --glow-secondary: 0 0 20px rgba(6, 182, 212, 0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Outfit', sans-serif; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 20%); | |
| color: var(--text-main); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| } | |
| /* --- Animations --- */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 5px var(--primary); } | |
| 50% { box-shadow: 0 0 20px var(--primary), 0 0 10px var(--secondary); } | |
| 100% { box-shadow: 0 0 5px var(--primary); } | |
| } | |
| /* --- Sidebar Navigation --- */ | |
| .sidebar { | |
| width: 80px; | |
| height: 100vh; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-right: var(--glass-border); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem 0; | |
| z-index: 10; | |
| transition: width 0.3s ease; | |
| } | |
| .sidebar:hover { | |
| width: 240px; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 3rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .logo i { | |
| min-width: 30px; | |
| text-align: center; | |
| font-size: 1.8rem; | |
| animation: pulse-glow 3s infinite; | |
| } | |
| .nav-links { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| width: 100%; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem 1.5rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .nav-item:hover, .nav-item.active { | |
| color: var(--text-main); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .nav-item.active::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 4px; | |
| background: var(--primary); | |
| box-shadow: var(--glow-primary); | |
| } | |
| .nav-item i { | |
| font-size: 1.2rem; | |
| min-width: 30px; | |
| text-align: center; | |
| } | |
| .nav-text { | |
| margin-left: 1rem; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .sidebar:hover .nav-text { | |
| opacity: 1; | |
| } | |
| /* --- Main Content Area --- */ | |
| .main-content { | |
| flex: 1; | |
| padding: 2rem; | |
| overflow-y: auto; | |
| position: relative; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .user-greeting h1 { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .user-greeting p { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* --- Grid Layout --- */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| gap: 1.5rem; | |
| } | |
| /* --- Cards --- */ | |
| .card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| border: var(--glass-border); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .card-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| /* --- Specific Widgets --- */ | |
| /* Clock Widget */ | |
| .widget-clock { | |
| grid-column: span 4; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .time-display { | |
| font-size: 4rem; | |
| font-weight: 700; | |
| letter-spacing: -2px; | |
| text-shadow: 0 0 20px rgba(255, 255, 255, 0.2); | |
| } | |
| .date-display { | |
| font-size: 1.1rem; | |
| color: var(--text-muted); | |
| margin-top: 0.5rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| /* Weather Widget */ | |
| .widget-weather { | |
| grid-column: span 3; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .weather-main { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .temp { | |
| font-size: 2.5rem; | |
| font-weight: 600; | |
| } | |
| .condition { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .condition span:first-child { font-weight: 600; } | |
| .condition span:last-child { font-size: 0.8rem; color: var(--text-muted); } | |
| /* Task Manager */ | |
| .widget-tasks { | |
| grid-column: span 5; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .task-input-group { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .task-input { | |
| flex: 1; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 0.8rem 1rem; | |
| border-radius: 12px; | |
| color: var(--text-main); | |
| outline: none; | |
| transition: border 0.3s; | |
| } | |
| .task-input:focus { | |
| border-color: var(--primary); | |
| } | |
| .btn-add { | |
| background: var(--primary); | |
| border: none; | |
| width: 45px; | |
| border-radius: 12px; | |
| color: white; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .btn-add:hover { background: #7c3aed; } | |
| .task-list { | |
| list-style: none; | |
| overflow-y: auto; | |
| flex: 1; | |
| max-height: 250px; | |
| } | |
| .task-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.8rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| margin-bottom: 0.5rem; | |
| border-radius: 10px; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .task-item.completed span { | |
| text-decoration: line-through; | |
| color: var(--text-muted); | |
| } | |
| .task-checkbox { | |
| margin-right: 1rem; | |
| accent-color: var(--secondary); | |
| cursor: pointer; | |
| } | |
| .task-actions { | |
| margin-left: auto; | |
| } | |
| .btn-delete { | |
| background: transparent; | |
| border: none; | |
| color: var(--accent); | |
| cursor: pointer; | |
| opacity: 0.6; | |
| transition: opacity 0.3s; | |
| } | |
| .btn-delete:hover { opacity: 1; } | |
| /* Focus Timer */ | |
| .widget-focus { | |
| grid-column: span 4; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .timer-circle { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| border: 4px solid rgba(255, 255, 255, 0.1); | |
| border-top-color: var(--secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin: 1rem 0; | |
| box-shadow: var(--glow-secondary); | |
| animation: spin 10s linear infinite; | |
| } | |
| .timer-controls { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .btn-control { | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 20px; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| } | |
| .btn-start { | |
| background: var(--secondary); | |
| color: #0f172a; | |
| } | |
| .btn-reset { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-main); | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Ambient Sound */ | |
| .widget-sound { | |
| grid-column: span 4; | |
| } | |
| .sound-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .sound-btn { | |
| aspect-ratio: 1; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .sound-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .sound-btn.active { | |
| background: rgba(139, 92, 246, 0.2); | |
| border-color: var(--primary); | |
| box-shadow: var(--glow-primary); | |
| } | |
| .sound-btn i { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-muted); | |
| } | |
| .sound-btn.active i { | |
| color: var(--primary); | |
| } | |
| .sound-btn span { | |
| font-size: 0.8rem; | |
| } | |
| /* --- Footer --- */ | |
| .footer-link { | |
| position: absolute; | |
| bottom: 1rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| opacity: 0.6; | |
| transition: opacity 0.3s; | |
| z-index: 100; | |
| } | |
| .footer-link:hover { | |
| opacity: 1; | |
| color: var(--primary); | |
| } | |
| /* --- Responsive Design --- */ | |
| @media (max-width: 1024px) { | |
| .dashboard-grid { | |
| grid-template-columns: repeat(6, 1fr); | |
| } | |
| .widget-clock { grid-column: span 6; } | |
| .widget-weather { grid-column: span 3; } | |
| .widget-tasks { grid-column: span 6; } | |
| .widget-focus { grid-column: span 3; } | |
| .widget-sound { grid-column: span 6; } | |
| } | |
| @media (max-width: 768px) { | |
| body { | |
| flex-direction: column; | |
| overflow-y: auto; | |
| } | |
| .sidebar { | |
| width: 100%; | |
| height: auto; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| padding: 1rem 2rem; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| border-right: none; | |
| border-top: var(--glass-border); | |
| z-index: 100; | |
| } | |
| .sidebar:hover { width: 100%; } | |
| .logo { display: none; } /* Hide logo on mobile nav */ | |
| .nav-links { | |
| flex-direction: row; | |
| width: auto; | |
| gap: 1rem; | |
| } | |
| .nav-item { padding: 0.5rem; } | |
| .nav-text { display: none; } | |
| .nav-item::before { display: none; } | |
| .nav-item.active i { color: var(--primary); } | |
| .main-content { | |
| padding: 1rem; | |
| padding-bottom: 100px; /* Space for bottom nav */ | |
| } | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .widget-clock, .widget-weather, .widget-tasks, .widget-focus, .widget-sound { | |
| grid-column: span 1; | |
| } | |
| .time-display { font-size: 3rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Sidebar Navigation --> | |
| <nav class="sidebar"> | |
| <div class="logo"> | |
| <i class="fa-solid fa-bolt"></i> | |
| <span>Lumina</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#" class="nav-item active"> | |
| <i class="fa-solid fa-house"></i> | |
| <span class="nav-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fa-solid fa-list-check"></i> | |
| <span class="nav-text">Tasks</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fa-solid fa-chart-pie"></i> | |
| <span class="nav-text">Analytics</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fa-solid fa-gear"></i> | |
| <span class="nav-text">Settings</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <header> | |
| <div class="user-greeting"> | |
| <h1 id="greeting-text">Hello, Traveler</h1> | |
| <p>Ready to illuminate your day?</p> | |
| </div> | |
| <div class="user-profile"> | |
| <!-- Placeholder for profile image --> | |
| <div style="width: 40px; height: 40px; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 50%;"></div> | |
| </div> | |
| </header> | |
| <div class="dashboard-grid"> | |
| <!-- Clock Widget --> | |
| <div class="card widget-clock"> | |
| <div class="time-display" id="clock">00:00</div> | |
| <div class="date-display" id="date">Loading...</div> | |
| </div> | |
| <!-- Weather Widget --> | |
| <div class="card widget-weather"> | |
| <div class="card-header"> | |
| <span class="card-title">Weather</span> | |
| <i class="fa-solid fa-location-dot" style="color: var(--text-muted)"></i> | |
| </div> | |
| <div class="weather-main"> | |
| <i class="fa-solid fa-cloud-moon" style="font-size: 3rem; color: var(--secondary)"></i> | |
| <div class="condition"> | |
| <span class="temp">22°C</span> | |
| <span>Partly Cloudy</span> | |
| <span>H: 24° L: 18°</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Focus Timer --> | |
| <div class="card widget-focus"> | |
| <div class="card-header" style="width: 100%"> | |
| <span class="card-title">Focus Mode</span> | |
| </div> | |
| <div class="timer-circle" id="timer-display">25:00</div> | |
| <div class="timer-controls"> | |
| <button class="btn-control btn-start" id="timer-btn">Start</button> | |
| <button class="btn-control btn-reset" id="reset-btn"><i class="fa-solid fa-rotate-right"></i></button> | |
| </div> | |
| </div> | |
| <!-- Task Manager --> | |
| <div class="card widget-tasks"> | |
| <div class="card-header"> | |
| <span class="card-title">Quick Tasks</span> | |
| <span style="font-size: 0.8rem; color: var(--text-muted)" id="task-count">0 pending</span> | |
| </div> | |
| <div class="task-input-group"> | |
| <input type="text" class="task-input" id="task-input" placeholder="Add a new task..."> | |
| <button class="btn-add" id="add-task-btn"><i class="fa-solid fa-plus"></i></button> | |
| </div> | |
| <ul class="task-list" id="task-list"> | |
| <!-- Tasks injected via JS --> | |
| </ul> | |
| </div> | |
| <!-- Ambient Sound Mixer --> | |
| <div class="card widget-sound"> | |
| <div class="card-header"> | |
| <span class="card-title">Ambient Mixer</span> | |
| <i class="fa-solid fa-music" style="color: var(--primary)"></i> | |
| </div> | |
| <div class="sound-grid"> | |
| <div class="sound-btn" data-sound="rain"> | |
| <i class="fa-solid fa-cloud-rain"></i> | |
| <span>Rain</span> | |
| </div> | |
| <div class="sound-btn" data-sound="cafe"> | |
| <i class="fa-solid fa-mug-hot"></i> | |
| <span>Cafe</span> | |
| </div> | |
| <div class="sound-btn" data-sound="forest"> | |
| <i class="fa-solid fa-tree"></i> | |
| <span>Forest</span> | |
| </div> | |
| <div class="sound-btn" data-sound="waves"> | |
| <i class="fa-solid fa-water"></i> | |
| <span>Waves</span> | |
| </div> | |
| <div class="sound-btn" data-sound="white"> | |
| <i class="fa-solid fa-wave-square"></i> | |
| <span>Noise</span> | |
| </div> | |
| <div class="sound-btn" data-sound="fire"> | |
| <i class="fa-solid fa-fire"></i> | |
| <span>Fire</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="footer-link" target="_blank">Built with anycoder</a> | |
| </main> | |
| <script> | |
| // --- Clock Functionality --- | |
| function updateClock() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| const dateString = now.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' }); | |
| document.getElementById('clock').textContent = timeString; | |
| document.getElementById('date').textContent = dateString; | |
| // Greeting based on time | |
| const hour = now.getHours(); | |
| const greetingElement = document.getElementById('greeting-text'); | |
| if (hour < 12) greetingElement.textContent = "Good Morning, Traveler"; | |
| else if (hour < 18) greetingElement.textContent = "Good Afternoon, Traveler"; | |
| else greetingElement.textContent = "Good Evening, Traveler"; | |
| } | |
| setInterval(updateClock, 1000); | |
| updateClock(); | |
| // --- Focus Timer Functionality --- | |
| let timerInterval; | |
| let timeLeft = 25 * 60; // 25 minutes in seconds | |
| let isRunning = false; | |
| const timerDisplay = document.getElementById('timer-display'); | |
| const timerBtn = document.getElementById('timer-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| function updateTimerDisplay() { | |
| const minutes = Math.floor(timeLeft / 60); | |
| const seconds = timeLeft % 60; | |
| timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| } | |
| timerBtn.addEventListener('click', () => { | |
| if (isRunning) { | |
| clearInterval(timerInterval); | |
| timerBtn.textContent = "Start"; | |
| timerBtn.style.background = "var(--secondary)"; | |
| timerBtn.style.color = "#0f172a"; | |
| document.querySelector('.timer-circle').style.animationPlayState = 'paused'; | |
| } else { | |
| timerInterval = setInterval(() => { | |
| if (timeLeft > 0) { | |
| timeLeft--; | |
| updateTimerDisplay(); | |
| } else { | |
| clearInterval(timerInterval); | |
| isRunning = false; | |
| timerBtn.textContent = "Start"; | |
| alert("Focus session complete!"); | |
| } | |
| }, 1000); | |
| timerBtn.textContent = "Pause"; | |
| timerBtn.style.background = "#f43f5e"; // Red for pause | |
| timerBtn.style.color = "white"; | |
| document.querySelector('.timer-circle').style.animationPlayState = 'running'; | |
| } | |
| isRunning = !isRunning; | |
| }); | |
| resetBtn.addEventListener('click', () => { | |
| clearInterval(timerInterval); | |
| isRunning = false; | |
| timeLeft = 25 * 60; | |
| updateTimerDisplay(); | |
| timerBtn.textContent = "Start"; | |
| timerBtn.style.background = "var(--secondary)"; | |
| timerBtn.style.color = "#0f172a"; | |
| document.querySelector('.timer-circle').style.animationPlayState = 'paused'; | |
| }); | |
| // --- Task Manager Functionality --- | |
| const taskInput = document.getElementById('task-input'); | |
| const addTaskBtn = document.getElementById('add-task-btn'); | |
| const taskList = document.getElementById('task-list'); | |
| const taskCount = document.getElementById('task-count'); | |
| // Load tasks from LocalStorage | |
| let tasks = JSON.parse(localStorage.getItem('luminaTasks')) || []; | |
| function renderTasks() { | |
| taskList.innerHTML = ''; | |
| let pendingCount = 0; | |
| tasks.forEach((task, index) => { | |
| if (!task.completed) pendingCount++; | |
| const li = document.createElement('li'); | |
| li.className = `task-item ${task.completed ? 'completed' : ''}`; | |
| li.innerHTML = ` | |
| <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''} onchange="toggleTask(${index})"> | |
| <span>${task.text}</span> | |
| <div class="task-actions"> | |
| <button class="btn-delete" onclick="deleteTask(${index})"><i class="fa-solid fa-trash"></i></button> | |
| </div> | |
| `; | |
| taskList.appendChild(li); | |
| }); | |
| taskCount.textContent = `${pendingCount} pending`; | |
| localStorage.setItem('luminaTasks', JSON.stringify(tasks)); | |
| } | |
| function addTask() { | |
| const text = taskInput.value.trim(); | |
| if (text) { | |
| tasks.push({ text, completed: false }); | |
| taskInput.value = ''; | |
| renderTasks(); | |
| } | |
| } | |
| window.toggleTask = function(index) { | |
| tasks[index].completed = !tasks[index].completed; | |
| renderTasks(); | |
| } | |
| window.deleteTask = function(index) { | |
| tasks.splice(index, 1); | |
| renderTasks(); | |
| } | |
| addTaskBtn.addEventListener('click', addTask); | |
| taskInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') addTask(); | |
| }); | |
| renderTasks(); | |
| // --- Ambient Sound UI (Visual Only for this demo) --- | |
| const soundBtns = document.querySelectorAll('.sound-btn'); | |
| soundBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Toggle active state | |
| const isActive = btn.classList.contains('active'); | |
| // Reset all others | |
| soundBtns.forEach(b => b.classList.remove('active')); | |
| if (!isActive) { | |
| btn.classList.add('active'); | |
| // In a real app, this would play audio: | |
| // new Audio('path/to/sound.mp3').play(); | |
| console.log(`Playing ${btn.dataset.sound} sound`); | |
| } else { | |
| console.log(`Stopping ${btn.dataset.sound} sound`); | |
| } | |
| }); | |
| }); | |
| // --- Navigation Active State --- | |
| const navItems = document.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => { | |
| item.addEventListener('click', (e) => { | |
| // Prevent default anchor behavior for demo | |
| e.preventDefault(); | |
| navItems.forEach(nav => nav.classList.remove('active')); | |
| item.classList.add('active'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |