Toggle menus are essential components in modern web design, offering a seamless way to navigate complex interfaces. They enhance user experience by providing quick access to various sections without cluttering the screen.
In this article, we will explore 10 exemplary toggle menu designs that showcase both functionality and aesthetic appeal. These examples will inspire you to create intuitive and visually pleasing navigation solutions for your projects.
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
Designers and developers, elevate your projects with Subframe's drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect toggle menus effortlessly, ensuring a seamless user experience every time.
Loved by professionals across the industry, Subframe makes UI design a breeze. 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
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect toggle menus and other UI components effortlessly. Our drag-and-drop interface ensures efficiency and precision in every project.
Don't wait! Start for free and begin designing stunning UIs immediately. Join the community of professionals who trust Subframe for their design needs.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Analytics Dashboard</title> <style> :root { --primary: #1E63E9; --primary-light: #3574F0; --primary-dark: #1149B3; --secondary: #F5F7FA; --gray-light: #E0E5ED; --gray-medium: #94A3B8; --gray-dark: #475569; --text-dark: #1E293B; --text-light: #FFFFFF; --danger: #EF4444; --success: #10B981; --warning: #FBBF24; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --border-radius: 8px; --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: #FAFBFC; color: var(--text-dark); overflow-x: hidden; height: 100vh; display: flex; flex-direction: column; } .dashboard-container { display: flex; height: 100%; max-width: 700px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); border-radius: 12px; } /* Sidebar styling */ .sidebar { width: 260px; background-color: white; height: 100%; transition: var(--transition); transform: translateX(0); position: absolute; left: 0; top: 0; bottom: 0; z-index: 50; box-shadow: var(--shadow-md); } .sidebar.collapsed { transform: translateX(-220px); } .sidebar-header { padding: 24px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-light); } .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; color: var(--primary); } .logo-icon { width: 32px; height: 32px; background-color: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; } .toggle-btn { width: 36px; height: 36px; border-radius: 50%; background-color: var(--secondary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .toggle-btn:hover { background-color: var(--gray-light); } .toggle-btn i { transition: var(--transition); } .sidebar.collapsed .toggle-btn i { transform: rotate(180deg); } .sidebar-menu { padding: 16px 12px; overflow-y: auto; max-height: calc(100% - 84px); } .menu-label { color: var(--gray-medium); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 8px 8px; } .menu-item { display: flex; align-items: center; padding: 10px 12px; margin-bottom: 4px; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .menu-item:hover { background-color: var(--secondary); } .menu-item.active { background-color: var(--primary); color: var(--text-light); } .menu-item.active i, .menu-item.active .item-text { color: var(--text-light); } .menu-item i { width: 24px; color: var(--gray-dark); transition: var(--transition); font-size: 18px; } .item-text { margin-left: 12px; font-weight: 500; transition: var(--transition); white-space: nowrap; } .menu-item .badge { margin-left: auto; background-color: var(--danger); color: white; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; } .menu-item .chevron { margin-left: auto; transition: var(--transition); color: var(--gray-medium); } .menu-item.expanded .chevron { transform: rotate(90deg); } .submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding-left: 36px; } .submenu.expanded { max-height: 200px; } .submenu-item { padding: 8px 12px; margin-bottom: 2px; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); font-size: 14px; color: var(--gray-dark); display: block; } .submenu-item:hover { background-color: var(--secondary); } .submenu-item.active { color: var(--primary); font-weight: 500; } /* Main content area */ .main-content { flex: 1; padding: 24px; margin-left: 260px; transition: var(--transition); background-color: #F8FAFC; position: relative; width: calc(100% - 260px); } .main-content.expanded { margin-left: 40px; width: calc(100% - 40px); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .greeting { font-weight: 600; font-size: 24px; } .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background-color: white; padding: 16px; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: var(--transition); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stat-title { color: var(--gray-dark); font-size: 14px; margin-bottom: 8px; } .stat-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; } .stat-value.positive { color: var(--success); } .stat-value.negative { color: var(--danger); } .stat-value.neutral { color: var(--warning); } .stat-change { font-size: 12px; color: var(--gray-medium); } .chart-container { background-color: white; padding: 20px; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); margin-bottom: 24px; } .chart-header { display: flex; justify-content: space-between; margin-bottom: 16px; } .chart-title { font-weight: 600; font-size: 18px; } .chart-actions { display: flex; gap: 8px; } .chart-btn { background-color: var(--secondary); border: none; padding: 6px 12px; border-radius: var(--border-radius); cursor: pointer; font-size: 12px; font-weight: 500; transition: var(--transition); } .chart-btn:hover { background-color: var(--gray-light); } .chart-btn.active { background-color: var(--primary); color: white; } /* Pulse animation for notification badge */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .badge.pulse { animation: pulse 1.5s infinite ease-in-out; } /* Ripple effect for menu items */ .menu-item .ripple { position: absolute; background: 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(4); opacity: 0; } } /* Toggle switch */ .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; margin-left: auto; } .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: var(--gray-light); transition: var(--transition); border-radius: 22px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: var(--transition); border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--primary); } input:checked + .toggle-slider:before { transform: translateX(18px); } /* Responsive styles */ @media (max-width: 700px) { .sidebar { width: 220px; } .sidebar.collapsed { transform: translateX(-180px); } .main-content { margin-left: 220px; width: calc(100% - 220px); padding: 16px; } .main-content.expanded { margin-left: 40px; width: calc(100% - 40px); } .stats-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats-container { grid-template-columns: 1fr; } } /* Chart placeholder styles */ .chart-placeholder { width: 100%; height: 240px; background: linear-gradient( to right, var(--secondary), #EBF5FF, var(--secondary) ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--border-radius); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Custom chart styling */ #revenue-chart { width: 100%; height: 240px; position: relative; } .chart-bar { position: absolute; bottom: 0; width: 20px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%); transition: height 1s cubic-bezier(0.22, 1, 0.36, 1); } .chart-tooltip { position: absolute; background-color: var(--text-dark); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s; transform: translateY(-8px); z-index: 10; white-space: nowrap; } .chart-bar:hover .chart-tooltip { opacity: 1; } .chart-x-axis { position: absolute; bottom: -24px; left: 0; right: 0; display: flex; justify-content: space-between; color: var(--gray-medium); font-size: 11px; } .chart-y-axis { position: absolute; top: 0; left: -40px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: var(--gray-medium); font-size: 11px; text-align: right; } .user-profile { display: flex; align-items: center; padding: 12px; margin-top: auto; border-top: 1px solid var(--gray-light); } .avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--primary-light); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; margin-right: 12px; } .user-info { flex: 1; } .user-name { font-weight: 600; font-size: 14px; } .user-role { font-size: 12px; color: var(--gray-medium); } .recent-activity { background-color: white; border-radius: var(--border-radius); padding: 20px; box-shadow: var(--shadow-sm); } .activity-title { font-weight: 600; font-size: 18px; margin-bottom: 16px; } .activity-list { display: flex; flex-direction: column; gap: 12px; } .activity-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-light); } .activity-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .icon-blue { background-color: rgba(30, 99, 233, 0.1); color: var(--primary); } .icon-green { background-color: rgba(16, 185, 129, 0.1); color: var(--success); } .icon-red { background-color: rgba(239, 68, 68, 0.1); color: var(--danger); } .icon-yellow { background-color: rgba(251, 191, 36, 0.1); color: var(--warning); } .activity-content { flex: 1; } .activity-text { font-size: 14px; margin-bottom: 2px; } .activity-time { font-size: 12px; color: var(--gray-medium); } </style> </head> <body> <div class="dashboard-container"> <!-- Sidebar Navigation --> <aside class="sidebar"> <div class="sidebar-header"> <div class="logo"> <div class="logo-icon"> <i class="fas fa-bolt"></i> </div> <span class="logo-text">DataSync</span> </div> <button class="toggle-btn" id="toggle-sidebar"> <i class="fas fa-chevron-left"></i> </button> </div> <div class="sidebar-menu"> <div class="menu-label">Dashboard</div> <div class="menu-item active"> <i class="fas fa-chart-line"></i> <span class="item-text">Analytics</span> </div> <div class="menu-item"> <i class="fas fa-tachometer-alt"></i> <span class="item-text">Performance</span> </div> <div class="menu-item"> <i class="fas fa-bullseye"></i> <span class="item-text">Campaigns</span> <span class="badge pulse">3</span> </div> <div class="menu-label">Reports</div> <div class="menu-item has-submenu"> <i class="fas fa-file-alt"></i> <span class="item-text">Financial</span> <i class="fas fa-chevron-right chevron"></i> </div> <div class="submenu"> <div class="submenu-item">Revenue Report</div> <div class="submenu-item">Expense Tracking</div> <div class="submenu-item">Budget Analysis</div> </div> <div class="menu-item has-submenu"> <i class="fas fa-users"></i> <span class="item-text">Users</span> <i class="fas fa-chevron-right chevron"></i> </div> <div class="submenu"> <div class="submenu-item">Activity Log</div> <div class="submenu-item">User Segments</div> <div class="submenu-item">Engagement</div> </div> <div class="menu-label">Configuration</div> <div class="menu-item"> <i class="fas fa-cog"></i> <span class="item-text">Settings</span> </div> <div class="menu-item"> <i class="fas fa-bell"></i> <span class="item-text">Notifications</span> <label class="toggle-switch"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="menu-item"> <i class="fas fa-palette"></i> <span class="item-text">Dark Mode</span> <label class="toggle-switch"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> <div class="menu-item"> <i class="fas fa-question-circle"></i> <span class="item-text">Help Center</span> </div> </div> <div class="user-profile"> <div class="avatar">AM</div> <div class="user-info"> <div class="user-name">Alex Morgan</div> <div class="user-role">Product Manager</div> </div> </div> </aside> <!-- Main Content Area --> <div class="main-content"> <div class="header"> <h1 class="greeting">Good morning, Alex</h1> </div> <!-- Stats Row --> <div class="stats-container"> <div class="stat-card"> <div class="stat-title">Active Users</div> <div class="stat-value">12,849</div> <div class="stat-change"> <i class="fas fa-arrow-up" style="color: var(--success);"></i> 8.2% from last week </div> </div> <div class="stat-card"> <div class="stat-title">Revenue</div> <div class="stat-value">$84,392</div> <div class="stat-change"> <i class="fas fa-arrow-up" style="color: var(--success);"></i> 12.5% from last month </div> </div> <div class="stat-card"> <div class="stat-title">Conversion Rate</div> <div class="stat-value">3.6%</div> <div class="stat-change"> <i class="fas fa-arrow-down" style="color: var(--danger);"></i> 1.8% from last week </div> </div> </div> <!-- Chart Section --> <div class="chart-container"> <div class="chart-header"> <div class="chart-title">Revenue Trends</div> <div class="chart-actions"> <button class="chart-btn">Day</button> <button class="chart-btn active">Week</button> <button class="chart-btn">Month</button> <button class="chart-btn">Year</button> </div> </div> <div id="revenue-chart"> <!-- Chart will be rendered here via JS --> </div> </div> <!-- Recent Activity Section --> <div class="recent-activity"> <h3 class="activity-title">Recent Activity</h3> <div class="activity-list"> <div class="activity-item"> <div class="activity-icon icon-blue"> <i class="fas fa-user-plus"></i> </div> <div class="activity-content"> <div class="activity-text">New enterprise client onboarded</div> <div class="activity-time">10 minutes ago</div> </div> </div> <div class="activity-item"> <div class="activity-icon icon-green"> <i class="fas fa-check-circle"></i> </div> <div class="activity-content"> <div class="activity-text">Q2 sales report approved by finance</div> <div class="activity-time">1 hour ago</div> </div> </div> <div class="activity-item"> <div class="activity-icon icon-red"> <i class="fas fa-exclamation-triangle"></i> </div> <div class="activity-content"> <div class="activity-text">Server latency alert in EU region</div> <div class="activity-time">3 hours ago</div> </div> </div> <div class="activity-item"> <div class="activity-icon icon-yellow"> <i class="fas fa-chart-pie"></i> </div> <div class="activity-content"> <div class="activity-text">Marketing campaign performance improved 24%</div> <div class="activity-time">Yesterday</div> </div> </div> </div> </div> </div> </div> <!-- Include Font Awesome for icons --> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Toggle sidebar const toggleBtn = document.getElementById('toggle-sidebar'); const sidebar = document.querySelector('.sidebar'); const mainContent = document.querySelector('.main-content'); toggleBtn.addEventListener('click', function() { sidebar.classList.toggle('collapsed'); mainContent.classList.toggle('expanded'); }); // Menu item ripple effect const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', function(e) { // Remove active class from all items menuItems.forEach(i => { if (!i.classList.contains('has-submenu')) { i.classList.remove('active'); } }); // Add active class if not a submenu toggle if (!this.classList.contains('has-submenu')) { this.classList.add('active'); } // Create ripple effect const rect = item.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.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); // Toggle submenu if this is a parent item if (this.classList.contains('has-submenu')) { this.classList.toggle('expanded'); const submenu = this.nextElementSibling; if (submenu.classList.contains('submenu')) { submenu.classList.toggle('expanded'); } } }); }); // Submenu item click handler const submenuItems = document.querySelectorAll('.submenu-item'); submenuItems.forEach(item => { item.addEventListener('click', function(e) { e.stopPropagation(); // Prevent parent menu item from receiving click // Remove active class from all submenu items submenuItems.forEach(i => i.classList.remove('active')); // Add active class to clicked item this.classList.add('active'); }); }); // Chart rendering function renderChart() { const chartContainer = document.getElementById('revenue-chart'); chartContainer.innerHTML = ''; // Clear previous chart // Sample data for the chart const data = [42, 58, 69, 53, 62, 78, 85]; const maxValue = Math.max(...data); const months = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; // Create chart with bars const chartWidth = chartContainer.offsetWidth; const barWidth = Math.min(40, (chartWidth - 40) / data.length - 10); const spacing = (chartWidth - 40 - (barWidth * data.length)) / (data.length - 1); // Add Y-axis labels const yAxis = document.createElement('div'); yAxis.className = 'chart-y-axis'; const yAxisLabels = ['$100k', '$75k', '$50k', '$25k', '$0']; yAxisLabels.forEach(label => { const yLabel = document.createElement('span'); yLabel.textContent = label; yAxis.appendChild(yLabel); }); chartContainer.appendChild(yAxis); // Create bars data.forEach((value, index) => { const bar = document.createElement('div'); bar.className = 'chart-bar'; const height = (value / maxValue) * 200; const left = 40 + index * (barWidth + spacing); bar.style.height = `${height}px`; bar.style.left = `${left}px`; bar.style.width = `${barWidth}px`; // Add tooltip const tooltip = document.createElement('div'); tooltip.className = 'chart-tooltip'; tooltip.textContent = `$${value}k`; bar.appendChild(tooltip); chartContainer.appendChild(bar); }); // Add X-axis labels const xAxis = document.createElement('div'); xAxis.className = 'chart-x-axis'; months.forEach(month => { const xLabel = document.createElement('span'); xLabel.textContent = month; xAxis.appendChild(xLabel); }); chartContainer.appendChild(xAxis); // Animate the bars setTimeout(() => { const bars = document.querySelectorAll('.chart-bar'); bars.forEach(bar => { const currentHeight = bar.style.height; bar.style.height = '0'; setTimeout(() => { bar.style.height = currentHeight; }, 100); }); }, 200); } // Render chart on load and window resize renderChart(); window.addEventListener('resize', renderChart); // Chart period buttons const chartButtons = document.querySelectorAll('.chart-btn'); chartButtons.forEach(btn => { btn.addEventListener('click', function() { chartButtons.forEach(b => b.classList.remove('active')); this.classList.add('active'); renderChart(); // Re-render chart with new data }); }); // Toggle switches const toggleSwitches = document.querySelectorAll('.toggle-switch input'); toggleSwitches.forEach(toggle => { toggle.addEventListener('change', function() { // Here you would handle the toggle state change // For this demo, we're just handling the UI interaction }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonSync Gaming Dashboard</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); :root { --neon-blue: #00F0FF; --neon-purple: #9D00FF; --neon-pink: #FF00E5; --neon-green: #00FF9E; --neon-yellow: #FFEE00; --background: #080C12; --dark-panel: #101520; --medium-panel: #1A1F2E; --light-panel: #252A3B; --text-color: #E0E0FF; --glitch-duration: 3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; } body { background-color: var(--background); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; position: relative; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 20%, rgba(157, 0, 255, 0.05), transparent 40%), radial-gradient(circle at 80% 80%, rgba(0, 240, 255, 0.05), transparent 40%); z-index: -1; } .dashboard-container { width: 100%; max-width: 680px; height: 680px; display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 30px rgba(0, 240, 255, 0.15), 0 0 60px rgba(157, 0, 255, 0.1); background-color: var(--dark-panel); } .grid-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; } .header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background-color: rgba(16, 21, 32, 0.8); backdrop-filter: blur(5px); border-bottom: 1px solid rgba(0, 240, 255, 0.2); z-index: 2; position: relative; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); position: relative; display: flex; justify-content: center; align-items: center; animation: pulse 3s infinite; } .logo-icon::before { content: ''; position: absolute; width: 24px; height: 4px; background-color: var(--text-color); transform: rotate(45deg); box-shadow: 0 0 10px var(--neon-blue); } .logo-icon::after { content: ''; position: absolute; width: 24px; height: 4px; background-color: var(--text-color); transform: rotate(-45deg); box-shadow: 0 0 10px var(--neon-purple); } .logo-text { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 1px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(0, 240, 255, 0.3); } .user-menu { display: flex; align-items: center; gap: 15px; } .notification { position: relative; cursor: pointer; } .notification svg { width: 20px; height: 20px; fill: var(--text-color); transition: transform 0.2s, fill 0.2s; } .notification:hover svg { fill: var(--neon-blue); transform: scale(1.1); } .notification-badge { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background-color: var(--neon-pink); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 8px; font-weight: bold; box-shadow: 0 0 5px var(--neon-pink); } .user-profile { width: 32px; height: 32px; border-radius: 50%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23E0E0FF" d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,6c1.93,0,3.5,1.57,3.5,3.5S13.93,13,12,13s-3.5-1.57-3.5-3.5S10.07,6,12,6z M12,20c-2.03,0-3.1-0.2-4.7-0.9c0.4-1.5,1.68-2.6,3.2-2.6h3c1.52,0,2.8,1.1,3.2,2.6C15.1,19.8,14.03,20,12,20z"/></svg>'); background-size: cover; border: 2px solid var(--neon-blue); box-shadow: 0 0 8px rgba(0, 240, 255, 0.5); cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; } .user-profile:hover { border-color: var(--neon-purple); box-shadow: 0 0 12px rgba(157, 0, 255, 0.6); } .main-content { flex: 1; display: flex; position: relative; z-index: 1; } .toggle-menu { position: absolute; top: 15px; left: 15px; width: 40px; height: 40px; background-color: var(--medium-panel); border-radius: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; border: 1px solid rgba(0, 240, 255, 0.3); box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); transition: background-color 0.3s, box-shadow 0.3s; } .toggle-menu:hover { background-color: var(--light-panel); box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); } .toggle-icon { position: relative; width: 20px; height: 20px; } .toggle-icon span { position: absolute; width: 100%; height: 2px; background-color: var(--neon-blue); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; box-shadow: 0 0 5px var(--neon-blue); } .toggle-icon span:nth-child(1) { top: 4px; } .toggle-icon span:nth-child(2) { top: 9px; } .toggle-icon span:nth-child(3) { top: 14px; } .menu-open .toggle-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .menu-open .toggle-icon span:nth-child(2) { opacity: 0; } .menu-open .toggle-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .sidebar { width: 70px; background-color: rgba(26, 31, 46, 0.9); border-right: 1px solid rgba(0, 240, 255, 0.2); backdrop-filter: blur(10px); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; z-index: 5; } .menu-open .sidebar { width: 220px; } .sidebar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(157, 0, 255, 0.05) 0%, transparent 50%), linear-gradient(45deg, rgba(0, 240, 255, 0.05) 0%, transparent 50%); z-index: -1; } .nav-items { margin-top: 70px; padding: 10px; list-style: none; } .nav-item { margin-bottom: 8px; position: relative; border-radius: 8px; transition: background-color 0.3s; } .nav-item:hover { background-color: rgba(0, 240, 255, 0.1); } .nav-item.active { background-color: rgba(0, 240, 255, 0.15); } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--neon-purple), var(--neon-blue)); border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(0, 240, 255, 0.6); } .nav-link { display: flex; align-items: center; padding: 10px; color: var(--text-color); text-decoration: none; transition: color 0.3s; overflow: hidden; } .nav-item:hover .nav-link { color: var(--neon-blue); } .nav-icon { min-width: 24px; height: 24px; margin-right: 15px; display: flex; justify-content: center; align-items: center; position: relative; } .nav-icon svg { width: 20px; height: 20px; fill: currentColor; transition: transform 0.3s, filter 0.3s; } .nav-item:hover .nav-icon svg { transform: scale(1.1); filter: drop-shadow(0 0 3px var(--neon-blue)); } .nav-text { white-space: nowrap; font-size: 16px; font-weight: 500; letter-spacing: 0.5px; opacity: 0; transform: translateX(10px); transition: opacity 0.3s, transform 0.3s; } .menu-open .nav-text { opacity: 1; transform: translateX(0); } .nav-item.active .nav-text { font-weight: 600; } .content-area { flex: 1; overflow-y: auto; padding: 30px; position: relative; } .content-area::-webkit-scrollbar { width: 5px; } .content-area::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } .content-area::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.3); border-radius: 5px; } .content-area::-webkit-scrollbar-thumb:hover { background: rgba(0, 240, 255, 0.5); } .dashboard-title { font-family: 'Orbitron', sans-serif; font-size: 28px; font-weight: 700; margin-bottom: 10px; position: relative; display: inline-block; color: var(--text-color); } .dashboard-title::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); border-radius: 2px; box-shadow: 0 0 5px rgba(0, 240, 255, 0.5); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; margin-top: 25px; } .stat-card { background-color: var(--medium-panel); border-radius: 10px; padding: 15px; position: relative; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); cursor: pointer; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 240, 255, 0.2); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); opacity: 0.7; } .stat-title { font-size: 14px; color: rgba(224, 224, 255, 0.7); margin-bottom: 5px; } .stat-value { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 5px; display: flex; align-items: baseline; } .stat-value-main { background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-value-unit { font-size: 14px; margin-left: 3px; opacity: 0.7; color: var(--text-color); } .stat-trend { display: flex; align-items: center; font-size: 12px; gap: 3px; } .trend-up { color: var(--neon-green); } .trend-down { color: var(--neon-pink); } .recent-games { margin-top: 30px; } .section-title { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .section-title::before { content: ''; width: 15px; height: 15px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .game-card { background-color: var(--medium-panel); border-radius: 10px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); cursor: pointer; position: relative; } .game-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 240, 255, 0.2); } .game-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.8)); z-index: 1; } .game-image { width: 100%; height: 120px; object-fit: cover; transition: transform 0.5s; } .game-card:hover .game-image { transform: scale(1.05); } .game-info { padding: 12px; position: relative; z-index: 2; } .game-title { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--text-color); } .game-meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(224, 224, 255, 0.7); } .game-hours { display: flex; align-items: center; gap: 3px; } .game-hours svg { width: 12px; height: 12px; fill: currentColor; } .game-last-played { position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; padding: 3px 6px; font-size: 10px; z-index: 2; backdrop-filter: blur(2px); border: 1px solid rgba(0, 240, 255, 0.3); } .quick-actions { margin-top: 30px; } .action-buttons { display: flex; gap: 15px; flex-wrap: wrap; } .action-button { background-color: var(--medium-panel); border: none; border-radius: 8px; padding: 12px 20px; color: var(--text-color); font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .action-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(157, 0, 255, 0.2)); opacity: 0; transition: opacity 0.3s; } .action-button:hover::before { opacity: 1; } .action-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 240, 255, 0.2); } .action-button svg { width: 18px; height: 18px; fill: currentColor; position: relative; z-index: 1; } .action-button span { position: relative; z-index: 1; } .action-button.primary { background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); box-shadow: 0 5px 15px rgba(0, 240, 255, 0.3); } .action-button.primary:hover { box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4); } .action-button.primary::before { background: linear-gradient(135deg, rgba(157, 0, 255, 0.4), rgba(0, 240, 255, 0.4)); } /* Glitch effect */ @keyframes glitch { 0% { clip-path: inset(40% 0 61% 0); transform: translate(-5px, 5px); } 20% { clip-path: inset(92% 0 1% 0); transform: translate(5px, -5px); } 40% { clip-path: inset(43% 0 1% 0); transform: translate(-5px, 5px); } 60% { clip-path: inset(25% 0 58% 0); transform: translate(5px, -5px); } 80% { clip-path: inset(54% 0 7% 0); transform: translate(-5px, 5px); } 100% { clip-path: inset(58% 0 43% 0); transform: translate(5px, -5px); } } .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(--dark-panel); } .glitch-effect::before { left: 2px; text-shadow: -2px 0 var(--neon-blue); animation: glitch var(--glitch-duration) infinite linear alternate-reverse; } .glitch-effect::after { left: -2px; text-shadow: 2px 0 var(--neon-purple); animation: glitch var(--glitch-duration) infinite linear alternate; } @keyframes pulse { 0% { box-shadow: 0 0 5px var(--neon-blue); } 50% { box-shadow: 0 0 15px var(--neon-purple); } 100% { box-shadow: 0 0 5px var(--neon-blue); } } .loading-bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: rgba(0, 240, 255, 0.1); overflow: hidden; z-index: 5; } .loading-bar::before { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, var(--neon-blue), var(--neon-purple)); animation: loading 2s infinite; } @keyframes loading { 0% { left: -50%; } 100% { left: 100%; } } .status-indicator { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(224, 224, 255, 0.7); z-index: 5; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--neon-green); box-shadow: 0 0 5px var(--neon-green); animation: blink 2s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Responsive adjustments */ @media (max-width: 600px) { .dashboard-container { height: 100vh; border-radius: 0; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .game-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .action-buttons { flex-direction: column; } .action-button { width: 100%; } } /* Sound pulse indicator */ .sound-pulse { position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 4px; z-index: 5; } .sound-bar { width: 3px; height: 12px; background-color: var(--neon-blue); border-radius: 3px; animation: sound-wave 1.5s infinite; } .sound-bar:nth-child(2) { animation-delay: 0.2s; height: 15px; } .sound-bar:nth-child(3) { animation-delay: 0.4s; height: 10px; } .sound-bar:nth-child(4) { animation-delay: 0.6s; height: 13px; } @keyframes sound-wave { 0%, 100% { transform: scaleY(0.5); background-color: var(--neon-purple); } 50% { transform: scaleY(1); background-color: var(--neon-blue); } } /* Noise texture */ .noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4='); pointer-events: none; z-index: 100; opacity: 0.05; mix-blend-mode: overlay; } </style> </head> <body> <div class="noise"></div> <div class="dashboard-container"> <div class="grid-background"></div> <div class="header"> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">NEONSYNC</div> </div> <div class="user-menu"> <div class="notification"> <svg viewBox="0 0 24 24"> <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/> </svg> <div class="notification-badge">3</div> </div> <div class="user-profile"></div> </div> </div> <div class="main-content"> <div class="toggle-menu"> <div class="toggle-icon"> <span></span> <span></span> <span></span> </div> </div> <div class="sidebar"> <ul class="nav-items"> <li class="nav-item active"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg viewBox="0 0 24 24"> <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/> </svg> </div> <span class="nav-text">Dashboard</span> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg viewBox="0 0 24 24"> <path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z"/> </svg> </div> <span class="nav-text">Library</span> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg viewBox="0 0 24 24"> <path d="M20 6h-3V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z"/> </svg> </div> <span class="nav-text">Store</span> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg viewBox="0 0 24 24"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> </div> <span class="nav-text">Friends</span> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg viewBox="0 0 24 24"> <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.44.17-.47.41l-.36 2.54c-.59.24-1.13.57-
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Filter Toggle Menu</title> <style> :root { --primary: #4a6de5; --primary-light: #e4e9ff; --secondary: #ff7d3b; --dark: #2c3e50; --gray: #f5f7fa; --text: #333; --light: #fff; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--gray); color: var(--text); width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; overflow-x: hidden; } .container { max-width: 700px; width: 100%; height: 700px; background-color: var(--light); border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; position: relative; } .header { padding: 1.5rem; background: linear-gradient(120deg, var(--primary), #5f6fe9); color: var(--light); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; } .header h1 { font-size: 1.5rem; font-weight: 700; } .search-bar { display: flex; padding: 1rem 1.5rem; background-color: var(--light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); position: relative; z-index: 9; } .search-input { flex: 1; padding: 0.75rem 1rem; border: 2px solid var(--gray); border-radius: 8px; font-size: 0.95rem; transition: var(--transition); outline: none; } .search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .filter-toggle { background-color: var(--primary); color: white; border: none; border-radius: 8px; padding: 0.75rem 1.25rem; margin-left: 0.75rem; cursor: pointer; font-weight: 600; display: flex; align-items: center; transition: var(--transition); } .filter-toggle:hover { background-color: #3a5bd1; transform: translateY(-2px); } .filter-toggle svg { margin-right: 0.5rem; } .filter-panel { position: absolute; background-color: var(--light); top: 134px; left: 0; width: 100%; height: calc(100% - 134px); transform: translateY(-100%); opacity: 0; z-index: 8; padding: 1.5rem; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease; display: flex; flex-direction: column; overflow-y: auto; } .filter-panel.visible { transform: translateY(0); opacity: 1; } .filter-section { margin-bottom: 1.5rem; } .filter-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; } .filter-section h3 svg { margin-right: 0.5rem; color: var(--primary); } .filter-options { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter-checkbox { display: none; } .filter-label { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background-color: var(--gray); border-radius: 6px; font-size: 0.9rem; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .filter-label::before { content: ''; position: absolute; background-color: var(--primary-light); width: 0; height: 0; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; z-index: -1; } .filter-label:hover::before { width: 120%; height: 120%; } .filter-checkbox:checked + .filter-label { background-color: var(--primary); color: white; } .price-range { display: flex; flex-direction: column; gap: 1rem; } .slider-container { position: relative; height: 6px; background-color: var(--gray); border-radius: 3px; margin: 1rem 0.5rem; } .slider-progress { position: absolute; top: 0; left: 25%; right: 25%; height: 100%; background-color: var(--primary); border-radius: 3px; } .slider-handle { width: 18px; height: 18px; background-color: var(--light); border: 2px solid var(--primary); border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; } .slider-handle:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .slider-handle.left { left: 25%; } .slider-handle.right { left: 75%; } .price-inputs { display: flex; gap: 0.75rem; } .price-inputs input { flex: 1; padding: 0.75rem; border: 2px solid var(--gray); border-radius: 6px; font-size: 0.9rem; transition: var(--transition); outline: none; } .price-inputs input:focus { border-color: var(--primary); } .filter-actions { display: flex; margin-top: 1rem; gap: 0.75rem; } .filter-actions button { flex: 1; padding: 0.75rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; } .apply-btn { background-color: var(--primary); color: white; } .apply-btn:hover { background-color: #3a5bd1; transform: translateY(-2px); } .reset-btn { background-color: var(--gray); color: var(--dark); } .reset-btn:hover { background-color: #e0e4eb; } .products-container { flex: 1; padding: 1.5rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .product-card { background-color: var(--light); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: var(--transition); cursor: pointer; position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .product-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent); pointer-events: none; } .product-image { height: 140px; width: 100%; object-fit: cover; border-bottom: 2px solid var(--gray); } .product-info { padding: 0.75rem; } .product-tag { font-size: 0.7rem; text-transform: uppercase; background-color: var(--primary-light); color: var(--primary); padding: 0.2rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; display: inline-block; font-weight: 600; } .product-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-price { font-size: 1rem; font-weight: 700; color: var(--primary); } .product-rating { display: flex; align-items: center; font-size: 0.8rem; margin-top: 0.5rem; } .stars { color: #ffc833; margin-right: 0.3rem; } .rating-count { color: #888; font-size: 0.75rem; } .active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.5rem; margin-bottom: 0.5rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin 0.3s ease; } .active-filters.visible { max-height: 100px; margin-bottom: 1rem; } .filter-tag { display: flex; align-items: center; background-color: var(--primary-light); color: var(--primary); padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-weight: 500; gap: 0.5rem; } .remove-filter { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--primary); } .filter-count { position: absolute; right: 1rem; top: 1rem; background-color: var(--secondary); color: white; font-size: 0.75rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: opacity 0.3s ease, transform 0.3s ease; } .filter-count.visible { opacity: 1; transform: scale(1); } @media (max-width: 480px) { .header h1 { font-size: 1.2rem; } .products-container { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .filter-toggle { padding: 0.75rem; } .filter-toggle span { display: none; } .filter-toggle svg { margin-right: 0; } } .price-display { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.9rem; color: var(--dark); } .empty-state { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; height: 100%; } .empty-state.visible { display: flex; } .empty-state svg { font-size: 3rem; color: var(--gray); margin-bottom: 1rem; } .empty-state h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--dark); } .empty-state p { color: #888; font-size: 0.9rem; max-width: 300px; margin-bottom: 1rem; } .reset-search { background-color: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; cursor: pointer; transition: var(--transition); } .reset-search:hover { background-color: #3a5bd1; } /* Animation classes */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .product-card { animation: fadeIn 0.5s forwards; opacity: 0; } .product-card:nth-child(1) { animation-delay: 0.1s; } .product-card:nth-child(2) { animation-delay: 0.15s; } .product-card:nth-child(3) { animation-delay: 0.2s; } .product-card:nth-child(4) { animation-delay: 0.25s; } .product-card:nth-child(5) { animation-delay: 0.3s; } .product-card:nth-child(6) { animation-delay: 0.35s; } .product-card:nth-child(7) { animation-delay: 0.4s; } .product-card:nth-child(8) { animation-delay: 0.45s; } .product-card:nth-child(9) { animation-delay: 0.5s; } .product-card:nth-child(10) { animation-delay: 0.55s; } .product-card:nth-child(11) { animation-delay: 0.6s; } .product-card:nth-child(12) { animation-delay: 0.65s; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Urban Thread Co.</h1> <div class="filter-count">0</div> </div> <div class="search-bar"> <input type="text" class="search-input" placeholder="Search for premium essentials..."> <button class="filter-toggle"> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> </svg> <span>Filters</span> </button> </div> <div class="active-filters"> <!-- Dynamic filter tags will be added here --> </div> <div class="filter-panel"> <div class="filter-section"> <h3> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> </svg> Categories </h3> <div class="filter-options"> <input type="checkbox" id="tshirts" class="filter-checkbox" data-type="category" data-value="T-Shirts"> <label for="tshirts" class="filter-label">T-Shirts</label> <input type="checkbox" id="sweaters" class="filter-checkbox" data-type="category" data-value="Sweaters"> <label for="sweaters" class="filter-label">Sweaters</label> <input type="checkbox" id="outerwear" class="filter-checkbox" data-type="category" data-value="Outerwear"> <label for="outerwear" class="filter-label">Outerwear</label> <input type="checkbox" id="denim" class="filter-checkbox" data-type="category" data-value="Denim"> <label for="denim" class="filter-label">Denim</label> <input type="checkbox" id="accessories" class="filter-checkbox" data-type="category" data-value="Accessories"> <label for="accessories" class="filter-label">Accessories</label> </div> </div> <div class="filter-section"> <h3> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path> </svg> Sort By </h3> <div class="filter-options"> <input type="checkbox" id="popular" class="filter-checkbox" data-type="sort" data-value="Most Popular"> <label for="popular" class="filter-label">Most Popular</label> <input type="checkbox" id="newest" class="filter-checkbox" data-type="sort" data-value="Newest"> <label for="newest" class="filter-label">Newest</label> <input type="checkbox" id="price-low" class="filter-checkbox" data-type="sort" data-value="Price: Low to High"> <label for="price-low" class="filter-label">Price: Low to High</label> <input type="checkbox" id="price-high" class="filter-checkbox" data-type="sort" data-value="Price: High to Low"> <label for="price-high" class="filter-label">Price: High to Low</label> </div> </div> <div class="filter-section"> <h3> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path> </svg> Price Range </h3> <div class="price-range"> <div class="slider-container"> <div class="slider-progress"></div> <div class="slider-handle left" data-handle="min"></div> <div class="slider-handle right" data-handle="max"></div> </div> <div class="price-display"> <span class="min-price">$20</span> <span class="max-price">$120</span> </div> <div class="price-inputs"> <input type="number" class="min-input" placeholder="$Min" min="0" max="1000"> <input type="number" class="max-input" placeholder="$Max" min="0" max="1000"> </div> </div> </div> <div class="filter-section"> <h3> <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path> </svg> Features </h3> <div class="filter-options"> <input type="checkbox" id="sustainable" class="filter-checkbox" data-type="feature" data-value="Sustainable"> <label for="sustainable" class="filter-label">Sustainable</label> <input type="checkbox" id="organic" class="filter-checkbox" data-type="feature" data-value="Organic"> <label for="organic" class="filter-label">Organic</label> <input type="checkbox" id="limited" class="filter-checkbox" data-type="feature" data-value="Limited Edition"> <label for="limited" class="filter-label">Limited Edition</label> <input type="checkbox" id="bestseller" class="filter-checkbox" data-type="feature" data-value="Bestseller"> <label for="bestseller" class="filter-label">Bestseller</label> </div> </div> <div class="filter-actions"> <button class="apply-btn">Apply Filters</button> <button class="reset-btn">Reset</button> </div> </div> <div class="products-container"> <!-- Product cards will dynamically generate here --> </div> <div class="empty-state"> <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <h3>No matching products</h3> <p>Try adjusting your filters or search query to find what you're looking for.</p> <button class="reset-search">Reset All Filters</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Sample product data const products = [ { id: 1, title: "Premium Cotton Tee", category: "T-Shirts", price: 39.99, image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.8, reviews: 128, tag: "Bestseller", features: ["Organic", "Bestseller"] }, { id: 2, title: "Merino Wool Sweater", category: "Sweaters", price: 89.99, image: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.7, reviews: 84, tag: "Sustainable", features: ["Sustainable"] }, { id: 3, title: "Vintage Denim Jacket", category: "Outerwear", price: 129.99, image: "https://images.unsplash.com/photo-1551537482-f2075a1d41f2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.9, reviews: 57, tag: "Limited Edition", features: ["Limited Edition"] }, { id: 4, title: "Slim Fit Selvedge Jeans", category: "Denim", price: 69.99, image: "https://images.unsplash.com/photo-1541099649105-f69ad21f3246?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.6, reviews: 93, tag: "Bestseller", features: ["Bestseller"] }, { id: 5, title: "Canvas Weekender Bag", category: "Accessories", price: 79.99, image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.7, reviews: 42, tag: "Sustainable", features: ["Sustainable"] }, { id: 6, title: "Long Sleeve Henley", category: "T-Shirts", price: 49.99, image: "https://images.unsplash.com/photo-1530286910461-6a1960d1e83a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.5, reviews: 38, tag: "Organic", features: ["Organic"] }, { id: 7, title: "Cashmere Blend Cardigan", category: "Sweaters", price: 119.99, image: "https://images.unsplash.com/photo-1559582798-678dfc71ccd8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.9, reviews: 24, tag: "Limited Edition", features: ["Limited Edition"] }, { id: 8, title: "Waterproof Utility Jacket", category: "Outerwear", price: 149.99, image: "https://images.unsplash.com/photo-1559582798-cc14a6e5ef3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.8, reviews: 31, tag: "Sustainable", features: ["Sustainable"] }, { id: 9, title: "Distressed Denim Shorts", category: "Denim", price: 59.99, image: "https://images.unsplash.com/photo-1555689502-c4b22d76c56f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.4, reviews: 47, tag: "Bestseller", features: ["Bestseller"] }, { id: 10, title: "Leather Wallet", category: "Accessories", price: 45.99, image: "https://images.unsplash.com/photo-1559563458-527698bf5295?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.6, reviews: 85, tag: "Organic", features: ["Organic"] }, { id: 11, title: "Graphic Print Tee", category: "T-Shirts", price: 34.99, image: "https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.3, reviews: 53, tag: "Limited Edition", features: ["Limited Edition"] }, { id: 12, title: "Zip-up Hoodie", category: "Sweaters", price: 65.99, image: "https://images.unsplash.com/photo-1556240729-f95d1bf08ac8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", rating: 4.7, reviews: 76, tag: "Sustainable", features: ["Sustainable", "Organic"] } ]; // DOM elements const filterToggle = document.querySelector('.filter-toggle'); const filterPanel = document.querySelector('.filter-panel'); const productsContainer = document.querySelector('.products-container'); const activeFiltersContainer = document.querySelector('.active-filters'); const filterCheckboxes = document.querySelectorAll('.filter-checkbox'); const applyBtn = document.querySelector('.apply-btn'); const resetBtn = document.querySelector('.reset-btn'); const resetSearchBtn = document.querySelector('.reset-search'); const searchInput = document.querySelector('.search-input'); const filterCount = document.querySelector('.filter-count'); const emptyState = document.querySelector('.empty-state'); // Initial render renderProducts(products); // Price slider functionality const leftHandle = document.querySelector('.slider-handle.left'); const rightHandle = document.querySelector('.slider-handle.right'); const sliderProgress = document.querySelector('.slider-progress'); const minPriceDisplay = document.querySelector('.min-price'); const maxPriceDisplay = document.querySelector('.max-price'); const minInput = document.querySelector('.min-input'); const maxInput = document.querySelector('.max-input'); let isDragging = false; let activeDragHandle = null; let minPrice = 20; let maxPrice = 120; const sliderBounds = document.querySelector('.slider-container').getBoundingClientRect(); function updateSliderUI() { const sliderWidth = sliderBounds.width; const leftPercent = ((minPrice - 0) / (200 - 0)) * 100; const rightPercent = ((maxPrice - 0) / (200 - 0)) * 100; leftHandle.style.left = `${leftPercent}%`; rightHandle.style.left = `${rightPercent}%`; sliderProgress.style.left = `${leftPercent}%`; sliderProgress.style.right = `${100 - rightPercent}%`; minPriceDisplay.textContent = `$${minPrice}`; maxPriceDisplay.textContent = `$${maxPrice}`; minInput.value = minPrice; maxInput.value = maxPrice; } function startDrag(e, handle) { e.preventDefault(); isDragging = true; activeDragHandle = handle; document.addEventListener('mousemove', handleDrag); document.addEventListener('mouseup', stopDrag); document.addEventListener('touchmove', handleDrag); document.addEventListener('touchend', stopDrag); } function handleDrag(e) { if (!isDragging) return; const sliderBounds = document.querySelector('.slider-container').getBoundingClientRect(); const sliderWidth = sliderBounds.width; // Get clientX whether it's mouse or touch const clientX = e.clientX || (e.touches && e.touches[0].clientX); let position = (clientX - sliderBounds.left) / sliderWidth; position = Math.max(0, Math.min(1, position)); const newPrice = Math.round(position * 200); if (activeDragHandle === 'min') { minPrice = Math.min(newPrice, maxPrice - 10); } else if (activeDragHandle === 'max') { maxPrice = Math.max(newPrice, minPrice + 10); } updateSliderUI(); } function stopDrag() { isDragging = false; document.removeEventListener('mousemove', handleDrag); document.removeEventListener('mouseup', stopDrag); document.removeEventListener('touchmove', handleDrag); document.removeEventListener('touchend', stopDrag); } leftHandle.addEventListener('mousedown', (e) => startDrag(e, 'min')); rightHandle.addEventListener('mousedown', (e) => startDrag(e, 'max')); leftHandle.addEventListener('touchstart', (e) => startDrag(e, 'min')); rightHandle.addEventListener('touchstart', (e) => startDrag(e, 'max')); minInput.addEventListener('change', function() { const value = parseInt(this.value) || 0; minPrice = Math.min(Math.max(0, value), maxPrice - 10); updateSliderUI(); }); maxInput.addEventListener('change', function() { const value = parseInt(this.value) || 200; maxPrice = Math.max(Math.min(200, value), minPrice + 10); updateSliderUI(); }); updateSliderUI(); // Toggle filter panel filterToggle.addEventListener('click', function() { filterPanel.classList.toggle('visible'); }); // Filter application let activeFilters = { category: [], feature: [], sort: [], price: {min: minPrice, max: maxPrice}, search: '' }; // Event listener for checkboxes filterCheckboxes.forEach(checkbox => { checkbox.addEventListener('change', function() { const type = this.dataset.type; const value = this.dataset.value; // Special handling for sort (should be exclusive) if (type === 'sort' && this.checked)
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Data Analytics Toggle Menu</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #3498db; --accent-color: #1abc9c; --warning-color: #e74c3c; --neutral-color: #ecf0f1; --dark-neutral: #95a5a6; --shadow-color: rgba(0, 0, 0, 0.1); --text-color: #2c3e50; --card-radius: 12px; --transition-speed: 0.3s; } * { 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; } body { background-color: #f5f7fa; color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; padding: 20px; overflow-x: hidden; } .dashboard-container { width: 100%; max-width: 700px; background: white; border-radius: var(--card-radius); box-shadow: 0 8px 30px var(--shadow-color); overflow: hidden; padding: 20px; position: relative; display: flex; flex-direction: column; gap: 20px; } .dashboard-header { display: flex; flex-direction: column; gap: 10px; } .dashboard-title { font-size: 24px; font-weight: 700; color: var(--primary-color); display: flex; align-items: center; gap: 8px; } .dashboard-title svg { width: 24px; height: 24px; } .dashboard-subtitle { font-size: 14px; color: var(--dark-neutral); line-height: 1.5; } .toggle-menu-container { position: relative; display: flex; flex-direction: column; gap: 10px; } .toggle-menu { display: flex; background-color: var(--neutral-color); border-radius: 8px; overflow: hidden; position: relative; z-index: 1; padding: 2px; } .toggle-option { flex: 1; text-align: center; padding: 14px 12px; cursor: pointer; position: relative; z-index: 2; font-size: 14px; font-weight: 600; color: var(--dark-neutral); transition: color var(--transition-speed) ease-in-out; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; } .toggle-option.active { color: var(--primary-color); } .toggle-indicator { position: absolute; top: 2px; left: 2px; height: calc(100% - 4px); border-radius: 6px; background-color: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform var(--transition-speed) cubic-bezier(0.35, 0, 0.25, 1.2), width var(--transition-speed) cubic-bezier(0.35, 0, 0.25, 1.2); z-index: 1; } .toggle-option svg { width: 16px; height: 16px; transition: transform var(--transition-speed) ease; } .toggle-option.active svg { transform: scale(1.15); } .data-container { display: flex; flex-direction: column; gap: 15px; padding: 10px 5px; overflow: hidden; } .data-view { display: none; opacity: 0; transform: translateY(10px); transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; } .data-view.active { display: flex; flex-direction: column; gap: 20px; opacity: 1; transform: translateY(0); } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; } .metric-card { background-color: var(--neutral-color); border-radius: var(--card-radius); padding: 16px; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .metric-label { font-size: 12px; color: var(--dark-neutral); margin-bottom: 8px; } .metric-value { font-size: 24px; font-weight: 700; color: var(--primary-color); display: flex; align-items: center; gap: 6px; } .metric-trend { display: flex; align-items: center; font-size: 12px; margin-top: 4px; gap: 4px; } .trend-up { color: var(--accent-color); } .trend-down { color: var(--warning-color); } .chart-container { background-color: white; border-radius: var(--card-radius); padding: 16px; width: 100%; height: 250px; box-shadow: 0 2px 8px var(--shadow-color); overflow: hidden; position: relative; } .chart-container canvas { width: 100%; height: 100%; } .chart-placeholder { width: 100%; height: 100%; position: relative; } .table-container { width: 100%; overflow-x: auto; border-radius: var(--card-radius); background-color: white; box-shadow: 0 2px 8px var(--shadow-color); } table { width: 100%; border-collapse: collapse; } thead { background-color: var(--neutral-color); } th { text-align: left; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--primary-color); } td { padding: 14px 16px; border-bottom: 1px solid var(--neutral-color); font-size: 14px; } tr:last-child td { border-bottom: none; } .status-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; padding: 4px 10px; font-weight: 500; font-size: 12px; } .status-active { background-color: rgba(26, 188, 156, 0.1); color: var(--accent-color); } .status-inactive { background-color: rgba(149, 165, 166, 0.1); color: var(--dark-neutral); } .status-warning { background-color: rgba(231, 76, 60, 0.1); color: var(--warning-color); } .heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(20px, 1fr)); gap: 3px; height: 100%; } .heatmap-cell { border-radius: 2px; opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; } .heatmap-cell:hover { opacity: 1; transform: scale(1.1); } .range-heatmap { background: linear-gradient(to right, #ecf0f1, #3498db, #2c3e50); height: 8px; width: 100%; border-radius: 4px; margin-top: 8px; } .range-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--dark-neutral); margin-top: 4px; } .funnel-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0; } .funnel-step { width: 100%; background: linear-gradient(90deg, #3498db, #2980b9); height: 40px; margin-bottom: 16px; border-radius: 5px; position: relative; display: flex; align-items: center; padding: 0 20px; color: white; font-weight: 500; box-shadow: 0 2px 10px rgba(52, 152, 219, 0.2); overflow: hidden; } .funnel-label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; } .funnel-step:nth-child(2) { width: 85%; background: linear-gradient(90deg, #2980b9, #2c3e50); } .funnel-step:nth-child(3) { width: 65%; background: linear-gradient(90deg, #2c3e50, #34495e); } .funnel-step:nth-child(4) { width: 40%; background: linear-gradient(90deg, #34495e, #1abc9c); margin-bottom: 0; } .funnel-count { font-weight: 700; } .funnel-percent { font-size: 12px; opacity: 0.9; } .scatter-plot { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .data-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: var(--secondary-color); opacity: 0.7; transform: translate(-50%, -50%); transition: all 0.3s ease; } .data-point:hover { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } .axis { position: absolute; background-color: var(--dark-neutral); opacity: 0.3; } .x-axis { width: 90%; height: 1px; bottom: 20px; } .y-axis { width: 1px; height: 85%; left: 30px; } .axis-label { position: absolute; font-size: 10px; color: var(--dark-neutral); } .x-label { bottom: 5px; right: 10px; } .y-label { transform: rotate(-90deg); left: -20px; top: 50%; } .time-period-selector { display: flex; gap: 10px; margin-left: auto; } .time-btn { border: none; background: none; cursor: pointer; font-size: 13px; color: var(--dark-neutral); padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease; } .time-btn:hover { background-color: var(--neutral-color); } .time-btn.active { color: var(--secondary-color); font-weight: 600; } .actions-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .data-datestamp { font-size: 13px; color: var(--dark-neutral); } .quick-actions { display: flex; gap: 8px; } .action-btn { border: none; background-color: var(--neutral-color); color: var(--primary-color); border-radius: 4px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: 13px; gap: 6px; } .action-btn:hover { background-color: var(--secondary-color); color: white; } .action-btn svg { width: 14px; height: 14px; } /* Pulse Animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse-animation { animation: pulse 2s infinite ease-in-out; } /* Responsive Adjustments */ @media (max-width: 580px) { .dashboard-container { padding: 16px; } .metrics-grid { grid-template-columns: 1fr 1fr; } .toggle-option { font-size: 12px; padding: 12px 8px; } .toggle-option svg { width: 14px; height: 14px; } .data-datestamp { font-size: 11px; } .actions-bar { flex-direction: column; align-items: flex-start; gap: 10px; } .time-period-selector { margin-left: 0; } } @media (max-width: 400px) { .metrics-grid { grid-template-columns: 1fr; } .toggle-option span { display: none; } .toggle-option { padding: 10px; } } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <h1 class="dashboard-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="9" y1="21" x2="9" y2="9"></line> </svg> Insight Hub </h1> <p class="dashboard-subtitle">Explore your marketing performance and user engagement metrics</p> </div> <div class="actions-bar"> <div class="data-datestamp">Last updated: <strong>Today at 11:43 AM</strong></div> <div class="time-period-selector"> <button class="time-btn">Day</button> <button class="time-btn active">Week</button> <button class="time-btn">Month</button> <button class="time-btn">Quarter</button> </div> </div> <div class="toggle-menu-container"> <div class="toggle-menu"> <div class="toggle-indicator"></div> <div class="toggle-option active" data-view="overview"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> <span>Overview</span> </div> <div class="toggle-option" data-view="performance"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 20V10"></path> <path d="M18 20V4"></path> <path d="M6 20v-4"></path> </svg> <span>Performance</span> </div> <div class="toggle-option" data-view="audience"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> <span>Audience</span> </div> <div class="toggle-option" data-view="conversions"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline> <polyline points="16 7 22 7 22 13"></polyline> </svg> <span>Conversions</span> </div> <div class="toggle-option" data-view="anomalies"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path> <line x1="12" y1="9" x2="12" y2="13"></line> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> <span>Anomalies</span> </div> </div> </div> <div class="data-container"> <!-- Overview View --> <div class="data-view active" id="overview"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-label">Sessions</div> <div class="metric-value">125,648</div> <div class="metric-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.4% </div> </div> <div class="metric-card"> <div class="metric-label">Avg. Session Time</div> <div class="metric-value">3:42</div> <div class="metric-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.2% </div> </div> <div class="metric-card"> <div class="metric-label">Conversion Rate</div> <div class="metric-value">4.8%</div> <div class="metric-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> 0.7% </div> </div> <div class="metric-card"> <div class="metric-label">Bounce Rate</div> <div class="metric-value">32.1%</div> <div class="metric-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> 2.3% </div> </div> </div> <div class="chart-container"> <canvas id="overviewChart"></canvas> </div> <div class="quick-actions"> <button class="action-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg> Export Data </button> <button class="action-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path> </svg> Create Report </button> </div> </div> <!-- Performance View --> <div class="data-view" id="performance"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-label">Page Load (s)</div> <div class="metric-value">1.42</div> <div class="metric-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> 0.3s </div> </div> <div class="metric-card"> <div class="metric-label">Largest Contentful Paint</div> <div class="metric-value">2.1s</div> <div class="metric-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> 0.5s </div> </div> <div class="metric-card"> <div class="metric-label">First Input Delay</div> <div class="metric-value">76ms</div> <div class="metric-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> 12ms </div> </div> <div class="metric-card"> <div class="metric-label">API Response</div> <div class="metric-value">238ms</div> <div class="metric-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> 14ms </div> </div> </div> <div class="chart-container"> <div class="chart-placeholder" id="performanceHeatmap"> <div class="heatmap-grid" id="heatmapGrid"></div> <div class="range-heatmap"></div> <div class="range-labels"> <span>Low</span> <span>Medium</span> <span>High</span> </div> </div> </div> <div class="table-container"> <table> <thead> <tr> <th>Page</th> <th>Load Time</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Homepage</td> <td>1.2s</td> <td><span class="status-badge status-active">Optimal</span></td> </tr> <tr> <td>Product Listing</td> <td>1.8s</td> <td><span class="status-badge status-active">Optimal</span></td> </tr> <tr> <td>Product Details</td> <td>2.4s</td> <td><span class="status-badge status-inactive">Acceptable</span></td> </tr> <tr> <td>Checkout</td> <td>3.7s</td> <td><span class="status-badge status-warning">Needs Improvement</span></td> </tr> </tbody> </table> </div> </div> <!-- Audience View --> <div class="data-view" id="audience"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-label">Unique Visitors</div> <div class="metric-value">78,534</div> <div class="metric-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> 8.7% </div> </div> <div class="metric-card"> <div class="metric-label">New Users</div> <div class="metric-value">41,276</div> <div class="metric-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> 13.2% </div> </div> <div class="metric-card"> <div class="metric-label">Avg. Pages / Session</div> <div class="metric-value">3.4</div> <div class="metric-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> 0.3 </div> </div> <div class="metric-card"> <div class="metric-label">Return Rate</div> <div class="metric-value">42.3%</div> <div class="metric-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> 1.8% </div> </div> </div> <div class="chart-container"> <div class="scatter-plot" id="audienceScatter"> <div class="axis x-axis"></div> <div class="axis y-axis"></div> <div class="axis-label x-label">Session Duration</div> <div class="axis-label y-label">Engagement</div> </div> </div> <div class="table-container"> <table> <thead> <tr> <th>Traffic Source</th> <th>Users</th> <th>Conversion</th> </tr> </thead> <tbody> <tr> <td>Organic Search</td> <td>28,432</td> <td>5.2%</td> </tr> <tr> <td>Paid Search</td> <td>17,654</td> <td>7.1%</td> </tr> <tr> <td>Social Media</td> <td>14,987</td> <td>3.8%</td> </tr> <tr> <td>Direct</td> <td>11,239</td> <td>6.4%</td> </tr> </tbody> </table> </div> </div> <!-- Conversions View --> <div class="data-view" id="conversions"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-label">Converted Users</div> <div class="metric-value">5,934</div> <div class="metric-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> 16.2% </div> </div> <div class="metric-card"> <div class="metric-label">Avg. Order Value</div> <div class="metric-value">$86.42</div> <div class="metric-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> $4.37 </div> </div> <div class="metric-card"> <div class="metric-label">Cart Abandonment</div> <div class="metric-value">24.7%</div> <div class="metric-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.2% </div> </div> <div class="metric-card"> <div class="metric-label">Checkout Completion</div> <div class="metric-value">62.3%</div> <div class="metric-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.1% </div> </div> </div> <div class="chart-container"> <div class="funnel-container" id="conversionFunnel"> <div class="funnel-step"> <div class="funnel-
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Home IoT Control Hub</title> <style> :root { --primary-bg: #0e0e14; --card-bg: #161622; --panel-bg: #1c1c2e; --neon-green: #00ff94; --neon-blue: #00a8ff; --neon-purple: #be00ff; --neon-red: #ff3860; --neon-yellow: #ffdd57; --text: #ffffff; --text-secondary: #a0a0c0; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { 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; } body { background-color: var(--primary-bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .dashboard { width: 100%; max-width: 700px; height: 700px; background-color: var(--card-bg); border-radius: 18px; padding: 25px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; position: relative; overflow: hidden; } .dashboard::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, transparent 90%, rgba(0, 168, 255, 0.05) 100%); pointer-events: none; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .title { font-size: 24px; font-weight: 700; color: var(--text); position: relative; } .title::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background: var(--neon-blue); border-radius: 2px; } .status { display: flex; align-items: center; font-size: 14px; color: var(--text-secondary); } .status-indicator { width: 8px; height: 8px; background-color: var(--neon-green); border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite; } .room-tabs { display: flex; margin-bottom: 25px; overflow-x: auto; scrollbar-width: none; gap: 15px; } .room-tabs::-webkit-scrollbar { display: none; } .room-tab { background-color: var(--panel-bg); padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: var(--transition); white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.05); } .room-tab.active { background-color: rgba(0, 168, 255, 0.15); color: var(--text); border-color: rgba(0, 168, 255, 0.3); } .room-tab:hover:not(.active) { background-color: rgba(255, 255, 255, 0.05); } .devices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; overflow-y: auto; padding-right: 5px; padding-bottom: 15px; flex: 1; } .devices-grid::-webkit-scrollbar { width: 4px; } .devices-grid::-webkit-scrollbar-track { background: var(--card-bg); } .devices-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .device-card { background-color: var(--panel-bg); border-radius: 16px; padding: 20px; position: relative; transition: var(--transition); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; overflow: hidden; } .device-card.active { box-shadow: 0 5px 15px rgba(0, 168, 255, 0.15); } .device-card:hover { transform: translateY(-3px); } .device-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-color, var(--neon-blue)), transparent); opacity: 0; transition: var(--transition); } .device-card.active::before { opacity: 1; } .device-card .device-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .device-info { flex: 1; } .device-name { font-size: 16px; font-weight: 600; margin-bottom: 5px; } .device-status { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } .toggle-wrapper { position: relative; width: 50px; height: 26px; } .toggle { position: absolute; left: 0; top: 0; right: 0; bottom: 0; cursor: pointer; border-radius: 20px; background-color: rgba(255, 255, 255, 0.1); transition: var(--transition); overflow: hidden; } .toggle::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; border-radius: 50%; background-color: var(--text); transition: var(--transition); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .toggle-input { opacity: 0; width: 0; height: 0; } .toggle-input:checked + .toggle { background-color: var(--neon-color, var(--neon-blue)); } .toggle-input:checked + .toggle::before { transform: translateX(24px); background-color: white; } .toggle-input:focus + .toggle { box-shadow: 0 0 1px var(--neon-color, var(--neon-blue)); } .device-details { display: flex; align-items: center; margin-top: 10px; gap: 15px; } .signal-indicator { flex: 1; height: 30px; background-color: rgba(255, 255, 255, 0.05); border-radius: 15px; overflow: hidden; position: relative; } .signal-bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 15px; background: linear-gradient(90deg, var(--neon-color, var(--neon-blue)), rgba(255, 255, 255, 0.7)); opacity: 0.6; transition: width 0.5s ease-in-out; } .signal-value { position: relative; z-index: 1; font-size: 12px; font-weight: 500; color: var(--text); text-align: center; line-height: 30px; } .notification-area { position: absolute; top: 20px; right: 20px; left: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .notification { background-color: var(--panel-bg); border-left: 3px solid var(--neon-green); border-radius: 8px; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; align-items: center; transform: translateX(110%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; pointer-events: auto; } .notification.show { transform: translateX(0); opacity: 1; } .notification-icon { margin-right: 12px; font-size: 18px; color: var(--neon-green); } .notification-content { flex: 1; } .notification-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .notification-message { font-size: 12px; color: var(--text-secondary); } .pulse-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: var(--neon-color, var(--neon-blue)); transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.8; box-shadow: 0 0 10px var(--neon-color, var(--neon-blue)); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 148, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(0, 255, 148, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 148, 0); } } @keyframes float { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .device-icon { font-size: 18px; margin-right: 8px; color: var(--neon-color, var(--neon-blue)); } .quick-actions { display: flex; justify-content: center; gap: 15px; margin-top: 25px; } .action-button { background-color: var(--panel-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 20px; color: var(--text); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); gap: 8px; } .action-button:hover { background-color: rgba(255, 255, 255, 0.05); transform: translateY(-2px); } .action-button i { font-size: 16px; } /* Responsive adjustments */ @media (max-width: 600px) { .devices-grid { grid-template-columns: 1fr; } .dashboard { padding: 15px; } .quick-actions { flex-wrap: wrap; } } /* Icon font */ @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="dashboard"> <div class="header"> <h1 class="title">Smart Home Control</h1> <div class="status"> <span class="status-indicator"></span> <span>Connected · 8 devices online</span> </div> </div> <div class="room-tabs"> <div class="room-tab active">Living Room</div> <div class="room-tab">Kitchen</div> <div class="room-tab">Bedroom</div> <div class="room-tab">Bathroom</div> <div class="room-tab">Office</div> </div> <div class="devices-grid"> <div class="device-card" data-color="var(--neon-blue)" data-device="Smart Lights"> <div class="device-header"> <div class="device-info"> <div class="device-name"> <i class="material-icons device-icon">lightbulb</i> Smart Lights </div> <div class="device-status">Philips Hue · <span class="dynamic-status">Off</span></div> </div> <div class="toggle-wrapper"> <input type="checkbox" class="toggle-input"> <div class="toggle"></div> </div> </div> <div class="device-details"> <div class="signal-indicator"> <div class="signal-bar"></div> <div class="signal-value">0% Brightness</div> </div> </div> </div> <div class="device-card" data-color="var(--neon-purple)" data-device="Smart Speaker"> <div class="device-header"> <div class="device-info"> <div class="device-name"> <i class="material-icons device-icon">speaker</i> Smart Speaker </div> <div class="device-status">Sonos · <span class="dynamic-status">Off</span></div> </div> <div class="toggle-wrapper"> <input type="checkbox" class="toggle-input"> <div class="toggle"></div> </div> </div> <div class="device-details"> <div class="signal-indicator"> <div class="signal-bar"></div> <div class="signal-value">0% Volume</div> </div> </div> </div> <div class="device-card" data-color="var(--neon-red)" data-device="Smart Thermostat"> <div class="device-header"> <div class="device-info"> <div class="device-name"> <i class="material-icons device-icon">thermostat</i> Thermostat </div> <div class="device-status">Nest · <span class="dynamic-status">Off</span></div> </div> <div class="toggle-wrapper"> <input type="checkbox" class="toggle-input"> <div class="toggle"></div> </div> </div> <div class="device-details"> <div class="signal-indicator"> <div class="signal-bar"></div> <div class="signal-value">68°F</div> </div> </div> </div> <div class="device-card" data-color="var(--neon-yellow)" data-device="Smart Curtains"> <div class="device-header"> <div class="device-info"> <div class="device-name"> <i class="material-icons device-icon">curtains</i> Smart Curtains </div> <div class="device-status">Lutron · <span class="dynamic-status">Closed</span></div> </div> <div class="toggle-wrapper"> <input type="checkbox" class="toggle-input"> <div class="toggle"></div> </div> </div> <div class="device-details"> <div class="signal-indicator"> <div class="signal-bar"></div> <div class="signal-value">0% Open</div> </div> </div> </div> <div class="device-card" data-color="var(--neon-green)" data-device="Air Purifier"> <div class="device-header"> <div class="device-info"> <div class="device-name"> <i class="material-icons device-icon">air</i> Air Purifier </div> <div class="device-status">Dyson · <span class="dynamic-status">Off</span></div> </div> <div class="toggle-wrapper"> <input type="checkbox" class="toggle-input"> <div class="toggle"></div> </div> </div> <div class="device-details"> <div class="signal-indicator"> <div class="signal-bar"></div> <div class="signal-value">AQI: Good</div> </div> </div> </div> <div class="device-card" data-color="var(--neon-blue)" data-device="Smart TV"> <div class="device-header"> <div class="device-info"> <div class="device-name"> <i class="material-icons device-icon">tv</i> Smart TV </div> <div class="device-status">Samsung · <span class="dynamic-status">Off</span></div> </div> <div class="toggle-wrapper"> <input type="checkbox" class="toggle-input"> <div class="toggle"></div> </div> </div> <div class="device-details"> <div class="signal-indicator"> <div class="signal-bar"></div> <div class="signal-value">Not playing</div> </div> </div> </div> </div> <div class="quick-actions"> <div class="action-button" id="all-on"> <i class="material-icons">power_settings_new</i> Turn All On </div> <div class="action-button" id="all-off"> <i class="material-icons">power_off</i> Turn All Off </div> <div class="action-button" id="movie-mode"> <i class="material-icons">movie</i> Movie Mode </div> </div> <div class="notification-area"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Apply colors to device cards document.querySelectorAll('.device-card').forEach(card => { const neonColor = card.getAttribute('data-color'); card.style.setProperty('--neon-color', neonColor); }); // Toggle functionality document.querySelectorAll('.toggle-input').forEach(toggle => { toggle.addEventListener('change', function() { const card = this.closest('.device-card'); const deviceName = card.getAttribute('data-device'); const statusEl = card.querySelector('.dynamic-status'); const signalBar = card.querySelector('.signal-bar'); const signalValue = card.querySelector('.signal-value'); if (this.checked) { card.classList.add('active'); createPulseEffect(card); // Update status text and signal bar based on device type if (deviceName === "Smart Lights") { statusEl.textContent = "On"; signalBar.style.width = "75%"; signalValue.textContent = "75% Brightness"; } else if (deviceName === "Smart Speaker") { statusEl.textContent = "Playing"; signalBar.style.width = "60%"; signalValue.textContent = "60% Volume"; } else if (deviceName === "Smart Thermostat") { statusEl.textContent = "Heating"; signalBar.style.width = "70%"; signalValue.textContent = "72°F"; } else if (deviceName === "Smart Curtains") { statusEl.textContent = "Open"; signalBar.style.width = "100%"; signalValue.textContent = "100% Open"; } else if (deviceName === "Air Purifier") { statusEl.textContent = "Purifying"; signalBar.style.width = "80%"; signalValue.textContent = "AQI: Excellent"; } else if (deviceName === "Smart TV") { statusEl.textContent = "On"; signalBar.style.width = "100%"; signalValue.textContent = "Netflix"; } showNotification(`${deviceName} turned on`, `Your ${deviceName.toLowerCase()} has been activated successfully.`, card.style.getPropertyValue('--neon-color')); } else { card.classList.remove('active'); // Reset status for turned off devices if (deviceName === "Smart Lights") { statusEl.textContent = "Off"; signalBar.style.width = "0%"; signalValue.textContent = "0% Brightness"; } else if (deviceName === "Smart Speaker") { statusEl.textContent = "Off"; signalBar.style.width = "0%"; signalValue.textContent = "0% Volume"; } else if (deviceName === "Smart Thermostat") { statusEl.textContent = "Off"; signalBar.style.width = "0%"; signalValue.textContent = "68°F"; } else if (deviceName === "Smart Curtains") { statusEl.textContent = "Closed"; signalBar.style.width = "0%"; signalValue.textContent = "0% Open"; } else if (deviceName === "Air Purifier") { statusEl.textContent = "Off"; signalBar.style.width = "0%"; signalValue.textContent = "AQI: Good"; } else if (deviceName === "Smart TV") { statusEl.textContent = "Off"; signalBar.style.width = "0%"; signalValue.textContent = "Not playing"; } showNotification(`${deviceName} turned off`, `Your ${deviceName.toLowerCase()} has been deactivated.`, "#808080"); } }); }); // Room tabs functionality document.querySelectorAll('.room-tab').forEach(tab => { tab.addEventListener('click', function() { document.querySelector('.room-tab.active').classList.remove('active'); this.classList.add('active'); showNotification("Room Changed", `Switched to ${this.textContent} controls`, "var(--neon-blue)"); }); }); // Quick action buttons document.getElementById('all-on').addEventListener('click', function() { const toggles = document.querySelectorAll('.toggle-input:not(:checked)'); if (toggles.length > 0) { toggles.forEach(toggle => { toggle.checked = true; toggle.dispatchEvent(new Event('change')); }); showNotification("All Devices On", "All devices have been turned on", "var(--neon-green)"); } }); document.getElementById('all-off').addEventListener('click', function() { const toggles = document.querySelectorAll('.toggle-input:checked'); if (toggles.length > 0) { toggles.forEach(toggle => { toggle.checked = false; toggle.dispatchEvent(new Event('change')); }); showNotification("All Devices Off", "All devices have been turned off", "#808080"); } }); document.getElementById('movie-mode').addEventListener('click', function() { // Turn lights down const lightToggle = document.querySelector('.device-card[data-device="Smart Lights"] .toggle-input'); lightToggle.checked = true; lightToggle.dispatchEvent(new Event('change')); const lightCard = document.querySelector('.device-card[data-device="Smart Lights"]'); const lightSignalBar = lightCard.querySelector('.signal-bar'); const lightSignalValue = lightCard.querySelector('.signal-value'); setTimeout(() => { lightSignalBar.style.width = "30%"; lightSignalValue.textContent = "30% Brightness"; }, 300); // Close curtains const curtainToggle = document.querySelector('.device-card[data-device="Smart Curtains"] .toggle-input'); curtainToggle.checked = true; curtainToggle.dispatchEvent(new Event('change')); // Turn on TV const tvToggle = document.querySelector('.device-card[data-device="Smart TV"] .toggle-input'); tvToggle.checked = true; tvToggle.dispatchEvent(new Event('change')); // Turn on speaker const speakerToggle = document.querySelector('.device-card[data-device="Smart Speaker"] .toggle-input'); speakerToggle.checked = true; speakerToggle.dispatchEvent(new Event('change')); showNotification("Movie Mode Activated", "Perfect environment for watching movies", "var(--neon-purple)"); }); }); function showNotification(title, message, color) { const notificationArea = document.querySelector('.notification-area'); const notification = document.createElement('div'); notification.className = 'notification'; notification.style.borderLeftColor = color; notification.innerHTML = ` <div class="notification-icon"> <i class="material-icons">notifications</i> </div> <div class="notification-content"> <div class="notification-title">${title}</div> <div class="notification-message">${message}</div> </div> `; notificationArea.appendChild(notification); // Trigger animation in the next frame setTimeout(() => notification.classList.add('show'), 10); // Remove after animation setTimeout(() => { notification.classList.remove('show'); setTimeout(() => notification.remove(), 400); }, 3000); } function createPulseEffect(card) { const numDots = 5; const neonColor = card.style.getPropertyValue('--neon-color'); for (let i = 0; i < numDots; i++) { const dot = document.createElement('div'); dot.className = 'pulse-dot'; dot.style.setProperty('--neon-color', neonColor); // Random position within the card const x = Math.random() * 90 + 5; // 5-95% of card width const y = Math.random() * 90 + 5; // 5-95% of card height dot.style.left = `${x}%`; dot.style.top = `${y}%`; dot.style.transform = 'scale(0)'; dot.style.opacity = '0'; card.appendChild(dot); // Animate the dot setTimeout(() => { dot.style.transform = 'scale(1)'; dot.style.opacity = '0.8'; setTimeout(() => { dot.style.transform = 'scale(2)'; dot.style.opacity = '0'; setTimeout(() => { dot.remove(); }, 300); }, 300); }, i * 100); } } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .campaign-container { max-width: 660px; width: 100%; background: linear-gradient(135deg, #ffffff, #f0f4ff); border-radius: 18px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; } .header { padding: 25px 30px 20px; text-align: center; background: linear-gradient(135deg, #5d4fff, #4073fa); color: white; position: relative; overflow: hidden; } .header h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.5px; position: relative; z-index: 2; } .header p { font-size: 16px; font-weight: 400; opacity: 0.85; max-width: 85%; margin: 0 auto; position: relative; z-index: 2; } .header::before { content: ''; position: absolute; top: -20px; right: -20px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); z-index: 1; } .header::after { content: ''; position: absolute; bottom: -40px; left: -30px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); z-index: 1; } .toggle-menu { display: flex; justify-content: center; padding: 30px 20px 20px; position: relative; gap: 12px; } .toggle-btn { background: none; border: none; padding: 12px 24px; border-radius: 30px; font-size: 15px; font-weight: 600; color: #4a4a4a; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 2; opacity: 0.7; } .toggle-btn.active { color: #fff; opacity: 1; } .toggle-indicator { position: absolute; height: 45px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #5d4fff, #3861e3); border-radius: 30px; transition: all 0.5s cubic-bezier(0, 0.9, 0.3, 1.2); z-index: 1; box-shadow: 0 4px 15px rgba(93, 79, 255, 0.3); } .campaign-content { padding: 10px 30px 30px; position: relative; overflow: hidden; } .campaign-panel { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } .campaign-panel.active { display: block; opacity: 1; transform: translateY(0); } .promotion-card { background: white; border-radius: 10px; padding: 20px; margin-bottom: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; overflow: hidden; transform-style: preserve-3d; perspective: 1000px; } .promotion-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .promotion-tag { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; } .tag-new { background: #e4f9ff; color: #00a3cc; } .tag-popular { background: #fff4e0; color: #ff9900; } .tag-limited { background: #ffebee; color: #f44336; } .tag-seasonal { background: #e8f5e9; color: #4caf50; } .promotion-card h3 { font-size: 18px; margin-bottom: 12px; color: #333; position: relative; } .promotion-card p { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 15px; } .promotion-cta { display: flex; justify-content: space-between; align-items: center; } .promo-code { display: inline-block; padding: 8px 12px; background: #f5f5f5; border-radius: 6px; font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 1px; color: #333; border: 1px dashed #ccc; } .copy-btn { background: #5d4fff; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; } .copy-btn:hover { background: #4a3dd4; transform: translateY(-2px); } .copy-btn:active { transform: translateY(0); } .copy-btn.copied { background: #4caf50; } .promo-timer { position: absolute; top: 15px; right: 15px; font-size: 12px; color: #888; display: flex; align-items: center; gap: 5px; } .timer-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; } .confirmation-tooltip { position: absolute; top: -40px; right: 0; background: #4caf50; color: white; padding: 8px 15px; border-radius: 5px; font-size: 13px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; } .confirmation-tooltip::after { content: ''; position: absolute; bottom: -5px; right: 20px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #4caf50; } .confirmation-tooltip.show { opacity: 1; visibility: visible; transform: translateY(0); } .pulse-animation { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .flip-in { animation: flipIn 0.6s ease-out forwards; } @keyframes flipIn { 0% { transform: rotateX(-90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } } .empty-state { text-align: center; padding: 50px 20px; } .empty-state img { width: 120px; margin-bottom: 20px; opacity: 0.7; } .empty-state h3 { font-size: 18px; color: #555; margin-bottom: 10px; } .empty-state p { font-size: 14px; color: #888; } @media (max-width: 600px) { .header h1 { font-size: 24px; } .toggle-btn { padding: 10px 16px; font-size: 14px; } .toggle-indicator { height: 40px; } .promotion-card { padding: 16px; } .promotion-card h3 { font-size: 16px; } .campaign-container { border-radius: 12px; } } .sparkle { position: absolute; background: rgba(255, 255, 255, 0.8); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; } </style> </head> <body> <div class="campaign-container"> <div class="header"> <h1>Holiday Marketing Spotlight</h1> <p>Browse our active campaigns and boost your conversions with our seasonal promotions</p> </div> <div class="toggle-menu"> <div class="toggle-indicator"></div> <button class="toggle-btn active" data-target="active">Active Promotions</button> <button class="toggle-btn" data-target="upcoming">Upcoming</button> <button class="toggle-btn" data-target="expired">Archived</button> </div> <div class="campaign-content"> <div class="campaign-panel active" id="active"> <div class="promotion-card flip-in"> <span class="promotion-tag tag-limited">Limited Time</span> <h3>Black Friday Early Access</h3> <div class="promo-timer"> <div class="timer-icon">⏱️</div> <span class="countdown">2 days left</span> </div> <p>Jump-start your holiday sales with 35% off all products. Perfect for pre-holiday marketing push to early shoppers.</p> <div class="promotion-cta"> <div class="promo-code">EARLYBIRD35</div> <button class="copy-btn" data-code="EARLYBIRD35"> <span>Copy Code</span> </button> <div class="confirmation-tooltip">Copied to clipboard!</div> </div> </div> <div class="promotion-card flip-in" style="animation-delay: 0.1s;"> <span class="promotion-tag tag-popular">Popular</span> <h3>Social Media Content Package</h3> <p>Ready-to-post professional holiday product photography with 15 customizable templates for Instagram and TikTok campaigns.</p> <div class="promotion-cta"> <div class="promo-code">SOCIAL25</div> <button class="copy-btn" data-code="SOCIAL25"> <span>Copy Code</span> </button> <div class="confirmation-tooltip">Copied to clipboard!</div> </div> </div> <div class="promotion-card flip-in" style="animation-delay: 0.2s;"> <span class="promotion-tag tag-seasonal">Seasonal</span> <h3>Holiday Email Sequence Bundle</h3> <div class="promo-timer"> <div class="timer-icon">⏱️</div> <span class="countdown">5 days left</span> </div> <p>Complete 6-email marketing sequence with automated triggers for abandoned carts during the holiday rush.</p> <div class="promotion-cta"> <div class="promo-code">HOLEMAILS20</div> <button class="copy-btn pulse-animation" data-code="HOLEMAILS20"> <span>Copy Code</span> </button> <div class="confirmation-tooltip">Copied to clipboard!</div> </div> </div> </div> <div class="campaign-panel" id="upcoming"> <div class="promotion-card"> <span class="promotion-tag tag-new">Coming Soon</span> <h3>New Year Analytics Dashboard</h3> <div class="promo-timer"> <div class="timer-icon">🗓️</div> <span>Launches Dec 15</span> </div> <p>Year-in-review data visualization tools to help plan your Q1 marketing strategy with actionable insights.</p> <div class="promotion-cta"> <div class="promo-code">PREVIEW10</div> <button class="copy-btn" data-code="PREVIEW10"> <span>Copy Code</span> </button> <div class="confirmation-tooltip">Copied to clipboard!</div> </div> </div> <div class="promotion-card"> <span class="promotion-tag tag-new">Coming Soon</span> <h3>Last-Minute Gift Guide Template</h3> <div class="promo-timer"> <div class="timer-icon">🗓️</div> <span>Launches Dec 10</span> </div> <p>Customizable product showcase template optimized for last-minute holiday shoppers with urgency triggers.</p> <div class="promotion-cta"> <div class="promo-code">LASTMIN15</div> <button class="copy-btn" data-code="LASTMIN15"> <span>Copy Code</span> </button> <div class="confirmation-tooltip">Copied to clipboard!</div> </div> </div> </div> <div class="campaign-panel" id="expired"> <div class="empty-state"> <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M60 15C35.1472 15 15 35.1472 15 60C15 84.8528 35.1472 105 60 105C84.8528 105 105 84.8528 105 60C105 35.1472 84.8528 15 60 15Z" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M60 40V60L75 75" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3>No Archived Campaigns</h3> <p>Past promotional campaigns will appear here</p> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Toggle menu functionality const toggleBtns = document.querySelectorAll('.toggle-btn'); const toggleIndicator = document.querySelector('.toggle-indicator'); const panels = document.querySelectorAll('.campaign-panel'); // Initialize toggle indicator position positionIndicator(document.querySelector('.toggle-btn.active')); toggleBtns.forEach(btn => { btn.addEventListener('click', function() { // Update active button toggleBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); // Move the toggle indicator positionIndicator(this); // Show the corresponding panel const targetPanel = this.getAttribute('data-target'); panels.forEach(panel => { panel.classList.remove('active'); if (panel.id === targetPanel) { setTimeout(() => { panel.classList.add('active'); }, 300); } }); }); }); function positionIndicator(activeBtn) { const btnWidth = activeBtn.offsetWidth; const btnLeft = activeBtn.offsetLeft; toggleIndicator.style.width = btnWidth + 'px'; toggleIndicator.style.left = btnLeft + 'px'; } // Copy button functionality const copyBtns = document.querySelectorAll('.copy-btn'); copyBtns.forEach(btn => { btn.addEventListener('click', function() { const code = this.getAttribute('data-code'); navigator.clipboard.writeText(code).then(() => { this.classList.add('copied'); // Show tooltip const tooltip = this.nextElementSibling; tooltip.classList.add('show'); // Hide tooltip after 2 seconds setTimeout(() => { tooltip.classList.remove('show'); this.classList.remove('copied'); }, 2000); }); }); }); // Re-calculate indicator position on window resize window.addEventListener('resize', function() { const activeBtn = document.querySelector('.toggle-btn.active'); positionIndicator(activeBtn); }); // Add sparkle effect on hover const promotionCards = document.querySelectorAll('.promotion-card'); promotionCards.forEach(card => { card.addEventListener('mousemove', function(e) { createSparkle(e, this); }); }); function createSparkle(e, parent) { const sparkle = document.createElement('div'); sparkle.className = 'sparkle'; // Calculate position relative to the card const x = e.pageX - parent.getBoundingClientRect().left; const y = e.pageY - parent.getBoundingClientRect().top + window.scrollY; // Random size for variety const size = Math.random() * 8 + 4; sparkle.style.width = `${size}px`; sparkle.style.height = `${size}px`; sparkle.style.left = `${x}px`; sparkle.style.top = `${y}px`; parent.appendChild(sparkle); // Animate and remove setTimeout(() => { sparkle.style.opacity = '0'; setTimeout(() => { sparkle.remove(); }, 300); }, 300); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearningHub - Educational Portal Toggle Menu</title> <style> :root { --primary-color: #7eb8da; --secondary-color: #f9d0c4; --tertiary-color: #c8e6c9; --quaternary-color: #e1bee7; --text-color: #2c3e50; --light-text: #5a6c7d; --dark-text: #1a2530; --background: #f8f9fa; --white: #ffffff; --shadow: 0 4px 15px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', 'Segoe UI', sans-serif; } body { background-color: var(--background); color: var(--text-color); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; font-size: 16px; } .portal-container { width: 100%; max-width: 700px; height: 700px; background-color: var(--white); border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; position: relative; } header { padding: 20px 30px; background-color: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); z-index: 10; } .portal-logo { font-size: 22px; font-weight: 700; color: var(--dark-text); display: flex; align-items: center; gap: 10px; } .portal-logo svg { width: 28px; height: 28px; fill: var(--primary-color); } .main-content { display: flex; flex: 1; overflow: hidden; } .menu-panel { width: 250px; background: linear-gradient(145deg, var(--primary-color) 0%, rgba(126, 184, 218, 0.8) 100%); padding: 25px 15px; transition: var(--transition); transform: translateX(0); z-index: 5; overflow-y: auto; } .menu-panel.collapsed { transform: translateX(-250px); } .toggle-btn { position: absolute; top: 80px; left: 250px; width: 40px; height: 40px; background-color: var(--primary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: var(--shadow); z-index: 20; transition: var(--transition); } .toggle-btn.collapsed { left: 15px; transform: rotate(180deg); } .toggle-btn svg { width: 20px; height: 20px; fill: var(--white); } .menu-heading { color: var(--white); font-size: 14px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 15px; opacity: 0.9; } .menu-list { list-style: none; margin-bottom: 30px; } .menu-item { margin-bottom: 2px; } .menu-link { display: flex; align-items: center; padding: 12px 15px; border-radius: 10px; color: var(--white); text-decoration: none; transition: var(--transition); font-weight: 500; position: relative; overflow: hidden; } .menu-link:hover { background-color: rgba(255, 255, 255, 0.2); } .menu-link.active { background-color: rgba(255, 255, 255, 0.25); font-weight: 600; } .menu-link.active::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background-color: var(--white); } .menu-icon { margin-right: 12px; display: flex; align-items: center; justify-content: center; } .menu-icon svg { width: 18px; height: 18px; fill: var(--white); } .content-area { flex: 1; padding: 25px; overflow-y: auto; transition: var(--transition); } .module-container { display: none; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .module-container.active { display: block; opacity: 1; transform: translateY(0); } .module-header { margin-bottom: 25px; position: relative; } .module-title { font-size: 24px; font-weight: 700; color: var(--dark-text); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .module-title svg { width: 24px; height: 24px; } .module-subtitle { font-size: 16px; color: var(--light-text); margin-bottom: 5px; } .progress-container { margin-top: 15px; height: 8px; background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; overflow: hidden; } .progress-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 25px; } .lesson-card { background-color: var(--white); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; } .lesson-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-color: var(--primary-color); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .lesson-card:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); transform: translateY(-5px); } .lesson-card:hover::before { transform: scaleX(1); } .card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .card-icon svg { width: 22px; height: 22px; } .lesson-title { font-size: 16px; font-weight: 600; color: var(--dark-text); margin-bottom: 8px; } .lesson-meta { display: flex; align-items: center; font-size: 13px; color: var(--light-text); } .lesson-meta svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--light-text); } .timeline { margin-top: 25px; } .timeline-item { position: relative; padding-left: 30px; margin-bottom: 25px; } .timeline-item::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: var(--quaternary-color); } .timeline-item::after { content: ''; position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--quaternary-color); } .timeline-title { font-size: 16px; font-weight: 600; color: var(--dark-text); margin-bottom: 8px; } .timeline-content { color: var(--light-text); font-size: 14px; line-height: 1.5; } .timeline-meta { display: flex; align-items: center; gap: 15px; margin-top: 8px; font-size: 13px; color: var(--light-text); } .timeline-meta span { display: flex; align-items: center; } .timeline-meta svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--light-text); } .resource-item { display: flex; align-items: center; padding: 15px; background-color: var(--white); border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: var(--transition); } .resource-item:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transform: translateY(-3px); } .resource-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .resource-icon svg { width: 20px; height: 20px; } .resource-info { flex: 1; } .resource-title { font-size: 16px; font-weight: 600; color: var(--dark-text); margin-bottom: 5px; } .resource-meta { display: flex; align-items: center; font-size: 13px; color: var(--light-text); } .resource-meta svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--light-text); } .resource-download { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.05); cursor: pointer; transition: var(--transition); } .resource-download:hover { background-color: var(--primary-color); } .resource-download:hover svg { fill: var(--white); } .resource-download svg { width: 18px; height: 18px; fill: var(--text-color); transition: var(--transition); } .discussion-item { padding: 15px; background-color: var(--white); border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .discussion-header { display: flex; align-items: center; margin-bottom: 10px; } .user-avatar { width: 38px; height: 38px; border-radius: 50%; background-color: #ddd; margin-right: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-color); } .user-info { flex: 1; } .user-name { font-weight: 600; color: var(--dark-text); } .post-time { font-size: 12px; color: var(--light-text); } .discussion-content { color: var(--text-color); font-size: 14px; line-height: 1.5; margin-bottom: 10px; } .discussion-actions { display: flex; gap: 15px; } .action-btn { display: flex; align-items: center; font-size: 13px; color: var(--light-text); cursor: pointer; transition: var(--transition); } .action-btn:hover { color: var(--primary-color); } .action-btn svg { width: 16px; height: 16px; margin-right: 5px; fill: currentColor; } .reply-form { margin-top: 20px; display: flex; gap: 10px; } .reply-input { flex: 1; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 10px 15px; outline: none; transition: var(--transition); } .reply-input:focus { border-color: var(--primary-color); } .reply-btn { background-color: var(--primary-color); color: white; border: none; border-radius: 20px; padding: 10px 15px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 5px; } .reply-btn:hover { background-color: #6ba7c9; } .tag { display: inline-block; padding: 3px 10px; border-radius: 15px; font-size: 12px; margin-right: 8px; font-weight: 500; } .user-panel { display: flex; align-items: center; margin-top: 25px; background-color: rgba(0, 0, 0, 0.03); border-radius: 12px; padding: 15px; } .user-panel-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-color); margin-right: 15px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 18px; } .user-panel-info h4 { color: var(--dark-text); margin-bottom: 3px; } .user-panel-progress { font-size: 13px; color: var(--light-text); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 25px; } .feature-item { background-color: var(--white); border-radius: 10px; padding: 15px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: var(--transition); } .feature-item:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); } .feature-icon { width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; } .feature-icon svg { width: 20px; height: 20px; } .feature-title { font-size: 14px; font-weight: 600; color: var(--dark-text); } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 1.5s infinite; } .fade-in-up { animation: fadeInUp 0.5s forwards; } /* Responsive */ @media (max-width: 600px) { .menu-panel { position: absolute; height: 100%; } .card-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } } /* Colors for Different Modules */ #module-fundamentals .module-title svg, #module-fundamentals .card-icon { color: var(--primary-color); fill: var(--primary-color); background-color: rgba(126, 184, 218, 0.1); } #module-fundamentals .progress-bar { background-color: var(--primary-color); } #module-advanced .module-title svg, #module-advanced .card-icon { color: var(--secondary-color); fill: var(--secondary-color); background-color: rgba(249, 208, 196, 0.1); } #module-advanced .progress-bar { background-color: var(--secondary-color); } #module-resources .module-title svg, #module-resources .resource-icon { color: var(--tertiary-color); fill: var(--tertiary-color); background-color: rgba(200, 230, 201, 0.1); } #module-discussion .module-title svg { color: var(--quaternary-color); fill: var(--quaternary-color); } /* Tags */ .tag-beginner { background-color: rgba(126, 184, 218, 0.15); color: var(--primary-color); } .tag-intermediate { background-color: rgba(249, 208, 196, 0.15); color: #e48a70; } .tag-advanced { background-color: rgba(200, 230, 201, 0.15); color: #66bb6a; } </style> </head> <body> <div class="portal-container"> <header> <div class="portal-logo"> <svg viewBox="0 0 24 24"> <path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" /> </svg> LearningHub </div> </header> <div class="toggle-btn"> <svg viewBox="0 0 24 24"> <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /> </svg> </div> <div class="main-content"> <div class="menu-panel"> <div class="menu-heading">Modules</div> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link active" data-module="fundamentals"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M20,17A2,2 0 0,0 22,15V4A2,2 0 0,0 20,2H9.46C9.81,2.61 10,3.3 10,4H20V15H11V17M15,7V9H9V22H7V16H5V22H3V14H1.5V9A2,2 0 0,1 3.5,7H15M8,4A2,2 0 0,1 6,6A2,2 0 0,1 4,4A2,2 0 0,1 6,2A2,2 0 0,1 8,4Z" /> </svg> </span> Fundamentals </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-module="advanced"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M11,7H15V9H11V11H13A2,2 0 0,1 15,13V15A2,2 0 0,1 13,17H9V15H13V13H11A2,2 0 0,1 9,11V9A2,2 0 0,1 11,7M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" /> </svg> </span> Advanced Concepts </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-module="resources"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" /> </svg> </span> Resources & Materials </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-module="discussion"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" /> </svg> </span> Discussion Forum </a> </li> </ul> <div class="menu-heading">Personal</div> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> </svg> </span> My Profile </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M16,9H13V14.5A2.5,2.5 0 0,1 10.5,17A2.5,2.5 0 0,1 8,14.5A2.5,2.5 0 0,1 10.5,12C11.07,12 11.58,12.19 12,12.5V7H16M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" /> </svg> </span> My Progress </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg viewBox="0 0 24 24"> <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" /> </svg> </span> Assignments </a> </li> </ul> </div> <div class="content-area"> <div id="module-fundamentals" class="module-container active"> <div class="module-header"> <h1 class="module-title"> <svg viewBox="0 0 24 24"> <path d="M20,17A2,2 0 0,0 22,15V4A2,2 0 0,0 20,2H9.46C9.81,2.61 10,3.3 10,4H20V15H11V17M15,7V9H9V22H7V16H5V22H3V14H1.5V9A2,2 0 0,1 3.5,7H15M8,4A2,2 0 0,1 6,6A2,2 0 0,1 4,4A2,2 0 0,1 6,2A2,2 0 0,1 8,4Z" /> </svg> Fundamentals of Learning </h1> <p class="module-subtitle">Master the core concepts that will build your foundation</p> <div class="progress-container"> <div class="progress-bar" style="width: 65%; background-color: var(--primary-color);"></div> </div> </div> <div class="user-panel"> <div class="user-panel-avatar">JS</div> <div class="user-panel-info"> <h4>Welcome back, Jamie!</h4> <div class="user-panel-progress">You're 65% through this module</div> </div> </div> <div class="card-grid"> <div class="lesson-card fade-in-up" style="animation-delay: 0.1s"> <div class="card-icon"> <svg viewBox="0 0 24 24"> <path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" /> </svg> </div> <h3 class="lesson-title">Learning Foundations</h3> <div class="lesson-meta"> <svg viewBox="0 0 24 24"> <path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /> </svg> 25 minutes </div> <div class="tag tag-beginner">Completed</div> </div> <div class="lesson-card fade-in-up" style="animation-delay: 0.2s"> <div class="card-icon"> <svg viewBox="0 0 24 24"> <path d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4V6M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M20,16H8V4H20V16M13,15H15V11H19V9H15V5H13V9H9V11H13V15Z" /> </svg> </div> <h3 class="lesson-title">Study Methodologies</h3> <div class="lesson-meta"> <svg viewBox="0 0 24 24"> <path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /> </svg> 40 minutes </div> <div class="tag tag-beginner">Completed</div> </div> <div class="lesson-card pulse fade-in-up" style="animation-delay: 0.3s"> <div class="card-icon"> <svg viewBox="0 0 24 24"> <path d="M16,15H9V13H16V15M19,11H9V9H19V11M19,7H9V5H19V7M3,5V21H19V23H3A2,2 0 0,1 1,21V5H3M21,1A2,2 0 0,1 23,3V17C23,18.11 22.11,19 21,19H7A2,2 0 0,1 5,17V3C5,1.89 5.89,1 7,1H21M7,3V17H21V3H7Z" /> </svg> </div> <h3 class="lesson-title">Memory Techniques</h3> <div class="lesson-meta"> <svg viewBox="0 0 24 24"> <path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /> </svg> 35 minutes </div> <div class="tag tag-beginner">In Progress</div> </div> <div class="lesson-card fade-in-up" style="animation-delay: 0.4s"> <div class="card-icon"> <svg viewBox="0 0 24 24"> <path d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" /> </svg> </div> <h3 class="lesson-title">Conceptual Frameworks</h3> <div class="lesson-meta"> <svg viewBox="0 0 24 24"> <path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /> </svg> 45 minutes </div> <div class="tag tag-intermediate">Locked</div> </div> </div> <div class="timeline"> <h3 style="margin-bottom: 15px;">Recent Activity</h3> <div class="timeline-item fade-in-up"> <h4 class="timeline-title">Completed Quiz: Study Methods</h4> <p class="timeline-content">You scored 85% on the quiz about effective study methodologies and time management techniques.</p> <div class="timeline-meta"> <span> <svg viewBox="0 0 24 24"> <path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /> </svg> 2 days ago </span> <span> <svg viewBox="0 0 24 24"> <path d="M9,16.17L4.83,12L3.41,13.41L9,19L21,7L19.59,5.59L9,16.17Z" /> </svg> 85% Score </span> </div> </div> <div class="timeline-item fade-in-up" style="animation-delay: 0.2s"> <h4 class="timeline-title">Started Lesson: Memory Techniques</h4> <p class="timeline-content">You're 20% through this lesson. Continue learning about mnemonic devices and spaced repetition.</p> <div class="timeline-meta"> <span> <svg viewBox="0 0 24 24"> <path d="M12,20A8,8 0 0
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Investment Portfolio Toggle Menu</title> <style> :root { --dark-navy: #0A1929; --navy: #132F4C; --light-navy: #173A5E; --accent: #66B2FF; --success: #4CAF50; --danger: #F44336; --text-primary: #E7EBF0; --text-secondary: #B2BAC2; --card-bg: rgba(19, 47, 76, 0.4); --highlight: rgba(102, 178, 255, 0.1); --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dark-navy); color: var(--text-primary); font-family: var(--font-main); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2rem 1rem; overflow-x: hidden; max-width: 700px; margin: 0 auto; } .app-container { width: 100%; max-width: 660px; background-color: var(--navy); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); overflow: hidden; position: relative; } .header { padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .logo { display: flex; align-items: center; gap: 0.8rem; } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent), #3399ff); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(102, 178, 255, 0.4); } .logo-text { font-weight: 600; font-size: 1.3rem; background: linear-gradient(to right, var(--text-primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } .user-info { display: flex; align-items: center; gap: 0.8rem; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--light-navy); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; overflow: hidden; } .toggle-menu { display: flex; padding: 1rem 1.5rem; gap: 0.5rem; flex-wrap: wrap; justify-content: space-between; position: relative; background-color: var(--navy); z-index: 2; } .toggle-option { flex: 1; min-width: 150px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 1rem; font-weight: 500; cursor: pointer; background-color: transparent; color: var(--text-secondary); position: relative; overflow: hidden; transition: all 0.3s ease; user-select: none; } .toggle-option:hover { color: var(--text-primary); background-color: rgba(255, 255, 255, 0.03); } .toggle-option.active { color: var(--accent); font-weight: 600; } .toggle-option.active::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 30%; height: 3px; background-color: var(--accent); border-radius: 3px 3px 0 0; transform: translateX(-50%); box-shadow: 0 0 8px rgba(102, 178, 255, 0.6); } .toggle-option .icon { margin-right: 8px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } .content-section { padding: 1.5rem; min-height: 400px; position: relative; } .view { opacity: 0; transform: translateY(20px); position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 1.5rem; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .view.active { opacity: 1; transform: translateY(0); position: relative; pointer-events: all; } .view-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .card { background-color: var(--card-bg); border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .card-title { font-weight: 600; font-size: 1.1rem; } .card-meta { font-size: 0.8rem; color: var(--text-secondary); } .stock-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .stock-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .stock-info { display: flex; align-items: center; gap: 0.8rem; } .stock-icon { width: 36px; height: 36px; border-radius: 8px; background-color: var(--light-navy); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--text-primary); } .stock-details { display: flex; flex-direction: column; } .stock-symbol { font-weight: 600; } .stock-name { font-size: 0.8rem; color: var(--text-secondary); } .stock-performance { text-align: right; } .stock-price { font-weight: 600; font-size: 1.1rem; } .price-change { font-size: 0.8rem; padding: 4px 8px; border-radius: 4px; margin-top: 0.2rem; display: inline-block; } .price-change.positive { background-color: rgba(76, 175, 80, 0.1); color: var(--success); } .price-change.negative { background-color: rgba(244, 67, 54, 0.1); color: var(--danger); } .chart-container { height: 200px; margin: 1rem 0; } .fake-chart { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 8px; background-color: var(--light-navy); } .chart-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(102, 178, 255, 0.4)); } .chart-area { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; fill: url(#gradient); opacity: 0.2; } .chart-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; } .holdings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-top: 1rem; } .holding-card { background-color: var(--card-bg); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .holding-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); background-color: var(--light-navy); } .holding-icon { width: 48px; height: 48px; border-radius: 8px; background-color: var(--light-navy); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; margin-bottom: 0.8rem; color: var(--text-primary); } .holding-amount { font-weight: 600; font-size: 1.1rem; margin: 0.3rem 0; } .holding-allocation { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.2rem; } .insights-list { margin-top: 1rem; } .insight-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .insight-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .insight-icon { width: 36px; height: 36px; border-radius: 50%; background-color: var(--light-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .insight-icon.opportunity { background-color: rgba(76, 175, 80, 0.1); color: var(--success); } .insight-icon.alert { background-color: rgba(244, 67, 54, 0.1); color: var(--danger); } .insight-icon.info { background-color: rgba(102, 178, 255, 0.1); color: var(--accent); } .insight-content { flex: 1; } .insight-title { font-weight: 600; margin-bottom: 0.3rem; } .insight-description { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; } .transaction-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .transaction-item:last-child { border-bottom: none; } .transaction-details { display: flex; align-items: center; gap: 1rem; } .transaction-icon { width: 36px; height: 36px; border-radius: 8px; background-color: var(--light-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .transaction-buy { background-color: rgba(76, 175, 80, 0.1); color: var(--success); } .transaction-sell { background-color: rgba(244, 67, 54, 0.1); color: var(--danger); } .transaction-info { display: flex; flex-direction: column; } .transaction-title { font-weight: 600; } .transaction-date { font-size: 0.8rem; color: var(--text-secondary); } .transaction-amount { font-weight: 600; } .market-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; } .market-stat-card { background-color: var(--card-bg); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .market-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); background-color: var(--light-navy); } .market-stat-title { font-size: 0.8rem; color: var(--text-secondary); } .market-stat-value { font-size: 1.4rem; font-weight: 600; } .market-stat-change { font-size: 0.8rem; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 0.3rem; } .market-stat-change.positive { background-color: rgba(76, 175, 80, 0.1); color: var(--success); } .market-stat-change.negative { background-color: rgba(244, 67, 54, 0.1); color: var(--danger); } /* Responsive styles */ @media (max-width: 600px) { .toggle-menu { gap: 0.3rem; } .toggle-option { padding: 0 0.5rem; font-size: 0.9rem; min-width: auto; } .holdings-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .market-stats-grid { grid-template-columns: 1fr; } } /* Animation and Flare Effects */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } .backdrop-blur { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .toggle-option .indicator { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background-color: var(--accent); transition: width 0.3s ease; border-radius: 3px 3px 0 0; box-shadow: 0 0 8px rgba(102, 178, 255, 0.6); } .toggle-option.active .indicator { width: 100%; } .toggle-option::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(102, 178, 255, 0.2) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .toggle-option.active::before { opacity: 1; } .toggle-option:active { transform: scale(0.97); } .equity-ribbon { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--danger), var(--accent), var(--success), var(--accent), var(--danger) ); background-size: 500% 100%; animation: gradientMove 15s ease infinite; } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .custom-scroll::-webkit-scrollbar-track { background: var(--dark-navy); border-radius: 4px; } .custom-scroll::-webkit-scrollbar-thumb { background: var(--light-navy); border-radius: 4px; } .custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); } .hover-glow:hover { box-shadow: 0 0 15px rgba(102, 178, 255, 0.3); } /* Animated background pattern */ .pattern-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; pointer-events: none; background-image: radial-gradient(var(--text-primary) 1px, transparent 1px), radial-gradient(var(--text-primary) 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0, 10px 10px; } </style> </head> <body> <div class="app-container"> <div class="equity-ribbon"></div> <div class="pattern-background"></div> <div class="header"> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path> </svg> </div> <div class="logo-text">CapitalEdge</div> </div> <div class="user-info"> <div class="user-avatar"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> </div> </div> <div class="toggle-menu" id="toggleMenu"> <div class="toggle-option active" data-view="portfolio"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect> <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path> </svg> </div> Portfolio <div class="indicator"></div> </div> <div class="toggle-option" data-view="watchlist"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> </div> Watchlist <div class="indicator"></div> </div> <div class="toggle-option" data-view="insights"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> </div> Insights <div class="indicator"></div> </div> <div class="toggle-option" data-view="activity"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 20v-6M6 20V10M18 20V4"></path> </svg> </div> Activity <div class="indicator"></div> </div> </div> <div class="content-section"> <!-- Portfolio View --> <div id="portfolioView" class="view active"> <div class="view-title"> <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"> <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect> <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path> </svg> Portfolio Summary </div> <div class="card hover-glow"> <div class="card-header"> <div class="card-title">Total Portfolio Value</div> <div class="card-meta">Updated 2 minutes ago</div> </div> <div class="stock-price">$327,458.92</div> <div class="price-change positive">+$4,328.51 (1.32%) today</div> <div class="chart-container"> <div class="fake-chart"> <svg width="100%" height="100%" viewBox="0 0 300 100" preserveAspectRatio="none"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#66B2FF" stop-opacity="0.7"/> <stop offset="100%" stop-color="#66B2FF" stop-opacity="0"/> </linearGradient> </defs> <!-- Grid lines --> <line class="chart-grid" x1="0" y1="25" x2="300" y2="25" /> <line class="chart-grid" x1="0" y1="50" x2="300" y2="50" /> <line class="chart-grid" x1="0" y1="75" x2="300" y2="75" /> <line class="chart-grid" x1="60" y1="0" x2="60" y2="100" /> <line class="chart-grid" x1="120" y1="0" x2="120" y2="100" /> <line class="chart-grid" x1="180" y1="0" x2="180" y2="100" /> <line class="chart-grid" x1="240" y1="0" x2="240" y2="100" /> <!-- Chart line --> <path class="chart-line" d="M0,80 C20,70 40,75 60,65 C80,55 100,40 120,35 C140,30 160,40 180,45 C200,50 220,40 240,25 C260,10 280,15 300,20" /> <!-- Chart area --> <path class="chart-area" d="M0,80 C20,70 40,75 60,65 C80,55 100,40 120,35 C140,30 160,40 180,45 C200,50 220,40 240,25 C260,10 280,15 300,20 L300,100 L0,100 Z" /> </svg> </div> </div> </div> <div class="holdings-grid"> <div class="holding-card"> <div class="holding-icon">AAPL</div> <div class="stock-symbol">Apple</div> <div class="holding-amount">$75,240</div> <div class="holding-allocation">23% of portfolio</div> </div> <div class="holding-card"> <div class="holding-icon">MSFT</div> <div class="stock-symbol">Microsoft</div> <div class="holding-amount">$62,178</div> <div class="holding-allocation">19% of portfolio</div> </div> <div class="holding-card"> <div class="holding-icon">AMZN</div> <div class="stock-symbol">Amazon</div> <div class="holding-amount">$48,762</div> <div class="holding-allocation">15% of portfolio</div> </div> <div class="holding-card"> <div class="holding-icon">NVDA</div> <div class="stock-symbol">NVIDIA</div> <div class="holding-amount">$39,540</div> <div class="holding-allocation">12% of portfolio</div> </div> </div> </div> <!-- Watchlist View --> <div id="watchlistView" class="view"> <div class="view-title"> <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"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> Market Watchlist </div> <div class="card hover-glow"> <div class="card-header"> <div class="card-title">Tech Leaders</div> <div class="card-meta">Live tracking</div> </div> <div class="stock-item"> <div class="stock-info"> <div class="stock-icon">AAPL</div> <div class="stock-details"> <div class="stock-symbol">Apple Inc.</div> <div class="stock-name">NASDAQ</div> </div> </div> <div class="stock-performance"> <div class="stock-price">$187.42</div> <div class="price-change positive">+$3.14 (1.7%)</div> </div> </div> <div class="stock-item"> <div class="stock-info"> <div class="stock-icon">TSLA</div> <div class="stock-details"> <div class="stock-symbol">Tesla Inc.</div> <div class="stock-name">NASDAQ</div> </div> </div> <div class="stock-performance"> <div class="stock-price">$248.29</div> <div class="price-change negative">-$5.67 (2.2%)</div> </div> </div> <div class="stock-item"> <div class="stock-info"> <div class="stock-icon">META</div> <div class="stock-details"> <div class="stock-symbol">Meta Platforms</div> <div class="stock-name">NASDAQ</div> </div> </div> <div class="stock-performance"> <div class="stock-price">$321.94</div> <div class="price-change positive">+$7.32 (2.3%)</div> </div> </div> </div> <div class="card hover-glow"> <div class="card-header"> <div class="card-title">Financial Sector</div> <div class="card-meta">Live tracking</div> </div> <div class="stock-item"> <div class="stock-info"> <div class="stock-icon">JPM</div> <div class="stock-details"> <div class="stock-symbol">JPMorgan Chase</div> <div class="stock-name">NYSE</div> </div> </div> <div class="stock-performance"> <div class="stock-price">$152.83</div> <div class="price-change positive">+$1.57 (1.0%)</div> </div> </div> <div class="stock-item"> <div class="stock-info"> <div class="stock-icon">BAC</div> <div class="stock-details"> <div class="stock-symbol">Bank of America</div> <div class="stock-name">NYSE</div> </div> </div> <div class="stock-performance"> <div class="stock-price">$35.46</div> <div class="price-change negative">-$0.83 (2.3%)</div> </div> </div> </div> <div class="market-stats-grid"> <div class="market-stat-card"> <div class="market-stat-title">S&P 500</div> <div class="market-stat-value">4,782.36</div> <div class="market-stat-change positive">+0.42%</div> </div> <div class="market-stat-card"> <div class="market-stat-title">NASDAQ</div> <div class="market-stat-value">15,087.32</div> <div class="market-stat-change positive">+0.65%</div> </div> <div class="market-stat-card"> <div class="market-stat-title">VIX</div> <div class="market-stat-value">17.48</div> <div class="market-stat-change negative">-2.14%</div> </div> <div class="market-stat-card"> <div class="market-stat-title">10Y Treasury</div> <div class="market-stat-value">4.31%</div> <div class="market-stat-change positive">+0.05</div> </div> </div> </div> <!-- Insights View --> <div id="insightsView" class="view"> <div class="view-title"> <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"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Portfolio Insights </div> <div class="insights-list"> <div class="insight-item"> <div class="insight-icon opportunity"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="16 12 12 8 8 12"></polyline> <line x1="12" y1="16" x2="12" y2="8"></line> </svg> </div> <div class="insight-content"> <div class="insight-title">Overweight in Technology</div> <div class="insight-description">Your portfolio has a 54% allocation to technology stocks
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Health Tracker App Toggle Menu</title> <style> :root { --primary-green: #2ecc71; --dark-green: #27ae60; --light-green: #a8e6cf; --bg-color: #f8f9fa; --text-color: #444; --shadow-color: rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 20px; } .app-container { width: 100%; max-width: 640px; background: white; border-radius: 24px; box-shadow: 0 10px 30px var(--shadow-color); overflow: hidden; position: relative; } .app-header { padding: 20px; text-align: center; background: linear-gradient(135deg, var(--primary-green), var(--dark-green)); color: white; position: relative; } .user-profile { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 15px; } .user-avatar { width: 50px; height: 50px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-info { text-align: left; } .user-name { font-weight: 700; font-size: 1.2rem; margin-bottom: 3px; } .user-status { font-size: 0.9rem; opacity: 0.9; } .toggle-menu { background: white; border-radius: 18px; display: flex; overflow: hidden; position: relative; box-shadow: 0 4px 12px var(--shadow-color); margin: 15px 0; } .toggle-option { flex: 1; padding: 15px 0; text-align: center; cursor: pointer; position: relative; z-index: 2; user-select: none; font-weight: 600; transition: var(--transition); color: var(--text-color); } .toggle-option.active { color: white; } .toggle-slider { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% / 3); background: linear-gradient(135deg, var(--primary-green), var(--dark-green)); border-radius: 18px; transition: var(--transition); z-index: 1; } .graph-container { padding: 20px; position: relative; height: 260px; } .graph { height: 200px; position: relative; margin-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; } .graph-bar { flex: 1; margin: 0 5px; max-width: 30px; height: 0; background: var(--primary-green); border-radius: 6px 6px 0 0; position: relative; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .graph-label { position: absolute; bottom: -25px; width: 100%; text-align: center; font-size: 0.8rem; color: var(--text-color); opacity: 0.8; } .graph-value { position: absolute; top: -25px; width: 100%; text-align: center; font-size: 0.8rem; font-weight: bold; opacity: 0; transition: opacity 0.3s ease; } .graph-bar:hover .graph-value { opacity: 1; } .graph-bar:hover { background: var(--dark-green); transform: scaleY(1.02); transform-origin: bottom; cursor: pointer; } .stats-summary { display: flex; justify-content: space-around; margin-top: 30px; padding: 0 15px; } .stat-item { text-align: center; padding: 15px; border-radius: 16px; background: rgba(46, 204, 113, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); transition: var(--transition); } .stat-item:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .stat-value { font-size: 1.5rem; font-weight: bold; color: var(--primary-green); margin-bottom: 5px; } .stat-label { font-size: 0.9rem; color: var(--text-color); opacity: 0.8; } .date-display { text-align: center; margin-top: 15px; font-size: 1.1rem; font-weight: 600; color: var(--text-color); height: 30px; } .loader { height: 4px; width: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, transparent, var(--light-green), transparent); background-size: 200% 100%; animation: loading 1.5s ease-in-out infinite; opacity: 0; transition: opacity 0.3s ease; } .loading .loader { opacity: 1; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; text-align: center; color: var(--text-color); opacity: 0.7; } .empty-state svg { width: 80px; height: 80px; margin-bottom: 15px; fill: var(--light-green); } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .wave-pattern { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,192L48,197.3C96,203,192,213,288,208C384,203,480,181,576,181.3C672,181,768,203,864,208C960,213,1056,203,1152,181.3C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); background-size: cover; } .tip-bubble { position: absolute; top: 20px; right: 20px; background: var(--light-green); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 10; } .tip-bubble:hover { transform: scale(1.1); } .tip-bubble i { color: var(--dark-green); font-weight: bold; } .tooltip { position: absolute; top: 65px; right: 20px; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); max-width: 240px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; z-index: 20; } .tooltip.show { opacity: 1; transform: translateY(0); } .tooltip-title { color: var(--dark-green); font-weight: 600; margin-bottom: 5px; } .tooltip-text { font-size: 0.9rem; line-height: 1.4; } @media (max-width: 480px) { .app-container { border-radius: 18px; } .stats-summary { flex-direction: column; align-items: center; } .stat-item { width: 90%; margin-bottom: 10px; } .toggle-option { padding: 12px 0; font-size: 0.9rem; } } /* Pattern overlay */ .pattern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--light-green) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.1; pointer-events: none; } </style> </head> <body> <div class="app-container"> <div class="loader"></div> <div class="app-header"> <div class="pattern-overlay"></div> <div class="user-profile"> <div class="user-avatar"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232ecc71' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="User Profile"> </div> <div class="user-info"> <div class="user-name">Alex Mitchell</div> <div class="user-status">7-day streak! 🔥</div> </div> </div> <div class="toggle-menu"> <div class="toggle-option" data-view="daily">Daily</div> <div class="toggle-option active" data-view="weekly">Weekly</div> <div class="toggle-option" data-view="monthly">Monthly</div> <div class="toggle-slider" style="left: 33.33%;"></div> </div> <div class="wave-pattern"></div> </div> <div class="date-display">May 15 - May 21, 2023</div> <div class="graph-container"> <div class="graph" id="graph"> <!-- Graph bars will be added dynamically --> </div> </div> <div class="stats-summary"> <div class="stat-item pulse-animation"> <div class="stat-value">8,246</div> <div class="stat-label">Avg. Steps</div> </div> <div class="stat-item"> <div class="stat-value">32.5</div> <div class="stat-label">Active Hours</div> </div> <div class="stat-item"> <div class="stat-value">6.8</div> <div class="stat-label">Avg. Sleep (h)</div> </div> </div> <div class="tip-bubble"> <i>💡</i> </div> <div class="tooltip"> <div class="tooltip-title">Wellness Tip</div> <div class="tooltip-text">Try to maintain consistent sleep hours. Your body enters deeper, more restorative sleep when you maintain a regular schedule.</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initial data const data = { daily: { date: "May 21, 2023", labels: ['Morning', 'Noon', 'Afternoon', 'Evening', 'Night'], values: [1542, 2308, 1876, 2105, 650], stats: { steps: "8,481", active: "4.2", sleep: "7.1" } }, weekly: { date: "May 15 - May 21, 2023", labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], values: [7845, 8912, 7103, 9256, 8513, 8764, 7328], stats: { steps: "8,246", active: "32.5", sleep: "6.8" } }, monthly: { date: "May 2023", labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], values: [42560, 39870, 57250, 49320], stats: { steps: "47,250", active: "128.3", sleep: "6.5" } } }; // DOM elements const toggleOptions = document.querySelectorAll('.toggle-option'); const toggleSlider = document.querySelector('.toggle-slider'); const dateDisplay = document.querySelector('.date-display'); const graphContainer = document.getElementById('graph'); const statValues = document.querySelectorAll('.stat-value'); const statLabels = document.querySelectorAll('.stat-label'); const appContainer = document.querySelector('.app-container'); const tipBubble = document.querySelector('.tip-bubble'); const tooltip = document.querySelector('.tooltip'); // Current view let currentView = 'weekly'; // Render graph function function renderGraph(view) { appContainer.classList.add('loading'); setTimeout(() => { // Clear existing graph graphContainer.innerHTML = ''; // Update date display dateDisplay.textContent = data[view].date; // Get max value for scaling const maxValue = Math.max(...data[view].values); // Add bars data[view].values.forEach((value, index) => { const heightPercentage = (value / maxValue) * 100; const barElement = document.createElement('div'); barElement.className = 'graph-bar'; barElement.style.height = '0'; // Start at 0 for animation const labelElement = document.createElement('div'); labelElement.className = 'graph-label'; labelElement.textContent = data[view].labels[index]; const valueElement = document.createElement('div'); valueElement.className = 'graph-value'; valueElement.textContent = view === 'monthly' ? Math.floor(value / 1000) + 'k' : value.toLocaleString(); barElement.appendChild(labelElement); barElement.appendChild(valueElement); graphContainer.appendChild(barElement); // Trigger animation after a small delay setTimeout(() => { barElement.style.height = `${heightPercentage}%`; }, 50 * index); }); // Update stats statValues[0].textContent = data[view].stats.steps; statValues[1].textContent = data[view].stats.active; statValues[2].textContent = data[view].stats.sleep; // Update stat labels based on view if (view === 'daily') { statLabels[0].textContent = "Steps Today"; statLabels[1].textContent = "Active Hours"; statLabels[2].textContent = "Sleep Last Night"; } else if (view === 'weekly') { statLabels[0].textContent = "Avg. Steps"; statLabels[1].textContent = "Active Hours"; statLabels[2].textContent = "Avg. Sleep (h)"; } else { statLabels[0].textContent = "Total Steps"; statLabels[1].textContent = "Active Hours"; statLabels[2].textContent = "Avg. Sleep (h)"; } appContainer.classList.remove('loading'); }, 400); } // Initialize graph renderGraph(currentView); // Toggle menu click handlers toggleOptions.forEach(option => { option.addEventListener('click', function() { const view = this.getAttribute('data-view'); // Update toggle appearance toggleOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); // Move slider const index = Array.from(toggleOptions).indexOf(this); toggleSlider.style.left = `${index * 33.33}%`; // Update view and re-render if (view !== currentView) { currentView = view; renderGraph(view); } }); }); // Tooltip functionality tipBubble.addEventListener('mouseenter', function() { tooltip.classList.add('show'); }); tipBubble.addEventListener('mouseleave', function() { tooltip.classList.remove('show'); }); // Make stats pulse on click document.querySelectorAll('.stat-item').forEach(item => { item.addEventListener('click', function() { this.classList.add('pulse-animation'); // Remove pulse after animation completes setTimeout(() => { this.classList.remove('pulse-animation'); }, 2000); }); }); // Tips for different views const tips = { daily: "Try taking a 5-minute movement break every hour during your work day to boost your daily step count.", weekly: "Your sleep pattern is improving! Maintaining consistent bedtime hours can improve sleep quality.", monthly: "Great progress! You've increased your average daily steps by 12% compared to last month." }; // Update tip when view changes toggleOptions.forEach(option => { option.addEventListener('click', function() { const view = this.getAttribute('data-view'); document.querySelector('.tooltip-text').textContent = tips[view]; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust Travel Booking Interface</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --sunset-orange: #FF7B54; --sandy-beach: #FFB26B; --ocean-blue: #4F86C6; --deep-sea: #265C9E; --cloud-white: #F9F9F9; --night-sky: #333333; --mountain-gray: #6C757D; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f5f5f5; background-image: linear-gradient(135deg, rgba(255, 123, 84, 0.05) 0%, rgba(79, 134, 198, 0.05) 100%); display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .travel-app { width: 100%; max-width: 650px; min-height: 600px; background-color: white; border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; } .app-header { padding: 25px 30px 15px; background: linear-gradient(135deg, var(--sunset-orange), var(--sandy-beach)); color: white; position: relative; overflow: hidden; } .header-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); } .app-title { font-size: 28px; font-weight: 700; margin-bottom: 5px; position: relative; z-index: 2; } .app-subtitle { font-size: 14px; font-weight: 400; margin-bottom: 20px; opacity: 0.9; position: relative; z-index: 2; } .toggle-container { background-color: rgba(255, 255, 255, 0.15); border-radius: 12px; display: flex; position: relative; overflow: hidden; margin-bottom: 10px; position: relative; z-index: 2; } .toggle-option { flex: 1; padding: 10px; text-align: center; cursor: pointer; position: relative; transition: color 0.3s ease; font-weight: 500; font-size: 14px; z-index: 3; } .toggle-slider { position: absolute; height: 100%; background-color: white; border-radius: 8px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 1; } .toggle-icon { display: block; font-size: 20px; margin-bottom: 5px; transition: transform 0.3s ease; } .toggle-option.active { color: var(--sunset-orange); } .toggle-option:hover .toggle-icon { transform: translateY(-3px); } .content-area { padding: 30px; } .search-form { display: none; animation: fadeIn 0.4s ease forwards; transition: 0.4s ease; } .search-form.active { display: block; } .form-group { margin-bottom: 20px; position: relative; } .form-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: var(--night-sky); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 14px; transition: all 0.3s ease; background-color: #f9f9f9; } .form-control:focus { outline: none; border-color: var(--sandy-beach); box-shadow: 0 0 0 3px rgba(255, 178, 107, 0.2); } .location-icon, .calendar-icon, .person-icon { position: absolute; right: 15px; bottom: 12px; color: var(--mountain-gray); } .row { display: flex; gap: 15px; margin-bottom: 20px; } .col { flex: 1; } .search-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--sunset-orange), var(--sandy-beach)); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(255, 123, 84, 0.3); position: relative; overflow: hidden; } .search-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 123, 84, 0.4); } .search-btn:active { transform: translateY(0); } .search-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .search-btn:focus:not(:active)::after { animation: ripple 1s ease-out; } .recent-searches { margin-top: 30px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; animation: fadeInUp 0.5s 0.3s forwards; } .section-title { font-size: 16px; font-weight: 600; margin-bottom: 15px; color: var(--night-sky); display: flex; align-items: center; } .section-title::after { content: ''; flex: 1; height: 1px; background-color: #e0e0e0; margin-left: 10px; } .search-chip-container { display: flex; flex-wrap: wrap; gap: 10px; } .search-chip { display: flex; align-items: center; padding: 8px 15px; background-color: #f0f0f0; border-radius: 20px; font-size: 13px; color: var(--mountain-gray); cursor: pointer; transition: all 0.3s ease; } .search-chip:hover { background-color: #e0e0e0; transform: translateY(-2px); } .search-chip i { margin-right: 6px; font-size: 14px; color: var(--sunset-orange); } .promotions { margin-top: 30px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; animation: fadeInUp 0.5s 0.6s forwards; } .promo-card { background: linear-gradient(135deg, var(--ocean-blue), var(--deep-sea)); padding: 20px; border-radius: 15px; color: white; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(79, 134, 198, 0.3); } .promo-pattern { position: absolute; top: 0; right: 0; width: 120px; height: 120px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .promo-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; } .promo-desc { font-size: 14px; opacity: 0.9; margin-bottom: 15px; max-width: 80%; } .promo-code { display: inline-block; padding: 6px 12px; background-color: rgba(255, 255, 255, 0.25); border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: 1px; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 20% { transform: scale(25, 25); opacity: 1; } 100% { opacity: 0; transform: scale(40, 40); } } /* For small devices */ @media (max-width: 480px) { .travel-app { min-height: auto; } .app-header { padding: 20px 15px 10px; } .app-title { font-size: 22px; } .content-area { padding: 20px 15px; } .row { flex-direction: column; gap: 10px; } .toggle-option span { font-size: 12px; } } /* Trip ideas slider */ .trip-ideas { margin-top: 30px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; animation: fadeInUp 0.5s 0.9s forwards; } .ideas-slider { display: flex; overflow-x: auto; padding: 5px 0; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ gap: 12px; scroll-snap-type: x mandatory; } .ideas-slider::-webkit-scrollbar { display: none; } .idea-card { flex: 0 0 auto; width: 140px; height: 80px; border-radius: 10px; position: relative; overflow: hidden; scroll-snap-align: start; cursor: pointer; transition: transform 0.3s ease; } .idea-card:hover { transform: scale(1.05); } .idea-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .idea-card:hover img { transform: scale(1.1); } .idea-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 10px; color: white; font-size: 12px; font-weight: 500; } </style> </head> <body> <div class="travel-app"> <div class="app-header"> <div class="header-pattern"></div> <h1 class="app-title">Wanderlust</h1> <p class="app-subtitle">Where will your next adventure take you?</p> <div class="toggle-container"> <div class="toggle-slider"></div> <div class="toggle-option active" data-index="0" data-form="flight-form"> <i class="toggle-icon">✈️</i> <span>Flights</span> </div> <div class="toggle-option" data-index="1" data-form="hotel-form"> <i class="toggle-icon">🏨</i> <span>Hotels</span> </div> <div class="toggle-option" data-index="2" data-form="car-form"> <i class="toggle-icon">🚗</i> <span>Cars</span> </div> <div class="toggle-option" data-index="3" data-form="package-form"> <i class="toggle-icon">📦</i> <span>Packages</span> </div> </div> </div> <div class="content-area"> <!-- Flight Form --> <div class="search-form active" id="flight-form"> <div class="form-group"> <label class="form-label">From</label> <input type="text" class="form-control" placeholder="Departure city or airport" value="San Francisco, CA"> <i class="location-icon">📍</i> </div> <div class="form-group"> <label class="form-label">To</label> <input type="text" class="form-control" placeholder="Arrival city or airport"> <i class="location-icon">📍</i> </div> <div class="row"> <div class="col"> <div class="form-group"> <label class="form-label">Departure</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> <div class="col"> <div class="form-group"> <label class="form-label">Return</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> </div> <div class="form-group"> <label class="form-label">Travelers</label> <input type="text" class="form-control" placeholder="1 Adult" value="1 Adult"> <i class="person-icon">👤</i> </div> <button class="search-btn">Find Flights</button> </div> <!-- Hotel Form --> <div class="search-form" id="hotel-form"> <div class="form-group"> <label class="form-label">Destination</label> <input type="text" class="form-control" placeholder="City, region, or specific hotel"> <i class="location-icon">📍</i> </div> <div class="row"> <div class="col"> <div class="form-group"> <label class="form-label">Check-in</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> <div class="col"> <div class="form-group"> <label class="form-label">Check-out</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <label class="form-label">Rooms</label> <input type="text" class="form-control" placeholder="1 Room" value="1 Room"> <i class="person-icon">🛏️</i> </div> </div> <div class="col"> <div class="form-group"> <label class="form-label">Guests</label> <input type="text" class="form-control" placeholder="2 Adults" value="2 Adults"> <i class="person-icon">👤</i> </div> </div> </div> <button class="search-btn">Find Hotels</button> </div> <!-- Car Form --> <div class="search-form" id="car-form"> <div class="form-group"> <label class="form-label">Pick-up Location</label> <input type="text" class="form-control" placeholder="City or airport"> <i class="location-icon">📍</i> </div> <div class="form-group"> <label class="form-label">Drop-off Location</label> <input type="text" class="form-control" placeholder="Same as pick-up"> <i class="location-icon">📍</i> </div> <div class="row"> <div class="col"> <div class="form-group"> <label class="form-label">Pick-up Date</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> <div class="col"> <div class="form-group"> <label class="form-label">Drop-off Date</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> </div> <button class="search-btn">Find Cars</button> </div> <!-- Package Form --> <div class="search-form" id="package-form"> <div class="form-group"> <label class="form-label">Origin</label> <input type="text" class="form-control" placeholder="Departure city or airport"> <i class="location-icon">📍</i> </div> <div class="form-group"> <label class="form-label">Destination</label> <input type="text" class="form-control" placeholder="City or region"> <i class="location-icon">📍</i> </div> <div class="row"> <div class="col"> <div class="form-group"> <label class="form-label">Departure</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> <div class="col"> <div class="form-group"> <label class="form-label">Return</label> <input type="text" class="form-control" placeholder="Select date"> <i class="calendar-icon">📅</i> </div> </div> </div> <div class="form-group"> <label class="form-label">Travelers</label> <input type="text" class="form-control" placeholder="2 Adults" value="2 Adults"> <i class="person-icon">👤</i> </div> <button class="search-btn">Find Packages</button> </div> <div class="recent-searches"> <h3 class="section-title">Recent Searches</h3> <div class="search-chip-container"> <div class="search-chip"><i>✈️</i> SFO → NYC, Nov 15-22</div> <div class="search-chip"><i>🏨</i> Cancún, Dec 10-17</div> <div class="search-chip"><i>🚗</i> LAX, Oct 30-Nov 5</div> <div class="search-chip"><i>✈️</i> SFO → CDG, Jan 5-15</div> </div> </div> <div class="trip-ideas"> <h3 class="section-title">Trip Ideas</h3> <div class="ideas-slider"> <div class="idea-card"> <img src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=280&h=160&fit=crop&auto=format" alt="Paris"> <div class="idea-overlay">Paris</div> </div> <div class="idea-card"> <img src="https://images.unsplash.com/photo-1543731068-7e0f5beff43a?w=280&h=160&fit=crop&auto=format" alt="Bali"> <div class="idea-overlay">Bali</div> </div> <div class="idea-card"> <img src="https://images.unsplash.com/photo-1486299267070-83823f5448dd?w=280&h=160&fit=crop&auto=format" alt="New York"> <div class="idea-overlay">New York</div> </div> <div class="idea-card"> <img src="https://images.unsplash.com/photo-1565967511849-76a60a516170?w=280&h=160&fit=crop&auto=format" alt="Tokyo"> <div class="idea-overlay">Tokyo</div> </div> </div> </div> <div class="promotions"> <h3 class="section-title">Special Offer</h3> <div class="promo-card"> <div class="promo-pattern"></div> <h4 class="promo-title">Autumn Getaway Sale</h4> <p class="promo-desc">Book now and save up to 25% on flights + hotels to popular beach destinations!</p> <div class="promo-code">FALLESCAPE25</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggleOptions = document.querySelectorAll('.toggle-option'); const toggleSlider = document.querySelector('.toggle-slider'); const searchForms = document.querySelectorAll('.search-form'); // Set initial position and width of the slider function setInitialSliderPosition() { const activeToggle = document.querySelector('.toggle-option.active'); const width = activeToggle.offsetWidth; const left = activeToggle.offsetLeft; toggleSlider.style.width = `${width}px`; toggleSlider.style.left = `${left}px`; } setInitialSliderPosition(); // Toggle between options toggleOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options toggleOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Move slider const width = this.offsetWidth; const left = this.offsetLeft; toggleSlider.style.width = `${width}px`; toggleSlider.style.left = `${left}px`; // Show corresponding form const formId = this.dataset.form; searchForms.forEach(form => { form.classList.remove('active'); if (form.id === formId) { form.classList.add('active'); } }); }); }); // Button ripple effect const buttons = document.querySelectorAll('.search-btn'); buttons.forEach(button => { button.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); }); }); // Make inputs work const inputs = document.querySelectorAll('.form-control'); inputs.forEach(input => { input.addEventListener('focus', function() { this.parentElement.classList.add('focused'); }); input.addEventListener('blur', function() { this.parentElement.classList.remove('focused'); }); }); // Handle search chips const searchChips = document.querySelectorAll('.search-chip'); searchChips.forEach(chip => { chip.addEventListener('click', function() { // In a real app, this would populate the search form with saved data // For this demo, we'll just add a subtle animation this.style.animation = 'none'; this.offsetHeight; // Trigger reflow this.style.animation = 'fadeIn 0.5s ease'; }); }); // Responsive handling window.addEventListener('resize', function() { setInitialSliderPosition(); }); }); </script> </body> </html>
