Creating visually appealing and functional user interfaces can be a daunting task. With Subframe, you can streamline this process using a drag-and-drop visual editor and beautifully crafted components.
In this article, we will explore 10 frame examples that showcase the versatility and ease of use that Subframe offers. These examples will help you understand how to build stunning UI in minutes with production-ready code.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas empower designers and developers to create pixel-perfect UI effortlessly. Loved by professionals, it ensures stunning results every time.
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 pixel-perfect UIs with unmatched efficiency. Whether you're crafting a Frame or any other UI, Subframe's intuitive tools make the process seamless.
Start creating stunning designs immediately. Sign up for free and elevate your design game today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Dashboard Frame</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --accent-light: #5dade2; --text: #ecf0f1; --text-secondary: #bdc3c7; --border: rgba(52, 152, 219, 0.3); --shadow: rgba(0, 0, 0, 0.1); --chart-1: #3498db; --chart-2: #2980b9; --chart-3: #1abc9c; --chart-4: #16a085; --success: #2ecc71; --warning: #f39c12; --danger: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--primary); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; } .dashboard-container { width: 100%; max-width: 700px; height: 700px; padding: 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; overflow: hidden; position: relative; } .dashboard-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(52, 152, 219, 0.05) 0%, rgba(44, 62, 80, 0) 70%); z-index: -1; } .header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border); } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 28px; height: 28px; border-radius: 5px; background-color: var(--accent); display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3); } .logo-text { font-weight: 600; font-size: 18px; } .user-profile { display: flex; align-items: center; gap: 12px; } .notification-icon { position: relative; cursor: pointer; transition: transform 0.2s ease; } .notification-icon:hover { transform: scale(1.1); } .notification-icon .badge { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background-color: var(--danger); border-radius: 50%; font-size: 8px; display: flex; justify-content: center; align-items: center; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-light)); display: flex; justify-content: center; align-items: center; font-weight: bold; box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3); cursor: pointer; transition: transform 0.2s ease; } .user-avatar:hover { transform: scale(1.05); } .content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 20px; overflow-y: auto; padding-right: 5px; } .content::-webkit-scrollbar { width: 4px; } .content::-webkit-scrollbar-track { background: var(--secondary); border-radius: 2px; } .content::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } .widget { background-color: var(--secondary); border-radius: 12px; padding: 15px; box-shadow: 0 4px 15px var(--shadow); transition: all 0.3s ease; position: relative; overflow: hidden; } .widget::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background-color: var(--accent); transition: height 0.3s ease; } .widget:hover::before { height: 100%; } .widget:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .key-metrics { grid-column: span 2; display: flex; justify-content: space-between; gap: 15px; } .metric-card { flex: 1; background-color: var(--secondary); border-radius: 10px; padding: 15px; box-shadow: 0 4px 15px var(--shadow); transition: all 0.3s ease; position: relative; overflow: hidden; } .metric-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background-color: var(--accent); transition: height 0.3s ease; } .metric-card:hover::before { height: 100%; } .metric-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .metric-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; } .metric-value { font-size: 22px; font-weight: 600; margin-bottom: 5px; } .metric-trend { display: flex; align-items: center; font-size: 11px; } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .widget-title { font-size: 14px; font-weight: 600; } .widget-options { cursor: pointer; transition: transform 0.2s ease; } .widget-options:hover { transform: rotate(90deg); } .revenue-chart { height: 120px; position: relative; } .chart-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 100px; } .chart-bar { width: 8px; background: linear-gradient(to top, var(--chart-1), var(--chart-2)); border-radius: 3px; transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .chart-labels { display: flex; justify-content: space-between; margin-top: 8px; } .chart-label { font-size: 10px; color: var(--text-secondary); text-align: center; width: 8px; } .task-list { display: flex; flex-direction: column; gap: 10px; } .task-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background-color: rgba(52, 73, 94, 0.5); transition: background-color 0.2s ease; } .task-item:hover { background-color: rgba(52, 73, 94, 0.8); } .task-checkbox { width: 16px; height: 16px; border: 1px solid var(--accent); border-radius: 4px; cursor: pointer; position: relative; transition: background-color 0.2s ease; } .task-checkbox.checked { background-color: var(--accent); } .task-checkbox.checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text); font-size: 10px; } .task-content { flex: 1; } .task-title { font-size: 13px; margin-bottom: 2px; } .task-info { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary); } .task-content.checked .task-title { text-decoration: line-through; color: var(--text-secondary); } .task-priority { display: flex; align-items: center; gap: 5px; font-size: 10px; } .priority-dot { width: 8px; height: 8px; border-radius: 50%; } .priority-high { background-color: var(--danger); } .priority-medium { background-color: var(--warning); } .priority-low { background-color: var(--success); } .team-activity { display: flex; flex-direction: column; gap: 12px; } .activity-item { display: flex; gap: 10px; } .activity-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--chart-3), var(--chart-4)); display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 12px; flex-shrink: 0; } .activity-content { flex: 1; } .activity-text { font-size: 12px; line-height: 1.4; } .activity-time { font-size: 10px; color: var(--text-secondary); margin-top: 2px; } .footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); } .quick-actions { display: flex; gap: 15px; } .action-button { background-color: var(--secondary); border: none; border-radius: 6px; color: var(--text); padding: 7px 12px; cursor: pointer; font-size: 12px; transition: all 0.2s ease; display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px var(--shadow); } .action-button:hover { background-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); } .status-container { display: flex; align-items: center; gap: 8px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--success); } @media (max-width: 600px) { .dashboard-container { padding: 15px; gap: 15px; } .content { grid-template-columns: 1fr; } .key-metrics { grid-column: span 1; flex-direction: column; gap: 10px; } .metric-card { padding: 10px; } .metric-value { font-size: 18px; } .widget { padding: 12px; } } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(52, 152, 219, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); } } .loading-animation { position: absolute; top: 0; left: 0; height: 2px; background-color: var(--accent); animation: loading 2s ease-in-out infinite; } @keyframes loading { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } .notification-panel { position: absolute; top: 60px; right: 20px; background-color: var(--secondary); border-radius: 10px; width: 280px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 100; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; overflow: hidden; } .notification-panel.active { transform: translateY(0); opacity: 1; visibility: visible; } .notification-header { padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .notification-title { font-weight: 600; font-size: 14px; } .notification-clear { font-size: 12px; color: var(--accent); cursor: pointer; } .notification-list { max-height: 250px; overflow-y: auto; } .notification-item { padding: 12px 15px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color 0.2s ease; } .notification-item:hover { background-color: rgba(52, 73, 94, 0.8); } .notification-item:last-child { border-bottom: none; } .notification-content { font-size: 12px; line-height: 1.4; margin-bottom: 5px; } .notification-time { font-size: 10px; color: var(--text-secondary); } .tooltip { position: absolute; background-color: var(--primary); color: var(--text); padding: 5px 10px; border-radius: 4px; font-size: 11px; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .has-tooltip:hover .tooltip { opacity: 1; visibility: visible; } </style> </head> <body> <div class="dashboard-container"> <div class="loading-animation"></div> <div class="header"> <div class="logo"> <div class="logo-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline> <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path> </svg> </div> <div class="logo-text">SpectrumMetrics</div> </div> <div class="user-profile"> <div class="notification-icon has-tooltip"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="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> <div class="badge">3</div> <div class="tooltip">Notifications</div> </div> <div class="user-avatar"> <span>JD</span> </div> </div> </div> <div class="content"> <div class="key-metrics"> <div class="metric-card pulse-animation"> <div class="metric-title">REVENUE MTD</div> <div class="metric-value">$1.42M</div> <div class="metric-trend trend-up"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 12.4% vs. last month </div> </div> <div class="metric-card"> <div class="metric-title">ACTIVE USERS</div> <div class="metric-value">8,749</div> <div class="metric-trend trend-up"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 5.2% vs. last week </div> </div> <div class="metric-card"> <div class="metric-title">CONVERSION RATE</div> <div class="metric-value">24.8%</div> <div class="metric-trend trend-down"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> 1.2% vs. last week </div> </div> <div class="metric-card"> <div class="metric-title">CHURN RATE</div> <div class="metric-value">3.1%</div> <div class="metric-trend trend-up"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 0.3% vs. target </div> </div> </div> <div class="widget"> <div class="widget-header"> <div class="widget-title">Q3 Revenue Breakdown</div> <div class="widget-options has-tooltip"> <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="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> <div class="tooltip">More Options</div> </div> </div> <div class="revenue-chart"> <div class="chart-bars"> <!-- Bars will be filled by JS --> </div> <div class="chart-labels"> <!-- Labels will be filled by JS --> </div> </div> </div> <div class="widget"> <div class="widget-header"> <div class="widget-title">Critical Tasks</div> <div class="widget-options has-tooltip"> <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="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> <div class="tooltip">More Options</div> </div> </div> <div class="task-list"> <div class="task-item"> <div class="task-checkbox"></div> <div class="task-content"> <div class="task-title">Q3 financial review presentation</div> <div class="task-info"> <div class="task-due">Due: Today</div> <div class="task-priority"> <div class="priority-dot priority-high"></div> High </div> </div> </div> </div> <div class="task-item"> <div class="task-checkbox"></div> <div class="task-content"> <div class="task-title">Finalize enterprise client onboarding</div> <div class="task-info"> <div class="task-due">Due: Tomorrow</div> <div class="task-priority"> <div class="priority-dot priority-medium"></div> Medium </div> </div> </div> </div> <div class="task-item"> <div class="task-checkbox checked"></div> <div class="task-content checked"> <div class="task-title">Security vulnerability assessment</div> <div class="task-info"> <div class="task-due">Completed</div> <div class="task-priority"> <div class="priority-dot priority-high"></div> High </div> </div> </div> </div> <div class="task-item"> <div class="task-checkbox"></div> <div class="task-content"> <div class="task-title">Update product roadmap</div> <div class="task-info"> <div class="task-due">Due: Oct 25</div> <div class="task-priority"> <div class="priority-dot priority-low"></div> Low </div> </div> </div> </div> </div> </div> <div class="widget"> <div class="widget-header"> <div class="widget-title">Team Activity</div> <div class="widget-options has-tooltip"> <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="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> <div class="tooltip">More Options</div> </div> </div> <div class="team-activity"> <div class="activity-item"> <div class="activity-avatar">AJ</div> <div class="activity-content"> <div class="activity-text">Alex Johnson updated the Q3 Sales Forecast with recent enterprise deals.</div> <div class="activity-time">Just now</div> </div> </div> <div class="activity-item"> <div class="activity-avatar">MT</div> <div class="activity-content"> <div class="activity-text">Maria Thompson uploaded the updated customer acquisition strategy document.</div> <div class="activity-time">2 hours ago</div> </div> </div> <div class="activity-item"> <div class="activity-avatar">RB</div> <div class="activity-content"> <div class="activity-text">Robert Brown resolved 3 critical security issues in the payment gateway.</div> <div class="activity-time">5 hours ago</div> </div> </div> <div class="activity-item"> <div class="activity-avatar">SK</div> <div class="activity-content"> <div class="activity-text">Sarah Kim completed the user experience audit for the mobile application.</div> <div class="activity-time">Yesterday</div> </div> </div> </div> </div> </div> <div class="footer"> <div class="status-container"> <div class="status-dot"></div> All systems operational </div> <div class="quick-actions"> <button class="action-button"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> New Report </button> <button class="action-button"> <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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path> </svg> Edit </button> </div> </div> <div class="notification-panel"> <div class="notification-header"> <div class="notification-title">Notifications</div> <div class="notification-clear">Clear All</div> </div> <div class="notification-list"> <div class="notification-item"> <div class="notification-content">Monthly revenue report is ready for review.</div> <div class="notification-time">10 minutes ago</div> </div> <div class="notification-item"> <div class="notification-content">New comment from CEO on Q3 forecast document.</div> <div class="notification-time">1 hour ago</div> </div> <div class="notification-item"> <div class="notification-content">Security alert: 2 failed login attempts detected.</div> <div class="notification-time">2 hours ago</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Revenue chart data const revenueData = [65, 45, 75, 55, 80, 60, 30, 70, 90, 50, 40, 85]; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const chartBars = document.querySelector('.chart-bars'); const chartLabels = document.querySelector('.chart-labels'); // Clear existing elements chartBars.innerHTML = ''; chartLabels.innerHTML = ''; // Create chart bars and labels revenueData.forEach((value, index) => { // Create bar const bar = document.createElement('div'); bar.className = 'chart-bar'; bar.style.height = '0'; chartBars.appendChild(bar); // Create label const label = document.createElement('div'); label.className = 'chart-label'; label.textContent = months[index]; chartLabels.appendChild(label); // Animate bars after a delay setTimeout(() => { bar.style.height = `${value}px`; }, 100 * index); }); // Task checkbox functionality document.querySelectorAll('.task-checkbox').forEach(checkbox => { checkbox.addEventListener('click', function() { this.classList.toggle('checked'); const taskContent = this.nextElementSibling; taskContent.classList.toggle('checked'); }); }); // Notification panel toggle const notificationIcon = document.querySelector('.notification-icon'); const notificationPanel = document.querySelector('.notification-panel'); notificationIcon.addEventListener('click', function(e) { e.stopPropagation(); notificationPanel.classList.toggle('active'); }); document.addEventListener('click', function(e) { if (!notificationPanel.contains(e.target) && !notificationIcon.contains(e.target)) { notificationPanel.classList.remove('active'); } }); // Clear notifications document.querySelector('.notification-clear').addEventListener('click', function() { document.querySelectorAll('.notification-item').forEach(item => { item.style.height = '0'; item.style.opacity = '0'; item.style.padding = '0'; item.style.margin = '0'; item.style.overflow = 'hidden'; setTimeout(() => { item.remove(); }, 300); }); document.querySelector('.badge').style.display = 'none'; }); // Action buttons functionality (just visual feedback) document.querySelectorAll('.action-button').forEach(button => { button.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 100); }); }); // Simulate loading const loadingAnimation = document.querySelector('.loading-animation'); setTimeout(() => { loadingAnimation.style.display = 'none'; }, 2000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #4F46E5; --secondary-color: #F97316; --tertiary-color: #10B981; --light-bg: #F9FAFB; --dark-text: #1F2937; --light-text: #F3F4F6; --shadow-color: rgba(0, 0, 0, 0.1); --radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-bg); display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; perspective: 1000px; overflow-x: hidden; } .showcase-container { width: 100%; max-width: 700px; padding: 20px; } .showcase-header { text-align: center; margin-bottom: 25px; position: relative; } .showcase-header h1 { font-size: 28px; color: var(--dark-text); margin-bottom: 10px; font-weight: 700; background: linear-gradient(to right, var(--primary-color), var(--tertiary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; } .showcase-header p { font-size: 16px; color: var(--dark-text); opacity: 0.8; max-width: 80%; margin: 0 auto; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .product-card { position: relative; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #ffffff, #f3f4f6); box-shadow: 0 8px 20px var(--shadow-color); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; cursor: pointer; height: 100%; } .product-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 2px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--tertiary-color)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover { transform: translateY(-10px) rotateX(5deg); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .product-card:hover::before { opacity: 1; } .product-card:hover .product-badge { transform: translateY(0) rotate(0); opacity: 1; } .product-image { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.5s ease; } .product-card:hover .product-image { transform: scale(1.08); } .product-badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--light-text); padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; z-index: 2; transform: translateY(-20px) rotate(-10deg); opacity: 0; transition: all 0.3s ease 0.1s; } .product-info { padding: 15px; position: relative; z-index: 1; } .product-title { font-size: 16px; font-weight: 600; color: var(--dark-text); margin-bottom: 8px; } .product-description { font-size: 14px; color: var(--dark-text); opacity: 0.7; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-footer { display: flex; justify-content: space-between; align-items: center; } .product-price { font-size: 18px; font-weight: 700; color: var(--primary-color); } .product-rating { display: flex; align-items: center; } .rating-stars { color: gold; margin-right: 5px; } .rating-count { font-size: 12px; color: var(--dark-text); opacity: 0.7; } .view-button { position: absolute; bottom: -40px; left: 0; right: 0; background: linear-gradient(135deg, var(--primary-color), var(--tertiary-color)); color: var(--light-text); border: none; padding: 10px; text-align: center; font-weight: 600; transition: all 0.3s ease; opacity: 0; } .product-card:hover .view-button { bottom: 0; opacity: 1; } .filter-controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .filter-button { background: white; border: 1px solid #e5e7eb; border-radius: 20px; padding: 8px 15px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .filter-button:hover, .filter-button.active { background: var(--primary-color); color: white; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2); } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); opacity: 0.4; } .search-container { position: relative; margin-bottom: 20px; } .search-input { width: 100%; padding: 12px 20px; padding-left: 40px; border-radius: 30px; border: 1px solid #e5e7eb; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2); } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9ca3af; } @media (max-width: 640px) { .product-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .showcase-header h1 { font-size: 24px; } .showcase-header p { font-size: 14px; } .product-image { height: 140px; } .product-info { padding: 10px; } .product-title { font-size: 14px; } .product-description { font-size: 12px; -webkit-line-clamp: 1; } .product-price { font-size: 16px; } } /* Loading animation */ .loader { width: 100%; height: 3px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--tertiary-color)); position: absolute; top: 0; left: 0; z-index: 100; animation: loading 2s infinite; opacity: 0; transition: opacity 0.3s ease; } .loading .loader { opacity: 1; } @keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Quick view modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { background: white; border-radius: var(--radius); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; padding: 20px; position: relative; transform: translateY(20px); transition: transform 0.3s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .modal.active .modal-content { transform: translateY(0); } .modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--dark-text); transition: color 0.3s ease; } .modal-close:hover { color: var(--primary-color); } .modal-image { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; } .modal-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--dark-text); } .modal-description { font-size: 14px; line-height: 1.6; color: var(--dark-text); opacity: 0.8; margin-bottom: 15px; } .modal-price { font-size: 22px; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } .modal-button { flex: 1; padding: 10px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .modal-button.primary { background: var(--primary-color); color: white; } .modal-button.secondary { background: #e5e7eb; color: var(--dark-text); } .modal-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .color-options { display: flex; gap: 8px; margin-bottom: 15px; } .color-option { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; position: relative; } .color-option.selected::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; } .quantity-selector { display: flex; align-items: center; margin-bottom: 15px; } .quantity-button { width: 32px; height: 32px; background: #f3f4f6; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; } .quantity-button:hover { background: #e5e7eb; } .quantity-value { width: 50px; text-align: center; font-weight: 600; } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .label-new { position: absolute; top: -10px; right: -10px; background: var(--tertiary-color); color: white; font-size: 12px; padding: 5px 8px; border-radius: 20px; z-index: 2; animation: pulse 2s infinite; } .label-sale { position: absolute; top: -10px; right: -10px; background: var(--secondary-color); color: white; font-size: 12px; padding: 5px 8px; border-radius: 20px; z-index: 2; } </style> </head> <body> <div class="showcase-container"> <div class="loader"></div> <div class="showcase-header"> <h1>Discover Our Featured Products</h1> <p>Explore our curated collection of premium items with exclusive deals just for you</p> </div> <div class="search-container"> <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> <input type="text" class="search-input" placeholder="Search products..."> </div> <div class="filter-controls"> <button class="filter-button active" data-filter="all">All Products</button> <button class="filter-button" data-filter="electronics">Electronics</button> <button class="filter-button" data-filter="home">Home & Living</button> <button class="filter-button" data-filter="fashion">Fashion</button> </div> <div class="product-grid"> <!-- Products will be dynamically populated here --> </div> </div> <div class="modal"> <div class="modal-content"> <button class="modal-close">×</button> <img src="" class="modal-image" alt="Product image"> <h2 class="modal-title"></h2> <div class="modal-price"></div> <div class="product-rating"> <div class="rating-stars"></div> <div class="rating-count"></div> </div> <p class="modal-description"></p> <div class="color-options"> <div class="color-option selected" style="background: #3B82F6;"></div> <div class="color-option" style="background: #10B981;"></div> <div class="color-option" style="background: #F97316;"></div> <div class="color-option" style="background: #6B7280;"></div> </div> <div class="quantity-selector"> <button class="quantity-button minus">-</button> <div class="quantity-value">1</div> <button class="quantity-button plus">+</button> </div> <div class="modal-actions"> <button class="modal-button secondary">Add to Wishlist</button> <button class="modal-button primary">Add to Cart</button> </div> </div> </div> <div class="particles"></div> <script> // Sample product data const products = [ { id: 1, title: "Ultra HD Smart TV", description: "65\" 4K display with AI optimization for crisp, vibrant images with HDR10+ support and 120Hz refresh rate.", price: "$1,299.99", image: "https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?auto=format&fit=crop&w=800&q=80", badge: "Limited Stock", rating: 4.8, reviews: 124, category: "electronics", isNew: true, isSale: false }, { id: 2, title: "Ergonomic Office Chair", description: "Premium mesh back with lumbar support, adjustable height and tilt for all-day comfort during extended work sessions.", price: "$249.99", image: "https://images.unsplash.com/photo-1505843490538-5133c6c7d0e1?auto=format&fit=crop&w=800&q=80", badge: "Best Seller", rating: 4.5, reviews: 89, category: "home", isNew: false, isSale: true }, { id: 3, title: "Wireless Noise-Cancelling Headphones", description: "40 hours of battery life with active noise cancellation and transparency mode for immersive audio anywhere.", price: "$329.99", image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=800&q=80", badge: "Top Rated", rating: 4.9, reviews: 213, category: "electronics", isNew: true, isSale: false }, { id: 4, title: "Minimalist Desk Lamp", description: "Adjustable LED lamp with 5 color temperatures and brightness levels, perfect for your workspace.", price: "$59.99", image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=800&q=80", badge: "Eco-Friendly", rating: 4.3, reviews: 67, category: "home", isNew: false, isSale: false }, { id: 5, title: "Premium Leather Wallet", description: "Handcrafted from full-grain Italian leather with RFID protection and 8 card slots for organized essentials.", price: "$79.99", image: "https://images.unsplash.com/photo-1627123424574-724758594e93?auto=format&fit=crop&w=800&q=80", badge: "Handcrafted", rating: 4.7, reviews: 42, category: "fashion", isNew: false, isSale: true }, { id: 6, title: "Smart Fitness Watch", description: "Track health metrics, workouts, and sleep with 7-day battery life and water resistance up to 50 meters.", price: "$199.99", image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=80", badge: "New Release", rating: 4.6, reviews: 156, category: "electronics", isNew: true, isSale: false } ]; // DOM elements const productGrid = document.querySelector('.product-grid'); const filterButtons = document.querySelectorAll('.filter-button'); const searchInput = document.querySelector('.search-input'); const modal = document.querySelector('.modal'); const modalClose = document.querySelector('.modal-close'); const modalImage = document.querySelector('.modal-image'); const modalTitle = document.querySelector('.modal-title'); const modalPrice = document.querySelector('.modal-price'); const modalDescription = document.querySelector('.modal-description'); const modalRatingStars = document.querySelector('.rating-stars'); const modalRatingCount = document.querySelector('.rating-count'); const colorOptions = document.querySelectorAll('.color-option'); const quantityMinus = document.querySelector('.quantity-button.minus'); const quantityPlus = document.querySelector('.quantity-button.plus'); const quantityValue = document.querySelector('.quantity-value'); const container = document.querySelector('.showcase-container'); // Initialize the product grid function renderProducts(productsToRender) { productGrid.innerHTML = ''; container.classList.add('loading'); setTimeout(() => { productsToRender.forEach(product => { const productEl = document.createElement('div'); productEl.className = 'product-card'; productEl.setAttribute('data-id', product.id); // Generate star rating HTML const fullStars = Math.floor(product.rating); const halfStar = product.rating % 1 >= 0.5; const emptyStars = 5 - fullStars - (halfStar ? 1 : 0); let starsHTML = ''; for (let i = 0; i < fullStars; i++) { starsHTML += '★'; } if (halfStar) { starsHTML += '⭐'; } for (let i = 0; i < emptyStars; i++) { starsHTML += '☆'; } productEl.innerHTML = ` <span class="product-badge">${product.badge}</span> ${product.isNew ? '<span class="label-new">NEW</span>' : ''} ${product.isSale ? '<span class="label-sale">SALE</span>' : ''} <img class="product-image" src="${product.image}" alt="${product.title}"> <div class="product-info"> <h3 class="product-title">${product.title}</h3> <p class="product-description">${product.description}</p> <div class="product-footer"> <div class="product-price">${product.price}</div> <div class="product-rating"> <div class="rating-stars">${starsHTML}</div> <div class="rating-count">(${product.reviews})</div> </div> </div> </div> <button class="view-button">Quick View</button> `; productGrid.appendChild(productEl); }); // Add event listeners to product cards document.querySelectorAll('.product-card').forEach(card => { card.addEventListener('click', handleProductClick); }); // Create floating particles animation createParticles(); container.classList.remove('loading'); }, 500); } // Filter products function filterProducts(category) { let filteredProducts; if (category === 'all') { filteredProducts = products; } else { filteredProducts = products.filter(product => product.category === category); } renderProducts(filteredProducts); } // Search products function searchProducts(query) { if (!query.trim()) { renderProducts(products); return; } const searchResults = products.filter(product => product.title.toLowerCase().includes(query.toLowerCase()) || product.description.toLowerCase().includes(query.toLowerCase()) ); renderProducts(searchResults); } // Handle product click function handleProductClick(e) { if (e.target.classList.contains('view-button')) { const productId = parseInt(this.getAttribute('data-id')); const product = products.find(p => p.id === productId); if (product) { modalImage.src = product.image; modalTitle.textContent = product.title; modalPrice.textContent = product.price; modalDescription.textContent = product.description; // Generate star rating HTML const fullStars = Math.floor(product.rating); const halfStar = product.rating % 1 >= 0.5; const emptyStars = 5 - fullStars - (halfStar ? 1 : 0); let starsHTML = ''; for (let i = 0; i < fullStars; i++) { starsHTML += '★'; } if (halfStar) { starsHTML += '⭐'; } for (let i = 0; i < emptyStars; i++) { starsHTML += '☆'; } modalRatingStars.innerHTML = starsHTML; modalRatingCount.textContent = `(${product.reviews} reviews)`; modal.classList.add('active'); } } } // Create floating particles animation function createParticles() { const particlesContainer = document.querySelector('.particles'); particlesContainer.innerHTML = ''; const colors = ['#4F46E5', '#F97316', '#10B981']; for (let i = 0; i < 15; i++) { const particle = document.createElement('div'); particle.className = 'particle'; const size = Math.random() * 6 + 3; const x = Math.random() * 100; const y = Math.random() * 100; const color = colors[Math.floor(Math.random() * colors.length)]; const delay = Math.random() * 2; const duration = Math.random() * 10 + 10; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}%`; particle.style.top = `${y}%`; particle.style.background = color; particle.style.opacity = (Math.random() * 0.5 + 0.1).toString(); particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; particlesContainer.appendChild(particle); } } // Event Listeners filterButtons.forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to the clicked button button.classList.add('active'); // Filter products filterProducts(button.getAttribute('data-filter')); }); }); searchInput.addEventListener('input', (e) => { searchProducts(e.target.value); }); modalClose.addEventListener('click', () => { modal.classList.remove('active'); }); modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('active'); } }); colorOptions.forEach(option => { option.addEventListener('click', () => { colorOptions.forEach(opt => opt.classList.remove('selected')); option.classList.add('selected'); }); }); quantityMinus.addEventListener('click', () => { let quantity = parseInt(quantityValue.textContent); if (quantity > 1) { quantityValue.textContent = quantity - 1; } }); quantityPlus.addEventListener('click', () => { let quantity = parseInt(quantityValue.textContent); quantityValue.textContent = quantity + 1; }); document.querySelectorAll('.modal-button').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); button.style.animation = 'pulse 0.5s'; setTimeout(() => { button.style.animation = ''; }, 500); }); }); // Initialize the showcase window.addEventListener('DOMContentLoaded', () => { renderProducts(products); createParticles(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zenith - Personal Wellness Tracker</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-tap-highlight-color: transparent; } :root { --primary: #6c5ce7; --secondary: #a29bfe; --accent: #00cec9; --danger: #ff7675; --success: #55efc4; --dark: #2d3436; --light: #f5f6fa; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } body { background-color: #f9f9f9; color: var(--dark); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .mobile-frame { width: 320px; height: 650px; background: var(--light); border-radius: 30px; overflow: hidden; position: relative; box-shadow: var(--shadow), 0 10px 20px rgba(0, 0, 0, 0.15); transition: var(--transition); } .status-bar { height: 30px; background: var(--dark); display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: white; font-size: 12px; } .status-bar .time { font-weight: bold; } .status-bar .icons { display: flex; gap: 8px; } .app-content { height: calc(100% - 80px); overflow-y: auto; padding: 15px; scroll-behavior: smooth; position: relative; } .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px 0; } .user-info { display: flex; align-items: center; gap: 10px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--primary), var(--secondary)); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 16px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); transition: var(--transition); } .avatar:hover, .avatar:active { transform: scale(1.05); } .greeting { display: flex; flex-direction: column; } .greeting .hello { font-size: 14px; color: #777; } .greeting .name { font-size: 18px; font-weight: bold; } .notifications { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); position: relative; cursor: pointer; transition: var(--transition); } .notifications:hover, .notifications:active { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .notifications .badge { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: white; font-size: 12px; display: flex; justify-content: center; align-items: center; font-weight: bold; } .stats-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; } .stat-card { background: white; border-radius: 15px; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; transition: var(--transition); position: relative; overflow: hidden; } .stat-card:hover, .stat-card:active { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .stat-card::before { content: ''; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(108, 92, 231, 0.1); top: -50px; right: -50px; z-index: 0; } .stat-title { font-size: 14px; color: #777; margin-bottom: 5px; z-index: 1; } .stat-value { font-size: 24px; font-weight: bold; color: var(--dark); margin-bottom: 5px; z-index: 1; } .stat-progress { height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; z-index: 1; } .progress-bar { height: 100%; border-radius: 3px; transition: width 1s ease-in-out; } .steps .progress-bar { background: linear-gradient(90deg, var(--primary), var(--secondary)); } .water .progress-bar { background: linear-gradient(90deg, #74b9ff, var(--accent)); } .calories .progress-bar { background: linear-gradient(90deg, #ff7675, #fab1a0); } .sleep .progress-bar { background: linear-gradient(90deg, #a29bfe, #6c5ce7); } .section-title { font-size: 18px; font-weight: bold; margin: 25px 0 15px; display: flex; justify-content: space-between; align-items: center; } .section-title .view-all { font-size: 14px; color: var(--primary); font-weight: normal; cursor: pointer; transition: var(--transition); } .section-title .view-all:hover { text-decoration: underline; } .workouts-container { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .workouts-container::-webkit-scrollbar { height: 3px; } .workouts-container::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 3px; } .workout-card { min-width: 150px; border-radius: 15px; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; transition: var(--transition); scroll-snap-align: start; position: relative; overflow: hidden; background: white; cursor: pointer; } .workout-card:hover, .workout-card:active { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .workout-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; color: white; font-size: 18px; } .running .workout-icon { background: linear-gradient(145deg, #ff9a9e, #fad0c4); } .cycling .workout-icon { background: linear-gradient(145deg, #a18cd1, #fbc2eb); } .yoga .workout-icon { background: linear-gradient(145deg, #84fab0, #8fd3f4); } .workout-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .workout-info { font-size: 14px; color: #777; } .action-button { display: flex; justify-content: center; align-items: center; padding: 10px; background: var(--primary); color: white; font-weight: bold; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin-top: 10px; transition: var(--transition); } .action-button:hover, .action-button:active { background: #5d4fd6; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .challenges-section { margin: 25px 0; } .challenge-card { background: white; border-radius: 15px; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; align-items: center; gap: 15px; margin-bottom: 15px; transition: var(--transition); cursor: pointer; } .challenge-card:hover, .challenge-card:active { transform: translateX(5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .challenge-icon { min-width: 50px; height: 50px; border-radius: 12px; display: flex; justify-content: center; align-items: center; color: white; font-size: 20px; } .monthly .challenge-icon { background: linear-gradient(145deg, var(--primary), #8067e6); } .weekly .challenge-icon { background: linear-gradient(145deg, var(--accent), #5fffd9); } .challenge-info { flex: 1; } .challenge-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .challenge-description { font-size: 14px; color: #777; } .challenge-participants { display: flex; align-items: center; margin-top: 8px; } .participant { width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; margin-right: -8px; background: var(--primary); color: white; display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: bold; } .participant:nth-child(2) { background: var(--accent); } .participant:nth-child(3) { background: var(--danger); } .more-participants { font-size: 12px; color: #777; margin-left: 12px; } .nav-bar { height: 60px; background: white; position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.05); z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 10px; transition: var(--transition); cursor: pointer; position: relative; } .nav-item.active { color: var(--primary); } .nav-item:hover, .nav-item:active { background: rgba(0, 0, 0, 0.03); } .nav-item .nav-icon { font-size: 20px; transition: var(--transition); } .nav-item .nav-label { font-size: 12px; font-weight: 500; } .nav-item.active .nav-icon { transform: translateY(-5px); } .nav-indicator { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: 0; transition: var(--transition); } .nav-item.active .nav-indicator { opacity: 1; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } .floating-button { position: absolute; bottom: 80px; right: 20px; width: 50px; height: 50px; border-radius: 25px; background: linear-gradient(145deg, var(--primary), #5d4fd6); color: white; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3); cursor: pointer; transition: var(--transition); z-index: 10; } .floating-button:hover, .floating-button:active { transform: scale(1.1) rotate(45deg); box-shadow: 0 6px 15px rgba(108, 92, 231, 0.4); } .quick-actions { position: absolute; bottom: 140px; right: 20px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(20px); transition: var(--transition); z-index: 9; } .quick-actions.visible { opacity: 1; transform: translateY(0); } .quick-action { display: flex; align-items: center; gap: 10px; padding: 8px 15px; background: white; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: var(--transition); } .quick-action:hover, .quick-action:active { transform: translateX(-5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .quick-action-icon { width: 30px; height: 30px; border-radius: 15px; background: rgba(108, 92, 231, 0.1); display: flex; justify-content: center; align-items: center; color: var(--primary); } .quick-action-text { font-size: 14px; font-weight: 500; } /* Loading animation */ .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--light); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 1; transition: opacity 0.5s ease-out; } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .loading-spinner { width: 50px; height: 50px; border-radius: 50%; border: 3px solid rgba(108, 92, 231, 0.1); border-top-color: var(--primary); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Toast notification */ .toast { position: absolute; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: rgba(0, 0, 0, 0.8); color: white; padding: 12px 20px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 1000; text-align: center; } .toast.visible { transform: translateX(-50%) translateY(0); } /* Responsive adjustments */ @media (max-width: 400px) { .mobile-frame { width: 100%; height: 100%; border-radius: 0; box-shadow: none; } } </style> </head> <body> <div class="mobile-frame"> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> <div class="status-bar"> <div class="time">9:41</div> <div class="icons"> <span>📶</span> <span>🔋</span> </div> </div> <div class="app-content"> <div class="app-header"> <div class="user-info"> <div class="avatar">JS</div> <div class="greeting"> <div class="hello">Good morning,</div> <div class="name">Jamie Smith</div> </div> </div> <div class="notifications"> <span>🔔</span> <div class="badge">3</div> </div> </div> <div class="stats-container"> <div class="stat-card steps"> <div class="stat-title">Daily Steps</div> <div class="stat-value">6,834</div> <div class="stat-progress"> <div class="progress-bar" style="width: 68%;"></div> </div> </div> <div class="stat-card water"> <div class="stat-title">Water Intake</div> <div class="stat-value">1.2L</div> <div class="stat-progress"> <div class="progress-bar" style="width: 60%;"></div> </div> </div> <div class="stat-card calories"> <div class="stat-title">Calories</div> <div class="stat-value">1,450</div> <div class="stat-progress"> <div class="progress-bar" style="width: 75%;"></div> </div> </div> <div class="stat-card sleep"> <div class="stat-title">Sleep</div> <div class="stat-value">7h 15m</div> <div class="stat-progress"> <div class="progress-bar" style="width: 85%;"></div> </div> </div> </div> <div class="section-title"> <span>Today's Workouts</span> <span class="view-all">View All</span> </div> <div class="workouts-container"> <div class="workout-card running"> <div class="workout-icon">🏃♂️</div> <div class="workout-title">Morning Run</div> <div class="workout-info">5km • 25 mins</div> <div class="action-button">Start</div> </div> <div class="workout-card cycling"> <div class="workout-icon">🚴♀️</div> <div class="workout-title">Cycling</div> <div class="workout-info">10km • 40 mins</div> <div class="action-button">Start</div> </div> <div class="workout-card yoga"> <div class="workout-icon">🧘♀️</div> <div class="workout-title">Evening Yoga</div> <div class="workout-info">15 mins • Low</div> <div class="action-button">Start</div> </div> </div> <div class="section-title"> <span>Challenges</span> <span class="view-all">View All</span> </div> <div class="challenges-section"> <div class="challenge-card monthly"> <div class="challenge-icon">🏆</div> <div class="challenge-info"> <div class="challenge-title">10K Steps Daily</div> <div class="challenge-description">3 days remaining</div> <div class="challenge-participants"> <div class="participant">JS</div> <div class="participant">TK</div> <div class="participant">AL</div> <div class="more-participants">+15 more</div> </div> </div> </div> <div class="challenge-card weekly"> <div class="challenge-icon">🌊</div> <div class="challenge-info"> <div class="challenge-title">Water Challenge</div> <div class="challenge-description">Drink 2L daily</div> <div class="challenge-participants"> <div class="participant">JS</div> <div class="participant">TK</div> <div class="participant">AL</div> <div class="more-participants">+8 more</div> </div> </div> </div> </div> </div> <div class="floating-button">+</div> <div class="quick-actions"> <div class="quick-action"> <div class="quick-action-icon">📝</div> <div class="quick-action-text">Log Activity</div> </div> <div class="quick-action"> <div class="quick-action-icon">💧</div> <div class="quick-action-text">Log Water</div> </div> <div class="quick-action"> <div class="quick-action-icon">🥗</div> <div class="quick-action-text">Log Meal</div> </div> </div> <div class="nav-bar"> <div class="nav-item active"> <div class="nav-indicator"></div> <div class="nav-icon">🏠</div> <div class="nav-label">Home</div> </div> <div class="nav-item"> <div class="nav-indicator"></div> <div class="nav-icon">📊</div> <div class="nav-label">Stats</div> </div> <div class="nav-item"> <div class="nav-indicator"></div> <div class="nav-icon">🏋️♀️</div> <div class="nav-label">Workouts</div> </div> <div class="nav-item"> <div class="nav-indicator"></div> <div class="nav-icon">👤</div> <div class="nav-label">Profile</div> </div> </div> <div class="toast">Activity logged successfully!</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Loading animation setTimeout(() => { document.querySelector('.loading-overlay').classList.add('hidden'); }, 1500); // Progress bar animation setTimeout(() => { const progressBars = document.querySelectorAll('.progress-bar'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 300); }); }, 1800); // Navigation functionality const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { // Remove active class from all items navItems.forEach(item => item.classList.remove('active')); // Add active class to clicked item this.classList.add('active'); // Show toast notification when changing tabs const toast = document.querySelector('.toast'); toast.textContent = `${this.querySelector('.nav-label').textContent} section`; toast.classList.add('visible'); setTimeout(() => { toast.classList.remove('visible'); }, 2000); }); }); // Floating button functionality const floatingBtn = document.querySelector('.floating-button'); const quickActions = document.querySelector('.quick-actions'); let isOpen = false; floatingBtn.addEventListener('click', function() { isOpen = !isOpen; if (isOpen) { quickActions.classList.add('visible'); floatingBtn.style.transform = 'rotate(45deg)'; } else { quickActions.classList.remove('visible'); floatingBtn.style.transform = 'rotate(0)'; } }); // Quick action functionality const quickActionBtns = document.querySelectorAll('.quick-action'); quickActionBtns.forEach(btn => { btn.addEventListener('click', function() { const actionText = this.querySelector('.quick-action-text').textContent; const toast = document.querySelector('.toast'); toast.textContent = `${actionText} completed!`; toast.classList.add('visible'); // Close quick actions menu quickActions.classList.remove('visible'); floatingBtn.style.transform = 'rotate(0)'; isOpen = false; setTimeout(() => { toast.classList.remove('visible'); }, 2000); }); }); // Workout card functionality const workoutCards = document.querySelectorAll('.workout-card'); workoutCards.forEach(card => { const startBtn = card.querySelector('.action-button'); startBtn.addEventListener('click', function(e) { e.stopPropagation(); // Prevent card click event // Show toast notification const workoutType = card.querySelector('.workout-title').textContent; const toast = document.querySelector('.toast'); toast.textContent = `${workoutType} started!`; toast.classList.add('visible'); // Add pulse animation to card card.classList.add('pulse'); setTimeout(() => { toast.classList.remove('visible'); card.classList.remove('pulse'); }, 2000); }); card.addEventListener('click', function() { const workoutType = this.querySelector('.workout-title').textContent; const toast = document.querySelector('.toast'); toast.textContent = `${workoutType} details`; toast.classList.add('visible'); setTimeout(() => { toast.classList.remove('visible'); }, 2000); }); }); // Challenge card functionality const challengeCards = document.querySelectorAll('.challenge-card'); challengeCards.forEach(card => { card.addEventListener('click', function() { const challengeType = this.querySelector('.challenge-title').textContent; const toast = document.querySelector('.toast'); toast.textContent = `Joined: ${challengeType}`; toast.classList.add('visible'); // Visual feedback this.style.transform = 'translateX(5px)'; setTimeout(() => { this.style.transform = ''; }, 300); setTimeout(() => { toast.classList.remove('visible'); }, 2000); }); }); // View all buttons const viewAllBtns = document.querySelectorAll('.view-all'); viewAllBtns.forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); const sectionType = this.parentElement.querySelector('span:first-child').textContent; const toast = document.querySelector('.toast'); toast.textContent = `Viewing all ${sectionType}`; toast.classList.add('visible'); setTimeout(() => { toast.classList.remove('visible'); }, 2000); }); }); // Notification icon functionality const notificationBtn = document.querySelector('.notifications'); notificationBtn.addEventListener('click', function() { const toast = document.querySelector('.toast'); toast.textContent = "3 new notifications"; toast.classList.add('visible'); // Remove badge after click const badge = this.querySelector('.badge'); badge.style.transform = 'scale(0)'; setTimeout(() => { toast.classList.remove('visible'); badge.style.display = 'none'; }, 2000); }); // Avatar click const avatar = document.querySelector('.avatar'); avatar.addEventListener('click', function() { const toast = document.querySelector('.toast'); toast.textContent = "Profile settings"; toast.classList.add('visible'); setTimeout(() => { toast.classList.remove('visible'); }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #5C62F1; --secondary: #FF6B6B; --accent: #FFD166; --dark: #2E3057; --light: #F8F9FA; --success: #06D6A0; --border-radius: 12px; --shadow: 0 8px 20px rgba(46, 48, 87, 0.12); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; position: relative; } .learning-platform { width: 100%; max-width: 700px; height: 700px; background-color: white; border-radius: var(--border-radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; position: relative; } .platform-header { background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%); color: white; padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; } .platform-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.5px; } .user-info { display: flex; align-items: center; gap: 10px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--accent); display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--dark); } .platform-content { flex: 1; overflow-y: auto; padding: 25px; position: relative; } .course-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .course-title h2 { font-size: 1.8rem; font-weight: 700; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .progress-indicator { display: flex; align-items: center; gap: 10px; } .progress-bar { width: 100px; height: 10px; background-color: rgba(92, 98, 241, 0.2); border-radius: 10px; overflow: hidden; } .progress-fill { height: 100%; width: 35%; background-color: var(--primary); border-radius: 10px; transition: width 0.5s ease; } .progress-text { font-size: 0.9rem; font-weight: 600; color: var(--primary); } .module-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .module { background-color: white; border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); overflow: hidden; transition: var(--transition); } .module:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .module-header { padding: 15px 20px; background-color: rgba(92, 98, 241, 0.05); display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-left: 4px solid transparent; transition: var(--transition); } .module.active .module-header { border-left-color: var(--primary); background-color: rgba(92, 98, 241, 0.1); } .module-title { display: flex; align-items: center; gap: 10px; } .module-icon { width: 30px; height: 30px; border-radius: 8px; background-color: var(--primary); display: flex; justify-content: center; align-items: center; color: white; } .module-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } .module.active .module-content { max-height: 500px; } .module-details { padding: 20px; } .lesson-list { display: flex; flex-direction: column; gap: 10px; } .lesson { display: flex; align-items: center; padding: 12px 15px; border-radius: 8px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .lesson:hover { background-color: rgba(92, 98, 241, 0.05); } .lesson.active { background-color: rgba(92, 98, 241, 0.1); } .lesson-status { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--primary); margin-right: 15px; display: flex; justify-content: center; align-items: center; position: relative; transition: var(--transition); } .lesson.complete .lesson-status { background-color: var(--success); border-color: var(--success); } .lesson.complete .lesson-status:after { content: "✓"; color: white; font-size: 12px; font-weight: bold; } .lesson-title { flex: 1; font-weight: 500; } .lesson-time { font-size: 0.8rem; color: #888; display: flex; align-items: center; gap: 5px; } .expandable-trigger { transition: transform 0.3s ease; } .module.active .expandable-trigger { transform: rotate(180deg); } .resource-section { background: linear-gradient(to right, #f7f9fc, #eef1f5); border-radius: var(--border-radius); padding: 20px; margin-top: 25px; position: relative; overflow: hidden; } .resource-section h3 { margin-bottom: 15px; color: var(--dark); font-size: 1.2rem; font-weight: 600; } .resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .resource-item { background-color: white; border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; } .resource-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .resource-icon { width: 35px; height: 35px; border-radius: 8px; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.2rem; } .resource-icon.pdf { background-color: var(--secondary); } .resource-icon.video { background-color: var(--accent); color: var(--dark); } .resource-info { flex: 1; } .resource-title { font-weight: 500; font-size: 0.9rem; margin-bottom: 5px; } .resource-size { font-size: 0.75rem; color: #888; } .platform-footer { background-color: white; border-top: 1px solid #eee; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; } .nav-buttons { display: flex; gap: 15px; } .nav-btn { background-color: var(--light); border: none; border-radius: 8px; padding: 10px 15px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 8px; } .nav-btn:hover { background-color: #eef1f5; } .nav-btn.primary { background-color: var(--primary); color: white; } .nav-btn.primary:hover { background-color: #4a4fd8; } .nav-btn.disabled { opacity: 0.6; cursor: not-allowed; } .status-indicator { display: flex; align-items: center; gap: 10px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--success); position: relative; } .status-dot::after { content: ''; position: absolute; top: -4px; left: -4px; width: 16px; height: 16px; border-radius: 50%; background-color: rgba(6, 214, 160, 0.3); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.8; } 70% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } } .status-text { font-size: 0.85rem; color: #555; } /* Interactive course content area */ .course-content { display: none; padding: 20px; animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .course-content.active { display: block; } .content-header { margin-bottom: 20px; } .content-header h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--dark); } .content-nav { display: flex; gap: 10px; margin-bottom: 20px; } .content-nav-item { padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: var(--transition); background-color: #f0f2f5; } .content-nav-item:hover { background-color: #e6e8eb; } .content-nav-item.active { background-color: var(--primary); color: white; } .content-body { line-height: 1.6; } .content-body p { margin-bottom: 15px; } .content-body img { max-width: 100%; border-radius: var(--border-radius); margin-bottom: 15px; } .content-body .highlight { background-color: rgba(255, 209, 102, 0.2); padding: 15px; border-radius: 8px; border-left: 4px solid var(--accent); margin-bottom: 15px; } .interactive-element { background-color: #f8f9fa; border-radius: 8px; padding: 15px; margin: 20px 0; position: relative; overflow: hidden; } .interactive-element:before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--primary); } .interactive-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; cursor: pointer; } .interactive-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .interactive-element.active .interactive-content { max-height: 500px; } /* Responsive adjustments */ @media (max-width: 600px) { .resource-grid { grid-template-columns: 1fr; } .platform-header h1 { font-size: 1.2rem; } .course-title h2 { font-size: 1.5rem; } .nav-buttons { flex-direction: column; gap: 10px; } } /* Floating decoration elements */ .decoration { position: absolute; border-radius: 50%; z-index: -1; opacity: 0.6; filter: blur(40px); } .decoration-1 { top: -100px; right: -100px; width: 200px; height: 200px; background-color: rgba(92, 98, 241, 0.3); } .decoration-2 { bottom: -80px; left: -80px; width: 180px; height: 180px; background-color: rgba(255, 107, 107, 0.3); } /* Micro-interactions */ .interactive-feedback { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; border-radius: 30px; padding: 10px 20px; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s ease; z-index: 100; } .interactive-feedback.show { opacity: 1; } /* Module progress indicator */ .module-progress { width: 24px; height: 24px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.7rem; font-weight: bold; color: white; } .module-complete { background-color: var(--success); } .module-in-progress { background: conic-gradient(var(--primary) 60%, #e6e8eb 0); } .module-not-started { background-color: #e6e8eb; color: var(--dark); } </style> </head> <body> <div class="learning-platform"> <div class="decoration decoration-1"></div> <div class="decoration decoration-2"></div> <div class="platform-header"> <h1>Skillful Academy</h1> <div class="user-info"> <div class="avatar">JS</div> </div> </div> <div class="platform-content"> <div class="course-title"> <h2>UX Design Fundamentals</h2> <div class="progress-indicator"> <div class="progress-bar"> <div class="progress-fill"></div> </div> <div class="progress-text">35% Complete</div> </div> </div> <div class="module-list"> <div class="module active"> <div class="module-header" data-module="1"> <div class="module-title"> <div class="module-icon">1</div> <h3>Design Thinking Principles</h3> </div> <div class="module-progress module-in-progress">60%</div> <div class="expandable-trigger">↓</div> </div> <div class="module-content"> <div class="module-details"> <div class="lesson-list"> <div class="lesson complete" data-lesson="1-1"> <div class="lesson-status"></div> <div class="lesson-title">Introduction to Design Thinking</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 15 min </div> </div> <div class="lesson complete" data-lesson="1-2"> <div class="lesson-status"></div> <div class="lesson-title">Empathize: Understanding User Needs</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 20 min </div> </div> <div class="lesson active" data-lesson="1-3"> <div class="lesson-status"></div> <div class="lesson-title">Define: Framing the Problem</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 18 min </div> </div> <div class="lesson" data-lesson="1-4"> <div class="lesson-status"></div> <div class="lesson-title">Ideate: Creative Solutions</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 22 min </div> </div> <div class="lesson" data-lesson="1-5"> <div class="lesson-status"></div> <div class="lesson-title">Prototype and Test</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 25 min </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-header" data-module="2"> <div class="module-title"> <div class="module-icon">2</div> <h3>User Research Methods</h3> </div> <div class="module-progress module-not-started">0%</div> <div class="expandable-trigger">↓</div> </div> <div class="module-content"> <div class="module-details"> <div class="lesson-list"> <div class="lesson" data-lesson="2-1"> <div class="lesson-status"></div> <div class="lesson-title">User Interviews Techniques</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 30 min </div> </div> <div class="lesson" data-lesson="2-2"> <div class="lesson-status"></div> <div class="lesson-title">Survey Design Best Practices</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 25 min </div> </div> <div class="lesson" data-lesson="2-3"> <div class="lesson-status"></div> <div class="lesson-title">Usability Testing</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 35 min </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-header" data-module="3"> <div class="module-title"> <div class="module-icon">3</div> <h3>Visual Design Elements</h3> </div> <div class="module-progress module-not-started">0%</div> <div class="expandable-trigger">↓</div> </div> <div class="module-content"> <div class="module-details"> <div class="lesson-list"> <div class="lesson" data-lesson="3-1"> <div class="lesson-status"></div> <div class="lesson-title">Color Theory for Interfaces</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 22 min </div> </div> <div class="lesson" data-lesson="3-2"> <div class="lesson-status"></div> <div class="lesson-title">Typography in UX Design</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 28 min </div> </div> <div class="lesson" data-lesson="3-3"> <div class="lesson-status"></div> <div class="lesson-title">Grid Systems & Layouts</div> <div class="lesson-time"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> 24 min </div> </div> </div> </div> </div> </div> </div> <div class="resource-section"> <h3>Supplementary Resources</h3> <div class="resource-grid"> <div class="resource-item"> <div class="resource-icon pdf"> <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> </div> <div class="resource-info"> <div class="resource-title">Design Thinking Process Guide</div> <div class="resource-size">PDF • 2.4 MB</div> </div> </div> <div class="resource-item"> <div class="resource-icon video"> <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="23 7 16 12 23 17 23 7"></polygon> <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect> </svg> </div> <div class="resource-info"> <div class="resource-title">Expert UX Interview Series</div> <div class="resource-size">VIDEO • 45 min</div> </div> </div> <div class="resource-item"> <div class="resource-icon pdf"> <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> </div> <div class="resource-info"> <div class="resource-title">UX Research Templates</div> <div class="resource-size">PDF • 1.8 MB</div> </div> </div> <div class="resource-item"> <div class="resource-icon video"> <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="23 7 16 12 23 17 23 7"></polygon> <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect> </svg> </div> <div class="resource-info"> <div class="resource-title">Problem Definition Workshop</div> <div class="resource-size">VIDEO • 32 min</div> </div> </div> </div> </div> <div class="course-content"> <div class="content-header"> <h3>Define: Framing the Problem</h3> </div> <div class="content-nav"> <div class="content-nav-item active">Lesson</div> <div class="content-nav-item">Exercise</div> <div class="content-nav-item">Discussion</div> </div> <div class="content-body"> <p>Once you've gathered empathy data about your users, the Define stage helps you synthesize observations and discover insights. The goal is to frame a meaningful and actionable problem statement.</p> <div class="highlight"> <strong>Key Insight:</strong> A well-defined problem statement serves as your north star throughout the design process. It should be human-centered, broad enough for creative freedom, but narrow enough to make it manageable. </div> <p>Effective problem statements follow the formula:</p> <p>[User] needs a way to [user's need] because [insight].</p> <div class="interactive-element"> <div class="interactive-header"> <span>Example Problem Statements</span> <span class="expandable-trigger">+</span> </div> <div class="interactive-content"> <p>• Busy parents need a way to prepare nutritious meals quickly because they have limited time between work and family responsibilities.</p> <p>• First-time home buyers need a way to understand complex mortgage terms because the financial jargon creates anxiety and uncertainty in the purchasing process.</p> <p>• Remote workers need a way to maintain team cohesion because the lack of face-to-face interaction reduces their sense of belonging.</p> </div> </div> <p>During the Define stage, designers use several methods to structure their thinking:</p> <div class="interactive-element"> <div class="interactive-header"> <span>Define Stage Methods</span> <span class="expandable-trigger">+</span> </div> <div class="interactive-content"> <p><strong>User Personas:</strong> Fictional characters representing user types that share similar goals, attitudes, and behaviors.</p> <p><strong>Empathy Maps:</strong> Visual tools that help categorize user insights into what they say, think, do, and feel.</p> <p><strong>Customer Journey Maps:</strong> Visual representations of the process a person goes through to accomplish a goal.</p> <p><strong>Point-of-View (POV) Statements:</strong> Meaningful and actionable problem statements framed from the user's perspective.</p> </div> </div> </div> </div> </div> <div class="platform-footer"> <div class="status-indicator"> <div class="status-dot"></div> <div class="status-text">Online • Last updated 2 days ago</div> </div> <div class="nav-buttons"> <button class="nav-btn"> <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"> <line x1="19" y1="12" x2="5" y2="12"></line> <polyline points="12 19 5 12 12 5"></polyline> </svg> Previous </button> <button class="nav-btn primary"> Next <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"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </button> </div> </div> </div> <div class="interactive-feedback">Action completed successfully!</div> <script> document.addEventListener('DOMContentLoaded', function() { // Module expansion const moduleHeaders = document.querySelectorAll('.module-header'); moduleHeaders.forEach(header => { header.addEventListener('click', function() { const parentModule = this.parentElement; const isActive = parentModule.classList.contains('active'); // Close all modules document.querySelectorAll('.module').forEach(module => { module.classList.remove('active'); }); // If the clicked module wasn't active, make it active
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Health and Wellness Tracker</title> <style> :root { --primary-green: #4CAF88; --light-green: #A9E1C3; --dark-green: #2F7D5C; --primary-blue: #67ABDC; --light-blue: #B3D8F2; --dark-blue: #3578A8; --neutral-light: #F7FAFC; --neutral-medium: #E2E8F0; --neutral-dark: #718096; --text-dark: #2D3748; --white: #FFFFFF; --shadow: rgba(0, 0, 0, 0.05); --border-radius: 16px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: var(--neutral-light); color: var(--text-dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 0 20px; overflow-x: hidden; } .container { width: 100%; max-width: 700px; height: 700px; background: var(--white); border-radius: var(--border-radius); box-shadow: 0 8px 30px var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--light-green), var(--light-blue)); border-bottom: 1px solid var(--neutral-medium); } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 40px; height: 40px; background: var(--white); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 10px var(--shadow); } .logo-icon svg { width: 24px; height: 24px; fill: var(--primary-green); } .logo-text { font-weight: 600; font-size: 18px; color: var(--text-dark); } .date { font-size: 14px; color: var(--text-dark); opacity: 0.8; } .main { flex: 1; padding: 20px 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } .section { margin-bottom: 5px; } .section-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--text-dark); display: flex; align-items: center; gap: 8px; } .section-title svg { width: 18px; height: 18px; fill: var(--primary-green); } .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .card { background: var(--white); border-radius: var(--border-radius); padding: 15px; box-shadow: 0 2px 15px var(--shadow); transition: var(--transition); position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--neutral-medium); } .card:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .card-title { font-size: 14px; color: var(--neutral-dark); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; } .card-value { font-size: 24px; font-weight: 600; margin-bottom: 5px; color: var(--text-dark); } .card-info { font-size: 12px; color: var(--neutral-dark); display: flex; align-items: center; gap: 5px; } .card-info svg { width: 14px; height: 14px; } .card-info.positive { color: var(--primary-green); } .card-info.negative { color: #E53E3E; } .card-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--neutral-medium); overflow: hidden; } .card-progress-bar { height: 100%; transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .activity-list { display: flex; flex-direction: column; gap: 10px; } .activity-item { display: flex; align-items: center; background: var(--neutral-light); border-radius: var(--border-radius); padding: 15px; transition: var(--transition); } .activity-item:hover { background: linear-gradient(135deg, var(--light-green), var(--light-blue)); } .activity-icon { width: 40px; height: 40px; background: var(--white); border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-right: 15px; flex-shrink: 0; } .activity-icon svg { width: 20px; height: 20px; fill: var(--primary-green); } .activity-info { flex: 1; } .activity-title { font-weight: 500; margin-bottom: 3px; color: var(--text-dark); } .activity-time { font-size: 12px; color: var(--neutral-dark); } .activity-stats { display: flex; gap: 10px; margin-left: auto; text-align: right; } .activity-stat { font-size: 12px; color: var(--neutral-dark); } .activity-stat-value { font-weight: 600; font-size: 14px; color: var(--text-dark); } .nav { display: flex; border-top: 1px solid var(--neutral-medium); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 5px; transition: var(--transition); cursor: pointer; color: var(--neutral-dark); } .nav-item svg { width: 20px; height: 20px; fill: var(--neutral-dark); transition: var(--transition); } .nav-item span { font-size: 12px; transition: var(--transition); } .nav-item:hover, .nav-item.active { color: var(--primary-green); } .nav-item:hover svg, .nav-item.active svg { fill: var(--primary-green); } .tooltip { position: absolute; background: var(--text-dark); color: var(--white); padding: 8px 12px; border-radius: 8px; font-size: 12px; max-width: 200px; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-width: 5px 5px 0; border-style: solid; border-color: var(--text-dark) transparent transparent transparent; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 136, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(76, 175, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 136, 0); } } .water-wave { position: absolute; bottom: 4px; left: 0; width: 100%; height: 14px; background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="10" viewBox="0 0 100 10"%3E%3Cpath d="M0 5 Q 25 0, 50 5 T 100 5" fill="none" stroke="%2367ABDC" stroke-width="2"/%3E%3C/svg%3E'); background-size: 50px 10px; animation: wave 2s linear infinite; opacity: 0.6; } @keyframes wave { 0% { background-position: 0 0; } 100% { background-position: 50px 0; } } .sleep-chart { height: 60px; width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 5px; } .sleep-bar { flex: 1; height: 30px; margin: 0 2px; border-radius: 4px; transition: var(--transition); } .sleep-deep { background-color: var(--dark-blue); } .sleep-light { background-color: var(--primary-blue); } .sleep-rem { background-color: var(--light-blue); } .sleep-awake { background-color: var(--neutral-medium); } .sleep-legend { display: flex; gap: 10px; margin-top: 5px; font-size: 10px; } .sleep-legend-item { display: flex; align-items: center; gap: 4px; color: var(--neutral-dark); } .sleep-legend-color { width: 8px; height: 8px; border-radius: 2px; } /* Heartbeat Effect */ .heartbeat { position: relative; } .heartbeat::before { content: ''; position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; background: var(--primary-green); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: -1; } .heartbeat:hover::before { animation: heartbeat 1.5s ease-out; } @keyframes heartbeat { 0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0; } } .chart-container { width: 100%; height: 100px; position: relative; margin-top: 10px; } .chart-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .chart-path { fill: none; stroke: var(--primary-green); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2s forwards ease-out; } @keyframes drawLine { to { stroke-dashoffset: 0; } } .chart-fill { fill: url(#gradient); transform-origin: bottom; opacity: 0.5; } .chart-point { fill: var(--white); stroke: var(--primary-green); stroke-width: 2; r: 4; opacity: 0; animation: fadeIn 0.3s forwards; animation-delay: 2s; } @keyframes fadeIn { to { opacity: 1; } } .chart-labels { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: var(--neutral-dark); } @media (max-width: 480px) { .container { height: auto; min-height: 700px; } .cards { grid-template-columns: 1fr; } .activity-stats { display: none; } } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/> </svg> </div> <div class="logo-text">WellnessTrack</div> </div> <div class="date" id="current-date"></div> </div> <div class="main"> <div class="section"> <div class="section-title"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 2H4a2 2 0 00-2 2v16a2 2 0 002 2h16a2 2 0 002-2V4a2 2 0 00-2-2zm-2 10.41L16.59 14 18 15.41l-4 4L8.41 14 10 12.41l2 2 2-2V6h4v6.41z"/> </svg> Today's Metrics </div> <div class="cards"> <div class="card heartbeat" data-tooltip="Target: 10,000 steps per day. Consistent walking improves cardiovascular health."> <div class="card-title"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 5h-5V3H8v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-2 10h-4v4h-4v-4H7v-4h4V7h2v4h4v4z"/> </svg> Steps </div> <div class="card-value">8,742</div> <div class="card-info positive"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/> </svg> 31% from yesterday </div> <div class="card-progress"> <div class="card-progress-bar" style="width: 87%; background-color: var(--primary-green);"></div> </div> </div> <div class="card pulse" data-tooltip="Normal resting heart rate for adults is 60-100 BPM. Lower rates typically indicate better cardiovascular fitness."> <div class="card-title"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> Heart Rate </div> <div class="card-value">68 <span style="font-size: 16px;">BPM</span></div> <div class="card-info"> Resting - Excellent </div> <div class="chart-container"> <div class="chart-line"> <svg width="100%" height="100%" viewBox="0 0 300 100" preserveAspectRatio="none"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="var(--primary-green)" stop-opacity="0.7"/> <stop offset="100%" stop-color="var(--primary-green)" stop-opacity="0.1"/> </linearGradient> </defs> <path class="chart-path" d="M0,80 C20,70 40,20 60,60 C80,90 100,50 120,60 C140,70 160,40 180,50 C200,60 220,80 240,50 C260,30 280,40 300,50"/> <path class="chart-fill" d="M0,80 C20,70 40,20 60,60 C80,90 100,50 120,60 C140,70 160,40 180,50 C200,60 220,80 240,50 C260,30 280,40 300,50 L300,100 L0,100 Z"/> <circle class="chart-point" cx="60" cy="60" r="4"/> <circle class="chart-point" cx="120" cy="60" r="4"/> <circle class="chart-point" cx="180" cy="50" r="4"/> <circle class="chart-point" cx="240" cy="50" r="4"/> </svg> </div> <div class="chart-labels"> <span>8AM</span> <span>10AM</span> <span>12PM</span> <span>2PM</span> <span>4PM</span> <span>Now</span> </div> </div> </div> <div class="card" data-tooltip="Sleep quality matters as much as quantity. Deep sleep is essential for physical recovery."> <div class="card-title"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 12c0-4.42-3.58-8-8-8s-8 3.58-8 8 3.58 8 8 8 8-3.58 8-8zm-8 7c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.5-12H9v6l4.75 2.85.75-1.23-4-2.37V7z"/> </svg> Sleep </div> <div class="card-value">7h 18m</div> <div class="card-info negative"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/> </svg> 42 minutes less </div> <div class="sleep-chart"> <div class="sleep-bar sleep-awake" style="height: 10px;"></div> <div class="sleep-bar sleep-rem" style="height: 15px;"></div> <div class="sleep-bar sleep-light" style="height: 20px;"></div> <div class="sleep-bar sleep-deep" style="height: 30px;"></div> <div class="sleep-bar sleep-deep" style="height: 25px;"></div> <div class="sleep-bar sleep-light" style="height: 20px;"></div> <div class="sleep-bar sleep-rem" style="height: 18px;"></div> <div class="sleep-bar sleep-light" style="height: 22px;"></div> <div class="sleep-bar sleep-deep" style="height: 28px;"></div> <div class="sleep-bar sleep-light" style="height: 15px;"></div> <div class="sleep-bar sleep-awake" style="height: 8px;"></div> </div> <div class="sleep-legend"> <div class="sleep-legend-item"> <div class="sleep-legend-color sleep-deep"></div> <span>Deep</span> </div> <div class="sleep-legend-item"> <div class="sleep-legend-color sleep-light"></div> <span>Light</span> </div> <div class="sleep-legend-item"> <div class="sleep-legend-color sleep-rem"></div> <span>REM</span> </div> <div class="sleep-legend-item"> <div class="sleep-legend-color sleep-awake"></div> <span>Awake</span> </div> </div> </div> <div class="card" data-tooltip="Staying hydrated improves energy levels, cognitive function, and helps maintain healthy skin."> <div class="card-title"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.79 6 9.14 0 3.63-2.65 6.2-6 6.2zm-4.17-6c.37 0 .67.26.74.62.41 2.22 2.28 2.98 3.64 2.87.43-.02.79.32.79.75 0 .4-.32.73-.72.75-2.13.13-4.62-1.09-5.19-4.12-.08-.45.28-.87.74-.87z"/> </svg> Hydration </div> <div class="card-value">1.4<span style="font-size: 16px;"> / 2.5L</span></div> <div class="card-info negative"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/> </svg> Behind daily goal </div> <div class="card-progress"> <div class="card-progress-bar" style="width: 56%; background-color: var(--primary-blue);"></div> </div> <div class="water-wave"></div> </div> </div> </div> <div class="section"> <div class="section-title"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/> </svg> Today's Activities </div> <div class="activity-list"> <div class="activity-item"> <div class="activity-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/> </svg> </div> <div class="activity-info"> <div class="activity-title">Morning Run</div> <div class="activity-time">7:15 AM - 7:52 AM</div> </div> <div class="activity-stats"> <div class="activity-stat"> <div class="activity-stat-value">3.2 km</div> Distance </div> <div class="activity-stat"> <div class="activity-stat-value">37 min</div> Duration </div> </div> </div> <div class="activity-item"> <div class="activity-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 11.31l-1.69 1.69L12 12.69 9.69 15l-1.69-1.69L10.31 11 8 8.69l1.69-1.69L12 9.31 14.31 7l1.69 1.69L13.69 11 16 13.31z"/> </svg> </div> <div class="activity-info"> <div class="activity-title">Meditation</div> <div class="activity-time">12:30 PM - 12:45 PM</div> </div> <div class="activity-stats"> <div class="activity-stat"> <div class="activity-stat-value">15 min</div> Duration </div> <div class="activity-stat"> <div class="activity-stat-value">62 BPM</div> Avg. HR </div> </div> </div> <div class="activity-item"> <div class="activity-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"/> </svg> </div> <div class="activity-info"> <div class="activity-title">Strength Training</div> <div class="activity-time">5:30 PM - 6:15 PM</div> </div> <div class="activity-stats"> <div class="activity-stat"> <div class="activity-stat-value">45 min</div> Duration </div> <div class="activity-stat"> <div class="activity-stat-value">135 BPM</div> Max HR </div> </div> </div> </div> </div> </div> <div class="nav"> <div class="nav-item active"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </svg> <span>Home</span> </div> <div class="nav-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/> </svg> <span>Progress</span> </div> <div class="nav-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 15l-5-5 1.41-1.41L11 14.17l6.59-6.59L19 9l-7 7z"/> </svg> <span>Goals</span> </div> <div class="nav-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> </svg> <span>Profile</span> </div> </div> <div class="tooltip" id="tooltip"></div> </div> <script> // Display current date function updateDate() { const date = new Date(); const options = { weekday: 'long', month: 'long', day: 'numeric' }; document.getElementById('current-date').textContent = date.toLocaleDateString('en-US', options); } updateDate(); // Tooltip functionality const cards = document.querySelectorAll('[data-tooltip]'); const tooltip = document.getElementById('tooltip'); cards.forEach(card => { card.addEventListener('mouseenter', (e) => { const tooltipText = card.getAttribute('data-tooltip'); tooltip.textContent = tooltipText; tooltip.style.opacity = '1'; tooltip.style.visibility = 'visible'; const rect = card.getBoundingClientRect(); tooltip.style.top = `${rect.top - tooltip.offsetHeight - 10}px`; tooltip.style.left = `${rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2)}px`; }); card.addEventListener('mouseleave', () => {
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Profile Frame</title> <style> :root { --primary: #FF416C; --secondary: #FF4B2B; --tertiary: #0A84FF; --quaternary: #30E8BF; --dark: #2D3436; --light: #F9F9F9; --success: #00C851; --warning: #FFBB33; --danger: #FF4444; --neutral: #B2BEC3; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f5f5; background-image: radial-gradient(circle at 25% 25%, rgba(255, 65, 108, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(48, 232, 191, 0.05) 0%, transparent 50%); padding: 20px; } .profile-container { width: 100%; max-width: 600px; background: var(--light); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); overflow: hidden; position: relative; z-index: 1; } .profile-header { height: 120px; background: linear-gradient(135deg, var(--primary), var(--secondary)); position: relative; overflow: hidden; } .profile-header::before { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); animation: patternMove 60s linear infinite; } @keyframes patternMove { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(100px) translateY(100px); } } .profile-picture-container { width: 120px; height: 120px; position: absolute; left: 50%; top: 60px; transform: translateX(-50%); z-index: 10; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .profile-picture-container:hover { transform: translateX(-50%) scale(1.1) rotate(5deg); } .profile-picture { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--light); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); cursor: pointer; object-fit: cover; background-color: var(--light); } .status-indicator { width: 20px; height: 20px; border-radius: 50%; background-color: var(--success); border: 3px solid var(--light); position: absolute; bottom: 10px; right: 10px; z-index: 11; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .profile-content { padding: 70px 20px 30px; text-align: center; } .profile-name { font-size: 1.8em; font-weight: 700; color: var(--dark); margin-bottom: 5px; } .profile-tagline { color: var(--neutral); font-size: 0.95em; margin-bottom: 20px; } .profile-stats { display: flex; justify-content: center; margin-bottom: 25px; gap: 10px; } .stat { padding: 10px 15px; text-align: center; flex: 1; position: relative; border-radius: 8px; transition: all 0.3s ease; background-color: rgba(0, 0, 0, 0.02); } .stat:hover { background-color: rgba(0, 0, 0, 0.05); transform: translateY(-3px); } .stat-value { font-size: 1.5em; font-weight: 700; color: var(--dark); margin-bottom: 5px; } .stat-label { font-size: 0.8em; color: var(--neutral); text-transform: uppercase; letter-spacing: 1px; } .profile-actions { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; } .action-btn { padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); border: none; outline: none; } .primary-btn { background: linear-gradient(135deg, var(--tertiary), var(--quaternary)); color: white; } .primary-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(10, 132, 255, 0.3); } .secondary-btn { background-color: var(--light); color: var(--dark); border: 1px solid rgba(0, 0, 0, 0.1); } .secondary-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .icon { font-size: 1.2em; } .profile-border { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; border-radius: 16px; border: 2px solid transparent; background-origin: border-box; background-clip: padding-box, border-box; background-image: linear-gradient(to bottom, var(--light), var(--light)), linear-gradient(90deg, var(--primary), var(--tertiary), var(--quaternary), var(--secondary)); transition: all 0.5s ease; } .profile-container:hover .profile-border { background-image: linear-gradient(to bottom, var(--light), var(--light)), linear-gradient(180deg, var(--primary), var(--tertiary), var(--quaternary), var(--secondary)); filter: drop-shadow(0 0 10px rgba(255, 65, 108, 0.3)); } .social-icons { display: flex; justify-content: center; gap: 15px; margin-bottom: 5px; } .social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.05); color: var(--dark); font-size: 1.2em; transition: all 0.3s ease; cursor: pointer; } .social-icon:hover { transform: translateY(-3px) rotate(10deg); color: #fff; } .social-icon.twitter:hover { background-color: #1DA1F2; } .social-icon.instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .social-icon.linkedin:hover { background-color: #0077B5; } .status-dropdown { position: absolute; top: 105px; right: 10px; z-index: 12; } .status-selector { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .status-options { position: absolute; top: 25px; right: 0; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); padding: 10px; width: 150px; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: all 0.3s ease; } .status-dropdown:hover .status-options, .status-selector:focus + .status-options { opacity: 1; transform: translateY(0); pointer-events: all; } .status-option { display: flex; align-items: center; padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .status-option:hover { background-color: rgba(0, 0, 0, 0.05); } .status-dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; } .status-dot.online { background-color: var(--success); } .status-dot.away { background-color: var(--warning); } .status-dot.busy { background-color: var(--danger); } .status-dot.offline { background-color: var(--neutral); } .status-text { font-size: 0.9em; color: var(--dark); } .frame-decoration { position: absolute; width: 50px; height: 50px; z-index: 3; } .frame-decoration.top-left { top: -5px; left: -5px; border-top: 3px solid var(--primary); border-left: 3px solid var(--primary); border-top-left-radius: 16px; } .frame-decoration.top-right { top: -5px; right: -5px; border-top: 3px solid var(--tertiary); border-right: 3px solid var(--tertiary); border-top-right-radius: 16px; } .frame-decoration.bottom-left { bottom: -5px; left: -5px; border-bottom: 3px solid var(--quaternary); border-left: 3px solid var(--quaternary); border-bottom-left-radius: 16px; } .frame-decoration.bottom-right { bottom: -5px; right: -5px; border-bottom: 3px solid var(--secondary); border-right: 3px solid var(--secondary); border-bottom-right-radius: 16px; } /* Responsive Styles */ @media (max-width: 500px) { .profile-stats { flex-wrap: wrap; } .stat { min-width: 45%; } .profile-actions { flex-direction: column; } .action-btn { width: 100%; } } </style> </head> <body> <div class="profile-container"> <div class="profile-border"></div> <div class="frame-decoration top-left"></div> <div class="frame-decoration top-right"></div> <div class="frame-decoration bottom-left"></div> <div class="frame-decoration bottom-right"></div> <div class="profile-header"></div> <div class="profile-picture-container"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2RkZCIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI2cHgiIGZpbGw9IiM1NTUiPlByb2ZpbGU8L3RleHQ+PC9zdmc+" alt="Profile Picture" class="profile-picture"> <div class="status-indicator"></div> </div> <div class="status-dropdown"> <select class="status-selector" id="statusSelector"> <option value="online">Online</option> <option value="away">Away</option> <option value="busy">Busy</option> <option value="offline">Offline</option> </select> <div class="status-options"> <div class="status-option" data-status="online"> <span class="status-dot online"></span> <span class="status-text">Online</span> </div> <div class="status-option" data-status="away"> <span class="status-dot away"></span> <span class="status-text">Away</span> </div> <div class="status-option" data-status="busy"> <span class="status-dot busy"></span> <span class="status-text">Busy</span> </div> <div class="status-option" data-status="offline"> <span class="status-dot offline"></span> <span class="status-text">Offline</span> </div> </div> </div> <div class="profile-content"> <h1 class="profile-name">Alex Morgan</h1> <p class="profile-tagline">Digital Storyteller & Content Creator</p> <div class="profile-stats"> <div class="stat"> <div class="stat-value">15.4K</div> <div class="stat-label">Followers</div> </div> <div class="stat"> <div class="stat-value">843</div> <div class="stat-label">Following</div> </div> <div class="stat"> <div class="stat-value">129</div> <div class="stat-label">Posts</div> </div> </div> <div class="profile-actions"> <button class="action-btn primary-btn"> <span class="icon">+</span> <span>Follow</span> </button> <button class="action-btn secondary-btn"> <span class="icon">✉️</span> <span>Message</span> </button> </div> <div class="social-icons"> <div class="social-icon twitter"> <span>𝕏</span> </div> <div class="social-icon instagram"> <span>📷</span> </div> <div class="social-icon linkedin"> <span>in</span> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Status Selector Functionality const statusIndicator = document.querySelector('.status-indicator'); const statusOptions = document.querySelectorAll('.status-option'); statusOptions.forEach(option => { option.addEventListener('click', function() { const status = this.dataset.status; // Remove all status classes statusIndicator.classList.remove('online', 'away', 'busy', 'offline'); // Set background color based on selected status switch(status) { case 'online': statusIndicator.style.backgroundColor = 'var(--success)'; break; case 'away': statusIndicator.style.backgroundColor = 'var(--warning)'; break; case 'busy': statusIndicator.style.backgroundColor = 'var(--danger)'; break; case 'offline': statusIndicator.style.backgroundColor = 'var(--neutral)'; break; } // Create ripple effect const ripple = document.createElement('div'); ripple.classList.add('ripple'); statusIndicator.appendChild(ripple); setTimeout(() => { statusIndicator.removeChild(ripple); }, 800); }); }); // Profile Picture Animation on Click const profilePicture = document.querySelector('.profile-picture'); profilePicture.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); }); // Follow Button Animation const followButton = document.querySelector('.primary-btn'); followButton.addEventListener('click', function() { const isFollowing = this.classList.contains('following'); if (!isFollowing) { this.innerHTML = '<span class="icon">✓</span><span>Following</span>'; this.classList.add('following'); this.style.background = 'linear-gradient(135deg, var(--success), var(--quaternary))'; // Update follower count const followerCount = document.querySelector('.profile-stats .stat:nth-child(1) .stat-value'); let count = parseInt(followerCount.textContent.replace(/,/g, '')); followerCount.textContent = (count + 1).toLocaleString(); // Add animation to the follower count followerCount.style.transform = 'scale(1.2)'; setTimeout(() => { followerCount.style.transform = ''; }, 300); } else { this.innerHTML = '<span class="icon">+</span><span>Follow</span>'; this.classList.remove('following'); this.style.background = 'linear-gradient(135deg, var(--tertiary), var(--quaternary))'; // Update follower count const followerCount = document.querySelector('.profile-stats .stat:nth-child(1) .stat-value'); let count = parseInt(followerCount.textContent.replace(/,/g, '')); followerCount.textContent = (count - 1).toLocaleString(); } }); // Border animation on hover const profileContainer = document.querySelector('.profile-container'); profileContainer.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = (e.clientY - rect.top) / rect.height; const border = document.querySelector('.profile-border'); border.style.backgroundImage = ` linear-gradient(to bottom, var(--light), var(--light)), linear-gradient(${Math.round(x * 360)}deg, var(--primary), var(--tertiary), var(--quaternary), var(--secondary)) `; }); profileContainer.addEventListener('mouseleave', function() { const border = document.querySelector('.profile-border'); border.style.backgroundImage = ` linear-gradient(to bottom, var(--light), var(--light)), linear-gradient(90deg, var(--primary), var(--tertiary), var(--quaternary), var(--secondary)) `; }); // Add hover effect to social icons const socialIcons = document.querySelectorAll('.social-icon'); socialIcons.forEach(icon => { icon.addEventListener('mouseenter', function() { const siblings = Array.from(document.querySelectorAll('.social-icon')).filter(item => item !== this); siblings.forEach(sibling => { sibling.style.opacity = '0.6'; sibling.style.transform = 'scale(0.9)'; }); }); icon.addEventListener('mouseleave', function() { const siblings = Array.from(document.querySelectorAll('.social-icon')); siblings.forEach(sibling => { sibling.style.opacity = ''; sibling.style.transform = ''; }); }); }); // Make stats interactive const stats = document.querySelectorAll('.stat'); stats.forEach(stat => { stat.addEventListener('mouseenter', function() { const value = this.querySelector('.stat-value'); value.style.transform = 'scale(1.1)'; }); stat.addEventListener('mouseleave', function() { const value = this.querySelector('.stat-value'); value.style.transform = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonRift Gaming Dashboard</title> <style> /* Reset and Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-primary: #0a0a0f; --bg-secondary: #141420; --bg-tertiary: #1c1c2e; --neon-primary: #00f4ff; --neon-secondary: #ff00e5; --neon-tertiary: #00ff8c; --text-primary: #ffffff; --text-secondary: #a9a9b8; --glow-radius: 15px; } @font-face { font-family: 'Cyberpunk'; src: url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&display=swap'); } body { font-family: 'Rajdhani', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); height: 700px; width: 700px; overflow: hidden; display: flex; justify-content: center; align-items: center; } /* Dashboard Container */ .dashboard-container { width: 100%; height: 100%; padding: 10px; background: var(--bg-primary); position: relative; overflow: hidden; } /* Animated Border */ .neon-border { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; border-radius: 8px; background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box, linear-gradient(90deg, var(--neon-primary), var(--neon-secondary), var(--neon-tertiary), var(--neon-primary)) border-box; animation: borderRotate 4s linear infinite; z-index: 0; pointer-events: none; } @keyframes borderRotate { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* Main Content */ .content { position: relative; z-index: 1; display: grid; grid-template-columns: 180px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "sidebar header" "sidebar main"; gap: 10px; height: 100%; } /* Header */ .header { grid-area: header; background-color: var(--bg-secondary); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; height: 2px; width: 100%; bottom: 0; left: 0; background: linear-gradient(90deg, transparent, var(--neon-primary), transparent); } .header-title { display: flex; align-items: center; gap: 10px; } .header-title h1 { font-size: 20px; font-weight: 700; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; letter-spacing: 1px; } .user-profile { display: flex; align-items: center; gap: 10px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(45deg, var(--neon-tertiary), var(--neon-primary)); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px var(--neon-primary); } .avatar-inner { width: 32px; height: 32px; border-radius: 50%; background-color: var(--bg-tertiary); display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--neon-primary); } /* Sidebar */ .sidebar { grid-area: sidebar; background-color: var(--bg-secondary); border-radius: 8px; padding: 20px 10px; display: flex; flex-direction: column; gap: 25px; } .logo { text-align: center; font-size: 20px; font-weight: bold; color: var(--neon-primary); text-shadow: 0 0 5px var(--neon-primary); } .nav-title { font-size: 12px; color: var(--text-secondary); margin: 5px 10px; text-transform: uppercase; letter-spacing: 1px; } .nav-items { list-style-type: none; padding: 0; display: flex; flex-direction: column; gap: 5px; } .nav-item { padding: 10px 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; } .nav-item i { width: 20px; text-align: center; } .nav-item:hover { background-color: var(--bg-tertiary); color: var(--neon-primary); } .nav-item.active { background-color: var(--bg-tertiary); color: var(--neon-primary); box-shadow: 0 0 10px rgba(0, 244, 255, 0.3); } /* Main Area */ .main { grid-area: main; display: grid; grid-template-columns: 2fr 1fr; gap: 10px; overflow-y: auto; padding-right: 5px; } .main::-webkit-scrollbar { width: 5px; } .main::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon-primary), var(--neon-secondary)); border-radius: 10px; } /* Game Library */ .game-library { background-color: var(--bg-secondary); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; gap: 15px; } .section-header { display: flex; justify-content: space-between; align-items: center; } .section-title { font-size: 18px; font-weight: bold; position: relative; padding-left: 10px; } .section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: linear-gradient(var(--neon-primary), var(--neon-secondary)); border-radius: 2px; } .view-all { font-size: 14px; color: var(--neon-primary); cursor: pointer; transition: all 0.3s ease; } .view-all:hover { text-shadow: 0 0 5px var(--neon-primary); } .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; } .game-card { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 160px; background-color: var(--bg-tertiary); } .game-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 244, 255, 0.3); } .game-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; } .game-image { width: 100%; height: 100%; object-fit: cover; } .game-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; z-index: 2; } .game-title { font-size: 14px; margin-bottom: 5px; color: white; } .game-stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 40px; height: 40px; background-color: rgba(0, 244, 255, 0.2); backdrop-filter: blur(5px); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; z-index: 3; transition: transform 0.3s ease; box-shadow: 0 0 10px var(--neon-primary); } .game-card:hover .play-button { transform: translate(-50%, -50%) scale(1); } /* Activity & Stats */ .activity-stats { display: flex; flex-direction: column; gap: 10px; } .activity-feed, .stats-panel { background-color: var(--bg-secondary); border-radius: 8px; padding: 15px; flex: 1; } .activity-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bg-tertiary); } .activity-icon { width: 36px; height: 36px; background-color: var(--bg-tertiary); border-radius: 8px; display: flex; justify-content: center; align-items: center; color: var(--neon-tertiary); } .activity-details { flex: 1; } .activity-title { font-size: 14px; margin-bottom: 3px; } .activity-time { font-size: 12px; color: var(--text-secondary); } /* Stats */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; } .stat-card { background-color: var(--bg-tertiary); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; transition: all 0.3s ease; cursor: pointer; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 3px 10px rgba(0, 244, 255, 0.2); } .stat-value { font-size: 24px; font-weight: bold; margin-bottom: 5px; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label { font-size: 12px; color: var(--text-secondary); } /* Glow Effects */ .glow-effect { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(var(--glow-radius)); opacity: 0.2; pointer-events: none; z-index: 0; } .glow-1 { top: -50px; left: -50px; background-color: var(--neon-primary); animation: pulsate 4s infinite alternate; } .glow-2 { bottom: -50px; right: -50px; background-color: var(--neon-secondary); animation: pulsate 5s infinite alternate-reverse; } @keyframes pulsate { 0% { opacity: 0.1; transform: scale(0.9); } 100% { opacity: 0.3; transform: scale(1.1); } } /* Responsive Adjustments */ @media (max-width: 700px) { .content { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "header" "sidebar" "main"; } .sidebar { flex-direction: row; overflow-x: auto; padding: 10px; justify-content: space-between; align-items: center; } .nav-items { flex-direction: row; } .nav-title { display: none; } .main { grid-template-columns: 1fr; gap: 10px; } .games-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .game-card { height: 130px; } } /* Animations & Transitions */ @keyframes glitch { 0% { text-shadow: 0.05em 0 0 var(--neon-secondary), -0.05em -0.025em 0 var(--neon-tertiary); } 14% { text-shadow: 0.05em 0 0 var(--neon-secondary), -0.05em -0.025em 0 var(--neon-tertiary); } 15% { text-shadow: -0.05em -0.025em 0 var(--neon-secondary), 0.025em 0.025em 0 var(--neon-tertiary); } 49% { text-shadow: -0.05em -0.025em 0 var(--neon-secondary), 0.025em 0.025em 0 var(--neon-tertiary); } 50% { text-shadow: 0.025em 0.05em 0 var(--neon-secondary), 0.05em 0 0 var(--neon-tertiary); } 99% { text-shadow: 0.025em 0.05em 0 var(--neon-secondary), 0.05em 0 0 var(--neon-tertiary); } 100% { text-shadow: 0.05em 0 0 var(--neon-secondary), -0.05em -0.025em 0 var(--neon-tertiary); } } .glitch-text { animation: glitch 3s infinite; position: relative; display: inline-block; } /* Custom button styles */ .neon-button { background-color: transparent; border: 1px solid var(--neon-primary); color: var(--neon-primary); padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; font-family: 'Rajdhani', sans-serif; font-weight: bold; position: relative; overflow: hidden; } .neon-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 244, 255, 0.2), transparent); transition: all 0.5s ease; } .neon-button:hover { box-shadow: 0 0 10px var(--neon-primary); color: white; } .neon-button:hover::before { left: 100%; } /* Loading Line Animation */ .loading-line { height: 2px; width: 0; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); position: absolute; bottom: 0; left: 0; animation: loadingLine 2.5s linear infinite; box-shadow: 0 0 5px var(--neon-primary); } @keyframes loadingLine { 0% { width: 0; opacity: 1; } 50% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } } /* Metric Bars */ .metric-bar { height: 5px; width: 100%; background-color: var(--bg-primary); border-radius: 3px; margin-top: 5px; overflow: hidden; } .metric-progress { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); box-shadow: 0 0 5px var(--neon-primary); width: 0; transition: width 1s ease-in-out; } /* Interactive Notifications */ .notification-badge { position: absolute; top: -5px; right: -5px; background-color: var(--neon-secondary); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 5px var(--neon-secondary); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> </head> <body> <div class="dashboard-container"> <div class="neon-border"></div> <div class="glow-effect glow-1"></div> <div class="glow-effect glow-2"></div> <div class="content"> <header class="header"> <div class="header-title"> <h1 class="glitch-text">NeonRift</h1> </div> <div class="user-profile"> <button class="neon-button" id="notificationBtn"> <i class="fas fa-bell"></i> <span class="notification-badge">3</span> </button> <div class="avatar"> <div class="avatar-inner">RX</div> </div> </div> <div class="loading-line"></div> </header> <aside class="sidebar"> <div class="logo"><span class="glitch-text">NR</span></div> <div> <div class="nav-title">Main</div> <ul class="nav-items"> <li class="nav-item active"> <i class="fas fa-home"></i> <span>Dashboard</span> </li> <li class="nav-item"> <i class="fas fa-gamepad"></i> <span>Library</span> </li> <li class="nav-item"> <i class="fas fa-store"></i> <span>Store</span> </li> </ul> </div> <div> <div class="nav-title">Social</div> <ul class="nav-items"> <li class="nav-item"> <i class="fas fa-users"></i> <span>Friends</span> </li> <li class="nav-item"> <i class="fas fa-comment-alt"></i> <span>Messages</span> <span class="notification-badge">2</span> </li> </ul> </div> </aside> <main class="main"> <section class="game-library"> <div class="section-header"> <h2 class="section-title">Recently Played</h2> <span class="view-all">View All</span> </div> <div class="games-grid" id="gamesGrid"> <!-- Games will be inserted dynamically via JS --> </div> </section> <div class="activity-stats"> <section class="activity-feed"> <div class="section-header"> <h2 class="section-title">Activity</h2> </div> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-trophy"></i> </div> <div class="activity-details"> <div class="activity-title">Achievement Unlocked: "Master Hacker"</div> <div class="activity-time">10 minutes ago</div> </div> </div> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-clock"></i> </div> <div class="activity-details"> <div class="activity-title">Played CyberPunk 2077 for 3 hours</div> <div class="activity-time">Yesterday</div> </div> </div> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-user-plus"></i> </div> <div class="activity-details"> <div class="activity-title">NeoRacer99 sent you a friend request</div> <div class="activity-time">2 days ago</div> </div> </div> </section> <section class="stats-panel"> <div class="section-header"> <h2 class="section-title">Stats</h2> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-value">42</div> <div class="stat-label">Games Owned</div> </div> <div class="stat-card"> <div class="stat-value">23h</div> <div class="stat-label">Played This Week</div> </div> <div class="stat-card"> <div class="stat-value">87%</div> <div class="stat-label">Completion Rate</div> <div class="metric-bar"> <div class="metric-progress" data-progress="87"></div> </div> </div> <div class="stat-card"> <div class="stat-value">156</div> <div class="stat-label">Achievements</div> <div class="metric-bar"> <div class="metric-progress" data-progress="65"></div> </div> </div> </div> </section> </div> </main> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Game data const games = [ { title: 'CyberPunk 2077', image: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60', hours: '42h', progress: '78%' }, { title: 'Quantum Break', image: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60', hours: '16h', progress: '45%' }, { title: 'Neon Abyss', image: 'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60', hours: '28h', progress: '92%' }, { title: 'Ghostrunner', image: 'https://images.unsplash.com/photo-1614294148960-9aa740a3e4f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60', hours: '7h', progress: '31%' } ]; // Populate games grid const gamesGrid = document.getElementById('gamesGrid'); games.forEach(game => { const gameCard = document.createElement('div'); gameCard.className = 'game-card'; gameCard.innerHTML = ` <img src="${game.image}" alt="${game.title}" class="game-image"> <div class="game-info"> <div class="game-title">${game.title}</div> <div class="game-stats"> <span>${game.hours}</span> <span>${game.progress}</span> </div> </div> <div class="play-button"> <i class="fas fa-play"></i> </div> `; gamesGrid.appendChild(gameCard); }); // Initialize progress bars document.querySelectorAll('.metric-progress').forEach(bar => { const progress = bar.getAttribute('data-progress'); setTimeout(() => { bar.style.width = `${progress}%`; }, 300); }); // Notification button interaction const notificationBtn = document.getElementById('notificationBtn'); notificationBtn.addEventListener('click', function() { this.classList.toggle('active'); const badge = this.querySelector('.notification-badge'); if (badge) { if (badge.style.display === 'none') { badge.style.display = 'flex'; } else { badge.style.display = 'none'; } } }); // Game card interaction document.querySelectorAll('.game-card').forEach(card => { card.addEventListener('click', function() { document.querySelectorAll('.game-card').forEach(c => { c.style.transform = ''; c.style.boxShadow = ''; }); this.style.transform = 'translateY(-5px)'; this.style.boxShadow = '0 5px 15px rgba(0, 244, 255, 0.3)'; // Simulate loading animation const loadingLine = document.querySelector('.loading-line'); loadingLine.style.opacity = '1'; loadingLine.style.width = '0'; setTimeout(() => { loadingLine.style.width = '100%'; }, 50); setTimeout(() => { loadingLine.style.opacity = '0'; }, 1000); }); }); // Add glowing cursor effect const container = document.querySelector('.dashboard-container'); container.addEventListener('mousemove', (e) => { const x = e.clientX; const y = e.clientY; const glowEffect = document.createElement('div'); glowEffect.className = 'cursor-glow'; glowEffect.style.cssText = ` position: absolute; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(0,244,255,0.5) 0%, rgba(0,244,255,0) 70%); top: ${y - 15}px; left: ${x - 15}px; pointer-events: none; z-index: 9999; opacity: 0.7; filter: blur(5px); animation: fadeOut 1s forwards; `; document.body.appendChild(glowEffect); setTimeout(() => { glowEffect.remove(); }, 1000); }); // Add style tag for the fadeOut animation const style = document.createElement('style'); style.textContent = ` @keyframes fadeOut { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(2); opacity: 0; } } `; document.head.appendChild(style); // Add font awesome const fontAwesome = document.createElement('link'); fontAwesome.rel = 'stylesheet'; fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'; document.head.appendChild(fontAwesome); // Nav item interaction document.querySelectorAll('.nav-item').forEach(item => { item.addEventListener('click', function() { document.querySelectorAll('.nav-item').forEach(i => { i.classList.remove('active'); }); this.classList.add('active'); // Add ripple effect const ripple = document.createElement('div'); ripple.className = 'ripple'; ripple.style.cssText = ` position: absolute; width: 5px; height: 5px; background-color: var(--neon-primary); border-radius: 50%; opacity: 0.5; animation: rippleEffect 0.8s linear; pointer-events: none; z-index: 10; `; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); }); }); // Add style for ripple effect const rippleStyle = document.createElement('style'); rippleStyle.textContent = ` @keyframes rippleEffect { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(30); opacity: 0; } } .nav-item { position: relative; overflow: hidden; } `; document.head.appendChild(rippleStyle); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Earthscape Travel Booking</title> <style> :root { --earth-brown: #8B6B4C; --sand-tan: #E0C9A6; --forest-green: #3A6B45; --sky-blue: #7EB5D6; --sunset-orange: #E8985E; --night-blue: #2D4159; --cloud-white: #F5F5F5; --shadow: rgba(0, 0, 0, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; transition: all 0.3s ease; } body { background-color: var(--cloud-white); color: #333; height: 700px; width: 700px; max-width: 100%; overflow-x: hidden; } .container { max-width: 700px; height: 700px; margin: 0 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; } header { position: relative; height: 220px; overflow: hidden; z-index: 1; } .header-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(45, 65, 89, 0.7), rgba(45, 65, 89, 0.4)), url('data:image/jpeg;base64,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
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Financial Data Dashboard</title> <style> :root { --primary-blue: #1e3d59; --secondary-blue: #2c5f90; --accent-blue: #3498db; --light-blue: #eef5fc; --dark-gray: #2c3e50; --medium-gray: #7f8c8d; --light-gray: #ecf0f1; --success-green: #27ae60; --warning-orange: #e67e22; --danger-red: #e74c3c; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-gray); color: var(--dark-gray); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .dashboard-container { width: 95%; max-width: 680px; height: 680px; background-color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; position: relative; overflow: hidden; } .header { padding: 1.5rem; background-color: var(--primary-blue); color: white; position: relative; z-index: 10; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 1.5rem; display: flex; align-items: center; gap: 8px; } .logo-icon { width: 24px; height: 24px; border: 2px solid white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; border-radius: 50px; transition: background-color var(--transition-speed); } .user-profile:hover { background-color: rgba(255, 255, 255, 0.1); } .user-avatar { width: 32px; height: 32px; background-color: var(--light-blue); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary-blue); font-weight: bold; } .main-content { flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; } .section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; color: var(--dark-gray); } .balance-summary { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; } .balance-card { flex: 1; min-width: 190px; background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue)); padding: 20px; border-radius: 12px; color: white; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(46, 91, 141, 0.15); transition: transform var(--transition-speed); } .balance-card:hover { transform: translateY(-5px); } .balance-card::before { content: ''; position: absolute; bottom: -30px; right: -30px; width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.08); border-radius: 50%; } .card-label { font-size: 0.9rem; opacity: 0.9; margin-bottom: 5px; } .card-value { font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; } .card-change { background-color: rgba(255, 255, 255, 0.15); padding: 4px 8px; border-radius: 50px; font-size: 0.8rem; width: fit-content; display: flex; align-items: center; gap: 4px; } .card-footer { display: flex; justify-content: space-between; font-size: 0.8rem; margin-top: 20px; } .transactions-section { background-color: var(--light-gray); border-radius: 10px; padding: 20px; position: relative; } .transaction-list { display: flex; flex-direction: column; gap: 12px; } .transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background-color: white; border-radius: 8px; transition: transform var(--transition-speed), box-shadow var(--transition-speed); cursor: pointer; position: relative; overflow: hidden; } .transaction-item::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: transparent; transition: background-color var(--transition-speed); } .transaction-item:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .transaction-item:hover::before { background-color: var(--accent-blue); } .transaction-info { display: flex; align-items: center; gap: 12px; } .transaction-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; } .transaction-details { display: flex; flex-direction: column; } .transaction-name { font-weight: 600; font-size: 0.95rem; } .transaction-date { font-size: 0.8rem; color: var(--medium-gray); } .transaction-amount { font-weight: 600; font-size: 1rem; } .expense { color: var(--danger-red); } .income { color: var(--success-green); } .chart-section { background-color: white; border-radius: 10px; padding: 20px; border: 1px solid var(--light-gray); position: relative; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .chart-options { display: flex; gap: 8px; } .chart-option { padding: 5px 10px; border-radius: 50px; font-size: 0.8rem; cursor: pointer; transition: background-color var(--transition-speed), color var(--transition-speed); background-color: var(--light-gray); color: var(--medium-gray); } .chart-option.active { background-color: var(--primary-blue); color: white; } .chart-container { height: 180px; position: relative; display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; } .chart-bar { flex: 1; background-color: var(--light-blue); border-radius: 4px 4px 0 0; position: relative; transition: height 0.5s ease-out; min-width: 25px; cursor: pointer; } .chart-bar::before { content: attr(data-value); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 600; color: var(--dark-gray); opacity: 0; transition: opacity var(--transition-speed); } .chart-bar:hover::before { opacity: 1; } .chart-bar:hover { background-color: var(--accent-blue); } .chart-labels { display: flex; justify-content: space-between; margin-top: 10px; } .chart-label { font-size: 0.75rem; color: var(--medium-gray); text-align: center; flex: 1; } .quick-actions { display: flex; gap: 10px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 5px; } .quick-actions::-webkit-scrollbar { height: 3px; } .quick-actions::-webkit-scrollbar-thumb { background-color: var(--light-gray); border-radius: 3px; } .action-button { background-color: white; border: 1px solid var(--light-gray); padding: 10px 15px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all var(--transition-speed); white-space: nowrap; color: var(--dark-gray); } .action-button:hover { background-color: var(--light-blue); border-color: var(--accent-blue); color: var(--primary-blue); transform: translateY(-2px); } .action-icon { font-size: 1rem; } .tooltip { position: absolute; background-color: var(--dark-gray); color: white; padding: 8px 12px; border-radius: 4px; font-size: 0.8rem; z-index: 100; pointer-events: none; opacity: 0; transition: opacity var(--transition-speed); white-space: nowrap; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--dark-gray) transparent transparent transparent; } @media (max-width: 600px) { .balance-summary { flex-direction: column; } .balance-card { min-width: 100%; } .main-content { padding: 1rem; } .transaction-icon { width: 35px; height: 35px; font-size: 1rem; } .transaction-name { font-size: 0.9rem; } .chart-container { height: 150px; } } </style> </head> <body> <div class="dashboard-container"> <div class="header"> <div class="header-content"> <div class="logo"> <div class="logo-icon">$</div> FinTrack </div> <div class="user-profile" id="user-profile"> <div class="user-avatar">J</div> <span>Jamie</span> </div> </div> </div> <div class="main-content"> <div class="quick-actions"> <button class="action-button"> <span class="action-icon">+</span> New Transfer </button> <button class="action-button"> <span class="action-icon">↓</span> Deposit </button> <button class="action-button"> <span class="action-icon">📊</span> Analytics </button> <button class="action-button"> <span class="action-icon">🔍</span> Search </button> <button class="action-button"> <span class="action-icon">⚙️</span> Settings </button> </div> <div class="balance-summary"> <div class="balance-card"> <div class="card-label">Total Balance</div> <div class="card-value">$12,458.32</div> <div class="card-change">+2.4% from last month</div> <div class="card-footer"> <span>Last update: Today, 10:45 AM</span> </div> </div> <div class="balance-card" style="background: linear-gradient(135deg, #2c5282, #1a365d);"> <div class="card-label">Monthly Spending</div> <div class="card-value">$3,127.90</div> <div class="card-change">18% of budget used</div> <div class="card-footer"> <span>$1,872.10 remaining</span> </div> </div> </div> <div class="chart-section"> <div class="chart-header"> <div class="section-title">Cash Flow</div> <div class="chart-options"> <div class="chart-option active" data-period="week">Week</div> <div class="chart-option" data-period="month">Month</div> <div class="chart-option" data-period="year">Year</div> </div> </div> <div class="chart-container" id="chart-container"> <div class="chart-bar" style="height: 60%;" data-value="$1,240"></div> <div class="chart-bar" style="height: 75%;" data-value="$1,540"></div> <div class="chart-bar" style="height: 40%;" data-value="$830"></div> <div class="chart-bar" style="height: 90%;" data-value="$1,850"></div> <div class="chart-bar" style="height: 55%;" data-value="$1,130"></div> <div class="chart-bar" style="height: 70%;" data-value="$1,440"></div> <div class="chart-bar" style="height: 85%;" data-value="$1,760"></div> </div> <div class="chart-labels"> <div class="chart-label">Mon</div> <div class="chart-label">Tue</div> <div class="chart-label">Wed</div> <div class="chart-label">Thu</div> <div class="chart-label">Fri</div> <div class="chart-label">Sat</div> <div class="chart-label">Sun</div> </div> </div> <div class="transactions-section"> <div class="section-title">Recent Transactions</div> <div class="transaction-list"> <div class="transaction-item"> <div class="transaction-info"> <div class="transaction-icon" style="background-color: #f3f4ff; color: #5468ff;"> ☕ </div> <div class="transaction-details"> <div class="transaction-name">Blue Bottle Coffee</div> <div class="transaction-date">Today, 8:30 AM</div> </div> </div> <div class="transaction-amount expense">-$6.75</div> </div> <div class="transaction-item"> <div class="transaction-info"> <div class="transaction-icon" style="background-color: #e9f7ef; color: #27ae60;"> 💼 </div> <div class="transaction-details"> <div class="transaction-name">Salary Deposit</div> <div class="transaction-date">Yesterday, 9:15 AM</div> </div> </div> <div class="transaction-amount income">+$3,450.00</div> </div> <div class="transaction-item"> <div class="transaction-info"> <div class="transaction-icon" style="background-color: #fff8e1; color: #f5b041;"> 🛒 </div> <div class="transaction-details"> <div class="transaction-name">Whole Foods Market</div> <div class="transaction-date">Jan 17, 6:30 PM</div> </div> </div> <div class="transaction-amount expense">-$87.32</div> </div> <div class="transaction-item"> <div class="transaction-info"> <div class="transaction-icon" style="background-color: #ebf5fb; color: #3498db;"> 📱 </div> <div class="transaction-details"> <div class="transaction-name">Verizon Wireless</div> <div class="transaction-date">Jan 15, 2:45 PM</div> </div> </div> <div class="transaction-amount expense">-$95.99</div> </div> </div> </div> </div> </div> <div class="tooltip" id="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Chart option switching const chartOptions = document.querySelectorAll('.chart-option'); const chartBars = document.querySelectorAll('.chart-bar'); // Random data for different time periods const data = { week: [60, 75, 40, 90, 55, 70, 85], month: [45, 60, 80, 65, 90, 50, 75], year: [70, 85, 60, 75, 65, 80, 90] }; const values = { week: ['$1,240', '$1,540', '$830', '$1,850', '$1,130', '$1,440', '$1,760'], month: ['$930', '$1,240', '$1,650', '$1,340', '$1,860', '$1,030', '$1,545'], year: ['$1,440', '$1,750', '$1,240', '$1,530', '$1,345', '$1,640', '$1,850'] }; chartOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options chartOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Update chart data const period = this.getAttribute('data-period'); updateChart(period); }); }); function updateChart(period) { chartBars.forEach((bar, index) => { // Animate height change setTimeout(() => { bar.style.height = `${data[period][index]}%`; bar.setAttribute('data-value', values[period][index]); }, index * 50); }); } // Tooltip functionality const tooltip = document.getElementById('tooltip'); const interactiveElements = document.querySelectorAll('.transaction-item, .balance-card, .action-button, .chart-bar'); interactiveElements.forEach(element => { element.addEventListener('mouseenter', function(e) { let message = ''; if (this.classList.contains('transaction-item')) { const name = this.querySelector('.transaction-name').textContent; const amount = this.querySelector('.transaction-amount').textContent; message = `${name}: ${amount}`; } else if (this.classList.contains('balance-card')) { const label = this.querySelector('.card-label').textContent; message = `View detailed ${label.toLowerCase()} report`; } else if (this.classList.contains('action-button')) { message = `Click to ${this.textContent.trim()}`; } else if (this.classList.contains('chart-bar')) { message = this.getAttribute('data-value'); } tooltip.textContent = message; tooltip.style.opacity = '1'; // Position the tooltip const rect = this.getBoundingClientRect(); tooltip.style.left = `${rect.left + (rect.width / 2)}px`; tooltip.style.top = `${rect.top - 40}px`; }); element.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; }); }); // Simulate loading the user profile const userProfile = document.getElementById('user-profile'); userProfile.addEventListener('click', function() { this.classList.toggle('active'); // In a real app, this would open a dropdown or profile modal }); // Add ripple effect to transaction items document.querySelectorAll('.transaction-item').forEach(item => { item.addEventListener('click', function() { const ripple = document.createElement('div'); ripple.className = 'ripple'; ripple.style.width = ripple.style.height = Math.max(item.offsetWidth, item.offsetHeight) + 'px'; const rect = item.getBoundingClientRect(); ripple.style.left = (event.clientX - rect.left - ripple.offsetWidth / 2) + 'px'; ripple.style.top = (event.clientY - rect.top - ripple.offsetHeight / 2) + 'px'; item.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Animated border for transaction items const items = document.querySelectorAll('.transaction-item'); function animateBorders() { items.forEach((item, index) => { setTimeout(() => { item.style.borderColor = 'var(--accent-blue)'; setTimeout(() => { item.style.borderColor = 'var(--light-gray)'; }, 300); }, index * 200); }); } // Run the animation once on load setTimeout(animateBorders, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Art & Culture Exhibition Frame</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:wght@300;400;600&display=swap'); :root { --primary-color: #f5f0e9; --secondary-color: #e8d8c3; --accent-color: #9c7a54; --text-dark: #463827; --text-light: #8a7968; --border-ornate: 12px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Cormorant Garamond', serif; background-color: var(--primary-color); color: var(--text-dark); line-height: 1.6; max-width: 700px; max-height: 700px; overflow-x: hidden; overflow-y: auto; margin: 0 auto; padding: 2rem 1rem; position: relative; } .frame { position: relative; border: 1px solid var(--accent-color); padding: 2rem; height: 100%; box-shadow: 0 0 15px rgba(156, 122, 84, 0.15); background-color: var(--primary-color); overflow: hidden; } .frame::before { content: ""; position: absolute; top: var(--border-ornate); left: var(--border-ornate); right: var(--border-ornate); bottom: var(--border-ornate); border: 1px solid var(--accent-color); pointer-events: none; opacity: 0.7; } .ornament { position: absolute; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239c7a54'%3E%3Cpath d='M12 0L9 9l-9 3 9 3 3 9 3-9 9-3-9-3z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0.6; } .ornament-tl { top: 5px; left: 5px; } .ornament-tr { top: 5px; right: 5px; transform: rotate(90deg); } .ornament-bl { bottom: 5px; left: 5px; transform: rotate(270deg); } .ornament-br { bottom: 5px; right: 5px; transform: rotate(180deg); } header { text-align: center; margin-bottom: 2rem; opacity: 0; transform: translateY(-20px); animation: fadeIn 0.8s ease-out forwards; } h1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.5rem; color: var(--text-dark); margin-bottom: 0.5rem; line-height: 1.2; letter-spacing: 0.5px; } h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 1.2rem; font-style: italic; color: var(--text-light); letter-spacing: 1px; } .exhibition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .exhibition-card { background-color: var(--secondary-color); border-radius: 4px; overflow: hidden; position: relative; transform: scale(0.95); opacity: 0; transition: transform 0.3s ease-out, box-shadow 0.3s ease; animation: fadeInScale 0.5s ease-out forwards; height: 180px; cursor: pointer; } .exhibition-card:nth-child(1) { animation-delay: 0.2s; } .exhibition-card:nth-child(2) { animation-delay: 0.3s; } .exhibition-card:nth-child(3) { animation-delay: 0.4s; } .exhibition-card:nth-child(4) { animation-delay: 0.5s; } .exhibition-card:hover { transform: scale(1.02); box-shadow: 0 5px 15px rgba(156, 122, 84, 0.2); } .card-content { padding: 1.25rem; position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .card-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; } .card-date { font-style: italic; font-size: 0.9rem; color: var(--text-light); } .card-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(245, 240, 233, 0.95); padding: 1.25rem; opacity: 0; transform: translateY(5px); transition: opacity 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; justify-content: center; } .exhibition-card:hover .card-info { opacity: 1; transform: translateY(0); } .card-description { font-size: 0.9rem; margin-bottom: 0.5rem; line-height: 1.4; } .view-more { color: var(--accent-color); font-weight: 600; font-style: italic; font-size: 0.9rem; display: inline-block; position: relative; padding-bottom: 2px; } .view-more::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--accent-color); transition: width 0.3s ease; } .view-more:hover::after { width: 100%; } .event-info { background-color: var(--secondary-color); padding: 1.5rem; border-radius: 4px; text-align: center; margin-bottom: 2rem; opacity: 0; animation: fadeIn 0.5s ease-out 0.6s forwards; } .event-info h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--text-dark); } .event-info p { font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-dark); } .button { display: inline-block; background-color: var(--accent-color); color: white; font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 600; padding: 0.6rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; margin-top: 0.5rem; } .button:hover { background-color: #876842; transform: translateY(-2px); } .newsletter { text-align: center; margin-top: 2rem; opacity: 0; animation: fadeIn 0.5s ease-out 0.8s forwards; } .newsletter h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--text-dark); } .newsletter-form { display: flex; justify-content: center; margin-top: 1rem; } .email-input { font-family: 'Cormorant Garamond', serif; padding: 0.6rem 1rem; width: 60%; border: 1px solid var(--accent-color); border-radius: 4px 0 0 4px; background-color: white; font-size: 0.9rem; } .subscribe-btn { background-color: var(--accent-color); color: white; font-family: 'Cormorant Garamond', serif; font-weight: 600; padding: 0.6rem 1rem; border: none; border-radius: 0 4px 4px 0; cursor: pointer; transition: background-color 0.3s; } .subscribe-btn:hover { background-color: #876842; } .success-message { display: none; color: var(--accent-color); font-style: italic; margin-top: 0.5rem; font-size: 0.9rem; } footer { text-align: center; margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-light); font-style: italic; opacity: 0; animation: fadeIn 0.5s ease-out 1s forwards; } /* Keyframes */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } /* Responsive adjustments */ @media (max-width: 600px) { body { padding: 1rem; } .frame { padding: 1.5rem 1rem; } h1 { font-size: 2rem; } .exhibition-grid { grid-template-columns: 1fr; } .exhibition-card { height: 160px; } .newsletter-form { flex-direction: column; align-items: center; } .email-input { width: 100%; border-radius: 4px; margin-bottom: 0.5rem; } .subscribe-btn { width: 100%; border-radius: 4px; } } </style> </head> <body> <div class="frame"> <div class="ornament ornament-tl"></div> <div class="ornament ornament-tr"></div> <div class="ornament ornament-bl"></div> <div class="ornament ornament-br"></div> <header> <h1>The Art of Time</h1> <h2>Exhibition of Classical & Contemporary Masters</h2> </header> <div class="exhibition-grid"> <div class="exhibition-card"> <div class="card-content"> <div> <h3 class="card-title">Renaissance Reimagined</h3> <p class="card-date">June 12 - July 10, 2023</p> </div> </div> <div class="card-info"> <p class="card-description">A modern interpretation of Renaissance masterpieces featuring emerging artists' unique perspectives on classical techniques.</p> <span class="view-more">View exhibition details</span> </div> </div> <div class="exhibition-card"> <div class="card-content"> <div> <h3 class="card-title">Baroque in Motion</h3> <p class="card-date">July 15 - August 20, 2023</p> </div> </div> <div class="card-info"> <p class="card-description">Dramatic light and shadow come alive in this interactive exhibition featuring multimedia installations inspired by Baroque masters.</p> <span class="view-more">View exhibition details</span> </div> </div> <div class="exhibition-card"> <div class="card-content"> <div> <h3 class="card-title">Impressions of Modernity</h3> <p class="card-date">August 25 - September 30, 2023</p> </div> </div> <div class="card-info"> <p class="card-description">Discover how the Impressionist movement continues to influence contemporary urban landscape painting and digital art forms.</p> <span class="view-more">View exhibition details</span> </div> </div> <div class="exhibition-card"> <div class="card-content"> <div> <h3 class="card-title">Surrealist Echoes</h3> <p class="card-date">October 5 - November 15, 2023</p> </div> </div> <div class="card-info"> <p class="card-description">Dreams and reality collide in this immersive exhibition exploring the legacy of Surrealism in today's AI-generated artwork.</p> <span class="view-more">View exhibition details</span> </div> </div> </div> <div class="event-info"> <h3>Special Opening Night</h3> <p>Join us for an exclusive preview with wine tasting, live classical performances, and discussions with featured artists.</p> <button class="button" id="reserveButton">Reserve Your Place</button> </div> <div class="newsletter"> <h3>Stay Informed of Future Exhibitions</h3> <p>Receive our monthly curator's selection and private viewing invitations.</p> <form class="newsletter-form" id="newsletterForm"> <input type="email" class="email-input" placeholder="Your email address" required> <button type="submit" class="subscribe-btn">Subscribe</button> </form> <p class="success-message" id="successMessage">Thank you for subscribing to our cultural calendar!</p> </div> <footer> <p>The National Gallery of Modern Perspectives © 2023</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Exhibition card click functionality const exhibitionCards = document.querySelectorAll('.exhibition-card'); exhibitionCards.forEach(card => { card.addEventListener('click', function() { // Would normally navigate to exhibition details // Instead we'll just animate the card this.style.transform = 'scale(1.05)'; setTimeout(() => { this.style.transform = ''; }, 300); }); }); // Reserve button functionality const reserveButton = document.getElementById('reserveButton'); reserveButton.addEventListener('click', function() { this.innerHTML = 'Place Reserved!'; this.style.backgroundColor = '#6b563a'; setTimeout(() => { this.innerHTML = 'Reserve Your Place'; this.style.backgroundColor = ''; }, 2000); }); // Newsletter subscription const newsletterForm = document.getElementById('newsletterForm'); const successMessage = document.getElementById('successMessage'); newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('.email-input'); // Simulate form submission emailInput.value = ''; successMessage.style.display = 'block'; // Hide success message after 3 seconds setTimeout(() => { successMessage.style.display = 'none'; }, 3000); }); // Dynamic content fades on scroll const fadeElements = document.querySelectorAll('.exhibition-card, .event-info, .newsletter'); let lastScrollPosition = 0; function fadeInOnScroll() { const scrollPosition = window.scrollY; const isScrollingDown = scrollPosition > lastScrollPosition; fadeElements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; if (elementPosition < window.innerHeight * 0.85) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } else if (isScrollingDown) { element.style.opacity = '0'; element.style.transform = 'translateY(20px)'; } }); lastScrollPosition = scrollPosition; } // Initialize all elements as visible since we're in a small container fadeElements.forEach(element => { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; }); document.addEventListener('scroll', fadeInOnScroll); // Add subtle border animation const frame = document.querySelector('.frame'); function animateBorder() { const currentOpacity = parseFloat(getComputedStyle(frame).getPropertyValue('--border-ornate')) || 12; const newValue = currentOpacity === 12 ? 8 : 12; frame.style.setProperty('--border-ornate', `${newValue}px`); setTimeout(animateBorder, 2000); } animateBorder(); }); </script> </body> </html>
