In the ever-evolving world of web development, finding efficient ways to create stunning user interfaces is crucial. Subframe offers a powerful solution with its drag-and-drop visual editor, allowing developers to build beautiful UIs in minutes.
This article explores ten standout examples of what you can achieve with Subframe. From sleek dashboards to interactive forms, these examples showcase the versatility and ease of use that make Subframe a game-changer in UI design.
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 UIs effortlessly. Loved by professionals across the industry, Subframe ensures every design is both stunning and functional.
Start for free and experience the ease of building beautiful interfaces today.
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to revolutionize your UI design process? With Subframe, you can create pixel-perfect interfaces, including Off, in minutes. Experience unparalleled efficiency and ease of use.
Start for free and begin designing stunning UIs immediately. Don't wait—unlock your creative potential with Subframe today!
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #5046e5; --secondary: #ff6b35; --dark: #1a1a2e; --light: #f8f8ff; --accent: #36dac0; --text: #333344; --menu-width: 280px; --anim-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--light); color: var(--text); height: 100vh; overflow-x: hidden; overflow-y: auto; position: relative; } .app-container { width: 100%; max-width: 700px; margin: 0 auto; height: 100%; position: relative; overflow: hidden; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } .navbar { position: fixed; top: 0; width: 100%; max-width: 700px; height: 70px; background-color: var(--primary); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .logo { color: var(--light); font-weight: 700; font-size: 24px; letter-spacing: 1px; } .menu-toggle { background: transparent; border: none; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: space-around; cursor: pointer; padding: 8px; border-radius: 50%; transition: transform 0.3s ease; } .menu-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } .menu-toggle span { display: block; width: 100%; height: 3px; background-color: var(--light); border-radius: 3px; transition: all var(--anim-speed) ease; } .menu-toggle.active { transform: rotate(180deg); } .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .off-canvas-menu { position: fixed; top: 0; right: -var(--menu-width); width: var(--menu-width); height: 100%; background-color: var(--dark); transition: transform var(--anim-speed) cubic-bezier(0.77, 0, 0.175, 1); padding-top: 90px; z-index: 90; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); overflow-y: auto; } .off-canvas-menu.open { transform: translateX(-100%); } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 80; visibility: hidden; opacity: 0; transition: all var(--anim-speed) ease; } .menu-overlay.active { visibility: visible; opacity: 1; } .menu-list { list-style: none; padding: 0; } .menu-item { margin-bottom: 8px; } .menu-link { display: flex; align-items: center; padding: 16px 20px; color: var(--light); text-decoration: none; font-size: 18px; font-weight: 500; transition: all 0.2s ease; border-left: 4px solid transparent; } .menu-link:hover, .menu-link.active { background-color: rgba(255, 255, 255, 0.1); border-left: 4px solid var(--secondary); } .menu-link i { margin-right: 15px; font-size: 22px; min-width: 25px; text-align: center; } .content { padding: 90px 20px 20px; min-height: 100%; transition: transform var(--anim-speed) ease; } .content.menu-open { transform: translateX(-80px); } .badge { background-color: var(--secondary); color: white; font-size: 12px; padding: 4px 8px; border-radius: 10px; margin-left: 10px; } .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; } .product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .product-image { height: 180px; width: 100%; object-fit: cover; border-bottom: 1px solid #f0f0f0; } .product-info { padding: 15px; } .product-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .product-price { font-size: 18px; color: var(--primary); font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .add-to-cart { background-color: var(--primary); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .add-to-cart:hover { background-color: var(--secondary); transform: scale(1.1); } .search-bar { margin: 20px 0; position: relative; } .search-input { width: 100%; padding: 14px 20px 14px 50px; border: none; border-radius: 30px; background-color: #f0f0f5; font-size: 16px; transition: box-shadow 0.3s ease; } .search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--primary); } .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #888; } .banner { background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 15px; padding: 25px 20px; color: white; margin-bottom: 25px; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(80, 70, 229, 0.3); } .banner-pattern { position: absolute; top: 0; right: 0; width: 150px; height: 150px; opacity: 0.1; background-image: radial-gradient(circle, white 2px, transparent 2px); background-size: 15px 15px; } .banner h2 { font-size: 24px; margin-bottom: 10px; font-weight: 700; } .banner p { font-size: 16px; margin-bottom: 20px; max-width: 80%; } .banner-btn { background-color: white; color: var(--primary); border: none; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .banner-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .category-list { display: flex; overflow-x: auto; gap: 15px; padding: 5px 0 15px; scrollbar-width: none; margin-bottom: 20px; } .category-list::-webkit-scrollbar { display: none; } .category-item { flex: 0 0 auto; padding: 8px 16px; background-color: #f0f0f5; border-radius: 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .category-item.active { background-color: var(--primary); color: white; } .category-item:hover:not(.active) { background-color: #e0e0e5; } .menu-footer { position: absolute; bottom: 0; width: 100%; padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.2); } .user-profile { display: flex; align-items: center; margin-bottom: 15px; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--secondary); display: flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold; color: white; } .user-info { flex: 1; } .user-name { color: white; font-weight: 600; font-size: 16px; } .user-email { color: rgba(255, 255, 255, 0.7); font-size: 13px; } .logout-btn { display: block; width: 100%; padding: 12px; background-color: rgba(255, 255, 255, 0.1); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500; transition: background-color 0.2s ease; } .logout-btn:hover { background-color: var(--secondary); } .notification-dot { width: 8px; height: 8px; background-color: var(--secondary); border-radius: 50%; display: inline-block; margin-left: 10px; } /* Cart indicator in nav */ .cart-icon-container { position: relative; margin-right: 10px; } .cart-count { position: absolute; top: -8px; right: -8px; background-color: var(--secondary); color: white; font-size: 12px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } /* Animation for menu items */ @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .menu-item { opacity: 0; animation: slideIn 0.4s forwards; } .menu-item:nth-child(1) { animation-delay: 0.1s; } .menu-item:nth-child(2) { animation-delay: 0.15s; } .menu-item:nth-child(3) { animation-delay: 0.2s; } .menu-item:nth-child(4) { animation-delay: 0.25s; } .menu-item:nth-child(5) { animation-delay: 0.3s; } .menu-item:nth-child(6) { animation-delay: 0.35s; } /* Animation for menu user info */ .user-profile { opacity: 0; animation: slideIn 0.4s forwards; animation-delay: 0.4s; } .logout-btn { opacity: 0; animation: slideIn 0.4s forwards; animation-delay: 0.45s; } /* Loading indicator */ @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .loading-indicator { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 150; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px 30px; border-radius: 10px; display: none; animation: pulse 1.5s infinite; } .loading-indicator.visible { display: block; } /* Ripple effect for buttons */ .ripple { position: relative; overflow: hidden; } .ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s; } .ripple:active:after { transform: scale(0, 0); opacity: .3; transition: 0s; } </style> </head> <body> <div class="app-container"> <div class="navbar"> <div class="logo">ShopSwift</div> <div style="display: flex; align-items: center;"> <div class="cart-icon-container"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> <span class="cart-count">3</span> </div> <button class="menu-toggle" id="menu-toggle"> <span></span> <span></span> <span></span> </button> </div> </div> <div class="off-canvas-menu" id="off-canvas-menu"> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link active"> <i> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </i> Home </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <i> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> </i> My Cart <span class="badge">3</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <i> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> </svg> </i> Wishlist </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <i> <svg width="22" height="22" 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> </i> Notifications <span class="notification-dot"></span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <i> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> </i> Orders History </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <i> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </i> Settings </a> </li> </ul> <div class="menu-footer"> <div class="user-profile"> <div class="user-avatar"> JS </div> <div class="user-info"> <div class="user-name">Jamie Smith</div> <div class="user-email">[email protected]</div> </div> </div> <button class="logout-btn ripple">Sign Out</button> </div> </div> <div class="menu-overlay" id="menu-overlay"></div> <div class="content" id="content"> <div class="banner"> <div class="banner-pattern"></div> <h2>Summer Collection</h2> <p>Explore our newest arrivals with 20% off your first purchase</p> <button class="banner-btn ripple">Shop Now</button> </div> <div class="search-bar"> <span class="search-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </span> <input type="text" class="search-input" placeholder="Search for products..."> </div> <div class="category-list"> <span class="category-item active">All Products</span> <span class="category-item">Electronics</span> <span class="category-item">Fashion</span> <span class="category-item">Home Decor</span> <span class="category-item">Beauty</span> <span class="category-item">Sports</span> </div> <div class="product-grid"> <div class="product-card"> <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Premium Wireless Headphones" class="product-image"> <div class="product-info"> <div class="product-title">Premium Wireless Headphones</div> <div class="product-price"> $129.99 <button class="add-to-cart ripple">+</button> </div> </div> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="Smart Watch Pro" class="product-image"> <div class="product-info"> <div class="product-title">Smart Watch Pro</div> <div class="product-price"> $199.99 <button class="add-to-cart ripple">+</button> </div> </div> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f" alt="Vintage Sunglasses" class="product-image"> <div class="product-info"> <div class="product-title">Vintage Sunglasses</div> <div class="product-price"> $49.99 <button class="add-to-cart ripple">+</button> </div> </div> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" alt="Running Sneakers" class="product-image"> <div class="product-info"> <div class="product-title">Running Sneakers</div> <div class="product-price"> $89.99 <button class="add-to-cart ripple">+</button> </div> </div> </div> </div> </div> <div class="loading-indicator" id="loading-indicator"> Loading... </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menu-toggle'); const offCanvasMenu = document.getElementById('off-canvas-menu'); const menuOverlay = document.getElementById('menu-overlay'); const content = document.getElementById('content'); const loadingIndicator = document.getElementById('loading-indicator'); const addToCartButtons = document.querySelectorAll('.add-to-cart'); const categoryItems = document.querySelectorAll('.category-item'); // Menu toggle functionality menuToggle.addEventListener('click', function() { this.classList.toggle('active'); offCanvasMenu.classList.toggle('open'); menuOverlay.classList.toggle('active'); content.classList.toggle('menu-open'); }); // Close menu when overlay is clicked menuOverlay.addEventListener('click', function() { menuToggle.classList.remove('active'); offCanvasMenu.classList.remove('open'); menuOverlay.classList.remove('active'); content.classList.remove('menu-open'); }); // Menu links click handler const menuLinks = document.querySelectorAll('.menu-link'); menuLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Show loading loadingIndicator.classList.add('visible'); // Remove active class from all links menuLinks.forEach(l => l.classList.remove('active')); // Add active class to clicked link this.classList.add('active'); // Close menu after short delay (simulate page loading) setTimeout(() => { menuToggle.classList.remove('active'); offCanvasMenu.classList.remove('open'); menuOverlay.classList.remove('active'); content.classList.remove('menu-open'); loadingIndicator.classList.remove('visible'); }, 800); }); }); // Add to cart functionality addToCartButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Create an animation effect const cartCount = document.querySelector('.cart-count'); cartCount.style.transform = 'scale(1.5)'; setTimeout(() => { cartCount.style.transform = 'scale(1)'; }, 300); // Simulate adding to cart const currentCount = parseInt(cartCount.textContent); cartCount.textContent = currentCount + 1; // Show a brief success animation this.style.backgroundColor = 'var(--accent)'; setTimeout(() => { this.style.backgroundColor = 'var(--primary)'; }, 300); }); }); // Category selection categoryItems.forEach(item => { item.addEventListener('click', function() { // Remove active class from all category items categoryItems.forEach(i => i.classList.remove('active')); // Add active class to clicked category this.classList.add('active'); // Show loading loadingIndicator.classList.add('visible'); // Simulate loading new products setTimeout(() => { loadingIndicator.classList.remove('visible'); }, 800); }); }); // Banner button click const bannerBtn = document.querySelector('.banner-btn'); bannerBtn.addEventListener('click', function() { // Show loading loadingIndicator.classList.add('visible'); // Simulate loading setTimeout(() => { loadingIndicator.classList.remove('visible'); // Scroll to products document.querySelector('.product-grid').scrollIntoView({ behavior: 'smooth' }); }, 800); }); // Search functionality const searchInput = document.querySelector('.search-input'); searchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); // Show loading loadingIndicator.classList.add('visible'); // Simulate search setTimeout(() => { loadingIndicator.classList.remove('visible'); this.blur(); // Remove focus from search input }, 800); } }); // Logout button functionality const logoutBtn = document.querySelector('.logout-btn'); logoutBtn.addEventListener('click', function() { // Show loading loadingIndicator.classList.add('visible'); // Simulate logout process setTimeout(() => { loadingIndicator.classList.remove('visible'); // Close menu menuToggle.classList.remove('active'); offCanvasMenu.classList.remove('open'); menuOverlay.classList.remove('active'); content.classList.remove('menu-open'); }, 800); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataPulse Admin Dashboard</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --accent-hover: #2980b9; --text: #ecf0f1; --text-secondary: #bdc3c7; --muted: #7f8c8d; --border: rgba(236, 240, 241, 0.1); --success: #2ecc71; --warning: #f39c12; --danger: #e74c3c; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--secondary); color: var(--text); line-height: 1.6; height: 100vh; overflow-x: hidden; display: flex; } /* Off-Canvas Menu */ .off-canvas { position: fixed; width: 280px; height: 100%; left: -280px; top: 0; background-color: var(--primary); transition: var(--transition); z-index: 1000; box-shadow: var(--shadow); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--primary); } .off-canvas::-webkit-scrollbar { width: 6px; } .off-canvas::-webkit-scrollbar-track { background: var(--primary); } .off-canvas::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 20px; } .off-canvas.active { left: 0; } .brand { display: flex; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--border); } .brand-logo { width: 32px; height: 32px; margin-right: 0.75rem; background-color: var(--accent); border-radius: 8px; position: relative; overflow: hidden; } .brand-logo::before, .brand-logo::after { content: ''; position: absolute; background-color: rgba(255, 255, 255, 0.3); } .brand-logo::before { width: 16px; height: 16px; border-radius: 50%; top: 4px; left: 4px; } .brand-logo::after { width: 10px; height: 10px; border-radius: 50%; bottom: 4px; right: 6px; } .brand-name { font-weight: 700; font-size: 1.25rem; color: var(--text); letter-spacing: -0.5px; } .brand-name span { color: var(--accent); } .user-info { display: flex; align-items: center; padding: 1rem 1.5rem; background-color: rgba(52, 73, 94, 0.3); margin: 1rem; border-radius: 8px; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--accent); display: flex; align-items: center; justify-content: center; margin-right: 0.75rem; font-weight: 600; color: white; } .user-details { flex: 1; } .user-name { font-weight: 600; font-size: 0.875rem; } .user-role { font-size: 0.75rem; color: var(--text-secondary); } .menu-section { margin-bottom: 0.75rem; } .menu-label { display: block; padding: 0.5rem 1.5rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .menu-list { list-style: none; } .menu-item { position: relative; } .menu-link { display: flex; align-items: center; padding: 0.75rem 1.5rem; color: var(--text-secondary); text-decoration: none; transition: var(--transition); font-size: 0.9rem; position: relative; } .menu-link:hover { color: var(--text); background-color: rgba(52, 152, 219, 0.1); } .menu-link.active { color: var(--text); background-color: rgba(52, 152, 219, 0.2); border-left: 3px solid var(--accent); } .menu-icon { margin-right: 0.75rem; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .menu-arrow { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); transition: var(--transition); } .menu-item.expanded .menu-arrow { transform: translateY(-50%) rotate(180deg); } .submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: rgba(0, 0, 0, 0.1); } .menu-item.expanded .submenu { max-height: 1000px; /* Arbitrary large value */ } .submenu-link { display: flex; align-items: center; padding: 0.6rem 1.5rem 0.6rem 3.25rem; color: var(--text-secondary); text-decoration: none; transition: var(--transition); font-size: 0.85rem; } .submenu-link:hover { color: var(--text); background-color: rgba(52, 152, 219, 0.1); } .submenu-link.active { color: var(--text); background-color: rgba(52, 152, 219, 0.15); border-left: 2px solid var(--accent); } /* Third-level menu */ .nested-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: rgba(0, 0, 0, 0.1); } .submenu-item.expanded .nested-submenu { max-height: 500px; /* Arbitrary large value */ } .nested-submenu-link { display: flex; align-items: center; padding: 0.5rem 1.5rem 0.5rem 4.5rem; color: var(--text-secondary); text-decoration: none; transition: var(--transition); font-size: 0.8rem; } .nested-submenu-link:hover { color: var(--text); background-color: rgba(52, 152, 219, 0.1); } .nested-submenu-link.active { color: var(--text); background-color: rgba(52, 152, 219, 0.15); } .submenu-item { position: relative; } .submenu-arrow { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); transition: var(--transition); } .submenu-item.expanded .submenu-arrow { transform: translateY(-50%) rotate(180deg); } /* Main Content */ .main-content { flex: 1; padding: 1.5rem; margin-left: 0; transition: var(--transition); width: 100%; max-width: 700px; margin: 0 auto; } .main-content.shifted { margin-left: 280px; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .menu-toggle { width: 40px; height: 40px; background-color: var(--primary); border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); transition: var(--transition); box-shadow: var(--shadow); } .menu-toggle:hover { background-color: var(--accent); } .menu-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3); } .page-title { font-size: 1.5rem; font-weight: 700; color: var(--text); } .breadcrumb { display: flex; list-style: none; margin-bottom: 1rem; font-size: 0.875rem; } .breadcrumb-item { color: var(--muted); } .breadcrumb-item:not(:last-child)::after { content: '/'; margin: 0 0.5rem; color: var(--muted); } .breadcrumb-item:last-child { color: var(--text); font-weight: 500; } .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background-color: var(--primary); border-radius: 8px; padding: 1.25rem; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: var(--transition); } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .stat-card::before { content: ''; position: absolute; width: 100px; height: 100px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.03); top: -50px; right: -50px; } .stat-icon { display: inline-flex; width: 40px; height: 40px; background-color: rgba(52, 152, 219, 0.15); border-radius: 8px; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: var(--accent); } .stat-value { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; } .stat-label { color: var(--text-secondary); font-size: 0.875rem; } .stat-change { display: inline-flex; align-items: center; font-size: 0.75rem; margin-top: 0.5rem; } .stat-change.positive { color: var(--success); } .stat-change.negative { color: var(--danger); } .stat-change i { margin-right: 0.25rem; } .data-card { background-color: var(--primary); border-radius: 8px; padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; } .data-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .data-card-title { font-size: 1.125rem; font-weight: 600; } .data-card-actions { display: flex; gap: 0.5rem; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: var(--transition); border: none; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; } .btn-primary { background-color: var(--accent); color: white; } .btn-primary:hover { background-color: var(--accent-hover); } .btn-outline { background-color: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { background-color: rgba(255, 255, 255, 0.05); } .btn i { margin-right: 0.375rem; } .data-visualization { height: 250px; width: 100%; position: relative; display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; } .data-bar { flex: 1; background-color: var(--accent); border-radius: 4px 4px 0 0; position: relative; min-height: 30px; transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; overflow: hidden; } .data-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); border-radius: 4px 4px 0 0; } .data-bar:hover { background-color: var(--accent-hover); } .data-bar-tooltip { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background-color: var(--secondary); color: var(--text); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; white-space: nowrap; } .data-bar:hover .data-bar-tooltip { opacity: 1; } .data-bar-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } .data-table th { font-weight: 600; color: var(--muted); font-size: 0.875rem; } .data-table td { font-size: 0.9375rem; } .data-table tbody tr { transition: var(--transition); } .data-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .status-badge.success { background-color: rgba(46, 204, 113, 0.15); color: var(--success); } .status-badge.warning { background-color: rgba(243, 156, 18, 0.15); color: var(--warning); } .status-badge.danger { background-color: rgba(231, 76, 60, 0.15); color: var(--danger); } /* Alert Animation */ @keyframes slide-in { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .alert { position: fixed; top: 20px; right: 20px; padding: 1rem; border-radius: 8px; background-color: var(--primary); color: var(--text); box-shadow: var(--shadow); display: flex; align-items: center; z-index: 2000; animation: slide-in 0.3s ease forwards; max-width: 300px; transition: var(--transition); opacity: 0; transform: translateY(-20px); pointer-events: none; } .alert.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .alert-icon { margin-right: 0.75rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: rgba(52, 152, 219, 0.15); border-radius: 50%; color: var(--accent); } .alert-content { flex: 1; } .alert-title { font-weight: 600; margin-bottom: 0.25rem; } .alert-message { font-size: 0.875rem; color: var(--text-secondary); } .alert-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0.25rem; margin-left: 0.5rem; transition: var(--transition); } .alert-close:hover { color: var(--text); } /* Overlay */ .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .overlay.active { opacity: 1; pointer-events: auto; } /* Responsive */ @media (max-width: 768px) { .main-content.shifted { margin-left: 0; } .dashboard-stats { grid-template-columns: 1fr; } } @media (min-width: 769px) { .off-canvas { left: 0; } .main-content { margin-left: 280px; } .menu-toggle { display: none; } .overlay { display: none; } } @media (max-width: 768px) { .off-canvas { left: -280px; } .main-content { margin-left: 0; } } </style> </head> <body> <!-- Off-Canvas Menu --> <div class="off-canvas"> <div class="brand"> <div class="brand-logo"></div> <div class="brand-name">Data<span>Pulse</span></div> </div> <div class="user-info"> <div class="user-avatar">AP</div> <div class="user-details"> <div class="user-name">Alex Park</div> <div class="user-role">Data Analyst</div> </div> </div> <div class="menu-section"> <span class="menu-label">Core</span> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link active"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zm0 8a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 1 0v1.5a.5.5 0 0 1-.5.5z"/> <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zm-8 0a.5.5 0 0 1-.5.5H2a.5.5 0 0 1 0-1h1.5a.5.5 0 0 1 .5.5zM3 4a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 3 4zm10 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H14a.5.5 0 0 1-.5-.5z"/> </svg> </span> Dashboard </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> </svg> </span> Profile </a> </li> </ul> </div> <div class="menu-section"> <span class="menu-label">Analysis</span> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/> </svg> </span> Reports <span class="menu-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/> </svg> </span> </a> <div class="submenu"> <a href="#" class="submenu-link"> Daily Metrics </a> <a href="#" class="submenu-link active"> Performance Analytics </a> <a href="#" class="submenu-link"> Trend Analysis </a> <div class="submenu-item"> <a href="#" class="submenu-link"> Custom Reports <span class="submenu-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/> </svg> </span> </a> <div class="nested-submenu"> <a href="#" class="nested-submenu-link"> Report Builder </a> <a href="#" class="nested-submenu-link"> Scheduled Reports </a> <a href="#" class="nested-submenu-link"> Export Options </a> </div> </div> </div> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </span> Data Visualization <span class="menu-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/> </svg> </span> </a> <div class="submenu"> <a href="#" class="submenu-link"> Interactive Charts </a> <a href="#" class="submenu-link"> Geospatial Maps </a> <a href="#" class="submenu-link"> Heatmaps </a> <a href="#" class="submenu-link"> Timeline Views </a> </div> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/> </svg> </span> Log Analysis </a> </li> </ul> </div> <div class="menu-section"> <span class="menu-label">Data Management</span> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-13zm1 1.5a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-12a.5.5 0 0 1-.5-.5v-12zM0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13z"/> </svg> </span> Data Sets <span class="menu-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/> </svg> </span> </a> <div class="submenu"> <a href="#" class="submenu-link"> Import Data </a> <a href="#" class="submenu-link"> Export Data </a> <a href="#" class="submenu-link"> Data Cleansing </a> <div class="submenu-item"> <a href="#" class="submenu-link"> Advanced Options <span class="submenu-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pastel Prose Blogging Platform</title> <style> /* Base styles with pastel theme */ :root { --primary: #f8e1e7; /* light pink */ --secondary: #e1f8f5; /* mint */ --accent: #d4e3fb; /* light blue */ --text: #5a5a5a; /* dark gray */ --light-text: #7a7a7a; /* medium gray */ --background: #ffffff; /* white */ --shadow: rgba(0, 0, 0, 0.05); --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--background); color: var(--text); font-size: 16px; line-height: 1.6; overflow-x: hidden; height: 100vh; width: 700px; margin: 0 auto; } /* Header styles */ header { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px var(--shadow); position: relative; z-index: 10; } .logo { font-size: 1.5rem; font-weight: 700; background: linear-gradient(45deg, #6a6a6a, #333); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; } .menu-toggle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; height: 20px; position: relative; width: 30px; z-index: 100; transition: var(--transition); } .menu-toggle span { background-color: var(--text); border-radius: 3px; display: block; height: 3px; transition: var(--transition); width: 100%; } .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Off-canvas menu styles */ .off-canvas { background-color: var(--background); border-left: 1px solid var(--primary); box-shadow: -5px 0 15px var(--shadow); height: 100%; overflow-y: auto; position: fixed; right: -300px; top: 0; transition: var(--transition); width: 300px; z-index: 99; padding: 2rem 1.5rem; } .off-canvas.active { right: 0; } .menu-header { border-bottom: 2px solid var(--primary); margin-bottom: 1.5rem; padding-bottom: 1rem; } .menu-title { font-size: 1.5rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; } .menu-subtitle { color: var(--light-text); font-size: 0.9rem; } .section-title { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 1rem; color: var(--text); display: flex; align-items: center; } .section-title svg { margin-right: 0.5rem; opacity: 0.7; } .category-list, .recent-post-list { list-style: none; } .category-item { margin-bottom: 0.75rem; transition: var(--transition); } .category-link { color: var(--text); display: flex; align-items: center; padding: 0.5rem 0.75rem; text-decoration: none; border-radius: 6px; transition: var(--transition); position: relative; overflow: hidden; } .category-link:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: linear-gradient(to bottom, var(--primary), var(--secondary)); opacity: 0; transition: var(--transition); } .category-link:hover { background-color: var(--primary); padding-left: 1.25rem; } .category-link:hover:before { opacity: 1; } .category-count { background-color: var(--accent); border-radius: 12px; color: var(--text); font-size: 0.75rem; margin-left: auto; padding: 0.15rem 0.5rem; transition: var(--transition); } .category-link:hover .category-count { background-color: var(--primary); box-shadow: 0 2px 5px var(--shadow); } .recent-post-item { background-color: var(--background); border-radius: 8px; box-shadow: 0 2px 8px var(--shadow); margin-bottom: 1rem; padding: 1rem; transition: var(--transition); position: relative; overflow: hidden; } .recent-post-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px var(--shadow); } .recent-post-item:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: linear-gradient(to bottom, var(--secondary), var(--accent)); opacity: 0; transition: var(--transition); } .recent-post-item:hover:before { opacity: 1; } .post-title { color: var(--text); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; text-decoration: none; display: block; } .post-date { color: var(--light-text); font-size: 0.8rem; display: flex; align-items: center; } .post-date svg { margin-right: 0.25rem; opacity: 0.7; } .post-excerpt { color: var(--light-text); font-size: 0.85rem; margin-top: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Main content styles */ .content { padding: 2rem 1.5rem; transition: var(--transition); position: relative; } .content.active { transform: translateX(-150px); opacity: 0.7; } .content-header { margin-bottom: 2rem; } .content-title { font-size: 2rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; } .content-subtitle { color: var(--light-text); } .featured-posts { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .post-card { background-color: var(--background); border-radius: 12px; box-shadow: 0 3px 15px var(--shadow); overflow: hidden; transition: var(--transition); } .post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px var(--shadow); } .post-image { height: 180px; overflow: hidden; position: relative; } .post-image img { height: 100%; object-fit: cover; width: 100%; transition: var(--transition); } .post-card:hover .post-image img { transform: scale(1.05); } .category-tag { background-color: var(--primary); border-radius: 20px; color: var(--text); font-size: 0.75rem; padding: 0.25rem 0.75rem; position: absolute; right: 1rem; top: 1rem; z-index: 5; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .post-content { padding: 1.5rem; } .post-card-title { color: var(--text); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .post-card-excerpt { color: var(--light-text); font-size: 0.9rem; margin-bottom: 1.25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--primary); font-size: 0.8rem; color: var(--light-text); } .post-author { display: flex; align-items: center; } .author-avatar { width: 25px; height: 25px; border-radius: 50%; margin-right: 0.5rem; object-fit: cover; } .post-date-card { display: flex; align-items: center; } .post-date-card svg { margin-right: 0.25rem; opacity: 0.7; } .overlay { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; opacity: 0; position: fixed; top: 0; transition: var(--transition); visibility: hidden; width: 100%; z-index: 98; } .overlay.active { opacity: 1; visibility: visible; } .read-more { color: var(--text); display: inline-flex; align-items: center; font-weight: 500; text-decoration: none; font-size: 0.9rem; transition: var(--transition); } .read-more svg { margin-left: 0.25rem; transition: var(--transition); } .read-more:hover { color: var(--primary); } .read-more:hover svg { transform: translateX(3px); } /* Floating bell */ .notification-bell { position: fixed; bottom: 20px; left: 20px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--text); width: 50px; height: 50px; border-radius: 25px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px var(--shadow); z-index: 30; transition: var(--transition); } .notification-bell:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 5px 15px var(--shadow); } .notification-bell svg { transition: var(--transition); } .notification-bell:hover svg { transform: rotate(15deg); } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: #ff6b6b; color: white; font-size: 0.7rem; width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease forwards; } .category-item, .recent-post-item, .post-card { opacity: 0; animation: fadeIn 0.5s ease forwards; } .category-item:nth-child(1) { animation-delay: 0.1s; } .category-item:nth-child(2) { animation-delay: 0.2s; } .category-item:nth-child(3) { animation-delay: 0.3s; } .category-item:nth-child(4) { animation-delay: 0.4s; } .category-item:nth-child(5) { animation-delay: 0.5s; } .recent-post-item:nth-child(1) { animation-delay: 0.15s; } .recent-post-item:nth-child(2) { animation-delay: 0.25s; } .recent-post-item:nth-child(3) { animation-delay: 0.35s; } /* Media queries */ @media (max-width: 700px) { body { width: 100%; } .off-canvas { width: 280px; right: -280px; } .content.active { transform: translateX(-100px); } } @media (max-width: 500px) { .content { padding: 1.5rem 1rem; } .content-title { font-size: 1.75rem; } .post-image { height: 160px; } } </style> </head> <body> <!-- Header --> <header> <div class="logo">Pastel Prose</div> <button class="menu-toggle" id="menu-toggle" aria-label="Toggle Menu"> <span></span> <span></span> <span></span> </button> </header> <!-- Off-canvas menu --> <div class="off-canvas" id="off-canvas"> <div class="menu-header"> <h2 class="menu-title">Pastel Prose</h2> <p class="menu-subtitle">Your oasis of calm, creative writing</p> </div> <h3 class="section-title"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 7H17M7 12H17M7 17H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Categories </h3> <ul class="category-list"> <li class="category-item"> <a href="#" class="category-link"> Mindful Writing <span class="category-count">32</span> </a> </li> <li class="category-item"> <a href="#" class="category-link"> Creative Process <span class="category-count">24</span> </a> </li> <li class="category-item"> <a href="#" class="category-link"> Journaling Tips <span class="category-count">18</span> </a> </li> <li class="category-item"> <a href="#" class="category-link"> Productivity <span class="category-count">15</span> </a> </li> <li class="category-item"> <a href="#" class="category-link"> Personal Essays <span class="category-count">28</span> </a> </li> </ul> <h3 class="section-title"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 7L12 13L21 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Recent Posts </h3> <ul class="recent-post-list"> <li class="recent-post-item"> <a href="#" class="post-title">The Art of Slow Writing in a Fast-Paced World</a> <div class="post-date"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> June 15, 2023 </div> <p class="post-excerpt">Discover how embracing a slower, more intentional writing process can lead to deeper creativity and more meaningful work.</p> </li> <li class="recent-post-item"> <a href="#" class="post-title">Morning Pages: Unlock Your Creative Potential</a> <div class="post-date"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> June 7, 2023 </div> <p class="post-excerpt">How three pages of stream-of-consciousness writing each morning can transform your creative practice and mental clarity.</p> </li> <li class="recent-post-item"> <a href="#" class="post-title">Creating a Sensory-Rich Writing Space</a> <div class="post-date"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> May 28, 2023 </div> <p class="post-excerpt">Design a personal writing sanctuary that engages all your senses and nurtures your most inspired work.</p> </li> </ul> </div> <!-- Overlay --> <div class="overlay" id="overlay"></div> <!-- Main content --> <main class="content" id="content"> <div class="content-header"> <h1 class="content-title">Thoughtful Writing for Mindful Creatives</h1> <p class="content-subtitle">Explore ideas that nurture your creative practice</p> </div> <div class="featured-posts"> <article class="post-card"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Writing journal on desk"> <span class="category-tag">Mindful Writing</span> </div> <div class="post-content"> <h2 class="post-card-title">Finding Your Authentic Voice in a Noisy Digital Landscape</h2> <p class="post-card-excerpt">In an era where content is king, finding and maintaining your authentic voice can feel like swimming upstream. This guide explores practical techniques for tuning out the noise and connecting with your truest creative expression. We'll explore exercises that help you identify your unique perspective and writing style.</p> <a href="#" class="read-more"> Continue reading <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> <div class="post-meta"> <div class="post-author"> <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Author" class="author-avatar"> <span>Emma Rivers</span> </div> <div class="post-date-card"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> June 18, 2023 </div> </div> </div> </article> <article class="post-card"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1513128034602-7814ccaddd4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Person writing"> <span class="category-tag">Creative Process</span> </div> <div class="post-content"> <h2 class="post-card-title">The Gentle Art of Revision: Transforming First Drafts Without Self-Criticism</h2> <p class="post-card-excerpt">Revision doesn't have to be a painful exercise in self-doubt. This post explores a more compassionate approach to editing your work, with specific strategies for seeing your drafts with fresh eyes while maintaining creative confidence. Learn how to transform rough ideas into polished prose through intentional editing cycles.</p> <a href="#" class="read-more"> Continue reading <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> <div class="post-meta"> <div class="post-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="author-avatar"> <span>Marcus Chen</span> </div> <div class="post-date-card"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> June 12, 2023 </div> </div> </div> </article> </div> </main> <!-- Notification bell --> <div class="notification-bell" id="notification-bell"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 17H9M15 17C16.6569 17 18 15.6569 18 14V9C18 6.23858 15.7614 4 13 4H11C8.23858 4 6 6.23858 6 9V14C6 15.6569 7.34315 17 9 17M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M12 4V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="notification-badge">3</span> </div> <script> // Elements const menuToggle = document.getElementById('menu-toggle'); const offCanvas = document.getElementById('off-canvas'); const overlay = document.getElementById('overlay'); const content = document.getElementById('content'); const notificationBell = document.getElementById('notification-bell'); // Toggle menu function toggleMenu() { menuToggle.classList.toggle('active'); offCanvas.classList.toggle('active'); overlay.classList.toggle('active'); content.classList.toggle('active'); } // Event listeners menuToggle.addEventListener('click', toggleMenu); overlay.addEventListener('click', toggleMenu); // Notification bell tooltip let isTooltipVisible = false; let tooltip = null; function createTooltip() { // Remove existing tooltip if any if (tooltip) { document.body.removeChild(tooltip); } // Create tooltip tooltip = document.createElement('div'); tooltip.style.position = 'fixed'; tooltip.style.bottom = '80px'; tooltip.style.left = '20px'; tooltip.style.backgroundColor = 'white'; tooltip.style.padding = '10px 15px'; tooltip.style.borderRadius = '8px'; tooltip.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)'; tooltip.style.zIndex = '25'; tooltip.style.maxWidth = '250px'; tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; tooltip.style.transition = 'all 0.3s ease'; tooltip.innerHTML = ` <div style="font-weight: 600; margin-bottom: 5px; color: #5a5a5a;">3 New Notifications</div> <div style="font-size: 0.85rem; color: #7a7a7a;"> • New comment on your post<br> • Your draft was published<br> • New writing challenge available </div> `; document.body.appendChild(tooltip); // Animate tooltip setTimeout(() => { tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; }, 10); } // Toggle tooltip notificationBell.addEventListener('click', () => { if (!isTooltipVisible) { createTooltip(); isTooltipVisible = true; // Animate bell notificationBell.style.transform = 'scale(1.1)'; setTimeout(() => { notificationBell.style.transform = ''; }, 300); // Auto hide tooltip after 5 seconds setTimeout(() => { if (tooltip) { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; setTimeout(() => { if (tooltip && tooltip.parentNode) { document.body.removeChild(tooltip); tooltip = null; } isTooltipVisible = false; }, 300); } }, 5000); } else { if (tooltip) { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; setTimeout(() => { if (tooltip && tooltip.parentNode) { document.body.removeChild(tooltip); tooltip = null; } isTooltipVisible = false; }, 300); } } }); // Close tooltip when clicking elsewhere document.addEventListener('click', (e) => { if (isTooltipVisible && e.target !== notificationBell && !notificationBell.contains(e.target)) { if (tooltip) { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; setTimeout(() => { if (tooltip && tooltip.parentNode) { document.body.removeChild(tooltip); tooltip = null; } isTooltipVisible = false; }, 300); } } }); // Prevent default on links document.querySelectorAll('a').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VibeSync - Social Media Hub</title> <style> :root { --primary: #4856F4; --secondary: #3DD598; --accent1: #FF6B6B; --accent2: #FDA7DF; --dark: #1A1B35; --light: #F7F9FC; --text-primary: #333344; --text-secondary: #6E7191; --shadow: 0 8px 30px rgba(0, 0, 0, 0.12); --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--text-primary); font-size: 16px; overflow-x: hidden; height: 100vh; width: 100%; display: flex; position: relative; } .container { width: 700px; height: 700px; margin: 0 auto; position: relative; overflow: hidden; background-color: white; box-shadow: var(--shadow); border-radius: 20px; } /* Off-canvas Menu */ .menu-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 98; opacity: 0; visibility: hidden; transition: var(--transition); } .menu { position: absolute; top: 0; left: -320px; width: 320px; height: 100%; background-color: white; z-index: 99; box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1); transition: var(--transition); padding: 20px; display: flex; flex-direction: column; } .menu.open { left: 0; } .menu-open .menu-overlay { opacity: 1; visibility: visible; } .menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .logo { font-size: 24px; font-weight: 700; color: var(--primary); display: flex; align-items: center; } .logo span { color: var(--accent1); } .logo-circle { width: 10px; height: 10px; background-color: var(--secondary); border-radius: 50%; margin-left: 5px; display: inline-block; } .close-menu { background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .close-menu:hover { background-color: rgba(0, 0, 0, 0.05); } .close-menu svg { width: 20px; fill: var(--text-secondary); } .user-profile { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .user-avatar { width: 60px; height: 60px; border-radius: 50%; background-color: var(--primary); margin-right: 15px; overflow: hidden; border: 3px solid var(--light); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); position: relative; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-status { position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: var(--secondary); border: 2px solid white; bottom: 0; right: 0; } .user-info h3 { font-size: 18px; font-weight: 600; margin-bottom: 5px; } .user-info p { font-size: 14px; color: var(--text-secondary); } .menu-section { margin-bottom: 25px; } .menu-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 15px; font-weight: 600; } .menu-list { list-style: none; } .menu-item { margin-bottom: 8px; } .menu-link { display: flex; align-items: center; padding: 12px; border-radius: 10px; text-decoration: none; color: var(--text-primary); transition: var(--transition); position: relative; overflow: hidden; } .menu-link:hover { background-color: rgba(0, 0, 0, 0.05); } .menu-link.active { background-color: var(--primary); color: white; } .menu-link.active .menu-icon { color: white; } .menu-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; color: var(--primary); font-size: 20px; transition: var(--transition); } .notification-badge { background-color: var(--accent1); color: white; font-size: 12px; min-width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-left: auto; padding: 0 8px; font-weight: 600; } .notification-badge.pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } } .notification-preview { background-color: var(--light); border-radius: 15px; padding: 15px; margin-top: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; } .notification-preview:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); } .notification-header { display: flex; justify-content: space-between; margin-bottom: 10px; } .notification-header h4 { font-size: 14px; font-weight: 600; } .notification-time { font-size: 12px; color: var(--text-secondary); } .notification-content { font-size: 14px; line-height: 1.4; } .chat-preview { display: flex; align-items: center; padding: 12px; border-radius: 10px; margin-bottom: 8px; transition: var(--transition); cursor: pointer; } .chat-preview:hover { background-color: var(--light); } .chat-avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 12px; overflow: hidden; position: relative; } .chat-avatar img { width: 100%; height: 100%; object-fit: cover; } .chat-status { position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: var(--secondary); border: 2px solid white; bottom: 0; right: 0; } .chat-status.away { background-color: #FCAE1E; } .chat-status.offline { background-color: #989AAD; } .chat-info { flex: 1; } .chat-header { display: flex; justify-content: space-between; margin-bottom: 4px; } .chat-name { font-weight: 600; font-size: 15px; } .chat-time { font-size: 12px; color: var(--text-secondary); } .chat-last-message { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .menu-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 10px; background-color: var(--light); margin-bottom: 15px; } .theme-toggle-label { font-size: 14px; font-weight: 600; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-secondary); border-radius: 28px; transition: var(--transition); } .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: var(--transition); } input:checked + .toggle-slider { background-color: var(--primary); } input:checked + .toggle-slider:before { transform: translateX(22px); } .logout-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; border-radius: 10px; background-color: var(--light); border: none; color: var(--text-primary); font-weight: 600; cursor: pointer; transition: var(--transition); } .logout-btn:hover { background-color: var(--primary); color: white; } .logout-btn svg { margin-right: 8px; width: 18px; height: 18px; } /* Main content */ .main-content { flex: 1; padding: 20px; transition: var(--transition); max-width: 100%; position: relative; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .menu-toggle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; width: 24px; height: 20px; justify-content: space-between; z-index: 100; } .menu-toggle span { display: block; width: 100%; height: 3px; background-color: var(--text-primary); border-radius: 3px; transition: var(--transition); } .menu-toggle:hover span:nth-child(1) { transform: translateY(-2px); } .menu-toggle:hover span:nth-child(3) { transform: translateY(2px); } .header-actions { display: flex; align-items: center; } .search-wrapper { position: relative; margin-right: 15px; } .search-input { background-color: var(--light); border: none; border-radius: 20px; padding: 10px 15px 10px 40px; width: 200px; font-size: 14px; transition: var(--transition); outline: none; } .search-input:focus { width: 250px; box-shadow: 0 0 0 2px rgba(72, 86, 244, 0.2); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } .header-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 10px; color: var(--text-primary); cursor: pointer; transition: var(--transition); position: relative; } .header-icon:hover { background-color: var(--light); } .header-icon-badge { position: absolute; top: -2px; right: -2px; background-color: var(--accent1); color: white; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; } /* Feed content */ .feed { max-height: calc(700px - 140px); overflow-y: auto; padding-right: 10px; } .feed::-webkit-scrollbar { width: 6px; } .feed::-webkit-scrollbar-track { background: var(--light); border-radius: 3px; } .feed::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; } .feed::-webkit-scrollbar-thumb:hover { background: #9CA3AF; } .story-container { display: flex; overflow-x: auto; margin-bottom: 25px; padding-bottom: 10px; } .story-container::-webkit-scrollbar { height: 0; width: 0; display: none; } .story { flex: 0 0 auto; width: 80px; margin-right: 15px; text-align: center; } .story-avatar { width: 80px; height: 80px; border-radius: 50%; position: relative; margin-bottom: 8px; cursor: pointer; } .story-border { position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; border: 3px solid transparent; background: linear-gradient(45deg, var(--primary), var(--accent2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .story-seen .story-border { background: #D1D5DB; } .story-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .story-username { font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post { background-color: white; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 25px; overflow: hidden; transition: var(--transition); } .post:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .post-header { display: flex; align-items: center; padding: 15px; } .post-avatar { width: 44px; height: 44px; border-radius: 50%; margin-right: 12px; overflow: hidden; } .post-avatar img { width: 100%; height: 100%; object-fit: cover; } .post-details { flex: 1; } .post-username { font-weight: 600; font-size: 15px; margin-bottom: 2px; display: flex; align-items: center; } .verified-badge { width: 16px; height: 16px; background-color: var(--primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; } .verified-badge svg { width: 10px; height: 10px; fill: white; } .post-time { font-size: 13px; color: var(--text-secondary); } .post-options { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: var(--transition); } .post-options:hover { background-color: var(--light); } .post-content { padding: 0 15px 15px; } .post-text { font-size: 15px; line-height: 1.5; margin-bottom: 15px; } .post-text a { color: var(--primary); text-decoration: none; } .post-text a:hover { text-decoration: underline; } .post-media { max-height: 300px; width: 100%; border-radius: 15px; overflow: hidden; margin-bottom: 15px; } .post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; } .post-stats { display: flex; align-items: center; padding: 12px 15px; border-top: 1px solid rgba(0, 0, 0, 0.05); } .post-stat { display: flex; align-items: center; margin-right: 20px; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: var(--transition); } .post-stat:hover { color: var(--primary); } .post-stat svg { margin-right: 6px; width: 18px; height: 18px; } .post-stat.liked { color: var(--accent1); } .post-stat.saved { color: var(--secondary); } .composer { display: flex; align-items: center; background-color: white; border-radius: 20px; padding: 15px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .composer-avatar { width: 44px; height: 44px; border-radius: 50%; margin-right: 12px; overflow: hidden; } .composer-avatar img { width: 100%; height: 100%; object-fit: cover; } .composer-input { flex: 1; background-color: var(--light); border: none; border-radius: 30px; padding: 12px 20px; font-size: 15px; outline: none; transition: var(--transition); } .composer-input:focus { box-shadow: 0 0 0 2px rgba(72, 86, 244, 0.2); } .composer-button { background-color: var(--primary); color: white; border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-left: 12px; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 12px rgba(72, 86, 244, 0.3); } .composer-button:hover { background-color: #3A46D1; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(72, 86, 244, 0.4); } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .fade-in { animation: fadeIn 0.3s ease forwards; } .slide-in { animation: slideIn 0.4s ease forwards; } .pop-in { animation: popIn 0.4s ease forwards; } /* Responsive adjustments */ @media (max-width: 700px) { .menu { width: 280px; left: -280px; } .search-input { width: 150px; } .search-input:focus { width: 200px; } } @media (max-width: 500px) { .container { border-radius: 0; } .search-wrapper { display: none; } .post { border-radius: 15px; } } </style> </head> <body> <div class="container"> <!-- Off-canvas menu --> <div class="menu"> <div class="menu-header"> <div class="logo"> Vibe<span>Sync</span><span class="logo-circle"></span> </div> <button class="close-menu"> <svg viewBox="0 0 24 24"> <path d="M18.3 5.71a.996.996 0 00-1.41 0L12 10.59 7.11 5.7A.996.996 0 105.7 7.11L10.59 12 5.7 16.89a.996.996 0 101.41 1.41L12 13.41l4.89 4.89a.996.996 0 101.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/> </svg> </button> </div> <div class="user-profile"> <div class="user-avatar"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Profile Image"> <div class="user-status"></div> </div> <div class="user-info"> <h3>Alex Morgan</h3> <p>@alexcreates</p> </div> </div> <div class="menu-section"> <h4 class="menu-section-title">Main</h4> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link active"> <div class="menu-icon">📱</div> Feed </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <div class="menu-icon">🔍</div> Explore </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <div class="menu-icon">🔔</div> Notifications <span class="notification-badge pulse">12</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <div class="menu-icon">💬</div> Messages <span class="notification-badge">5</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <div class="menu-icon">💖</div> Bookmarks </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <div class="menu-icon">👤</div> Profile </a> </li> </ul> </div> <div class="menu-section"> <h4 class="menu-section-title">Latest Notifications</h4> <div class="notification-preview"> <div class="notification-header"> <h4>New Followers</h4> <span class="notification-time">Just now</span> </div> <p class="notification-content">Samantha Davis and 3 others followed you today! Your content is reaching new audiences.</p> </div> <div class="notification-preview"> <div class="notification-header"> <h4>Post Performance</h4> <span class="notification-time">2h ago</span> </div> <p class="notification-content">Your sunset photo is trending! It reached 400+ likes in record time.</p> </div> </div> <div class="menu-section"> <h4 class="menu-section-title">Recent Chats</h4> <div class="chat-preview"> <div class="chat-avatar"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Maya Wilson"> <div class="chat-status"></div> </div> <div class="chat-info"> <div class="chat-header"> <span class="chat-name">Maya Wilson</span> <span class="chat-time">Now</span> </div> <p class="chat-last-message">Perfect! Let's meet at the park tomorrow 🌳</p> </div> </div> <div class="chat-preview"> <div class="chat-avatar"> <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ryan Clark"> <div class="chat-status away"></div> </div> <div class="chat-info"> <div class="chat-header"> <span class="chat-name">Ryan Clark</span> <span class="chat-time">30m</span> </div> <p class="chat-last-message">Did you check the latest collab opportunity?</p> </div> </div> <div class="chat-preview"> <div class="chat-avatar"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Emma Chen"> <div class="chat-status offline"></div> </div> <div class="chat-info"> <div class="chat-header"> <span class="chat-name">Emma Chen</span> <span class="chat-time">2h</span> </div> <p class="chat-last-message">The photography meetup was amazing! 📸</p> </div> </div> </div> <div class="menu-footer"> <div class="theme-toggle"> <span class="theme-toggle-label">Dark Mode</span> <label class="toggle-switch"> <input type="checkbox" id="theme-toggle"> <span class="toggle-slider"></span> </label> </div> <button class="logout-btn"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/> </svg> Log Out </button> </div> </div> <div class="menu-overlay"></div> <!-- Main Content --> <div class="main-content"> <div class="header"> <button class="menu-toggle"> <span></span> <span></span> <span></span> </button> <div class="header-actions"> <div class="search-wrapper"> <input type="text" class="search-input" placeholder="Search..."> <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg> </div> <div class="header-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" /> </svg> <span class="header-icon-badge">12</span> </div> <div class="header-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" /> </svg> <span class="header-icon-badge">5</span> </div> </div> </div> <div class="story-container"> <div class="story"> <div class="story-avatar"> <div class="story-border"></div> <img class="story-img" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Your Story"> </div> <div class="story-username">Your Story</div> </div> <div class="story"> <div class="story-avatar"> <div class="story-border"></div> <img class="story-img" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Maya"> </div> <div class="story-username">maya_wilson</div> </div> <div class="story"> <div class="story-avatar story-seen"> <div class="story-border"></div> <img class="story-img" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ryan"> </div> <div class="story-username">ryan_c</div> </div> <div class="story"> <div class="story-avatar"> <div class="story-border"></div> <img class="story-img" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Emma"> </div> <div class="story-username">emma_photo</div> </div> <div class="story"> <div class="story-avatar story-seen"> <div class="story-border"></div> <img class="story-img" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Michael"> </div> <div class="story-username">michael.j</div> </div> <div class="story"> <div class="story-avatar"> <div class="story-border"></div> <img class="story-img" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Sophia"> </div> <div class="story-username">sophia_dreams</div> </div> </div> <div class="composer"> <div class="composer-avatar"> <img src="https://images.unsplash
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StreamVault - Video Streaming</title> <style> :root { --bg-primary: #0f0f13; --bg-secondary: #16161e; --accent-primary: #f04e98; --accent-secondary: #3867d6; --text-primary: #ffffff; --text-secondary: #b7b9cc; --sidebar-width: 280px; --border-radius: 12px; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; height: 100vh; width: 100%; position: relative; font-size: 16px; transition: background-color 0.5s ease; } .container { width: 100%; height: 100%; display: flex; position: relative; overflow: hidden; } /* Header Styles */ header { position: fixed; top: 0; left: 0; width: 100%; padding: 1rem 1.5rem; z-index: 10; display: flex; justify-content: space-between; align-items: center; background: rgba(15, 15, 19, 0.8); backdrop-filter: blur(10px); transition: all var(--transition-speed); } .logo { display: flex; align-items: center; font-weight: 800; font-size: 1.5rem; color: var(--text-primary); text-decoration: none; } .logo-icon { margin-right: 8px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .logo-text { position: relative; } .logo-text::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width var(--transition-speed); } .logo:hover .logo-text::after { width: 100%; } .menu-toggle { background: transparent; border: none; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; font-size: 1.1rem; padding: 0.5rem; border-radius: var(--border-radius); transition: all var(--transition-speed); } .menu-toggle:hover { background: rgba(255, 255, 255, 0.1); } .menu-toggle .icon { margin-right: 8px; font-size: 1.2rem; } /* Sidebar Styles */ .sidebar { position: fixed; top: 0; left: calc(-1 * var(--sidebar-width)); width: var(--sidebar-width); height: 100%; background-color: var(--bg-secondary); z-index: 100; padding: 1.5rem; transition: transform var(--transition-speed) cubic-bezier(0.23, 1, 0.32, 1); overflow-y: auto; box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2); } .sidebar.open { transform: translateX(var(--sidebar-width)); } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 2rem; } .close-btn { background: transparent; border: none; color: var(--text-primary); cursor: pointer; font-size: 1.5rem; transition: transform var(--transition-speed); } .close-btn:hover { transform: rotate(90deg); } .sidebar-section { margin-bottom: 2rem; } .sidebar-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 1rem; position: relative; display: inline-block; } .sidebar-title::after { content: ''; position: absolute; bottom: -5px; left: 0; height: 2px; width: 40px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); } .sidebar-nav { list-style: none; } .sidebar-nav li { margin-bottom: 0.5rem; } .sidebar-nav a { display: flex; align-items: center; color: var(--text-primary); text-decoration: none; padding: 0.8rem 1rem; border-radius: var(--border-radius); transition: all var(--transition-speed); position: relative; overflow: hidden; } .sidebar-nav a:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(5px); } .sidebar-nav a.active { background: linear-gradient(90deg, rgba(240, 78, 152, 0.1), rgba(56, 103, 214, 0.1)); border-left: 3px solid var(--accent-primary); } .sidebar-nav a i { margin-right: 10px; font-size: 1.2rem; } .recommended-list { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; } .recommended-item { position: relative; border-radius: var(--border-radius); overflow: hidden; cursor: pointer; transition: transform var(--transition-speed); } .recommended-item:hover { transform: translateY(-5px); } .recommended-item img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--border-radius); transition: transform var(--transition-speed); } .recommended-item:hover img { transform: scale(1.05); } .recommended-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); transition: all var(--transition-speed); } .recommended-item:hover .overlay { background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5)); } .recommended-item .title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; } .recommended-item .meta { display: flex; font-size: 0.8rem; color: var(--text-secondary); } .recommended-item .duration { margin-right: 0.5rem; } /* Main Content Styles */ .main-content { padding: 5rem 1.5rem 1.5rem; width: 100%; transition: all var(--transition-speed); } .hero-section { position: relative; margin-bottom: 2rem; border-radius: var(--border-radius); overflow: hidden; height: 300px; } .hero-section img { width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); } .hero-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; } .hero-description { color: var(--text-secondary); margin-bottom: 1rem; max-width: 80%; } .hero-cta { display: inline-flex; align-items: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all var(--transition-speed); text-decoration: none; } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(240, 78, 152, 0.4); } .hero-cta i { margin-left: 8px; } .section-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; } .section-title i { margin-right: 10px; color: var(--accent-primary); } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .video-card { position: relative; border-radius: var(--border-radius); overflow: hidden; cursor: pointer; transition: all var(--transition-speed); } .video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .video-thumbnail { position: relative; height: 120px; overflow: hidden; } .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-speed); } .video-card:hover .video-thumbnail img { transform: scale(1.1); } .video-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; } .video-info { padding: 1rem; background: rgba(22, 22, 30, 0.95); } .video-title { font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-meta { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 0.8rem; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 50px; height: 50px; background: rgba(240, 78, 152, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; transition: all var(--transition-speed); opacity: 0; } .video-card:hover .video-play-btn { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Overlay */ .overlay-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 90; opacity: 0; visibility: hidden; transition: all var(--transition-speed); } .overlay-bg.active { opacity: 1; visibility: visible; } /* Loading Indicator */ .loading-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); z-index: 1000; transform-origin: left; animation: loading 2s ease-in-out infinite; } @keyframes loading { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } } /* Pulse Animation */ .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 78, 152, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(240, 78, 152, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 78, 152, 0); } } /* Responsive Styles */ @media (max-width: 768px) { :root { --sidebar-width: 250px; } .hero-section { height: 200px; } .hero-title { font-size: 1.5rem; } .hero-description { font-size: 0.9rem; max-width: 100%; } .video-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } } @media (max-width: 480px) { .video-grid { grid-template-columns: 1fr 1fr; } .hero-section { height: 180px; } .hero-cta { padding: 0.5rem 1rem; font-size: 0.9rem; } .sidebar-title { font-size: 0.8rem; } .recommended-item img { height: 80px; } } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s forwards; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-secondary); } /* Hover Effect for Video Cards */ .video-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary)); z-index: -1; border-radius: calc(var(--border-radius) + 2px); opacity: 0; transition: opacity var(--transition-speed); } .video-card:hover::before { opacity: 1; } /* Progress Bars */ .progress-bar { height: 3px; background: rgba(255, 255, 255, 0.2); position: relative; border-radius: 3px; overflow: hidden; margin-top: 5px; } .progress { position: absolute; height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); border-radius: 3px; } /* Category Pills */ .category-pills { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem 0; margin-bottom: 1.5rem; scrollbar-width: none; -ms-overflow-style: none; } .category-pills::-webkit-scrollbar { display: none; } .category-pill { padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 20px; white-space: nowrap; cursor: pointer; transition: all var(--transition-speed); } .category-pill:hover, .category-pill.active { background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transform: translateY(-2px); } </style> </head> <body> <div class="container"> <!-- Loading Indicator --> <div class="loading-indicator"></div> <!-- Header --> <header> <a href="#" class="logo"> <div class="logo-icon"> <i class="fas fa-play-circle"></i> </div> <div class="logo-text">StreamVault</div> </a> <button class="menu-toggle" id="menuToggle"> <i class="fas fa-bars icon"></i> <span>Menu</span> </button> </header> <!-- Sidebar --> <div class="sidebar" id="sidebar"> <div class="sidebar-header"> <h2>Explore</h2> <button class="close-btn" id="closeBtn"> <i class="fas fa-times"></i> </button> </div> <div class="sidebar-section"> <h3 class="sidebar-title">Main</h3> <ul class="sidebar-nav"> <li><a href="#" class="active"><i class="fas fa-home"></i> Home</a></li> <li><a href="#"><i class="fas fa-compass"></i> Discover</a></li> <li><a href="#"><i class="fas fa-heart"></i> Liked Videos</a></li> <li><a href="#"><i class="fas fa-history"></i> History</a></li> <li><a href="#"><i class="fas fa-bookmark"></i> Bookmarks</a></li> </ul> </div> <div class="sidebar-section"> <h3 class="sidebar-title">Categories</h3> <ul class="sidebar-nav"> <li><a href="#"><i class="fas fa-film"></i> Movies</a></li> <li><a href="#"><i class="fas fa-tv"></i> Series</a></li> <li><a href="#"><i class="fas fa-broadcast-tower"></i> Live TV</a></li> <li><a href="#"><i class="fas fa-globe"></i> International</a></li> <li><a href="#"><i class="fas fa-child"></i> Kids</a></li> </ul> </div> <div class="sidebar-section"> <h3 class="sidebar-title">Genres</h3> <ul class="sidebar-nav"> <li><a href="#"><i class="fas fa-running"></i> Action</a></li> <li><a href="#"><i class="fas fa-ghost"></i> Horror</a></li> <li><a href="#"><i class="fas fa-heart"></i> Romance</a></li> <li><a href="#"><i class="fas fa-laugh"></i> Comedy</a></li> <li><a href="#"><i class="fas fa-robot"></i> Sci-Fi</a></li> </ul> </div> <div class="sidebar-section"> <h3 class="sidebar-title">For You</h3> <div class="recommended-list"> <div class="recommended-item"> <img src="https://source.unsplash.com/qJVluHTPx7U/600x400" alt="Outer Orbit"> <div class="overlay"> <div class="title">Outer Orbit</div> <div class="meta"> <span class="duration">45m</span> <span class="views">2.3M views</span> </div> </div> </div> <div class="recommended-item"> <img src="https://source.unsplash.com/Xq1ntWruOjE/600x400" alt="The Midnight Line"> <div class="overlay"> <div class="title">The Midnight Line</div> <div class="meta"> <span class="duration">1h 23m</span> <span class="views">1.8M views</span> </div> </div> </div> <div class="recommended-item"> <img src="https://source.unsplash.com/KE0nC8-58MQ/600x400" alt="Neon Secrets"> <div class="overlay"> <div class="title">Neon Secrets</div> <div class="meta"> <span class="duration">52m</span> <span class="views">3.5M views</span> </div> </div> </div> </div> </div> </div> <!-- Main Content --> <div class="main-content"> <div class="hero-section fade-in-up" style="animation-delay: 0.1s;"> <img src="https://source.unsplash.com/VBLHICVh-lI/1200x800" alt="Quantum Nexus"> <div class="hero-overlay"> <h1 class="hero-title">Quantum Nexus: Season 2</h1> <p class="hero-description">The boundary between reality and simulation blurs in this mind-bending sci-fi thriller. Now in 4K HDR.</p> <a href="#" class="hero-cta pulse">Watch Now <i class="fas fa-play"></i></a> </div> </div> <div class="category-pills fade-in-up" style="animation-delay: 0.2s;"> <div class="category-pill active">All</div> <div class="category-pill">New Releases</div> <div class="category-pill">Trending</div> <div class="category-pill">Sci-Fi</div> <div class="category-pill">Drama</div> <div class="category-pill">Comedy</div> <div class="category-pill">Documentary</div> <div class="category-pill">Animation</div> </div> <h2 class="section-title fade-in-up" style="animation-delay: 0.3s;"> <i class="fas fa-fire"></i> Trending Now </h2> <div class="video-grid fade-in-up" style="animation-delay: 0.4s;"> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/lZCHy8PLaas/600x400" alt="Echo Chamber"> <span class="video-duration">42m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Echo Chamber</h3> <div class="video-meta"> <span>Thriller</span> <span>1.4M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 75%"></div> </div> </div> </div> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/M5s4yDDjnzQ/600x400" alt="Celestial Bodies"> <span class="video-duration">1h 15m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Celestial Bodies</h3> <div class="video-meta"> <span>Drama</span> <span>3.2M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 30%"></div> </div> </div> </div> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/OvLXbURo9Wo/600x400" alt="Whispered Streets"> <span class="video-duration">58m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Whispered Streets</h3> <div class="video-meta"> <span>Crime</span> <span>2.1M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 0%"></div> </div> </div> </div> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/p0j-mE6mGo4/600x400" alt="Neon Dystopia"> <span class="video-duration">1h 30m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Neon Dystopia</h3> <div class="video-meta"> <span>Sci-Fi</span> <span>4.7M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 10%"></div> </div> </div> </div> </div> <h2 class="section-title fade-in-up" style="animation-delay: 0.5s;"> <i class="fas fa-sync-alt"></i> Continue Watching </h2> <div class="video-grid fade-in-up" style="animation-delay: 0.6s;"> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/ZCO_5Y29s8k/600x400" alt="Lost in Translation"> <span class="video-duration">45m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Lost in Translation: Ep 5</h3> <div class="video-meta"> <span>Drama</span> <span>2.8M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 80%"></div> </div> </div> </div> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/9DaOYUYnOls/600x400" alt="Digital Nomads"> <span class="video-duration">52m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Digital Nomads</h3> <div class="video-meta"> <span>Documentary</span> <span>1.5M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 45%"></div> </div> </div> </div> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/5PQn-Ki-SFc/600x400" alt="Ephemeral"> <span class="video-duration">1h 15m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Ephemeral</h3> <div class="video-meta"> <span>Mystery</span> <span>3.9M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 65%"></div> </div> </div> </div> <div class="video-card"> <div class="video-thumbnail"> <img src="https://source.unsplash.com/QP1dUyQ8WsI/600x400" alt="Parallel Lives"> <span class="video-duration">48m</span> <div class="video-play-btn"> <i class="fas fa-play"></i> </div> </div> <div class="video-info"> <h3 class="video-title">Parallel Lives: S1 E3</h3> <div class="video-meta"> <span>Sci-Fi</span> <span>2.3M views</span> </div> <div class="progress-bar"> <div class="progress" style="width: 25%"></div> </div> </div> </div> </div> </div> <!-- Overlay background --> <div class="overlay-bg" id="overlayBg"></div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Load Font Awesome from CDN as fallback if (!window.FontAwesome) { const fontAwesome = document.createElement('link'); fontAwesome.rel = 'stylesheet'; fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'; document.head.appendChild(fontAwesome); } const menuToggle = document.getElementById('menuToggle'); const closeBtn = document.getElementById('closeBtn'); const sidebar = document.getElementById('sidebar'); const overlayBg = document.getElementById('overlayBg'); // Open sidebar menuToggle.addEventListener('click', function() { sidebar.classList.add('open'); overlayBg.classList.add('active'); document.body.style.overflow = 'hidden'; }); // Close sidebar function closeSidebar() { sidebar.classList.remove('open'); overlayBg.classList.remove('active'); document.body.style.overflow = ''; } closeBtn.addEventListener('click', closeSidebar); overlayBg.addEventListener('click', closeSidebar); // Category pill selection const categoryPills = document.querySelectorAll('.category-pill'); categoryPills.forEach(pill => { pill.addEventListener('click', function() { categoryPills.forEach(p => p.classList.remove('active')); this.classList.add('active'); }); }); // Video card hover animation const videoCards = document.querySelectorAll('.video-card'); videoCards.forEach(card => { card.addEventListener('mouseenter', function() { this.querySelector('.video-play-btn').style.opacity = '1'; this.querySelector('.video-play-btn').style.transform = 'translate(-50%, -50%) scale(1)'; }); card.addEventListener('mouseleave', function() { this.querySelector('.video-play-btn').style.opacity = '0'; this.querySelector('.video-play-btn').style.transform = 'translate(-50%, -50%) scale(0)'; }); }); // Simulate loading indicator const loadingIndicator = document.querySelector('.loading-indicator'); setTimeout(() => { loadingIndicator.style.display = 'none'; }, 2000); // Animations for video grid items const fadeElements = document.querySelectorAll('.fade-in-up'); fadeElements.forEach((el, index) => { el.style.opacity = '0'; setTimeout(() => { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, 100 * index); }); // Video card click handler videoCards.forEach(card => { card.addEventListener('click', function() { // Show loading indicator loadingIndicator.style.display = 'block'; // Simulate loading video setTimeout(() => { loadingIndicator.style.display = 'none'; // Update progress bar const progressBar = this.querySelector('.progress'); const currentWidth = parseFloat(progressBar.style.width) || 0; progressBar.style.width = Math.min(currentWidth + 20, 100) + '%'; }, 1000); }); }); // Handle keyboard navigation for accessibility document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && sidebar.classList.contains('open')) { closeSidebar(); } }); // Make sure sidebar height is adjusted if window is resized window.addEventListener('resize', function() { if (window.innerWidth > 768 && sidebar.classList.contains('open')) { closeSidebar(); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SoundWave Streaming</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary-color: #6200ea; --secondary-color: #03dac6; --tertiary-color: #b00020; --background-color: #121212; --surface-color: #1e1e1e; --on-surface: #e1e1e1; --on-surface-variant: #9e9e9e; --menu-width: 280px; --transition-speed: 0.35s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--background-color); color: var(--on-surface); height: 100vh; width: 100%; overflow-x: hidden; position: relative; transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1); } .content-container { padding: 20px; max-width: 700px; margin: 0 auto; transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .menu-trigger { background: none; border: none; color: var(--on-surface); cursor: pointer; padding: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 5; } .menu-trigger:hover { background-color: rgba(255, 255, 255, 0.1); } .menu-trigger i { font-size: 24px; transition: transform 0.3s ease; } .logo { display: flex; align-items: center; font-weight: 700; font-size: 24px; color: white; } .logo i { color: var(--secondary-color); margin-right: 8px; } .off-canvas { position: fixed; top: 0; left: -280px; width: var(--menu-width); height: 100%; background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); z-index: 1000; transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3); padding: 20px; } .off-canvas.open { transform: translateX(280px); } .menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .menu-header h2 { font-size: 18px; font-weight: 600; } .menu-close { background: none; border: none; color: var(--on-surface-variant); cursor: pointer; font-size: 22px; transition: color 0.2s ease; } .menu-close:hover { color: var(--on-surface); } .menu-section { margin-bottom: 24px; } .menu-section-title { font-size: 14px; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 12px; letter-spacing: 1px; font-weight: 600; } .menu-list { list-style-type: none; } .menu-item { margin-bottom: 4px; } .menu-item a { display: flex; align-items: center; padding: 12px 16px; color: var(--on-surface); text-decoration: none; font-size: 15px; border-radius: 8px; transition: background-color 0.2s ease, transform 0.2s ease; } .menu-item a:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateX(3px); } .menu-item a.active { background: linear-gradient(90deg, var(--primary-color) 0%, rgba(98, 0, 234, 0.7) 100%); color: white; font-weight: 500; } .menu-item i { margin-right: 12px; font-size: 18px; width: 20px; text-align: center; } .playlist-item { display: flex; align-items: center; margin-bottom: 12px; padding: 8px; border-radius: 8px; transition: background-color 0.2s ease; cursor: pointer; } .playlist-item:hover { background-color: rgba(255, 255, 255, 0.05); } .playlist-image { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; margin-right: 12px; position: relative; } .playlist-image img { width: 100%; height: 100%; object-fit: cover; } .playlist-info { flex: 1; } .playlist-name { font-weight: 500; margin-bottom: 4px; font-size: 14px; } .playlist-meta { color: var(--on-surface-variant); font-size: 12px; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease; } .overlay.active { opacity: 1; visibility: visible; } .main-content { padding: 0 20px; } .section-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; } .section-title i { color: var(--secondary-color); margin-right: 10px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-bottom: 40px; } .card { background-color: var(--surface-color); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .card-image { position: relative; padding-top: 100%; overflow: hidden; } .card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.08); } .card-content { padding: 12px; } .card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-subtitle { color: var(--on-surface-variant); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-bar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(30, 30, 30, 0.95); padding: 12px 20px; display: flex; align-items: center; gap: 16px; backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 99; } .playing-image { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; } .playing-image img { width: 100%; height: 100%; object-fit: cover; } .playing-info { flex: 1; min-width: 0; } .playing-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .playing-artist { color: var(--on-surface-variant); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-controls { display: flex; align-items: center; gap: 12px; } .player-btn { background: none; border: none; color: var(--on-surface); cursor: pointer; font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; } .player-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--secondary-color); } .player-btn.play-pause { background-color: var(--primary-color); color: white; font-size: 20px; width: 42px; height: 42px; } .player-btn.play-pause:hover { background-color: #7c4dff; transform: scale(1.05); } .featured-item { display: flex; gap: 16px; margin-bottom: 16px; background-color: var(--surface-color); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .featured-item:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); } .featured-image { width: 80px; height: 80px; flex-shrink: 0; } .featured-image img { width: 100%; height: 100%; object-fit: cover; } .featured-info { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px 12px 0; } .featured-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .featured-subtitle { color: var(--on-surface-variant); font-size: 13px; } .featured-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-surface-variant); margin-top: 4px; } .featured-meta i { font-size: 14px; } .dot-separator { width: 3px; height: 3px; background-color: var(--on-surface-variant); border-radius: 50%; } .content-container { padding-bottom: 80px; } .user-profile { margin-top: auto; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .user-info { display: flex; align-items: center; padding: 12px; border-radius: 8px; transition: background-color 0.2s ease; cursor: pointer; } .user-info:hover { background-color: rgba(255, 255, 255, 0.05); } .user-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 12px; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-name { font-weight: 600; font-size: 14px; } .user-email { color: var(--on-surface-variant); font-size: 12px; } .notification-badge { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; background-color: var(--tertiary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; } .menu-item-badge { background-color: var(--secondary-color); color: black; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; margin-left: auto; } /* Progress bar animation */ @keyframes progress { 0% { width: 0; } 100% { width: 63%; } } .progress-container { width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.2); border-radius: 2px; margin-top: 8px; position: relative; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-color) 100%); border-radius: 2px; width: 63%; animation: progress 1.5s ease-out; } .progress-handle { width: 12px; height: 12px; background-color: white; border-radius: 50%; position: absolute; top: 50%; left: 63%; transform: translate(-50%, -50%); cursor: pointer; display: none; } .progress-container:hover .progress-handle { display: block; } .progress-time { display: flex; justify-content: space-between; font-size: 10px; color: var(--on-surface-variant); margin-top: 4px; } /* For smaller screens */ @media (max-width: 500px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .player-controls .player-btn:not(.play-pause) { display: none; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--background-color); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Ripple effect for clicks */ .ripple { position: absolute; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* Menu Item hover animation */ .menu-item a::before { content: ''; position: absolute; left: 0; width: 3px; height: 0; background-color: var(--secondary-color); transition: height 0.2s ease; border-radius: 0 3px 3px 0; } .menu-item a:hover::before { height: 40%; } .menu-item a.active::before { height: 70%; } .menu-item { position: relative; } /* Wave animation for currently playing track */ .wave-animation { display: flex; align-items: flex-end; height: 16px; width: 18px; margin-left: 8px; } .wave-bar { width: 2px; background-color: var(--secondary-color); margin: 0 1px; border-radius: 1px; animation: wave 1.2s ease-in-out infinite; } .wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; } .wave-bar:nth-child(2) { height: 10px; animation-delay: 0.3s; } .wave-bar:nth-child(3) { height: 6px; animation-delay: 0.6s; } .wave-bar:nth-child(4) { height: 12px; animation-delay: 0.9s; } @keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } } .off-canvas-inner { display: flex; flex-direction: column; height: calc(100% - 40px); } .menu-sections { flex: 1; overflow-y: auto; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="overlay"></div> <div class="off-canvas"> <div class="menu-header"> <h2>SoundWave</h2> <button class="menu-close"><i class="fas fa-times"></i></button> </div> <div class="off-canvas-inner"> <div class="menu-sections"> <div class="menu-section"> <h3 class="menu-section-title">Browse</h3> <ul class="menu-list"> <li class="menu-item"><a href="#" class="active"><i class="fas fa-home"></i> Home</a></li> <li class="menu-item"><a href="#"><i class="fas fa-search"></i> Search</a></li> <li class="menu-item"><a href="#"><i class="fas fa-compass"></i> Discover</a></li> <li class="menu-item"><a href="#"><i class="fas fa-chart-line"></i> Charts</a></li> <li class="menu-item"><a href="#"><i class="fas fa-podcast"></i> Podcasts</a></li> <li class="menu-item"><a href="#"><i class="fas fa-broadcast-tower"></i> Radio <span class="menu-item-badge">Live</span></a></li> </ul> </div> <div class="menu-section"> <h3 class="menu-section-title">Your Library</h3> <ul class="menu-list"> <li class="menu-item"><a href="#"><i class="fas fa-clock"></i> Recently Played</a></li> <li class="menu-item"><a href="#"><i class="fas fa-heart"></i> Liked Songs</a></li> <li class="menu-item"><a href="#"><i class="fas fa-music"></i> Albums</a></li> <li class="menu-item"><a href="#"><i class="fas fa-microphone"></i> Artists</a></li> <li class="menu-item"><a href="#"><i class="fas fa-download"></i> Downloaded</a></li> </ul> </div> <div class="menu-section"> <h3 class="menu-section-title">Your Playlists</h3> <div class="playlist-item"> <div class="playlist-image"> <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bXVzaWMlMjBwbGF5bGlzdHxlbnwwfHwwfHx8MA%3D%3D" alt="Chill Vibes"> </div> <div class="playlist-info"> <div class="playlist-name">Chill Vibes</div> <div class="playlist-meta">32 tracks • 2h 15m</div> </div> </div> <div class="playlist-item"> <div class="playlist-image"> <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y29uY2VydHxlbnwwfHwwfHx8MA%3D%3D" alt="Workout Mix"> </div> <div class="playlist-info"> <div class="playlist-name">Workout Mix</div> <div class="playlist-meta">48 tracks • 3h 22m</div> </div> </div> <div class="playlist-item"> <div class="playlist-image"> <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bXVzaWN8ZW58MHx8MHx8fDA%3D" alt="Indie Discoveries"> <div class="notification-badge">2</div> </div> <div class="playlist-info"> <div class="playlist-name">Indie Discoveries</div> <div class="playlist-meta">74 tracks • 4h 48m</div> </div> </div> <div class="playlist-item"> <div class="playlist-image"> <img src="https://images.unsplash.com/photo-1506157786151-b8491531f063?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fG11c2ljfGVufDB8fDB8fHww" alt="Road Trip"> </div> <div class="playlist-info"> <div class="playlist-name">Road Trip</div> <div class="playlist-meta">52 tracks • 3h 47m</div> </div> </div> </div> </div> <div class="user-profile"> <div class="user-info"> <div class="user-avatar"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Emma Wilson"> </div> <div> <div class="user-name">Emma Wilson</div> <div class="user-email">Premium Member</div> </div> </div> </div> </div> </div> <div class="content-container"> <div class="header"> <button class="menu-trigger"><i class="fas fa-bars"></i></button> <div class="logo"><i class="fas fa-wave-square"></i> SoundWave</div> </div> <div class="main-content"> <h2 class="section-title"><i class="fas fa-bolt"></i> Weekly Highlights</h2> <div class="featured-section"> <div class="featured-item"> <div class="featured-image"> <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjN8fG11c2ljfGVufDB8fDB8fHww" alt="Electronic Anthems"> </div> <div class="featured-info"> <div class="featured-title">Electronic Anthems</div> <div class="featured-subtitle">The best electronic hits of 2023</div> <div class="featured-meta"> <i class="fas fa-headphones"></i> 2.3M plays <div class="dot-separator"></div> <i class="fas fa-heart"></i> 145K </div> </div> </div> <div class="featured-item"> <div class="featured-image"> <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bXVzaWN8ZW58MHx8MHx8fDA%3D" alt="Acoustic Sessions"> </div> <div class="featured-info"> <div class="featured-title">Acoustic Sessions</div> <div class="featured-subtitle">Intimate performances by your favorite artists</div> <div class="featured-meta"> <i class="fas fa-headphones"></i> 1.8M plays <div class="dot-separator"></div> <i class="fas fa-heart"></i> 98K </div> </div> </div> </div> <h2 class="section-title"><i class="fas fa-fire"></i> Trending Albums</h2> <div class="card-grid"> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1551893665-f843f600794e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fG11c2ljfGVufDB8fDB8fHww" alt="Neon Dreams"> </div> <div class="card-content"> <div class="card-title">Neon Dreams</div> <div class="card-subtitle">Lunar Echo</div> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bXVzaWMlMjBwbGF5bGlzdHxlbnwwfHwwfHx8MA%3D%3D" alt="Midnight Tales"> </div> <div class="card-content"> <div class="card-title">Midnight Tales</div> <div class="card-subtitle">Arctic Pulse</div> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fG11c2ljfGVufDB8fDB8fHww" alt="Electric Soul"> </div> <div class="card-content"> <div class="card-title">Electric Soul</div> <div class="card-subtitle">Neon Drift</div> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fG11c2ljfGVufDB8fDB8fHww" alt="Urban Rhythms"> </div> <div class="card-content"> <div class="card-title">Urban Rhythms</div> <div class="card-subtitle">Metro Beats</div> </div> </div> </div> <h2 class="section-title"><i class="fas fa-user-friends"></i> Popular Artists</h2> <div class="card-grid"> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fG11c2ljaWFufGVufDB8fDB8fHww" alt="Skylar Gray"> </div> <div class="card-content"> <div class="card-title">Skylar Gray</div> <div class="card-subtitle">8.2M followers</div> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bXVzaWN8ZW58MHx8MHx8fDA%3D" alt="Violet Echo"> </div> <div class="card-content"> <div class="card-title">Violet Echo</div> <div class="card-subtitle">5.7M followers</div> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1549213783-8284d0336c4f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjl8fG11c2ljaWFufGVufDB8fDB8fHww" alt="Atlas Project"> </div> <div class="card-content"> <div class="card-title">Atlas Project</div> <div class="card-subtitle">4.1M followers</div> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1623335082085-258be2afd45c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDZ8fG11c2ljaWFufGVufDB8fDB8fHww" alt="Nova Twins"> </div> <div class="card-content"> <div class="card-title">Nova Twins</div> <div class="card-subtitle">3.8M followers</div> </div> </div> </div> </div> </div> <div class="player-bar"> <div class="playing-image"> <img src="https://images.unsplash.com/photo-1519138026466-6d5254d95f31?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fG11c2ljfGVufDB8fDB8fHww" alt="Now Playing"> </div> <div class="playing-info"> <div class="playing-title"> Spectrum <div class="wave-animation"> <div class="wave-bar"></div> <div class="wave-bar"></div> <div class="wave-bar"></div> <div class="wave-bar"></div> </div> </div> <div class="playing-artist">Prismatic Vision</div> <div class="progress-container"> <div class="progress-bar"></div> <div class="progress-handle"></div> </div> <div class="progress-time"> <span>2:35</span> <span>4:12</span> </div> </div> <div class="player-controls"> <button class="player-btn"><i class="fas fa-step-backward"></i></button> <button class="player-btn play-pause"><i class="fas fa-pause"></i></button> <button class="player-btn"><i class="fas fa-step-forward"></i></button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuTrigger = document.querySelector('.menu-trigger'); const menuClose = document.querySelector('.menu-close'); const offCanvas = document.querySelector('.off-canvas'); const overlay = document.querySelector('.overlay'); // Open menu menuTrigger.addEventListener('click', function() { offCanvas.classList.add('open'); overlay.classList.add('active
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sophia Chen • Design Portfolio</title> <style> :root { --bg-color: #f8f8f8; --text-color: #121212; --accent-color: #333333; --secondary-color: #888888; --transition-speed: 0.4s; --line-height: 1.6; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: var(--line-height); overflow-x: hidden; position: relative; height: 100vh; width: 100%; } .container { width: 100%; height: 100%; padding: 2rem; transition: transform var(--transition-speed) cubic-bezier(0.77, 0, 0.175, 1); position: relative; overflow: hidden; } .container.menu-open { transform: translateX(-280px); } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .logo { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.5px; } .menu-toggle { width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; position: relative; z-index: 1000; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--text-color); position: absolute; left: 4px; transition: all var(--transition-speed) ease; } .menu-toggle span:nth-child(1) { top: 10px; } .menu-toggle span:nth-child(2) { top: 18px; width: 16px; } .menu-toggle span:nth-child(3) { top: 26px; } .menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); top: 16px; } .menu-open .menu-toggle span:nth-child(2) { opacity: 0; } .menu-open .menu-toggle span:nth-child(3) { transform: rotate(-45deg); top: 16px; } .off-canvas-menu { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background: white; padding: 2rem; transition: transform var(--transition-speed) cubic-bezier(0.77, 0, 0.175, 1); z-index: 100; box-shadow: -5px 0 30px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; } .menu-open .off-canvas-menu { transform: translateX(-280px); } .menu-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .menu-items { list-style: none; } .menu-items li { margin-bottom: 1rem; } .menu-items a { text-decoration: none; color: var(--text-color); font-size: 0.9rem; display: flex; align-items: center; transition: all var(--transition-speed) ease; padding: 0.5rem 0; position: relative; } .menu-items a:hover { color: var(--accent-color); transform: translateX(5px); } .menu-items a::before { content: ""; width: 0; height: 1px; background: var(--accent-color); position: absolute; bottom: 0; left: 0; transition: width var(--transition-speed) ease; } .menu-items a:hover::before { width: 100%; } .icon { width: 16px; height: 16px; margin-right: 10px; stroke: currentColor; stroke-width: 1.5; fill: none; } .content { max-width: 100%; overflow-y: auto; height: calc(100% - 70px); } .intro { margin-bottom: 3rem; } .intro h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -1px; line-height: 1.2; } .intro p { color: var(--secondary-color); max-width: 500px; } .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .project-card { background: white; border-radius: 6px; overflow: hidden; transition: all var(--transition-speed) ease; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transform: translateY(0); cursor: pointer; } .project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .project-card:active { transform: translateY(0); } .project-image { width: 100%; height: 180px; background-color: #f0f0f0; position: relative; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; } .project-card:hover .project-image img { transform: scale(1.05); } .project-card:hover .project-overlay { opacity: 1; } .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-speed) ease; } .project-overlay span { color: white; background: rgba(0, 0, 0, 0.7); padding: 8px 16px; border-radius: 30px; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; } .project-content { padding: 1.5rem; } .project-content h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .project-content p { font-size: 0.9rem; color: var(--secondary-color); margin-bottom: 1rem; } .project-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 0.7rem; padding: 4px 10px; border-radius: 30px; background: rgba(0, 0, 0, 0.05); color: var(--secondary-color); } .menu-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.1); } .social-links { display: flex; gap: 15px; margin-top: 1rem; } .social-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.05); transition: all var(--transition-speed) ease; } .social-link:hover { background: var(--accent-color); } .social-link:hover svg { stroke: white; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 2000; opacity: 0; visibility: hidden; transition: all var(--transition-speed) ease; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); } .modal.open { opacity: 1; visibility: visible; } .modal-content { background: white; width: 90%; max-width: 800px; max-height: 90vh; border-radius: 6px; overflow: hidden; position: relative; transform: translateY(50px); opacity: 0; transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0.1s; } .modal.open .modal-content { transform: translateY(0); opacity: 1; } .modal-header { position: relative; height: 250px; overflow: hidden; } .modal-header img { width: 100%; height: 100%; object-fit: cover; } .modal-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all var(--transition-speed) ease; } .modal-close:hover { background: white; transform: rotate(90deg); } .modal-body { padding: 2rem; overflow-y: auto; max-height: calc(90vh - 250px); } .modal-title { font-size: 1.8rem; margin-bottom: 1rem; } .modal-tags { display: flex; gap: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; } .modal-description { margin-bottom: 2rem; } .project-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .detail-item h4 { font-size: 0.8rem; color: var(--secondary-color); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; } .detail-item p { font-size: 0.9rem; } .cursor { position: fixed; width: 12px; height: 12px; background: var(--accent-color); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background 0.3s; opacity: 0; } .cursor.active { opacity: 1; } .cursor.hover { width: 60px; height: 60px; background: rgba(51, 51, 51, 0.2); } @media (max-width: 768px) { .intro h1 { font-size: 2rem; } .projects-grid { grid-template-columns: 1fr; } .container { padding: 1.5rem; } } /* Specific content styling */ .placeholder-image { background: linear-gradient(135deg, #eeeeee 25%, #f8f8f8 25%, #f8f8f8 50%, #eeeeee 50%, #eeeeee 75%, #f8f8f8 75%, #f8f8f8 100%); background-size: 20px 20px; } .project-counter { margin-bottom: 1rem; color: var(--secondary-color); font-size: 0.8rem; letter-spacing: 1px; } .project-counter span { font-size: 1.2rem; color: var(--text-color); font-weight: 600; } .underline-effect { position: relative; display: inline-block; } .underline-effect::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0; left: 0; background-color: var(--accent-color); transform-origin: bottom right; transition: transform 0.3s ease-out; } .underline-effect:hover::after { transform: scaleX(1); transform-origin: bottom left; } .loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-color); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity var(--transition-speed) ease; } .loader.loaded { opacity: 0; pointer-events: none; } .loader-content { text-align: center; } .loader-progress { width: 100px; height: 1px; background: rgba(0, 0, 0, 0.1); margin: 20px auto; position: relative; overflow: hidden; } .loader-progress span { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: var(--text-color); transition: width 0.3s ease; } .loader-text { font-size: 0.7rem; color: var(--secondary-color); letter-spacing: 2px; text-transform: uppercase; } </style> </head> <body> <div class="loader"> <div class="loader-content"> <div class="logo">S.CHEN</div> <div class="loader-progress"> <span id="progress"></span> </div> <div class="loader-text">Loading Portfolio</div> </div> </div> <div class="cursor"></div> <div class="container"> <header> <div class="logo">S.CHEN</div> <button class="menu-toggle" aria-label="Toggle menu"> <span></span> <span></span> <span></span> </button> </header> <div class="content"> <div class="intro"> <div class="project-counter">Projects: <span>06</span></div> <h1>Creating thoughtful digital experiences through strategic design</h1> <p>Combining visual aesthetics with functional purpose to craft product interfaces that connect with users.</p> </div> <div class="projects-grid"> <div class="project-card" data-project="fintech"> <div class="project-image"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjFmMWYxIiAvPjxwYXRoIGQ9Ik0xNTAgMTUwIEgyNTAgVjIxMCBIMTUwIFoiIGZpbGw9IiM1NTU1NTUiIC8+PHBhdGggZD0iTTE3MCAxMDAgSDIzMCBWMTQwIEgxNzAgWiIgZmlsbD0iIzc3Nzc3NyIgLz48cGF0aCBkPSJNMTIwIDgwIEgxNjAgVjEyMCBIMTIwIFoiIGZpbGw9IiMzMzMzMzMiIC8+PHBhdGggZD0iTTI0MCA4MCBIMjgwIFYxMjAgSDI0MCBaIiBmaWxsPSIjMzMzMzMzIiAvPjwvc3ZnPg==" alt="Novo Banking App"> <div class="project-overlay"> <span>View Project</span> </div> </div> <div class="project-content"> <h3>Novo Banking App</h3> <p>A minimalist digital banking interface focused on financial clarity and user empowerment.</p> <div class="project-tags"> <span class="tag">UI/UX Design</span> <span class="tag">Fintech</span> <span class="tag">Mobile App</span> </div> </div> </div> <div class="project-card" data-project="ecommerce"> <div class="project-image"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1IiAvPjxwYXRoIGQ9Ik0xMjAgODAgSDI4MCBWMjIwIEgxMjAgWiIgZmlsbD0iI2VlZWVlZSIgLz48cGF0aCBkPSJNMTQwIDEwMCBIMjYwIFYxMzAgSDE0MCBaIiBmaWxsPSIjZGRkZGRkIiAvPjxwYXRoIGQ9Ik0xNDAgMTUwIEgyMDAgVjE5MCBIMTQwIFoiIGZpbGw9IiNjY2NjY2MiIC8+PHBhdGggZD0iTTIyMCAxNTAgSDI2MCBWMTkwIEgyMjAgWiIgZmlsbD0iI2NjY2NjYyIgLz48L3N2Zz4=" alt="Maison E-commerce Platform"> <div class="project-overlay"> <span>View Project</span> </div> </div> <div class="project-content"> <h3>Maison E-commerce Platform</h3> <p>Curated home goods marketplace with a focus on artisanal craftsmanship and sustainable production.</p> <div class="project-tags"> <span class="tag">E-commerce</span> <span class="tag">Web Design</span> <span class="tag">Brand Identity</span> </div> </div> </div> <div class="project-card" data-project="healthcare"> <div class="project-image"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmOGY4IiAvPjxjaXJjbGUgY3g9IjIwMCIgY3k9IjE1MCIgcj0iODAiIGZpbGw9IiNlZWVlZWUiIC8+PHBhdGggZD0iTTE4MCAxMTAgSDIyMCBWMTkwIEgxODAgWiIgZmlsbD0iI2NjY2NjYyIgLz48cGF0aCBkPSJNMTQwIDE1MCBIMjYwIFYxNzAgSDE0MCBaIiBmaWxsPSIjY2NjY2NjIiAvPjwvc3ZnPg==" alt="Clarity Health Platform"> <div class="project-overlay"> <span>View Project</span> </div> </div> <div class="project-content"> <h3>Clarity Health Platform</h3> <p>Streamlining patient care through intuitive interfaces that connect patients with healthcare providers.</p> <div class="project-tags"> <span class="tag">Healthcare</span> <span class="tag">Product Design</span> <span class="tag">UX Research</span> </div> </div> </div> <div class="project-card" data-project="productivity"> <div class="project-image"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjlmOWY5IiAvPjxyZWN0IHg9IjEyMCIgeT0iODAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAiIGZpbGw9IiNkZGRkZGQiIC8+PHJlY3QgeD0iMTIwIiB5PSIxMTAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAiIGZpbGw9IiNlZWVlZWUiIC8+PHJlY3QgeD0iMTIwIiB5PSIxNDAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAiIGZpbGw9IiNkZGRkZGQiIC8+PHJlY3QgeD0iMTIwIiB5PSIxNzAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAiIGZpbGw9IiNlZWVlZWUiIC8+PHJlY3QgeD0iMTIwIiB5PSIyMDAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAiIGZpbGw9IiNkZGRkZGQiIC8+PC9zdmc+" alt="Flow Task Manager"> <div class="project-overlay"> <span>View Project</span> </div> </div> <div class="project-content"> <h3>Flow Task Manager</h3> <p>Productivity tool designed to simplify complex workflows through visual task management and collaboration.</p> <div class="project-tags"> <span class="tag">Productivity</span> <span class="tag">SaaS</span> <span class="tag">Interaction Design</span> </div> </div> </div> <div class="project-card" data-project="education"> <div class="project-image"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1IiAvPjxwYXRoIGQ9Ik0yMDAgODAgTDI4MCAxMjAgTDIwMCAxNjAgTDEyMCAxMjAgWiIgZmlsbD0iI2RkZGRkZCIgLz48cGF0aCBkPSJNMTQwIDEzMCBWMTkwIEwxOTUgMjIwIFYxNjAgWiIgZmlsbD0iI2VlZWVlZSIgLz48cGF0aCBkPSJNMjA1IDE2MCBWMjIwIEwyNjAgMTkwIFYxMzAgWiIgZmlsbD0iI2VlZWVlZSIgLz48L3N2Zz4=" alt="Mentor Education Platform"> <div class="project-overlay"> <span>View Project</span> </div> </div> <div class="project-content"> <h3>Mentor Education Platform</h3> <p>Digital learning environment that personalizes educational content based on individual learning patterns.</p> <div class="project-tags"> <span class="tag">EdTech</span> <span class="tag">Responsive Design</span> <span class="tag">Accessibility</span> </div> </div> </div> <div class="project-card" data-project="sustainability"> <div class="project-image"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmOGY4IiAvPjxwYXRoIGQ9Ik0xMjAgMTUwIEMxMjAgMTEwIDE1MCA4MCAxOTAgODAgQzIzMCA4MCAyNjAgMTEwIDI2MCAxNTAgQzI2MCAxOTAgMjMwIDIyMCAxOTAgMjIwIEMxNTAgMjIwIDEyMCAxOTAgMTIwIDE1MCBaIiBmaWxsPSIjZWVlZWVlIiAvPjxwYXRoIGQ9Ik0xOTAgODAgTDIxMCAxMzAgTDI2MCAxNDAgTDIyMCAxODAgTDIzMCAyMzAgTDE5MCAxOTAgTDE1MCAyMTAgTDE2MCAxNzAgTDEyMCAxMzAgTDE3MCAxMzAgWiIgZmlsbD0iI2RkZGRkZCIgLz48L3N2Zz4=" alt="EcoTrack Sustainability App"> <div class="project-overlay"> <span>View Project</span> </div> </div> <div class="project-content"> <h3>EcoTrack Sustainability App</h3> <p>Mobile application for tracking personal environmental impact and promoting sustainable lifestyle choices.</p> <div class="project-tags"> <span class="tag">Sustainability</span> <span class="tag">Mobile UX</span> <span class="tag">Gamification</span> </div> </div> </div> </div> </div> </div> <div class="off-canvas-menu"> <div class="menu-header"> <h3>Sophia Chen</h3> <p>UX/UI Designer • Art Director</p> </div> <ul class="menu-items"> <li> <a href="#projects"> <svg class="icon" viewBox="0 0 24 24"> <rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect> <line x1="8" y1="3" x2="8" y2="21"></line> <line x1="16" y1="3" x2="16" y2="21"></line> <line x1="2" y1="9" x2="22" y2="9"></line> <line x1="2" y1="15" x2="22" y2="15"></line> </svg> Projects </a> </li> <li> <a href="#about"> <svg class="icon" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="12" y1="16" x2="12" y2="16"></line> </svg> About </a> </li> <li> <a href="#approach"> <svg class="icon" viewBox="0 0 24 24"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> Approach </a> </li> <li> <a href="#clients"> <svg class="icon" viewBox="0 0 24 24"> <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> Clients </a> </li> <li> <a href="#contact"> <svg class="icon" viewBox="0 0 24 24"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> Contact </a> </li> <li> <a href="#resume" class="underline-effect"> <svg class="icon" viewBox="0 0 24 24"> <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> Resume </a> </li> </ul> <div class="menu-footer"> <p>Connect with me</p> <div class="social-links"> <a href="#" class="social-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </a> <a href="#" class="social-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </a> <a href="#" class="social-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> <a href="#" class="social-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuantEdge Trading Platform</title> <style> :root { --dark-bg: #0d1117; --darker-bg: #161b22; --accent-green: #4cd964; --accent-red: #ff3b30; --accent-blue: #007aff; --accent-yellow: #ffcc00; --text-primary: #e6edf3; --text-secondary: #8b949e; --border-color: #30363d; --panel-bg: #21262d; --panel-hover: #2d333b; --off-canvas-width: 300px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--dark-bg); color: var(--text-primary); overflow-x: hidden; height: 100vh; width: 100%; font-size: 14px; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } /* Header styles */ header { background-color: var(--darker-bg); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); height: 60px; } .logo { font-weight: 700; font-size: 20px; color: var(--text-primary); display: flex; align-items: center; } .logo span { color: var(--accent-blue); } .menu-toggle { background: transparent; border: none; color: var(--text-primary); cursor: pointer; font-size: 16px; padding: 8px; border-radius: 4px; display: flex; align-items: center; transition: all 0.2s ease; } .menu-toggle:hover { background-color: var(--panel-hover); } .menu-toggle i { margin-right: 5px; } /* Main content area */ .main-content { padding: 20px; height: calc(100% - 60px); overflow-y: auto; transition: transform 0.3s ease; } /* Off-canvas menu */ .off-canvas-menu { position: fixed; top: 0; right: -300px; width: var(--off-canvas-width); height: 100%; background-color: var(--darker-bg); border-left: 1px solid var(--border-color); transition: right 0.3s ease; z-index: 1000; overflow-y: auto; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); } .off-canvas-menu.active { right: 0; } .menu-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); } .menu-title { font-weight: 600; font-size: 16px; } .close-menu { background: transparent; border: none; color: var(--text-primary); cursor: pointer; font-size: 16px; transition: color 0.2s ease; } .close-menu:hover { color: var(--accent-blue); } /* Menu sections */ .menu-section { padding: 15px 20px; border-bottom: 1px solid var(--border-color); } .section-title { font-size: 14px; color: var(--text-secondary); margin-bottom: 15px; display: flex; align-items: center; } .section-title i { margin-right: 10px; color: var(--accent-blue); } /* Market status */ .market-status { display: flex; flex-wrap: wrap; gap: 10px; } .status-pill { padding: 5px 10px; border-radius: 16px; font-size: 12px; font-weight: 600; background-color: var(--panel-bg); display: flex; align-items: center; } .status-pill.open { color: var(--accent-green); border: 1px solid rgba(76, 217, 100, 0.3); } .status-pill.closed { color: var(--accent-red); border: 1px solid rgba(255, 59, 48, 0.3); } .status-pill i { margin-right: 5px; } /* Market indicators */ .market-indicators { display: flex; flex-direction: column; gap: 10px; } .indicator-item { display: flex; justify-content: space-between; padding: 10px; border-radius: 6px; background-color: var(--panel-bg); transition: background-color 0.2s ease; } .indicator-item:hover { background-color: var(--panel-hover); cursor: pointer; } .indicator-name { display: flex; align-items: center; font-weight: 500; } .indicator-name i { margin-right: 8px; font-size: 14px; } .indicator-value { font-weight: 600; } .indicator-change { font-size: 12px; margin-left: 5px; } .positive { color: var(--accent-green); } .negative { color: var(--accent-red); } .indicator-value.pulse { animation: pulse 1s; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* Tools section */ .trading-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .tool-item { padding: 15px; text-align: center; background-color: var(--panel-bg); border-radius: 6px; transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden; } .tool-item:hover { background-color: var(--panel-hover); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .tool-item:hover::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-green)); } .tool-icon { font-size: 20px; margin-bottom: 8px; color: var(--accent-blue); } .tool-name { font-weight: 500; font-size: 13px; } /* Quick trades */ .quick-trades { margin-top: 20px; } .trade-card { background-color: var(--panel-bg); border-radius: 6px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; border-left: 3px solid transparent; } .trade-card:hover { background-color: var(--panel-hover); transform: translateX(5px); } .trade-card.buy { border-left-color: var(--accent-green); } .trade-card.sell { border-left-color: var(--accent-red); } .trade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .trade-ticker { font-weight: 600; font-size: 16px; } .trade-action { font-size: 12px; padding: 3px 8px; border-radius: 4px; font-weight: 600; } .trade-action.buy { background-color: rgba(76, 217, 100, 0.2); color: var(--accent-green); } .trade-action.sell { background-color: rgba(255, 59, 48, 0.2); color: var(--accent-red); } .trade-details { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 12px; } .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .backdrop.active { opacity: 1; visibility: visible; } /* Market overview */ .market-overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; } .market-card { background-color: var(--panel-bg); padding: 15px; border-radius: 8px; position: relative; overflow: hidden; transition: all 0.3s ease; } .market-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .market-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; } .market-card.positive::after { background: linear-gradient(90deg, rgba(76, 217, 100, 0.3), var(--accent-green)); } .market-card.negative::after { background: linear-gradient(90deg, rgba(255, 59, 48, 0.3), var(--accent-red)); } .market-card.neutral::after { background: linear-gradient(90deg, rgba(255, 204, 0, 0.3), var(--accent-yellow)); } .market-name { font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; } .market-change { font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 4px; } .market-change.positive { background-color: rgba(76, 217, 100, 0.2); } .market-change.negative { background-color: rgba(255, 59, 48, 0.2); } .market-change.neutral { background-color: rgba(255, 204, 0, 0.2); color: var(--accent-yellow); } .market-value { font-size: 18px; font-weight: 700; margin-bottom: 5px; } .market-time { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; } .market-time i { margin-right: 5px; font-size: 10px; } /* Watchlist */ .watchlist-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .watchlist-title { font-size: 18px; font-weight: 600; } .add-watchlist { background-color: var(--accent-blue); color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; display: flex; align-items: center; transition: background-color 0.2s ease; } .add-watchlist:hover { background-color: #0066cc; } .add-watchlist i { margin-right: 5px; } .watchlist-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; } .watchlist-table th { text-align: left; padding: 12px 15px; color: var(--text-secondary); font-weight: 500; border-bottom: 1px solid var(--border-color); } .watchlist-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); } .watchlist-table tr { transition: background-color 0.2s ease; } .watchlist-table tr:hover { background-color: var(--panel-bg); cursor: pointer; } .ticker-cell { font-weight: 600; } .price-cell { font-weight: 600; } .chart-cell { display: flex; align-items: center; gap: 10px; } .mini-chart { height: 20px; width: 60px; position: relative; } .mini-chart.up path { stroke: var(--accent-green); } .mini-chart.down path { stroke: var(--accent-red); } /* Chart section */ .chart-container { background-color: var(--panel-bg); border-radius: 8px; padding: 20px; margin-bottom: 25px; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .chart-title { font-size: 18px; font-weight: 600; } .chart-timeframe { display: flex; gap: 5px; } .timeframe-btn { padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; background-color: var(--darker-bg); color: var(--text-secondary); border: none; cursor: pointer; transition: all 0.2s ease; } .timeframe-btn:hover { background-color: var(--panel-hover); color: var(--text-primary); } .timeframe-btn.active { background-color: rgba(0, 122, 255, 0.2); color: var(--accent-blue); } .chart { height: 250px; position: relative; overflow: hidden; } .chart-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(13, 17, 23, 0.7); z-index: 10; opacity: 0; transition: opacity 0.3s ease; } .chart:hover .chart-overlay { opacity: 1; } .chart-btn { background-color: var(--accent-blue); color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background-color 0.2s ease; } .chart-btn:hover { background-color: #0066cc; } .chart svg { width: 100%; height: 100%; } /* Responsive adjustments */ @media (max-width: 700px) { .market-overview { grid-template-columns: 1fr; } .trading-tools { grid-template-columns: repeat(2, 1fr); } .off-canvas-menu { width: 100%; right: -100%; } } /* Animations and special effects */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease; } .live-indicator { position: relative; padding-left: 15px; } .live-indicator::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent-green); animation: pulse-live 2s infinite; } @keyframes pulse-live { 0% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: 0.5; transform: translateY(-50%) scale(0.8); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } } /* Liquid loading animation */ .loading-wave { width: 80px; height: 40px; display: flex; justify-content: space-between; align-items: flex-end; } .loading-bar { width: 8px; height: 10px; background-color: var(--accent-blue); border-radius: 3px; animation: wave 1.5s ease infinite; } .loading-bar:nth-child(2) { animation-delay: 0.1s; } .loading-bar:nth-child(3) { animation-delay: 0.2s; } .loading-bar:nth-child(4) { animation-delay: 0.3s; } .loading-bar:nth-child(5) { animation-delay: 0.4s; } @keyframes wave { 0% { height: 10px; } 50% { height: 30px; } 100% { height: 10px; } } /* SVG icons */ svg.icon { width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; } </style> </head> <body> <div class="container"> <header> <div class="logo">Quant<span>Edge</span></div> <button class="menu-toggle" id="open-menu"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> Trading Tools </button> </header> <div class="main-content"> <div class="market-overview"> <div class="market-card positive"> <div class="market-name"> S&P 500 <span class="market-change positive">+1.2%</span> </div> <div class="market-value">4,783.45</div> <div class="market-time"> <svg class="icon" 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> Last update: 2 min ago </div> </div> <div class="market-card negative"> <div class="market-name"> NASDAQ <span class="market-change negative">-0.5%</span> </div> <div class="market-value">15,782.61</div> <div class="market-time"> <svg class="icon" 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> Last update: 1 min ago </div> </div> <div class="market-card neutral"> <div class="market-name"> Gold (XAU) <span class="market-change neutral">+0.1%</span> </div> <div class="market-value">$2,025.40</div> <div class="market-time"> <svg class="icon" 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> Last update: 3 min ago </div> </div> <div class="market-card positive"> <div class="market-name"> ETH/USD <span class="market-change positive">+3.4%</span> </div> <div class="market-value">$2,241.83</div> <div class="market-time live-indicator"> LIVE </div> </div> </div> <div class="chart-container"> <div class="chart-header"> <div class="chart-title">BTC/USD Price Action</div> <div class="chart-timeframe"> <button class="timeframe-btn">1H</button> <button class="timeframe-btn active">1D</button> <button class="timeframe-btn">1W</button> <button class="timeframe-btn">1M</button> </div> </div> <div class="chart"> <svg width="100%" height="100%" viewBox="0 0 500 200"> <defs> <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="rgba(0, 122, 255, 0.5)"></stop> <stop offset="100%" stop-color="rgba(0, 122, 255, 0)"></stop> </linearGradient> </defs> <path d="M0,150 C50,120 100,180 150,150 C200,120 250,100 300,50 C350,0 400,20 450,40 L450,200 L0,200 Z" fill="url(#areaGradient)"></path> <path d="M0,150 C50,120 100,180 150,150 C200,120 250,100 300,50 C350,0 400,20 450,40" fill="none" stroke="#007aff" stroke-width="2"></path> </svg> <div class="chart-overlay"> <button class="chart-btn">View Detailed Chart</button> </div> </div> </div> <div class="watchlist-section"> <div class="watchlist-header"> <div class="watchlist-title">My Watchlist</div> <button class="add-watchlist"> <svg class="icon" 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> Add Symbol </button> </div> <table class="watchlist-table"> <thead> <tr> <th>Symbol</th> <th>Price</th> <th>Change</th> <th>Chart</th> </tr> </thead> <tbody> <tr> <td class="ticker-cell">AAPL</td> <td class="price-cell">$193.42</td> <td class="change-cell positive">+2.31%</td> <td class="chart-cell"> <div class="mini-chart up"> <svg viewBox="0 0 60 20"> <path d="M0,10 C5,8 10,12 15,10 C20,8 25,5 30,3 C35,1 40,5 45,6 C50,7 55,4 60,3" fill="none" stroke-width="1.5" stroke-linecap="round"></path> </svg> </div> </td> </tr> <tr> <td class="ticker-cell">TSLA</td> <td class="price-cell">$246.72</td> <td class="change-cell negative">-1.04%</td> <td class="chart-cell"> <div class="mini-chart down"> <svg viewBox="0 0 60 20"> <path d="M0,3 C5,5 10,2 15,6 C20,10 25,8 30,12 C35,16 40,15 45,14 C50,13 55,16 60,14" fill="none" stroke-width="1.5" stroke-linecap="round"></path> </svg> </div> </td> </tr> <tr> <td class="ticker-cell">MSFT</td> <td class="price-cell">$375.56</td> <td class="change-cell positive">+0.87%</td> <td class="chart-cell"> <div class="mini-chart up"> <svg viewBox="0 0 60 20"> <path d="M0,15 C5,14 10,10 15,8 C20,6 25,9 30,7 C35,5 40,2 45,1 C50,0 55,2 60,3" fill="none" stroke-width="1.5" stroke-linecap="round"></path> </svg> </div> </td> </tr> <tr> <td class="ticker-cell">BTC/USD</td> <td class="price-cell">$42,831.05</td> <td class="change-cell positive">+1.45%</td> <td class="chart-cell"> <div class="mini-chart up"> <svg viewBox="0 0 60 20"> <path d="M0,12 C5,10 10,15 15,13 C20,11 25,5 30,3 C35,1 40,4 45,6 C50,8 55,5 60,2" fill="none" stroke-width="1.5" stroke-linecap="round"></path> </svg> </div> </td> </tr> </tbody> </table> </div> </div> <div class="backdrop" id="backdrop"></div> <div class="off-canvas-menu" id="off-canvas-menu"> <div class="menu-header"> <div class="menu-title">Market Tools</div> <button class="close-menu" id="close-menu"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> </div> <div class="menu-section"> <div class="section-title"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Market Status </div> <div class="market-status"> <div class="status-pill open"> <svg class="icon" 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> NYSE: Open </div> <div class="status-pill open"> <svg class="icon" 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> NASDAQ: Open </div> <div class="status-pill closed"> <svg class="icon" 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> Nikkei: Closed </div> <div class="status-pill open"> <svg class="icon" 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> Crypto: 24/7 </div> </div> </div> <div class="menu-section"> <div class="section-title"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="20" x2="12" y2="10"></line> <line x1="18" y1="20" x2="18" y2="4"></line> <line x1="6" y1="20" x2="6" y2="16"></line> </svg> Key Indicators </div> <div class="market-indicators"> <div class="indicator-item"> <div class="indicator-name"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 8l4 4-4 4"></path> <path d="M3 12h8"></path> <path d="M11 16l4 0"></path> </svg> VIX (Volatility) </div> <div class="indicator-value" id="vix-value">13.21 <span class="indicator-change negative">-0.5%</span></div> </div> <div class="indicator-item"> <div class="indicator-name"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2v6.5l3.5 2"></path> <circle cx="12" cy="13" r="8"></circle> </svg> 10Y Treasury </div> <div class="indicator-value" id="treasury-value">4.23% <span class="indicator-change positive">+0.03%</span></div> </div> <div class="indicator-item"> <div class="indicator-name"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="20" x2="12" y2="10"></line> <line x1="18" y1="20" x2="18" y2="4"></line> <line x1="6" y1="20" x2="6" y2="16"></line> </svg> US Dollar Index </div> <div class="indicator-value" id="usd-value">104.82 <span class="indicator-change negative">-0.2%</span></div> </div> <div class="indicator-item"> <div class="indicator-name"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="2" y1="12" x2="22" y2="12"></line> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> </svg> BTC Dominance </div> <div class="indicator-value" id="btc-dom-value">51.4% <span class="indicator-change positive">+0.3%</span></div> </div> </div> </div> <div class="menu-section"> <div class="section-title"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serenity Health Portal</title> <style> :root { --teal: #4ECDC4; --light-teal: #B3E6E2; --dark-teal: #1A8C84; --green: #87D37C; --blue: #6FB1E3; --dark-blue: #37718E; --cream: #F7F9F4; --light-gray: #E8ECEF; --text: #456268; --dark-text: #2D3E40; --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-font-smoothing: antialiased; } body { background-color: var(--cream); color: var(--text); overflow-x: hidden; line-height: 1.6; height: 100vh; position: relative; } .container { max-width: 100%; padding: 1rem; height: 100%; position: relative; overflow: hidden; } /* Header styling */ header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; position: relative; z-index: 100; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--dark-teal); display: flex; align-items: center; gap: 0.5rem; } .logo-icon { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--teal)); display: inline-flex; justify-content: center; align-items: center; color: white; font-size: 16px; } .menu-button { background: none; border: none; color: var(--dark-teal); font-size: 1.2rem; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: var(--transition); position: relative; z-index: 1001; } .menu-button:hover { background-color: var(--light-teal); } .menu-button:focus { outline: none; } /* Off-canvas menu */ .off-canvas { position: fixed; top: 0; right: -100%; width: 80%; max-width: 350px; height: 100%; background: linear-gradient(170deg, var(--teal) -5%, var(--blue) 105%); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1); transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1); padding: 2rem; color: white; overflow-y: auto; display: flex; flex-direction: column; z-index: 1000; } .off-canvas.open { right: 0; } .off-canvas .close-btn { position: absolute; top: 2rem; right: 2rem; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; transition: transform 0.3s ease; } .off-canvas .close-btn:hover { transform: rotate(90deg); } .nav-header { margin-top: 2rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; } .menu-title { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; } .user-profile { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 1rem; margin-top: 1rem; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, var(--cream), var(--light-gray)); display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--dark-blue); } .user-info { flex: 1; } .user-name { font-weight: 600; } .user-status { font-size: 0.85rem; opacity: 0.8; } .nav-menu { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .nav-menu-item { padding: 0.25rem 0; transition: transform 0.3s ease; } .nav-menu-item:hover { transform: translateX(5px); } .nav-menu-link { display: flex; align-items: center; gap: 1rem; color: white; text-decoration: none; padding: 0.75rem 1rem; border-radius: 0.75rem; transition: background-color 0.3s ease; } .nav-menu-link:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-menu-link.active { background-color: rgba(255, 255, 255, 0.2); font-weight: 600; } .nav-menu-icon { width: 1.5rem; height: 1.5rem; display: inline-flex; justify-content: center; align-items: center; } .menu-section { margin-top: 2rem; } .menu-section-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; opacity: 0.8; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 0.5rem; } /* Main content */ .main-content { position: relative; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); padding-top: 1rem; } .main-content.shifted { transform: translateX(-40px) scale(0.95); filter: blur(2px); pointer-events: none; } .welcome-section { padding: 2rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); margin-bottom: 2rem; position: relative; overflow: hidden; } .welcome-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(45deg, var(--light-teal), var(--blue)); opacity: 0.1; z-index: -1; } .welcome-title { font-size: 1.75rem; color: var(--dark-text); margin-bottom: 1rem; } .wellness-score { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; } .score-circle { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--green) 80%, var(--light-gray) 0); position: relative; display: flex; justify-content: center; align-items: center; } .score-circle::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background-color: white; } .score-number { position: relative; font-size: 1.5rem; font-weight: bold; color: var(--dark-text); } .score-info { flex: 1; } .score-title { font-weight: 600; color: var(--dark-text); margin-bottom: 0.25rem; } .score-description { font-size: 0.9rem; opacity: 0.8; } .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .action-card { background-color: white; border-radius: 1rem; padding: 1.25rem 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .action-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .action-icon { width: 50px; height: 50px; border-radius: 50%; background-color: var(--light-gray); display: flex; justify-content: center; align-items: center; color: var(--dark-teal); font-size: 1.25rem; margin-bottom: 0.5rem; transition: var(--transition); } .action-card:hover .action-icon { background-color: var(--teal); color: white; } .action-title { font-weight: 600; font-size: 0.9rem; color: var(--dark-text); } .upcoming-section { margin-top: 2rem; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .section-title { font-size: 1.25rem; color: var(--dark-text); font-weight: 600; } .see-all { color: var(--dark-teal); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: var(--transition); } .see-all:hover { color: var(--teal); } .appointment-card { background-color: white; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); margin-bottom: 1rem; display: flex; gap: 1rem; position: relative; overflow: hidden; } .appointment-card::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background-color: var(--teal); } .appointment-card:hover { transform: translateX(5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .appointment-date { min-width: 60px; text-align: center; padding-top: 0.5rem; } .date-day { font-size: 1.5rem; font-weight: 700; color: var(--dark-text); line-height: 1; } .date-month { font-size: 0.85rem; color: var(--text); text-transform: uppercase; } .appointment-details { flex: 1; } .appointment-type { font-weight: 600; color: var(--dark-text); margin-bottom: 0.25rem; } .appointment-doctor { font-size: 0.9rem; margin-bottom: 0.5rem; } .appointment-time { font-size: 0.85rem; color: var(--dark-teal); font-weight: 500; } .appointment-actions { display: flex; gap: 0.5rem; } .appointment-button { background: none; border: none; color: var(--text); font-size: 0.85rem; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.25rem; transition: var(--transition); } .appointment-button:hover { background-color: var(--light-gray); color: var(--dark-text); } /* Overlay */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999; } .overlay.active { opacity: 1; visibility: visible; } /* Animated wave */ .wave-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; overflow: hidden; z-index: -1; } .wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23b3e6e2' opacity='.25'%3E%3C/path%3E%3C/svg%3E"); background-size: 1200px 100%; animation: wave-animation 15s linear infinite; } .wave:nth-child(2) { bottom: 0; animation: wave-animation 10s linear reverse infinite; opacity: 0.5; } .wave:nth-child(3) { bottom: 0; animation: wave-animation 20s linear infinite; opacity: 0.2; } @keyframes wave-animation { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Schedule Popup */ .schedule-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); width: 90%; max-width: 400px; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1002; } .schedule-popup.active { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; } .popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .popup-title { font-size: 1.5rem; color: var(--dark-text); font-weight: 600; } .close-popup { background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; transition: transform 0.3s ease; } .close-popup:hover { transform: rotate(90deg); } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--dark-text); } .form-control { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid var(--light-gray); border-radius: 0.5rem; background-color: var(--cream); color: var(--text); transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2); } .form-control::placeholder { color: rgba(69, 98, 104, 0.5); } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23456268' viewBox='0 0 16 16'%3E%3Cpath d='M8 9.5a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L8 8.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.354.146z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px 16px; padding-right: 2.5rem; } .btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; text-align: center; border: none; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: var(--teal); color: white; } .btn-primary:hover { background-color: var(--dark-teal); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(78, 205, 196, 0.3); } .btn-outline { background-color: transparent; color: var(--text); border: 1px solid var(--light-gray); } .btn-outline:hover { background-color: var(--light-gray); color: var(--dark-text); } .form-actions { display: flex; justify-content: flex-end; gap: 1rem; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Toast notification */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100%); background-color: var(--dark-teal); color: white; padding: 1rem 1.5rem; border-radius: 0.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 0.75rem; opacity: 0; transition: all 0.3s ease; z-index: 2000; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast-icon { font-size: 1.25rem; } .toast-message { font-size: 0.9rem; } /* Responsive */ @media (max-width: 576px) { .welcome-section { padding: 1.5rem; } .quick-actions { grid-template-columns: repeat(2, 1fr); } .appointment-card { flex-direction: column; gap: 0.5rem; } .appointment-date { display: flex; align-items: center; gap: 0.5rem; min-width: auto; padding-top: 0; } .score-circle { width: 60px; height: 60px; } .score-circle::before { width: 45px; height: 45px; } .score-number { font-size: 1.25rem; } } @media (min-width: 577px) and (max-width: 768px) { .quick-actions { grid-template-columns: repeat(3, 1fr); } } </style> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-icon">S</div> Serenity </div> <button class="menu-button" id="menuButton"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </header> <div class="main-content" id="mainContent"> <div class="welcome-section"> <h1 class="welcome-title">Welcome back, Olivia</h1> <p>Your journey to wellness continues. How are you feeling today?</p> <div class="wellness-score"> <div class="score-circle"> <span class="score-number">80</span> </div> <div class="score-info"> <h3 class="score-title">Your Wellness Score</h3> <p class="score-description">Your mindfulness practice is paying off! Up 5 points from last week.</p> </div> </div> <div class="quick-actions"> <div class="action-card" id="scheduleAppointment"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> </div> <span class="action-title">Schedule Visit</span> </div> <div class="action-card"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> <span class="action-title">Join Community</span> </div> <div class="action-card"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </div> <span class="action-title">Wellness Plan</span> </div> </div> </div> <div class="upcoming-section"> <div class="section-header"> <h2 class="section-title">Upcoming Appointments</h2> <a href="#" class="see-all">See all</a> </div> <div class="appointment-card pulse"> <div class="appointment-date"> <div class="date-day">15</div> <div class="date-month">May</div> </div> <div class="appointment-details"> <div class="appointment-type">Nutrition Consultation</div> <div class="appointment-doctor">Dr. Sarah Chen, Nutritionist</div> <div class="appointment-time">10:30 AM - 11:15 AM</div> </div> <div class="appointment-actions"> <button class="appointment-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="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> </button> </div> </div> <div class="appointment-card"> <div class="appointment-date"> <div class="date-day">21</div> <div class="date-month">May</div> </div> <div class="appointment-details"> <div class="appointment-type">Yoga & Meditation</div> <div class="appointment-doctor">Maya Johnson, Wellness Coach</div> <div class="appointment-time">5:00 PM - 6:00 PM</div> </div> <div class="appointment-actions"> <button class="appointment-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="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> </button> </div> </div> </div> <div class="wave-container"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> </div> <div class="off-canvas" id="offCanvas"> <div class="nav-header"> <h2 class="menu-title">Wellness Dashboard</h2> <div class="user-profile"> <div class="avatar">O</div> <div class="user-info"> <div class="user-name">Olivia Parker</div> <div class="user-status">Premium Member</div> </div> </div> </div> <ul class="nav-menu"> <li class="nav-menu-item"> <a href="#" class="nav-menu-link active"> <span class="nav-menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </span> Dashboard </a> </li> <li class="nav-menu-item"> <a href="#" class="nav-menu-link"> <span class="nav-menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </span> My Wellness Plan </a> </li> <li class="nav-menu-item"> <a href="#" class="nav-menu-link"> <span class="nav-menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> </span> Appointments </a> </li> <li class="nav-menu-item"> <a href="#" class="nav-menu-link"> <span class="nav-menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> <polyline points="16 17 21 12 16 7"></polyline> <line x1="21" y1="12" x2="9" y2="12"></line> </svg> </span> Activity Tracker </a> </li> </ul> <div class="menu-section"> <h3 class="menu-section-title">Community</h3> <ul class="nav-menu"> <li class="nav-menu-item"> <a href="#" class="nav-menu-link"> <span class="nav-menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </span> Support Groups </a> </li> <li class="nav-menu-item"> <a href="#" class="nav-menu-link"> <span class="nav-menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonNexus Gaming Hub</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Play:wght@400;700&display=swap'); :root { --neon-purple: #b829f8; --neon-blue: #29f8f8; --neon-green: #39ff14; --neon-pink: #ff1493; --dark-bg: #0a0a14; --darker-bg: #050508; --menu-width: 280px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Play', sans-serif; background-color: var(--dark-bg); color: #fff; overflow-x: hidden; height: 100vh; background-image: radial-gradient(circle at 10% 20%, rgba(41, 248, 248, 0.05) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(184, 41, 248, 0.05) 0%, transparent 20%), radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.025) 0%, transparent 50%); } .menu-toggle { position: fixed; top: 20px; left: 20px; z-index: 999; width: 45px; height: 45px; background: rgba(10, 10, 20, 0.9); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; border: 1px solid rgba(184, 41, 248, 0.3); box-shadow: 0 0 10px rgba(184, 41, 248, 0.3); transition: all 0.3s ease; } .menu-toggle:hover { box-shadow: 0 0 15px rgba(184, 41, 248, 0.6); } .menu-toggle span { display: block; width: 25px; height: 3px; margin: 3px 0; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); border-radius: 3px; transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: linear-gradient(90deg, var(--neon-green), var(--neon-blue)); } .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scale(0); } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); background: linear-gradient(90deg, var(--neon-blue), var(--neon-green)); } .side-menu { position: fixed; top: 0; left: calc(var(--menu-width) * -1); width: var(--menu-width); height: 100%; background: var(--darker-bg); transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); z-index: 998; border-right: 1px solid rgba(184, 41, 248, 0.3); box-shadow: 5px 0 20px rgba(10, 10, 20, 0.5); display: flex; flex-direction: column; overflow: hidden; } .side-menu.open { transform: translateX(var(--menu-width)); } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); z-index: 997; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .overlay.active { opacity: 1; visibility: visible; } .logo { padding: 30px 20px 20px; text-align: center; } .logo img { width: 65%; height: auto; } .logo h1 { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900; margin: 15px 0 5px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(184, 41, 248, 0.5); } .nav-menu { margin-top: 20px; padding: 0 10px; flex: 1; } .nav-item { margin-bottom: 10px; position: relative; overflow: hidden; border-radius: 8px; } .nav-item a { display: flex; align-items: center; padding: 12px 15px; text-decoration: none; color: #fff; font-size: 16px; font-weight: 500; transition: all 0.3s ease; position: relative; z-index: 1; } .nav-item a::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple)); transition: all 0.3s ease; } .nav-item a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(184, 41, 248, 0.15), transparent); transform: translateX(-100%); transition: all 0.3s ease; z-index: -1; } .nav-item a:hover::before, .nav-item.active a::before { width: 6px; } .nav-item a:hover::after, .nav-item.active a::after { transform: translateX(0); } .nav-item i { margin-right: 15px; font-size: 20px; transition: all 0.3s ease; opacity: 0.7; position: relative; } .nav-item:hover i, .nav-item.active i { opacity: 1; transform: scale(1.1); } .nav-item span.badge { position: absolute; right: 15px; background: var(--neon-green); color: #000; font-size: 11px; padding: 2px 5px; border-radius: 10px; font-weight: bold; } .user-section { padding: 15px; background: rgba(10, 10, 20, 0.5); border-top: 1px solid rgba(184, 41, 248, 0.2); display: flex; align-items: center; gap: 15px; } .user-avatar { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(to bottom right, var(--neon-blue), var(--neon-purple)); position: relative; overflow: hidden; box-shadow: 0 0 10px rgba(184, 41, 248, 0.5); } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-info { flex: 1; } .user-info h3 { font-size: 14px; margin-bottom: 2px; font-weight: 600; } .user-status { display: flex; align-items: center; font-size: 12px; color: rgba(255, 255, 255, 0.7); } .status-dot { width: 8px; height: 8px; background: var(--neon-green); border-radius: 50%; margin-right: 6px; position: relative; } .status-dot::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: var(--neon-green); border-radius: 50%; opacity: 0.4; animation: pulse 1.5s infinite; } .main-content { padding: 20px; margin-left: 0; transition: margin-left 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); height: 100vh; overflow-y: auto; } .section-title { font-family: 'Orbitron', sans-serif; font-size: 24px; margin-bottom: 20px; padding-bottom: 10px; position: relative; color: #fff; } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 50px; background: linear-gradient(to right, var(--neon-purple), var(--neon-blue)); } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-bottom: 30px; } .game-card { background: rgba(10, 10, 20, 0.6); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); cursor: pointer; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(184, 41, 248, 0.2); } .game-card img { width: 100%; height: 100px; object-fit: cover; transition: all 0.3s ease; } .game-card:hover img { filter: brightness(1.2); } .game-info { padding: 10px; } .game-info h3 { font-size: 14px; margin-bottom: 5px; line-height: 1.2; font-weight: 600; } .game-meta { display: flex; align-items: center; font-size: 12px; color: rgba(255, 255, 255, 0.7); } .game-meta .players { margin-right: 10px; display: flex; align-items: center; } .game-meta i { margin-right: 4px; color: var(--neon-blue); } .live-indicator { display: inline-block; background: rgba(255, 20, 147, 0.2); color: var(--neon-pink); padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-left: auto; } .live-indicator i { margin-right: 3px; animation: pulse 1.5s infinite; color: var(--neon-pink); } .activity-feed { background: rgba(10, 10, 20, 0.4); border-radius: 10px; padding: 15px; margin-bottom: 30px; } .activity-item { display: flex; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .activity-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .activity-avatar { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; margin-right: 12px; background: var(--dark-bg); } .activity-avatar img { width: 100%; height: 100%; object-fit: cover; } .activity-content { flex: 1; } .activity-content h4 { font-size: 14px; margin-bottom: 3px; } .activity-content h4 span { font-weight: normal; color: rgba(255, 255, 255, 0.7); } .activity-time { font-size: 12px; color: rgba(255, 255, 255, 0.5); } .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .feature-card { background: rgba(10, 10, 20, 0.6); border-radius: 10px; padding: 15px; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(41, 248, 248, 0.1) 0%, transparent 100%); opacity: 0; transition: all 0.3s ease; } .feature-card:hover::before { opacity: 1; } .feature-card h3 { font-size: 16px; margin-bottom: 5px; position: relative; z-index: 1; display: flex; align-items: center; } .feature-card h3 i { margin-right: 8px; color: var(--neon-purple); } .feature-card p { font-size: 13px; color: rgba(255, 255, 255, 0.7); position: relative; z-index: 1; } .feature-card .counter { font-size: 28px; font-weight: 700; font-family: 'Orbitron', sans-serif; color: var(--neon-blue); margin-bottom: 8px; } /* Cyberpunk glitch effect for logo */ .glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--darker-bg); } .glitch::before { left: 2px; text-shadow: -2px 0 var(--neon-pink); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-1 5s infinite linear alternate-reverse; } .glitch::after { left: -2px; text-shadow: 2px 0 var(--neon-blue); clip: rect(24px, 450px, 36px, 0); animation: glitch-anim-2 5s infinite linear alternate-reverse; } /* Animations */ @keyframes pulse { 0% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.5); opacity: 0.2; } 100% { transform: scale(1); opacity: 0.4; } } @keyframes glitch-anim-1 { 0% { clip: rect(4px, 450px, 6px, 0); } 20% { clip: rect(34px, 450px, 36px, 0); } 40% { clip: rect(64px, 450px, 66px, 0); } 60% { clip: rect(14px, 450px, 16px, 0); } 80% { clip: rect(44px, 450px, 46px, 0); } 100% { clip: rect(24px, 450px, 26px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(24px, 450px, 26px, 0); } 20% { clip: rect(4px, 450px, 6px, 0); } 40% { clip: rect(54px, 450px, 56px, 0); } 60% { clip: rect(34px, 450px, 36px, 0); } 80% { clip: rect(14px, 450px, 16px, 0); } 100% { clip: rect(44px, 450px, 46px, 0); } } /* Responsive */ @media (max-width: 700px) { .game-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; } .features-grid { grid-template-columns: 1fr; } .section-title { font-size: 20px; } .side-menu { width: 240px; left: -240px; } .side-menu.open { transform: translateX(240px); } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--darker-bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--neon-purple), var(--neon-blue)); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, var(--neon-blue), var(--neon-green)); } /* Icon font */ .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } </style> </head> <body> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> <div class="overlay"></div> <nav class="side-menu"> <div class="logo"> <h1 class="glitch" data-text="NEONNEXUS">NEONNEXUS</h1> <div style="font-size: 12px; color: rgba(255,255,255,0.6);">GAMING COLLECTIVE</div> </div> <div class="nav-menu"> <div class="nav-item active"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/> </svg> Dashboard </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z"/> </svg> Games Library <span class="badge">NEW</span> </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/> </svg> Live Streams </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> Guild Hub </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/> </svg> Forums </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/> </svg> Support </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M19 3H5c-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-5 14h-2V9h-2V7h4v10z"/> </svg> Marketplace </a> </div> <div class="nav-item"> <a href="#"> <svg class="icon" viewBox="0 0 24 24"> <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/> </svg> Settings </a> </div> </div> <div class="user-section"> <div class="user-avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0xMiAxMmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTIgMiAuOSAyIDItLjkgMi0yIDJ6bTYtMi41Yy0uNS0zLTMtNS41LTYtNS41cy01LjUgMi41LTYgNS41aDEyeiIvPjwvc3ZnPg==" alt="User"> </div> <div class="user-info"> <h3>CyberSlayer92</h3> <div class="user-status"> <div class="status-dot"></div> Online </div> </div> </div> </nav> <main class="main-content"> <h2 class="section-title">Trending Games</h2> <div class="game-grid"> <div class="game-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIiBmaWxsPSJub25lIj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzFiMWIzYSIvPjxwYXRoIGQ9Ik01MCA0MEgxOTB2NDVINTBWNDBaIiBmaWxsPSIjMjkyOWY4IiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjYwIiByPSIyNSIgZmlsbD0iI2ZmMTQ5MyIgZmlsbC1vcGFjaXR5PSIwLjQiLz48cGF0aCBkPSJNNzAgOTBMMTcwIDkwIiBzdHJva2U9IiMzOWZmMTQiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==" alt="Cyberpunk Rampage"> <div class="game-info"> <h3>Cyberpunk Rampage</h3> <div class="game-meta"> <div class="players"> <svg class="icon" viewBox="0 0 24 24"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> 15.4K </div> <div class="live-indicator"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/> </svg> LIVE </div> </div> </div> </div> <div class="game-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIiBmaWxsPSJub25lIj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzBhMGExNCIvPjxwYXRoIGQ9Ik03MCA0MEgxNzB2NDVINzBWNDBaIiBmaWxsPSIjYjgyOWY4IiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjY1IiByPSIyMCIgZmlsbD0iIzI5ZjhmOCIgZmlsbC1vcGFjaXR5PSIwLjQiLz48cGF0aCBkPSJNNTAgOTBIMTkwIiBzdHJva2U9IiMzOWZmMTQiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==" alt="Neon Drift Racing"> <div class="game-info"> <h3>Neon Drift Racing</h3> <div class="game-meta"> <div class="players"> <svg class="icon" viewBox="0 0 24 24"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> 8.2K </div> </div> </div> </div> <div class="game-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIiBmaWxsPSJub25lIj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzBhMGExNCIvPjxwYXRoIGQ9Ik04MCAyMEgxNjB2ODVIODBWMjBaIiBmaWxsPSIjMzlmZjE0IiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjE2MCIgY3k9IjMwIiByPSIxNSIgZmlsbD0iI2ZmMTQ5MyIgZmlsbC1vcGFjaXR5PSIwLjQiLz48cGF0aCBkPSJNNTAgOTBIMTkwIiBzdHJva2U9IiNiODI5ZjgiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==" alt="Galactic Conquest"> <div class="game-info"> <h3>Galactic Conquest</h3> <div class="game-meta"> <div class="players"> <svg class="icon" viewBox="0 0 24 24"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05
