Dropdown menus are essential components in modern web design, offering a streamlined way to present multiple options without overwhelming the user interface. They enhance navigation and improve user experience by keeping the design clean and organized.
In this article, we will explore 10 exemplary dropdown menu designs that showcase creativity, functionality, and user-friendliness. These examples will inspire you to create intuitive and visually appealing menus for your own 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 love Subframe for its drag-and-drop interface and intuitive, responsive canvas, making it easy to create pixel-perfect dropdown menus every time. The platform's beautifully crafted components ensure your UI is both functional and visually stunning.
Ready to elevate your design game? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs with ease. Our platform's drag-and-drop interface and beautifully crafted components ensure you can create pixel-perfect dropdown menus and more, instantly.
Experience unparalleled efficiency and start creating right away. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Settings Panel</title> <style> :root { --primary: #3a4f75; --primary-light: #4a6290; --secondary: #f0f4f8; --accent: #6c5ce7; --text: #2d3748; --text-light: #718096; --success: #38b2ac; --warning: #f6ad55; --danger: #e53e3e; --border: #e2e8f0; --shadow: 0 4px 6px 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f7fb; color: var(--text); padding: 15px; } .dashboard-container { width: 100%; max-width: 600px; background-color: white; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .header { background-color: var(--primary); padding: 20px; color: white; position: relative; } .header h1 { font-size: 22px; font-weight: 600; margin-bottom: 5px; } .header p { font-size: 14px; opacity: 0.9; } .settings-pulse { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; } .settings-pulse::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 1; } 70% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } .settings-icon { color: white; font-size: 20px; } .dropdown-trigger { cursor: pointer; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); transition: var(--transition); } .dropdown-trigger:hover { background-color: var(--secondary); } .dropdown-trigger h2 { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--secondary); border-radius: 8px; color: var(--primary); transition: var(--transition); } .dropdown-trigger:hover .icon { background-color: var(--primary-light); color: white; transform: translateY(-2px); } .chevron { transition: var(--transition); } .settings-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); background-color: #fbfbfd; } .settings-content.active { max-height: 1000px; transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .settings-section { padding: 20px; border-bottom: 1px solid var(--border); } .setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .setting-item:last-child { margin-bottom: 0; } .setting-label { font-size: 14px; color: var(--text); flex-grow: 1; } .setting-description { font-size: 12px; color: var(--text-light); margin-top: 2px; max-width: 300px; } .setting-control { margin-left: 15px; } /* Toggle Switch */ .toggle { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: var(--transition); border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: var(--transition); border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--accent); } input:checked + .toggle-slider:before { transform: translateX(24px); } /* Select Dropdown */ .select-wrapper { position: relative; width: 180px; } .custom-select { appearance: none; width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 6px; background-color: white; cursor: pointer; transition: var(--transition); } .custom-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2); } .select-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-light); } /* Slider Control */ .slider-container { width: 180px; } .slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 5px; background: #ddd; outline: none; transition: var(--transition); } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: var(--transition); } .slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: var(--transition); } .slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .slider-value { display: block; text-align: right; font-size: 12px; color: var(--text-light); margin-top: 5px; } /* Color Theme Selection */ .color-options { display: flex; gap: 10px; } .color-option { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; transition: var(--transition); position: relative; border: 2px solid transparent; } .color-option.active { transform: scale(1.1); border: 2px solid var(--primary); } .color-option.active::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .color-blue { background: linear-gradient(135deg, #3498db, #2980b9); } .color-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); } .color-green { background: linear-gradient(135deg, #2ecc71, #27ae60); } .color-orange { background: linear-gradient(135deg, #e67e22, #d35400); } .color-red { background: linear-gradient(135deg, #e74c3c, #c0392b); } .footer { display: flex; justify-content: space-between; padding: 20px; background-color: white; border-top: 1px solid var(--border); } .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); border: none; } .btn-outline { background-color: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { background-color: var(--secondary); } .btn-primary { background-color: var(--accent); color: white; } .btn-primary:hover { background-color: #5d4ecb; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(108, 92, 231, 0.3); } /* Status Indicator */ .status-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 10px; } .status-new { background-color: rgba(108, 92, 231, 0.15); color: var(--accent); } .status-recommended { background-color: rgba(56, 178, 172, 0.15); color: var(--success); } /* Settings Metadata */ .settings-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-light); } .settings-meta span { display: flex; align-items: center; gap: 5px; } /* Notifications counter */ .notification-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; background-color: var(--accent); color: white; border-radius: 10px; font-size: 11px; font-weight: 600; margin-left: 10px; padding: 0 6px; } /* Responsive adjustments */ @media (max-width: 600px) { .setting-item { flex-direction: column; align-items: flex-start; } .setting-control { margin-left: 0; margin-top: 10px; width: 100%; } .select-wrapper, .slider-container { width: 100%; } .footer { flex-direction: column; gap: 15px; } .footer .btn { width: 100%; } } /* Animation for opening sections */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .settings-section { animation: fadeIn 0.3s ease-out; } /* Tooltip styles */ .tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: help; } .tooltip-icon { font-size: 14px; color: var(--text-light); } .tooltip-text { visibility: hidden; width: 200px; background-color: var(--text); color: white; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 12px; line-height: 1.4; box-shadow: var(--shadow); } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--text) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* Progress indicator */ .progress-container { width: 100%; height: 6px; background-color: #f0f0f0; border-radius: 3px; margin-top: 10px; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--success); border-radius: 3px; transition: width 0.5s ease-in-out; } /* Animated caret */ .caret { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; transition: transform 0.3s ease; } .dropdown-active .caret { transform: rotate(180deg); } </style> </head> <body> <div class="dashboard-container"> <div class="header"> <h1>Dashboard Settings</h1> <p>Configure your workspace experience</p> <div class="settings-pulse"> <span class="settings-icon">⚙️</span> </div> </div> <!-- Interface Settings --> <div class="dropdown-trigger" id="interface-trigger"> <h2> <span 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="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> </svg> </span> Interface Settings </h2> <span class="chevron caret"></span> </div> <div class="settings-content" id="interface-content"> <div class="settings-section"> <div class="setting-item"> <div> <div class="setting-label">Compact View Mode</div> <div class="setting-description">Reduce spacing to display more data on screen</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="compact-view"> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Theme</div> <div class="setting-description">Choose your interface color scheme</div> </div> <div class="setting-control"> <div class="color-options"> <div class="color-option color-blue active" data-color="blue"></div> <div class="color-option color-purple" data-color="purple"></div> <div class="color-option color-green" data-color="green"></div> <div class="color-option color-orange" data-color="orange"></div> <div class="color-option color-red" data-color="red"></div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Data Refresh Rate</div> <div class="setting-description">How often dashboard data updates automatically</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="refresh-rate"> <option value="5">5 seconds</option> <option value="15">15 seconds</option> <option value="30" selected>30 seconds</option> <option value="60">1 minute</option> <option value="300">5 minutes</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Animation Speed</div> <div class="setting-description">Control the speed of UI transitions</div> </div> <div class="setting-control"> <div class="slider-container"> <input type="range" min="0" max="100" value="75" class="slider" id="animation-speed"> <span class="slider-value">75%</span> </div> </div> </div> </div> </div> <!-- Data Visualization --> <div class="dropdown-trigger" id="visualization-trigger"> <h2> <span 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="M21.21 15.89A10 10 0 1 1 8 2.83"></path> <path d="M22 12A10 10 0 0 0 12 2v10z"></path> </svg> </span> Data Visualization <span class="status-badge status-new">New</span> </h2> <span class="chevron caret"></span> </div> <div class="settings-content" id="visualization-content"> <div class="settings-section"> <div class="setting-item"> <div> <div class="setting-label">Default Chart Type</div> <div class="setting-description">Set your preferred visualization style</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="chart-type"> <option value="bar">Bar Chart</option> <option value="line" selected>Line Chart</option> <option value="pie">Pie Chart</option> <option value="area">Area Chart</option> <option value="scatter">Scatter Plot</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Data Point Density <span class="tooltip"> <span class="tooltip-icon">?</span> <span class="tooltip-text">Higher density shows more data points but may impact performance on large datasets</span> </span> </div> <div class="setting-description">Number of points displayed in time-series charts</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="data-density"> <option value="low">Low (50 points)</option> <option value="medium" selected>Medium (100 points)</option> <option value="high">High (200 points)</option> <option value="very-high">Very High (500 points)</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Real-time Animations</div> <div class="setting-description">Enable smooth transitions when data updates</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="real-time-animations" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Data Legends</div> <div class="setting-description">Show detailed legends with metrics on charts</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="data-legends" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="settings-meta"> <span> <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"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Updated 2 days ago </span> <span> <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"> <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> Updated by System </span> </div> </div> </div> <!-- Notifications --> <div class="dropdown-trigger" id="notifications-trigger"> <h2> <span 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </span> Notifications <span class="notification-counter">3</span> </h2> <span class="chevron caret"></span> </div> <div class="settings-content" id="notifications-content"> <div class="settings-section"> <div class="setting-item"> <div> <div class="setting-label">Alert Thresholds</div> <div class="setting-description">Set sensitivity for performance alerts</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="alert-threshold"> <option value="conservative">Conservative (95%)</option> <option value="balanced" selected>Balanced (85%)</option> <option value="aggressive">Aggressive (75%)</option> <option value="custom">Custom...</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Desktop Notifications</div> <div class="setting-description">Show system notifications for critical events</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="desktop-notifications" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Email Digests</div> <div class="setting-description">Frequency of performance summary emails</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="email-digest"> <option value="daily">Daily</option> <option value="weekly" selected>Weekly</option> <option value="monthly">Monthly</option> <option value="never">Never</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Anomaly Detection <span class="status-badge status-recommended">Recommended</span> </div> <div class="setting-description">Automatically identify unusual patterns in data</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="anomaly-detection"> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Notification Sound Volume</div> <div class="setting-description">Adjust audio alert level</div> </div> <div class="setting-control"> <div class="slider-container"> <input type="range" min="0" max="100" value="60" class="slider" id="notification-volume"> <span class="slider-value">60%</span> </div> </div> </div> <div class="progress-container"> <div class="progress-bar" style="width: 85%"></div> </div> </div> </div> <!-- API Configuration --> <div class="dropdown-trigger" id="api-trigger"> <h2> <span 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="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> </span> API Configuration </h2> <span class="chevron caret"></span> </div> <div class="settings-content" id="api-content"> <div class="settings-section"> <div class="setting-item"> <div> <div class="setting-label">API Rate Limiting</div> <div class="setting-description">Prevent API overuse to maintain system stability</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="rate-limiting" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Request Timeout</div> <div class="setting-description">Maximum wait time for API responses</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="request-timeout"> <option value="10">10 seconds</option> <option value="30" selected>30 seconds</option> <option value="60">1 minute</option> <option value="120">2 minutes</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Data Caching</div> <div class="setting-description">Cache API responses to improve performance</div> </div> <div class="setting-control"> <label class="toggle"> <input type="checkbox" id="data-caching" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-item"> <div> <div class="setting-label">Cache Duration</div> <div class="setting-description">How long to store cached responses</div> </div> <div class="setting-control"> <div class="select-wrapper"> <select class="custom-select" id="cache-duration"> <option value="5">5 minutes</option> <option value="15" selected>15 minutes</option> <option value="30">30 minutes</option> <option value="60">1 hour</option> </select> <div class="select-arrow">▼</div> </div> </div> </div> </div> </div> <div class="footer"> <button class="btn btn-outline" id="reset-button">Reset to Default</button> <button class="btn btn-primary" id="save-button">Save Changes</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Dropdown functionality const dropdownTriggers = document.querySelectorAll('.dropdown-trigger'); dropdownTriggers.forEach(trigger => { trigger.addEventListener('click', function() { const contentId = this.id.replace('-trigger', '-content'); const content = document.getElementById(contentId); // Toggle active class content.classList.toggle('active'); this.classList.toggle('dropdown-active'); }); }); // Range sliders const sliders = document.querySelectorAll('.slider'); sliders.forEach(slider => { const valueDisplay = slider.nextElementSibling; slider.addEventListener('input', function() { valueDisplay.textContent = this.value + '%'; }); }); // Color theme selection const colorOptions = document.querySelectorAll('.color-option'); colorOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options colorOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Get color value const color = this.getAttribute('data-color'); console.log('Selected color:', color); // Here you would typically update the theme // For demo purposes, we'll just log it }); }); // Save button functionality const saveButton = document.getElementById('save-button'); saveButton.addEventListener('click', function() { // Collect all settings const settings = { compactView: document.getElementById('compact-view').checked, theme: document.querySelector('.color-option.active').getAttribute('data-color'), refreshRate: document.getElementById('refresh-rate').value, animationSpeed: document.getElementById('animation-speed').value, chartType: document.getElementById('chart-type').value, dataDensity: document.getElementById('data-density').value, realTimeAnimations: document.getElementById('real-time-animations').checked, dataLegends: document.getElementById('data-legends').checked, alertThreshold: document.getElementById('alert-threshold').value, desktopNotifications: document.getElementById('desktop-notifications').checked, emailDigest: document.getElementById('email-digest').value, anomalyDetection: document.getElementById('anomaly-detection').checked, notificationVolume: document.getElementById('notification-volume').value, rateLimiting: document.getElementById('rate-limiting').checked, requestTimeout: document.getElementById('request-timeout').value, dataCaching: document.getElementById('data-caching').checked, cacheDuration: document.getElementById('cache-duration').value }; console.log('Saving settings:', settings); // Show a success feedback this.innerText = 'Saved!'; this.style.backgroundColor = 'var(--success)'; setTimeout(() => { this.innerText = 'Save Changes'; this.style.backgroundColor = 'var(--accent)'; }, 2000); }); // Reset button functionality const resetButton = document.getElementById('reset-button'); resetButton.addEventListener('click', function() { // Reset all form elements to defaults // For simplicity, we'll just reload the page in this demo console.log('Resetting to defaults'); // Show confirmation this.innerText = 'Resetting...'; setTimeout(() => { // In a real app, you would reset form values here document.getElementById('compact-view').checked = false; document.getElementById('real-time-animations').checked = true; document.getElementById('data-legends').checked = true; document.getElementById('desktop-notifications').checked = true; document.getElementById('anomaly-detection').checked = false; document.getElementById('rate-limiting').checked = true; document.getElementById('data-caching').checked = true; document.getElementById('refresh-rate').value = "30"; document.getElementById('chart-type').value = "line"; document.getElementById('data-density').value = "medium"; document.getElementById('alert-threshold').value = "balanced"; document.getElementById('email-digest').value = "weekly"; document.getElementById('request-timeout').value = "30"; document.getElementById('cache-duration').value = "15"; document.getElementById('animation-speed').value = "75"; document.querySelector('.slider-value').textContent = "75%"; document.getElementById('notification-volume').value = "60"; document.getElementById('notification-volume').nextElementSibling.
<html> <head> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #333; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-x: hidden; padding: 20px; } header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); position: relative; z-index: 10; max-width: 600px; } .logo { font-weight: 700; font-size: 1.4rem; background: linear-gradient(45deg, #FF5E62, #FF9966); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } .logo:after { content: ''; position: absolute; width: 8px; height: 8px; background: linear-gradient(45deg, #FF5E62, #FF9966); border-radius: 50%; bottom: 0; right: -12px; } .menu-toggle { background: none; border: none; cursor: pointer; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; height: 24px; width: 30px; z-index: 100; position: relative; transition: all 0.3s ease; } .menu-toggle:focus { outline: none; } .menu-toggle span { width: 100%; height: 3px; background-color: #333; border-radius: 3px; transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .menu-toggle.active span:nth-of-type(1) { transform: rotate(45deg) translate(6px, 6px); } .menu-toggle.active span:nth-of-type(2) { opacity: 0; } .menu-toggle.active span:nth-of-type(3) { transform: rotate(-45deg) translate(6px, -6px); } .menu-container { position: absolute; top: 75px; right: 20px; width: 280px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); transform: translateY(-20px) scale(0.95); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); overflow: hidden; z-index: 9; } .menu-container.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; } .nav-menu { list-style: none; padding: 15px; } .nav-item { margin-bottom: 8px; position: relative; overflow: hidden; border-radius: 12px; transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; } .menu-container.open .nav-item { transform: translateY(0); opacity: 1; } .menu-container.open .nav-item:nth-child(1) { transition-delay: 0.1s; } .menu-container.open .nav-item:nth-child(2) { transition-delay: 0.15s; } .menu-container.open .nav-item:nth-child(3) { transition-delay: 0.2s; } .menu-container.open .nav-item:nth-child(4) { transition-delay: 0.25s; } .menu-container.open .nav-item:nth-child(5) { transition-delay: 0.3s; } .menu-container.open .nav-item:nth-child(6) { transition-delay: 0.35s; } .nav-link { display: flex; align-items: center; padding: 16px; color: #333; text-decoration: none; border-radius: 12px; transition: all 0.3s ease; position: relative; z-index: 1; font-weight: 500; } .nav-link:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #FF5E62, #FF9966); border-radius: 12px; z-index: -1; opacity: 0; transform: scale(0.9); transition: all 0.3s ease; } .nav-link:hover, .nav-link.active { color: white; } .nav-link:hover:before, .nav-link.active:before { opacity: 1; transform: scale(1); } .nav-link:active { transform: scale(0.98); } .nav-icon { margin-right: 12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background-color: rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .nav-link:hover .nav-icon, .nav-link.active .nav-icon { background-color: rgba(255, 255, 255, 0.2); } .has-dropdown .nav-link { justify-content: space-between; } .has-dropdown .dropdown-toggle { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .has-dropdown.open .dropdown-toggle { transform: rotate(180deg); } .dropdown-menu { max-height: 0; overflow: hidden; list-style: none; padding: 0 10px; margin-left: 36px; transition: all 0.3s ease; } .has-dropdown.open .dropdown-menu { max-height: 200px; margin-top: 8px; margin-bottom: 8px; } .dropdown-item { margin-bottom: 6px; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; } .has-dropdown.open .dropdown-item { opacity: 1; transform: translateX(0); } .has-dropdown.open .dropdown-item:nth-child(1) { transition-delay: 0.1s; } .has-dropdown.open .dropdown-item:nth-child(2) { transition-delay: 0.15s; } .has-dropdown.open .dropdown-item:nth-child(3) { transition-delay: 0.2s; } .dropdown-link { display: block; padding: 10px 15px; color: #555; text-decoration: none; border-radius: 8px; font-weight: 400; font-size: 0.9rem; transition: all 0.3s ease; position: relative; } .dropdown-link:hover { background-color: rgba(255, 94, 98, 0.1); color: #FF5E62; } .dropdown-link:active { transform: scale(0.98); } .theme-switcher { display: flex; justify-content: center; padding: 15px; border-top: 1px solid rgba(0, 0, 0, 0.05); } .theme-options { display: flex; gap: 8px; } .theme-option { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; } .theme-option:hover { transform: scale(1.1); } .theme-option.active { border-color: #333; } .sunset { background: linear-gradient(45deg, #FF5E62, #FF9966); } .ocean { background: linear-gradient(45deg, #4CB8C4, #3CD3AD); } .lavender { background: linear-gradient(45deg, #9C27B0, #673AB7); } .forest { background: linear-gradient(45deg, #2E7D32, #8BC34A); } .content { margin-top: 40px; text-align: center; max-width: 600px; } h1 { font-size: 2rem; margin-bottom: 20px; background: linear-gradient(45deg, #FF5E62, #FF9966); -webkit-background-clip: text; background-clip: text; color: transparent; } p { line-height: 1.6; color: #666; font-size: 1.1rem; margin-bottom: 20px; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .mobile-display { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; border-radius: 30px; background-color: #f0f0f0; overflow: hidden; border: 10px solid #333; border-top-width: 50px; border-bottom-width: 50px; position: relative; margin-top: 40px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .mobile-display:before { content: ''; position: absolute; top: -25px; width: 80px; height: 10px; background-color: #222; border-radius: 10px; z-index: 1; } .mobile-content { width: 100%; height: 400px; background-color: white; overflow: hidden; position: relative; } @media (max-width: 600px) { header { padding: 12px 15px; } .logo { font-size: 1.2rem; } .menu-container { width: calc(100% - 40px); top: 65px; } h1 { font-size: 1.6rem; } p { font-size: 1rem; } .mobile-display { max-width: 300px; } .mobile-content { height: 350px; } } /* Theme variations */ .sunset-theme .logo, .sunset-theme h1 { background: linear-gradient(45deg, #FF5E62, #FF9966); -webkit-background-clip: text; background-clip: text; } .sunset-theme .logo:after, .sunset-theme .nav-link:before { background: linear-gradient(45deg, #FF5E62, #FF9966); } .ocean-theme .logo, .ocean-theme h1 { background: linear-gradient(45deg, #4CB8C4, #3CD3AD); -webkit-background-clip: text; background-clip: text; } .ocean-theme .logo:after, .ocean-theme .nav-link:before { background: linear-gradient(45deg, #4CB8C4, #3CD3AD); } .lavender-theme .logo, .lavender-theme h1 { background: linear-gradient(45deg, #9C27B0, #673AB7); -webkit-background-clip: text; background-clip: text; } .lavender-theme .logo:after, .lavender-theme .nav-link:before { background: linear-gradient(45deg, #9C27B0, #673AB7); } .forest-theme .logo, .forest-theme h1 { background: linear-gradient(45deg, #2E7D32, #8BC34A); -webkit-background-clip: text; background-clip: text; } .forest-theme .logo:after, .forest-theme .nav-link:before { background: linear-gradient(45deg, #2E7D32, #8BC34A); } </style> </head> <body class="sunset-theme"> <div class="mobile-display"> <div class="mobile-content"> <header> <div class="logo">TouchMenu</div> <button class="menu-toggle" id="menuToggle" aria-label="Toggle Navigation Menu"> <span></span> <span></span> <span></span> </button> <div class="menu-container" id="menuContainer"> <ul class="nav-menu"> <li class="nav-item"> <a href="#" class="nav-link active"> <div class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Home </a> </li> <li class="nav-item has-dropdown" id="shopDropdown"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 7H4C2.89543 7 2 7.89543 2 9V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V9C22 7.89543 21.1046 7 20 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 21V5C16 4.46957 15.7893 3.96086 15.4142 3.58579C15.0391 3.21071 14.5304 3 14 3H10C9.46957 3 8.96086 3.21071 8.58579 3.58579C8.21071 3.96086 8 4.46957 8 5V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Shop <div class="dropdown-toggle"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="#" class="dropdown-link">New Arrivals</a> </li> <li class="dropdown-item"> <a href="#" class="dropdown-link">Featured Products</a> </li> <li class="dropdown-item"> <a href="#" class="dropdown-link">Sales & Discounts</a> </li> </ul> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Explore </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 7L12 13L21 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Contact </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Profile </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Settings </a> </li> </ul> <div class="theme-switcher"> <div class="theme-options"> <div class="theme-option sunset active" data-theme="sunset"></div> <div class="theme-option ocean" data-theme="ocean"></div> <div class="theme-option lavender" data-theme="lavender"></div> <div class="theme-option forest" data-theme="forest"></div> </div> </div> </div> </header> </div> </div> <div class="content"> <h1>Touch-Optimized Mobile Menu</h1> <p>This dynamic dropdown menu is specially designed for mobile touch interfaces. With spacious touch targets, tactile feedback, and vibrant color themes, it provides an intuitive navigation experience. Try it out by clicking the menu icon above.</p> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menuToggle'); const menuContainer = document.getElementById('menuContainer'); const shopDropdown = document.getElementById('shopDropdown'); const themeOptions = document.querySelectorAll('.theme-option'); // Menu toggle functionality menuToggle.addEventListener('click', function(e) { e.preventDefault(); this.classList.toggle('active'); menuContainer.classList.toggle('open'); // Create ripple effect createRipple(e, this); }); // Dropdown toggle functionality shopDropdown.addEventListener('click', function(e) { if (e.target.classList.contains('nav-link') || e.target.classList.contains('dropdown-toggle') || e.target.closest('.dropdown-toggle')) { e.preventDefault(); this.classList.toggle('open'); // Create ripple effect if (e.target.classList.contains('nav-link')) { createRipple(e, e.target); } } }); // Theme switcher themeOptions.forEach(option => { option.addEventListener('click', function() { const theme = this.getAttribute('data-theme'); // Remove active class from all options themeOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Update the theme class on body document.body.className = ''; document.body.classList.add(`${theme}-theme`); // Create ripple effect createRipple(event, this); }); }); // Ripple effect for all nav links const navLinks = document.querySelectorAll('.nav-link, .dropdown-link'); navLinks.forEach(link => { link.addEventListener('click', function(e) { if (!e.target.classList.contains('dropdown-toggle') && !e.target.closest('.dropdown-toggle')) { createRipple(e, this); // Remove active class from all nav links document.querySelectorAll('.nav-link').forEach(l => { l.classList.remove('active'); }); // Add active class to clicked link (only for main nav links) if (this.classList.contains('nav-link')) { this.classList.add('active'); } } }); }); // Close menu when clicking outside document.addEventListener('click', function(e) { if (!menuContainer.contains(e.target) && !menuToggle.contains(e.target) && menuContainer.classList.contains('open')) { menuToggle.classList.remove('active'); menuContainer.classList.remove('open'); } }); // Function to create ripple effect function createRipple(event, element) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = element.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; element.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); } }); </script> </body> </html>
<html> <head> <style> :root { --primary-color: #132F4C; --secondary-color: #0076C0; --accent-color: #64B5F6; --success-color: #1BB978; --danger-color: #E53935; --warning-color: #FFC107; --text-color: #1A2B42; --text-light: #6A7C94; --bg-color: #F7F9FC; --card-color: #FFFFFF; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: var(--bg-color); color: var(--text-color); height: 100vh; display: flex; align-items: center; justify-content: center; line-height: 1.5; } .dashboard { width: 100%; max-width: 650px; height: 650px; background-color: var(--card-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px; display: flex; flex-direction: column; overflow: hidden; } .dashboard__header { margin-bottom: 20px; } .dashboard__title { font-size: 1.75rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; } .dashboard__subtitle { font-size: 0.875rem; color: var(--text-light); } .selector { position: relative; z-index: 10; } .selector__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; background-color: var(--card-color); border: 1px solid #E0E7EF; border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--text-color); transition: all var(--transition-fast); box-shadow: var(--shadow-sm); } .selector__trigger:hover { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.15); } .selector__trigger:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.3); } .selector__trigger-text { display: flex; align-items: center; gap: 10px; } .selector__trigger-icon { font-size: 1.25rem; color: var(--text-light); transition: transform var(--transition-fast); } .selector__trigger[aria-expanded="true"] .selector__trigger-icon { transform: rotate(180deg); } .selector__dropdown { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background-color: var(--card-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all var(--transition-normal); z-index: 20; border: 1px solid #E0E7EF; } .selector__dropdown.active { max-height: 350px; opacity: 1; visibility: visible; } .selector__search-container { padding: 12px 15px; border-bottom: 1px solid #E0E7EF; position: sticky; top: 0; background-color: var(--card-color); z-index: 2; } .selector__search { width: 100%; padding: 10px 15px; border: 1px solid #E0E7EF; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text-color); background-color: #F5F7FA; transition: all var(--transition-fast); } .selector__search:focus { outline: none; border-color: var(--accent-color); background-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.15); } .selector__search-icon { position: absolute; right: 25px; top: 22px; color: var(--text-light); } .selector__options { max-height: 280px; overflow-y: auto; padding: 5px 0; } .selector__group { margin-bottom: 8px; } .selector__group-title { padding: 8px 15px; font-size: 0.75rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; } .selector__option { padding: 12px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background-color var(--transition-fast); position: relative; } .selector__option:hover { background-color: #F0F5FF; } .selector__option--active { background-color: #E6F0FF; } .selector__option--active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--secondary-color); } .selector__option-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .selector__option-icon--checking { background-color: rgba(0, 118, 192, 0.1); color: var(--secondary-color); } .selector__option-icon--savings { background-color: rgba(27, 185, 120, 0.1); color: var(--success-color); } .selector__option-icon--credit { background-color: rgba(229, 57, 53, 0.1); color: var(--danger-color); } .selector__option-icon--investment { background-color: rgba(255, 193, 7, 0.1); color: var(--warning-color); } .selector__option-icon--transaction { background-color: rgba(142, 68, 173, 0.1); color: #8E44AD; } .selector__option-icon i { font-size: 1rem; } .selector__option-content { flex-grow: 1; } .selector__option-label { display: block; font-weight: 500; font-size: 0.9375rem; } .selector__option-description { display: block; font-size: 0.75rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; } .selector__option-badge { padding: 4px 8px; background-color: rgba(0, 118, 192, 0.1); color: var(--secondary-color); border-radius: 100px; font-size: 0.6875rem; font-weight: 600; } .selector__empty { padding: 25px 15px; text-align: center; color: var(--text-light); } .selector__keyboard-hint { padding: 8px 15px; background-color: #F5F7FA; border-top: 1px solid #E0E7EF; font-size: 0.75rem; color: var(--text-light); display: flex; justify-content: center; gap: 12px; } .selector__kbd { display: inline-flex; align-items: center; background-color: #FFFFFF; border: 1px solid #E0E7EF; border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); padding: 0 4px; min-width: 18px; height: 18px; justify-content: center; font-size: 0.6875rem; font-weight: 600; color: var(--text-color); margin: 0 2px; } .dashboard__content { margin-top: 25px; flex: 1; background-color: #F0F5FF; border-radius: var(--radius-md); padding: 20px; overflow: auto; } .dashboard__card { background-color: var(--card-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 15px; animation: fadeIn 0.5s ease forwards; opacity: 0; transform: translateY(10px); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .dashboard__card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .dashboard__card-title { font-size: 1.125rem; font-weight: 600; color: var(--primary-color); } .dashboard__card-balance { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); } .dashboard__card-details { display: flex; justify-content: space-between; font-size: 0.875rem; } .dashboard__card-detail { color: var(--text-light); } .dashboard__card-value { font-weight: 600; color: var(--text-color); } .dashboard__transactions { margin-top: 20px; } .dashboard__transaction { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #E0E7EF; } .dashboard__transaction:last-child { border-bottom: none; } .dashboard__transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .dashboard__transaction-content { flex-grow: 1; } .dashboard__transaction-title { font-weight: 500; font-size: 0.875rem; } .dashboard__transaction-date { font-size: 0.75rem; color: var(--text-light); } .dashboard__transaction-amount { font-weight: 600; font-size: 0.875rem; } .dashboard__transaction-amount--negative { color: var(--danger-color); } .dashboard__transaction-amount--positive { color: var(--success-color); } /* Custom scrollbar for options */ .selector__options::-webkit-scrollbar { width: 6px; } .selector__options::-webkit-scrollbar-track { background: transparent; } .selector__options::-webkit-scrollbar-thumb { background-color: #D1D9E6; border-radius: 3px; } .selector__options::-webkit-scrollbar-thumb:hover { background-color: #B8C4D9; } /* Responsiveness */ @media (max-width: 600px) { .dashboard { padding: 20px; height: 600px; } .selector__option-description { max-width: 220px; } .dashboard__title { font-size: 1.5rem; } } /* Loading Indicator Animation */ .loading-indicator { display: flex; justify-content: center; align-items: center; height: 180px; } .loading-indicator__dots { display: flex; align-items: center; gap: 6px; } .loading-indicator__dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--secondary-color); animation: loadingBounce 1.4s infinite ease-in-out both; } .loading-indicator__dot:nth-child(1) { animation-delay: -0.32s; } .loading-indicator__dot:nth-child(2) { animation-delay: -0.16s; } @keyframes loadingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } </style> </head> <body> <div class="dashboard"> <div class="dashboard__header"> <h1 class="dashboard__title">Financial Dashboard</h1> <p class="dashboard__subtitle">Select an account or transaction type to view details</p> </div> <div class="selector"> <button type="button" id="selectorTrigger" class="selector__trigger" aria-haspopup="true" aria-expanded="false"> <span class="selector__trigger-text"> <span id="selectedOptionText">Select an account or transaction</span> </span> <i class="selector__trigger-icon">▼</i> </button> <div id="selectorDropdown" class="selector__dropdown"> <div class="selector__search-container"> <input type="text" id="selectorSearch" class="selector__search" placeholder="Search accounts or transactions..." aria-label="Search accounts or transactions"> <i class="selector__search-icon">🔍</i> </div> <div class="selector__options" id="selectorOptions"> <div class="selector__group"> <div class="selector__group-title">Accounts</div> <div class="selector__option" data-value="checking" data-type="account"> <div class="selector__option-icon selector__option-icon--checking"> <i>💳</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Primary Checking</span> <span class="selector__option-description">Everyday transactions and bill payments</span> </div> <span class="selector__option-badge">Active</span> </div> <div class="selector__option" data-value="savings" data-type="account"> <div class="selector__option-icon selector__option-icon--savings"> <i>💰</i> </div> <div class="selector__option-content"> <span class="selector__option-label">High-Yield Savings</span> <span class="selector__option-description">2.25% APY on balances up to $25,000</span> </div> <span class="selector__option-badge">Active</span> </div> <div class="selector__option" data-value="creditcard" data-type="account"> <div class="selector__option-icon selector__option-icon--credit"> <i>💳</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Platinum Rewards Credit Card</span> <span class="selector__option-description">2% cashback on dining, 1.5% on all other purchases</span> </div> <span class="selector__option-badge">Active</span> </div> <div class="selector__option" data-value="investment" data-type="account"> <div class="selector__option-icon selector__option-icon--investment"> <i>📈</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Investment Portfolio</span> <span class="selector__option-description">Diversified index funds and ETFs</span> </div> <span class="selector__option-badge">Active</span> </div> </div> <div class="selector__group"> <div class="selector__group-title">Transaction Types</div> <div class="selector__option" data-value="recent" data-type="transaction"> <div class="selector__option-icon selector__option-icon--transaction"> <i>🕒</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Recent Transactions</span> <span class="selector__option-description">View your most recent activity across all accounts</span> </div> </div> <div class="selector__option" data-value="pending" data-type="transaction"> <div class="selector__option-icon selector__option-icon--transaction"> <i>⏱️</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Pending Transactions</span> <span class="selector__option-description">Transactions that haven't been fully processed yet</span> </div> </div> <div class="selector__option" data-value="recurring" data-type="transaction"> <div class="selector__option-icon selector__option-icon--transaction"> <i>🔄</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Recurring Payments</span> <span class="selector__option-description">Subscriptions and regular payments</span> </div> </div> <div class="selector__option" data-value="scheduled" data-type="transaction"> <div class="selector__option-icon selector__option-icon--transaction"> <i>📅</i> </div> <div class="selector__option-content"> <span class="selector__option-label">Scheduled Transfers</span> <span class="selector__option-description">Upcoming transfers between your accounts</span> </div> </div> </div> </div> <div id="selectorEmpty" class="selector__empty" style="display: none;"> No matching accounts or transactions found </div> <div class="selector__keyboard-hint"> <span><span class="selector__kbd">↑</span><span class="selector__kbd">↓</span> to navigate</span> <span><span class="selector__kbd">Enter</span> to select</span> <span><span class="selector__kbd">Esc</span> to close</span> </div> </div> </div> <div id="dashboardContent" class="dashboard__content"> <div class="loading-indicator" style="display: none;" id="loadingIndicator"> <div class="loading-indicator__dots"> <div class="loading-indicator__dot"></div> <div class="loading-indicator__dot"></div> <div class="loading-indicator__dot"></div> </div> </div> <div class="dashboard__placeholder" id="placeholderContent"> <div style="text-align: center; color: var(--text-light); padding: 80px 20px;"> <div style="font-size: 3rem; margin-bottom: 15px;">📊</div> <h3 style="margin-bottom: 10px; color: var(--primary-color);">Select an account or transaction type</h3> <p>Choose from the dropdown above to view your financial information</p> </div> </div> <div id="accountContent" style="display: none;"></div> <div id="transactionContent" style="display: none;"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const selectorTrigger = document.getElementById('selectorTrigger'); const selectorDropdown = document.getElementById('selectorDropdown'); const selectorOptions = document.querySelectorAll('.selector__option'); const selectorSearch = document.getElementById('selectorSearch'); const selectorEmpty = document.getElementById('selectorEmpty'); const selectedOptionText = document.getElementById('selectedOptionText'); const loadingIndicator = document.getElementById('loadingIndicator'); const placeholderContent = document.getElementById('placeholderContent'); const accountContent = document.getElementById('accountContent'); const transactionContent = document.getElementById('transactionContent'); let activeOptionIndex = -1; let filteredOptions = Array.from(selectorOptions); // Toggle dropdown selectorTrigger.addEventListener('click', () => { const isExpanded = selectorTrigger.getAttribute('aria-expanded') === 'true'; if (isExpanded) { closeDropdown(); } else { openDropdown(); } }); function openDropdown() { selectorTrigger.setAttribute('aria-expanded', 'true'); selectorDropdown.classList.add('active'); selectorSearch.focus(); // Reset filter when opening selectorSearch.value = ''; filterOptions(''); // Position activeOptionIndex to the first option activeOptionIndex = filteredOptions.length > 0 ? 0 : -1; updateActiveOption(); // Close dropdown when clicking outside setTimeout(() => { document.addEventListener('click', handleOutsideClick); }, 10); } function closeDropdown() { selectorTrigger.setAttribute('aria-expanded', 'false'); selectorDropdown.classList.remove('active'); document.removeEventListener('click', handleOutsideClick); } function handleOutsideClick(event) { const isClickInsideSelector = selectorTrigger.contains(event.target) || selectorDropdown.contains(event.target); if (!isClickInsideSelector) { closeDropdown(); } } // Filter options based on search selectorSearch.addEventListener('input', (e) => { const searchValue = e.target.value.toLowerCase().trim(); filterOptions(searchValue); }); function filterOptions(searchValue) { let matchFound = false; filteredOptions = Array.from(selectorOptions).filter(option => { const optionLabel = option.querySelector('.selector__option-label').textContent.toLowerCase(); const optionDescription = option.querySelector('.selector__option-description').textContent.toLowerCase(); const isMatch = optionLabel.includes(searchValue) || optionDescription.includes(searchValue); option.style.display = isMatch ? 'flex' : 'none'; if (isMatch) matchFound = true; return isMatch; }); selectorEmpty.style.display = matchFound ? 'none' : 'block'; // Reset active option index activeOptionIndex = filteredOptions.length > 0 ? 0 : -1; updateActiveOption(); } // Handle option selection selectorOptions.forEach((option, index) => { option.addEventListener('click', () => { selectOption(option); }); option.addEventListener('mouseover', () => { activeOptionIndex = Array.from(filteredOptions).indexOf(option); updateActiveOption(); }); }); function selectOption(option) { const optionLabel = option.querySelector('.selector__option-label').textContent; const optionValue = option.dataset.value; const optionType = option.dataset.type; // Update the selection selectedOptionText.textContent = optionLabel; closeDropdown(); // Show the loading indicator loadingIndicator.style.display = 'flex'; placeholderContent.style.display = 'none'; accountContent.style.display = 'none'; transactionContent.style.display = 'none'; // Simulate loading data setTimeout(() => { loadingIndicator.style.display = 'none'; if (optionType === 'account') { displayAccountContent(optionValue); } else if (optionType === 'transaction') { displayTransactionContent(optionValue); } }, 800); // Simulate API call delay } // Keyboard navigation selectorSearch.addEventListener('keydown', (e) => { handleKeyNavigation(e); }); document.addEventListener('keydown', (e) => { if (selectorDropdown.classList.contains('active')) { handleKeyNavigation(e); } }); function handleKeyNavigation(e) { if (filteredOptions.length === 0) return; switch (e.key) { case 'ArrowDown': e.preventDefault(); activeOptionIndex = (activeOptionIndex + 1) % filteredOptions.length; updateActiveOption(); scrollToActiveOption(); break; case 'ArrowUp': e.preventDefault(); activeOptionIndex = activeOptionIndex <= 0 ? filteredOptions.length - 1 : activeOptionIndex - 1; updateActiveOption(); scrollToActiveOption(); break; case 'Enter': e.preventDefault(); if (activeOptionIndex >= 0) { selectOption(filteredOptions[activeOptionIndex]); } break; case 'Escape': e.preventDefault(); closeDropdown(); break; } } function updateActiveOption() { // Remove active class from all options filteredOptions.forEach(option => { option.classList.remove('selector__option--active'); }); // Add active class to current option if (activeOptionIndex >= 0 && activeOptionIndex < filteredOptions.length) { filteredOptions[activeOptionIndex].classList.add('selector__option--active'); } } function scrollToActiveOption() { if (activeOptionIndex >= 0 && activeOptionIndex < filteredOptions.length) { const activeOption = filteredOptions[activeOptionIndex]; const optionsContainer = document.getElementById('selectorOptions'); const containerRect = optionsContainer.getBoundingClientRect(); const optionRect = activeOption.getBoundingClientRect(); // Check if option is below the visible area if (optionRect.bottom > containerRect.bottom) { optionsContainer.scrollTop += optionRect.bottom - containerRect.bottom; } // Check if option is above the visible area if (optionRect.top < containerRect.top) { optionsContainer.scrollTop -= containerRect.top - optionRect.top; } } } // Content display functions function displayAccountContent(accountType) { accountContent.style.display = 'block'; transactionContent.style.display = 'none'; // Account-specific content const accountData = { checking: { title: 'Primary Checking', balance: '$4,285.67', details: [ { label: 'Account Number', value: '••••8492' }, { label: 'Interest Rate', value: '0.02% APY' } ], transactions: [ { title: 'Amazon.com', date: 'Today', amount: '-$42.99', icon: '🛒', type: 'negative' }, { title: 'Starbucks', date: 'Yesterday', amount: '-$5.45', icon: '☕', type: 'negative' }, { title: 'Direct Deposit - Acme Inc', date: 'Jul 15', amount: '+$2,750.00', icon: '💵', type: 'positive' }, { title: 'AT&T Wireless', date: 'Jul 10', amount: '-$89.99', icon: '📱', type: 'negative' } ] }, savings: { title: 'High-Yield Savings', balance: '$12,658.32', details: [ { label: 'Account Number', value: '••••3387' }, { label: 'Interest Rate', value: '2.25% APY' } ], transactions: [ { title: 'Interest Payment', date: 'Jul 1', amount: '+$24.16', icon: '💹', type: 'positive' }, { title: 'Transfer from Checking', date: 'Jun 28', amount: '+$1,000.00', icon: '↔️', type: 'positive' }, { title: 'Transfer to Checking', date: 'Jun 15', amount: '-$500.00', icon: '↔️', type: 'negative' }, { title: 'Interest Payment', date: 'Jun 1', amount: '+$22.75', icon: '💹', type: 'positive' } ] }, creditcard: { title: 'Platinum Rewards Credit Card', balance: '$1,284.53', details: [ { label: 'Available Credit', value: '$8,715.47' }, { label: 'Due Date', value: 'Aug 15, 2023' } ], transactions: [ { title: 'Whole Foods Market', date: 'Jul 14', amount: '-$86.24', icon: '🥑', type: 'negative' }, { title: 'Shell Gas Station', date: 'Jul 12', amount: '-$45.77', icon: '⛽', type: 'negative' }, { title: 'Netflix Subscription', date: 'Jul 10', amount: '-$15.99', icon: '🎬', type: 'negative' }, { title: 'Cashback Reward', date: 'Jul 5', amount: '+$24.50', icon: '💰', type: 'positive' } ] }, investment: { title: 'Investment Portfolio', balance: '$32,145.89', details: [ { label: 'Year-to-Date', value: '+8.2%' }, { label: 'Last Contribution', value: 'Jul 1, 2023' } ], transactions: [ { title: 'Quarterly Dividend', date: 'Jul 2', amount: '+$156.78', icon: '📈', type: 'positive' }, { title: 'Auto-Investment Plan', date: 'Jul 1', amount: '+$500.00', icon: '💵', type: 'positive' }, { title: 'Index Fund Purchase', date: 'Jul 1', amount: '-$500.00', icon: '📊', type: 'negative' }, { title: 'Auto-Investment Plan', date: 'Jun 1', amount: '+$500.00', icon: '💵', type: 'positive' } ] } }; const data = accountData[accountType]; let html = ` <div class="dashboard__card" style="animation-delay: 0.1s"> <div class="dashboard__card-header"> <h2 class="dashboard__card-title">${data.title}</h2> <div class="dashboard__card-balance">${data.balance}</div> </div> <div class="dashboard__card-details"> ${data.details.map(detail => ` <div class="dashboard__card-detail"> ${detail.label}: <span class="dashboard__card-value">${detail.value}</span> </div> `).join('')} </div> </div> <div class="dashboard__card" style="animation-delay: 0.2s"> <div class="dashboard__card-header"> <h2 class="dashboard__card-title">Recent Activity</h2> </div> <div class="dashboard__transactions"> ${data.transactions.map(transaction => ` <div class="dashboard__transaction"> <div class="dashboard__transaction-icon selector__option-icon--${transaction.type === 'positive' ? 'savings' : 'credit'}"> <i>${transaction.icon}</i> </div> <div class="dashboard__transaction-content"> <div class="dashboard__transaction-title">${transaction.title}</div> <div class="dashboard__transaction-date">${transaction.date}</div> </div> <div class="dashboard__transaction-amount dashboard__transaction-amount--${transaction.type}"> ${transaction.amount} </div> </div> `).join('')} </div> </div> `; accountContent.innerHTML = html; } function displayTransactionContent(transactionType) { accountContent.style.display = 'none'; transactionContent.style.display = 'block'; // Transaction-specific content const transactionData = { recent: { title: 'Recent Transactions', description: 'Your most recent transactions across all accounts', transactions: [ { title: 'Amazon.com', date: 'Today at 11:35 AM', amount: '-$42.99', icon: '🛒', account: 'Primary Checking', type: 'negative' }, { title: 'Starbucks', date: 'Yesterday at 9:15 AM', amount: '-$5.45', icon: '☕', account: 'Primary Checking', type: 'negative' }, { title: 'Whole Foods Market', date: 'Jul 14 at 6:22 PM', amount: '-$86.24', icon: '🥑', account: 'Platinum Rewards Credit Card', type: 'negative' }, { title: 'Direct Deposit - Acme Inc', date: 'Jul 15 at 12:01 AM', amount: '+$2,750.00', icon: '💵', account: 'Primary Checking', type: 'positive' }, { title: 'Shell Gas Station', date: 'Jul 12 at 5:45 PM', amount: '-$45.77', icon: '⛽', account: 'Platinum Rewards Credit Card', type: 'negative' }, { title: 'Transfer to Savings', date: 'Jul 10 at 10:00 AM', amount: '-$500.00', icon: '↔️', account: 'Primary Checking', type: 'negative' } ] }, pending: { title: 'Pending Transactions', description: '
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WanderWise Travel Booking</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Pacifico&display=swap'); :root { --primary: #ff7e5f; --primary-light: #ffaf7b; --secondary: #0396a6; --secondary-light: #04c4d9; --dark: #2d3047; --light: #f9f7f3; --accent: #ffd166; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, var(--light), #e6e9ef); height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; color: var(--dark); } .container { width: 100%; max-width: 650px; padding: 20px; margin: 0 auto; } .travel-planner { background: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(45, 48, 71, 0.1); overflow: hidden; transform-style: preserve-3d; perspective: 1000px; position: relative; } .travel-header { background: linear-gradient(to right, var(--primary), var(--primary-light)); padding: 25px 30px 30px; border-radius: 20px 20px 0 0; position: relative; overflow: hidden; } .travel-header::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.5; } .title { font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 5px; position: relative; } .subtitle { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.9); margin-bottom: 15px; position: relative; } .travel-body { padding: 30px; } .travel-form { display: flex; flex-direction: column; gap: 25px; } .form-group { position: relative; } .form-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.95rem; color: var(--dark); display: flex; align-items: center; } .form-label i { margin-right: 8px; color: var(--primary); font-size: 1.2rem; } .custom-select { position: relative; width: 100%; } .select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 12px; background-color: #f5f5f7; border: 2px solid transparent; cursor: pointer; font-size: 1rem; color: var(--dark); transition: all 0.3s ease; } .select-trigger:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 126, 95, 0.15); } .select-trigger.active { border-color: var(--primary); background-color: rgba(255, 126, 95, 0.05); } .select-trigger i { color: var(--primary); font-size: 0.9rem; transition: transform 0.3s ease; } .select-trigger.active i { transform: rotate(180deg); } .options-list { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-height: 0; overflow-y: auto; opacity: 0; z-index: 10; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); transform: translateY(-10px); pointer-events: none; } .options-list.show { max-height: 250px; opacity: 1; transform: translateY(0); pointer-events: auto; } .option { padding: 14px 18px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; } .option:hover { background-color: #f5f5f7; color: var(--primary); } .option.selected { background-color: rgba(255, 126, 95, 0.1); color: var(--primary); font-weight: 500; } .option-icon { margin-right: 10px; font-size: 1.1rem; color: var(--primary); width: 20px; text-align: center; } .date-picker-container { display: flex; gap: 15px; } .date-picker { flex: 1; position: relative; } .date-input { width: 100%; padding: 14px 18px; border-radius: 12px; background-color: #f5f5f7; border: 2px solid transparent; font-size: 1rem; color: var(--dark); font-family: inherit; cursor: pointer; transition: all 0.3s ease; } .date-input:focus, .date-input:hover { border-color: var(--primary-light); outline: none; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 126, 95, 0.15); } .preferences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; } .preference-option { background-color: #f5f5f7; border: 2px solid transparent; border-radius: 12px; padding: 12px; cursor: pointer; text-align: center; transition: all 0.3s ease; } .preference-option:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(255, 126, 95, 0.15); } .preference-option.selected { background-color: rgba(255, 126, 95, 0.1); border-color: var(--primary); } .preference-icon { font-size: 1.5rem; color: var(--primary); margin-bottom: 8px; display: block; } .preference-text { font-size: 0.85rem; font-weight: 500; } .search-btn { background: linear-gradient(to right, var(--secondary), var(--secondary-light)); color: white; border: none; border-radius: 12px; padding: 16px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(3, 150, 166, 0.2); font-family: inherit; position: relative; overflow: hidden; } .search-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .search-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(3, 150, 166, 0.3); } .search-btn:hover::before { left: 100%; } .floating-icons { position: absolute; top: 0; right: 30px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 15px; opacity: 0.6; } .floating-icon { font-size: 1.8rem; color: rgba(255, 255, 255, 0.75); animation: float 6s infinite ease-in-out; } .floating-icon:nth-child(1) { animation-delay: 0s; } .floating-icon:nth-child(2) { animation-delay: 1s; } .floating-icon:nth-child(3) { animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .scroll-indicator { width: 100%; height: 3px; background-color: rgba(0, 0, 0, 0.05); border-radius: 3px; position: relative; overflow: hidden; margin-top: 5px; } .scroll-indicator::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 30%; background-color: var(--primary); border-radius: 3px; animation: scrollIndicate 2s infinite; } @keyframes scrollIndicate { 0% { left: -30%; } 100% { left: 100%; } } .travel-footer { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background-color: rgba(245, 245, 247, 0.5); border-top: 1px solid rgba(0, 0, 0, 0.05); } .popular-tag { display: inline-block; background-color: var(--accent); color: var(--dark); font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; margin-right: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .popular-tag:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255, 209, 102, 0.3); } .tag-container { white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 5px; } .tag-container::-webkit-scrollbar { display: none; } .settings-icon { color: var(--dark); font-size: 1.2rem; cursor: pointer; opacity: 0.7; transition: all 0.3s ease; } .settings-icon:hover { color: var(--primary); opacity: 1; transform: rotate(45deg); } /* Responsive Styles */ @media (max-width: 600px) { .title { font-size: 1.8rem; } .subtitle { font-size: 0.9rem; } .date-picker-container { flex-direction: column; gap: 10px; } .preferences-grid { grid-template-columns: repeat(2, 1fr); } .travel-body { padding: 20px; } .floating-icons { display: none; } } /* Animations */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 126, 95, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 126, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 126, 95, 0); } } .pulse { animation: pulse 2s infinite; } /* Specific styles for date inputs */ input[type="date"]::-webkit-calendar-picker-indicator { color: var(--primary); cursor: pointer; } /* Toast notification */ .toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; padding: 12px 25px; border-radius: 50px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 1000; opacity: 0; transition: all 0.5s ease; } .toast.show { bottom: 30px; opacity: 1; } </style> </head> <body> <div class="container"> <div class="travel-planner"> <div class="travel-header"> <h1 class="title">WanderWise</h1> <p class="subtitle">Where will your next adventure take you?</p> <div class="floating-icons"> <i class="floating-icon">✈️</i> <i class="floating-icon">🏝️</i> <i class="floating-icon">🏔️</i> </div> </div> <div class="travel-body"> <form class="travel-form"> <div class="form-group"> <label class="form-label"><i class="form-icon">🌎</i> Destination</label> <div class="custom-select" id="destination-select"> <div class="select-trigger"> <span>Choose your destination</span> <i>▼</i> </div> <div class="options-list"> <div class="option" data-value="bali"> <span class="option-icon">🏝️</span> <span>Bali - Island Paradise</span> </div> <div class="option" data-value="kyoto"> <span class="option-icon">🏯</span> <span>Kyoto - Ancient Traditions</span> </div> <div class="option" data-value="santorini"> <span class="option-icon">🏙️</span> <span>Santorini - Mediterranean Blue</span> </div> <div class="option" data-value="swiss-alps"> <span class="option-icon">🏔️</span> <span>Swiss Alps - Snow Adventures</span> </div> <div class="option" data-value="mexico"> <span class="option-icon">🌮</span> <span>Mexico City - Cultural Feast</span> </div> <div class="option" data-value="new-zealand"> <span class="option-icon">🥝</span> <span>New Zealand - Natural Wonders</span> </div> <div class="option" data-value="iceland"> <span class="option-icon">❄️</span> <span>Iceland - Land of Fire & Ice</span> </div> <div class="option" data-value="egypt"> <span class="option-icon">🏛️</span> <span>Egypt - Ancient Mysteries</span> </div> </div> <div class="scroll-indicator"></div> </div> </div> <div class="form-group"> <label class="form-label"><i class="form-icon">📅</i> Travel Dates</label> <div class="date-picker-container"> <div class="date-picker"> <input type="date" class="date-input" id="departure-date" placeholder="Departure"> </div> <div class="date-picker"> <input type="date" class="date-input" id="return-date" placeholder="Return"> </div> </div> </div> <div class="form-group"> <label class="form-label"><i class="form-icon">🧳</i> Adventure Style</label> <div class="custom-select" id="style-select"> <div class="select-trigger"> <span>What type of journey?</span> <i>▼</i> </div> <div class="options-list"> <div class="option" data-value="backpacking"> <span class="option-icon">🎒</span> <span>Backpacking - Freedom Seeker</span> </div> <div class="option" data-value="luxury"> <span class="option-icon">✨</span> <span>Luxury - Premium Experiences</span> </div> <div class="option" data-value="road-trip"> <span class="option-icon">🚗</span> <span>Road Trip - Open Highway</span> </div> <div class="option" data-value="cultural"> <span class="option-icon">🏛️</span> <span>Cultural Immersion - Local Living</span> </div> <div class="option" data-value="outdoors"> <span class="option-icon">⛺</span> <span>Outdoor Adventure - Wild Calling</span> </div> </div> </div> </div> <div class="form-group"> <label class="form-label"><i class="form-icon">⭐</i> Travel Preferences</label> <div class="preferences-grid"> <div class="preference-option" data-pref="food"> <span class="preference-icon">🍽️</span> <span class="preference-text">Local Cuisine</span> </div> <div class="preference-option" data-pref="museum"> <span class="preference-icon">🖼️</span> <span class="preference-text">Museums</span> </div> <div class="preference-option" data-pref="nature"> <span class="preference-icon">🌿</span> <span class="preference-text">Nature</span> </div> <div class="preference-option" data-pref="nightlife"> <span class="preference-icon">🍻</span> <span class="preference-text">Nightlife</span> </div> <div class="preference-option" data-pref="shopping"> <span class="preference-icon">🛍️</span> <span class="preference-text">Shopping</span> </div> <div class="preference-option" data-pref="adventure"> <span class="preference-icon">🧗♀️</span> <span class="preference-text">Thrills</span> </div> </div> </div> <button type="button" class="search-btn" id="search-btn">Discover Your Journey</button> </form> </div> <div class="travel-footer"> <div class="tag-container"> <span class="popular-tag">#IslandHopping</span> <span class="popular-tag">#RoadTrip2023</span> <span class="popular-tag">#SoloTravel</span> <span class="popular-tag">#FoodieDestinations</span> <span class="popular-tag">#AdventureSeeker</span> </div> <div class="settings-icon">⚙️</div> </div> </div> </div> <div class="toast" id="toast-notification">Your adventure is being planned!</div> <script> document.addEventListener('DOMContentLoaded', function() { // Custom Select Functionality const selectContainers = document.querySelectorAll('.custom-select'); selectContainers.forEach(container => { const trigger = container.querySelector('.select-trigger'); const options = container.querySelector('.options-list'); const optionItems = container.querySelectorAll('.option'); const triggerText = trigger.querySelector('span'); // Toggle options visibility trigger.addEventListener('click', (e) => { e.stopPropagation(); // Close all other open selects selectContainers.forEach(other => { if (other !== container) { other.querySelector('.select-trigger').classList.remove('active'); other.querySelector('.options-list').classList.remove('show'); } }); trigger.classList.toggle('active'); options.classList.toggle('show'); }); // Handle option selection optionItems.forEach(option => { option.addEventListener('click', () => { // Remove selected class from all options optionItems.forEach(opt => opt.classList.remove('selected')); // Add selected class to clicked option option.classList.add('selected'); // Update trigger text and close dropdown triggerText.textContent = option.textContent.trim(); trigger.classList.remove('active'); options.classList.remove('show'); // Add pulsing effect to trigger trigger.classList.add('pulse'); setTimeout(() => { trigger.classList.remove('pulse'); }, 2000); }); }); // Auto-scroll functionality for extensive lists options.addEventListener('scroll', () => { const scrollPosition = options.scrollTop; const maxScroll = options.scrollHeight - options.clientHeight; const scrollIndicator = container.querySelector('.scroll-indicator::after'); if (scrollIndicator) { const scrollPercentage = (scrollPosition / maxScroll) * 100; scrollIndicator.style.width = `${scrollPercentage}%`; } }); }); // Close dropdown when clicking outside document.addEventListener('click', (e) => { selectContainers.forEach(container => { const trigger = container.querySelector('.select-trigger'); const options = container.querySelector('.options-list'); if (!container.contains(e.target)) { trigger.classList.remove('active'); options.classList.remove('show'); } }); }); // Travel Preferences Selection const preferenceOptions = document.querySelectorAll('.preference-option'); preferenceOptions.forEach(option => { option.addEventListener('click', () => { option.classList.toggle('selected'); }); }); // Set min date for date inputs to today const today = new Date().toISOString().split('T')[0]; const departureDate = document.getElementById('departure-date'); const returnDate = document.getElementById('return-date'); departureDate.setAttribute('min', today); // Set return date min based on departure date departureDate.addEventListener('change', () => { if (departureDate.value) { returnDate.setAttribute('min', departureDate.value); // If return date is before departure date, reset it if (returnDate.value && returnDate.value < departureDate.value) { returnDate.value = ''; } } }); // Search Button Animation & Functionality const searchBtn = document.getElementById('search-btn'); const toast = document.getElementById('toast-notification'); searchBtn.addEventListener('click', () => { // Validate form (simple validation for demo) const destination = document.querySelector('#destination-select .select-trigger span').textContent; if (destination === 'Choose your destination') { toast.textContent = "Please select a destination!"; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); return; } if (!departureDate.value) { toast.textContent = "Please select a departure date!"; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); return; } // Show success toast toast.textContent = `Planning your adventure to ${destination}!`; toast.classList.add('show'); // Add success animation to button searchBtn.textContent = "Adventure Awaits!"; searchBtn.style.background = "linear-gradient(to right, #4CAF50, #8BC34A)"; setTimeout(() => { toast.classList.remove('show'); // Reset button after delay setTimeout(() => { searchBtn.textContent = "Discover Your Journey"; searchBtn.style.background = ""; }, 2000); }, 3000); }); // Popular Tags Scrolling const tagContainer = document.querySelector('.tag-container'); const tags = document.querySelectorAll('.popular-tag'); tags.forEach(tag => { tag.addEventListener('click', () => { // Set relevant search parameters based on tag const tagText = tag.textContent.toLowerCase(); if (tagText.includes('island')) { document.querySelector('#destination-select .option[data-value="bali"]').click(); } else if (tagText.includes('roadtrip')) { document.querySelector('#style-select .option[data-value="road-trip"]').click(); } else if (tagText.includes('foodie')) { document.querySelector('.preference-option[data-pref="food"]').classList.add('selected'); } else if (tagText.includes('adventure')) { document.querySelector('.preference-option[data-pref="adventure"]').classList.add('selected'); } // Show toast notification toast.textContent = `${tag.textContent} adventures loaded!`; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }); }); // Auto scroll animation for tags let scrollPosition = 0; const scrollSpeed = 0.5; const containerWidth = tagContainer.scrollWidth - tagContainer.clientWidth; function autoScroll() { if (!tagContainer.matches(':hover')) { scrollPosition += scrollSpeed; if (scrollPosition >= containerWidth) { scrollPosition = 0; } tagContainer.scrollLeft = scrollPosition; } requestAnimationFrame(autoScroll); } if (containerWidth > 0) { autoScroll(); } // Settings icon functionality const settingsIcon = document.querySelector('.settings-icon'); settingsIcon.addEventListener('click', () => { toast.textContent = "Settings menu coming soon!"; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enterprise Resource Planning Navigation</title> <style> :root { --base-dark: #1a1f36; --base-dark-lighter: #2a304f; --accent-primary: #4a6cf7; --accent-secondary: #00d2c7; --accent-tertiary: #f77754; --text-primary: #ffffff; --text-secondary: #bbc3e9; --text-muted: #8b92b2; --border-light: #3a4163; --shadow-color: rgba(0, 0, 0, 0.5); --success-color: #2ed47a; --warning-color: #ffb92a; --danger-color: #f25767; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--base-dark); color: var(--text-primary); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; padding: 20px; } .erp-container { width: 100%; max-width: 650px; background-color: var(--base-dark-lighter); border-radius: 12px; box-shadow: 0 8px 30px var(--shadow-color); overflow: hidden; position: relative; } .erp-header { padding: 20px; background: linear-gradient(135deg, var(--base-dark-lighter), var(--base-dark)); border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; } .erp-header h2 { font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; } .user-profile { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--accent-primary); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; } .user-info { display: flex; flex-direction: column; } .user-name { font-size: 14px; font-weight: 500; } .user-role { font-size: 12px; color: var(--text-muted); } .keyboard-shortcut { background-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); padding: 2px 6px; border-radius: 4px; font-size: 12px; margin-left: 8px; font-family: monospace; } .navigation-wrapper { display: flex; height: 500px; } .sidebar { width: 220px; background-color: var(--base-dark-lighter); border-right: 1px solid var(--border-light); padding: 15px 0; overflow-y: auto; } .sidebar-item { padding: 12px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; transition: background-color 0.2s ease; } .sidebar-item:hover { background-color: rgba(255, 255, 255, 0.05); } .sidebar-item.active { background-color: rgba(74, 108, 247, 0.15); border-left: 3px solid var(--accent-primary); } .sidebar-item.active .sidebar-icon { color: var(--accent-primary); } .sidebar-icon { color: var(--text-secondary); width: 18px; text-align: center; transition: color 0.2s ease; } .sidebar-text { font-size: 14px; font-weight: 500; } .sidebar-badge { position: absolute; right: 20px; background-color: var(--accent-tertiary); color: var(--text-primary); font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 10px; } .sidebar-divider { height: 1px; background-color: var(--border-light); margin: 10px 0; opacity: 0.5; } .sidebar-header { padding: 5px 20px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; } .content-area { flex: 1; overflow-y: auto; padding: 20px; background-color: var(--base-dark); } .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .module-card { background-color: var(--base-dark-lighter); border-radius: 8px; padding: 16px; cursor: pointer; transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--border-light); position: relative; overflow: hidden; } .module-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); border-color: var(--accent-primary); } .module-card:hover .module-icon { color: var(--accent-primary); transform: scale(1.1); } .module-header { display: flex; align-items: center; margin-bottom: 12px; gap: 10px; } .module-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: rgba(74, 108, 247, 0.15); color: var(--accent-primary); transition: all 0.3s ease; } .module-title { font-size: 15px; font-weight: 600; } .module-description { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin-bottom: 12px; } .module-meta { display: flex; font-size: 12px; color: var(--text-muted); } .module-meta-item { display: flex; align-items: center; margin-right: 12px; } .module-meta-icon { margin-right: 4px; font-size: 11px; } .status-indicator { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; } .status-live { background-color: var(--success-color); box-shadow: 0 0 8px var(--success-color); } .status-maintenance { background-color: var(--warning-color); box-shadow: 0 0 8px var(--warning-color); } .status-offline { background-color: var(--danger-color); box-shadow: 0 0 8px var(--danger-color); } .section-title { font-size: 16px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .view-all { font-size: 13px; color: var(--accent-primary); cursor: pointer; display: flex; align-items: center; } .recent-section { margin-top: 25px; } .recent-items { background-color: var(--base-dark-lighter); border-radius: 8px; overflow: hidden; } .recent-item { padding: 12px 16px; display: flex; align-items: center; border-bottom: 1px solid var(--border-light); transition: background-color 0.2s ease; cursor: pointer; } .recent-item:last-child { border-bottom: none; } .recent-item:hover { background-color: rgba(255, 255, 255, 0.05); } .recent-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .icon-invoice { background-color: rgba(255, 185, 42, 0.15); color: var(--warning-color); } .icon-project { background-color: rgba(46, 212, 122, 0.15); color: var(--success-color); } .icon-purchase { background-color: rgba(242, 87, 103, 0.15); color: var(--danger-color); } .recent-details { flex: 1; } .recent-title { font-size: 14px; font-weight: 500; margin-bottom: 3px; } .recent-subtitle { font-size: 12px; color: var(--text-muted); } .recent-time { font-size: 12px; color: var(--text-muted); margin-left: 10px; } .dropdown-menu { position: absolute; top: 100%; left: 0; background-color: var(--base-dark-lighter); border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); width: 280px; z-index: 100; transform-origin: top center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s cubic-bezier(0.5, 0, 0.15, 1.35); max-height: 400px; overflow-y: auto; border: 1px solid var(--border-light); } .dropdown-item { padding: 12px 16px; display: flex; align-items: center; cursor: pointer; transition: background-color 0.2s ease; position: relative; } .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.05); } .dropdown-item:hover .dropdown-icon { color: var(--accent-primary); transform: scale(1.1); } .dropdown-icon { width: 20px; height: 20px; margin-right: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s ease; } .dropdown-content { flex: 1; } .dropdown-label { font-size: 14px; font-weight: 500; margin-bottom: 2px; } .dropdown-description { font-size: 12px; color: var(--text-muted); } .dropdown-shortcut { font-size: 11px; color: var(--text-muted); background-color: rgba(255, 255, 255, 0.05); padding: 2px 5px; border-radius: 4px; margin-left: 8px; } .dropdown-divider { height: 1px; background-color: var(--border-light); margin: 5px 0; } .dropdown-header { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; } .dropdown-active { opacity: 1; visibility: visible; transform: translateY(0); } .tooltip { position: absolute; background-color: var(--base-dark); color: var(--text-primary); padding: 6px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); z-index: 1000; opacity: 0; transition: opacity 0.2s ease; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; position: relative; } .pulse-dot::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; animation: pulse 1.5s infinite; } .pulse-dot.green { background-color: var(--success-color); } .pulse-dot.green::after { background-color: var(--success-color); } .pulse-dot.orange { background-color: var(--warning-color); } .pulse-dot.orange::after { background-color: var(--warning-color); } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } .grid-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 0; } .glow-effect { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--accent-primary) 0%, rgba(74, 108, 247, 0) 70%); opacity: 0.1; filter: blur(20px); pointer-events: none; z-index: 0; transition: all 0.5s ease; } .highlight { position: absolute; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; z-index: 10; pointer-events: none; transition: all 0.3s ease; opacity: 0; } .help-button { position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background-color: var(--accent-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3); transition: all 0.3s ease; z-index: 100; } .help-button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(74, 108, 247, 0.4); } .help-button i { color: white; font-size: 18px; } @media screen and (max-width: 600px) { .navigation-wrapper { flex-direction: column; height: auto; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-light); padding: 10px 0; max-height: 150px; } .module-grid { grid-template-columns: 1fr; } .erp-header { padding: 15px; } .erp-header h2 { font-size: 18px; } .content-area { padding: 15px; } .dropdown-menu { width: 100%; left: 0; } } .focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; position: relative; z-index: 1; } </style> </head> <body> <div class="erp-container"> <div class="grid-pattern"></div> <div class="glow-effect"></div> <div class="erp-header"> <h2>NexusERP <span class="keyboard-shortcut">⌘+K</span></h2> <div class="user-profile"> <div class="user-info"> <span class="user-name">Sophia Chen</span> <span class="user-role">Operations Director</span> </div> <div class="user-avatar">SC</div> </div> </div> <div class="navigation-wrapper"> <div class="sidebar"> <div class="sidebar-item active" tabindex="0" data-shortcut="Alt+1"> <div class="sidebar-icon"> <i class="fas fa-th-large"></i> </div> <div class="sidebar-text">Dashboard</div> </div> <div class="sidebar-item" tabindex="0" data-module="finance" data-shortcut="Alt+2"> <div class="sidebar-icon"> <i class="fas fa-chart-pie"></i> </div> <div class="sidebar-text">Finance</div> <div class="sidebar-badge">4</div> </div> <div class="sidebar-item" tabindex="0" data-module="operations" data-shortcut="Alt+3"> <div class="sidebar-icon"> <i class="fas fa-cogs"></i> </div> <div class="sidebar-text">Operations</div> </div> <div class="sidebar-item" tabindex="0" data-module="inventory" data-shortcut="Alt+4"> <div class="sidebar-icon"> <i class="fas fa-boxes"></i> </div> <div class="sidebar-text">Inventory</div> </div> <div class="sidebar-item" tabindex="0" data-module="hrm" data-shortcut="Alt+5"> <div class="sidebar-icon"> <i class="fas fa-users"></i> </div> <div class="sidebar-text">HR Management</div> </div> <div class="sidebar-divider"></div> <div class="sidebar-header">Analytics</div> <div class="sidebar-item" tabindex="0" data-module="reports" data-shortcut="Alt+6"> <div class="sidebar-icon"> <i class="fas fa-chart-line"></i> </div> <div class="sidebar-text">Reports</div> </div> <div class="sidebar-item" tabindex="0" data-module="analytics" data-shortcut="Alt+7"> <div class="sidebar-icon"> <i class="fas fa-analytics"></i> </div> <div class="sidebar-text">Analytics</div> </div> <div class="sidebar-divider"></div> <div class="sidebar-header">System</div> <div class="sidebar-item" tabindex="0" data-module="settings" data-shortcut="Alt+8"> <div class="sidebar-icon"> <i class="fas fa-cog"></i> </div> <div class="sidebar-text">Settings</div> </div> <div class="sidebar-item" tabindex="0" data-module="integrations" data-shortcut="Alt+9"> <div class="sidebar-icon"> <i class="fas fa-plug"></i> </div> <div class="sidebar-text">Integrations</div> </div> </div> <div class="content-area"> <div class="section-title"> <span>Core Modules</span> <span class="view-all">View All <i class="fas fa-chevron-right" style="margin-left: 5px; font-size: 10px;"></i></span> </div> <div class="module-grid"> <div class="module-card" tabindex="0" data-module="finance"> <div class="module-header"> <div class="module-icon"> <i class="fas fa-dollar-sign"></i> </div> <div class="module-title">Financial Management</div> </div> <div class="module-description">Manage AR/AP, GL, bank reconciliation, and financial reporting with real-time analytics.</div> <div class="module-meta"> <div class="module-meta-item"> <div class="module-meta-icon"> <i class="fas fa-clock"></i> </div> <span>Updated 2h ago</span> </div> </div> <div class="status-indicator status-live"></div> </div> <div class="module-card" tabindex="0" data-module="inventory"> <div class="module-header"> <div class="module-icon"> <i class="fas fa-warehouse"></i> </div> <div class="module-title">Inventory Control</div> </div> <div class="module-description">Track stock levels, lot traceability, and multi-location inventory with barcode scanning.</div> <div class="module-meta"> <div class="module-meta-item"> <div class="module-meta-icon"> <i class="fas fa-clock"></i> </div> <span>Updated 4h ago</span> </div> </div> <div class="status-indicator status-live"></div> </div> <div class="module-card" tabindex="0" data-module="hrm"> <div class="module-header"> <div class="module-icon"> <i class="fas fa-user-tie"></i> </div> <div class="module-title">Human Resources</div> </div> <div class="module-description">Streamline recruitment, performance reviews, and benefits administration workflows.</div> <div class="module-meta"> <div class="module-meta-item"> <div class="module-meta-icon"> <i class="fas fa-clock"></i> </div> <span>Updated yesterday</span> </div> </div> <div class="status-indicator status-maintenance"></div> </div> <div class="module-card" tabindex="0" data-module="manufacturing"> <div class="module-header"> <div class="module-icon"> <i class="fas fa-industry"></i> </div> <div class="module-title">Manufacturing</div> </div> <div class="module-description">Bill of materials, production orders, capacity planning, and shop floor scheduling.</div> <div class="module-meta"> <div class="module-meta-item"> <div class="module-meta-icon"> <i class="fas fa-clock"></i> </div> <span>Updated 3d ago</span> </div> </div> <div class="status-indicator status-live"></div> </div> </div> <div class="recent-section"> <div class="section-title"> <span>Recent Activities</span> <span class="view-all">View All <i class="fas fa-chevron-right" style="margin-left: 5px; font-size: 10px;"></i></span> </div> <div class="recent-items"> <div class="recent-item" tabindex="0"> <div class="recent-icon icon-invoice"> <i class="fas fa-file-invoice-dollar"></i> </div> <div class="recent-details"> <div class="recent-title">Invoice #INV-2023-0458 Created</div> <div class="recent-subtitle">Acme Corporation - $24,750.00</div> </div> <div class="recent-time">10:23 AM</div> </div> <div class="recent-item" tabindex="0"> <div class="recent-icon icon-project"> <i class="fas fa-project-diagram"></i> </div> <div class="recent-details"> <div class="recent-title">Production Plan Updated</div> <div class="recent-subtitle">Q3 Production Schedule - Line B</div> </div> <div class="recent-time">Yesterday</div> </div> <div class="recent-item" tabindex="0"> <div class="recent-icon icon-purchase"> <i class="fas fa-shopping-cart"></i> </div> <div class="recent-details"> <div class="recent-title">Purchase Order Approved</div> <div class="recent-subtitle">PO-2023-157 - RawMaterials Inc.</div> </div> <div class="recent-time">Yesterday</div> </div> </div> </div> </div> </div> <!-- Finance Dropdown Menu --> <div class="dropdown-menu" id="finance-dropdown"> <div class="dropdown-header">Accounting</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-book"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">General Ledger</div> <div class="dropdown-description">Chart of accounts, journals, and ledger entries</div> </div> <span class="dropdown-shortcut">Alt+F1</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-file-invoice-dollar"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Accounts Receivable</div> <div class="dropdown-description">Customer invoicing and payment collection</div> </div> <span class="dropdown-shortcut">Alt+F2</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-hand-holding-usd"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Accounts Payable</div> <div class="dropdown-description">Vendor bills and payment processing</div> </div> <span class="dropdown-shortcut">Alt+F3</span> </div> <div class="dropdown-divider"></div> <div class="dropdown-header">Financial Analysis</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-chart-line"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Financial Reporting</div> <div class="dropdown-description">P&L, balance sheet, and cash flow statements</div> </div> <span class="dropdown-shortcut">Alt+F4</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-calculator"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Budgeting & Forecasting</div> <div class="dropdown-description">Financial planning and scenario modeling</div> </div> <span class="dropdown-shortcut">Alt+F5</span> </div> <div class="dropdown-divider"></div> <div class="dropdown-header">Banking</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-university"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Bank Reconciliation</div> <div class="dropdown-description">Match bank statements with system records</div> </div> <span class="dropdown-shortcut">Alt+F6</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-exchange-alt"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Payment Processing</div> <div class="dropdown-description">Electronic transfers and check processing</div> </div> <span class="dropdown-shortcut">Alt+F7</span> </div> </div> <!-- Operations Dropdown Menu --> <div class="dropdown-menu" id="operations-dropdown"> <div class="dropdown-header">Supply Chain</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-truck"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Order Management</div> <div class="dropdown-description">Sales orders, fulfillment, and shipping</div> </div> <span class="dropdown-shortcut">Alt+O1</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-shopping-cart"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Procurement</div> <div class="dropdown-description">Purchase orders and vendor management</div> </div> <span class="dropdown-shortcut">Alt+O2</span> </div> <div class="dropdown-divider"></div> <div class="dropdown-header">Logistics</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-dolly"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Warehouse Management</div> <div class="dropdown-description">Storage optimization and pick/pack processes</div> </div> <span class="dropdown-shortcut">Alt+O3</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-shipping-fast"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Distribution</div> <div class="dropdown-description">Route planning and delivery management</div> </div> <span class="dropdown-shortcut">Alt+O4</span> </div> </div> <!-- Inventory Dropdown Menu --> <div class="dropdown-menu" id="inventory-dropdown"> <div class="dropdown-header">Stock Management</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-boxes"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Inventory Items</div> <div class="dropdown-description">Product catalog and stock management</div> </div> <span class="dropdown-shortcut">Alt+I1</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-barcode"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Barcode Operations</div> <div class="dropdown-description">Scanning and label printing for inventory</div> </div> <span class="dropdown-shortcut">Alt+I2</span> </div> <div class="dropdown-divider"></div> <div class="dropdown-header">Inventory Tracking</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-warehouse"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Multi-Location Management</div> <div class="dropdown-description">Track inventory across various facilities</div> </div> <span class="dropdown-shortcut">Alt+I3</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-dolly-flatbed"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Stock Transfers</div> <div class="dropdown-description">Move inventory between locations</div> </div> <span class="dropdown-shortcut">Alt+I4</span> </div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-clipboard-check"></i> </div> <div class="dropdown-content"> <div class="dropdown-label">Physical Counts</div> <div class="dropdown-description">Inventory audits and reconciliation</div> </div> <span class="dropdown-shortcut">Alt+I5</span> </div> </div> <!-- HRM Dropdown Menu --> <div class="dropdown-menu" id="hrm-dropdown"> <div class="dropdown-header">Personnel Management</div> <div class="dropdown-item" tabindex="0"> <div class="dropdown-icon"> <i class="fas fa-id-card"></i> </div> <div class="dropdown-content
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Dashboard Settings</title> <style> :root { --primary: #5E60CE; --secondary: #6930C3; --accent: #5390D9; --bright: #48BFE3; --light: #64DFDF; --danger: #FF5C8D; --success: #56CFE1; --dark: #2C2F3F; --text: #F8F7FF; --text-secondary: #B8C1EC; --box-shadow: 0 10px 30px rgba(46, 54, 68, 0.1); --toggle-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); --menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background: linear-gradient(135deg, var(--dark), #1A1B26); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 700px; overflow: hidden; padding: 20px; } .dashboard { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); width: 100%; max-width: 650px; border-radius: 24px; padding: 32px; box-shadow: var(--card-shadow); overflow: hidden; position: relative; } .dashboard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--bright), var(--light)); z-index: 1; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .dashboard-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; background: linear-gradient(to right, var(--text), var(--text-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .active-user { display: flex; align-items: center; gap: 10px; position: relative; } .user-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(45deg, var(--primary), var(--secondary)); display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 16px; box-shadow: var(--toggle-shadow); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .user-avatar:hover { transform: scale(1.05); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); } .notification-badge { position: absolute; background: var(--danger); width: 14px; height: 14px; border-radius: 50%; top: 0; right: 0; border: 2px solid var(--dark); transform: translate(25%, -25%); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 141, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(255, 92, 141, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 92, 141, 0); } } .tab-container { display: flex; margin-bottom: 24px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 4px; } .tab { flex: 1; padding: 12px 10px; text-align: center; cursor: pointer; border-radius: 10px; font-weight: 500; transition: all 0.3s ease; font-size: 15px; color: var(--text-secondary); position: relative; overflow: hidden; } .tab.active { background: rgba(94, 96, 206, 0.15); color: var(--text); font-weight: 600; } .tab.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--primary); border-radius: 3px 3px 0 0; animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .tab:hover:not(.active) { background: rgba(255, 255, 255, 0.05); } .content-container { height: 400px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; } .content-container::-webkit-scrollbar { width: 6px; } .content-container::-webkit-scrollbar-track { background: transparent; } .content-container::-webkit-scrollbar-thumb { background-color: var(--secondary); border-radius: 20px; } .content { display: none; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .content.active { display: block; } .setting-item { margin-bottom: 16px; padding: 18px; background: rgba(255, 255, 255, 0.04); border-radius: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; } .setting-item:hover { background: rgba(255, 255, 255, 0.07); box-shadow: var(--box-shadow); transform: translateY(-2px); } .setting-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .setting-title { font-weight: 600; font-size: 16px; color: var(--text); } .toggle { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.1); transition: 0.4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--primary); } input:checked + .toggle-slider:before { transform: translateX(24px); } .setting-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin-bottom: 10px; } .platform-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .platform { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.07); border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.2s ease; } .platform i { font-size: 16px; } .platform.twitter { color: #1DA1F2; } .platform.instagram { color: #E1306C; } .platform.linkedin { color: #0077B5; } .platform.tiktok { color: #69C9D0; } .platform:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .dropdown { position: relative; width: 100%; margin-top: 12px; } .dropdown-select { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .dropdown-select:hover { background: rgba(255, 255, 255, 0.1); } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background: var(--dark); border-radius: 10px; box-shadow: var(--menu-shadow); z-index: 10; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { padding: 12px 16px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px; } .dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } .dropdown-item.selected { background: rgba(94, 96, 206, 0.2); color: var(--light); font-weight: 500; } .dropdown-item i { font-size: 16px; color: var(--accent); } .dropdown-chevron { transition: transform 0.3s ease; } .dropdown.open .dropdown-chevron { transform: rotate(180deg); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(94, 96, 206, 0.15); border-radius: 20px; font-size: 12px; margin-right: 6px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s ease; } .chip:hover { background: rgba(94, 96, 206, 0.25); } .chip i { font-size: 12px; } .chip-list { display: flex; flex-wrap: wrap; margin-top: 12px; } .divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 14px 0; } .save-button { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; border: none; padding: 12px 24px; font-weight: 600; font-size: 16px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 20px; box-shadow: 0 5px 15px rgba(94, 96, 206, 0.4); } .save-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(94, 96, 206, 0.5); } .save-button:active { transform: translateY(0); } .success-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--success); padding: 14px 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 10px; font-weight: 500; opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 100; } .success-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .success-toast i { font-size: 18px; } /* Interactive Pattern */ .pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.06; z-index: -1; background-image: radial-gradient(circle at 25px 25px, var(--light) 2%, transparent 0%); background-size: 50px 50px; pointer-events: none; } .frequency-slider { width: 100%; margin-top: 16px; accent-color: var(--primary); height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; outline: none; transition: all 0.2s ease; } .frequency-slider::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--light); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } .frequency-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .slider-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-top: 8px; } @media (max-width: 580px) { .dashboard { padding: 24px 20px; } .dashboard-title { font-size: 24px; } .tab { font-size: 13px; padding: 10px 8px; } .setting-item { padding: 16px; } .content-container { height: 380px; } } @media (max-width: 460px) { .dashboard-title { font-size: 20px; } .tab { font-size: 12px; padding: 8px 5px; } .platform-list { gap: 8px; } .platform { padding: 6px 8px; font-size: 12px; } } </style> </head> <body> <div class="dashboard"> <div class="pattern"></div> <div class="dashboard-header"> <h1 class="dashboard-title">Social Dashboard</h1> <div class="active-user"> <div class="user-avatar">JS</div> <div class="notification-badge"></div> </div> </div> <div class="tab-container"> <div class="tab active" data-tab="sharing">Sharing</div> <div class="tab" data-tab="notifications">Notifications</div> <div class="tab" data-tab="privacy">Privacy</div> </div> <div class="content-container"> <div class="content active" id="sharing"> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Quick Share</div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Enable one-click sharing to your connected social platforms.</div> <div class="platform-list"> <div class="platform twitter"> <i class="fab fa-twitter"></i> Twitter </div> <div class="platform instagram"> <i class="fab fa-instagram"></i> Instagram </div> <div class="platform linkedin"> <i class="fab fa-linkedin"></i> LinkedIn </div> <div class="platform tiktok"> <i class="fab fa-tiktok"></i> TikTok </div> </div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Default Platforms</div> </div> <div class="setting-desc">Choose which platforms to include in your default sharing panel.</div> <div class="dropdown"> <div class="dropdown-select"> <span>Select platforms</span> <i class="fas fa-chevron-down dropdown-chevron"></i> </div> <div class="dropdown-menu"> <div class="dropdown-item" data-value="twitter"> <i class="fab fa-twitter"></i> Twitter </div> <div class="dropdown-item selected" data-value="instagram"> <i class="fab fa-instagram"></i> Instagram </div> <div class="dropdown-item" data-value="linkedin"> <i class="fab fa-linkedin"></i> LinkedIn </div> <div class="dropdown-item selected" data-value="tiktok"> <i class="fab fa-tiktok"></i> TikTok </div> <div class="dropdown-item" data-value="facebook"> <i class="fab fa-facebook"></i> Facebook </div> <div class="dropdown-item" data-value="pinterest"> <i class="fab fa-pinterest"></i> Pinterest </div> </div> </div> <div class="chip-list"> <div class="chip" data-value="instagram"> Instagram <i class="fas fa-times-circle"></i> </div> <div class="chip" data-value="tiktok"> TikTok <i class="fas fa-times-circle"></i> </div> </div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Auto-Share New Posts</div> <label class="toggle"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Automatically share new content to selected platforms when published.</div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Post Analytics</div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Show performance metrics next to your shared content.</div> </div> </div> <div class="content" id="notifications"> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Push Notifications</div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Receive alerts when someone engages with your content.</div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Notification Frequency</div> </div> <div class="setting-desc">Adjust how often you receive batched notifications.</div> <input type="range" min="0" max="4" value="2" class="frequency-slider" id="frequency"> <div class="slider-labels"> <span>Minimal</span> <span>Hourly</span> <span>Frequent</span> </div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Comment Alerts</div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Get notified when someone comments on your posts.</div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Mention Notifications</div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Receive alerts when you're mentioned in posts or comments.</div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Performance Updates</div> <label class="toggle"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Weekly summaries of your content performance across platforms.</div> </div> </div> <div class="content" id="privacy"> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Content Privacy</div> </div> <div class="setting-desc">Choose who can view and interact with your shared content.</div> <div class="dropdown"> <div class="dropdown-select"> <span>Public</span> <i class="fas fa-chevron-down dropdown-chevron"></i> </div> <div class="dropdown-menu"> <div class="dropdown-item selected" data-value="public"> <i class="fas fa-globe"></i> Public </div> <div class="dropdown-item" data-value="followers"> <i class="fas fa-user-friends"></i> Followers Only </div> <div class="dropdown-item" data-value="private"> <i class="fas fa-lock"></i> Private </div> </div> </div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Data Collection</div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Allow platforms to collect engagement data for personalized content recommendations.</div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Profile Visibility</div> </div> <div class="setting-desc">Control who can see your profile information across connected platforms.</div> <div class="dropdown"> <div class="dropdown-select"> <span>Followers Only</span> <i class="fas fa-chevron-down dropdown-chevron"></i> </div> <div class="dropdown-menu"> <div class="dropdown-item" data-value="public"> <i class="fas fa-globe"></i> Public </div> <div class="dropdown-item selected" data-value="followers"> <i class="fas fa-user-friends"></i> Followers Only </div> <div class="dropdown-item" data-value="private"> <i class="fas fa-lock"></i> Private </div> </div> </div> </div> <div class="setting-item"> <div class="setting-header"> <div class="setting-title">Location Sharing</div> <label class="toggle"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> <div class="setting-desc">Include your location data with shared posts.</div> </div> </div> </div> <button class="save-button"> <i class="fas fa-save"></i> Save Settings </button> </div> <div class="success-toast"> <i class="fas fa-check-circle"></i> <span>Settings saved successfully!</span> </div> <script> // Dynamically load Font Awesome document.head.innerHTML += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">'; // Tab Navigation const tabs = document.querySelectorAll('.tab'); const contents = document.querySelectorAll('.content'); tabs.forEach(tab => { tab.addEventListener('click', () => { const target = tab.dataset.tab; // Remove active class from all tabs and contents tabs.forEach(t => t.classList.remove('active')); contents.forEach(c => c.classList.remove('active')); // Add active class to clicked tab and corresponding content tab.classList.add('active'); document.getElementById(target).classList.add('active'); }); }); // Dropdowns const dropdowns = document.querySelectorAll('.dropdown'); dropdowns.forEach(dropdown => { const select = dropdown.querySelector('.dropdown-select'); const menu = dropdown.querySelector('.dropdown-menu'); const items = dropdown.querySelectorAll('.dropdown-item'); select.addEventListener('click', (e) => { e.stopPropagation(); dropdown.classList.toggle('open'); // Close other dropdowns dropdowns.forEach(d => { if (d !== dropdown) d.classList.remove('open'); }); }); items.forEach(item => { item.addEventListener('click', () => { // For single select dropdowns if (!dropdown.classList.contains('multi-select')) { items.forEach(i => i.classList.remove('selected')); item.classList.add('selected'); select.querySelector('span').textContent = item.textContent.trim(); dropdown.classList.remove('open'); } else { // For multi-select dropdowns item.classList.toggle('selected'); } }); }); }); // Close dropdowns when clicking outside document.addEventListener('click', () => { dropdowns.forEach(dropdown => { dropdown.classList.remove('open'); }); }); // Chip removal const chips = document.querySelectorAll('.chip'); chips.forEach(chip => { const closeBtn = chip.querySelector('i'); closeBtn.addEventListener('click', (e) => { e.stopPropagation(); chip.style.opacity = '0'; setTimeout(() => { chip.remove(); }, 300); }); }); // Save button animation and toast const saveBtn = document.querySelector('.save-button'); const toast = document.querySelector('.success-toast'); saveBtn.addEventListener('click', () => { saveBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Saving...'; saveBtn.disabled = true; setTimeout(() => { saveBtn.innerHTML = '<i class="fas fa-check"></i> Saved!'; setTimeout(() => { saveBtn.innerHTML = '<i class="fas fa-save"></i> Save Settings'; saveBtn.disabled = false; // Show toast toast.classList.add('show'); // Hide toast after 3 seconds setTimeout(() => { toast.classList.remove('show'); }, 3000); }, 1000); }, 1500); }); // Toggle animations const toggles = document.querySelectorAll('.toggle input'); toggles.forEach(toggle => { toggle.addEventListener('change', function() { const slider = this.nextElementSibling; if (this.checked) { slider.style.boxShadow = '0 0 10px rgba(94, 96, 206, 0.5)'; setTimeout(() => { slider.style.boxShadow = 'none'; }, 300); } }); }); // Interactive pattern effect const pattern = document.querySelector('.pattern'); document.addEventListener('mousemove', (e) => { const xPos = e.clientX / window.innerWidth; const yPos = e.clientY / window.innerHeight; pattern.style.backgroundPosition = `${xPos * 50}px ${yPos * 50}px`; }); // Frequency slider const frequencySlider = document.getElementById('frequency'); const frequencyLabels = ['Minimal', 'Low', 'Medium', 'High', 'Real-time']; if (frequencySlider) { frequencySlider.addEventListener('input', function() { const percentage = (this.value / this.max) * 100; this.style.background = `linear-gradient(to right, var(--primary) 0%, var(--primary) ${percentage}%, rgba(255, 255, 255, 0.1) ${percentage}%, rgba(255, 255, 255, 0.1) 100%)`; }); // Trigger to set initial gradient const event = new Event('input'); frequencySlider.dispatchEvent(event); } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CourseConnect Selector</title> <style> :root { --primary: #7C5DFA; --primary-light: #9277FF; --secondary: #4ECDC4; --tertiary: #F7FFF7; --dark: #333F4F; --gray: #888EB0; --light-gray: #DFE3FA; --danger: #FF8976; --success: #6BE795; --radius: 12px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #F8F8FB; color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; position: relative; overflow-x: hidden; } .course-selector { width: 100%; max-width: 650px; background-color: white; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 30px; position: relative; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { background-color: var(--primary); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 18px; } .logo-text { font-weight: 600; font-size: 20px; color: var(--dark); } .search-container { position: relative; margin-bottom: 25px; } .search-input { width: 100%; padding: 15px 20px; padding-left: 50px; border: 2px solid var(--light-gray); border-radius: var(--radius); font-size: 16px; transition: var(--transition); background-color: #FCFCFC; } .search-input:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(146, 119, 255, 0.2); } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray); } .filter-container { display: flex; gap: 12px; margin-bottom: 25px; overflow-x: auto; padding-bottom: 10px; -ms-overflow-style: none; scrollbar-width: none; } .filter-container::-webkit-scrollbar { display: none; } .filter-item { padding: 8px 16px; background-color: var(--tertiary); border: 2px solid transparent; border-radius: 25px; cursor: pointer; white-space: nowrap; transition: var(--transition); font-size: 14px; font-weight: 500; color: var(--dark); } .filter-item:hover { background-color: rgba(124, 93, 250, 0.1); color: var(--primary); } .filter-item.active { background-color: var(--primary); color: white; border-color: var(--primary); } .courses-container { max-height: 350px; overflow-y: auto; padding-right: 5px; } .courses-container::-webkit-scrollbar { width: 8px; } .courses-container::-webkit-scrollbar-track { background: var(--light-gray); border-radius: 10px; } .courses-container::-webkit-scrollbar-thumb { background-color: var(--gray); border-radius: 10px; } .course-category { margin-bottom: 20px; } .category-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer; border-bottom: 2px solid var(--light-gray); margin-bottom: 15px; transition: var(--transition); } .category-header:hover { color: var(--primary); } .category-title { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 10px; } .category-count { background-color: var(--primary-light); color: white; border-radius: 15px; padding: 2px 10px; font-size: 12px; font-weight: 500; } .course-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; margin-bottom: 10px; border-radius: var(--radius); background-color: #F8F8FB; transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; } .course-item:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); } .course-item:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background-color: var(--primary); transform: scaleY(0); transition: var(--transition); } .course-item:hover:before { transform: scaleY(1); } .course-info { display: flex; flex-direction: column; gap: 5px; } .course-title { font-weight: 600; font-size: 16px; } .course-meta { display: flex; align-items: center; gap: 15px; color: var(--gray); font-size: 13px; } .meta-item { display: flex; align-items: center; gap: 5px; } .course-action { display: flex; align-items: center; gap: 8px; } .action-btn { padding: 8px 12px; background-color: var(--primary); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 14px; font-weight: 500; transition: var(--transition); display: flex; align-items: center; gap: 5px; } .action-btn:hover { background-color: var(--primary-light); } .add-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: rgba(124, 93, 250, 0.1); color: var(--primary); border: none; cursor: pointer; transition: var(--transition); } .add-btn:hover { background-color: var(--primary); color: white; } .course-level { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; } .level-beginner { background-color: rgba(78, 205, 196, 0.2); color: var(--secondary); } .level-intermediate { background-color: rgba(255, 183, 77, 0.2); color: #FFB74D; } .level-advanced { background-color: rgba(255, 137, 118, 0.2); color: var(--danger); } .empty-state { padding: 30px; text-align: center; color: var(--gray); display: none; } .empty-icon { font-size: 40px; margin-bottom: 15px; color: var(--light-gray); } .selected-courses { margin-top: 30px; padding-top: 20px; border-top: 2px dashed var(--light-gray); } .selected-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .selected-title { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 10px; } .selected-count { background-color: var(--success); color: white; border-radius: 15px; padding: 2px 10px; font-size: 12px; font-weight: 500; } .clear-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; font-weight: 500; transition: var(--transition); } .clear-btn:hover { text-decoration: underline; } .selected-list { display: flex; flex-wrap: wrap; gap: 10px; } .selected-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background-color: rgba(124, 93, 250, 0.1); border-radius: 6px; font-size: 14px; transition: var(--transition); } .selected-item:hover { background-color: rgba(124, 93, 250, 0.2); } .remove-btn { background: none; border: none; cursor: pointer; color: var(--gray); transition: var(--transition); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .remove-btn:hover { color: var(--danger); } .continue-btn { display: block; width: 100%; padding: 15px; background-color: var(--primary); color: white; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 30px; transition: var(--transition); } .continue-btn:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(124, 93, 250, 0.2); } .continue-btn:active { transform: translateY(0); } .category-toggle { transition: transform 0.3s ease; } .category-collapsed .category-toggle { transform: rotate(-90deg); } .category-courses { transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 1000px; opacity: 1; } .category-collapsed .category-courses { max-height: 0; opacity: 0; overflow: hidden; margin: 0; } /* Badges & States */ .badge { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; } .badge-new { background-color: rgba(124, 93, 250, 0.2); color: var(--primary); } .badge-popular { background-color: rgba(255, 137, 118, 0.2); color: var(--danger); } /* Mobile optimizations */ @media (max-width: 600px) { .course-selector { padding: 20px; } .course-item { flex-direction: column; align-items: flex-start; gap: 10px; } .course-action { width: 100%; justify-content: space-between; } .action-btn { flex-grow: 1; justify-content: center; } .logo-text { font-size: 16px; } .course-meta { flex-wrap: wrap; gap: 8px; } .selected-list { gap: 8px; } .selected-item { font-size: 12px; padding: 6px 10px; } } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .course-item { animation: fadeIn 0.3s ease; } .selected-item { animation: slideIn 0.3s ease; } .pulse { animation: pulse 0.6s ease; } /* Tooltip */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; width: 120px; background-color: var(--dark); color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 12px; } .tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* Decoration elements */ .decoration { position: absolute; z-index: -1; } .decoration-1 { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(45deg, var(--primary-light), var(--primary)); top: -60px; right: -60px; opacity: 0.1; } .decoration-2 { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(45deg, var(--secondary), #6BE795); bottom: -40px; left: -40px; opacity: 0.1; } /* Loading state */ .loading { display: flex; align-items: center; justify-content: center; padding: 20px; font-size: 14px; color: var(--gray); } .loading-spinner { width: 20px; height: 20px; border: 3px solid rgba(124, 93, 250, 0.2); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } </style> </head> <body> <div class="course-selector"> <div class="decoration decoration-1"></div> <div class="decoration decoration-2"></div> <div class="header"> <div class="logo"> <div class="logo-icon">CC</div> <div class="logo-text">CourseConnect</div> </div> <div> <span class="badge badge-new">Spring 2024</span> </div> </div> <div class="search-container"> <input type="text" class="search-input" placeholder="Search for courses..." id="search-input"> <svg class="search-icon" 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="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <div class="filter-container"> <div class="filter-item active" data-filter="all">All Courses</div> <div class="filter-item" data-filter="beginner">Beginner</div> <div class="filter-item" data-filter="intermediate">Intermediate</div> <div class="filter-item" data-filter="advanced">Advanced</div> <div class="filter-item" data-filter="new">New Courses</div> <div class="filter-item" data-filter="popular">Popular</div> </div> <div class="courses-container" id="courses-container"> <div class="course-category"> <div class="category-header"> <div class="category-title"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon> <polyline points="2 17 12 22 22 17"></polyline> <polyline points="2 12 12 17 22 12"></polyline> </svg> Computer Science <span class="category-count">4</span> </div> <svg class="category-toggle" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> <div class="category-courses"> <div class="course-item" data-level="beginner" data-tags="new"> <div class="course-info"> <div class="course-title">Introduction to Python Programming</div> <div class="course-meta"> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="12 6 12 12 16 14"></polyline> </svg> 8 weeks </div> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> 2,145 students </div> <span class="course-level level-beginner">Beginner</span> </div> </div> <div class="course-action"> <button class="action-btn" data-course="Introduction to Python Programming"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> Add Course </button> </div> </div> <div class="course-item" data-level="intermediate" data-tags="popular"> <div class="course-info"> <div class="course-title">Data Structures & Algorithms</div> <div class="course-meta"> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="12 6 12 12 16 14"></polyline> </svg> 12 weeks </div> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> 3,782 students </div> <span class="course-level level-intermediate">Intermediate</span> <span class="badge badge-popular">Popular</span> </div> </div> <div class="course-action"> <button class="action-btn" data-course="Data Structures & Algorithms"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> Add Course </button> </div> </div> <div class="course-item" data-level="advanced"> <div class="course-info"> <div class="course-title">Machine Learning & AI Fundamentals</div> <div class="course-meta"> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="12 6 12 12 16 14"></polyline> </svg> 16 weeks </div> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> 1,845 students </div> <span class="course-level level-advanced">Advanced</span> </div> </div> <div class="course-action"> <button class="action-btn" data-course="Machine Learning & AI Fundamentals"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> Add Course </button> </div> </div> <div class="course-item" data-level="beginner" data-tags="new"> <div class="course-info"> <div class="course-title">Web Development Bootcamp</div> <div class="course-meta"> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="12 6 12 12 16 14"></polyline> </svg> 10 weeks </div> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> 2,548 students </div> <span class="course-level level-beginner">Beginner</span> <span class="badge badge-new">New</span> </div> </div> <div class="course-action"> <button class="action-btn" data-course="Web Development Bootcamp"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> Add Course </button> </div> </div> </div> </div> <div class="course-category"> <div class="category-header"> <div class="category-title"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path> <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path> </svg> Business & Management <span class="category-count">3</span> </div> <svg class="category-toggle" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> <div class="category-courses"> <div class="course-item" data-level="beginner" data-tags="popular"> <div class="course-info"> <div class="course-title">Introduction to Business Analytics</div> <div class="course-meta"> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="12 6 12 12 16 14"></polyline> </svg> 8 weeks </div> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> 3,154 students </div> <span class="course-level level-beginner">Beginner</span> <span class="badge badge-popular">Popular</span> </div> </div> <div class="course-action"> <button class="action-btn" data-course="Introduction to Business Analytics"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> Add Course </button> </div> </div> <div class="course-item" data-level="intermediate"> <div class="course-info"> <div class="course-title">Marketing & Brand Strategy</div> <div class="course-meta"> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="12 6 12 12 16 14"></polyline> </svg> 10 weeks </div> <div class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> 2,356 students </div> <span class="course-level level-intermediate">Intermediate</span> </div> </div> <div class="course-action"> <button class="action-btn" data-course="Marketing & Brand Strategy"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multilingual Website Navigation</title> <style> :root { --primary-color: #2C3E50; --secondary-color: #3498DB; --light-color: #ECF0F1; --dark-color: #1A252F; --accent-color: #E74C3C; --success-color: #2ECC71; --warning-color: #F39C12; --info-color: #3498DB; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-color); display: flex; flex-direction: column; min-height: 700px; color: var(--dark-color); position: relative; overflow-x: hidden; } header { background-color: var(--primary-color); padding: 1rem; color: white; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .logo { font-size: 1.5rem; font-weight: bold; display: flex; align-items: center; } .logo svg { margin-right: 0.5rem; } nav { display: flex; gap: 1.5rem; align-items: center; } nav a { color: white; text-decoration: none; padding: 0.5rem; transition: all 0.3s ease; position: relative; } nav a:after { content: ''; position: absolute; width: 0; height: 2px; background: var(--secondary-color); left: 0; bottom: 0; transition: width 0.3s ease; } nav a:hover:after { width: 100%; } .language-selector { position: relative; z-index: 100; } .language-btn { background-color: var(--secondary-color); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; transition: all 0.3s ease; } .language-btn:hover { background-color: #2980B9; } .language-btn svg { transition: transform 0.3s ease; } .language-btn.active svg { transform: rotate(180deg); } .language-dropdown { position: absolute; top: 100%; right: 0; background-color: white; border-radius: 4px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); width: 300px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, transform 0.3s ease; transform: translateY(10px); opacity: 0; visibility: hidden; } .language-dropdown.show { max-height: 400px; transform: translateY(0); opacity: 1; visibility: visible; } .language-search { padding: 1rem; border-bottom: 1px solid #eee; } .language-search input { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; } .language-list { max-height: 300px; overflow-y: auto; padding: 0.5rem 0; } .language-item { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: background-color 0.3s ease; } .language-item:hover { background-color: #f5f5f5; } .language-item.active { background-color: #e1f5fe; } .flag-icon { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; } .language-name { font-weight: 500; } .language-native { font-size: 0.8rem; color: #666; } .rtl-support { margin-left: auto; font-size: 0.75rem; color: var(--success-color); display: flex; align-items: center; gap: 0.25rem; } main { flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; } .website-preview { background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 2rem; transition: all 0.5s ease; } .website-preview h1 { font-size: 1.8rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; } .website-preview h1:after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background-color: var(--secondary-color); } .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .feature-card { background-color: var(--light-color); border-radius: 8px; padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .feature-card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--primary-color); } .feature-card p { font-size: 0.9rem; color: #555; line-height: 1.5; } .rtl-content { direction: rtl; text-align: right; } footer { background-color: var(--dark-color); color: white; padding: 1rem; text-align: center; font-size: 0.9rem; margin-top: auto; } /* Theme switcher */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; background-color: var(--primary-color); color: white; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); z-index: 100; transition: all 0.3s ease; } .theme-switcher:hover { transform: scale(1.1); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeIn 0.5s ease forwards; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #2980B9; } /* Responsive adjustments */ @media (max-width: 700px) { header { flex-direction: column; gap: 1rem; } nav { width: 100%; justify-content: space-between; } .language-dropdown { width: 100%; right: 0; } .features { grid-template-columns: 1fr; } } /* Dark theme */ body.dark-theme { background-color: var(--dark-color); color: var(--light-color); } body.dark-theme .website-preview { background-color: #2C3E50; color: white; } body.dark-theme .feature-card { background-color: #34495E; color: white; } body.dark-theme .feature-card h3 { color: var(--secondary-color); } body.dark-theme .feature-card p { color: #ccc; } body.dark-theme .language-dropdown { background-color: #2C3E50; color: white; } body.dark-theme .language-item { color: white; } body.dark-theme .language-item:hover { background-color: #34495E; } body.dark-theme .language-item.active { background-color: #3498DB; } body.dark-theme .language-native { color: #bbb; } body.dark-theme .language-search input { background-color: #34495E; border-color: #2C3E50; color: white; } /* Accesibility focus styles */ button:focus, a:focus, input:focus { outline: 3px solid var(--info-color); outline-offset: 2px; } </style> </head> <body> <header> <div class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 19.93C7.05 19.44 4 16.08 4 12C4 11.38 4.08 10.79 4.21 10.21L9 15V16C9 17.1 9.9 18 11 18V19.93ZM17.9 17.39C17.64 16.58 16.9 16 16 16H15V13C15 12.45 14.55 12 14 12H8V10H10C10.55 10 11 9.55 11 9V7H13C14.1 7 15 6.1 15 5V4.59C17.93 5.78 20 8.65 20 12C20 14.08 19.2 15.97 17.9 17.39Z" fill="#3498DB"/> </svg> <span>GlobalLingo</span> </div> <nav> <a href="#">Home</a> <a href="#">Features</a> <a href="#">Docs</a> <a href="#">Contact</a> <div class="language-selector"> <button class="language-btn" id="language-toggle" aria-expanded="false" aria-haspopup="true"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.87 15.07L10.33 12.56L10.36 12.53C12.1 10.59 13.34 8.36 14.07 6H17V4H10V2H8V4H1V6H12.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8H4.69C5.42 9.63 6.42 11.17 7.67 12.56L2.58 17.58L4 19L9 14L12.11 17.11L12.87 15.07ZM18.5 10H16.5L12 22H14L15.12 19H19.87L21 22H23L18.5 10ZM15.88 17L17.5 12.67L19.12 17H15.88Z" fill="white"/> </svg> <span id="current-language">English</span> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 10L12 15L17 10H7Z" fill="white"/> </svg> </button> <div class="language-dropdown" id="language-dropdown"> <div class="language-search"> <input type="text" id="language-search-input" placeholder="Search language" aria-label="Search for a language"> </div> <div class="language-list" id="language-list"> <!-- Languages will be dynamically populated --> </div> </div> </div> </nav> </header> <main> <div class="website-preview"> <h1 id="website-title">Creating a Global Digital Experience</h1> <p id="website-content">Our multilingual navigation system ensures that users from around the world can access your content with ease. With support for over 30 languages including right-to-left scripts like Arabic and Hebrew, we're breaking down language barriers.</p> <div class="features"> <div class="feature-card"> <h3>High Contrast Design</h3> <p>WCAG 2.1 AA compliant color schemes ensure readability for all users, regardless of visual impairments.</p> </div> <div class="feature-card"> <h3>Cultural Adaptation</h3> <p>Beyond translation, our system adapts content to match cultural expectations and regional preferences.</p> </div> <div class="feature-card"> <h3>RTL Support</h3> <p>Complete right-to-left language support with proper text flow, navigation, and UI element positioning.</p> </div> <div class="feature-card"> <h3>Semantic Structure</h3> <p>Clear heading hierarchy and semantic HTML ensure screen readers can properly navigate your content.</p> </div> </div> </div> </main> <div class="theme-switcher" id="theme-switcher" title="Toggle dark/light mode"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 15.31L23.31 12L20 8.69V4H15.31L12 0.69L8.69 4H4V8.69L0.69 12L4 15.31V20H8.69L12 23.31L15.31 20H20V15.31ZM12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12C18 15.31 15.31 18 12 18Z" fill="white"/> </svg> </div> <footer> <p>© 2023 GlobalLingo - Multilingual Support for Modern Websites</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { // Language data with RTL support information const languages = [ { code: 'en', name: 'English', native: 'English', flag: '🇬🇧', rtl: false }, { code: 'es', name: 'Spanish', native: 'Español', flag: '🇪🇸', rtl: false }, { code: 'fr', name: 'French', native: 'Français', flag: '🇫🇷', rtl: false }, { code: 'de', name: 'German', native: 'Deutsch', flag: '🇩🇪', rtl: false }, { code: 'it', name: 'Italian', native: 'Italiano', flag: '🇮🇹', rtl: false }, { code: 'pt', name: 'Portuguese', native: 'Português', flag: '🇵🇹', rtl: false }, { code: 'ru', name: 'Russian', native: 'Русский', flag: '🇷🇺', rtl: false }, { code: 'zh', name: 'Chinese', native: '中文', flag: '🇨🇳', rtl: false }, { code: 'ja', name: 'Japanese', native: '日本語', flag: '🇯🇵', rtl: false }, { code: 'ko', name: 'Korean', native: '한국어', flag: '🇰🇷', rtl: false }, { code: 'ar', name: 'Arabic', native: 'العربية', flag: '🇸🇦', rtl: true }, { code: 'he', name: 'Hebrew', native: 'עִבְרִית', flag: '🇮🇱', rtl: true }, { code: 'fa', name: 'Persian', native: 'فارسی', flag: '🇮🇷', rtl: true }, { code: 'ur', name: 'Urdu', native: 'اردو', flag: '🇵🇰', rtl: true }, { code: 'hi', name: 'Hindi', native: 'हिन्दी', flag: '🇮🇳', rtl: false }, { code: 'th', name: 'Thai', native: 'ไทย', flag: '🇹🇭', rtl: false }, { code: 'vi', name: 'Vietnamese', native: 'Tiếng Việt', flag: '🇻🇳', rtl: false }, { code: 'id', name: 'Indonesian', native: 'Bahasa Indonesia', flag: '🇮🇩', rtl: false }, { code: 'nl', name: 'Dutch', native: 'Nederlands', flag: '🇳🇱', rtl: false }, { code: 'tr', name: 'Turkish', native: 'Türkçe', flag: '🇹🇷', rtl: false }, { code: 'pl', name: 'Polish', native: 'Polski', flag: '🇵🇱', rtl: false }, { code: 'sv', name: 'Swedish', native: 'Svenska', flag: '🇸🇪', rtl: false }, { code: 'uk', name: 'Ukrainian', native: 'Українська', flag: '🇺🇦', rtl: false }, { code: 'el', name: 'Greek', native: 'Ελληνικά', flag: '🇬🇷', rtl: false }, { code: 'cs', name: 'Czech', native: 'Čeština', flag: '🇨🇿', rtl: false }, { code: 'hu', name: 'Hungarian', native: 'Magyar', flag: '🇭🇺', rtl: false }, { code: 'fi', name: 'Finnish', native: 'Suomi', flag: '🇫🇮', rtl: false }, { code: 'no', name: 'Norwegian', native: 'Norsk', flag: '🇳🇴', rtl: false }, { code: 'da', name: 'Danish', native: 'Dansk', flag: '🇩🇰', rtl: false }, { code: 'ro', name: 'Romanian', native: 'Română', flag: '🇷🇴', rtl: false } ]; const languageToggle = document.getElementById('language-toggle'); const languageDropdown = document.getElementById('language-dropdown'); const languageList = document.getElementById('language-list'); const currentLanguageEl = document.getElementById('current-language'); const languageSearchInput = document.getElementById('language-search-input'); const themeSwitcher = document.getElementById('theme-switcher'); const websiteTitle = document.getElementById('website-title'); const websiteContent = document.getElementById('website-content'); let currentLanguage = 'en'; // Create language list function renderLanguageList(langs) { languageList.innerHTML = ''; langs.forEach(lang => { const langItem = document.createElement('div'); langItem.className = `language-item ${lang.code === currentLanguage ? 'active' : ''}`; langItem.setAttribute('role', 'button'); langItem.setAttribute('tabindex', '0'); langItem.dataset.lang = lang.code; const flagIcon = document.createElement('div'); flagIcon.className = 'flag-icon'; flagIcon.textContent = lang.flag; const langDetails = document.createElement('div'); langDetails.className = 'lang-details'; const langName = document.createElement('div'); langName.className = 'language-name'; langName.textContent = lang.name; const langNative = document.createElement('div'); langNative.className = 'language-native'; langNative.textContent = lang.native; langDetails.appendChild(langName); langDetails.appendChild(langNative); langItem.appendChild(flagIcon); langItem.appendChild(langDetails); if (lang.rtl) { const rtlSupport = document.createElement('div'); rtlSupport.className = 'rtl-support'; rtlSupport.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="#2ECC71"/> </svg> <span>RTL</span> `; langItem.appendChild(rtlSupport); } languageList.appendChild(langItem); // Add click event for language selection langItem.addEventListener('click', function() { setLanguage(lang.code); closeDropdown(); }); // Add keyboard support langItem.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { setLanguage(lang.code); closeDropdown(); e.preventDefault(); } }); }); } // Initialize language list renderLanguageList(languages); // Toggle language dropdown languageToggle.addEventListener('click', function() { toggleDropdown(); }); // Close dropdown when clicking outside document.addEventListener('click', function(e) { if (!languageToggle.contains(e.target) && !languageDropdown.contains(e.target)) { closeDropdown(); } }); // Handle search functionality languageSearchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); const filteredLanguages = languages.filter(lang => lang.name.toLowerCase().includes(searchTerm) || lang.native.toLowerCase().includes(searchTerm) ); renderLanguageList(filteredLanguages); }); // Toggle dropdown function function toggleDropdown() { languageDropdown.classList.toggle('show'); languageToggle.classList.toggle('active'); languageToggle.setAttribute('aria-expanded', languageDropdown.classList.contains('show')); if (languageDropdown.classList.contains('show')) { languageSearchInput.focus(); } } // Close dropdown function function closeDropdown() { languageDropdown.classList.remove('show'); languageToggle.classList.remove('active'); languageToggle.setAttribute('aria-expanded', 'false'); } // Set language function function setLanguage(langCode) { const language = languages.find(lang => lang.code === langCode); if (!language) return; currentLanguage = langCode; // Update current language display currentLanguageEl.textContent = language.name; // Update active state in dropdown document.querySelectorAll('.language-item').forEach(item => { item.classList.toggle('active', item.dataset.lang === langCode); }); // Set RTL/LTR for content document.body.classList.toggle('rtl', language.rtl); document.documentElement.setAttribute('lang', langCode); document.documentElement.setAttribute('dir', language.rtl ? 'rtl' : 'ltr'); // Update content based on selected language updateContent(language); } // Simple content translation based on language function updateContent(language) { const websitePreview = document.querySelector('.website-preview'); if (language.rtl) { websitePreview.classList.add('rtl-content'); } else { websitePreview.classList.remove('rtl-content'); } // Sample translations (in a real app, these would come from translation files) const translations = { 'en': { title: 'Creating a Global Digital Experience', content: 'Our multilingual navigation system ensures that users from around the world can access your content with ease. With support for over 30 languages including right-to-left scripts like Arabic and Hebrew, we\'re breaking down language barriers.' }, 'es': { title: 'Creando una Experiencia Digital Global', content: 'Nuestro sistema de navegación multilingüe garantiza que los usuarios de todo el mundo puedan acceder a su contenido con facilidad. Con soporte para más de 30 idiomas, incluidos scripts de derecha a izquierda como el árabe y el hebreo, estamos derribando las barreras del idioma.' }, 'fr': { title: 'Création d\'une Expérience Numérique Mondiale', content: 'Notre système de navigation multilingue garantit que les utilisateurs du monde entier peuvent accéder à votre contenu en toute simplicité. Avec la prise en charge de plus de 30 langues, y compris les scripts de droite à gauche comme l\'arabe et l\'hébreu, nous brisons les barrières linguistiques.' }, 'ar': { title: 'إنشاء تجربة رقمية عالمية', content: 'يضمن نظام التنقل متعدد اللغات لدينا أن المستخدمين من جميع أنحاء العالم يمكنهم الوصول إلى المحتوى الخاص بك بسهولة. مع دعم أكثر من 30 لغة بما في ذلك نصوص من اليمين إلى اليسار مثل العربية والعبرية، نحن نكسر حواجز اللغة.' }, 'de': { title: 'Eine globale digitale Erfahrung schaffen', content: 'Unser mehrsprachiges Navigationssystem stellt sicher, dass Benutzer aus der ganzen Welt einfach auf Ihre Inhalte zugreifen können. Mit Unterstützung für über 30 Sprachen, einschließlich Rechts-nach-Links-Schriften wie Arabisch und Hebräisch, brechen wir Sprachbarrieren auf.' }, 'zh': { title: '创造全球数字体验', content: '我们的多语言导航系统确保来自世界各地的用户都能轻松访问您的内容。支持超过30种语言，包括阿拉伯语和希伯来语等从右到左的文字，我们正在打破语言障碍。' }, 'ja': { title: 'グローバルなデジタル体験の創造', content: '当社の多言語ナビゲーションシステムは、世界中のユーザーが簡単にコンテンツにアクセスできるようにします。アラビア語やヘブライ語などの右から左へのスクリプトを含む30以上の言語をサポートしており、言語の壁を打ち破っています。' }, 'ru': { title: 'Создание глобального цифрового опыта', content: 'Наша многоязычная система навигации обеспечивает пользователям со всего мира легкий доступ к вашему контенту. Поддерживая более 30 языков, включая письменности справа налево, такие как арабский и иврит, мы разрушаем языковые барьеры.' } }; // Default to English if translation not available const translation = translations[language.code] || translations['en']; // Update the content websiteTitle.textContent = translation.title; websiteContent.textContent = translation.content; // Add animation effect websiteTitle.classList.remove('animate-in'); websiteContent.classList.remove('animate-in'); setTimeout(() => { websiteTitle.classList.add('animate-in'); websiteContent.classList.add('animate-in'); }, 50); } // Theme switcher themeSwitcher.addEventListener('click', function() { document.body.classList.toggle('dark-theme'); updateThemeIcon(); }); function updateThemeIcon() { const isDark = document.body.classList.contains('dark-theme'); themeSwitcher.innerHTML = isDark ? '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 7C8.69 7 6 9.69 6 13C6 16.31 8.69 19 12 19C15.31 19 18 16.31 18 13C18 9.69 15.31 7 12 7ZM12 17C9.79 17 8 15.21 8 13C8 10.79 9.79 9 12 9C14.21 9 16 10.79 16 13C16 15.21 14.21 17 12 17ZM12 5L12.46 3.1L15 4L13.9 1.54L15 0L12 1L9 0L10.1 1.54L9 4L11.54 3.1L12 5ZM21 11L19.1 10.5L20 8L17.5 9.1L16 7L17 10L16 13L17.5 14.9L20 16L19.1 13.5L21 11ZM8 7L9 4L7.5 2.1L5 4L5.9 5.5L3 5L5 7L5.9 9.5L3 13L5.9 12.5L8 7Z" fill="white"/></svg>' : '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2C8.18 2 6.47 2.5 5 3.35C8.99 4.08 12 7.59 12 11.83C12 15.94 9.12 19.33 5.18 20C6.64 20.68 8.27 21 10 21C15.52 21 20 16.52 20 11C20 5.48 15.52 1 10 2Z" fill="white"/></svg>'; } // Handle keyboard navigation for the dropdown languageToggle.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') { toggleDropdown(); e.preventDefault(); if (e.key === 'ArrowDown' && languageDropdown.classList.contains('show')) { const firstItem = languageList.querySelector('.language-item'); if (firstItem) firstItem.focus(); } } }); // Add keyboard navigation within the dropdown languageList.addEventListener('keydown', function(e) { const items = Array.from(this.querySelectorAll('.language-item')); const currentIndex = items.findIndex(item => item === document.activeElement); if (e.key === 'ArrowDown') { if (currentIndex < items.length - 1) { items[currentIndex + 1].focus(); } e.preventDefault(); } else if (e.key === 'ArrowUp') { if (currentIndex > 0) { items[currentIndex - 1].focus(); } else { languageSearchInput.focus(); } e.preventDefault(); } else if (e.key === 'Escape') { closeDropdown(); languageToggle.focus(); e.preventDefault(); } }); // Add keyboard handling for search input languageSearchInput.addEventListener('keydown', function(e) { if (e.key === 'ArrowDown') { const firstItem = languageList.querySelector('.language-item'); if (firstItem) firstItem.focus(); e.preventDefault(); } else if (e.key === 'Escape') { closeDropdown(); languageToggle.focus(); e.preventDefault(); } }); }); </script> </body> </html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #4a9aca; --primary-light: #e6f3fc; --primary-dark: #2c7eaa; --secondary: #6fcda3; --secondary-light: #e3f7ee; --text-dark: #334355; --text-medium: #6e7c8c; --text-light: #9aa8b8; --background: #f9fbfd; --background-card: #ffffff; --error: #e76f6f; --success: #6fcda3; --border-radius: 14px; --box-shadow: 0 8px 24px rgba(149, 157, 165, 0.15); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { background-color: var(--background); color: var(--text-dark); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .scheduler-container { background-color: var(--background-card); border-radius: var(--border-radius); box-shadow: var(--box-shadow); width: 100%; max-width: 650px; padding: 32px; position: relative; overflow: hidden; } .scheduler-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); } .header { margin-bottom: 28px; position: relative; } .title { font-size: 24px; font-weight: 700; margin-bottom: 6px; color: var(--text-dark); } .subtitle { font-size: 16px; color: var(--text-medium); margin-bottom: 16px; } .selection-group { margin-bottom: 24px; position: relative; } .selection-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--text-dark); } .custom-select { position: relative; margin-bottom: 16px; } .select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background-color: var(--background); border: 2px solid transparent; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); font-size: 15px; color: var(--text-dark); position: relative; } .select-trigger:hover { background-color: var(--primary-light); } .select-trigger.active { border-color: var(--primary); background-color: var(--primary-light); } .select-trigger .icon { transition: var(--transition); } .select-trigger.active .icon { transform: rotate(180deg); } .select-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background-color: var(--background-card); border-radius: var(--border-radius); box-shadow: var(--box-shadow); max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .select-options.show { max-height: 320px; overflow-y: auto; } .search-input { margin: 12px; padding: 12px 16px; border: 1px solid #e1e6ee; border-radius: 10px; width: calc(100% - 24px); font-size: 14px; } .select-option { padding: 14px 20px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; } .select-option:hover { background-color: var(--primary-light); } .select-option.selected { background-color: var(--primary-light); color: var(--primary); font-weight: 600; } .doctor-avatar { width: 36px; height: 36px; border-radius: 50%; margin-right: 12px; background-color: var(--primary-light); overflow: hidden; position: relative; } .doctor-avatar img { width: 100%; height: 100%; object-fit: cover; } .doctor-info { display: flex; flex-direction: column; } .doctor-specialty { font-size: 12px; color: var(--text-medium); margin-top: 2px; } .date-selection { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .date-selection::-webkit-scrollbar { display: none; } .date-option { flex: 0 0 auto; padding: 10px 16px; margin-right: 10px; border-radius: var(--border-radius); background-color: var(--background); cursor: pointer; transition: var(--transition); text-align: center; position: relative; overflow: hidden; } .date-option:hover { background-color: var(--primary-light); } .date-option.selected { background-color: var(--primary); color: white; } .date-option .day { font-weight: 700; font-size: 16px; } .date-option .date { font-size: 13px; } .time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 24px; } .time-slot { padding: 12px; text-align: center; border-radius: var(--border-radius); background-color: var(--background); cursor: pointer; transition: var(--transition); font-size: 14px; } .time-slot:hover { background-color: var(--primary-light); } .time-slot.selected { background-color: var(--primary); color: white; } .time-slot.unavailable { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; } .appointment-actions { display: flex; justify-content: space-between; margin-top: 32px; } .btn { padding: 14px 24px; border-radius: var(--border-radius); font-weight: 600; font-size: 15px; cursor: pointer; transition: var(--transition); border: none; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 154, 202, 0.2); } .btn-outline { background-color: transparent; border: 2px solid #e1e6ee; color: var(--text-medium); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .confirmation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-card); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 5; } .confirmation.show { transform: translateY(0); } .confirmation-icon { width: 80px; height: 80px; background-color: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; position: relative; overflow: hidden; } .confirmation-icon svg { width: 40px; height: 40px; color: white; } .confirmation-title { font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--text-dark); } .confirmation-details { text-align: center; color: var(--text-medium); margin-bottom: 32px; line-height: 1.6; } .appointment-detail { display: flex; align-items: center; margin-bottom: 8px; font-size: 15px; } .appointment-detail svg { width: 18px; height: 18px; margin-right: 8px; color: var(--primary); } .loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loader.show { opacity: 1; pointer-events: all; } .loader-spinner { width: 40px; height: 40px; border: 4px solid var(--primary-light); border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1.5s linear infinite; } .floating-notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background-color: var(--background-card); box-shadow: var(--box-shadow); border-radius: var(--border-radius); padding: 16px 24px; display: flex; align-items: center; z-index: 1000; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .floating-notification.show { transform: translateX(-50%) translateY(0); } .notification-icon { margin-right: 12px; font-size: 20px; } .notification-success { color: var(--success); } .notification-text { font-size: 14px; color: var(--text-dark); } .progress-steps { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; position: relative; } .progress-steps::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: #e1e6ee; transform: translateY(-50%); z-index: 0; } .progress-step { width: 30px; height: 30px; border-radius: 50%; background-color: #e1e6ee; color: var(--text-medium); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; position: relative; z-index: 1; } .progress-step.active { background-color: var(--primary); color: white; } .progress-step.completed { background-color: var(--success); color: white; } .progress-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--text-medium); margin-top: 4px; } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 154, 202, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(74, 154, 202, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 154, 202, 0); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 600px) { .scheduler-container { padding: 20px; } .appointment-actions { flex-direction: column; gap: 12px; } .btn { width: 100%; } .time-slots { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body> <div class="scheduler-container"> <div class="header"> <h1 class="title">Schedule Your Appointment</h1> <p class="subtitle">Find a time that works for you with one of our healthcare providers</p> </div> <div class="progress-steps"> <div class="progress-step active" id="step1"> 1 <span class="progress-label">Provider</span> </div> <div class="progress-step" id="step2"> 2 <span class="progress-label">Date & Time</span> </div> <div class="progress-step" id="step3"> 3 <span class="progress-label">Confirm</span> </div> </div> <div class="selection-group"> <label class="selection-label">Select a provider</label> <div class="custom-select" id="provider-select"> <div class="select-trigger"> <span>Choose a healthcare provider</span> <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" class="icon"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> <div class="select-options"> <input type="text" class="search-input" placeholder="Search by name or specialty" id="provider-search"> <div class="select-option" data-value="dr-sarah-chen"> <div class="doctor-avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U2ZjNmYyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzUiIHI9IjIwIiBmaWxsPSIjNGE5YWNhIi8+PHBhdGggZD0iTTI1LDg1IFYxMDAgSDE1IFY5MCBDMTUsNzUgMzAsNjUgNTAsNjUgQzcwLDY1IDg1LDc1IDg1LDkwIFYxMDAgSDc1IFY4NSBDNzUsNzUgNjUsNzAgNTAsNzAgQzM1LDcwIDI1LDc1IDI1LDg1WiIgZmlsbD0iIzRhOWFjYSIvPjwvc3ZnPg=="> </div> <div class="doctor-info"> <span>Dr. Sarah Chen</span> <span class="doctor-specialty">Family Medicine</span> </div> </div> <div class="select-option" data-value="dr-james-wilson"> <div class="doctor-avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U2ZjNmYyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzUiIHI9IjIwIiBmaWxsPSIjNGE5YWNhIi8+PHBhdGggZD0iTTI1LDg1IFYxMDAgSDE1IFY5MCBDMTUsNzUgMzAsNjUgNTAsNjUgQzcwLDY1IDg1LDc1IDg1LDkwIFYxMDAgSDc1IFY4NSBDNzUsNzUgNjUsNzAgNTAsNzAgQzM1LDcwIDI1LDc1IDI1LDg1WiIgZmlsbD0iIzRhOWFjYSIvPjwvc3ZnPg=="> </div> <div class="doctor-info"> <span>Dr. James Wilson</span> <span class="doctor-specialty">Internal Medicine</span> </div> </div> <div class="select-option" data-value="dr-maya-patel"> <div class="doctor-avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U2ZjNmYyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzUiIHI9IjIwIiBmaWxsPSIjNGE5YWNhIi8+PHBhdGggZD0iTTI1LDg1IFYxMDAgSDE1IFY5MCBDMTUsNzUgMzAsNjUgNTAsNjUgQzcwLDY1IDg1LDc1IDg1LDkwIFYxMDAgSDc1IFY4NSBDNzUsNzUgNjUsNzAgNTAsNzAgQzM1LDcwIDI1LDc1IDI1LDg1WiIgZmlsbD0iIzRhOWFjYSIvPjwvc3ZnPg=="> </div> <div class="doctor-info"> <span>Dr. Maya Patel</span> <span class="doctor-specialty">Pediatrics</span> </div> </div> <div class="select-option" data-value="dr-robert-kim"> <div class="doctor-avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U2ZjNmYyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzUiIHI9IjIwIiBmaWxsPSIjNGE5YWNhIi8+PHBhdGggZD0iTTI1LDg1IFYxMDAgSDE1IFY5MCBDMTUsNzUgMzAsNjUgNTAsNjUgQzcwLDY1IDg1LDc1IDg1LDkwIFYxMDAgSDc1IFY4NSBDNzUsNzUgNjUsNzAgNTAsNzAgQzM1LDcwIDI1LDc1IDI1LDg1WiIgZmlsbD0iIzRhOWFjYSIvPjwvc3ZnPg=="> </div> <div class="doctor-info"> <span>Dr. Robert Kim</span> <span class="doctor-specialty">Cardiology</span> </div> </div> <div class="select-option" data-value="dr-elena-rodriguez"> <div class="doctor-avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U2ZjNmYyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzUiIHI9IjIwIiBmaWxsPSIjNGE5YWNhIi8+PHBhdGggZD0iTTI1LDg1IFYxMDAgSDE1IFY5MCBDMTUsNzUgMzAsNjUgNTAsNjUgQzcwLDY1IDg1LDc1IDg1LDkwIFYxMDAgSDc1IFY4NSBDNzUsNzUgNjUsNzAgNTAsNzAgQzM1LDcwIDI1LDc1IDI1LDg1WiIgZmlsbD0iIzRhOWFjYSIvPjwvc3ZnPg=="> </div> <div class="doctor-info"> <span>Dr. Elena Rodriguez</span> <span class="doctor-specialty">Dermatology</span> </div> </div> </div> </div> </div> <div class="selection-group" id="date-time-section" style="display: none;"> <label class="selection-label">Select a date</label> <div class="date-selection" id="date-selection"> <!-- Date options will be dynamically generated --> </div> <label class="selection-label">Select a time</label> <div class="time-slots" id="time-slots"> <!-- Time slots will be dynamically generated --> </div> </div> <div class="appointment-actions"> <button class="btn btn-outline" id="back-btn" style="display: none;">Back</button> <button class="btn btn-primary pulse-animation" id="next-btn">Next</button> </div> <div class="confirmation" id="confirmation"> <div class="confirmation-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </div> <h2 class="confirmation-title">Appointment Confirmed!</h2> <div class="confirmation-details"> <div class="appointment-detail"> <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 id="confirm-provider">Dr. Sarah Chen</span> </div> <div class="appointment-detail"> <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="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> <span id="confirm-date">Wednesday, May 10, 2023</span> </div> <div class="appointment-detail"> <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"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> <span id="confirm-time">10:30 AM</span> </div> </div> <p>We've sent the details to your email. Please arrive 15 minutes before your appointment.</p> <button class="btn btn-primary" id="done-btn">Done</button> </div> <div class="loader" id="loader"> <div class="loader-spinner"></div> </div> </div> <div class="floating-notification" id="notification"> <div class="notification-icon notification-success">✓</div> <div class="notification-text">Provider selected! Now choose a date and time.</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Variables let currentStep = 1; let selectedProvider = null; let selectedDate = null; let selectedTime = null; // Elements const providerSelect = document.getElementById('provider-select'); const providerTrigger = providerSelect.querySelector('.select-trigger'); const providerOptions = providerSelect.querySelector('.select-options'); const providerSearch = document.getElementById('provider-search'); const dateTimeSection = document.getElementById('date-time-section'); const dateSelection = document.getElementById('date-selection'); const timeSlots = document.getElementById('time-slots'); const nextBtn = document.getElementById('next-btn'); const backBtn = document.getElementById('back-btn'); const confirmationSection = document.getElementById('confirmation'); const confirmProvider = document.getElementById('confirm-provider'); const confirmDate = document.getElementById('confirm-date'); const confirmTime = document.getElementById('confirm-time'); const doneBtn = document.getElementById('done-btn'); const loader = document.getElementById('loader'); const notification = document.getElementById('notification'); const step1 = document.getElementById('step1'); const step2 = document.getElementById('step2'); const step3 = document.getElementById('step3'); // Open/close provider dropdown providerTrigger.addEventListener('click', function() { this.classList.toggle('active'); providerOptions.classList.toggle('show'); }); // Close dropdown when clicking outside document.addEventListener('click', function(event) { if (!providerSelect.contains(event.target)) { providerTrigger.classList.remove('active'); providerOptions.classList.remove('show'); } }); // Provider search functionality providerSearch.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); const options = providerOptions.querySelectorAll('.select-option'); options.forEach(option => { const text = option.textContent.toLowerCase(); if (text.includes(searchTerm)) { option.style.display = 'flex'; } else { option.style.display = 'none'; } }); }); // Select provider const providerOptionElements = providerOptions.querySelectorAll('.select-option'); providerOptionElements.forEach(option => { option.addEventListener('click', function() { const value = this.getAttribute('data-value'); const name = this.querySelector('.doctor-info span:first-child').textContent; const specialty = this.querySelector('.doctor-specialty').textContent; // Remove selected class from all options providerOptionElements.forEach(opt => opt.classList.remove('selected')); // Add selected class to current option this.classList.add('selected'); // Update trigger text providerTrigger.querySelector('span').textContent = name; // Close dropdown providerTrigger.classList.remove('active'); providerOptions.classList.remove('show'); // Store selected provider selectedProvider = { id: value, name: name, specialty: specialty }; }); }); // Generate dates (next 7 days) function generateDates() { const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; dateSelection.innerHTML = ''; for (let i = 0; i < 7; i++) { const date = new Date(); date.setDate(date.getDate() + i); const day = days[date.getDay()]; const dateNum = date.getDate(); const month = months[date.getMonth()]; const dateOption = document.createElement('div'); dateOption.classList.add('date-option'); if (i === 0) { dateOption.classList.add('selected'); selectedDate = { display: `${day}, ${month} ${dateNum}`, full: date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }; } dateOption.innerHTML = ` <div class="day">${day}</div> <div class="date">${month} ${dateNum}</div> `; dateOption.addEventListener('click', function() { // Remove selected class from all date options const dateOptions = document.querySelectorAll('.date-option'); dateOptions.forEach(opt => opt.classList.remove('selected')); // Add selected class to current option this.classList.add('selected'); // Store selected date selectedDate = { display: `${day}, ${month} ${dateNum}`, full: date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }; // Generate new time slots based on selected date generateTimeSlots(); }); dateSelection.appendChild(dateOption); } } // Generate time slots function generateTimeSlots() { const startHour = 8; // 8 AM const endHour = 17; // 5 PM const interval = 30; // 30 minutes timeSlots.innerHTML = ''; // To make some slots unavailable randomly const unavailableTimes = []; for (let i = 0; i < 5; i++) { const hour = Math.floor(Math.random() * (endHour - startHour)) + startHour; const minute = Math.random() < 0.5 ? 0 : 30; unavailableTimes.push(`${hour}:${minute === 0 ? '00' : '30'}`); } for (let hour = startHour; hour < endHour; hour++) { for (let minute = 0; minute < 60; minute += interval) { const timeString = `${hour}:${minute === 0 ? '00' : minute}`; const displayHour = hour > 12 ? hour - 12 : hour; const ampm = hour >= 12 ? 'PM' : 'AM'; const displayTime = `${displayHour}:${minute === 0 ? '00' : minute} ${ampm}`; const timeSlot = document.createElement('div'); timeSlot.classList.add('time-slot'); if (unavailableTimes.includes(timeString)) { timeSlot.classList.add('unavailable'); timeSlot.textContent = displayTime; } else { timeSlot.textContent = displayTime; timeSlot.addEventListener('click', function() { // Remove selected class from all time slots const allTimeSlots = document.querySelectorAll('.time-slot'); allTimeSlots.forEach(slot => slot.classList.remove('selected')); // Add selected class to current time slot this.classList.add('selected'); // Store selected time selectedTime = displayTime; }); } timeSlots.appendChild(timeSlot); } } } // Handle next button click nextBtn.addEventListener('click', function() { if (currentStep === 1) { if (!selectedProvider) { showNotification('Please select a provider first.'); return; } // Show loading indicator loader.classList.add('show'); // Simulate loading for API-like delay setTimeout(function() { // Hide loading indicator loader.classList.remove('show'); // Show date and time selection dateTimeSection.style.display = 'block'; // Generate dates and time slots generateDates(); generateTimeSlots(); // Update button text nextBtn.textContent = 'Confirm
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #2A3B4C; --secondary: #E85A4F; --tertiary: #8D99AE; --light: #EDF2F4; --dark: #1D2731; --politics: #D63447; --technology: #57B8FF; --business: #FDA50F; --culture: #9B5DE5; --sports: #00B295; --science: #30A9DE; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 2rem 1rem; } .container { width: 100%; max-width: 680px; } .header { margin-bottom: 2rem; text-align: center; } .header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--primary); letter-spacing: -0.05em; } .header p { font-size: 1rem; color: var(--tertiary); max-width: 500px; margin: 0 auto; } .news-selector { background-color: white; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; position: relative; transition: all 0.3s ease; } .selector-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; cursor: pointer; background-color: var(--primary); color: white; transition: all 0.3s ease; } .selector-header:hover { background-color: var(--dark); } .selector-header h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; } .selector-header .icon { font-size: 1.5rem; transform: rotate(0deg); transition: transform 0.3s ease; } .selector-header.active .icon { transform: rotate(180deg); } .selector-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .selector-content.active { max-height: 1000px; transition: max-height 0.5s ease-in-out; } .category-list { list-style: none; } .category-item { overflow: hidden; } .category-button { display: flex; align-items: center; width: 100%; padding: 1.25rem 1.5rem; border: none; background: white; text-align: left; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.2s ease; position: relative; } .category-button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 4px; transition: width 0.3s ease; } .category-button:hover::after { width: 100%; } .politics::after { background-color: var(--politics); } .technology::after { background-color: var(--technology); } .business::after { background-color: var(--business); } .culture::after { background-color: var(--culture); } .sports::after { background-color: var(--sports); } .science::after { background-color: var(--science); } .category-button:hover { background-color: rgba(237, 242, 244, 0.5); } .category-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; } .politics .category-title { color: var(--politics); } .technology .category-title { color: var(--technology); } .business .category-title { color: var(--business); } .culture .category-title { color: var(--culture); } .sports .category-title { color: var(--sports); } .science .category-title { color: var(--science); } .category-info { flex: 1; } .category-description { font-size: 0.875rem; color: var(--tertiary); margin-top: 0.25rem; } .category-icon { background-color: rgba(0, 0, 0, 0.05); height: 40px; width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; transition: all 0.3s ease; } .politics:hover .category-icon { background-color: var(--politics); color: white; } .technology:hover .category-icon { background-color: var(--technology); color: white; } .business:hover .category-icon { background-color: var(--business); color: white; } .culture:hover .category-icon { background-color: var(--culture); color: white; } .sports:hover .category-icon { background-color: var(--sports); color: white; } .science:hover .category-icon { background-color: var(--science); color: white; } .content-preview { margin-top: 2rem; background-color: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(20px); transition: all 0.4s ease; max-height: 0; overflow: hidden; } .content-preview.active { opacity: 1; transform: translateY(0); max-height: 500px; } .content-preview h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .content-preview p { font-size: 0.95rem; line-height: 1.6; color: var(--dark); margin-bottom: 1rem; } .headlines { margin-top: 1rem; } .headline { padding: 0.75rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; } .headline:last-child { border-bottom: none; } .headline-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; } .politics-theme { background-color: var(--politics); } .technology-theme { background-color: var(--technology); } .business-theme { background-color: var(--business); } .culture-theme { background-color: var(--culture); } .sports-theme { background-color: var(--sports); } .science-theme { background-color: var(--science); } .headline-text { font-size: 0.9rem; font-weight: 500; } .topic-badge { margin-left: auto; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .politics-badge { background-color: rgba(214, 52, 71, 0.1); color: var(--politics); } .technology-badge { background-color: rgba(87, 184, 255, 0.1); color: var(--technology); } .business-badge { background-color: rgba(253, 165, 15, 0.1); color: var(--business); } .culture-badge { background-color: rgba(155, 93, 229, 0.1); color: var(--culture); } .sports-badge { background-color: rgba(0, 178, 149, 0.1); color: var(--sports); } .science-badge { background-color: rgba(48, 169, 222, 0.1); color: var(--science); } @media (max-width: 600px) { .header h1 { font-size: 2rem; } .category-title { font-size: 1rem; } .category-description { font-size: 0.8rem; } .content-preview h3 { font-size: 1.25rem; } .content-preview p { font-size: 0.85rem; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>The Daily Chronicle</h1> <p>Delivering curated news across topics that matter to you. Select a category to explore.</p> </div> <div class="news-selector"> <div class="selector-header"> <h2>Browse News Categories</h2> <span class="icon">▼</span> </div> <div class="selector-content"> <ul class="category-list"> <li class="category-item"> <button class="category-button politics" data-category="politics"> <div class="category-icon"> <i>📊</i> </div> <div class="category-info"> <div class="category-title">Politics & Governance</div> <div class="category-description">Policy shifts, legislative debates, and global diplomacy</div> </div> </button> </li> <li class="category-item"> <button class="category-button technology" data-category="technology"> <div class="category-icon"> <i>💻</i> </div> <div class="category-info"> <div class="category-title">Technology & Innovation</div> <div class="category-description">Breakthroughs, digital trends, and tech industry insights</div> </div> </button> </li> <li class="category-item"> <button class="category-button business" data-category="business"> <div class="category-icon"> <i>📈</i> </div> <div class="category-info"> <div class="category-title">Business & Economy</div> <div class="category-description">Market analysis, corporate strategies, and economic indicators</div> </div> </button> </li> <li class="category-item"> <button class="category-button culture" data-category="culture"> <div class="category-icon"> <i>🎭</i> </div> <div class="category-info"> <div class="category-title">Arts & Culture</div> <div class="category-description">Creative expressions, societal trends, and cultural events</div> </div> </button> </li> <li class="category-item"> <button class="category-button sports" data-category="sports"> <div class="category-icon"> <i>🏆</i> </div> <div class="category-info"> <div class="category-title">Sports & Athletics</div> <div class="category-description">Competitions, athlete profiles, and sporting achievements</div> </div> </button> </li> <li class="category-item"> <button class="category-button science" data-category="science"> <div class="category-icon"> <i>🔬</i> </div> <div class="category-info"> <div class="category-title">Science & Environment</div> <div class="category-description">Research findings, climate updates, and scientific discoveries</div> </div> </button> </li> </ul> </div> </div> <div class="content-preview" id="politics-preview"> <h3>Politics & Governance</h3> <p>Navigate the complex dynamics of national and international politics with our comprehensive coverage of policy developments, electoral movements, and governance challenges.</p> <div class="headlines"> <div class="headline"> <div class="headline-dot politics-theme"></div> <div class="headline-text">Senate passes landmark climate legislation in rare bipartisan effort</div> <div class="topic-badge politics-badge">Policy</div> </div> <div class="headline"> <div class="headline-dot politics-theme"></div> <div class="headline-text">Electoral reform commission proposes new voting system framework</div> <div class="topic-badge politics-badge">Reform</div> </div> <div class="headline"> <div class="headline-dot politics-theme"></div> <div class="headline-text">Diplomatic tensions rise following controversial trade agreement</div> <div class="topic-badge politics-badge">Global</div> </div> </div> </div> <div class="content-preview" id="technology-preview"> <h3>Technology & Innovation</h3> <p>Stay at the forefront of digital transformation with our analysis of emerging technologies, startup ecosystems, and the evolving landscape of tech regulation.</p> <div class="headlines"> <div class="headline"> <div class="headline-dot technology-theme"></div> <div class="headline-text">Quantum computing breakthrough could revolutionize data encryption</div> <div class="topic-badge technology-badge">Research</div> </div> <div class="headline"> <div class="headline-dot technology-theme"></div> <div class="headline-text">AR glasses maker secures $300M in funding to challenge industry leaders</div> <div class="topic-badge technology-badge">Startups</div> </div> <div class="headline"> <div class="headline-dot technology-theme"></div> <div class="headline-text">EU proposes comprehensive AI regulation framework focused on ethics</div> <div class="topic-badge technology-badge">Policy</div> </div> </div> </div> <div class="content-preview" id="business-preview"> <h3>Business & Economy</h3> <p>Track market movements, corporate strategies, and economic trends with our insightful analysis from industry experts and financial journalists.</p> <div class="headlines"> <div class="headline"> <div class="headline-dot business-theme"></div> <div class="headline-text">Renewable energy investments reach record high amid sustainability push</div> <div class="topic-badge business-badge">Markets</div> </div> <div class="headline"> <div class="headline-dot business-theme"></div> <div class="headline-text">Major retailer announces strategic pivot to experiential commerce</div> <div class="topic-badge business-badge">Corporate</div> </div> <div class="headline"> <div class="headline-dot business-theme"></div> <div class="headline-text">Central bank signals policy shift in response to emerging inflation data</div> <div class="topic-badge business-badge">Economy</div> </div> </div> </div> <div class="content-preview" id="culture-preview"> <h3>Arts & Culture</h3> <p>Explore the rich tapestry of human creativity through our coverage of artistic movements, cultural phenomena, and the evolving social landscape.</p> <div class="headlines"> <div class="headline"> <div class="headline-dot culture-theme"></div> <div class="headline-text">Immersive digital art exhibition breaks attendance records worldwide</div> <div class="topic-badge culture-badge">Visual</div> </div> <div class="headline"> <div class="headline-dot culture-theme"></div> <div class="headline-text">Independent film about climate refugees wins top festival honors</div> <div class="topic-badge culture-badge">Cinema</div> </div> <div class="headline"> <div class="headline-dot culture-theme"></div> <div class="headline-text">Literary prize expands categories to include interactive narrative works</div> <div class="topic-badge culture-badge">Literature</div> </div> </div> </div> <div class="content-preview" id="sports-preview"> <h3>Sports & Athletics</h3> <p>Experience the thrill of competition with our comprehensive coverage of sporting events, athlete profiles, and the business of sports.</p> <div class="headlines"> <div class="headline"> <div class="headline-dot sports-theme"></div> <div class="headline-text">Underdog team completes remarkable championship run with final upset</div> <div class="topic-badge sports-badge">Tournament</div> </div> <div class="headline"> <div class="headline-dot sports-theme"></div> <div class="headline-text">Athlete's data-driven training regimen creates new performance benchmark</div> <div class="topic-badge sports-badge">Training</div> </div> <div class="headline"> <div class="headline-dot sports-theme"></div> <div class="headline-text">E-sports organization secures major sponsorship for international league</div> <div class="topic-badge sports-badge">Business</div> </div> </div> </div> <div class="content-preview" id="science-preview"> <h3>Science & Environment</h3> <p>Delve into the latest scientific discoveries, environmental developments, and technological innovations shaping our understanding of the world.</p> <div class="headlines"> <div class="headline"> <div class="headline-dot science-theme"></div> <div class="headline-text">Marine biologists discover previously unknown deep-sea ecosystem</div> <div class="topic-badge science-badge">Discovery</div> </div> <div class="headline"> <div class="headline-dot science-theme"></div> <div class="headline-text">Sustainable material innovation could revolutionize packaging industry</div> <div class="topic-badge science-badge">Materials</div> </div> <div class="headline"> <div class="headline-dot science-theme"></div> <div class="headline-text">Climate monitoring network expands with advanced satellite deployment</div> <div class="topic-badge science-badge">Climate</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const selectorHeader = document.querySelector('.selector-header'); const selectorContent = document.querySelector('.selector-content'); const categoryButtons = document.querySelectorAll('.category-button'); const contentPreviews = document.querySelectorAll('.content-preview'); // Toggle dropdown selectorHeader.addEventListener('click', function() { this.classList.toggle('active'); selectorContent.classList.toggle('active'); // If closing the dropdown, also hide all previews if (!this.classList.contains('active')) { contentPreviews.forEach(preview => { preview.classList.remove('active'); }); } }); // Handle category selection categoryButtons.forEach(button => { button.addEventListener('click', function() { const category = this.getAttribute('data-category'); // Hide all previews contentPreviews.forEach(preview => { preview.classList.remove('active'); }); // Show selected preview document.getElementById(`${category}-preview`).classList.add('active'); // Add visual feedback categoryButtons.forEach(btn => { btn.style.backgroundColor = ''; }); this.style.backgroundColor = 'rgba(237, 242, 244, 0.8)'; // Close the dropdown on mobile if (window.innerWidth < 768) { selectorHeader.classList.remove('active'); selectorContent.classList.remove('active'); } }); }); // Add ripple effect to buttons categoryButtons.forEach(button => { button.addEventListener('mousedown', function(e) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.className = 'ripple'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add CSS for ripple const style = document.createElement('style'); style.innerHTML = ` .category-button { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(0, 0, 0, 0.05); width: 100px; height: 100px; transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); }); </script> </body> </html>
