Toggle switches are essential components in modern UI design, offering users intuitive control over various settings and features. They enhance user experience by providing a simple, visual way to enable or disable options.
In this article, we will explore 10 exemplary toggle switch designs that stand out for their functionality and aesthetic appeal. These examples will inspire you to create seamless and engaging user interfaces.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas empower designers and developers to create pixel-perfect UI effortlessly. Loved by professionals, it ensures every toggle switch is both functional and visually stunning.
Ready to elevate your designs? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe to design stunning UIs, including Toggle Switches, with unmatched efficiency. Create pixel-perfect interfaces effortlessly and see your ideas come to life instantly.
Don't wait to elevate your design game. Start for free and begin creating right away!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeoHome Control Hub</title> <style> :root { --primary-color: #0cffe1; --secondary-color: #7209b7; --on-color: #00ffc3; --off-color: #ff476f; --dark-bg: #121317; --panel-bg: rgba(23, 25, 35, 0.9); --glow-intensity: 0px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', 'Segoe UI', sans-serif; } body { background-color: var(--dark-bg); color: white; width: 100%; height: 100vh; overflow-x: hidden; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(circle at 10% 20%, rgba(12, 255, 225, 0.05) 0%, transparent 30%), radial-gradient(circle at 90% 80%, rgba(114, 9, 183, 0.07) 0%, transparent 40%); } .container { width: 100%; max-width: 700px; height: 700px; padding: 20px; overflow-y: auto; position: relative; } .panel { background: var(--panel-bg); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .panel-header h1 { font-size: 1.8rem; font-weight: 600; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; } .scene-toggle { display: flex; gap: 15px; } .scene-btn { background: rgba(255, 255, 255, 0.1); border: none; color: white; padding: 8px 15px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .scene-btn.active { background: rgba(12, 255, 225, 0.2); box-shadow: 0 0 10px rgba(12, 255, 225, 0.3); } .section { margin-bottom: 30px; } .section-title { font-size: 1.2rem; margin-bottom: 15px; color: rgba(255, 255, 255, 0.9); font-weight: 500; display: flex; align-items: center; gap: 10px; } .section-title i { color: var(--primary-color); font-size: 1.3rem; } .toggles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .toggle-container { position: relative; height: 80px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); padding: 15px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s ease; } .toggle-container.on { background: rgba(12, 255, 225, 0.1); box-shadow: 0 0 var(--glow-intensity) rgba(12, 255, 225, 0.5); } .toggle-container.off { box-shadow: 0 0 0px rgba(255, 71, 111, 0.1); } .toggle-info { display: flex; justify-content: space-between; align-items: center; } .toggle-name { font-size: 1rem; font-weight: 500; } .toggle-icon { font-size: 1.3rem; margin-right: 5px; opacity: 0.9; } .toggle-status { font-size: 0.8rem; opacity: 0.7; transition: color 0.3s ease; } .toggle-container.on .toggle-status { color: var(--on-color); } .toggle-container.off .toggle-status { color: var(--off-color); } .switch { position: relative; width: 50px; height: 24px; display: inline-block; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.1); transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s cubic-bezier(0.68, -0.55, 0.27, 1.55); border-radius: 50%; } input:checked + .slider { background-color: var(--on-color); } input:checked + .slider:before { transform: translateX(26px); } .progress-container { margin-top: 15px; position: relative; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; } .progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--on-color), rgba(12, 255, 225, 0.7)); border-radius: 10px; transition: width 0.3s ease; } .progress-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-top: 7px; opacity: 0.7; } .status-panel { display: flex; margin-top: 20px; gap: 15px; justify-content: space-between; } .status-item { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 15px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .status-value { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; } .status-label { font-size: 0.8rem; opacity: 0.7; text-align: center; } .history-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .history-action { font-size: 0.9rem; } .history-device { color: var(--primary-color); font-weight: 500; } .history-time { font-size: 0.8rem; opacity: 0.7; } .glow-effect { position: absolute; height: 100%; width: 100%; top: 0; left: 0; border-radius: 15px; opacity: 0; z-index: -1; transition: opacity 0.3s ease; } .toggle-container.on .glow-effect { opacity: 1; box-shadow: 0 0 20px var(--on-color); } /* Slider control styling */ .slider-control { margin-top: 15px; } .slider-container { width: 100%; position: relative; margin-top: 10px; } .slider-control input[type="range"] { -webkit-appearance: none; width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; outline: none; } .slider-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--primary-color); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(12, 255, 225, 0.5); } .slider-control input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary-color); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(12, 255, 225, 0.5); border: none; } .slider-labels { display: flex; justify-content: space-between; font-size: 0.8rem; opacity: 0.7; margin-top: 5px; } .ripple { position: absolute; border-radius: 50%; background: rgba(12, 255, 225, 0.3); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } /* Animation for notifications */ @keyframes slideIn { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .notification { padding: 15px; background: rgba(12, 255, 225, 0.1); border-left: 3px solid var(--primary-color); border-radius: 5px; margin-bottom: 15px; animation: slideIn 0.3s ease forwards; display: flex; align-items: center; gap: 10px; } .notification i { color: var(--primary-color); } .notification-text { font-size: 0.9rem; } /* Media queries for responsiveness */ @media (max-width: 600px) { .panel { padding: 20px; } .panel-header h1 { font-size: 1.5rem; } .toggles-grid { grid-template-columns: 1fr 1fr; gap: 15px; } .toggle-container { height: 70px; } .status-panel { flex-direction: column; gap: 10px; } .section-title { font-size: 1.1rem; } } @media (max-width: 400px) { .toggles-grid { grid-template-columns: 1fr; } .toggle-container { height: auto; padding: 12px; } } </style> </head> <body> <div class="container"> <div class="panel"> <div class="panel-header"> <h1>NeoHome Control Hub</h1> <div class="scene-toggle"> <button class="scene-btn active" data-scene="home">Home</button> <button class="scene-btn" data-scene="away">Away</button> </div> </div> <div class="notification"> <i class="fa-solid fa-bell"></i> <div class="notification-text">Motion detected in kitchen at 3:42 PM</div> </div> <div class="section"> <h2 class="section-title"><i class="fa-solid fa-bolt"></i>Essential Controls</h2> <div class="toggles-grid"> <div class="toggle-container off" data-name="Living Room Lights"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-lightbulb"></i> Living Lights</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> <div class="toggle-container off" data-name="Air Conditioning"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-snowflake"></i> A/C System</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> <div class="toggle-container off" data-name="Smart TV"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-tv"></i> Smart TV</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> <div class="toggle-container off" data-name="Security System"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-shield-alt"></i> Security</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> </div> </div> <div class="section"> <h2 class="section-title"><i class="fa-solid fa-utensils"></i>Kitchen Devices</h2> <div class="toggles-grid"> <div class="toggle-container off" data-name="Coffee Maker"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-mug-hot"></i> Coffee Maker</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> <div class="toggle-container off" data-name="Smart Fridge"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-temperature-low"></i> Smart Fridge</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> <div class="toggle-container off" data-name="Dishwasher"> <div class="toggle-info"> <span class="toggle-name"><i class="toggle-icon fa-solid fa-sink"></i> Dishwasher</span> <span class="toggle-status">Off</span> </div> <label class="switch"> <input type="checkbox" class="toggle-switch"> <span class="slider"></span> </label> <div class="glow-effect"></div> </div> </div> </div> <div class="section"> <h2 class="section-title"><i class="fa-solid fa-sliders-h"></i>Environment Controls</h2> <div class="slider-control"> <div class="toggle-info"> <span class="toggle-name">Lighting Brightness</span> <span id="brightness-value">60%</span> </div> <div class="slider-container"> <input type="range" min="0" max="100" value="60" id="brightness-slider"> <div class="slider-labels"> <span>Min</span> <span>Max</span> </div> </div> </div> <div class="slider-control"> <div class="toggle-info"> <span class="toggle-name">Temperature</span> <span id="temperature-value">22°C</span> </div> <div class="slider-container"> <input type="range" min="16" max="30" value="22" id="temperature-slider"> <div class="slider-labels"> <span>16°C</span> <span>30°C</span> </div> </div> </div> </div> <div class="section"> <h2 class="section-title"><i class="fa-solid fa-tachometer-alt"></i>System Status</h2> <div class="status-panel"> <div class="status-item"> <div class="status-value">4.2kW</div> <div class="status-label">Current Power Usage</div> </div> <div class="status-item"> <div class="status-value">22°C</div> <div class="status-label">Indoor Temperature</div> </div> <div class="status-item"> <div class="status-value">86%</div> <div class="status-label">Network Signal</div> </div> </div> </div> <div class="section"> <h2 class="section-title"><i class="fa-solid fa-history"></i>Recent Activity</h2> <div class="history-item"> <div class="history-action"><span class="history-device">Kitchen Lights</span> turned on</div> <div class="history-time">3:40 PM</div> </div> <div class="history-item"> <div class="history-action"><span class="history-device">Coffee Maker</span> finished brew cycle</div> <div class="history-time">7:15 AM</div> </div> <div class="history-item"> <div class="history-action"><span class="history-device">A/C System</span> temperature adjusted to 22°C</div> <div class="history-time">6:30 AM</div> </div> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Fix for Font Awesome if CDN fails if (typeof FontAwesome === 'undefined') { const icons = document.querySelectorAll('[class*="fa-"]'); icons.forEach(icon => { if (icon.classList.contains('fa-lightbulb')) icon.textContent = '💡'; if (icon.classList.contains('fa-snowflake')) icon.textContent = '❄️'; if (icon.classList.contains('fa-tv')) icon.textContent = '📺'; if (icon.classList.contains('fa-shield-alt')) icon.textContent = '🛡️'; if (icon.classList.contains('fa-utensils')) icon.textContent = '🍴'; if (icon.classList.contains('fa-mug-hot')) icon.textContent = '☕'; if (icon.classList.contains('fa-temperature-low')) icon.textContent = '🧊'; if (icon.classList.contains('fa-sink')) icon.textContent = '🚿'; if (icon.classList.contains('fa-sliders-h')) icon.textContent = '⚙️'; if (icon.classList.contains('fa-tachometer-alt')) icon.textContent = '📊'; if (icon.classList.contains('fa-history')) icon.textContent = '⏱️'; if (icon.classList.contains('fa-bolt')) icon.textContent = '⚡'; if (icon.classList.contains('fa-bell')) icon.textContent = '🔔'; }); } // Toggle switches functionality const toggleSwitches = document.querySelectorAll('.toggle-switch'); toggleSwitches.forEach(toggle => { toggle.addEventListener('change', function() { const container = this.closest('.toggle-container'); const statusText = container.querySelector('.toggle-status'); const deviceName = container.dataset.name; if (this.checked) { container.classList.remove('off'); container.classList.add('on'); statusText.textContent = 'On'; createRipple(event, container); // Add to history (only for demo purposes) const historySection = document.querySelector('.section:last-child'); const newHistoryItem = document.createElement('div'); newHistoryItem.classList.add('history-item'); newHistoryItem.innerHTML = ` <div class="history-action"><span class="history-device">${deviceName}</span> turned on</div> <div class="history-time">just now</div> `; // Insert at the top of history const firstHistoryItem = historySection.querySelector('.history-item'); if (firstHistoryItem) { historySection.insertBefore(newHistoryItem, firstHistoryItem); } else { historySection.appendChild(newHistoryItem); } } else { container.classList.remove('on'); container.classList.add('off'); statusText.textContent = 'Off'; createRipple(event, container); } }); }); // Create ripple effect on toggle function createRipple(e, element) { const circle = document.createElement('span'); const diameter = Math.max(element.clientWidth, element.clientHeight); circle.style.width = circle.style.height = `${diameter}px`; const rect = element.getBoundingClientRect(); // Position relative to the container circle.style.left = `${e.clientX - rect.left - diameter / 2}px`; circle.style.top = `${e.clientY - rect.top - diameter / 2}px`; circle.classList.add('ripple'); // Remove existing ripples const ripple = element.querySelector('.ripple'); if (ripple) { ripple.remove(); } element.appendChild(circle); // Remove the ripple after animation completes setTimeout(() => { circle.remove(); }, 600); } // Scene toggle functionality const sceneButtons = document.querySelectorAll('.scene-btn'); sceneButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons sceneButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const scene = this.dataset.scene; // Apply scene settings (for demo purposes) if (scene === 'away') { // Turn off all devices when away toggleSwitches.forEach(toggle => { toggle.checked = false; const container = toggle.closest('.toggle-container'); container.classList.remove('on'); container.classList.add('off'); const statusText = container.querySelector('.toggle-status'); statusText.textContent = 'Off'; }); // Except security system const securityToggle = document.querySelector('.toggle-container[data-name="Security System"] .toggle-switch'); if (securityToggle) { securityToggle.checked = true; const container = securityToggle.closest('.toggle-container'); container.classList.remove('off'); container.classList.add('on'); const statusText = container.querySelector('.toggle-status'); statusText.textContent = 'On'; } // Create a notification const notificationPanel = document.querySelector('.notification'); notificationPanel.innerHTML = ` <i class="fa-solid fa-shield-alt"></i> <div class="notification-text">Away mode activated. Security system enabled.</div> `; } else { // Reset notification for home mode const notificationPanel = document.querySelector('.notification'); notificationPanel.innerHTML = ` <i class="fa-solid fa-bell"></i> <div class="notification-text">Welcome back! Current temperature is 22°C</div> `; } }); }); // Slider functionality const brightnessSlider = document.getElementById('brightness-slider'); const brightnessValue = document.getElementById('brightness-value'); brightnessSlider.addEventListener('input', function() { brightnessValue.textContent = `${this.value}%`; document.documentElement.style.setProperty('--glow-intensity', `${this.value / 5}px`); }); const temperatureSlider = document.getElementById('temperature-slider'); const temperatureValue = document.getElementById('temperature-value'); temperatureSlider.addEventListener('input', function() { temperatureValue.textContent = `${this.value}°C`; // Update the temperature displayed in the status panel const temperatureStatus = document.querySelector('.status-item:nth-child(2) .status-value'); temperatureStatus.textContent = `${this.value}°C`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimal Mobile Settings</title> <style> /* Base styles and reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f2f2f2; padding: 20px; color: #333; } .settings-container { width: 100%; max-width: 360px; background-color: #ffffff; border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; position: relative; } .settings-header { margin-bottom: 30px; position: relative; } .settings-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; } .settings-header p { font-size: 14px; color: #666; margin-bottom: 20px; } .settings-section { margin-bottom: 40px; } .settings-section h2 { font-size: 16px; font-weight: 600; margin-bottom: 20px; color: #333; letter-spacing: -0.3px; } .toggle-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; position: relative; padding-bottom: 5px; } .toggle-container:last-child { margin-bottom: 0; } .toggle-container::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #f0f0f0; transform: scaleY(0.5); } .toggle-container:last-child::after { display: none; } .toggle-label { font-size: 15px; font-weight: 500; color: #333; transition: color 0.3s ease; } .toggle-subtext { display: block; font-size: 12px; color: #888; margin-top: 4px; max-width: 210px; line-height: 1.4; } /* Toggle switch styling */ .toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e0e0e0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } input:checked + .toggle-slider { background-color: #333; } input:checked + .toggle-slider.power-saving { background-color: #4CAF50; } input:checked + .toggle-slider.night-mode { background-color: #5E35B1; } input:checked + .toggle-slider.location { background-color: #2196F3; } input:checked + .toggle-slider.notifications { background-color: #FF5722; } input:checked + .toggle-slider:before { transform: translateX(20px); } input:focus + .toggle-slider { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } .glow-effect { position: absolute; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.8); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; opacity: 0; } /* Ripple animation for toggle state change */ @keyframes ripple { 0% { width: 0; height: 0; opacity: 0.5; } 100% { width: 120px; height: 120px; opacity: 0; } } /* Active setting pulse */ .active-setting { animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } /* Theme Mode Graphics */ .theme-visualizer { display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 10px; } .theme-card { width: 48%; height: 80px; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s ease; } .theme-card:hover { transform: translateY(-2px); } .light-theme { background-color: #f0f0f0; border: 1px solid #e0e0e0; } .dark-theme { background-color: #333; border: 1px solid #444; } .theme-card .bar { position: absolute; height: 8px; border-radius: 4px; } .light-theme .bar { background-color: #ffffff; } .dark-theme .bar { background-color: #555; } .theme-card .bar:nth-child(1) { width: 60%; top: 15px; left: 15px; } .theme-card .bar:nth-child(2) { width: 40%; top: 30px; left: 15px; } .theme-card .bar:nth-child(3) { width: 70%; top: 45px; left: 15px; } .theme-card .circle { position: absolute; width: 20px; height: 20px; border-radius: 50%; right: 15px; top: 15px; } .light-theme .circle { background-color: #ffffff; border: 1px solid #e0e0e0; } .dark-theme .circle { background-color: #555; border: 1px solid #666; } .theme-active-indicator { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: transparent; transition: background-color 0.3s ease; } .theme-card.active .theme-active-indicator { background-color: #5E35B1; } /* Quick action buttons */ .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 25px; } .quick-action-btn { background-color: #f5f5f5; border: none; border-radius: 12px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .quick-action-btn:hover { background-color: #e8e8e8; } .quick-action-btn i { font-size: 20px; margin-bottom: 5px; color: #555; } .quick-action-btn span { font-size: 10px; color: #777; } /* Status badge */ .status-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; margin-left: 10px; background-color: #f0f0f0; color: #666; vertical-align: middle; } .status-badge.on { background-color: #e8f5e9; color: #4CAF50; } /* Responsive adjustments */ @media (max-width: 400px) { .settings-container { padding: 20px; border-radius: 16px; } .settings-header h1 { font-size: 22px; } .toggle-label { font-size: 14px; } .quick-actions { grid-template-columns: repeat(2, 1fr); } } /* Material Icons */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } </style> </head> <body> <div class="settings-container"> <div class="settings-header"> <h1>Device Settings</h1> <p>Customize your experience with these controls</p> </div> <div class="settings-section"> <h2>Display & Appearance</h2> <div class="toggle-container"> <div> <span class="toggle-label">Dark Mode</span> <span class="toggle-subtext">Reduce eye strain in low light conditions</span> </div> <label class="toggle-switch"> <input type="checkbox" id="darkModeToggle"> <span class="toggle-slider night-mode"></span> </label> <span class="glow-effect"></span> </div> <div class="theme-visualizer"> <div class="theme-card light-theme" id="lightThemeCard"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="circle"></div> <div class="theme-active-indicator"></div> </div> <div class="theme-card dark-theme" id="darkThemeCard"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="circle"></div> <div class="theme-active-indicator"></div> </div> </div> <div class="toggle-container"> <div> <span class="toggle-label">Reduce Motion</span> <span class="toggle-subtext">Minimize animated effects throughout the interface</span> </div> <label class="toggle-switch"> <input type="checkbox" id="motionToggle"> <span class="toggle-slider"></span> </label> <span class="glow-effect"></span> </div> </div> <div class="settings-section"> <h2>Power & Performance</h2> <div class="toggle-container active-setting"> <div> <span class="toggle-label">Power Saving Mode</span> <span class="toggle-subtext">Extends battery life by reducing background processes</span> </div> <label class="toggle-switch"> <input type="checkbox" id="powerSavingToggle" checked> <span class="toggle-slider power-saving"></span> </label> <span class="glow-effect"></span> </div> <div class="toggle-container"> <div> <span class="toggle-label">Auto-Brightness</span> <span class="toggle-subtext">Automatically adjust display based on ambient light</span> </div> <label class="toggle-switch"> <input type="checkbox" id="brightnessToggle"> <span class="toggle-slider"></span> </label> <span class="glow-effect"></span> </div> </div> <div class="settings-section"> <h2>Privacy & Security</h2> <div class="toggle-container"> <div> <span class="toggle-label">Location Services <span class="status-badge on" id="locationBadge">Limited</span></span> <span class="toggle-subtext">Allow apps to request your location data</span> </div> <label class="toggle-switch"> <input type="checkbox" id="locationToggle" checked> <span class="toggle-slider location"></span> </label> <span class="glow-effect"></span> </div> <div class="toggle-container"> <div> <span class="toggle-label">App Notifications</span> <span class="toggle-subtext">Enable push alerts from installed applications</span> </div> <label class="toggle-switch"> <input type="checkbox" id="notificationsToggle" checked> <span class="toggle-slider notifications"></span> </label> <span class="glow-effect"></span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Toggle switches logic const toggles = document.querySelectorAll('.toggle-switch input'); toggles.forEach(toggle => { toggle.addEventListener('change', function(e) { // Create ripple effect const toggleContainer = this.closest('.toggle-container'); const glowEffect = toggleContainer.querySelector('.glow-effect'); // Reset animation glowEffect.style.animation = 'none'; glowEffect.offsetHeight; // Trigger reflow // Get click position relative to toggle container const rect = toggleContainer.getBoundingClientRect(); const clickX = e.clientX - rect.left; const clickY = e.clientY - rect.top; // Position and animate the glow effect glowEffect.style.left = `${clickX}px`; glowEffect.style.top = `${clickY}px`; glowEffect.style.animation = 'ripple 0.6s forwards'; // Handle specific toggle states if (this.id === 'locationToggle') { const badge = document.getElementById('locationBadge'); if (this.checked) { badge.textContent = 'Limited'; badge.classList.add('on'); } else { badge.textContent = 'Off'; badge.classList.remove('on'); } } if (this.id === 'darkModeToggle') { updateThemeVisualizer(this.checked); } }); }); // Theme cards interaction const lightThemeCard = document.getElementById('lightThemeCard'); const darkThemeCard = document.getElementById('darkThemeCard'); const darkModeToggle = document.getElementById('darkModeToggle'); function updateThemeVisualizer(isDarkMode) { if (isDarkMode) { lightThemeCard.classList.remove('active'); darkThemeCard.classList.add('active'); } else { darkThemeCard.classList.remove('active'); lightThemeCard.classList.add('active'); } } // Initialize theme visualizer based on current toggle state updateThemeVisualizer(darkModeToggle.checked); // Theme card click handlers lightThemeCard.addEventListener('click', () => { darkModeToggle.checked = false; updateThemeVisualizer(false); // Trigger a synthetic change event to show animation const event = new Event('change', { bubbles: true, cancelable: true, }); darkModeToggle.dispatchEvent(event); }); darkThemeCard.addEventListener('click', () => { darkModeToggle.checked = true; updateThemeVisualizer(true); // Trigger a synthetic change event to show animation const event = new Event('change', { bubbles: true, cancelable: true, }); darkModeToggle.dispatchEvent(event); }); // Add hover interaction for toggles document.querySelectorAll('.toggle-container').forEach(container => { container.addEventListener('mouseenter', () => { const label = container.querySelector('.toggle-label'); if (label) { label.style.color = '#000'; } }); container.addEventListener('mouseleave', () => { const label = container.querySelector('.toggle-label'); if (label) { label.style.color = '#333'; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Finesse Banking Controls</title> <style> :root { --primary-dark: #1a2b47; --primary-medium: #34495e; --primary-light: #546e7a; --accent-blue: #3498db; --accent-green: #2ecc71; --accent-red: #e74c3c; --accent-gold: #f39c12; --text-color: #333; --text-light: #7f8c8d; --background: #f9f9f9; --card-bg: #ffffff; --shadow-soft: 0 10px 20px rgba(0,0,0,0.05); --shadow-strong: 0 15px 30px rgba(0,0,0,0.1); --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body { background-color: var(--background); color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 1.5rem; overflow-x: hidden; } .container { width: 100%; max-width: 680px; margin: 0 auto; } h1 { font-size: 1.75rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.5rem; position: relative; } h1::after { content: ""; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-green)); margin-top: 8px; border-radius: 2px; } .subtitle { font-size: 0.95rem; color: var(--text-light); margin-bottom: 2rem; line-height: 1.5; } .settings-group { background-color: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 1.5rem; margin-bottom: 1.5rem; transition: var(--transition-standard); } .settings-group:hover { box-shadow: var(--shadow-strong); } .settings-group h2 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--primary-dark); display: flex; align-items: center; } .settings-group h2 svg { margin-right: 10px; color: var(--accent-blue); } .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .setting-item:last-child { border-bottom: none; padding-bottom: 0; } .setting-info { flex: 1; } .setting-label { font-weight: 600; color: var(--primary-medium); margin-bottom: 0.25rem; transition: var(--transition-standard); } .setting-description { font-size: 0.85rem; color: var(--text-light); line-height: 1.4; max-width: 85%; } .toggle-wrapper { position: relative; display: inline-block; width: 52px; height: 28px; margin-left: 1rem; } .toggle-wrapper input { opacity: 0; width: 0; height: 0; } .toggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #e0e0e0, #d5d5d5); border-radius: 28px; transition: var(--transition-standard); box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } .toggle:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: var(--transition-standard); box-shadow: 0 1px 3px rgba(0,0,0,0.15); } input:checked + .toggle.security { background: linear-gradient(135deg, #3498db, #2980b9); } input:checked + .toggle.alerts { background: linear-gradient(135deg, #2ecc71, #27ae60); } input:checked + .toggle.payments { background: linear-gradient(135deg, #f39c12, #e67e22); } input:checked + .toggle.privacy { background: linear-gradient(135deg, #9b59b6, #8e44ad); } input:checked + .toggle:before { transform: translateX(24px); } input:focus + .toggle { box-shadow: 0 0 1px var(--accent-blue); } .active-indicator { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; margin-left: 10px; opacity: 0; transition: var(--transition-standard); transform: translateY(8px); } .active-on { background-color: rgba(46, 204, 113, 0.15); color: #27ae60; } .active-off { background-color: rgba(231, 76, 60, 0.15); color: #c0392b; } input:checked ~ .active-on { opacity: 1; transform: translateY(0); } input:not(:checked) ~ .active-off { opacity: 1; transform: translateY(0); } .setting-item.locked { opacity: 0.7; cursor: not-allowed; } .setting-item.locked .toggle { pointer-events: none; background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 5px, #e0e0e0 5px, #e0e0e0 10px); } .lock-icon { display: inline-block; margin-left: 8px; color: var(--text-light); } .save-panel { display: flex; align-items: center; justify-content: space-between; background-color: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 1.25rem; margin-top: 1rem; transition: var(--transition-standard); opacity: 0; transform: translateY(20px); animation: fade-in 0.5s forwards; animation-delay: 0.3s; } @keyframes fade-in { to { opacity: 1; transform: translateY(0); } } .save-status { display: flex; align-items: center; font-size: 0.9rem; color: var(--text-light); } .status-icon { width: 18px; height: 18px; margin-right: 8px; } .save-button { background: linear-gradient(135deg, var(--accent-blue), #2980b9); color: white; border: none; padding: 0.65rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition-standard); box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3); } .save-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4); } .save-button:active { transform: translateY(0); } .save-button.saving { background: linear-gradient(135deg, #bdc3c7, #95a5a6); pointer-events: none; } .premium-badge { display: inline-flex; align-items: center; font-size: 0.7rem; background: linear-gradient(135deg, #f1c40f, #f39c12); color: white; padding: 2px 6px; border-radius: 4px; margin-left: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .pulse { animation: pulse-animation 2s infinite; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(243, 156, 18, 0); } 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); } } .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .last-updated { font-size: 0.8rem; color: var(--text-light); } .ripple { position: absolute; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.6s; } @keyframes ripple { to { transform: scale(2); opacity: 0; } } @media (max-width: 600px) { .settings-group { padding: 1.2rem; } .setting-item { flex-direction: column; align-items: flex-start; } .toggle-wrapper { margin-left: 0; margin-top: 0.8rem; } .setting-description { max-width: 100%; margin-bottom: 0.5rem; } h1 { font-size: 1.5rem; } } </style> </head> <body> <div class="container"> <div class="settings-header"> <div> <h1>Security & Preferences</h1> <p class="subtitle">Customize your banking experience with these security and privacy controls</p> </div> <p class="last-updated">Last updated: <span id="lastUpdated">Just now</span></p> </div> <div class="settings-group"> <h2> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1ZM12 11.99H19C18.47 16.11 15.72 19.78 12 20.93V12H5V6.3L12 3.19V11.99Z" fill="currentColor"/> </svg> Account Security </h2> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Two-Factor Authentication</div> <div class="setting-description">Require a verification code in addition to your password when signing in from new devices.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="twoFactor" checked> <span class="toggle security"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Biometric Login</div> <div class="setting-description">Use your fingerprint or face recognition to quickly access your account.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="biometric"> <span class="toggle security"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Device Recognition</div> <div class="setting-description">Remember devices you've safely used before to reduce login prompts.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="deviceRecognition" checked> <span class="toggle security"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> </div> <div class="settings-group"> <h2> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z" fill="currentColor"/> </svg> Notifications & Alerts </h2> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Transaction Alerts</div> <div class="setting-description">Receive real-time notifications when purchases exceed your set threshold.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="transactionAlerts" checked> <span class="toggle alerts"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Account Balance Updates</div> <div class="setting-description">Get regular notifications about your account balance changes.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="balanceAlerts"> <span class="toggle alerts"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Suspicious Activity Alerts</div> <div class="setting-description">Be notified immediately of any unusual activity on your account.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="suspiciousAlerts" checked> <span class="toggle alerts"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> </div> <div class="settings-group"> <h2> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-15a3 3 0 00-3 3v4a3 3 0 006 0v-4a3 3 0 00-3-3zm0 2a1 1 0 011 1v4a1 1 0 11-2 0v-4a1 1 0 011-1z" fill="currentColor"/> </svg> Payment Features </h2> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">Contactless Payments</div> <div class="setting-description">Enable tap-to-pay functionality for your linked cards.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="contactlessPayments" checked> <span class="toggle payments"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> <div class="setting-item"> <div class="setting-info"> <div class="setting-label">International Transactions</div> <div class="setting-description">Allow your cards to be used for purchases in foreign countries.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="internationalTransactions"> <span class="toggle payments"></span> <span class="active-indicator active-on">ON</span> <span class="active-indicator active-off">OFF</span> </label> </div> <div class="setting-item locked"> <div class="setting-info"> <div class="setting-label"> Instant Money Transfers <span class="premium-badge pulse">Premium</span> </div> <div class="setting-description">Transfer funds instantly to any account with zero processing time.</div> </div> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" disabled> <span class="toggle payments"></span> <svg class="lock-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 10h-1V7c0-3.9-3.1-7-7-7S4 3.1 4 7v3H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm-9 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.1-9H9.9V7c0-1.2 1-2.2 2.1-2.2 1.2 0 2.1 1 2.1 2.2v3z" fill="currentColor"/> </svg> </label> </div> </div> <div class="save-panel"> <div class="save-status"> <svg class="status-icon" id="statusIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#2ecc71"/> </svg> <span id="saveStatus">All changes are automatically saved</span> </div> <button class="save-button" id="saveButton">Apply Changes</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggleInputs = document.querySelectorAll('.toggle-input'); const saveButton = document.getElementById('saveButton'); const saveStatus = document.getElementById('saveStatus'); const statusIcon = document.getElementById('statusIcon'); const lastUpdated = document.getElementById('lastUpdated'); // Initial states let hasChanges = false; const originalStates = {}; // Store original states toggleInputs.forEach(input => { if (!input.disabled) { originalStates[input.id] = input.checked; input.addEventListener('change', function() { hasChanges = true; saveButton.textContent = "Apply Changes"; saveButton.classList.remove('saving'); saveStatus.textContent = "You have unsaved changes"; statusIcon.innerHTML = `<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#f39c12"/>`; }); } }); // Apply ripple effect on toggles document.querySelectorAll('.toggle').forEach(toggle => { toggle.addEventListener('click', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Save button functionality saveButton.addEventListener('click', function() { if (!hasChanges) return; // Show saving state saveButton.textContent = "Saving..."; saveButton.classList.add('saving'); // Simulate saving delay setTimeout(() => { // Update original states toggleInputs.forEach(input => { if (!input.disabled) { originalStates[input.id] = input.checked; } }); // Reset state hasChanges = false; saveButton.textContent = "Changes Applied"; saveButton.classList.remove('saving'); saveStatus.textContent = "All changes are saved"; statusIcon.innerHTML = `<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#2ecc71"/>`; // Update timestamp const now = new Date(); const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); lastUpdated.textContent = timeStr; // Reset button after delay setTimeout(() => { saveButton.textContent = "Apply Changes"; }, 2000); }, 1500); }); // Set current time const now = new Date(); const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); lastUpdated.textContent = timeStr; }); </script> </body> </html>
<html> <head> <style> :root { --primary-color: #00ffbb; --secondary-color: #ff00ff; --bg-color: #0a0a12; --panel-bg: #12121f; --text-color: #ffffff; --neon-glow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color); --magenta-glow: 0 0 5px var(--secondary-color), 0 0 15px var(--secondary-color); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } body { background: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; } .container { width: 100%; max-width: 680px; height: 680px; padding: 20px; position: relative; overflow: hidden; } .console-dashboard { background: var(--panel-bg); border-radius: 15px; padding: 30px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .console-dashboard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(0, 255, 187, 0.1), rgba(255, 0, 255, 0.1)); z-index: -1; } .grid-lines { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: -1; } .dashboard-header { margin-bottom: 30px; text-align: center; position: relative; } h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(0, 255, 187, 0.5); } .settings-subtitle { font-size: 1rem; opacity: 0.8; margin-bottom: 20px; } .power-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } .status-indicator { width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); animation: pulse 2s infinite; } .status-text { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; } .settings-section { flex: 1; overflow-y: auto; mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%); scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--panel-bg); padding-right: 10px; } .settings-section::-webkit-scrollbar { width: 5px; } .settings-section::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .settings-section::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } .settings-group { margin-bottom: 30px; position: relative; } .settings-group-title { font-size: 1.2rem; margin-bottom: 15px; position: relative; display: inline-block; color: var(--primary-color); font-weight: 600; } .settings-group-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, var(--primary-color), transparent); } .toggle-setting { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 12px 15px; background: rgba(0, 0, 0, 0.3); border-radius: 10px; transition: all 0.3s ease; position: relative; overflow: hidden; } .toggle-setting:hover { background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 15px rgba(0, 255, 187, 0.1); } .toggle-setting::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--primary-color); opacity: 0; transition: opacity 0.3s ease; } .toggle-setting:hover::before { opacity: 1; } .setting-info { flex: 1; } .setting-title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; } .setting-description { font-size: 0.85rem; opacity: 0.7; line-height: 1.3; } .priority-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; margin-left: 10px; display: inline-block; vertical-align: middle; background: rgba(255, 0, 255, 0.2); color: var(--secondary-color); } .toggle-switch { position: relative; width: 60px; height: 30px; margin-left: 15px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); border-radius: 30px; overflow: hidden; } .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); border-radius: 50%; z-index: 2; } input:checked + .toggle-slider { background-color: rgba(0, 255, 187, 0.5); } input:checked + .toggle-slider:before { transform: translateX(30px); } .circuit-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .toggle-switch input:checked ~ .circuit-lines { opacity: 1; } .circuit-line { position: absolute; background: var(--primary-color); height: 1px; transform-origin: left center; box-shadow: var(--neon-glow); animation-duration: 0.5s; animation-fill-mode: both; } .c-line-1 { width: 10px; top: 10px; left: 4px; transform: rotate(-45deg); animation-name: circuit-animate-1; } .c-line-2 { width: 20px; top: 15px; left: 15px; animation-name: circuit-animate-2; } .c-line-3 { width: 10px; top: 20px; left: 35px; transform: rotate(45deg); animation-name: circuit-animate-3; } .c-line-4 { width: 15px; top: 23px; left: 40px; transform: rotate(-30deg); animation-name: circuit-animate-4; } @keyframes circuit-animate-1 { 0% { transform: rotate(-45deg) scale(0); opacity: 0; } 40% { transform: rotate(-45deg) scale(1); opacity: 1; } 100% { transform: rotate(-45deg) scale(1); opacity: 1; } } @keyframes circuit-animate-2 { 0% { transform: scaleX(0); opacity: 0; } 40% { transform: scaleX(0); opacity: 0; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes circuit-animate-3 { 0% { transform: rotate(45deg) scale(0); opacity: 0; } 60% { transform: rotate(45deg) scale(0); opacity: 0; } 90% { transform: rotate(45deg) scale(1); opacity: 1; } 100% { transform: rotate(45deg) scale(1); opacity: 1; } } @keyframes circuit-animate-4 { 0% { transform: rotate(-30deg) scale(0); opacity: 0; } 70% { transform: rotate(-30deg) scale(0); opacity: 0; } 100% { transform: rotate(-30deg) scale(1); opacity: 1; } } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .slider-value { display: flex; justify-content: space-between; margin-top: 5px; } .slider-container { margin-top: 10px; position: relative; padding-bottom: 20px; } .range-slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); outline: none; box-shadow: 0 0 5px rgba(0, 255, 187, 0.5); } .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: white; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: all 0.2s ease; } .range-slider::-webkit-slider-thumb:hover { background: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); } .range-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: white; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: all 0.2s ease; border: none; } .range-slider::-moz-range-thumb:hover { background: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); } .slider-value { color: var(--text-color); font-size: 0.85rem; opacity: 0.8; } .dashboard-footer { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; font-size: 0.9rem; text-align: center; opacity: 0.7; display: flex; justify-content: space-between; align-items: center; } .console-id { font-family: monospace; letter-spacing: 1px; } .version-info { font-size: 0.8rem; } @keyframes glitch { 0% { clip-path: inset(40% 0 61% 0); transform: translate(-20px, -10px); } 20% { clip-path: inset(92% 0 1% 0); transform: translate(20px, 10px); } 40% { clip-path: inset(43% 0 1% 0); transform: translate(-20px, -10px); } 60% { clip-path: inset(25% 0 58% 0); transform: translate(20px, 10px); } 80% { clip-path: inset(54% 0 7% 0); transform: translate(-20px, -10px); } 100% { clip-path: inset(58% 0 43% 0); transform: translate(20px, 10px); } } .glitch-effect { position: relative; } .glitch-effect::before, .glitch-effect::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--panel-bg); } .glitch-effect::before { left: 2px; text-shadow: -1px 0 var(--secondary-color); animation: glitch 0.3s infinite linear alternate-reverse; } .glitch-effect::after { left: -2px; text-shadow: 1px 0 var(--primary-color); animation: glitch 0.3s infinite linear alternate-reverse; } /* For mobile responsiveness */ @media (max-width: 500px) { .console-dashboard { padding: 15px; } h1 { font-size: 1.8rem; } .toggle-setting { flex-direction: column; align-items: flex-start; } .toggle-switch { margin-left: 0; margin-top: 15px; align-self: flex-end; } .dashboard-footer { flex-direction: column; gap: 10px; } } .eco-mode-active { background: rgba(0, 255, 187, 0.1) !important; } .performance-mode-active { background: rgba(255, 0, 255, 0.1) !important; } .settings-info-tooltip { position: absolute; top: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer; } .settings-info-tooltip:hover { background: var(--primary-color); color: var(--bg-color); } .tooltip-text { visibility: hidden; position: absolute; right: 30px; top: 0; width: 200px; background: var(--panel-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 5px; padding: 8px; font-size: 0.8rem; opacity: 0; transition: all 0.3s ease; transform: translateY(-10px); z-index: 10; } .settings-info-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; transform: translateY(0); } </style> </head> <body> <div class="container"> <div class="console-dashboard"> <div class="grid-lines"></div> <div class="dashboard-header"> <h1>Nebula X Console</h1> <p class="settings-subtitle">Performance Configuration Hub</p> <div class="power-status"> <div class="status-indicator"></div> <span class="status-text">System Active</span> </div> </div> <div class="settings-section"> <div class="settings-group"> <span class="settings-group-title">Performance</span> <div class="settings-info-tooltip">? <span class="tooltip-text">Optimize your gaming experience with these performance-related settings.</span> </div> <div class="toggle-setting" id="boost-mode"> <div class="setting-info"> <div class="setting-title">Boost Mode <span class="priority-tag">Pro</span></div> <div class="setting-description">Unlocks extra processing power for enhanced framerates in demanding games</div> </div> <label class="toggle-switch"> <input type="checkbox" id="boost-mode-toggle"> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="toggle-setting" id="ray-tracing"> <div class="setting-info"> <div class="setting-title">Ray Tracing</div> <div class="setting-description">Enables realistic lighting and reflections at the cost of performance</div> </div> <label class="toggle-switch"> <input type="checkbox" id="ray-tracing-toggle"> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="toggle-setting" id="adaptive-resolution"> <div class="setting-info"> <div class="setting-title">Adaptive Resolution Scaling</div> <div class="setting-description">Dynamically adjusts resolution to maintain target framerate</div> </div> <label class="toggle-switch"> <input type="checkbox" id="adaptive-resolution-toggle" checked> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="slider-container"> <div class="setting-title">Fan Speed Control</div> <input type="range" min="0" max="100" value="60" class="range-slider" id="fan-speed"> <div class="slider-value"> <span>Silent</span> <span id="fan-speed-value">60%</span> <span>Turbo</span> </div> </div> </div> <div class="settings-group"> <span class="settings-group-title">Power & Efficiency</span> <div class="toggle-setting" id="eco-mode"> <div class="setting-info"> <div class="setting-title">Eco Mode</div> <div class="setting-description">Reduces power consumption and extends battery life during gameplay</div> </div> <label class="toggle-switch"> <input type="checkbox" id="eco-mode-toggle"> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="toggle-setting" id="quick-resume"> <div class="setting-info"> <div class="setting-title">Quick Resume <span class="priority-tag">New</span></div> <div class="setting-description">Suspend multiple games and switch between them instantly</div> </div> <label class="toggle-switch"> <input type="checkbox" id="quick-resume-toggle" checked> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="toggle-setting" id="auto-standby"> <div class="setting-info"> <div class="setting-title">Auto Standby</div> <div class="setting-description">Puts console to sleep after period of inactivity to save power</div> </div> <label class="toggle-switch"> <input type="checkbox" id="auto-standby-toggle" checked> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> </div> <div class="settings-group"> <span class="settings-group-title">Visual Experience</span> <div class="toggle-setting" id="hdr"> <div class="setting-info"> <div class="setting-title">HDR Enhancement</div> <div class="setting-description">Delivers brighter highlights and deeper blacks on compatible displays</div> </div> <label class="toggle-switch"> <input type="checkbox" id="hdr-toggle" checked> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="toggle-setting" id="motion-blur"> <div class="setting-info"> <div class="setting-title">Motion Blur Reduction</div> <div class="setting-description">Minimizes blur during fast movements for clearer action sequences</div> </div> <label class="toggle-switch"> <input type="checkbox" id="motion-blur-toggle"> <span class="toggle-slider"></span> <div class="circuit-lines"> <div class="circuit-line c-line-1"></div> <div class="circuit-line c-line-2"></div> <div class="circuit-line c-line-3"></div> <div class="circuit-line c-line-4"></div> </div> </label> </div> <div class="slider-container"> <div class="setting-title">RGB Lighting Intensity</div> <input type="range" min="0" max="100" value="80" class="range-slider" id="rgb-intensity"> <div class="slider-value"> <span>Off</span> <span id="rgb-intensity-value">80%</span> <span>Max</span> </div> </div> </div> </div> <div class="dashboard-footer"> <div class="console-id">NX-9387-D</div> <div class="version-info">Firmware v3.6.2 | <span class="glitch-effect" data-text="QUANTUM">QUANTUM</span> Core</div> </div> </div> </div> <script> // Toggle switches functionality with animation const toggles = document.querySelectorAll('input[type="checkbox"]'); toggles.forEach(toggle => { toggle.addEventListener('change', function() { const settingId = this.id.replace('-toggle', ''); const settingElement = document.getElementById(settingId); // Reset animations const circuitLines = this.parentElement.querySelectorAll('.circuit-line'); circuitLines.forEach(line => { line.style.animation = 'none'; line.offsetHeight; // Force reflow line.style.animation = null; }); // Special effects for eco and performance modes if (settingId === 'eco-mode') { if (this.checked) { settingElement.classList.add('eco-mode-active'); // Disable boost mode when eco mode is on const boostToggle = document.getElementById('boost-mode-toggle'); if (boostToggle.checked) { boostToggle.checked = false; document.getElementById('boost-mode').classList.remove('performance-mode-active'); } } else { settingElement.classList.remove('eco-mode-active'); } } if (settingId === 'boost-mode') { if (this.checked) { settingElement.classList.add('performance-mode-active'); // Disable eco mode when boost mode is on const ecoToggle = document.getElementById('eco-mode-toggle'); if (ecoToggle.checked) { ecoToggle.checked = false; document.getElementById('eco-mode').classList.remove('eco-mode-active'); } } else { settingElement.classList.remove('performance-mode-active'); } } // Subtle feedback animations on toggle if (this.checked) { settingElement.style.boxShadow = '0 0 15px rgba(0, 255, 187, 0.3)'; setTimeout(() => { settingElement.style.boxShadow = ''; }, 500); } else { settingElement.style.boxShadow = '0 0 15px rgba(255, 0, 0, 0.3)'; setTimeout(() => { settingElement.style.boxShadow = ''; }, 500); } }); }); // Range sliders const fanSpeedSlider = document.getElementById('fan-speed'); const fanSpeedValue = document.getElementById('fan-speed-value'); fanSpeedSlider.addEventListener('input', function() { fanSpeedValue.textContent = `${this.value}%`; // Change the hue of the slider based on value const hue = 180 - (this.value * 1.8); // 180 (cyan) at 0, 0 (red) at 100 this.style.background = `linear-gradient(to right, hsl(${hue}, 100%, 50%), hsl(${hue-40}, 100%, 50%))`; // If fan speed is high, enable glow effect if (this.value > 80) { this.style.boxShadow = '0 0 10px rgba(255, 0, 0, 0.7)'; } else { this.style.boxShadow = '0 0 5px rgba(0, 255, 187, 0.5)'; } }); const rgbSlider = document.getElementById('rgb-intensity'); const rgbValue = document.getElementById('rgb-intensity-value'); rgbSlider.addEventListener('input', function() { rgbValue.textContent = `${this.value}%`; // Create rainbow effect based on value const saturation = 100; const lightness = 50; this.style.background = `linear-gradient(to right, hsl(0, ${saturation}%, ${lightness}%), hsl(60, ${saturation}%, ${lightness}%), hsl(120, ${saturation}%, ${lightness}%), hsl(180, ${saturation}%, ${lightness}%), hsl(240, ${saturation}%, ${lightness}%), hsl(300, ${saturation}%, ${lightness}%) )`; // Apply intensity to the dashboard border const dashboardEl = document.querySelector('.console-dashboard'); if (this.value > 0) { dashboardEl.style.boxShadow = `0 0 ${this.value/5}px rgba(${this.value/100 * 255}, 0, ${this.value/100 * 255}, 0.8)`; } else { dashboardEl.style.boxShadow = '0 0 25px rgba(0, 0, 0, 0.5)'; } }); // Trigger the input event to initialize sliders fanSpeedSlider.dispatchEvent(new Event('input')); rgbSlider.dispatchEvent(new Event('input')); // Add a subtle pulse animation to the dashboard const dashboard = document.querySelector('.console-dashboard'); let pulseDirection = 1; let pulseValue = 0; function pulseDashboard() { pulseValue += 0.2 * pulseDirection; if (pulseValue >= 10) pulseDirection = -1; if (pulseValue <= 0) pulseDirection = 1; dashboard.style.boxShadow = `0 0 ${20 + pulseValue}px rgba(0, 0, 0, 0.5)`; requestAnimationFrame(pulseDashboard); } pulseDashboard(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Filters</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } :root { --primary: #b5ddd1; --primary-dark: #8ecab8; --secondary: #f7d6e0; --secondary-dark: #f2b5c9; --tertiary: #ffe2b6; --tertiary-dark: #ffd294; --quaternary: #b5c6e0; --quaternary-dark: #9db3d9; --text: #2b3044; --text-light: #6e7891; --bg: #f8f9fc; --border: #e2e6ee; } body { background-color: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .filter-container { background-color: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); width: 100%; max-width: 650px; overflow: hidden; position: relative; } .filter-header { padding: 24px 30px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .filter-header h2 { font-weight: 600; font-size: 20px; } .reset-button { background: none; border: none; color: var(--text-light); font-size: 14px; cursor: pointer; transition: color 0.3s; position: relative; padding-bottom: 2px; } .reset-button:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--text); transition: width 0.3s ease; } .reset-button:hover { color: var(--text); } .reset-button:hover:after { width: 100%; } .filter-body { padding: 20px 30px 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .filter-section { display: flex; flex-direction: column; gap: 18px; } .filter-section h3 { font-size: 16px; font-weight: 600; margin-bottom: -6px; } .filter-option { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: var(--bg); border-radius: 10px; transition: all 0.3s ease; cursor: pointer; } .filter-option:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .filter-label { display: flex; align-items: center; gap: 10px; font-size: 14px; } .color-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; } .toggle { position: relative; width: 38px; height: 22px; background-color: var(--border); border-radius: 22px; transition: background-color 0.3s ease; } .toggle:before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background-color: white; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .toggle.active:before { transform: translateX(16px); } .toggle.active.price { background-color: var(--primary); } .toggle.active.color { background-color: var(--secondary); } .toggle.active.brand { background-color: var(--tertiary); } .toggle.active.size { background-color: var(--quaternary); } .active-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 30px 20px; transition: all 0.3s ease; opacity: 0; max-height: 0; overflow: hidden; } .active-filters.visible { opacity: 1; max-height: 100px; padding-top: 10px; } .filter-tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; gap: 8px; transition: all 0.3s ease; animation: tagAppear 0.4s forwards; transform: scale(0.9); opacity: 0; } .filter-tag.price { background-color: var(--primary); color: var(--text); } .filter-tag.color { background-color: var(--secondary); color: var(--text); } .filter-tag.brand { background-color: var(--tertiary); color: var(--text); } .filter-tag.size { background-color: var(--quaternary); color: var(--text); } .tag-remove { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.1); color: var(--text); font-size: 10px; transition: all 0.3s ease; } .tag-remove:hover { background-color: rgba(0, 0, 0, 0.2); } .results-count { background-color: var(--primary); border-radius: 30px; padding: 10px 0; text-align: center; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(80px); width: 250px; font-size: 14px; font-weight: 500; box-shadow: 0 5px 20px rgba(181, 221, 209, 0.5); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10; opacity: 0; } .results-count.visible { transform: translateX(-50%) translateY(0); opacity: 1; } .results-count span { font-weight: 600; } @keyframes tagAppear { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 600px) { .filter-body { grid-template-columns: 1fr; gap: 20px; } .filter-header { padding: 20px 20px 16px; } .filter-body, .active-filters { padding-left: 20px; padding-right: 20px; } } </style> </head> <body> <div class="filter-container"> <div class="filter-header"> <h2>Filter Products</h2> <button class="reset-button" id="resetButton">Reset all filters</button> </div> <div class="active-filters" id="activeFilters"></div> <div class="filter-body"> <div class="filter-section"> <h3>Price Range</h3> <div class="filter-option" data-type="price" data-value="Under $50"> <div class="filter-label">Under $50</div> <div class="toggle price"></div> </div> <div class="filter-option" data-type="price" data-value="$50 - $100"> <div class="filter-label">$50 - $100</div> <div class="toggle price"></div> </div> <div class="filter-option" data-type="price" data-value="$100 - $200"> <div class="filter-label">$100 - $200</div> <div class="toggle price"></div> </div> <div class="filter-option" data-type="price" data-value="$200+"> <div class="filter-label">$200+</div> <div class="toggle price"></div> </div> </div> <div class="filter-section"> <h3>Color</h3> <div class="filter-option" data-type="color" data-value="Sage"> <div class="filter-label"> <span class="color-dot" style="background-color: #c5d8a4;"></span> Sage </div> <div class="toggle color"></div> </div> <div class="filter-option" data-type="color" data-value="Blush"> <div class="filter-label"> <span class="color-dot" style="background-color: #f4c7c2;"></span> Blush </div> <div class="toggle color"></div> </div> <div class="filter-option" data-type="color" data-value="Lavender"> <div class="filter-label"> <span class="color-dot" style="background-color: #d8c2f3;"></span> Lavender </div> <div class="toggle color"></div> </div> <div class="filter-option" data-type="color" data-value="Sky Blue"> <div class="filter-label"> <span class="color-dot" style="background-color: #a6cfd5;"></span> Sky Blue </div> <div class="toggle color"></div> </div> </div> <div class="filter-section"> <h3>Brand</h3> <div class="filter-option" data-type="brand" data-value="Serene Home"> <div class="filter-label">Serene Home</div> <div class="toggle brand"></div> </div> <div class="filter-option" data-type="brand" data-value="Coastal Living"> <div class="filter-label">Coastal Living</div> <div class="toggle brand"></div> </div> <div class="filter-option" data-type="brand" data-value="Nordic Essence"> <div class="filter-label">Nordic Essence</div> <div class="toggle brand"></div> </div> <div class="filter-option" data-type="brand" data-value="Urban Jungle"> <div class="filter-label">Urban Jungle</div> <div class="toggle brand"></div> </div> </div> <div class="filter-section"> <h3>Size</h3> <div class="filter-option" data-type="size" data-value="Small"> <div class="filter-label">Small</div> <div class="toggle size"></div> </div> <div class="filter-option" data-type="size" data-value="Medium"> <div class="filter-label">Medium</div> <div class="toggle size"></div> </div> <div class="filter-option" data-type="size" data-value="Large"> <div class="filter-label">Large</div> <div class="toggle size"></div> </div> <div class="filter-option" data-type="size" data-value="Extra Large"> <div class="filter-label">Extra Large</div> <div class="toggle size"></div> </div> </div> </div> </div> <div class="results-count" id="resultsCount"> Showing <span id="resultsNumber">0</span> products </div> <script> document.addEventListener('DOMContentLoaded', function() { const filterOptions = document.querySelectorAll('.filter-option'); const activeFilters = document.getElementById('activeFilters'); const resetButton = document.getElementById('resetButton'); const resultsCount = document.getElementById('resultsCount'); const resultsNumber = document.getElementById('resultsNumber'); let activeCount = 0; let animationDelay = 0; // Add click event to all filter options filterOptions.forEach(option => { option.addEventListener('click', function() { const toggle = this.querySelector('.toggle'); const type = this.getAttribute('data-type'); const value = this.getAttribute('data-value'); toggle.classList.toggle('active'); if (toggle.classList.contains('active')) { addFilterTag(type, value); activeCount++; } else { removeFilterTag(type, value); activeCount--; } updateUI(); }); }); // Reset all filters resetButton.addEventListener('click', function() { const activeTags = document.querySelectorAll('.filter-tag'); const activeToggles = document.querySelectorAll('.toggle.active'); activeToggles.forEach(toggle => toggle.classList.remove('active')); activeTags.forEach(tag => { tag.style.transform = 'scale(0.9)'; tag.style.opacity = '0'; setTimeout(() => { tag.remove(); }, 300); }); activeCount = 0; updateUI(); // Add reset button animation this.style.animation = 'pulse 0.4s ease'; setTimeout(() => { this.style.animation = ''; }, 400); }); // Add filter tag function addFilterTag(type, value) { // Check if tag already exists const existingTag = Array.from(document.querySelectorAll('.filter-tag')).find(tag => tag.getAttribute('data-type') === type && tag.getAttribute('data-value') === value ); if (existingTag) return; const tag = document.createElement('div'); tag.className = `filter-tag ${type}`; tag.setAttribute('data-type', type); tag.setAttribute('data-value', value); tag.style.animationDelay = `${animationDelay}ms`; animationDelay += 50; tag.innerHTML = ` ${value} <button class="tag-remove" aria-label="Remove filter">×</button> `; tag.querySelector('.tag-remove').addEventListener('click', (e) => { e.stopPropagation(); // Find and deactivate the corresponding toggle const correspondingOption = Array.from(filterOptions).find(option => option.getAttribute('data-type') === type && option.getAttribute('data-value') === value ); if (correspondingOption) { correspondingOption.querySelector('.toggle').classList.remove('active'); } // Remove the tag with animation tag.style.transform = 'scale(0.9)'; tag.style.opacity = '0'; setTimeout(() => { tag.remove(); activeCount--; updateUI(); }, 300); }); activeFilters.appendChild(tag); } // Remove filter tag function removeFilterTag(type, value) { const tag = Array.from(document.querySelectorAll('.filter-tag')).find(tag => tag.getAttribute('data-type') === type && tag.getAttribute('data-value') === value ); if (tag) { tag.style.transform = 'scale(0.9)'; tag.style.opacity = '0'; setTimeout(() => { tag.remove(); }, 300); } } // Update UI based on active filters function updateUI() { if (activeCount > 0) { activeFilters.classList.add('visible'); resultsCount.classList.add('visible'); resultsNumber.textContent = Math.floor(Math.random() * 50) + 10; // Random number for demo } else { activeFilters.classList.remove('visible'); resultsCount.classList.remove('visible'); setTimeout(() => { resultsNumber.textContent = '0'; }, 400); } // Reset animation delay after all animations are done setTimeout(() => { animationDelay = 0; }, 500); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusControl IoT Interface</title> <style> :root { --dark-metal: #1a1d21; --light-metal: #3c434e; --accent-blue: #00e1ff; --accent-purple: #8a2be2; --glow: 0 0 10px var(--accent-blue), 0 0 20px rgba(0, 225, 255, 0.4); --toggle-transition: all 0.3s cubic-bezier(0.17, 0.84, 0.44, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Arial', sans-serif; user-select: none; } body { background: linear-gradient(135deg, #121417 0%, #1e242b 100%); color: #e0e0e0; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 600px; height: auto; background: var(--dark-metal); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 30px; } .container::before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(circle at center, transparent 60%, rgba(0, 225, 255, 0.05) 100%); animation: scanEffect 10s linear infinite; pointer-events: none; z-index: 0; } @keyframes scanEffect { 0% { transform: translateY(-50%); } 100% { transform: translateY(50%); } } .header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 1; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: var(--glow); } .logo-icon::before { content: "N"; color: white; font-weight: bold; font-size: 22px; } .logo-text { font-size: 24px; font-weight: 600; letter-spacing: 1px; background: linear-gradient(90deg, #e0e0e0, var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .system-status { display: flex; align-items: center; gap: 8px; } .status-indicator { width: 12px; height: 12px; background-color: var(--accent-blue); border-radius: 50%; animation: pulse 2s infinite; box-shadow: var(--glow); } @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } .status-text { font-size: 14px; color: #a0a0a0; } .device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; position: relative; z-index: 1; } .device-card { background: linear-gradient(135deg, #232830, #1a1d21); border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .device-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); } .device-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent); pointer-events: none; } .device-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .device-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: var(--accent-blue); } .device-title { font-size: 18px; font-weight: 600; color: #e0e0e0; margin-bottom: 5px; } .device-subtitle { font-size: 14px; color: #a0a0a0; margin-bottom: 20px; } .toggle-container { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .toggle-label { font-size: 16px; color: #c0c0c0; } .toggle-switch { position: relative; width: 60px; height: 34px; background: var(--light-metal); border-radius: 34px; cursor: pointer; transition: var(--toggle-transition); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); } .toggle-switch::before { content: ""; position: absolute; height: 26px; width: 26px; left: 4px; bottom: 3px; background: linear-gradient(135deg, #a0a0a0, #808080); border-radius: 50%; transition: var(--toggle-transition); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .toggle-switch.active { background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); box-shadow: 0 0 10px var(--accent-blue), inset 0 2px 10px rgba(0, 0, 0, 0.2); } .toggle-switch.active::before { transform: translateX(26px); background: linear-gradient(135deg, #ffffff, #e0e0e0); } .toggle-status { font-size: 14px; font-weight: 500; color: #a0a0a0; transition: color 0.3s ease; } .toggle-status.on { color: var(--accent-blue); } .device-metrics { margin-top: 20px; background: rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 10px; font-size: 14px; color: #a0a0a0; display: flex; justify-content: space-between; } .metric { display: flex; flex-direction: column; align-items: center; } .metric-value { font-size: 16px; font-weight: 600; color: #e0e0e0; margin-bottom: 2px; } .metric-label { font-size: 12px; color: #808080; } .dashboard-footer { margin-top: auto; text-align: center; font-size: 12px; color: #686868; position: relative; z-index: 1; } .usage-panel { background: rgba(0, 0, 0, 0.2); border-radius: 15px; padding: 20px; margin-top: 20px; position: relative; z-index: 1; } .usage-title { font-size: 18px; margin-bottom: 15px; color: #e0e0e0; } .usage-stats { display: flex; justify-content: space-between; gap: 15px; } .stat-card { flex: 1; background: var(--dark-metal); border-radius: 10px; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 24px; font-weight: 600; margin-bottom: 5px; color: var(--accent-blue); } .stat-label { font-size: 12px; color: #a0a0a0; text-align: center; } .notification { position: fixed; bottom: 20px; right: 20px; background: rgba(26, 29, 33, 0.9); border-left: 3px solid var(--accent-blue); padding: 15px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.17, 0.84, 0.44, 1); backdrop-filter: blur(10px); z-index: 1000; max-width: 300px; } .notification.show { transform: translateX(0); } .notification-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--accent-blue); } .notification-message { font-size: 12px; color: #c0c0c0; } @media (max-width: 600px) { .container { padding: 20px; border-radius: 15px; } .device-grid { grid-template-columns: 1fr; } .usage-stats { flex-direction: column; } .stat-card { margin-bottom: 10px; } .header { flex-direction: column; align-items: flex-start; gap: 10px; } .system-status { margin-top: 10px; } } /* Add ripple effect for buttons */ .toggle-switch { overflow: hidden; position: relative; } .ripple { position: absolute; width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark-metal); } ::-webkit-scrollbar-thumb { background: var(--light-metal); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #4c5464; } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">NexusControl</div> </div> <div class="system-status"> <div class="status-indicator"></div> <span class="status-text">System Online | 4 Devices Connected</span> </div> </div> <div class="device-grid"> <div class="device-card"> <div class="device-header"> <div class="device-icon">💡</div> </div> <h3 class="device-title">Smart Lighting</h3> <p class="device-subtitle">Ambient OLED Array</p> <div class="toggle-container"> <span class="toggle-label">Main Grid</span> <div class="toggle-switch" data-device="lighting-main"></div> <span class="toggle-status" data-status="lighting-main">OFF</span> </div> <div class="toggle-container"> <span class="toggle-label">Ambient Mode</span> <div class="toggle-switch" data-device="lighting-ambient"></div> <span class="toggle-status" data-status="lighting-ambient">OFF</span> </div> <div class="device-metrics"> <div class="metric"> <span class="metric-value">14.2W</span> <span class="metric-label">Power</span> </div> <div class="metric"> <span class="metric-value">85%</span> <span class="metric-label">Brightness</span> </div> <div class="metric"> <span class="metric-value">4200K</span> <span class="metric-label">Temperature</span> </div> </div> </div> <div class="device-card"> <div class="device-header"> <div class="device-icon">🌡️</div> </div> <h3 class="device-title">Climate Control</h3> <p class="device-subtitle">QuantumCool Network</p> <div class="toggle-container"> <span class="toggle-label">Auto Regulation</span> <div class="toggle-switch" data-device="climate-auto"></div> <span class="toggle-status" data-status="climate-auto">OFF</span> </div> <div class="toggle-container"> <span class="toggle-label">Eco Mode</span> <div class="toggle-switch" data-device="climate-eco"></div> <span class="toggle-status" data-status="climate-eco">OFF</span> </div> <div class="device-metrics"> <div class="metric"> <span class="metric-value">21.5°C</span> <span class="metric-label">Temperature</span> </div> <div class="metric"> <span class="metric-value">42%</span> <span class="metric-label">Humidity</span> </div> <div class="metric"> <span class="metric-value">720ppm</span> <span class="metric-label">CO₂</span> </div> </div> </div> <div class="device-card"> <div class="device-header"> <div class="device-icon">🔒</div> </div> <h3 class="device-title">Security System</h3> <p class="device-subtitle">NeuroShield Protocol</p> <div class="toggle-container"> <span class="toggle-label">Perimeter Sensors</span> <div class="toggle-switch" data-device="security-perimeter"></div> <span class="toggle-status" data-status="security-perimeter">OFF</span> </div> <div class="toggle-container"> <span class="toggle-label">Motion Detection</span> <div class="toggle-switch" data-device="security-motion"></div> <span class="toggle-status" data-status="security-motion">OFF</span> </div> <div class="device-metrics"> <div class="metric"> <span class="metric-value">0</span> <span class="metric-label">Alerts</span> </div> <div class="metric"> <span class="metric-value">4</span> <span class="metric-label">Cameras</span> </div> <div class="metric"> <span class="metric-value">98%</span> <span class="metric-label">Battery</span> </div> </div> </div> <div class="device-card"> <div class="device-header"> <div class="device-icon">🔌</div> </div> <h3 class="device-title">Power Management</h3> <p class="device-subtitle">FusionGrid Controller</p> <div class="toggle-container"> <span class="toggle-label">Smart Distribution</span> <div class="toggle-switch" data-device="power-smart"></div> <span class="toggle-status" data-status="power-smart">OFF</span> </div> <div class="toggle-container"> <span class="toggle-label">Solar Integration</span> <div class="toggle-switch" data-device="power-solar"></div> <span class="toggle-status" data-status="power-solar">OFF</span> </div> <div class="device-metrics"> <div class="metric"> <span class="metric-value">3.6kW</span> <span class="metric-label">Consumption</span> </div> <div class="metric"> <span class="metric-value">1.2kW</span> <span class="metric-label">Generation</span> </div> <div class="metric"> <span class="metric-value">78%</span> <span class="metric-label">Efficiency</span> </div> </div> </div> </div> <div class="usage-panel"> <h3 class="usage-title">System Overview</h3> <div class="usage-stats"> <div class="stat-card"> <div class="stat-value">24/7</div> <div class="stat-label">Online Uptime</div> </div> <div class="stat-card"> <div class="stat-value">27%</div> <div class="stat-label">Power Savings vs. Last Month</div> </div> <div class="stat-card"> <div class="stat-value">168h</div> <div class="stat-label">Data Retention Period</div> </div> </div> </div> <div class="dashboard-footer"> NexusControl™ Quantum Interface v4.2.8 | Industrial Control Systems </div> </div> <div class="notification" id="notification"> <div class="notification-title">Device Status Change</div> <div class="notification-message" id="notification-message"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Toggle switch functionality const toggleSwitches = document.querySelectorAll('.toggle-switch'); toggleSwitches.forEach(toggle => { toggle.addEventListener('click', function(e) { const deviceId = this.getAttribute('data-device'); const isActive = this.classList.toggle('active'); // Update status text const statusElement = document.querySelector(`[data-status="${deviceId}"]`); statusElement.textContent = isActive ? 'ON' : 'OFF'; statusElement.classList.toggle('on', isActive); // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); // Position ripple where clicked const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; // Remove ripple after animation setTimeout(() => { ripple.remove(); }, 600); // Show notification showNotification(deviceId, isActive); // Haptic feedback simulation if (navigator.vibrate) { navigator.vibrate(50); } }); }); // Function to show notifications function showNotification(deviceId, isActive) { const notification = document.getElementById('notification'); const notificationMessage = document.getElementById('notification-message'); // Set appropriate message based on device type let deviceName = ''; let actionDetail = ''; if (deviceId.includes('lighting')) { deviceName = deviceId.includes('main') ? 'Main Lighting' : 'Ambient Lighting'; actionDetail = isActive ? 'illuminating the space' : 'shutting down'; } else if (deviceId.includes('climate')) { deviceName = deviceId.includes('auto') ? 'Climate Auto Regulation' : 'Climate Eco Mode'; actionDetail = isActive ? 'optimizing environment' : 'manual control enabled'; } else if (deviceId.includes('security')) { deviceName = deviceId.includes('perimeter') ? 'Perimeter Security' : 'Motion Detection'; actionDetail = isActive ? 'actively monitoring' : 'surveillance paused'; } else if (deviceId.includes('power')) { deviceName = deviceId.includes('smart') ? 'Smart Power Distribution' : 'Solar Power Integration'; actionDetail = isActive ? 'managing power flow' : 'system offline'; } notificationMessage.textContent = `${deviceName} is now ${isActive ? 'ACTIVE' : 'INACTIVE'} - ${actionDetail}`; notification.classList.add('show'); // Hide after 3 seconds setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Simulate some toggles being on by default const defaultOnDevices = ['climate-eco', 'security-perimeter']; defaultOnDevices.forEach(deviceId => { const toggle = document.querySelector(`[data-device="${deviceId}"]`); if (toggle) { toggle.classList.add('active'); const statusElement = document.querySelector(`[data-status="${deviceId}"]`); statusElement.textContent = 'ON'; statusElement.classList.add('on'); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cloud Service Dashboard</title> <style> :root { --primary-color: #4a6cf7; --secondary-color: #6a89ff; --accent-color: #2c3e8f; --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; --background-color: #f8fafc; --card-bg: #ffffff; --text-primary: #1e293b; --text-secondary: #64748b; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--background-color); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .dashboard { width: 100%; max-width: 650px; background-color: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); padding: 2rem; overflow: hidden; position: relative; } .dashboard::before { content: ''; position: absolute; top: -10%; right: -10%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(106, 137, 255, 0.1) 0%, rgba(106, 137, 255, 0) 70%); z-index: 0; } .dashboard::after { content: ''; position: absolute; bottom: -10%; left: -10%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(106, 137, 255, 0.05) 0%, rgba(106, 137, 255, 0) 70%); z-index: 0; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; position: relative; z-index: 1; } .header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .header .status { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; } .status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--success-color); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .service-group { margin-bottom: 1.5rem; position: relative; z-index: 1; } .group-title { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .service-card { background-color: #f8fafd; border-radius: var(--border-radius); padding: 1rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden; } .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .service-card.active { background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); border-left: 3px solid var(--primary-color); } .service-info { display: flex; align-items: center; gap: 12px; } .service-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #f3f6ff 0%, #e9efff 100%); color: var(--primary-color); } .service-text { display: flex; flex-direction: column; } .service-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 4px; } .service-description { font-size: 0.8125rem; color: var(--text-secondary); } .toggle-switch { position: relative; width: 50px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s cubic-bezier(0.68, -0.55, 0.27, 1.55); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } input:checked + .toggle-slider { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); } input:checked + .toggle-slider:before { transform: translateX(24px); } .usage-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 1.5rem; } .stat-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%); border-radius: var(--border-radius); padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat-title { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; } .stat-value { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; } .stat-trend { font-size: 0.75rem; display: flex; align-items: center; gap: 4px; } .trend-up { color: var(--success-color); } .trend-down { color: var(--danger-color); } .visual-indicator { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 3px 3px 0; } .indicator-high { background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%); width: 85%; } .indicator-medium { background: linear-gradient(90deg, var(--warning-color) 0%, #fbbf24 100%); width: 60%; } .indicator-low { background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%); width: 25%; } .data-visualization { margin-top: 2rem; width: 100%; height: 120px; position: relative; overflow: hidden; } .data-visualization canvas { position: relative; z-index: 1; } .toggle-ripple { position: absolute; background: rgba(74, 108, 247, 0.15); border-radius: 50%; transform: scale(0); pointer-events: none; z-index: 0; } .resource-alert { background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); border-left: 3px solid var(--warning-color); padding: 1rem; border-radius: var(--border-radius); margin-top: 1.5rem; display: flex; align-items: center; gap: 12px; font-size: 0.875rem; line-height: 1.5; opacity: 0; height: 0; overflow: hidden; transition: all 0.3s ease; } .resource-alert.show { opacity: 1; height: auto; margin-top: 1.5rem; margin-bottom: 1rem; } .alert-icon { color: var(--warning-color); display: flex; align-items: center; justify-content: center; } @media (max-width: 500px) { .dashboard { padding: 1.5rem; } .usage-stats { grid-template-columns: 1fr; } .service-name { font-size: 0.875rem; } .service-description { font-size: 0.75rem; } } </style> </head> <body> <div class="dashboard"> <div class="header"> <h1>Cloud Services Control</h1> <div class="status"> <span class="status-indicator"></span> All systems operational </div> </div> <div class="service-group"> <h2 class="group-title">Compute Resources</h2> <div class="service-card" id="compute-card"> <div class="service-info"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect> <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect> <line x1="6" y1="6" x2="6" y2="6"></line> <line x1="6" y1="18" x2="6" y2="18"></line> </svg> </div> <div class="service-text"> <div class="service-name">Auto-scaling Cluster</div> <div class="service-description">Dynamic scaling with load balancing</div> </div> </div> <label class="toggle-switch"> <input type="checkbox" id="compute-toggle" checked> <span class="toggle-slider"></span> </label> </div> <div class="service-card" id="kubernates-card"> <div class="service-info"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5z"></path> <path d="M2 17l10 5 10-5"></path> <path d="M2 12l10 5 10-5"></path> </svg> </div> <div class="service-text"> <div class="service-name">Kubernetes Engine</div> <div class="service-description">Containerized workload orchestration</div> </div> </div> <label class="toggle-switch"> <input type="checkbox" id="kubernates-toggle" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="service-group"> <h2 class="group-title">Storage & Database</h2> <div class="service-card" id="storage-card"> <div class="service-info"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 6v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"></path> <path d="M3 13v1a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z"></path> <path d="M3 20v1a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z"></path> </svg> </div> <div class="service-text"> <div class="service-name">Object Storage</div> <div class="service-description">Scalable cloud storage buckets</div> </div> </div> <label class="toggle-switch"> <input type="checkbox" id="storage-toggle" checked> <span class="toggle-slider"></span> </label> </div> <div class="service-card" id="database-card"> <div class="service-info"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse> <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path> <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path> </svg> </div> <div class="service-text"> <div class="service-name">Managed SQL</div> <div class="service-description">High-availability relational DB</div> </div> </div> <label class="toggle-switch"> <input type="checkbox" id="database-toggle"> <span class="toggle-slider"></span> </label> </div> </div> <div class="resource-alert" id="resource-alert"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> </div> <div> <strong>Resource optimization recommended.</strong> Enabling multiple high-compute services may increase costs. Consider scheduling workloads for off-peak hours. </div> </div> <div class="usage-stats"> <div class="stat-card"> <div class="stat-title">CPU UTILIZATION</div> <div class="stat-value">73%</div> <div class="stat-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 12% from last week </div> <div class="visual-indicator indicator-high"></div> </div> <div class="stat-card"> <div class="stat-title">MEMORY USAGE</div> <div class="stat-value">48%</div> <div class="stat-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 5% from last week </div> <div class="visual-indicator indicator-medium"></div> </div> <div class="stat-card"> <div class="stat-title">NETWORK TRAFFIC</div> <div class="stat-value">2.3 TB</div> <div class="stat-trend trend-down"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> 3% from last week </div> <div class="visual-indicator indicator-low"></div> </div> </div> <div class="data-visualization"> <canvas id="dataChart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Initialize Chart const ctx = document.getElementById('dataChart').getContext('2d'); const gradientFill = ctx.createLinearGradient(0, 0, 0, 160); gradientFill.addColorStop(0, 'rgba(106, 137, 255, 0.4)'); gradientFill.addColorStop(1, 'rgba(106, 137, 255, 0.05)'); const chart = new Chart(ctx, { type: 'line', data: { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], datasets: [{ label: 'Resource Usage', data: [42, 49, 45, 62, 55, 65, 73], borderColor: '#4a6cf7', backgroundColor: gradientFill, tension: 0.4, borderWidth: 2, fill: true, pointBackgroundColor: '#fff', pointBorderColor: '#4a6cf7', pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, grid: { display: true, color: 'rgba(0, 0, 0, 0.05)', drawBorder: false }, ticks: { stepSize: 25, font: { size: 10 } } }, x: { grid: { display: false }, ticks: { font: { size: 10 } } } }, plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(255, 255, 255, 0.9)', titleColor: '#1e293b', bodyColor: '#1e293b', borderColor: 'rgba(0, 0, 0, 0.1)', borderWidth: 1, displayColors: false, padding: 10, titleFont: { size: 14, weight: 'bold' }, callbacks: { label: function(context) { return `Usage: ${context.parsed.y}%`; } } } } } }); // Toggle Switch Animation const toggles = document.querySelectorAll('input[type="checkbox"]'); toggles.forEach(toggle => { toggle.addEventListener('change', function() { const card = this.closest('.service-card'); const cardRect = card.getBoundingClientRect(); // Create ripple effect const ripple = document.createElement('div'); ripple.classList.add('toggle-ripple'); ripple.style.width = '150px'; ripple.style.height = '150px'; ripple.style.left = `${this.offsetLeft - 60}px`; ripple.style.top = `${this.offsetTop - 60}px`; card.appendChild(ripple); // Animate ripple ripple.animate( [ { transform: 'scale(0)', opacity: 1 }, { transform: 'scale(1)', opacity: 0 } ], { duration: 600, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' } ); // Toggle active class on card if (this.checked) { card.classList.add('active'); } else { card.classList.remove('active'); } // Remove ripple after animation setTimeout(() => { ripple.remove(); }, 600); // Update chart data based on active services updateChartData(); // Show alert if multiple compute services are active checkResourceUsage(); }); }); // Function to update chart data based on active toggles function updateChartData() { const baseData = [42, 49, 45, 62, 55, 65, 73]; const activeServices = document.querySelectorAll('input[type="checkbox"]:checked').length; // Generate new data based on active services const newData = baseData.map(value => { // Adjust value based on number of active services const multiplier = 0.9 + (activeServices * 0.1); let newValue = Math.min(value * multiplier, 100); return Math.round(newValue); }); // Update chart with animation chart.data.datasets[0].data = newData; chart.update({ duration: 800, easing: 'easeOutQuart' }); } // Function to check resource usage and show alert if needed function checkResourceUsage() { const computeActive = document.getElementById('compute-toggle').checked; const kubernetesActive = document.getElementById('kubernates-toggle').checked; const storageActive = document.getElementById('storage-toggle').checked; const databaseActive = document.getElementById('database-toggle').checked; const alertElement = document.getElementById('resource-alert'); // Show alert if all compute-intensive services are active if (computeActive && kubernetesActive && databaseActive) { alertElement.classList.add('show'); } else { alertElement.classList.remove('show'); } } // Initial setup document.querySelectorAll('.service-card').forEach(card => { const toggle = card.querySelector('input[type="checkbox"]'); if (toggle.checked) { card.classList.add('active'); } }); // Check initial resource usage checkResourceUsage(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Settings</title> <style> :root { --primary: #6C5CE7; --secondary: #00B894; --accent: #FF7675; --alert: #FD79A8; --dark: #2D3436; --light: #F8F9FA; --toggle-width: 70px; --toggle-height: 34px; --toggle-radius: 17px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', 'Segoe UI', sans-serif; } body { background-color: #F2F3F5; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .container { max-width: 650px; width: 100%; background-color: white; border-radius: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 32px; overflow: hidden; position: relative; } .bubble { position: absolute; border-radius: 50%; background: var(--primary); opacity: 0.1; z-index: 0; } .bubble-1 { top: -30px; left: -30px; width: 140px; height: 140px; background: var(--secondary); } .bubble-2 { bottom: -50px; right: 20px; width: 120px; height: 120px; background: var(--accent); } h1 { margin-bottom: 8px; color: var(--dark); font-size: 28px; position: relative; z-index: 1; } p.subtitle { color: #666; margin-bottom: 32px; font-size: 16px; position: relative; z-index: 1; } .settings-section { margin-bottom: 24px; position: relative; z-index: 2; } .section-title { font-weight: 600; color: var(--dark); margin-bottom: 16px; display: flex; align-items: center; font-size: 18px; } .section-icon { background: linear-gradient(135deg, var(--primary), #a29bfe); width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 12px; color: white; } .notification-icon { background: linear-gradient(135deg, var(--secondary), #55efc4); } .data-icon { background: linear-gradient(135deg, var(--accent), #fab1a0); } .setting-item { display: flex; align-items: center; justify-content: space-between; padding: 18px; background-color: #F8F9FA; border-radius: 16px; margin-bottom: 12px; transition: all 0.3s ease; } .setting-item:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); } .setting-description { flex: 1; } .setting-description h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--dark); } .setting-description p { font-size: 14px; color: #666; } /* Toggle Switch */ .toggle-switch { position: relative; width: var(--toggle-width); height: var(--toggle-height); margin-left: 15px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e0e0e0; transition: 0.4s; border-radius: var(--toggle-radius); overflow: hidden; } .toggle-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 2; } .toggle-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), #a29bfe); opacity: 0; transition: 0.4s; z-index: 1; } .toggle-emoji { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; z-index: 3; opacity: 0; transition: 0.3s; } .emoji-on { right: 7px; } .emoji-off { left: 7px; opacity: 1; } input:checked + .toggle-slider .toggle-bg { opacity: 1; } input:checked + .toggle-slider:before { transform: translateX(var(--toggle-width)) translateX(-30px); } input:checked + .toggle-slider .emoji-on { opacity: 1; } input:checked + .toggle-slider .emoji-off { opacity: 0; } input:checked + .toggle-slider.privacy-toggle .toggle-bg { background: linear-gradient(135deg, var(--primary), #a29bfe); } input:checked + .toggle-slider.notification-toggle .toggle-bg { background: linear-gradient(135deg, var(--secondary), #55efc4); } input:checked + .toggle-slider.data-toggle .toggle-bg { background: linear-gradient(135deg, var(--accent), #fab1a0); } .save-button { display: block; width: 100%; padding: 16px; border: none; background: linear-gradient(135deg, var(--primary), #a29bfe); color: white; font-weight: 600; font-size: 16px; border-radius: 16px; margin-top: 20px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; } .save-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3); } .save-button:active { transform: translateY(0); } .save-button .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .notification { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; padding: 16px 24px; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; display: flex; align-items: center; } .notification.show { bottom: 20px; } .notification-icon { margin-right: 12px; font-size: 20px; } /* Special note design */ .special-note { font-size: 13px; color: #888; text-align: center; margin-top: 24px; font-style: italic; } /* Responsive design */ @media (max-width: 600px) { .container { padding: 24px; border-radius: 16px; } h1 { font-size: 24px; } .setting-item { padding: 14px; } .setting-description h3 { font-size: 15px; } .setting-description p { font-size: 13px; } :root { --toggle-width: 60px; --toggle-height: 30px; --toggle-radius: 15px; } } </style> </head> <body> <div class="container"> <div class="bubble bubble-1"></div> <div class="bubble bubble-2"></div> <h1>My Social Space</h1> <p class="subtitle">Customize your experience with playful controls that put you in charge.</p> <div class="settings-section"> <div class="section-title"> <div class="section-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-8-4.5-8-8.5A8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 8 8.5c0 4-8 8.5-8 8.5z"></path><circle cx="12" cy="11" r="3"></circle></svg> </div> Privacy Controls </div> <div class="setting-item"> <div class="setting-description"> <h3>Ghost Mode</h3> <p>Browse without appearing in "Currently Active" list</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input"> <div class="toggle-slider privacy-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">👻</div> <div class="toggle-emoji emoji-off">👀</div> </div> </label> </div> <div class="setting-item"> <div class="setting-description"> <h3>Story Shield</h3> <p>Only share stories with people you follow back</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <div class="toggle-slider privacy-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">🛡️</div> <div class="toggle-emoji emoji-off">🌎</div> </div> </label> </div> <div class="setting-item"> <div class="setting-description"> <h3>Read Receipt Blocker</h3> <p>Hide when you've read messages</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input"> <div class="toggle-slider privacy-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">🕵️</div> <div class="toggle-emoji emoji-off">✓✓</div> </div> </label> </div> </div> <div class="settings-section"> <div class="section-title"> <div class="section-icon notification-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"></path></svg> </div> Notification Vibes </div> <div class="setting-item"> <div class="setting-description"> <h3>Reaction Alerts</h3> <p>Get notified when someone reacts to your content</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <div class="toggle-slider notification-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">❤️</div> <div class="toggle-emoji emoji-off">🔕</div> </div> </label> </div> <div class="setting-item"> <div class="setting-description"> <h3>Comment Buzz</h3> <p>Notifications when people comment on your posts</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <div class="toggle-slider notification-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">💬</div> <div class="toggle-emoji emoji-off">🔕</div> </div> </label> </div> <div class="setting-item"> <div class="setting-description"> <h3>Quiet Hours</h3> <p>Silence notifications from 11PM to 7AM</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input"> <div class="toggle-slider notification-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">🌙</div> <div class="toggle-emoji emoji-off">🔔</div> </div> </label> </div> </div> <div class="settings-section"> <div class="section-title"> <div class="section-icon data-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg> </div> Data & Storage </div> <div class="setting-item"> <div class="setting-description"> <h3>Autoplay Videos</h3> <p>Play videos automatically as you scroll</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <div class="toggle-slider data-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">▶️</div> <div class="toggle-emoji emoji-off">⏸️</div> </div> </label> </div> <div class="setting-item"> <div class="setting-description"> <h3>Data Saver</h3> <p>Lower quality media to use less data</p> </div> <label class="toggle-switch"> <input type="checkbox" class="toggle-input"> <div class="toggle-slider data-toggle"> <div class="toggle-bg"></div> <div class="toggle-emoji emoji-on">📉</div> <div class="toggle-emoji emoji-off">📊</div> </div> </label> </div> </div> <button class="save-button" id="saveButton">Save My Settings</button> <p class="special-note">Made with 💖 for the social butterflies who still value their privacy</p> </div> <div class="notification" id="notification"> <span class="notification-icon">✅</span> <span class="notification-text">Settings saved successfully!</span> </div> <script> // Toggle switch animation const toggleInputs = document.querySelectorAll('.toggle-input'); toggleInputs.forEach(toggle => { toggle.addEventListener('change', function() { const slider = this.nextElementSibling; if (this.checked) { slider.querySelector(':before').style.transform = 'translateX(calc(var(--toggle-width) - 30px))'; // Add scaling animation for the emoji const emojiOn = slider.querySelector('.emoji-on'); emojiOn.style.animation = 'none'; setTimeout(() => { emojiOn.style.animation = 'scaleIn 0.3s forwards'; }, 10); } else { // Add scaling animation for the emoji const emojiOff = slider.querySelector('.emoji-off'); emojiOff.style.animation = 'none'; setTimeout(() => { emojiOff.style.animation = 'scaleIn 0.3s forwards'; }, 10); } }); }); // Save button ripple effect const saveButton = document.getElementById('saveButton'); saveButton.addEventListener('click', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Show notification const notification = document.getElementById('notification'); notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); }); // Add hover effects to setting items const settingItems = document.querySelectorAll('.setting-item'); settingItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0 6px 15px rgba(0, 0, 0, 0.05)'; }); item.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = 'none'; }); }); // CSS animation for toggle emoji document.head.insertAdjacentHTML('beforeend', ` <style> @keyframes scaleIn { 0% { transform: translateY(-50%) scale(0); } 50% { transform: translateY(-50%) scale(1.2); } 100% { transform: translateY(-50%) scale(1); } } </style> `); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EduSphere Dashboard | Learning Modes</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap'); :root { --primary: #5468FF; --secondary: #FF8A5B; --success: #36D9B2; --danger: #FF5C7C; --warning: #FFDE59; --info: #7BD3EA; --light: #F5F7FF; --dark: #3A3A60; --purple: #9C6AFF; --teal: #18C1BB; --background: #FAFBFF; --shadow: rgba(84, 104, 255, 0.1); --card-shadow: 0 8px 24px rgba(84, 104, 255, 0.12); --toggle-shadow: 0 3px 8px rgba(84, 104, 255, 0.2); } body { background-color: var(--background); min-height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--dark); overflow-x: hidden; padding: 20px; } .dashboard { background: white; border-radius: 24px; box-shadow: var(--card-shadow); width: 100%; max-width: 650px; overflow: hidden; position: relative; } .header { background: linear-gradient(135deg, var(--primary), var(--purple)); padding: 25px 30px; color: white; position: relative; overflow: hidden; } .header h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; position: relative; z-index: 2; } .header p { font-size: 1rem; opacity: 0.9; max-width: 80%; position: relative; z-index: 2; } .bubble { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; z-index: 1; } .bubble-1 { width: 100px; height: 100px; top: -30px; right: 30px; } .bubble-2 { width: 60px; height: 60px; bottom: 20px; right: 80px; } .bubble-3 { width: 120px; height: 120px; bottom: -60px; right: -30px; } .content { padding: 30px; } .learning-modes { display: grid; grid-template-columns: 1fr; gap: 20px; } .section-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 25px; display: flex; align-items: center; color: var(--dark); } .section-title i { margin-right: 12px; font-size: 1.4rem; color: var(--primary); } .mode-card { background: white; border-radius: 16px; padding: 22px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.05); } .mode-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .mode-card.active { background: linear-gradient(to right, rgba(84, 104, 255, 0.05), rgba(156, 106, 255, 0.05)); border-color: rgba(84, 104, 255, 0.2); } .mode-info { flex: 1; display: flex; align-items: center; } .mode-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 16px; color: white; font-size: 1.3rem; transition: all 0.3s ease; overflow: hidden; position: relative; } .mode-icon i { position: relative; z-index: 2; } .mode-icon::before { content: ''; position: absolute; width: 100%; height: 100%; background: inherit; border-radius: inherit; transform: scale(0); transition: transform 0.5s ease; } .mode-card:hover .mode-icon::before { transform: scale(1.2); } .mode-icon.focus-mode { background: linear-gradient(135deg, var(--primary), #7582ff); } .mode-icon.collaborative { background: linear-gradient(135deg, var(--secondary), #FF9F7D); } .mode-icon.audio-assist { background: linear-gradient(135deg, var(--teal), #45E1DB); } .mode-icon.visual-learning { background: linear-gradient(135deg, var(--purple), #C39AFF); } .mode-text { flex: 1; } .mode-text h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; color: var(--dark); } .mode-text p { font-size: 0.9rem; color: #777; line-height: 1.4; } .toggle-wrapper { margin-left: 15px; position: relative; z-index: 2; } .toggle { position: relative; width: 56px; height: 30px; background-color: #E6E9F4; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08); } .toggle.active { background-color: var(--primary); } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background-color: white; border-radius: 50%; box-shadow: var(--toggle-shadow); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .toggle.active .toggle-thumb { transform: translateX(26px); } .status-badge { position: absolute; top: 10px; right: 10px; font-size: 0.7rem; padding: 4px 8px; border-radius: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } .mode-card.active .status-badge { opacity: 1; transform: translateY(0); } .status-badge.focus-badge { background-color: rgba(84, 104, 255, 0.1); color: var(--primary); } .status-badge.collab-badge { background-color: rgba(255, 138, 91, 0.1); color: var(--secondary); } .status-badge.audio-badge { background-color: rgba(24, 193, 187, 0.1); color: var(--teal); } .status-badge.visual-badge { background-color: rgba(156, 106, 255, 0.1); color: var(--purple); } .pattern { position: absolute; opacity: 0.03; pointer-events: none; } .wave { position: absolute; bottom: -15px; left: 0; width: 100%; z-index: 1; opacity: 0.1; } .tooltip { position: absolute; background: var(--dark); color: white; padding: 10px 15px; border-radius: 8px; font-size: 0.85rem; left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); width: max-content; max-width: 250px; pointer-events: none; } .tooltip::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-bottom: 6px solid var(--dark); border-left: 6px solid transparent; border-right: 6px solid transparent; } .mode-card:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (max-width: 600px) { .header h1 { font-size: 1.5rem; } .header p { font-size: 0.9rem; max-width: 100%; } .content { padding: 20px; } .mode-card { padding: 16px; flex-direction: column; align-items: flex-start; } .mode-info { margin-bottom: 15px; width: 100%; } .toggle-wrapper { margin-left: 0; align-self: flex-end; margin-top: 10px; } } /* Animation for confetti */ @keyframes confetti-fall { 0% { transform: translateY(-100%) rotate(0deg); opacity: 1; } 100% { transform: translateY(500%) rotate(360deg); opacity: 0; } } .confetti { position: absolute; width: 10px; height: 10px; opacity: 0; z-index: 5; pointer-events: none; } /* Pulse animation for active cards */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(84, 104, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(84, 104, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(84, 104, 255, 0); } } .mode-card.active .mode-icon { animation: pulse 2s infinite; } </style> </head> <body> <div class="dashboard"> <div class="header"> <h1>EduSphere Learning Modes</h1> <p>Personalize your learning journey by enabling the modes that work best for you</p> <div class="bubble bubble-1"></div> <div class="bubble bubble-2"></div> <div class="bubble bubble-3"></div> <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> <path fill="#ffffff" fill-opacity="1" d="M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,213.3C840,224,960,224,1080,192C1200,160,1320,96,1380,64L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path> </svg> </div> <div class="content"> <h2 class="section-title"> <i class="fas fa-lightbulb"></i> Your Learning Environment </h2> <div class="learning-modes"> <div class="mode-card" data-mode="focus"> <span class="status-badge focus-badge">Active</span> <div class="mode-info"> <div class="mode-icon focus-mode"> <i class="fas fa-brain"></i> </div> <div class="mode-text"> <h3>Focus Mode</h3> <p>Minimizes distractions and highlights key concepts to help maintain concentration</p> </div> </div> <div class="toggle-wrapper"> <div class="toggle" id="focus-toggle"> <div class="toggle-thumb"></div> </div> </div> <div class="tooltip">Reduces visual clutter and notifications while you're studying</div> </div> <div class="mode-card" data-mode="collaborative"> <span class="status-badge collab-badge">Active</span> <div class="mode-info"> <div class="mode-icon collaborative"> <i class="fas fa-users"></i> </div> <div class="mode-text"> <h3>Collaborative Learning</h3> <p>Connect with peers for real-time discussions and group problem-solving</p> </div> </div> <div class="toggle-wrapper"> <div class="toggle" id="collaborative-toggle"> <div class="toggle-thumb"></div> </div> </div> <div class="tooltip">Share notes and collaborate on projects with classmates</div> </div> <div class="mode-card" data-mode="audio"> <span class="status-badge audio-badge">Active</span> <div class="mode-info"> <div class="mode-icon audio-assist"> <i class="fas fa-headphones"></i> </div> <div class="mode-text"> <h3>Audio Assist</h3> <p>Text-to-speech functionality for auditory learners with voice speed controls</p> </div> </div> <div class="toggle-wrapper"> <div class="toggle" id="audio-toggle"> <div class="toggle-thumb"></div> </div> </div> <div class="tooltip">Listen to lessons and notes with customizable voices and speeds</div> </div> <div class="mode-card" data-mode="visual"> <span class="status-badge visual-badge">Active</span> <div class="mode-info"> <div class="mode-icon visual-learning"> <i class="fas fa-image"></i> </div> <div class="mode-text"> <h3>Visual Learning</h3> <p>Enhanced diagrams, mind maps, and visual concept builders</p> </div> </div> <div class="toggle-wrapper"> <div class="toggle" id="visual-toggle"> <div class="toggle-thumb"></div> </div> </div> <div class="tooltip">Converts complex concepts into easy-to-understand visual diagrams</div> </div> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Font Awesome alternative load if (typeof FontAwesome === 'undefined') { const fontAwesomeLink = document.createElement('link'); fontAwesomeLink.rel = 'stylesheet'; fontAwesomeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'; document.head.appendChild(fontAwesomeLink); } const toggles = document.querySelectorAll('.toggle'); toggles.forEach(toggle => { toggle.addEventListener('click', function() { const isActive = this.classList.toggle('active'); const modeCard = this.closest('.mode-card'); if (isActive) { modeCard.classList.add('active'); createConfetti(toggle, 20); // Play pleasant sound effect playSound(300, 100, 'sine'); } else { modeCard.classList.remove('active'); // Play different sound for turning off playSound(200, 80, 'sine'); } }); }); function createConfetti(element, count) { const colors = ['#5468FF', '#FF8A5B', '#36D9B2', '#FF5C7C', '#FFDE59', '#9C6AFF']; const shapes = ['circle', 'square', 'triangle']; // Get element position for better confetti placement const rect = element.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top; for (let i = 0; i < count; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; // Randomize confetti appearance const shape = shapes[Math.floor(Math.random() * shapes.length)]; const color = colors[Math.floor(Math.random() * colors.length)]; const size = Math.random() * 8 + 6; confetti.style.left = `${x + (Math.random() * 60 - 30)}px`; confetti.style.top = `${y + (Math.random() * 20 - 10)}px`; confetti.style.width = `${size}px`; confetti.style.height = `${size}px`; confetti.style.backgroundColor = color; if (shape === 'circle') { confetti.style.borderRadius = '50%'; } else if (shape === 'triangle') { confetti.style.width = '0'; confetti.style.height = '0'; confetti.style.backgroundColor = 'transparent'; confetti.style.borderLeft = `${size/2}px solid transparent`; confetti.style.borderRight = `${size/2}px solid transparent`; confetti.style.borderBottom = `${size}px solid ${color}`; } confetti.style.animation = `confetti-fall ${Math.random() * 2 + 1.5}s ease forwards`; confetti.style.opacity = '1'; document.body.appendChild(confetti); // Remove confetti after animation setTimeout(() => { confetti.remove(); }, 3000); } } // Function to create audio feedback function playSound(frequency, duration, type) { try { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.type = type; oscillator.frequency.value = frequency; gainNode.gain.value = 0.1; oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.start(); // Smooth fade out gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration / 1000); setTimeout(() => { oscillator.stop(); }, duration); } catch (e) { console.log('Audio feedback not supported'); } } // Initialize some toggles as active const initToggles = ['focus-toggle', 'collaborative-toggle']; initToggles.forEach(id => { const toggle = document.getElementById(id); if (toggle) { toggle.classList.add('active'); toggle.closest('.mode-card').classList.add('active'); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SmartGlance - Wearable Toggle Controls</title> <style> :root { --primary: #2D3BFF; --secondary: #131B3C; --accent: #FF3D71; --success: #00E096; --background: #F7F9FC; --text: #222B45; --text-light: #8F9BB3; --shadow: rgba(13, 47, 93, 0.07); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; } body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: var(--background); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; padding: 20px; } .smartwatch { width: 240px; height: 280px; background: #000; border-radius: 40px; position: relative; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: scale(0.95); transition: transform 0.5s ease; } .smartwatch:hover { transform: scale(1); } .smartwatch::before { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: rgba(255, 255, 255, 0.03); z-index: 0; transform: skewX(-10deg) translateX(20px); } .crown { position: absolute; right: -2px; top: 85px; width: 6px; height: 20px; background: #444; border-radius: 3px 0 0 3px; } .display { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #151522; border-radius: 30px; overflow: hidden; padding: 12px; } .status-bar { display: flex; justify-content: space-between; font-size: 10px; color: white; opacity: 0.8; padding: 0 2px 8px; } .time { font-weight: 600; } .battery { display: flex; align-items: center; } .battery-icon { width: 16px; height: 8px; border: 1px solid white; border-radius: 2px; margin-left: 4px; position: relative; } .battery-level { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 70%; background: white; border-radius: 1px; } .battery-icon::after { content: ''; position: absolute; top: 2px; right: -3px; width: 2px; height: 4px; background: white; border-radius: 0 1px 1px 0; } .title { text-align: center; color: white; font-size: 13px; font-weight: 600; margin-bottom: 15px; letter-spacing: 0.5px; } .toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .toggle { background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .toggle::before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: radial-gradient(circle at center, var(--primary) 0%, transparent 70%); opacity: 0; transform: scale(0.5); transition: var(--transition); } .toggle.active::before { opacity: 0.15; transform: scale(1); } .toggle.active { background: rgba(255, 255, 255, 0.15); } .toggle-icon { width: 24px; height: 24px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .toggle-icon svg { width: 100%; height: 100%; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: var(--transition); } .toggle.active .toggle-icon svg { stroke: white; fill: none; } .toggle-icon .off-icon, .toggle.active .on-icon { opacity: 1; transform: scale(1); } .toggle-icon .on-icon, .toggle.active .off-icon { opacity: 0; transform: scale(0.8); position: absolute; } .toggle-label { color: white; font-size: 10px; font-weight: 500; text-align: center; position: relative; z-index: 1; transition: var(--transition); } .toggle.active .toggle-label { color: white; } .toggle-status { height: 6px; width: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); margin-top: 6px; position: relative; z-index: 1; transition: var(--transition); } .toggle.active .toggle-status { background: var(--success); box-shadow: 0 0 8px var(--success); } .ripple { position: absolute; border-radius: 50%; background: white; opacity: 0; transform: scale(0); pointer-events: none; animation: ripple 0.6s ease-out; } @keyframes ripple { 0% { transform: scale(0); opacity: 0.2; } 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } .active-features { margin-top: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 8px; } .active-features-header { color: white; font-size: 10px; opacity: 0.7; margin-bottom: 6px; } .active-feature { display: flex; align-items: center; padding: 5px 0; opacity: 0.2; transition: var(--transition); } .active-feature.on { opacity: 1; } .active-feature-icon { width: 16px; height: 16px; margin-right: 8px; } .active-feature-icon svg { width: 100%; height: 100%; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .active-feature-label { color: white; font-size: 10px; font-weight: 500; } .battery-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(255, 255, 255, 0.5); } .battery-saving-indicator { width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: var(--success); animation: pulse 2s infinite; display: none; } .battery-saving-active .battery-saving-indicator { display: block; } /* Responsive design adjustments */ @media screen and (max-width: 375px) { .smartwatch { transform: scale(0.9); } .smartwatch:hover { transform: scale(0.95); } } </style> </head> <body> <div class="smartwatch"> <div class="crown"></div> <div class="display"> <div class="status-bar"> <div class="time">10:42</div> <div class="battery"> 72% <div class="battery-icon"> <div class="battery-level"></div> </div> </div> </div> <div class="title">Quick Controls</div> <div class="toggle-grid"> <div class="toggle" data-feature="fitness"> <div class="toggle-icon"> <svg class="off-icon" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/> </svg> <svg class="on-icon" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </div> <div class="toggle-label">Fitness Track</div> <div class="toggle-status"></div> </div> <div class="toggle" data-feature="sleep"> <div class="toggle-icon"> <svg class="off-icon" viewBox="0 0 24 24"> <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"/> <path d="M12 7v5l3 3"/> </svg> <svg class="on-icon" viewBox="0 0 24 24"> <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/> <path d="M12 6v6l4 2"/> </svg> </div> <div class="toggle-label">Sleep Monitor</div> <div class="toggle-status"></div> </div> <div class="toggle" data-feature="notifications"> <div class="toggle-icon"> <svg class="off-icon" viewBox="0 0 24 24"> <path d="M10 21h4M15 18h1c1 0 1-.6 1-1v-1m0-5v-1c0-2.8-1.8-5-5-5-2.9 0-5 2.2-5 5v1m0 0v6c0 .4.1 1 1 1h1"/> </svg> <svg class="on-icon" viewBox="0 0 24 24"> <path d="M10 21h4M18 8a6 6 0 0 0-12 0v4.6c0 .8-.6 1.6-1.4 1.6-.5 0-.6.3-.6.8 0 .1 0 .1 0 .1 0 .5.2.9.6.9h14.1c.3 0 .5-.4.5-.9 0 0 0 0 0-.1 0-.4-.1-.8-.6-.8-.8 0-1.4-.7-1.4-1.6V8z"/> </svg> </div> <div class="toggle-label">Notifications</div> <div class="toggle-status"></div> </div> <div class="toggle" data-feature="powersave"> <div class="toggle-icon"> <svg class="off-icon" viewBox="0 0 24 24"> <path d="M23 11h-3l-3.36-6.27C16.37 4.28 15.96 4 15.5 4h-7c-.46 0-.87.28-1.14.73L4 11H1c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1h22c.55 0 1-.45 1-1v-1c0-.55-.45-1-1-1zm-12.5 0H5.66l2.5-4.5h4.17l-1.83 4.5zM18.34 11h-3.84l1.84-4.5h2.5l-1.5 2.5 1 2z"/> <path d="M20 16H4c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-1c0-.55-.45-1-1-1z"/> </svg> <svg class="on-icon" viewBox="0 0 24 24"> <path d="M13 4h-2l-1 5h4zM7 2h10M12 19c3.3 0 6-2.7 6-6H6c0 3.3 2.7 6 6 6z"/> <path d="M12 19v3M8 22h8"/> </svg> </div> <div class="toggle-label">Power Save</div> <div class="toggle-status"></div> </div> </div> <div class="active-features"> <div class="active-features-header">ACTIVE FEATURES</div> <div class="active-feature" data-feature="fitness"> <div class="active-feature-icon"> <svg viewBox="0 0 24 24"> <path d="M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/> <path d="M12 8v1M12 15v1M15.5 12h1M7.5 12h1"/> <path d="M16.136 16.136l-.707.706M8.571 8.571l-.707.706M16.136 7.864l-.707-.706M8.571 15.428l-.707-.707"/> </svg> </div> <div class="active-feature-label">Fitness Tracking Enabled</div> </div> <div class="active-feature" data-feature="sleep"> <div class="active-feature-icon"> <svg viewBox="0 0 24 24"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> </svg> </div> <div class="active-feature-label">Sleep Analysis Active</div> </div> <div class="active-feature" data-feature="notifications"> <div class="active-feature-icon"> <svg viewBox="0 0 24 24"> <path d="M8 9h8M8 13h6M8 17h4"/> </svg> </div> <div class="active-feature-label">Alert Handling On</div> </div> <div class="active-feature" data-feature="powersave"> <div class="active-feature-icon"> <svg viewBox="0 0 24 24"> <path d="M21 14h-4l-3 3h-4l-3-3H3"/> <path d="M14 10l2-2v4M10 10l-2-2v4"/> </svg> </div> <div class="active-feature-label">Power Conservation</div> </div> </div> <div class="battery-indicator"> <div class="battery-saving-indicator"></div> <span class="battery-status">Standard Power Mode</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggles = document.querySelectorAll('.toggle'); const batteryIndicator = document.querySelector('.battery-indicator'); const batteryStatus = document.querySelector('.battery-status'); toggles.forEach(toggle => { toggle.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Toggle active state this.classList.toggle('active'); // Update active features const featureType = this.getAttribute('data-feature'); const activeFeature = document.querySelector(`.active-feature[data-feature="${featureType}"]`); if (activeFeature) { activeFeature.classList.toggle('on', this.classList.contains('active')); } // Check power save mode const powerSaveToggle = document.querySelector('.toggle[data-feature="powersave"]'); if (powerSaveToggle.classList.contains('active')) { batteryIndicator.classList.add('battery-saving-active'); batteryStatus.textContent = 'Low Power Mode'; } else { batteryIndicator.classList.remove('battery-saving-active'); batteryStatus.textContent = 'Standard Power Mode'; } // Tactile feedback simulation if (window.navigator && window.navigator.vibrate) { navigator.vibrate(50); } }); }); // Initialize with some features active setTimeout(() => { document.querySelector('.toggle[data-feature="fitness"]').click(); setTimeout(() => { document.querySelector('.toggle[data-feature="notifications"]').click(); }, 300); }, 500); // Simulate time updating const timeDisplay = document.querySelector('.time'); let minutes = 42; let hours = 10; setInterval(() => { minutes++; if (minutes >= 60) { minutes = 0; hours++; if (hours >= 24) { hours = 0; } } timeDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`; }, 60000); // Battery animation const batteryLevel = document.querySelector('.battery-level'); let decreasing = true; let width = 70; setInterval(() => { if (decreasing) { width -= 0.1; if (width <= 40) { decreasing = false; } } else { width += 0.1; if (width >= 80) { decreasing = true; } } batteryLevel.style.width = `${width}%`; }, 5000); }); </script> </body> </html>
