Creating visually appealing and functional UI elements is crucial for any web project. Boxes, in particular, play a significant role in organizing content and enhancing user experience.
In this article, we will explore 10 exemplary box designs that can elevate your web interface. Each example showcases unique features and styles, providing inspiration for your next project.
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 make it easy to create pixel-perfect UI every time. Loved by designers and developers alike, Subframe ensures your designs are both stunning and functional.
Start for free and elevate your design game 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 transform your UI design process? With Subframe, you can create pixel-perfect UI, including stunning boxes, in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait—start for free and begin designing immediately. Elevate your projects with Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banking Dashboard</title> <style> :root { --primary-color: #0e4f6e; --secondary-color: #2a9d8f; --accent-color: #f4a261; --text-color: #333; --background-color: #f5f7fa; --card-bg: #ffffff; --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08); --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.1); --border-radius: 12px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background-color); color: var(--text-color); line-height: 1.6; overflow-x: hidden; padding: 20px; max-width: 700px; margin: 0 auto; height: 100vh; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; margin-bottom: 1.5rem; } .logo { font-weight: 700; font-size: 1.5rem; color: var(--primary-color); display: flex; align-items: center; } .logo-icon { width: 28px; height: 28px; background-color: var(--primary-color); border-radius: 6px; margin-right: 10px; position: relative; overflow: hidden; } .logo-icon::after { content: ''; position: absolute; width: 14px; height: 14px; background-color: var(--secondary-color); border-radius: 50%; top: 7px; left: 7px; animation: pulse 3s infinite; } @keyframes pulse { 0% { transform: scale(0.95); } 50% { transform: scale(1.05); } 100% { transform: scale(0.95); } } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 12px; border-radius: 50px; transition: var(--transition); background-color: rgba(255, 255, 255, 0.5); } .user-profile:hover { background-color: rgba(255, 255, 255, 0.8); box-shadow: var(--shadow-sm); } .avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--secondary-color); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; } .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } @media (max-width: 576px) { .dashboard-grid { grid-template-columns: 1fr; } } .balance-card { grid-column: 1 / -1; background: linear-gradient(110deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow-md); position: relative; overflow: hidden; transition: var(--transition); } .balance-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .balance-card::after { content: ''; position: absolute; width: 200px; height: 200px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; top: -100px; right: -50px; } .balance-card::before { content: ''; position: absolute; width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.05); border-radius: 50%; bottom: -30px; left: 30px; } .balance-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; position: relative; z-index: 2; } .balance-amount { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; position: relative; z-index: 2; } .balance-change { display: flex; align-items: center; gap: 5px; font-size: 0.875rem; background-color: rgba(255, 255, 255, 0.15); padding: 4px 10px; border-radius: 50px; position: relative; z-index: 2; } .positive { color: #4caf50; } .card { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 1.25rem; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .card-title { font-weight: 600; color: var(--primary-color); display: flex; align-items: center; gap: 6px; } .card-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: rgba(14, 79, 110, 0.1); border-radius: 6px; color: var(--primary-color); } .transactions-list { flex: 1; display: flex; flex-direction: column; gap: 12px; } .transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 8px; transition: var(--transition); } .transaction-item:hover { background-color: rgba(0, 0, 0, 0.02); } .transaction-info { display: flex; align-items: center; gap: 12px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; } .transaction-details { display: flex; flex-direction: column; } .transaction-name { font-weight: 500; } .transaction-date { font-size: 0.75rem; color: #888; } .transaction-amount { font-weight: 600; } .expense { color: #e63946; } .income { color: #2a9d8f; } .payment-icon { background-color: rgba(230, 57, 70, 0.1); color: #e63946; } .deposit-icon { background-color: rgba(42, 157, 143, 0.1); color: #2a9d8f; } .subscription-icon { background-color: rgba(244, 162, 97, 0.1); color: #f4a261; } .see-all { display: flex; align-items: center; justify-content: center; margin-top: auto; padding-top: 1rem; text-decoration: none; color: var(--primary-color); font-weight: 500; font-size: 0.875rem; transition: var(--transition); } .see-all:hover { text-decoration: underline; } .accounts-list { flex: 1; display: flex; flex-direction: column; gap: 1rem; } .account-card { background-color: #f5f7fa; border-radius: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); cursor: pointer; } .account-card:hover { background-color: #eaecf0; transform: translateX(4px); } .account-info { display: flex; align-items: center; gap: 12px; } .account-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; background-color: var(--primary-color); color: white; } .account-details { display: flex; flex-direction: column; } .account-name { font-weight: 600; } .account-number { font-size: 0.75rem; color: #888; } .account-amount { font-weight: 600; } .quick-actions { display: flex; flex-direction: column; gap: 0.5rem; } .action-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .action-button { background-color: #f5f7fa; border: none; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: var(--transition); } .action-button:hover { background-color: #eaecf0; transform: translateY(-2px); } .action-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; background-color: white; color: var(--primary-color); box-shadow: var(--shadow-sm); } .button-label { font-size: 0.75rem; font-weight: 500; color: #555; } .notification-dot { width: 6px; height: 6px; background-color: var(--accent-color); border-radius: 50%; position: absolute; top: 6px; right: 6px; } #current-day { font-weight: normal; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); } .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); animation: shimmer 1.5s infinite; } @keyframes shimmer { 100% { left: 150%; } } .floating-action-button { position: fixed; bottom: 30px; right: 30px; width: 56px; height: 56px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(14, 79, 110, 0.3); cursor: pointer; transition: var(--transition); z-index: 100; } .floating-action-button:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(14, 79, 110, 0.4); background-color: var(--secondary-color); } .hidden { opacity: 0; transform: translateY(10px); transition: var(--transition); } .visible { opacity: 1; transform: translateY(0); } @media (max-width: 700px) { body { padding: 15px; } .balance-amount { font-size: 1.5rem; } .dashboard-grid { gap: 15px; } } </style> </head> <body> <header> <div class="logo"> <div class="logo-icon"></div> Atlas </div> <div class="user-profile"> <div class="avatar">JS</div> <div>Jamie</div> </div> </header> <div class="dashboard-grid"> <div class="balance-card shimmer"> <div class="balance-header"> <div> <h2>Available Balance</h2> <div id="current-day">Monday, April 22</div> </div> <div class="balance-change positive"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 3.2% </div> </div> <div class="balance-amount">$24,562.80</div> </div> <div class="card"> <div class="card-header"> <div class="card-title"> <div class="card-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 5H3C1.89543 5 1 5.89543 1 7V17C1 18.1046 1.89543 19 3 19H21C22.1046 19 23 18.1046 23 17V7C23 5.89543 22.1046 5 21 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1 10H23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Recent Transactions </div> <div class="card-icon" style="position: relative;"> <div class="notification-dot"></div> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3V21M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="transactions-list"> <div class="transaction-item hidden"> <div class="transaction-info"> <div class="transaction-icon payment-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 11L12 14L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 12V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Whole Foods Market</div> <div class="transaction-date">Today, 2:34 PM</div> </div> </div> <div class="transaction-amount expense">-$84.32</div> </div> <div class="transaction-item hidden"> <div class="transaction-info"> <div class="transaction-icon deposit-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3V21M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Payroll Deposit</div> <div class="transaction-date">Apr 15, 9:00 AM</div> </div> </div> <div class="transaction-amount income">+$3,240.50</div> </div> <div class="transaction-item hidden"> <div class="transaction-info"> <div class="transaction-icon subscription-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 5H6C4.34315 5 3 6.34315 3 8V16C3 17.6569 4.34315 19 6 19H18C19.6569 19 21 17.6569 21 16V8C21 6.34315 19.6569 5 18 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Spotify Premium</div> <div class="transaction-date">Apr 14, 12:00 AM</div> </div> </div> <div class="transaction-amount expense">-$14.99</div> </div> <div class="transaction-item hidden"> <div class="transaction-info"> <div class="transaction-icon payment-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 11L12 14L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 12V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Electric Bill</div> <div class="transaction-date">Apr 10, 4:15 PM</div> </div> </div> <div class="transaction-amount expense">-$143.78</div> </div> </div> <a href="#" class="see-all">See all transactions</a> </div> <div class="card"> <div class="card-header"> <div class="card-title"> <div class="card-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="2" y="5" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 10H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Your Accounts </div> <div class="card-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accounts-list"> <div class="account-card hidden"> <div class="account-info"> <div class="account-icon">C</div> <div class="account-details"> <div class="account-name">Checking Account</div> <div class="account-number">•••• 4382</div> </div> </div> <div class="account-amount">$12,486.32</div> </div> <div class="account-card hidden"> <div class="account-info"> <div class="account-icon" style="background-color: var(--secondary-color);">S</div> <div class="account-details"> <div class="account-name">Savings Account</div> <div class="account-number">•••• 1297</div> </div> </div> <div class="account-amount">$42,076.48</div> </div> <div class="account-card hidden"> <div class="account-info"> <div class="account-icon" style="background-color: var(--accent-color);">I</div> <div class="account-details"> <div class="account-name">Investment Portfolio</div> <div class="account-number">•••• 8652</div> </div> </div> <div class="account-amount">$158,429.83</div> </div> </div> </div> <div class="card"> <div class="card-header"> <div class="card-title"> <div class="card-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Quick Actions </div> </div> <div class="quick-actions"> <div class="action-buttons"> <button class="action-button hidden"> <div class="action-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 2L11 13M22 2L15 22L11 13M11 13L2 9L22 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="button-label">Send Money</div> </button> <button class="action-button hidden"> <div class="action-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8H19C20.1046 8 21 8.89543 21 10V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V10C3 8.89543 3.89543 8 5 8H6M15 5V3C15 1.89543 14.1046 1 13 1H11C9.89543 1 9 1.89543 9 3V5M15 5H9M15 5H18M9 5H6M12 12V18M15 15H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="button-label">Pay Bills</div> </button> <button class="action-button hidden"> <div class="action-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23 7L6 7M23 7C23 7 21.012 7 19.5 7C17.989 7 16 7 16 7M23 7L23 3M6 7L6 3M6 7L6 11M6 21L16 21M16 21L16 11M16 21C16 21 17.989 21 19.5 21C21.012 21 23 21 23 21M16 11L6 11M16 11L16 3M6 11L6 21M23 21L23 17M6 3L16 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="button-label">Mobile Deposit</div> </button> <button class="action-button hidden"> <div class="action-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 9H9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="button-label">Statements</div> </button> </div> </div> </div> </div> <div class="floating-action-button hidden"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <script> // Display current day const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; const now = new Date(); const dayName = days[now.getDay()]; const monthName = months[now.getMonth()]; const dayNum = now.getDate(); document.getElementById('current-day').innerText = `${dayName}, ${monthName} ${dayNum}`; // Show elements with animation const hiddenElements = document.querySelectorAll('.hidden'); function showElements() { hiddenElements.forEach((el, index) => { setTimeout(() => { el.classList.add('visible'); }, 100 + (index * 100)); }); } // Add hover effect for transaction items const transactionItems = document.querySelectorAll('.transaction-item'); transactionItems.forEach(item => { item.addEventListener('mouseenter', () => { item.style.boxShadow = 'var(--shadow-sm)'; }); item.addEventListener('mouseleave', () => { item.style.boxShadow = 'none'; }); }); // Add hover effect for account cards const accountCards = document.querySelectorAll('.account-card'); accountCards.forEach(card => { card.addEventListener('mouseenter', () => { card.style.boxShadow = 'var(--shadow-sm)'; }); card.addEventListener('mouseleave', () => { card.style.boxShadow = 'none'; }); }); // Simulate loading setTimeout(showElements, 300); // Make balance card amount animate in const balanceAmount = document.querySelector('.balance-amount'); setTimeout(() => { balanceAmount.classList.add('visible'); }, 500); // Add animation to FAB on scroll const fab = document.querySelector('.floating-action-button'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { fab.classList.add('visible'); } else { fab.classList.remove('visible'); } }); // Add interaction to FAB fab.addEventListener('click', () => { const actionButtons = document.querySelectorAll('.action-button'); actionButtons.forEach(button => { button.style.transform = 'scale(1.05)'; setTimeout(() => { button.style.transform = 'none'; }, 300); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Product with Layered Box Shadows</title> <style> :root { --primary-color: #ff3e6c; --secondary-color: #3e64ff; --accent-color: #42b883; --dark-color: #2c3e50; --light-color: #f9f9f9; --shadow-base: rgba(0, 0, 0, 0.1); --shadow-highlight: rgba(255, 62, 108, 0.6); --shadow-accent: rgba(66, 184, 131, 0.5); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f5f5; background-image: radial-gradient(#e0e0e0 1px, transparent 1px); background-size: 20px 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 650px; margin: 0 auto; } .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 100%; position: relative; } .product-card { background: white; border-radius: 15px; overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; box-shadow: 0 10px 20px var(--shadow-base), 0 6px 6px var(--shadow-base); } .product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; box-shadow: 0 15px 35px var(--shadow-highlight), 0 5px 15px var(--shadow-base); opacity: 0; transition: opacity 0.3s ease-in-out; z-index: -1; } .product-card:hover { transform: translateY(-15px); } .product-card:hover::before { opacity: 1; } .product-image { height: 180px; width: 100%; background-size: cover; background-position: center; position: relative; transition: all 0.5s ease; overflow: hidden; } .product-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3)); } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.1); } .product-details { padding: 20px; position: relative; } .product-tag { position: absolute; top: -15px; right: 20px; background: var(--primary-color); color: white; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; box-shadow: 0 5px 15px rgba(255, 62, 108, 0.3), 0 3px 5px rgba(0, 0, 0, 0.1); transform: translateY(0); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover .product-tag { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255, 62, 108, 0.4), 0 5px 10px rgba(0, 0, 0, 0.1); } .product-name { font-size: 16px; font-weight: 700; color: var(--dark-color); margin-bottom: 10px; line-height: 1.3; } .product-price { display: flex; align-items: center; margin-bottom: 15px; } .current-price { font-size: 18px; font-weight: 700; color: var(--dark-color); } .original-price { font-size: 14px; color: #999; text-decoration: line-through; margin-left: 10px; } .discount { margin-left: 10px; background: var(--accent-color); color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; } .product-description { font-size: 14px; color: #666; margin-bottom: 15px; line-height: 1.5; } .product-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } .rating { display: flex; align-items: center; } .stars { color: #ffc107; font-size: 14px; margin-right: 5px; } .review-count { font-size: 12px; color: #666; } .add-to-cart { background: var(--secondary-color); color: white; border: none; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(62, 100, 255, 0.3); display: flex; align-items: center; } .add-to-cart i { margin-right: 5px; } .add-to-cart:hover { background: #2c50cc; box-shadow: 0 6px 12px rgba(62, 100, 255, 0.4); transform: translateY(-2px); } .product-card.featured { grid-column: span 2; display: flex; flex-direction: row; height: 250px; } .product-card.featured .product-image { width: 50%; height: 100%; } .product-card.featured .product-details { width: 50%; padding: 25px; display: flex; flex-direction: column; justify-content: center; } .product-card.featured .product-name { font-size: 20px; margin-bottom: 15px; } .product-card.featured .product-price { margin-bottom: 20px; } .product-card.featured .current-price { font-size: 22px; } .product-card.featured .product-description { margin-bottom: 20px; } .seasonal-badge { position: absolute; top: 15px; left: 15px; background: var(--secondary-color); color: white; padding: 5px 10px; border-radius: 15px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(62, 100, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 1; transform: translateY(0); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover .seasonal-badge { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 6px 15px rgba(62, 100, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.1); } .fast-delivery { font-size: 12px; color: var(--accent-color); display: flex; align-items: center; margin-top: 5px; } .fast-delivery i { margin-right: 5px; font-size: 14px; } .shimmer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-20deg); animation: shimmer 3s infinite; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .shimmer { opacity: 1; } @keyframes shimmer { 0% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(150%) skewX(-20deg); } } .limited-offer { position: absolute; bottom: 15px; right: 15px; background: rgba(255, 62, 108, 0.9); color: white; padding: 4px 10px; border-radius: 15px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 2px 10px rgba(255, 62, 108, 0.4); z-index: 1; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 2px 10px rgba(255, 62, 108, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 5px 15px rgba(255, 62, 108, 0.6); } 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(255, 62, 108, 0.4); } } .header { text-align: center; margin-bottom: 30px; } .header h1 { font-size: 28px; color: var(--dark-color); margin-bottom: 10px; font-weight: 700; } .header p { font-size: 16px; color: #666; max-width: 500px; margin: 0 auto; } @media (max-width: 650px) { .products-grid { grid-template-columns: 1fr; } .product-card.featured { grid-column: span 1; flex-direction: column; height: auto; } .product-card.featured .product-image, .product-card.featured .product-details { width: 100%; } .product-card.featured .product-image { height: 180px; } .header h1 { font-size: 24px; } .header p { font-size: 14px; } } /* Darkened background effect when product is selected */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 10; } .overlay.active { opacity: 1; pointer-events: all; } /* Quick view modal */ .quick-view { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 90%; max-width: 600px; background: white; border-radius: 15px; z-index: 11; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 15px 20px var(--shadow-highlight), 0 10px 10px var(--shadow-accent); } .quick-view.active { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .quick-view-content { display: flex; flex-direction: column; height: 100%; } .quick-view-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; } .quick-view-title { font-size: 18px; font-weight: 700; color: var(--dark-color); } .close-quick-view { background: none; border: none; font-size: 20px; color: #666; cursor: pointer; transition: color 0.2s ease; } .close-quick-view:hover { color: var(--primary-color); } .quick-view-body { padding: 20px; display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; } .quick-view-image { width: 100%; height: 300px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .quick-view-image img { width: 100%; height: 100%; object-fit: cover; } .quick-view-details h2 { font-size: 22px; font-weight: 700; color: var(--dark-color); margin-bottom: 15px; } .quick-view-price { display: flex; align-items: center; margin-bottom: 20px; } .quick-view-current-price { font-size: 24px; font-weight: 700; color: var(--dark-color); } .quick-view-original-price { font-size: 16px; color: #999; text-decoration: line-through; margin-left: 10px; } .quick-view-discount { margin-left: 10px; background: var(--accent-color); color: white; padding: 3px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; } .quick-view-description { font-size: 15px; color: #666; line-height: 1.6; margin-bottom: 20px; } .quick-view-features { margin-bottom: 20px; } .quick-view-features h3 { font-size: 16px; font-weight: 600; color: var(--dark-color); margin-bottom: 10px; } .features-list { list-style-type: none; } .features-list li { display: flex; align-items: center; font-size: 14px; color: #666; margin-bottom: 8px; } .features-list li:before { content: "✓"; color: var(--accent-color); font-weight: bold; margin-right: 10px; } .quick-view-actions { display: flex; margin-top: 20px; } .quantity-selector { display: flex; align-items: center; margin-right: 20px; } .quantity-btn { width: 30px; height: 30px; background: #f1f1f1; border: none; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; cursor: pointer; transition: all 0.2s ease; } .quantity-btn:hover { background: #e0e0e0; } .quantity-display { font-size: 16px; font-weight: 600; margin: 0 15px; } .quick-view-add-to-cart { background: var(--primary-color); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(255, 62, 108, 0.3); flex-grow: 1; } .quick-view-add-to-cart:hover { background: #e63561; box-shadow: 0 6px 15px rgba(255, 62, 108, 0.4); transform: translateY(-2px); } @media (max-width: 650px) { .quick-view { width: 95%; } .quick-view-image { height: 200px; } .quick-view-details h2 { font-size: 18px; } .quick-view-current-price { font-size: 20px; } .quick-view-actions { flex-direction: column; } .quantity-selector { margin-right: 0; margin-bottom: 15px; justify-content: center; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Featured Collection</h1> <p>Discover our premium products with a striking visual presence</p> </div> <div class="products-grid"> <div class="product-card featured" data-id="1"> <div class="shimmer"></div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1600086827875-a63b01f1335c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Premium Noise-Canceling Headphones"> <div class="seasonal-badge">NEW ARRIVAL</div> <div class="limited-offer">ENDS IN 48HRS</div> </div> <div class="product-details"> <div class="product-tag">FEATURED</div> <h2 class="product-name">SoundSphere Pro Noise-Canceling Headphones</h2> <div class="product-price"> <span class="current-price">$199.99</span> <span class="original-price">$249.99</span> <span class="discount">20% OFF</span> </div> <p class="product-description">Experience immersive audio with our premium wireless headphones featuring adaptive noise cancellation and 30-hour battery life.</p> <div class="fast-delivery"> <i>⚡</i> Fast delivery: 1-2 business days </div> <div class="product-meta"> <div class="rating"> <div class="stars">★★★★★</div> <div class="review-count">(128)</div> </div> <button class="add-to-cart"> <i>🛒</i> Add to Cart </button> </div> </div> </div> <div class="product-card" data-id="2"> <div class="shimmer"></div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Smart Watch"> <div class="seasonal-badge">BEST SELLER</div> </div> <div class="product-details"> <div class="product-tag">TRENDING</div> <h2 class="product-name">PulseTrack Smart Watch Series 5</h2> <div class="product-price"> <span class="current-price">$129.99</span> <span class="original-price">$159.99</span> <span class="discount">19% OFF</span> </div> <p class="product-description">Track your fitness goals with heart rate monitoring, sleep analysis and 14-day battery life.</p> <div class="product-meta"> <div class="rating"> <div class="stars">★★★★☆</div> <div class="review-count">(94)</div> </div> <button class="add-to-cart"> <i>🛒</i> Add to Cart </button> </div> </div> </div> <div class="product-card" data-id="3"> <div class="shimmer"></div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Running Shoes"> </div> <div class="product-details"> <div class="product-tag">HOT DEAL</div> <h2 class="product-name">AeroFlex Ultra Running Shoes</h2> <div class="product-price"> <span class="current-price">$89.99</span> <span class="original-price">$119.99</span> <span class="discount">25% OFF</span> </div> <p class="product-description">Lightweight, breathable mesh with shock-absorbing soles for maximum comfort on long runs.</p> <div class="product-meta"> <div class="rating"> <div class="stars">★★★★★</div> <div class="review-count">(156)</div> </div> <button class="add-to-cart"> <i>🛒</i> Add to Cart </button> </div> </div> </div> <div class="product-card" data-id="4"> <div class="shimmer"></div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Backpack"> <div class="limited-offer">ONLY 5 LEFT</div> </div> <div class="product-details"> <div class="product-tag">LIMITED</div> <h2 class="product-name">TrekSafe Anti-Theft Backpack</h2> <div class="product-price"> <span class="current-price">$79.99</span> <span class="original-price">$99.99</span> <span class="discount">20% OFF</span> </div> <p class="product-description">Water-resistant backpack with hidden pockets, USB charging port and anti-theft design.</p> <div class="fast-delivery"> <i>⚡</i> Next day delivery available </div> <div class="product-meta"> <div class="rating"> <div class="stars">★★★★☆</div> <div class="review-count">(72)</div> </div> <button class="add-to-cart"> <i>🛒</i> Add to Cart </button> </div> </div> </div> </div> </div> <!-- Quick View Modal --> <div class="overlay"></div> <div class="quick-view"> <div class="quick-view-content"> <div class="quick-view-header"> <div class="quick-view-title">Product Quick View</div> <button class="close-quick-view">×</button> </div> <div class="quick-view-body"> <!-- Content will be dynamically populated --> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const productCards = document.querySelectorAll('.product-card'); const overlay = document.querySelector('.overlay'); const quickView = document.querySelector('.quick-view'); const quickViewBody = document.querySelector('.quick-view-body'); const closeQuickViewBtn = document.querySelector('.close-quick-view'); // Product data (simulating backend data) const products = { 1: { name: "SoundSphere Pro Noise-Canceling Headphones", currentPrice: "$199.99", originalPrice: "$249.99", discount: "20% OFF", description: "Experience immersive audio with our premium wireless headphones featuring adaptive noise cancellation and 30-hour battery life. The SoundSphere Pro combines cutting-edge technology with superior comfort for the ultimate listening experience.", image: "https://images.unsplash.com/photo-1600086827875-a63b01f1335c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", rating: "★★★★★", reviews: 128, features: [ "Active noise cancellation with adaptive technology", "30-hour battery life with quick charge (10min = 5hrs)", "Premium memory foam ear cushions", "Voice assistant compatibility", "Touch controls for seamless operation", "Bluetooth 5.2 with multi-device connectivity" ] }, 2: { name: "PulseTrack Smart Watch Series 5", currentPrice: "$129.99", originalPrice: "$159.99", discount: "19% OFF", description: "Track your fitness goals with heart rate monitoring, sleep analysis and 14-day battery life. The PulseTrack Series 5 features a vibrant AMOLED display and advanced health metrics to keep you at your best.", image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", rating: "★★★★☆", reviews: 94, features: [ "Continuous heart rate monitoring", "Advanced sleep tracking with REM analysis", "14-day battery life on normal use", "5ATM water resistance for swimming", "Built-in GPS for outdoor activities", "Over 100 workout modes with automatic detection" ] }, 3: { name: "AeroFlex Ultra Running Shoes", currentPrice: "$89.99", originalPrice: "$119.99", discount: "25% OFF", description: "Lightweight, breathable mesh with shock-absorbing soles for maximum comfort on long runs. Engineered for runners who demand performance and comfort, the AeroFlex Ultra features our proprietary cushioning technology.", image: "https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", rating: "★★★★★", reviews: 156, features: [ "Ultra-lightweight construction (8.5oz)", "Responsive cushioning for energy return", "Breathable mesh upper adapts to foot shape", "Reinforced heel counter for stability", "Durable rubber outsole with traction pattern", "Reflective elements for nighttime visibility" ] }, 4: { name: "TrekSafe Anti-Theft Backpack", currentPrice: "$79.99", originalPrice: "$99.99", discount: "20% OFF", description: "Water-resistant backpack with hidden pockets, USB charging port and anti-theft design. Perfect for commuters, travelers, and students who want security without sacrificing style.", image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", rating: "★★★★☆", reviews: 72, features: [ "Hidden anti-theft rear pocket for valuables", "Water-resistant fabric protects from light rain", "Integrated USB charging port for on-the-go power", "Padded laptop compartment fits up to 15.6\"", "Ergonomic design with breathable back padding", "RFID blocking pocket protects credit cards" ] } }; // Open quick view when clicking on a product card productCards.forEach(card => { card.addEventListener('click', function() { const productId = this.getAttribute('data-id'); const product = products[productId]; // Populate quick view with product data quickViewBody.innerHTML = ` <div class="quick-view-image"> <img src="${product.image}" alt="${product.name}"> </div> <div class="quick-view-details"> <h2>${product.name}</h2> <div class="quick-view-price"> <span class="quick-view-current-price">${product.currentPrice}</span> <span class="quick-view-original-price">${product.originalPrice}</span> <span class="quick-view-discount">${product.discount}</span> </div> <p class="quick-view-description">${product.description}</p> <div class="quick-view-features"> <h3>Key Features</h3> <ul class="features-list"> ${product.features.map(feature => `<li>${feature}</li>`).join('')} </ul> </div> <div class="rating"> <div class="stars">${product.rating}</div> <div class="review-count">(${product.reviews} reviews)</div> </div> <div class="quick-view-actions"> <div class="quantity-selector"> <button class="quantity-btn decrease">-</button> <span class="quantity-display">1</span> <button class="quantity-btn increase">+</button> </div> <button class="quick-view-add-to-cart">Add to Cart</button> </div> </div> `; // Show overlay and quick view overlay.classList.add('active'); quickView.classList.add('active'); // Setup quantity buttons const decreaseBtn = quickView.querySelector('.decrease'); const increaseBtn = quickView.querySelector('.increase'); const quantityDisplay = quickView.querySelector('.quantity-display'); let quantity = 1; decreaseBtn.addEventListener('click', function(e) { e.stopPropagation(); if (quantity > 1) { quantity--; quantityDisplay.textContent = quantity; } }); increaseBtn.addEventListener('click', function(e) { e.stopPropagation(); quantity++; quantityDisplay.textContent = quantity; }); }); }); // Close quick view when clicking on close button or overlay closeQuickViewBtn.addEventListener('click', closeQuickView); overlay.addEventListener('click', closeQuickView); function closeQuickView() { overlay.classList.remove('active'); quickView.classList.remove('active'); } // Prevent closing when clicking inside the quick view quickView.addEventListener('click', function(e) { e.stopPropagation(); }); // Add to Cart button click event (for both card and quick view) document.addEventListener('click', function(e) { if (e.target.classList.contains('add-to-cart') || e.target.classList.contains('quick-view-add-to-cart')) { e.stopPropagation(); // Add animation to the button e.target.innerHTML = '<i>✓</i> Added to Cart'; e.target.style.background = 'var(--accent-color)'; // Reset after animation setTimeout(() => { if (e.target.classList.contains('add-to-cart')) { e.target.innerHTML = '<i>🛒</i> Add to Cart'; e.target.style.background = 'var(--secondary-color)'; } else { e.target.textContent = 'Add to Cart'; e.target.style.background = 'var(--primary-color)'; } }, 2000); } }); // Add dynamic shadow effect on mouse movement for each product card productCards.forEach(card => { card.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; // x position within the element const y = e.clientY - rect.top; // y position within the element // Calculate position as percentage const xPercent = (x / rect.width) * 100; const yPercent = (y / rect.height) * 100; // Generate shadow based on mouse position this.style.boxShadow = ` ${(xPercent - 50) / 5}px ${(yPercent - 50) / 5}px 20px var(--shadow-base), ${(xPercent - 50) / 3}px ${(yPercent - 50) / 3}px 30px var(--shadow-highlight), 0 5px 15px var(--shadow-accent) `; }); card.addEventListener('mouseleave', function() { // Reset shadow when mouse leaves this.style.boxShadow = 'var(--shadow-base) 0px 10px 20px, var(--shadow-base) 0px 6px 6px'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Adrian Chen - Creative Portfolio</title> <style> :root { --primary: #0f172a; --secondary: #f8fafc; --accent: #3b82f6; --accent-dark: #1d4ed8; --shadow-color: rgba(15, 23, 42, 0.3); --shadow-highlight: rgba(59, 130, 246, 0.4); --transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--secondary); color: var(--primary); line-height: 1.6; overflow-x: hidden; min-height: 100vh; position: relative; } .container { max-width: 700px; margin: 0 auto; padding: 1.5rem; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--secondary); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--secondary); } .container::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 6px; } .header { padding: 1.5rem 0; position: relative; } .header::before { content: ""; position: absolute; width: 100px; height: 100px; background: var(--accent); opacity: 0.1; border-radius: 50%; top: -20px; left: -50px; z-index: -1; filter: blur(40px); } .intro { max-width: 90%; } h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; background: linear-gradient(135deg, var(--primary) 60%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } p { margin-bottom: 1.5rem; font-size: 1rem; } .projects-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; } .project-card { position: relative; background-color: white; border-radius: 12px; overflow: hidden; transition: transform var(--transition); transform-origin: center; transform: perspective(800px) rotateX(0) rotateY(0); cursor: pointer; box-shadow: 16px 16px 32px var(--shadow-color), -8px -8px 16px rgba(255, 255, 255, 0.8); } .project-card:hover { transform: perspective(800px) rotateX(2deg) rotateY(-2deg) scale(1.02); box-shadow: 24px 24px 48px var(--shadow-color), -8px -8px 16px rgba(255, 255, 255, 0.8), 0 0 0 2px var(--shadow-highlight); } .project-image { width: 100%; height: 220px; object-fit: cover; transition: transform 0.6s ease; } .project-card:hover .project-image { transform: scale(1.05); } .project-details { padding: 1.5rem; } .project-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--primary); } .project-description { font-size: 0.95rem; margin-bottom: 1rem; color: rgba(15, 23, 42, 0.8); } .tag-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .tag { font-size: 0.75rem; padding: 0.25rem 0.75rem; background-color: rgba(59, 130, 246, 0.1); border-radius: 100px; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; } .view-project { display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: color var(--transition); position: relative; } .view-project::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--accent); transition: width var(--transition); } .view-project:hover { color: var(--accent-dark); } .view-project:hover::after { width: 100%; } .view-project svg { margin-left: 0.25rem; transition: transform var(--transition); } .view-project:hover svg { transform: translateX(4px); } .nav-dots { display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: #cbd5e1; cursor: pointer; transition: transform var(--transition), background-color var(--transition); } .dot.active { background-color: var(--accent); transform: scale(1.5); } .cursor { width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: width 0.25s, height 0.25s; display: none; } .cursor-dot { width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: width 0.25s, height 0.25s; display: none; } @media (min-width: 640px) { .cursor, .cursor-dot { display: block; } .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { h1 { font-size: 2rem; } .project-image { height: 180px; } .project-details { padding: 1.25rem; } .project-title { font-size: 1.25rem; } } /* Modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal.active { opacity: 1; pointer-events: all; } .modal-content { background-color: white; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; border-radius: 12px; padding: 2rem; transform: scale(0.9); opacity: 0; transition: transform var(--transition), opacity var(--transition); position: relative; } .modal.active .modal-content { transform: scale(1); opacity: 1; } .close-modal { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--primary); transition: background-color var(--transition); } .close-modal:hover { background-color: rgba(15, 23, 42, 0.05); } .modal-image { width: 100%; border-radius: 8px; margin-bottom: 1.5rem; } .modal-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; } .modal-description { margin-bottom: 1.5rem; } /* Loader Animation */ .loader { width: 100%; height: 4px; background-color: rgba(59, 130, 246, 0.1); position: fixed; top: 0; left: 0; z-index: 1001; overflow: hidden; } .loader::after { content: ""; display: block; width: 25%; height: 100%; background-color: var(--accent); position: absolute; top: 0; left: -25%; animation: loading 1.5s infinite ease-in-out; } @keyframes loading { 0% { left: -25%; } 50% { left: 100%; } 100% { left: 100%; } } /* Pattern Background */ .pattern { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: 0.03; background-image: radial-gradient(var(--primary) 2px, transparent 2px); background-size: 40px 40px; pointer-events: none; } </style> </head> <body> <div class="pattern"></div> <div class="cursor"></div> <div class="cursor-dot"></div> <div class="loader"></div> <div class="container"> <div class="header"> <div class="intro"> <h1>Adrian Chen</h1> <p>I craft digital experiences that blend striking visuals with thoughtful interaction. My work spans UI/UX design, front-end development, and digital art—each project representing a unique intersection of technology and creativity.</p> </div> </div> <div class="projects-grid"> <div class="project-card" data-project="1"> <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Neomorphic Banking App" class="project-image"> <div class="project-details"> <h3 class="project-title">Neomorphic Banking App</h3> <div class="tag-container"> <span class="tag">UI/UX</span> <span class="tag">Neomorphism</span> <span class="tag">React Native</span> </div> <p class="project-description">Reimagined banking interactions through tactile shadows and depth, creating a tangible digital experience.</p> <a href="#" class="view-project"> View Project <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33331L12.6667 7.99998L8 12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> <div class="project-card" data-project="2"> <img src="https://images.unsplash.com/photo-1618788372246-79faff0c3742?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Contour Design System" class="project-image"> <div class="project-details"> <h3 class="project-title">Contour Design System</h3> <div class="tag-container"> <span class="tag">Design System</span> <span class="tag">Depth</span> <span class="tag">Web Components</span> </div> <p class="project-description">A component library that leverages shadows to create distinctive elevation hierarchies without losing accessibility.</p> <a href="#" class="view-project"> View Project <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33331L12.6667 7.99998L8 12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> <div class="project-card" data-project="3"> <img src="https://images.unsplash.com/photo-1643310067498-76b0774d1ce8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Layered 3D Portfolio" class="project-image"> <div class="project-details"> <h3 class="project-title">Layered 3D Portfolio</h3> <div class="tag-container"> <span class="tag">ThreeJS</span> <span class="tag">WebGL</span> <span class="tag">3D Shadows</span> </div> <p class="project-description">Exploring spatial depth through WebGL, this experimental portfolio creates a digital space that feels physically explorable.</p> <a href="#" class="view-project"> View Project <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33331L12.6667 7.99998L8 12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> <div class="project-card" data-project="4"> <img src="https://images.unsplash.com/photo-1538935732373-f7a495fea3f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1159&q=80" alt="Depth Map Generator" class="project-image"> <div class="project-details"> <h3 class="project-title">Depth Map Generator</h3> <div class="tag-container"> <span class="tag">JavaScript</span> <span class="tag">Canvas API</span> <span class="tag">Shadow Algorithms</span> </div> <p class="project-description">An open-source tool that converts 2D images into depth maps for creating realistic shadow effects in web projects.</p> <a href="#" class="view-project"> View Project <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33331L12.6667 7.99998L8 12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> </div> <div class="nav-dots"> <div class="dot active"></div> <div class="dot"></div> </div> </div> <div class="modal" id="projectModal"> <div class="modal-content"> <button class="close-modal">×</button> <img src="" alt="" class="modal-image"> <h2 class="modal-title"></h2> <div class="tag-container modal-tags"></div> <p class="modal-description"></p> </div> </div> <script> // Project data const projects = { "1": { title: "Neomorphic Banking App", description: "This banking app represents a significant departure from flat design, using calculated shadow angles to create a tactile, three-dimensional experience. Each interaction was carefully crafted to provide subtle depth cues through precise shadow dynamics.\n\nThe challenge was creating a distinct visual hierarchy that maintained WCAG AA accessibility standards while delivering a sense of physicality. Shadow transitions are synchronized with interaction states to reinforce the feeling that users are manipulating tangible objects.", image: "https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80", tags: ["UI/UX", "Neomorphism", "React Native"] }, "2": { title: "Contour Design System", description: "Contour is a comprehensive design system built specifically to leverage shadow as a primary design element. The system includes carefully calibrated shadow values that work across light and dark modes, with dynamically adjusting shadow characteristics based on component state and importance.\n\nThe key innovation is the shadow algorithm that calculates optimal contrast ratios automatically based on background color, ensuring that shadows remain visually effective without compromising legibility or accessibility.", image: "https://images.unsplash.com/photo-1618788372246-79faff0c3742?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80", tags: ["Design System", "Depth", "Web Components"] }, "3": { title: "Layered 3D Portfolio", description: "This experimental portfolio website uses WebGL to create a parallax depth effect with real-time shadow casting. As visitors navigate through projects, they experience a sense of moving through a three-dimensional space where shadows respond dynamically to virtual light sources.\n\nThe challenge was optimizing performance while maintaining realistic shadow rendering. The solution involved custom shaders that approximate realistic shadows without requiring full raytracing, allowing the experience to work smoothly even on mobile devices.", image: "https://images.unsplash.com/photo-1643310067498-76b0774d1ce8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80", tags: ["ThreeJS", "WebGL", "3D Shadows"] }, "4": { title: "Depth Map Generator", description: "This tool allows designers to convert standard 2D images into depth maps that can be used to create realistic shadow effects. By analyzing pixel data and using machine learning algorithms, it generates realistic estimates of depth information.\n\nThe generated maps can be exported and used with CSS or WebGL to create dynamic shadows that respond convincingly to cursor position or scroll effects. The project includes a gallery of ready-to-use depth maps and extensive documentation for implementing shadow effects.", image: "https://images.unsplash.com/photo-1538935732373-f7a495fea3f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1159&q=80", tags: ["JavaScript", "Canvas API", "Shadow Algorithms"] } }; // Custom cursor const cursor = document.querySelector('.cursor'); const cursorDot = document.querySelector('.cursor-dot'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursorDot.style.left = e.clientX + 'px'; cursorDot.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', () => { cursor.style.width = '30px'; cursor.style.height = '30px'; cursorDot.style.width = '6px'; cursorDot.style.height = '6px'; }); document.addEventListener('mouseup', () => { cursor.style.width = '40px'; cursor.style.height = '40px'; cursorDot.style.width = '8px'; cursorDot.style.height = '8px'; }); // Modal functionality const modal = document.getElementById('projectModal'); const modalImage = modal.querySelector('.modal-image'); const modalTitle = modal.querySelector('.modal-title'); const modalDescription = modal.querySelector('.modal-description'); const modalTags = modal.querySelector('.modal-tags'); const closeModal = modal.querySelector('.close-modal'); const projectCards = document.querySelectorAll('.project-card'); projectCards.forEach(card => { card.addEventListener('click', () => { const projectId = card.getAttribute('data-project'); const project = projects[projectId]; modalImage.src = project.image; modalImage.alt = project.title; modalTitle.textContent = project.title; modalDescription.textContent = project.description; modalTags.innerHTML = ''; project.tags.forEach(tag => { const tagElement = document.createElement('span'); tagElement.className = 'tag'; tagElement.textContent = tag; modalTags.appendChild(tagElement); }); modal.classList.add('active'); document.body.style.overflow = 'hidden'; }); }); closeModal.addEventListener('click', () => { modal.classList.remove('active'); document.body.style.overflow = ''; }); modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('active'); document.body.style.overflow = ''; } }); // Navigation dots const dots = document.querySelectorAll('.dot'); const projectsGrid = document.querySelector('.projects-grid'); let currentPage = 0; dots.forEach((dot, index) => { dot.addEventListener('click', () => { dots.forEach(d => d.classList.remove('active')); dot.classList.add('active'); currentPage = index; updateProjectsVisibility(); }); }); function updateProjectsVisibility() { const mediaQuery = window.matchMedia('(min-width: 640px)'); const isMobile = !mediaQuery.matches; const projectsPerPage = isMobile ? 2 : 4; const start = currentPage * projectsPerPage; const end = start + projectsPerPage; projectCards.forEach((card, index) => { if (index >= start && index < end) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); } // Initialize projects visibility updateProjectsVisibility(); // Handle window resize window.addEventListener('resize', updateProjectsVisibility); // Project card hover effect projectCards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; // x position within the element const y = e.clientY - rect.top; // y position within the element // Calculate rotation based on mouse position const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = (y - centerY) / 20; const rotateY = (centerX - x) / 20; card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`; }); card.addEventListener('mouseleave', () => { card.style.transform = 'perspective(800px) rotateX(0) rotateY(0)'; }); }); // Simulate loader const loader = document.querySelector('.loader'); window.addEventListener('load', () => { setTimeout(() => { loader.style.display = 'none'; }, 1500); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Daily Pulse - News Header</title> <style> :root { --primary: #2a4b8d; --secondary: #f7f7f7; --accent: #e74c3c; --text: #333333; --light-text: #777777; --shadow: rgba(0, 0, 0, 0.08); --header-height: 75px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--secondary); color: var(--text); max-width: 700px; margin: 0 auto; overflow-x: hidden; } .header-container { position: relative; width: 100%; background-color: white; height: var(--header-height); box-shadow: 0 6px 20px var(--shadow); border-radius: 0 0 8px 8px; transition: var(--transition); z-index: 100; } .header-container.scroll { box-shadow: 0 10px 30px var(--shadow); transform: translateY(-5px); } .header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 100%; max-width: 700px; margin: 0 auto; } .logo { display: flex; align-items: center; text-decoration: none; } .logo-icon { width: 40px; height: 40px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; margin-right: 10px; transition: var(--transition); overflow: hidden; position: relative; } .logo-icon::after { content: ''; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.2) 30%); transform: scale(0); opacity: 0; transition: var(--transition); } .logo:hover .logo-icon::after { transform: scale(3); opacity: 1; } .logo-text { font-size: 22px; font-weight: 600; color: var(--primary); } .logo-text span { color: var(--accent); } .nav { display: flex; gap: 25px; } .nav-item { color: var(--text); text-decoration: none; font-weight: 500; font-size: 16px; position: relative; transition: var(--transition); } .nav-item::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } .nav-item:hover { color: var(--accent); } .nav-item:hover::after { width: 100%; } .nav-item.active { color: var(--accent); } .nav-item.active::after { width: 100%; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; } .hamburger { width: 24px; height: 20px; position: relative; } .hamburger span { position: absolute; width: 100%; height: 2px; background-color: var(--text); transition: var(--transition); left: 0; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .hamburger span:nth-child(3) { bottom: 0; } .menu-toggle.active .hamburger span:nth-child(1) { transform: rotate(45deg); top: 9px; } .menu-toggle.active .hamburger span:nth-child(2) { opacity: 0; } .menu-toggle.active .hamburger span:nth-child(3) { transform: rotate(-45deg); bottom: 9px; } .breaking-news { padding: 10px 20px; background-color: var(--secondary); margin-top: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); } .breaking-headline { display: flex; align-items: center; gap: 10px; } .breaking-label { background-color: var(--accent); color: white; padding: 4px 10px; border-radius: 4px; font-size: 14px; font-weight: bold; text-transform: uppercase; display: inline-flex; align-items: center; animation: pulse 2s infinite; } .breaking-label::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: white; border-radius: 50%; margin-right: 5px; animation: blink 1.5s infinite; } .breaking-marquee { white-space: nowrap; overflow: hidden; font-weight: 500; } .breaking-content { display: inline-block; animation: marquee 25s linear infinite; } .content { margin-top: 30px; padding: 0 20px; } .content-title { font-size: 28px; margin-bottom: 10px; color: var(--primary); } .content-text { line-height: 1.6; color: var(--light-text); } .weather { display: flex; align-items: center; gap: 10px; margin-left: 15px; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; font-size: 14px; } .weather-icon { font-size: 18px; color: #f1c40f; } .search-toggle { background: none; border: none; cursor: pointer; color: var(--primary); font-size: 18px; transition: var(--transition); } .search-toggle:hover { color: var(--accent); transform: rotate(90deg); } .search-container { position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: white; padding: 15px 20px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: 0 6px 20px var(--shadow); display: flex; z-index: 99; } .search-container.active { transform: translateY(0); opacity: 1; visibility: visible; } .search-input { flex: 1; padding: 10px 15px; border: 1px solid #e1e1e1; border-radius: 4px 0 0 4px; font-size: 16px; outline: none; transition: var(--transition); } .search-input:focus { border-color: var(--primary); } .search-button { padding: 10px 15px; background-color: var(--primary); color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; transition: var(--transition); } .search-button:hover { background-color: var(--accent); } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } 70% { box-shadow: 0 0 0 5px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } } @media (max-width: 700px) { .header { padding: 0 15px; } .nav { position: absolute; top: var(--header-height); left: 0; width: 100%; flex-direction: column; gap: 0; background-color: white; box-shadow: 0 6px 20px var(--shadow); transform: translateY(-150%); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 99; } .nav.active { transform: translateY(0); opacity: 1; visibility: visible; } .nav-item { padding: 15px 20px; border-bottom: 1px solid #eee; width: 100%; display: block; } .nav-item::after { display: none; } .menu-toggle { display: block; } .weather { display: none; } .logo-text { font-size: 18px; } .content-title { font-size: 24px; } .breaking-news { margin-top: 15px; } } </style> </head> <body> <div class="header-container"> <header class="header"> <a href="#" class="logo"> <div class="logo-icon">DP</div> <div class="logo-text">Daily <span>Pulse</span></div> </a> <nav class="nav"> <a href="#" class="nav-item active">Top Stories</a> <a href="#" class="nav-item">Politics</a> <a href="#" class="nav-item">Business</a> <a href="#" class="nav-item">Tech</a> <a href="#" class="nav-item">Culture</a> </nav> <div class="actions"> <div class="weather"> <div class="weather-icon">☀️</div> <div class="weather-text">72°F</div> </div> <button class="search-toggle">🔍</button> <button class="menu-toggle"> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </button> </div> </header> <div class="search-container"> <input type="text" class="search-input" placeholder="Search for news..."> <button class="search-button">Search</button> </div> </div> <div class="breaking-news"> <div class="breaking-headline"> <div class="breaking-label">Breaking</div> <div class="breaking-marquee"> <div class="breaking-content"> Global tech leaders announce coalition to develop AI ethics standards • Stock markets reach record highs following central bank announcement • Scientists discover promising treatment for rare neurological conditions • New climate report warns of accelerating sea level rise • International summit on renewable energy concludes with major funding agreements </div> </div> </div> </div> <section class="content"> <h1 class="content-title">Today's Top Headlines</h1> <p class="content-text">Navigate through our curated news sections with our sleek floating header design. The soft shadows create a visual hierarchy that helps you quickly find the content most relevant to your interests. Stay informed with our breaking news ticker and personalized recommendations.</p> </section> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const nav = document.querySelector('.nav'); const searchToggle = document.querySelector('.search-toggle'); const searchContainer = document.querySelector('.search-container'); const headerContainer = document.querySelector('.header-container'); // Toggle mobile menu menuToggle.addEventListener('click', function() { this.classList.toggle('active'); nav.classList.toggle('active'); // Close search if open searchContainer.classList.remove('active'); }); // Toggle search bar searchToggle.addEventListener('click', function() { searchContainer.classList.toggle('active'); // Close menu if open on mobile if (window.innerWidth <= 700) { menuToggle.classList.remove('active'); nav.classList.remove('active'); } }); // Add shadow effect on scroll window.addEventListener('scroll', function() { if (window.scrollY > 10) { headerContainer.classList.add('scroll'); } else { headerContainer.classList.remove('scroll'); } }); // Close navigation and search when clicking outside document.addEventListener('click', function(event) { if (!event.target.closest('.header') && !event.target.closest('.search-container')) { menuToggle.classList.remove('active'); nav.classList.remove('active'); searchContainer.classList.remove('active'); } }); // Prevent form submission const searchButton = document.querySelector('.search-button'); searchButton.addEventListener('click', function(e) { e.preventDefault(); const searchInput = document.querySelector('.search-input'); if (searchInput.value.trim() !== '') { // Visual feedback searchButton.textContent = 'Searching...'; setTimeout(() => { searchButton.textContent = 'Search'; searchInput.value = ''; searchContainer.classList.remove('active'); }, 800); } }); // Smooth hover effect on nav items const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('mouseenter', function() { const activeItem = document.querySelector('.nav-item.active'); if (activeItem && this !== activeItem) { activeItem.style.opacity = '0.7'; } }); item.addEventListener('mouseleave', function() { const activeItem = document.querySelector('.nav-item.active'); if (activeItem) { activeItem.style.opacity = '1'; } }); item.addEventListener('click', function(e) { e.preventDefault(); navItems.forEach(el => { el.classList.remove('active'); el.style.opacity = '1'; }); this.classList.add('active'); // Close mobile menu after selection if (window.innerWidth <= 700) { menuToggle.classList.remove('active'); nav.classList.remove('active'); } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>InsetPanel Admin Dashboard</title> <style> :root { --primary: #4a6fa8; --primary-light: #6b8aba; --secondary: #f4a261; --dark: #2f3e5b; --darker: #1d2940; --light: #f5f7fa; --gray: #e2e8f0; --gray-dark: #94a3b8; --success: #2dd4bf; --warning: #fcd34d; --danger: #ef4444; --shadow-inset: inset 2px 2px 5px rgba(0, 0, 0, 0.15), inset -2px -2px 5px rgba(255, 255, 255, 0.8); --shadow-inset-active: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -1px -1px 4px rgba(255, 255, 255, 0.6); --shadow-outset: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--dark); height: 100vh; display: flex; overflow: hidden; } .dashboard-container { display: flex; width: 100%; height: 100%; max-width: 700px; max-height: 700px; margin: auto; border-radius: 12px; overflow: hidden; background-color: var(--light); box-shadow: var(--shadow-outset); } .sidebar { width: 80px; background-color: var(--dark); color: white; padding: 20px 15px; display: flex; flex-direction: column; align-items: center; transition: var(--transition); z-index: 10; } .sidebar.expanded { width: 220px; align-items: flex-start; } .logo { font-weight: 700; font-size: 1.2rem; margin-bottom: 30px; color: white; display: flex; align-items: center; gap: 12px; cursor: pointer; width: 100%; } .logo .logo-icon { width: 30px; height: 30px; border-radius: 8px; background-color: var(--secondary); display: flex; align-items: center; justify-content: center; font-weight: 700; } .logo-text { display: none; opacity: 0; transition: var(--transition); } .sidebar.expanded .logo-text { display: block; opacity: 1; } .nav-item { display: flex; align-items: center; padding: 12px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; width: 100%; color: var(--gray); transition: var(--transition); } .nav-item:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-item.active { background-color: var(--primary); color: white; box-shadow: var(--shadow-inset-active); } .nav-item i { font-size: 1.2rem; min-width: 28px; } .nav-text { margin-left: 10px; display: none; opacity: 0; transition: var(--transition); white-space: nowrap; } .sidebar.expanded .nav-text { display: block; opacity: 1; } .main-content { flex: 1; overflow-y: auto; padding: 24px; background-color: var(--light); display: flex; flex-direction: column; gap: 20px; } .header { display: flex; justify-content: space-between; align-items: center; } .header-title h1 { font-size: 1.5rem; font-weight: 700; color: var(--darker); } .header-title p { color: var(--gray-dark); font-size: 0.875rem; margin-top: 4px; } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-light); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; box-shadow: var(--shadow-outset); } .user-info { display: none; } @media (min-width: 500px) { .user-info { display: block; } } .user-name { font-weight: 600; font-size: 0.875rem; } .user-role { font-size: 0.75rem; color: var(--gray-dark); } .metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 500px) { .metrics { grid-template-columns: repeat(3, 1fr); } } .metric-card { background-color: var(--light); padding: 16px; border-radius: 10px; box-shadow: var(--shadow-inset); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; } .metric-card:hover { transform: translateY(-2px); } .metric-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .metric-title { font-size: 0.75rem; color: var(--gray-dark); text-transform: uppercase; letter-spacing: 0.5px; } .metric-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .metric-icon.success { background-color: rgba(45, 212, 191, 0.15); color: var(--success); } .metric-icon.warning { background-color: rgba(252, 211, 77, 0.15); color: var(--warning); } .metric-icon.danger { background-color: rgba(239, 68, 68, 0.15); color: var(--danger); } .metric-value { font-size: 1.5rem; font-weight: 700; margin-bottom: 2px; } .metric-change { font-size: 0.75rem; display: flex; align-items: center; gap: 4px; } .metric-change.positive { color: var(--success); } .metric-change.negative { color: var(--danger); } .panel { background-color: var(--light); border-radius: 12px; box-shadow: var(--shadow-inset); padding: 20px; margin-bottom: 16px; overflow: hidden; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .panel-title { font-weight: 600; font-size: 1rem; color: var(--darker); } .panel-actions { display: flex; gap: 8px; } .panel-btn { background-color: var(--light); border: none; border-radius: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-inset); transition: var(--transition); color: var(--dark); } .panel-btn:hover { box-shadow: var(--shadow-inset-active); color: var(--primary); } .date-range { display: flex; gap: 10px; margin-bottom: 16px; } .date-btn { padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; background-color: var(--light); border: none; box-shadow: var(--shadow-inset); cursor: pointer; transition: var(--transition); color: var(--gray-dark); } .date-btn.active { box-shadow: var(--shadow-inset-active); color: var(--primary); font-weight: 600; } .chart-container { height: 200px; position: relative; } .chart-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 100%; padding-top: 20px; } .chart-bar { width: 8%; background-color: var(--primary-light); border-radius: 4px 4px 0 0; position: relative; cursor: pointer; transition: var(--transition); } .chart-bar:hover { background-color: var(--primary); transform: scaleY(1.02); } .chart-bar::after { content: attr(data-value); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: var(--gray-dark); opacity: 0; transition: var(--transition); } .chart-bar:hover::after { opacity: 1; } .task-list { display: flex; flex-direction: column; gap: 12px; } .task-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background-color: var(--light); box-shadow: var(--shadow-inset); transition: var(--transition); cursor: pointer; } .task-item:hover { transform: translateX(4px); box-shadow: var(--shadow-inset-active); } .task-checkbox { min-width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--gray-dark); cursor: pointer; transition: var(--transition); position: relative; } .task-checkbox.checked { background-color: var(--success); border-color: var(--success); } .task-checkbox.checked::after { content: '✓'; position: absolute; color: white; font-size: 0.7rem; top: 50%; left: 50%; transform: translate(-50%, -50%); } .task-content { flex: 1; } .task-title { font-size: 0.875rem; margin-bottom: 2px; } .task-item.completed .task-title { text-decoration: line-through; color: var(--gray-dark); } .task-meta { display: flex; gap: 8px; font-size: 0.75rem; color: var(--gray-dark); } .task-due { display: flex; align-items: center; gap: 4px; } .task-priority { padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; } .priority-high { background-color: rgba(239, 68, 68, 0.15); color: var(--danger); } .priority-medium { background-color: rgba(252, 211, 77, 0.15); color: var(--warning); } .toggle-menu { position: absolute; bottom: 20px; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: var(--primary); color: white; cursor: pointer; margin: 0 auto; left: 20px; z-index: 20; box-shadow: var(--shadow-outset); transition: var(--transition); } .toggle-menu:hover { background-color: var(--primary-light); } /* Pulse notification animation */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .notification-badge { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--danger); color: white; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; } /* Activity indicator animation */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .activity-indicator { width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; animation: blink 1.5s infinite; } .activity-indicator.online { background-color: var(--success); } .activity-indicator.offline { background-color: var(--gray-dark); } /* New task animation */ @keyframes slideIn { 0% { transform: translateX(-20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .task-item.new { animation: slideIn 0.3s ease-out; } /* Custom scrollbar */ .main-content::-webkit-scrollbar { width: 8px; } .main-content::-webkit-scrollbar-track { background: transparent; } .main-content::-webkit-scrollbar-thumb { background-color: var(--gray); border-radius: 4px; } .main-content::-webkit-scrollbar-thumb:hover { background-color: var(--gray-dark); } /* Add Task Button */ .add-task-btn { background-color: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); margin-top: 12px; box-shadow: var(--shadow-outset); } .add-task-btn:hover { background-color: var(--primary-light); } /* Task input form */ .task-form { display: none; padding: 12px; border-radius: 8px; background-color: var(--light); box-shadow: var(--shadow-inset); margin-top: 12px; } .task-form.active { display: block; animation: slideIn 0.3s ease-out; } .task-form input { width: 100%; padding: 8px 12px; border-radius: 6px; border: none; background-color: white; margin-bottom: 8px; box-shadow: var(--shadow-inset); } .task-form-actions { display: flex; justify-content: flex-end; gap: 8px; } .task-form-btn { padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.875rem; transition: var(--transition); } .task-form-btn.submit { background-color: var(--primary); color: white; } .task-form-btn.cancel { background-color: var(--gray); color: var(--dark); } .task-form-btn:hover { transform: translateY(-2px); } </style> </head> <body> <div class="dashboard-container"> <div class="sidebar"> <div class="logo"> <div class="logo-icon">IP</div> <span class="logo-text">InsetPanel</span> </div> <div class="nav-item active"> <i class="nav-icon">📊</i> <span class="nav-text">Dashboard</span> </div> <div class="nav-item"> <i class="nav-icon">📋</i> <span class="nav-text">Projects</span> </div> <div class="nav-item"> <i class="nav-icon">📅</i> <span class="nav-text">Calendar</span> </div> <div class="nav-item"> <i class="nav-icon">📈</i> <span class="nav-text">Analytics</span> </div> <div class="nav-item"> <i class="nav-icon">📩</i> <span class="nav-text">Messages</span> <div class="notification-badge">3</div> </div> <div class="nav-item"> <i class="nav-icon">⚙️</i> <span class="nav-text">Settings</span> </div> </div> <div class="main-content"> <div class="header"> <div class="header-title"> <h1>Control Center</h1> <p>Wednesday, August 24, 2023</p> </div> <div class="user-profile"> <div class="user-info"> <div class="user-name">Alex Morgan</div> <div class="user-role">Product Manager <span class="activity-indicator online"></span></div> </div> <div class="user-avatar">AM</div> </div> </div> <div class="metrics"> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Active Users</div> <div class="metric-icon success">👤</div> </div> <div class="metric-value">1,482</div> <div class="metric-change positive">↑ 12.4% from last week</div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Avg. Response</div> <div class="metric-icon warning">⏱️</div> </div> <div class="metric-value">3.2s</div> <div class="metric-change negative">↓ 0.5s slower than goal</div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Completion Rate</div> <div class="metric-icon success">✓</div> </div> <div class="metric-value">94.8%</div> <div class="metric-change positive">↑ 2.3% from last month</div> </div> </div> <div class="panel"> <div class="panel-header"> <div class="panel-title">System Performance</div> <div class="panel-actions"> <button class="panel-btn">↻</button> <button class="panel-btn">⋮</button> </div> </div> <div class="date-range"> <button class="date-btn">Day</button> <button class="date-btn active">Week</button> <button class="date-btn">Month</button> <button class="date-btn">Quarter</button> </div> <div class="chart-container"> <div class="chart-bars"> <div class="chart-bar" style="height: 65%;" data-value="65%"></div> <div class="chart-bar" style="height: 80%;" data-value="80%"></div> <div class="chart-bar" style="height: 45%;" data-value="45%"></div> <div class="chart-bar" style="height: 75%;" data-value="75%"></div> <div class="chart-bar" style="height: 90%;" data-value="90%"></div> <div class="chart-bar" style="height: 70%;" data-value="70%"></div> <div class="chart-bar" style="height: 85%;" data-value="85%"></div> </div> </div> </div> <div class="panel"> <div class="panel-header"> <div class="panel-title">Active Tasks</div> <div class="panel-actions"> <button class="panel-btn">⋮</button> </div> </div> <div class="task-list"> <div class="task-item"> <div class="task-checkbox"></div> <div class="task-content"> <div class="task-title">Server performance optimization</div> <div class="task-meta"> <span class="task-due">📅 Today</span> <span class="task-priority priority-high">High</span> </div> </div> </div> <div class="task-item completed"> <div class="task-checkbox checked"></div> <div class="task-content"> <div class="task-title">Security audit implementation</div> <div class="task-meta"> <span class="task-due">📅 Yesterday</span> <span class="task-priority priority-medium">Medium</span> </div> </div> </div> <div class="task-item"> <div class="task-checkbox"></div> <div class="task-content"> <div class="task-title">Database indexing refinement</div> <div class="task-meta"> <span class="task-due">📅 Aug 26</span> <span class="task-priority priority-medium">Medium</span> </div> </div> </div> </div> <button class="add-task-btn"> <span>+</span> Add New Task </button> <div class="task-form"> <input type="text" placeholder="Enter task title" class="task-input"> <div class="task-form-actions"> <button class="task-form-btn cancel">Cancel</button> <button class="task-form-btn submit">Add Task</button> </div> </div> </div> </div> </div> <div class="toggle-menu">☰</div> <script> document.addEventListener('DOMContentLoaded', function() { // Toggle sidebar expansion const toggleMenu = document.querySelector('.toggle-menu'); const sidebar = document.querySelector('.sidebar'); toggleMenu.addEventListener('click', function() { sidebar.classList.toggle('expanded'); }); // Logo click also toggles sidebar const logo = document.querySelector('.logo'); logo.addEventListener('click', function() { sidebar.classList.toggle('expanded'); }); // Task checkbox functionality const taskCheckboxes = document.querySelectorAll('.task-checkbox'); taskCheckboxes.forEach(checkbox => { checkbox.addEventListener('click', function() { this.classList.toggle('checked'); this.parentElement.classList.toggle('completed'); }); }); // Date range buttons const dateButtons = document.querySelectorAll('.date-btn'); dateButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons dateButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Animate chart bars on date range change animateChartBars(); }); }); // Animate chart bars function animateChartBars() { const chartBars = document.querySelectorAll('.chart-bar'); chartBars.forEach(bar => { const originalHeight = bar.style.height; bar.style.height = '0%'; setTimeout(() => { bar.style.transition = 'height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)'; bar.style.height = originalHeight; }, 50); }); } // Initial chart animation setTimeout(animateChartBars, 300); // Add task functionality const addTaskBtn = document.querySelector('.add-task-btn'); const taskForm = document.querySelector('.task-form'); const taskInput = document.querySelector('.task-input'); const submitTaskBtn = document.querySelector('.task-form-btn.submit'); const cancelTaskBtn = document.querySelector('.task-form-btn.cancel'); const taskList = document.querySelector('.task-list'); addTaskBtn.addEventListener('click', function() { taskForm.classList.add('active'); taskInput.focus(); }); cancelTaskBtn.addEventListener('click', function() { taskForm.classList.remove('active'); taskInput.value = ''; }); submitTaskBtn.addEventListener('click', function() { const taskTitle = taskInput.value.trim(); if (taskTitle) { // Create new task item const newTask = document.createElement('div'); newTask.className = 'task-item new'; newTask.innerHTML = ` <div class="task-checkbox"></div> <div class="task-content"> <div class="task-title">${taskTitle}</div> <div class="task-meta"> <span class="task-due">📅 Today</span> <span class="task-priority priority-medium">Medium</span> </div> </div> `; // Add to task list taskList.prepend(newTask); // Setup checkbox functionality const newCheckbox = newTask.querySelector('.task-checkbox'); newCheckbox.addEventListener('click', function() { this.classList.toggle('checked'); this.parentElement.classList.toggle('completed'); }); // Reset form taskForm.classList.remove('active'); taskInput.value = ''; // Remove 'new' class after animation completes setTimeout(() => { newTask.classList.remove('new'); }, 500); } }); // Allow Enter key to submit the task taskInput.addEventListener('keyup', function(e) { if (e.key === 'Enter') { submitTaskBtn.click(); } }); // Nav item click handler const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(nav => nav.classList.remove('active')); this.classList.add('active'); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Whispr - Minimal Chat UI</title> <style> :root { --primary-color: #5C6BC0; --secondary-color: #8E9AF9; --accent-color: #3F51B5; --light-bg: #F7F9FC; --dark-text: #2A2E43; --medium-text: #5D6272; --light-text: #9DA0AE; --my-message: #E7F0FF; --their-message: #FFFFFF; --shadow-subtle: 0 2px 10px rgba(42, 46, 67, 0.06); --shadow-elevated: 0 4px 16px rgba(42, 46, 67, 0.1); --transition-default: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--light-bg); color: var(--dark-text); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .app-container { width: 100%; max-width: 700px; height: 700px; background-color: #FFFFFF; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-elevated); position: relative; } .app-header { padding: 20px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.05); position: relative; z-index: 10; } .back-button { width: 32px; height: 32px; border-radius: 50%; background-color: var(--light-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); } .back-button:hover { background-color: var(--secondary-color); color: white; } .back-button svg { width: 18px; height: 18px; } .chat-info { display: flex; align-items: center; flex: 1; margin-left: 15px; } .avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 12px; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .status-indicator { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #4CAF50; border: 2px solid white; bottom: 0; right: 0; } .chat-details { flex: 1; } .chat-name { font-weight: 600; font-size: 16px; color: var(--dark-text); margin-bottom: 2px; } .chat-status { font-size: 12px; color: var(--light-text); } .actions { display: flex; } .action-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 8px; cursor: pointer; transition: var(--transition-default); } .action-btn:hover { background-color: var(--light-bg); } .action-btn svg { width: 20px; height: 20px; color: var(--medium-text); } .conversation { flex: 1; padding: 20px; overflow-y: auto; background-color: var(--light-bg); position: relative; } .date-divider { text-align: center; margin: 20px 0; position: relative; display: flex; align-items: center; justify-content: center; } .date-text { background-color: var(--light-bg); padding: 0 15px; font-size: 12px; color: var(--light-text); position: relative; z-index: 1; } .date-line { position: absolute; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.05); } .message-group { margin-bottom: 20px; display: flex; flex-direction: column; } .message { max-width: 70%; margin-bottom: 6px; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; position: relative; animation: fadeIn 0.2s ease-out; transition: transform 0.2s, box-shadow 0.2s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message:hover { transform: translateY(-1px); } .message-time { font-size: 10px; color: var(--light-text); margin-top: 3px; opacity: 0.7; } .their-message { align-self: flex-start; background-color: var(--their-message); color: var(--dark-text); border-bottom-left-radius: 4px; box-shadow: var(--shadow-subtle); } .their-message:hover { box-shadow: 0 4px 12px rgba(42, 46, 67, 0.08); } .their-message-time { margin-left: 12px; } .my-message { align-self: flex-end; background-color: var(--my-message); color: var(--dark-text); border-bottom-right-radius: 4px; box-shadow: var(--shadow-subtle); } .my-message:hover { box-shadow: 0 4px 12px rgba(92, 107, 192, 0.12); } .my-message-time { text-align: right; margin-right: 12px; } .typing-indicator { display: flex; align-items: center; padding: 8px 16px; background-color: var(--their-message); border-radius: 18px; border-bottom-left-radius: 4px; max-width: 80px; margin-top: 6px; box-shadow: var(--shadow-subtle); align-self: flex-start; } .typing-dot { width: 8px; height: 8px; background-color: var(--light-text); border-radius: 50%; margin: 0 2px; animation: typingAnimation 1.4s infinite ease-in-out; } .typing-dot:nth-child(1) { animation-delay: 0s; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typingAnimation { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } } .input-container { padding: 15px 20px; background-color: #FFFFFF; display: flex; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.05); } .attachment-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); margin-right: 10px; } .attachment-btn:hover { background-color: var(--light-bg); } .attachment-btn svg { width: 22px; height: 22px; color: var(--medium-text); } .message-input { flex: 1; background-color: var(--light-bg); border: none; padding: 12px 15px; border-radius: 24px; font-size: 14px; outline: none; transition: var(--transition-default); } .message-input:focus { box-shadow: 0 0 0 2px var(--secondary-color); } .send-btn { width: 44px; height: 44px; border-radius: 50%; background-color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin-left: 10px; cursor: pointer; transition: var(--transition-default); box-shadow: 0 2px 8px rgba(92, 107, 192, 0.3); } .send-btn:hover { background-color: var(--accent-color); transform: scale(1.05); box-shadow: 0 4px 12px rgba(92, 107, 192, 0.4); } .send-btn svg { width: 20px; height: 20px; color: white; } /* Image in message styles */ .message-image { max-width: 200px; border-radius: 12px; margin-top: 5px; transition: transform 0.2s; cursor: pointer; } .message-image:hover { transform: scale(1.05); } /* Voice message styles */ .voice-message { display: flex; align-items: center; gap: 8px; } .voice-play-btn { width: 28px; height: 28px; border-radius: 50%; background-color: var(--primary-color); display: flex; align-items: center; justify-content: center; cursor: pointer; } .voice-play-btn svg { width: 14px; height: 14px; color: white; } .voice-waveform { display: flex; align-items: center; gap: 2px; } .voice-bar { width: 3px; height: 15px; background-color: var(--accent-color); border-radius: 3px; opacity: 0.5; } /* Reactions */ .message-reactions { display: flex; gap: 4px; margin-top: 4px; } .reaction { background-color: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 3px 6px; font-size: 10px; display: flex; align-items: center; gap: 3px; box-shadow: var(--shadow-subtle); cursor: pointer; transition: transform 0.15s; } .reaction:hover { transform: scale(1.1); } /* Emoji picker */ .emoji-picker { position: absolute; bottom: 75px; right: 20px; background-color: white; border-radius: 12px; box-shadow: var(--shadow-elevated); padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; width: 200px; z-index: 100; opacity: 0; transform: translateY(10px); pointer-events: none; transition: var(--transition-default); } .emoji-picker.active { opacity: 1; transform: translateY(0); pointer-events: all; } .emoji { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; transition: background-color 0.15s; } .emoji:hover { background-color: var(--light-bg); } /* New Message Effect */ @keyframes newMessagePop { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .new-message { animation: newMessagePop 0.3s forwards; } /* Scrollbar styling */ .conversation::-webkit-scrollbar { width: 6px; } .conversation::-webkit-scrollbar-track { background: transparent; } .conversation::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); border-radius: 10px; } /* Responsiveness */ @media (max-width: 700px) { .app-container { height: 100vh; border-radius: 0; max-width: 100%; } .message { max-width: 85%; } .emoji-picker { bottom: 70px; right: 10px; width: 180px; } } /* Dark mode toggle */ .theme-toggle { position: absolute; top: 20px; right: 20px; z-index: 1000; width: 40px; height: 40px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-subtle); transition: var(--transition-default); } .theme-toggle:hover { transform: rotate(30deg); } .theme-toggle svg { width: 20px; height: 20px; color: var(--dark-text); } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="back-button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> </svg> </div> <div class="chat-info"> <div class="avatar"> <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" alt="Avatar"> <div class="status-indicator"></div> </div> <div class="chat-details"> <div class="chat-name">Emma Williams</div> <div class="chat-status">Online now</div> </div> </div> <div class="actions"> <div class="action-btn" id="callBtn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> </svg> </div> <div class="action-btn" id="videoBtn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </div> <div class="action-btn" id="menuBtn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> </svg> </div> </div> </div> <div class="conversation" id="conversation"> <div class="date-divider"> <span class="date-line"></span> <span class="date-text">Today</span> </div> <div class="message-group"> <div class="message their-message"> Hey there! Did you manage to check out the design updates I sent yesterday? 😊 </div> <div class="message-time their-message-time">9:32 AM</div> </div> <div class="message-group"> <div class="message my-message"> Morning Emma! Yes, I did. Love the subtle shadows on those elements - exactly what we needed. Clean but with just enough depth. </div> <div class="message-time my-message-time">9:34 AM</div> </div> <div class="message-group"> <div class="message their-message"> Thanks! I was worried the box-shadows might be too subtle. But I kept them light with minimal spread to maintain that minimalist feel we discussed. </div> <div class="message-time their-message-time">9:36 AM</div> </div> <div class="message-group"> <div class="message their-message"> Here's the visual reference I was using as inspiration. </div> <div class="message their-message"> <img src="https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Design inspiration" class="message-image"> </div> <div class="message-time their-message-time">9:37 AM</div> </div> <div class="message-group"> <div class="message my-message"> Perfect 👌 The slight elevation really does help with conversation flow and readability. Much better than our flat design from before. </div> <div class="message-reactions"> <div class="reaction">❤️ 1</div> </div> <div class="message-time my-message-time">9:39 AM</div> </div> <div class="message-group"> <div class="message their-message"> Exactly! I adjusted the Y-offset to just 2px and kept the blur radius at 10px with opacity at 6% for that delicate touch. Gives us that physical metaphor without being distracting. </div> <div class="message-time their-message-time">9:42 AM</div> </div> <div class="message-group"> <div class="message my-message"> Smart choice. I think this will help users visually parse conversations much more easily. Have you considered adding a subtle hover state to elevate them just a touch more on interaction? </div> <div class="message-time my-message-time">9:45 AM</div> </div> <div class="message-group"> <div class="message their-message voice-message"> <div class="voice-play-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /> </svg> </div> <div class="voice-waveform"> <div class="voice-bar" style="height: 5px;"></div> <div class="voice-bar" style="height: 10px;"></div> <div class="voice-bar" style="height: 7px;"></div> <div class="voice-bar" style="height: 14px;"></div> <div class="voice-bar" style="height: 8px;"></div> <div class="voice-bar" style="height: 12px;"></div> <div class="voice-bar" style="height: 6px;"></div> <div class="voice-bar" style="height: 15px;"></div> <div class="voice-bar" style="height: 9px;"></div> <div class="voice-bar" style="height: 11px;"></div> <div class="voice-bar" style="height: 13px;"></div> <div class="voice-bar" style="height: 7px;"></div> </div> <span style="margin-left: 5px; font-size: 12px; color: #666;">0:18</span> </div> <div class="message-time their-message-time">9:48 AM</div> </div> <div class="message-group"> <div class="message my-message"> Let me listen to this in a bit. Meanwhile, do you think we should adjust the corner radius to match our other UI elements? </div> <div class="message-time my-message-time">9:50 AM</div> </div> <div class="typing-indicator"> <div class="typing-dot"></div> <div class="typing-dot"></div> <div class="typing-dot"></div> </div> </div> <div class="input-container"> <div class="attachment-btn" id="attachmentBtn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /> </svg> </div> <input type="text" class="message-input" id="messageInput" placeholder="Type a message..."> <div class="send-btn" id="sendBtn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> </svg> </div> </div> <div class="emoji-picker" id="emojiPicker"> <div class="emoji">😊</div> <div class="emoji">👍</div> <div class="emoji">❤️</div> <div class="emoji">😂</div> <div class="emoji">🎉</div> <div class="emoji">🔥</div> <div class="emoji">👏</div> <div class="emoji">🙌</div> <div class="emoji">🤔</div> <div class="emoji">👀</div> <div class="emoji">✨</div> <div class="emoji">🚀</div> </div> </div> <script> // DOM elements const conversation = document.getElementById('conversation'); const messageInput = document.getElementById('messageInput'); const sendBtn = document.getElementById('sendBtn'); const emojiPicker = document.getElementById('emojiPicker'); const attachmentBtn = document.getElementById('attachmentBtn'); const typingIndicator = document.querySelector('.typing-indicator'); // Sample responses const sampleResponses = [ "I was thinking about that! Maybe rounded on the outer edges but with that slight angle on the inner corner? Gives a nice directional cue.", "Also, I'm thinking about a subtle scale animation when messages are hovered. Just like a 1-2% increase to add a touch of interactivity.", "The client really likes how the shadows distinguish between their messages and the client's. Much clearer than just using color alone.", "What do you think about a subtle pulse animation when new messages arrive? Just enough to draw attention but not be distracting." ]; // Initialize scroll to bottom conversation.scrollTop = conversation.scrollHeight; // Hide typing indicator initially setTimeout(() => { typingIndicator.style.display = 'none'; }, 3000); // Emoji picker toggle let emojiPickerVisible = false; attachmentBtn.addEventListener('click', () => { emojiPickerVisible = !emojiPickerVisible; emojiPicker.classList.toggle('active', emojiPickerVisible); }); // Add emoji to input document.querySelectorAll('.emoji').forEach(emoji => { emoji.addEventListener('click', () => { messageInput.value += emoji.textContent; messageInput.focus(); }); }); // Voice message play button document.querySelector('.voice-play-btn').addEventListener('click', function() { const waveform = this.nextElementSibling; // Simple animation for bars when "playing" waveform.querySelectorAll('.voice-bar').forEach((bar, index) => { setTimeout(() => { const randomHeight = Math.floor(Math.random() * 15) + 5; bar.style.height = `${randomHeight}px`; bar.style.transition = 'height 0.3s ease'; }, index * 100); }); }); // Image click animation document.querySelector('.message-image').addEventListener('click', function() { this.style.transform = 'scale(1.1)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); }); // Send message function function sendMessage() { const messageText = messageInput.value.trim(); if (messageText === '') return; // Create new message elements const messageGroup = document.createElement('div'); messageGroup.className = 'message-group'; const message = document.createElement('div'); message.className = 'message my-message new-message'; message.textContent = messageText; const messageTime = document.createElement('div'); messageTime.className = 'message-time my-message-time'; // Get current time const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const ampm = hours >= 12 ? 'PM' : 'AM'; const formattedHours = hours % 12 || 12; const formattedMinutes = minutes < 10 ? '0' + minutes : minutes; messageTime.textContent = `${formattedHours}:${formattedMinutes} ${ampm}`; // Append elements messageGroup.appendChild(message); messageGroup.appendChild(messageTime); conversation.appendChild(messageGroup); // Clear input messageInput.value = ''; // Scroll to bottom conversation.scrollTop = conversation.scrollHeight; // Show typing indicator after sending a message setTimeout(() => { typingIndicator.style.display = 'flex'; conversation.scrollTop = conversation.scrollHeight; // Simulate a response setTimeout(() => { // Hide typing indicator typingIndicator.style.display = 'none'; // Create response message const responseGroup = document.createElement('div'); responseGroup.className = 'message-group'; const responseMessage = document.createElement('div'); responseMessage.className = 'message their-message new-message'; // Pick a random response const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)]; responseMessage.textContent = randomResponse; const responseTime = document.createElement('div'); responseTime.className = 'message-time their-message-time'; // Get updated time const responseNow = new Date(); const responseHours = responseNow.getHours(); const responseMinutes = responseNow.getMinutes(); const responseAmpm = responseHours >= 12 ? 'PM' : 'AM'; const responseFormattedHours = responseHours % 12 || 12; const responseFormattedMinutes = responseMinutes < 10 ? '0' + responseMinutes : responseMinutes; responseTime.textContent = `${responseFormattedHours}:${responseFormattedMinutes} ${responseAmpm}`; // Append response elements responseGroup.appendChild(responseMessage); responseGroup.appendChild(responseTime); conversation.appendChild(responseGroup); // Scroll to bottom again conversation.scrollTop = conversation.scrollHeight; }, Math.random() * 2000 + 1000); // Random delay between 1-3 seconds }, 500); } // Event listeners sendBtn.addEventListener('click', sendMessage); messageInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { sendMessage(); } }); // Automatically focus input on page load messageInput.focus(); // Close emoji picker when clicking outside document.addEventListener('click', (e) => { if (emojiPickerVisible && !e.target.closest('#emojiPicker') && e.target !== attachmentBtn) { emojiPickerVisible = false; emojiPicker.classList.remove('active'); } }); // Make message bubbles interactive document.querySelectorAll('.message').forEach(message => { message.addEventListener('dblclick', function() { // Add reaction if double-clicked const isMyMessage = this.classList.contains('my-message'); const messageGroup = this.closest('.message-group'); // Only add reactions to messages without reactions yet if (!messageGroup.querySelector('.message-reactions')) { const reactions = document.createElement('div'); reactions.className = 'message-reactions'; const reaction = document.createElement('div'); reaction.className = 'reaction'; reaction.textContent = '👍 1'; reactions.appendChild(reaction); // Insert reactions after the message this.insertAdjacentElement('afterend', reactions); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Architectural Estates</title> <style> :root { --primary-color: #2c3e50; --accent-color: #e67e22; --light-bg: #f8f9fa; --text-color: #333; --card-bg: #fff; --shadow-base: rgba(44, 62, 80, 0.1); --shadow-accent: rgba(230, 126, 34, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', 'Helvetica Neue', sans-serif; } body { background-color: var(--light-bg); color: var(--text-color); line-height: 1.6; overflow-x: hidden; max-width: 700px; margin: 0 auto; height: 700px; overflow-y: auto; padding: 20px; } header { text-align: center; margin-bottom: 20px; position: relative; } h1 { color: var(--primary-color); font-size: 28px; margin-bottom: 5px; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--accent-color); bottom: -5px; left: 50%; transform: translateX(-50%); } .subtitle { color: var(--primary-color); opacity: 0.8; font-size: 16px; font-weight: 300; } .filters { display: flex; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .filter-btn { background: var(--card-bg); border: none; padding: 8px 16px; border-radius: 20px; color: var(--primary-color); font-weight: 500; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px var(--shadow-base); } .filter-btn:hover, .filter-btn.active { background: var(--accent-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 8px var(--shadow-accent); } .property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-bottom: 20px; } .property-card { background: var(--card-bg); border-radius: 10px; overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 5px 15px var(--shadow-base), 0 10px 25px var(--shadow-base), 0 15px 35px var(--shadow-accent); transform-style: preserve-3d; perspective: 1000px; transform: translateZ(0); } .property-card:hover { transform: translateY(-10px) rotateX(2deg) rotateY(2deg); box-shadow: 0 8px 20px var(--shadow-base), 0 16px 32px var(--shadow-base), 0 20px 40px var(--shadow-accent), 0 25px 50px rgba(0, 0, 0, 0.1); } .property-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } .property-card:hover:before { opacity: 1; } .property-image { height: 180px; overflow: hidden; position: relative; } .property-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .property-card:hover .property-image img { transform: scale(1.05); } .property-badge { position: absolute; top: 15px; right: 15px; background: var(--accent-color); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; z-index: 2; box-shadow: 0 3px 6px rgba(0,0,0,0.1); } .property-details { padding: 20px; position: relative; } .property-price { font-size: 22px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; } .property-address { font-size: 14px; color: #666; margin-bottom: 12px; } .property-features { display: flex; justify-content: space-between; font-size: 13px; color: #777; margin-bottom: 15px; } .property-feature { display: flex; align-items: center; gap: 5px; } .feature-icon { width: 16px; height: 16px; color: var(--accent-color); } .architectural-notes { font-size: 13px; color: #555; font-style: italic; margin-bottom: 15px; line-height: 1.4; } .view-details { display: inline-block; padding: 8px 16px; background: transparent; color: var(--accent-color); border: 1px solid var(--accent-color); border-radius: 4px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .view-details:hover { background: var(--accent-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 8px var(--shadow-accent); } .architectural-detail { position: absolute; bottom: -30px; right: 20px; width: 60px; height: 60px; opacity: 0; transform: rotate(-15deg); transition: all 0.4s ease; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2)); } .property-card:hover .architectural-detail { opacity: 0.8; bottom: 15px; transform: rotate(0); } .light-direction { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; } .property-card:hover .light-direction { opacity: 1; } .load-more { display: block; margin: 30px auto; padding: 12px 24px; background: var(--primary-color); color: white; border: none; border-radius: 25px; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 8px var(--shadow-base); } .load-more:hover { background: var(--accent-color); transform: translateY(-2px); box-shadow: 0 6px 12px var(--shadow-accent); } @media (max-width: 600px) { .property-grid { grid-template-columns: 1fr; } header { margin-bottom: 15px; } h1 { font-size: 24px; } .subtitle { font-size: 14px; } .filters { justify-content: center; } .filter-btn { font-size: 13px; padding: 6px 12px; margin-bottom: 5px; } } /* Tooltip styling */ .tooltip { position: absolute; background: rgba(44, 62, 80, 0.9); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; opacity: 0; pointer-events: none; transition: all 0.2s ease; z-index: 10; max-width: 200px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); text-align: center; } /* Modal styles */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { background: white; width: 90%; max-width: 600px; border-radius: 10px; overflow: hidden; position: relative; transform: scale(0.8); transition: transform 0.3s ease; max-height: 90vh; display: flex; flex-direction: column; } .modal.active .modal-content { transform: scale(1); } .modal-header { padding: 20px; background: var(--primary-color); color: white; } .modal-title { font-size: 22px; margin-bottom: 5px; } .modal-subtitle { font-size: 16px; opacity: 0.8; } .modal-body { padding: 20px; overflow-y: auto; } .modal-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; } .modal-gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; } .architectural-highlight { background: #f5f5f5; padding: 15px; border-left: 3px solid var(--accent-color); margin-bottom: 20px; } .highlight-title { font-weight: 600; color: var(--primary-color); margin-bottom: 5px; } .modal-close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; background: rgba(255,255,255,0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; } .modal-close:hover { background: rgba(255,255,255,0.5); transform: rotate(90deg); } .modal-close span { color: white; font-size: 20px; font-weight: 300; } .property-card-skeleton { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 5px 15px var(--shadow-base); height: 350px; position: relative; } .skeleton-image { height: 180px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-content { padding: 20px; } .skeleton-line { height: 15px; margin-bottom: 10px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } .skeleton-line:nth-child(1) { width: 60%; height: 20px; } .skeleton-line:nth-child(2) { width: 90%; } .skeleton-line:nth-child(3) { width: 70%; } .skeleton-line:nth-child(4) { width: 40%; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* 3D shadow effect */ .shadow-3d { position: relative; } .shadow-3d::after { content: ''; position: absolute; bottom: -30px; left: 5%; width: 90%; height: 20px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%); opacity: 0; transition: all 0.4s ease; transform: scale(0.8); filter: blur(5px); z-index: -1; } .property-card:hover .shadow-3d::after { opacity: 1; transform: scale(1); } </style> </head> <body> <header> <h1>Architectural Estates</h1> <p class="subtitle">Where design meets luxury living</p> </header> <div class="filters"> <button class="filter-btn active" data-filter="all">All Properties</button> <button class="filter-btn" data-filter="modern">Modern</button> <button class="filter-btn" data-filter="colonial">Colonial</button> <button class="filter-btn" data-filter="mediterranean">Mediterranean</button> </div> <div class="property-grid"> <article class="property-card shadow-3d" data-type="modern"> <div class="property-image"> <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Modern Waterfront Villa"> <div class="property-badge">Featured</div> <div class="light-direction"></div> </div> <div class="property-details"> <div class="property-price">$2,450,000</div> <div class="property-address">1234 Crystal Bay Drive, Lakeside Heights</div> <div class="property-features"> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 9.3V4h-3v2.6L12 3 2 12h3v8h5v-6h4v6h5v-8h3l-3-2.7zm-9 .7c0-1.1.9-2 2-2s2 .9 2 2h-4z"/> </svg> <span>4 Beds</span> </div> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M7 19h10v1c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1zm0-1h10v-5H7v5zM17 3v6l-3.2-2.4-2.8 2.4V3H7v8h10V3h-3z"/> </svg> <span>3.5 Baths</span> </div> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/> </svg> <span>3,250 sq ft</span> </div> </div> <div class="architectural-notes"> Cantilevered glass volumes create dramatic shadow play throughout the day. Features custom copper rain chains and integrated courtyard lighting. </div> <button class="view-details">View Details</button> <img class="architectural-detail" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMkw0IDlIMVYyMkgyM1Y5SDIwTDEyIDJaIiBzdHJva2U9IiNlNjdlMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOSAyMlYxNUgxNVYyMiIgc3Ryb2tlPSIjZTY3ZTIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+" alt="Architectural detail"> </div> </article> <article class="property-card shadow-3d" data-type="mediterranean"> <div class="property-image"> <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mediterranean Estate"> <div class="light-direction"></div> </div> <div class="property-details"> <div class="property-price">$1,875,000</div> <div class="property-address">578 Olive Grove Lane, Monte Vista</div> <div class="property-features"> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 9.3V4h-3v2.6L12 3 2 12h3v8h5v-6h4v6h5v-8h3l-3-2.7zm-9 .7c0-1.1.9-2 2-2s2 .9 2 2h-4z"/> </svg> <span>5 Beds</span> </div> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M7 19h10v1c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1zm0-1h10v-5H7v5zM17 3v6l-3.2-2.4-2.8 2.4V3H7v8h10V3h-3z"/> </svg> <span>4.5 Baths</span> </div> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/> </svg> <span>4,120 sq ft</span> </div> </div> <div class="architectural-notes"> Terracotta roof tiles crafted by local artisans and hand-painted Moroccan tiles throughout. Wrought iron details cast intricate shadows. </div> <button class="view-details">View Details</button> <img class="architectural-detail" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMyA5TDEyIDJMMjEgOVYyMUMxMC41IDIxLjEyIDE0LjUgMjEuMSAzIDIxVilaIiBzdHJva2U9IiNlNjdlMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNiAxM0MxMC41IDEwLjUgMTMuNSAxMy41IDE4IDExIiBzdHJva2U9IiNlNjdlMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=" alt="Architectural detail"> </div> </article> <article class="property-card shadow-3d" data-type="colonial"> <div class="property-image"> <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Colonial Revival Estate"> <div class="property-badge">New Listing</div> <div class="light-direction"></div> </div> <div class="property-details"> <div class="property-price">$1,695,000</div> <div class="property-address">42 Heritage Lane, Oakwood Gardens</div> <div class="property-features"> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 9.3V4h-3v2.6L12 3 2 12h3v8h5v-6h4v6h5v-8h3l-3-2.7zm-9 .7c0-1.1.9-2 2-2s2 .9 2 2h-4z"/> </svg> <span>4 Beds</span> </div> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M7 19h10v1c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1zm0-1h10v-5H7v5zM17 3v6l-3.2-2.4-2.8 2.4V3H7v8h10V3h-3z"/> </svg> <span>3 Baths</span> </div> <div class="property-feature"> <svg class="feature-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/> </svg> <span>3,850 sq ft</span> </div> </div> <div class="architectural-notes"> Authentic crown moldings restored to original 1925 specifications. Features reclaimed heart pine flooring with custom inlays. </div> <button class="view-details">View Details</button> <img class="architectural-detail" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMiA5TDEyIDNMMjIgOVYyMUgyVjlaIiBzdHJva2U9IiNlNjdlMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOSAyMVYxNUgxNVYyMSIgc3Ryb2tlPSIjZTY3ZTIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTIgOUgxMFY2SDEzVjlIMjIiIHN0cm9rZT0iI2U2N2UyMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==" alt="Architectural detail"> </div> </article> </div> <button class="load-more" id="loadMore">Load More Properties</button> <div class="tooltip" id="tooltip"></div> <div class="modal" id="propertyModal"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title">Modern Waterfront Villa</h2> <p class="modal-subtitle">1234 Crystal Bay Drive, Lakeside Heights</p> <div class="modal-close" id="modalClose"> <span>×</span> </div> </div> <div class="modal-body"> <div class="modal-gallery"> <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Property exterior"> <img src="https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Living room"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Kitchen"> <img src="https://images.unsplash.com/photo-1560185893-a55cbc8c57e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Bedroom"> </div> <div class="architectural-highlight"> <div class="highlight-title">Architectural Highlight</div> <p>The cantilevered glass volumes aren't just visually striking—they're oriented to maximize views while minimizing solar heat gain. The architect collaborated with a lighting designer to create dramatic shadow patterns that evolve throughout the day, turning the interior spaces into a living sundial.</p> </div> <p>This breathtaking modern waterfront retreat was designed by award-winning architect David Chen. The property makes exceptional use of natural light with floor-to-ceiling windows oriented to capture optimal views of the lake and mountains.</p> <p>The open floor plan transitions seamlessly between indoor and outdoor living spaces through sliding glass walls. The kitchen features custom Italian cabinetry with integrated lighting that enhances the architectural details.</p> <p>Distinctive architectural features include a floating staircase, exposed steel beams with custom patina finish, and a dramatic two-story atrium that serves as the home's central light well.</p> </div> </div> </div> <script> // Wait for DOM to be fully loaded document.addEventListener('DOMContentLoaded', function() { // Property cards hover effect const propertyCards = document.querySelectorAll('.property-card'); const tooltip = document.getElementById('tooltip'); propertyCards.forEach(card => { // Dynamic shadow movement on mousemove card.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; // Update the light direction gradient const lightDirection = this.querySelector('.light-direction'); lightDirection.style.background = `radial-gradient(circle at ${x}% ${y}%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%)`; }); // Add architectural detail tooltip const architecturalDetail = card.querySelector('.architectural-detail'); if (architecturalDetail) { architecturalDetail.addEventListener('mouseenter', function(e) { const rect = this.getBoundingClientRect(); tooltip.style.top = `${rect.top - 40}px`; tooltip.style.left = `${rect.left + rect.width/2 - 100}px`; tooltip.textContent = "Click to see architectural details"; tooltip.style.opacity = 1; }); architecturalDetail.addEventListener('mouseleave', function() { tooltip.style.opacity = 0; }); } // Details button click const detailsButton = card.querySelector('.view-details'); detailsButton.addEventListener('click', function() { document.getElementById('propertyModal').classList.add('active'); }); }); // Modal close button document.getElementById('modalClose').addEventListener('click', function() { document.getElementById('propertyModal').classList.remove('active'); }); // Close modal when clicking outside the content document.getElementById('propertyModal').addEventListener('click', function(e) { if (e.target === this) { this.classList.remove('active'); } }); // Filter buttons functionality const filterButtons = document.querySelectorAll('.filter-btn'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const filterValue = this.getAttribute('data-filter'); // Show all cards or filter by type propertyCards.forEach(card => { if (filterValue === 'all' || card.getAttribute('data-type') === filterValue) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // Load more properties functionality const loadMoreBtn = document.getElementById('loadMore'); let loadCount = 0; loadMoreBtn.addEventListener('click', function() { if (loadCount < 1) { // Just add one set of properties for demo loadMoreBtn.textContent = "Loading..."; setTimeout(() => { // Create property cards const propertyGrid = document.querySelector('.property-grid'); // Get property types for alternating const types = ['modern', 'colonial', 'mediterranean']; // Create skeleton loaders first for (let i = 0; i < 3; i++) { const skeleton = document.createElement('div'); skeleton.className = 'property-card-skeleton'; skeleton.innerHTML = ` <div class="skeleton-image"></div> <div class="skeleton-content"> <div class="skeleton-line"></div> <div class="skeleton-line"></div> <div class="skeleton-line"></div> <div class="skeleton-line"></div> </div> `; propertyGrid.appendChild(skeleton); }
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Creative | Pushing Boundaries</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); :root { --primary-hue: 260; --secondary-hue: 340; --tertiary-hue: 180; --accent-hue: 40; --primary-color: hsl(var(--primary-hue), 80%, 60%); --secondary-color: hsl(var(--secondary-hue), 80%, 60%); --tertiary-color: hsl(var(--tertiary-hue), 80%, 60%); --accent-color: hsl(var(--accent-hue), 80%, 60%); --text-color: #f0f0f0; --bg-color: #0a0a12; --card-bg: rgba(20, 20, 30, 0.7); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; } .container { max-width: 700px; width: 100%; height: 700px; padding: 2rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--bg-color); position: relative; } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 3px; } .hero { position: relative; margin-bottom: 3rem; } .hero h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; position: relative; z-index: 1; } .hero h1 span { display: block; } .hero h1 .highlight { background: linear-gradient( 90deg, var(--primary-color), var(--secondary-color), var(--tertiary-color) ); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 8s infinite; } .hero p { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; max-width: 90%; margin-bottom: 2rem; } .floating-shapes { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; pointer-events: none; } .shape { position: absolute; border-radius: 50%; filter: blur(20px); animation: float 15s infinite; } .shape:nth-child(1) { width: 200px; height: 200px; background: hsl(var(--primary-hue), 70%, 40%); top: -100px; right: -50px; animation-delay: 0s; } .shape:nth-child(2) { width: 150px; height: 150px; background: hsl(var(--secondary-hue), 70%, 40%); bottom: -70px; left: -30px; animation-delay: -5s; } .shape:nth-child(3) { width: 100px; height: 100px; background: hsl(var(--tertiary-hue), 70%, 40%); top: 50%; right: -30px; animation-delay: -2.5s; } .cta-section { position: relative; padding: 2.5rem; border-radius: 16px; background-color: var(--card-bg); backdrop-filter: blur(10px); overflow: hidden; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 3rem; } .cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 40px 5px hsla(var(--primary-hue), 90%, 50%, 0.3), 0 0 80px 10px hsla(var(--secondary-hue), 90%, 50%, 0.2), 0 0 120px 15px hsla(var(--tertiary-hue), 90%, 50%, 0.1); filter: blur(8px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.7; transform: translateZ(0); } .cta-section:hover::before { box-shadow: 0 0 60px 10px hsla(var(--primary-hue), 90%, 60%, 0.4), 0 0 100px 15px hsla(var(--secondary-hue), 90%, 60%, 0.3), 0 0 140px 20px hsla(var(--tertiary-hue), 90%, 60%, 0.2); } .cta-section h2 { font-size: 1.75rem; margin-bottom: 1rem; } .cta-section p { margin-bottom: 1.5rem; line-height: 1.6; } .btn { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); color: var(--text-color); border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 500; border-radius: 50px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; text-decoration: none; z-index: 1; letter-spacing: 0.5px; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, hsla(var(--primary-hue), 90%, 50%, 0.8), hsla(var(--secondary-hue), 90%, 50%, 0.8), hsla(var(--tertiary-hue), 90%, 50%, 0.8) ); z-index: -1; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); background-size: 200% 100%; background-position: 100% 0; } .btn:hover::before { background-position: 0% 0; } .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px -6px rgba(0, 0, 0, 0.3); } .btn:active { transform: translateY(1px); } .btn .icon { margin-left: 0.5rem; transition: transform 0.3s ease; } .btn:hover .icon { transform: translateX(4px); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .service-card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 12px; height: 100%; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, var(--primary-color), var(--secondary-color), var(--tertiary-color) ); transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; } .service-card:hover::before { transform: scaleX(1); transform-origin: left; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } .service-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; } .service-card p { font-size: 0.95rem; opacity: 0.9; } .service-card .card-icon { font-size: 2rem; margin-bottom: 1rem; display: inline-block; background: linear-gradient( 45deg, var(--primary-color), var(--secondary-color) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .contact-form { margin-top: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-control { width: 100%; padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--text-color); font-size: 1rem; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px hsla(var(--primary-hue), 90%, 50%, 0.25); } textarea.form-control { min-height: 100px; resize: vertical; } .mouse-follower { position: fixed; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, hsla(var(--primary-hue), 90%, 50%, 0.1) 0%, hsla(var(--secondary-hue), 90%, 50%, 0.05) 50%, transparent 70% ); transform: translate(-50%, -50%); z-index: 0; opacity: 0; transition: opacity 0.3s ease; filter: blur(20px); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(5deg); } 50% { transform: translateY(10px) rotate(-5deg); } 75% { transform: translateY(-5px) rotate(2deg); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 600px) { .container { padding: 1.5rem; } .hero h1 { font-size: 2.2rem; } .card-grid { grid-template-columns: 1fr; } .cta-section { padding: 1.5rem; } } </style> </head> <body> <div class="mouse-follower" id="mouseFollower"></div> <div class="container"> <section class="hero"> <div class="floating-shapes"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <h1> <span>We craft</span> <span class="highlight">digital experiences</span> <span>that transcend reality</span> </h1> <p> Pushing the boundaries of visual storytelling through innovative design, gradients, and interactive experiences that transform brands. </p> </section> <section class="cta-section" id="main-cta"> <h2>Reimagine Your Digital Presence</h2> <p>Our team of visionary designers and developers create immersive digital experiences that captivate audiences and elevate brands. From fluid gradients to interactive elements, we blend art and technology to craft unique digital identities.</p> <a href="#" class="btn" id="cta-button"> Start Your Project <span class="icon">→</span> </a> </section> <section class="services"> <div class="card-grid"> <div class="service-card"> <div class="card-icon">✦</div> <h3>Gradient Artistry</h3> <p>We craft custom multi-dimensional gradients that transform static elements into living, breathing visual experiences.</p> </div> <div class="service-card"> <div class="card-icon">⦿</div> <h3>Interactive UI</h3> <p>Responsive interfaces with sophisticated animations that evolve as users interact with your digital product.</p> </div> <div class="service-card"> <div class="card-icon">◈</div> <h3>Future-Forward Design</h3> <p>Avant-garde aesthetics that position your brand at the cutting edge of digital expression.</p> </div> </div> </section> <section class="cta-section" id="contact-cta"> <h2>Let's Create Something Extraordinary</h2> <p>Share your vision with us, and we'll transform it into a captivating digital experience that resonates with your audience.</p> <div class="contact-form"> <div class="form-group"> <input type="text" class="form-control" placeholder="Your Name" id="name"> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Your Email" id="email"> </div> <div class="form-group"> <textarea class="form-control" placeholder="Tell us about your project" id="message"></textarea> </div> <a href="#" class="btn" id="submit-btn"> Send Message <span class="icon">→</span> </a> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Mouse follower effect const mouseFollower = document.getElementById('mouseFollower'); let mouseX = 0, mouseY = 0; let currentX = 0, currentY = 0; document.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; // Show the follower when the mouse moves mouseFollower.style.opacity = '1'; }); // Smooth following animation function animate() { let dx = mouseX - currentX; let dy = mouseY - currentY; currentX += dx * 0.1; currentY += dy * 0.1; mouseFollower.style.left = `${currentX}px`; mouseFollower.style.top = `${currentY}px`; requestAnimationFrame(animate); } animate(); // Dynamic gradient box-shadow on CTA sections const ctaSections = document.querySelectorAll('.cta-section'); ctaSections.forEach(section => { section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Normalize coordinates const xPercent = x / rect.width; const yPercent = y / rect.height; // Dynamic hue shifts based on cursor position const primaryHue = 260 + (xPercent * 40); const secondaryHue = 340 - (yPercent * 40); const tertiaryHue = 180 + ((xPercent + yPercent) * 30); section.style.setProperty('--primary-hue', primaryHue); section.style.setProperty('--secondary-hue', secondaryHue); section.style.setProperty('--tertiary-hue', tertiaryHue); }); }); // Button hover effects const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('mouseover', () => { // Random vibrant hue shifts on hover const randomHue1 = Math.floor(Math.random() * 360); const randomHue2 = (randomHue1 + 40 + Math.floor(Math.random() * 80)) % 360; const randomHue3 = (randomHue2 + 40 + Math.floor(Math.random() * 80)) % 360; button.style.setProperty('--primary-hue', randomHue1); button.style.setProperty('--secondary-hue', randomHue2); button.style.setProperty('--tertiary-hue', randomHue3); }); }); // Form interaction const formInputs = document.querySelectorAll('.form-control'); formInputs.forEach(input => { input.addEventListener('focus', () => { input.parentElement.style.transform = 'translateX(5px)'; setTimeout(() => { input.parentElement.style.transform = 'translateX(0)'; }, 300); }); }); // Prevent default form submission const submitBtn = document.getElementById('submit-btn'); submitBtn.addEventListener('click', (e) => { e.preventDefault(); // Visual feedback instead of actual submission const successMessage = document.createElement('div'); successMessage.textContent = 'Message received! We'll be in touch soon.'; successMessage.style.color = 'var(--accent-color)'; successMessage.style.padding = '1rem 0'; successMessage.style.opacity = '0'; successMessage.style.transition = 'opacity 0.3s ease'; const form = document.querySelector('.contact-form'); form.appendChild(successMessage); setTimeout(() => { successMessage.style.opacity = '1'; }, 100); // Clear form fields document.getElementById('name').value = ''; document.getElementById('email').value = ''; document.getElementById('message').value = ''; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Learning Path Dashboard</title> <style> :root { --primary-color: #3a4c8b; --secondary-color: #5a6dd0; --accent-color: #8b6fda; --text-color: #2c3e50; --light-text: #6c7a89; --background: #f7f9fc; --module-bg: #ffffff; --shadow-subtle: 0 2px 6px rgba(0, 0, 0, 0.04); --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-active: 0 6px 14px rgba(0, 0, 0, 0.12); --progress-empty: #e9ecef; --radius: 12px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } body { background-color: var(--background); color: var(--text-color); display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; padding: 15px; } .dashboard { width: 100%; max-width: 700px; height: 100%; max-height: 700px; overflow-y: auto; padding: 20px; border-radius: var(--radius); background: var(--background); scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--background); } .dashboard::-webkit-scrollbar { width: 6px; } .dashboard::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 6px; } .dashboard::-webkit-scrollbar-track { background-color: var(--background); } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .dashboard-title { display: flex; flex-direction: column; } .dashboard-title h1 { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; } .dashboard-title p { font-size: 0.9rem; color: var(--light-text); } .avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.2rem; cursor: pointer; transition: transform 0.3s ease; position: relative; } .avatar:hover { transform: scale(1.05); } .avatar::after { content: ""; position: absolute; width: 12px; height: 12px; background-color: #4cd964; border-radius: 50%; right: 0; bottom: 0; border: 2px solid var(--background); } .search-bar { margin-bottom: 25px; position: relative; } .search-bar input { width: 100%; padding: 14px 20px; padding-left: 45px; border: none; border-radius: 8px; background-color: var(--module-bg); box-shadow: var(--shadow-subtle); transition: var(--transition); font-size: 0.95rem; color: var(--text-color); } .search-bar input:focus { outline: none; box-shadow: var(--shadow-hover); } .search-bar i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--light-text); } .tabs { display: flex; gap: 15px; margin-bottom: 25px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; padding-bottom: 5px; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 8px 16px; border-radius: 30px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: var(--transition); background-color: transparent; color: var(--light-text); border: 1px solid rgba(108, 122, 137, 0.2); } .tab.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .tab:hover:not(.active) { background-color: rgba(108, 122, 137, 0.1); } .section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; color: var(--primary-color); display: flex; align-items: center; justify-content: space-between; } .view-all { font-size: 0.85rem; color: var(--accent-color); cursor: pointer; font-weight: 500; } .view-all:hover { text-decoration: underline; } .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 30px; } .module { background-color: var(--module-bg); border-radius: var(--radius); padding: 20px; cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-subtle); } .module:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .module.active { border-left: 3px solid var(--accent-color); box-shadow: var(--shadow-active); } .module-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-bottom: 15px; color: white; } .module-title { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--text-color); } .module-desc { font-size: 0.85rem; color: var(--light-text); line-height: 1.4; margin-bottom: 15px; flex-grow: 1; } .module-progress { height: 4px; width: 100%; background-color: var(--progress-empty); border-radius: 10px; overflow: hidden; margin-top: auto; } .progress-bar { height: 100%; border-radius: 10px; transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .learning-paths { margin-bottom: 30px; } .path-item { display: flex; align-items: center; background-color: var(--module-bg); border-radius: var(--radius); padding: 15px; margin-bottom: 12px; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-subtle); } .path-item:hover { box-shadow: var(--shadow-hover); transform: translateX(3px); } .path-item:active { box-shadow: var(--shadow-active); } .path-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-right: 15px; color: white; flex-shrink: 0; } .path-details { flex-grow: 1; } .path-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; color: var(--text-color); } .path-meta { font-size: 0.8rem; color: var(--light-text); display: flex; align-items: center; } .path-meta span { display: flex; align-items: center; margin-right: 15px; } .path-meta i { margin-right: 5px; font-size: 0.85rem; } .path-action { align-self: center; margin-left: 15px; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(90, 109, 208, 0.1); color: var(--secondary-color); transition: var(--transition); } .path-item:hover .path-action { background-color: var(--secondary-color); color: white; transform: scale(1.1); } .notification-dot { width: 8px; height: 8px; background-color: var(--accent-color); border-radius: 50%; position: absolute; top: 10px; right: 10px; } /* Pulse animation for notification dot */ @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 111, 218, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(139, 111, 218, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 111, 218, 0); } } .notification-dot { animation: pulse 2s infinite; } /* For small screens */ @media screen and (max-width: 600px) { .modules-grid { grid-template-columns: 1fr; } .dashboard-header h1 { font-size: 1.5rem; } .path-meta span:last-child { display: none; } .tab { padding: 6px 12px; font-size: 0.8rem; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .module, .path-item { animation: fadeIn 0.5s ease forwards; } .module:nth-child(1) { animation-delay: 0.1s; } .module:nth-child(2) { animation-delay: 0.2s; } .module:nth-child(3) { animation-delay: 0.3s; } .module:nth-child(4) { animation-delay: 0.4s; } .path-item:nth-child(1) { animation-delay: 0.3s; } .path-item:nth-child(2) { animation-delay: 0.4s; } .path-item:nth-child(3) { animation-delay: 0.5s; } /* Focus state for better accessibility */ input:focus, button:focus, .module:focus, .path-item:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; } /* Theme indicator with transition */ .theme-switch { position: absolute; top: 20px; right: 20px; width: 40px; height: 20px; background-color: rgba(108, 122, 137, 0.2); border-radius: 20px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; padding: 2px; } .theme-toggle { width: 16px; height: 16px; border-radius: 50%; background-color: white; transition: var(--transition); transform: translateX(0); } .theme-switch.dark .theme-toggle { transform: translateX(20px); background-color: var(--accent-color); } /* Badge for new content */ .badge-new { position: absolute; top: 10px; right: 10px; background-color: #ff9500; color: white; font-size: 0.7rem; padding: 3px 6px; border-radius: 4px; font-weight: 600; transform: rotate(5deg); } /* Loading skeleton animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .skeleton { background: linear-gradient(to right, #f6f7f8 8%, #edeef1 18%, #f6f7f8 33%); background-size: 800px 104px; animation: shimmer 1.5s infinite linear; border-radius: var(--radius); } /* Achievement badges */ .achievements { display: flex; gap: 10px; margin-top: 10px; } .badge { width: 25px; height: 25px; border-radius: 50%; background-color: #f0f4f9; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 0.7rem; transition: var(--transition); cursor: help; position: relative; } .badge:hover { transform: scale(1.2); background-color: var(--primary-color); color: white; } .badge-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--text-color); color: white; padding: 5px 8px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } .badge:hover .badge-tooltip { opacity: 1; } /* Custom styles for module backgrounds */ .bg-gradient-1 { background: linear-gradient(135deg, #667eea, #764ba2); } .bg-gradient-2 { background: linear-gradient(135deg, #fd746c, #ff9068); } .bg-gradient-3 { background: linear-gradient(135deg, #6a11cb, #2575fc); } .bg-gradient-4 { background: linear-gradient(135deg, #11998e, #38ef7d); } .bg-gradient-5 { background: linear-gradient(135deg, #00b09b, #96c93d); } .bg-gradient-6 { background: linear-gradient(135deg, #ff416c, #ff4b2b); } /* Floating action button */ .fab { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; transition: var(--transition); z-index: 10; } .fab:hover { transform: scale(1.1); background-color: var(--accent-color); } /* Inline code format */ .code-snippet { font-family: 'Roboto Mono', monospace; background-color: rgba(108, 122, 137, 0.1); padding: 2px 5px; border-radius: 4px; font-size: 0.85em; color: var(--primary-color); } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> </head> <body> <div class="dashboard"> <div class="dashboard-header"> <div class="dashboard-title"> <h1>Learning Path Dashboard</h1> <p>Track your progress and explore new modules</p> </div> <div class="avatar" tabindex="0"> JS </div> </div> <div class="search-bar"> <i class="fas fa-search"></i> <input type="text" placeholder="Search for modules, paths, or topics..."> </div> <div class="tabs"> <div class="tab active">All Modules</div> <div class="tab">In Progress</div> <div class="tab">Completed</div> <div class="tab">Bookmarked</div> <div class="tab">Recommended</div> </div> <div class="section-title"> <span>Recent Modules</span> <span class="view-all">View All</span> </div> <div class="modules-grid"> <div class="module active" tabindex="0"> <div class="module-icon bg-gradient-1"> <i class="fas fa-code"></i> </div> <div class="module-title">Advanced CSS Layouts</div> <div class="module-desc">Master CSS Grid and Flexbox for responsive, complex layouts</div> <div class="module-progress"> <div class="progress-bar bg-gradient-1" style="width: 75%"></div> </div> <div class="notification-dot"></div> </div> <div class="module" tabindex="0"> <div class="module-icon bg-gradient-2"> <i class="fas fa-database"></i> </div> <div class="module-title">SQL Fundamentals</div> <div class="module-desc">Learn queries, joins, and database design principles</div> <div class="module-progress"> <div class="progress-bar bg-gradient-2" style="width: 45%"></div> </div> </div> <div class="module" tabindex="0"> <div class="module-icon bg-gradient-3"> <i class="fas fa-chart-line"></i> </div> <div class="module-title">Data Visualization</div> <div class="module-desc">Create interactive visuals with D3.js and modern chart libraries</div> <div class="module-progress"> <div class="progress-bar bg-gradient-3" style="width: 30%"></div> </div> <div class="badge-new">NEW</div> </div> <div class="module" tabindex="0"> <div class="module-icon bg-gradient-4"> <i class="fas fa-brain"></i> </div> <div class="module-title">ML Basics with Python</div> <div class="module-desc">Introduction to machine learning algorithms and implementations</div> <div class="module-progress"> <div class="progress-bar bg-gradient-4" style="width: 10%"></div> </div> </div> </div> <div class="section-title"> <span>Learning Paths</span> <span class="view-all">View All</span> </div> <div class="learning-paths"> <div class="path-item" tabindex="0"> <div class="path-icon bg-gradient-5"> <i class="fas fa-laptop-code"></i> </div> <div class="path-details"> <div class="path-title">Full-Stack Web Development</div> <div class="path-meta"> <span><i class="fas fa-book"></i> 12 Modules</span> <span><i class="fas fa-clock"></i> 24 Hours</span> <span><i class="fas fa-user-graduate"></i> 1,235 Students</span> </div> <div class="achievements"> <div class="badge"> <i class="fas fa-fire"></i> <div class="badge-tooltip">5-day streak</div> </div> <div class="badge"> <i class="fas fa-star"></i> <div class="badge-tooltip">Top performer</div> </div> </div> </div> <div class="path-action"> <i class="fas fa-arrow-right"></i> </div> </div> <div class="path-item" tabindex="0"> <div class="path-icon bg-gradient-6"> <i class="fas fa-server"></i> </div> <div class="path-details"> <div class="path-title">Cloud Infrastructure & DevOps</div> <div class="path-meta"> <span><i class="fas fa-book"></i> 9 Modules</span> <span><i class="fas fa-clock"></i> 18 Hours</span> <span><i class="fas fa-user-graduate"></i> 843 Students</span> </div> <div class="achievements"> <div class="badge"> <i class="fas fa-bolt"></i> <div class="badge-tooltip">Fast progress</div> </div> </div> </div> <div class="path-action"> <i class="fas fa-arrow-right"></i> </div> </div> <div class="path-item" tabindex="0"> <div class="path-icon bg-gradient-1"> <i class="fas fa-mobile-alt"></i> </div> <div class="path-details"> <div class="path-title">Mobile App Development with React Native</div> <div class="path-meta"> <span><i class="fas fa-book"></i> 10 Modules</span> <span><i class="fas fa-clock"></i> 20 Hours</span> <span><i class="fas fa-user-graduate"></i> 976 Students</span> </div> <div class="achievements"> <div class="badge"> <i class="fas fa-certificate"></i> <div class="badge-tooltip">Certification ready</div> </div> </div> </div> <div class="path-action"> <i class="fas fa-arrow-right"></i> </div> </div> </div> <div class="fab" id="fab"> <i class="fas fa-plus"></i> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animate progress bars on load const progressBars = document.querySelectorAll('.progress-bar'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 300); }); // Tab switching functionality const tabs = document.querySelectorAll('.tab'); tabs.forEach(tab => { tab.addEventListener('click', function() { // Remove active class from all tabs tabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); // Here we'd normally load different content based on the selected tab // For demo purposes, we'll just show a subtle visual change const moduleGrid = document.querySelector('.modules-grid'); moduleGrid.style.opacity = '0.8'; setTimeout(() => { moduleGrid.style.opacity = '1'; }, 300); }); }); // Module click effect const modules = document.querySelectorAll('.module'); modules.forEach(module => { module.addEventListener('click', function() { // Remove active class from all modules modules.forEach(m => m.classList.remove('active')); // Add active class to clicked module this.classList.add('active'); // Remove notification dot when clicked const notificationDot = this.querySelector('.notification-dot'); if (notificationDot) { notificationDot.style.opacity = '0'; setTimeout(() => { notificationDot.remove(); }, 300); } }); }); // Search functionality const searchInput = document.querySelector('.search-bar input'); searchInput.addEventListener('input', function() { const query = this.value.toLowerCase(); if (query.length > 0) { // Filter modules modules.forEach(module => { const title = module.querySelector('.module-title').innerText.toLowerCase(); const desc = module.querySelector('.module-desc').innerText.toLowerCase(); if (title.includes(query) || desc.includes(query)) { module.style.display = 'flex'; } else { module.style.display = 'none'; } }); // Filter learning paths const pathItems = document.querySelectorAll('.path-item'); pathItems.forEach(path => { const title = path.querySelector('.path-title').innerText.toLowerCase(); if (title.includes(query)) { path.style.display = 'flex'; } else { path.style.display = 'none'; } }); } else { // Reset display if query is empty modules.forEach(module => module.style.display = 'flex'); const pathItems = document.querySelectorAll('.path-item'); pathItems.forEach(path => path.style.display = 'flex'); } }); // Floating action button const fab = document.getElementById('fab'); fab.addEventListener('click', function() { // Create a new module element const newModule = document.createElement('div'); newModule.className = 'module'; newModule.setAttribute('tabindex', '0'); newModule.innerHTML = ` <div class="module-icon bg-gradient-3"> <i class="fas fa-rocket"></i> </div> <div class="module-title">New Custom Module</div> <div class="module-desc">Start a new learning journey by customizing this module</div> <div class="module-progress"> <div class="progress-bar bg-gradient-3" style="width: 0%"></div> </div> <div class="badge-new">NEW</div> `; // Add it to the grid const grid = document.querySelector('.modules-grid'); grid.prepend(newModule); // Apply the fadeIn animation newModule.style.opacity = '0'; newModule.style.transform = 'translateY(20px)'; setTimeout(() => { newModule.style.opacity = '1'; newModule.style.transform = 'translateY(0)'; }, 10); // Add the click event for the new module newModule.addEventListener('click', function() { modules.forEach(m => m.classList.remove('active')); this.classList.add('active'); const badge = this.querySelector('.badge-new'); if (badge) { badge.style.opacity = '0'; setTimeout(() => { badge.remove(); }, 300); } }); // Visual feedback for FAB click fab.style.transform = 'scale(0.8)'; setTimeout(() => { fab.style.transform = 'scale(1)'; }, 200); }); // Add subtle hover state to path items const pathItems = document.querySelectorAll('.path-item'); pathItems.forEach(item => { item.addEventListener('mouseenter', function() { const action = this.querySelector('.path-action'); action.style.backgroundColor = 'var(--secondary-color)'; action.style.color = 'white'; }); item.addEventListener('mouseleave', function() { const action = this.querySelector('.path-action'); action.style.backgroundColor = 'rgba(90, 109, 208, 0.1)'; action.style.color = 'var(--secondary-color)'; }); }); // Easter egg: Konami code let konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']; let konamiIndex = 0; document.addEventListener('keydown', function(e) { if (e.key === konamiCode[konamiIndex]) { konamiIndex++; if (konamiIndex === konamiCode.length) { // Activate easter egg document.body.style.background = 'linear-gradient(135deg, #8a2387, #e94057, #f27121)'; document.body.style.transition = 'background 2s'; // Reset konamiIndex = 0; // Reset back after 3 seconds setTimeout(() => { document.body.style.background = 'var(--background)'; }, 3000); } } else { konamiIndex = 0; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HealthEase Patient Portal</title> <style> :root { --primary: #4A8FE7; --primary-light: #6BA5F2; --secondary: #5CC6BA; --tertiary: #F8C5B9; --text: #2E4756; --light-text: #5E7A8A; --background: #F9FBFD; --white: #FFFFFF; --shadow-soft: 0 8px 24px rgba(149, 175, 211, 0.15); --shadow-medium: 0 12px 32px rgba(149, 175, 211, 0.25); --shadow-hover: 0 16px 36px rgba(149, 175, 211, 0.35); --highlight: #F1F9FF; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } body { background-color: var(--background); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 1.5rem; overflow-x: hidden; } .container { width: 100%; max-width: 650px; padding: 0 1rem; } .header { display: flex; align-items: center; margin-bottom: 2rem; width: 100%; } .logo { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 8px; position: relative; overflow: hidden; box-shadow: var(--shadow-soft); } .logo-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: var(--white); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4.5 20.3 5 21l7.5-3 7.5 3 .5-.7L13 2h-1z'/%3E%3C/svg%3E") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4.5 20.3 5 21l7.5-3 7.5 3 .5-.7L13 2h-1z'/%3E%3C/svg%3E") no-repeat center / contain; } .logo-text { font-weight: 700; font-size: 1.25rem; color: var(--primary); } h1 { margin-bottom: 1.5rem; font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.3; } .cards-container { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; } .card { background-color: var(--white); border-radius: 12px; padding: 1.5rem; transition: all 0.3s ease; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .card.interactive { cursor: pointer; } .card.interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .card.interactive:active { transform: translateY(-2px); box-shadow: var(--shadow-medium); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .card-title { font-size: 1.125rem; font-weight: 600; color: var(--text); } .card-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--highlight); border-radius: 8px; color: var(--primary); } .card-content { font-size: 0.95rem; line-height: 1.5; color: var(--light-text); margin-bottom: 1rem; } .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; } .info-item { display: flex; flex-direction: column; } .info-label { font-size: 0.8rem; color: var(--light-text); margin-bottom: 0.25rem; } .info-value { font-size: 0.95rem; font-weight: 500; color: var(--text); } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; } .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; background-color: rgba(90, 198, 186, 0.1); border-radius: 12px; font-size: 0.8rem; font-weight: 500; color: var(--secondary); } .badge.urgent { background-color: rgba(242, 110, 90, 0.1); color: #F26E5A; } .form-container { width: 100%; background-color: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow 0.3s ease; } .form-container:hover { box-shadow: var(--shadow-medium); } .form-header { padding: 1.5rem; background-color: var(--highlight); border-bottom: 1px solid rgba(149, 175, 211, 0.1); } .form-title { font-size: 1.25rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; } .form-subtitle { font-size: 0.9rem; color: var(--light-text); line-height: 1.5; } .form-body { padding: 1.5rem; } .form-group { margin-bottom: 1.25rem; } .form-label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--text); } .form-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid rgba(149, 175, 211, 0.3); border-radius: 8px; font-size: 0.95rem; color: var(--text); background-color: var(--white); transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(149, 175, 211, 0.05); } .form-input:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(74, 143, 231, 0.15); } .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235E7A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.5rem; } .input-hint { margin-top: 0.5rem; font-size: 0.8rem; color: var(--light-text); } .form-checkbox { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1rem; } .checkbox-input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid rgba(149, 175, 211, 0.3); border-radius: 6px; margin: 0; position: relative; cursor: pointer; background-color: var(--white); transition: all 0.2s ease; flex-shrink: 0; margin-top: 0.125rem; } .checkbox-input:checked { background-color: var(--primary); border-color: var(--primary); } .checkbox-input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background-color: var(--white); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") no-repeat center / contain; } .checkbox-input:focus { box-shadow: 0 0 0 3px rgba(74, 143, 231, 0.15); } .checkbox-label { font-size: 0.9rem; color: var(--light-text); line-height: 1.5; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; border-radius: 8px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--primary-light); box-shadow: 0 4px 12px rgba(74, 143, 231, 0.25); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(74, 143, 231, 0.2); } .btn-icon { display: inline-flex; width: 20px; height: 20px; margin-right: 0.5rem; } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 143, 231, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(74, 143, 231, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 143, 231, 0); } } .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(30deg); animation: shimmer 2.5s infinite; z-index: 1; pointer-events: none; } @keyframes shimmer { 0% { transform: translate(-100%, -100%) rotate(30deg); } 100% { transform: translate(100%, 100%) rotate(30deg); } } .progress-indicator { display: flex; justify-content: space-between; margin: 2rem 0 1rem; } .progress-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; width: 33.33%; } .step-number { width: 30px; height: 30px; border-radius: 50%; background-color: var(--highlight); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; position: relative; transition: all 0.3s ease; } .step-number.active { background-color: var(--primary); color: white; box-shadow: 0 0 0 4px rgba(74, 143, 231, 0.2); } .step-number::before { content: ''; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); height: 2px; width: 100%; background-color: var(--highlight); margin-right: 5px; } .progress-step:first-child .step-number::before { display: none; } .step-name { font-size: 0.8rem; color: var(--light-text); text-align: center; transition: all 0.3s ease; } .step-name.active { color: var(--primary); font-weight: 500; } /* Responsive styles */ @media screen and (max-width: 500px) { .info-grid { grid-template-columns: 1fr; } .form-header, .form-body { padding: 1.25rem; } .cards-container { gap: 1.25rem; } .step-name { font-size: 0.7rem; } } /* Animation for card actions */ .card-action { position: relative; overflow: hidden; } .card-action::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(74, 143, 231, 0.05); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; z-index: 0; } .card-action:hover::before { transform: scaleX(1); } /* Patterns */ .pattern-bg { position: absolute; top: 0; right: 0; width: 100px; height: 100px; background-image: radial-gradient(var(--tertiary) 1px, transparent 1px); background-size: 10px 10px; opacity: 0.1; pointer-events: none; border-radius: 0 12px 0 0; } .toggle-view { display: flex; align-items: center; margin-left: auto; background: var(--highlight); border-radius: 20px; padding: 0.25rem; gap: 0.25rem; } .toggle-option { padding: 0.35rem 0.75rem; border-radius: 16px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; color: var(--light-text); } .toggle-option.active { background-color: var(--white); color: var(--primary); box-shadow: var(--shadow-soft); } /* Form success message */ .form-success { display: none; text-align: center; padding: 2rem; } .success-icon { width: 64px; height: 64px; background-color: rgba(92, 198, 186, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .success-icon::after { content: ""; width: 32px; height: 32px; background-color: var(--secondary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") no-repeat center / contain; } .success-title { font-size: 1.5rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem; } .success-message { font-size: 0.95rem; color: var(--light-text); line-height: 1.5; margin-bottom: 1.5rem; } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">HealthEase</div> </div> <div class="toggle-view"> <div class="toggle-option active" id="formView">Form</div> <div class="toggle-option" id="infoView">Information</div> </div> </div> <div id="formSection"> <h1>Complete your medical history</h1> <div class="form-container"> <div class="form-header"> <div class="form-title">Patient Information Form</div> <div class="form-subtitle">Please fill out this form accurately to help us provide you with the best care possible.</div> </div> <div class="form-body"> <div class="progress-indicator"> <div class="progress-step"> <div class="step-number active">1</div> <div class="step-name active">Personal Info</div> </div> <div class="progress-step"> <div class="step-number">2</div> <div class="step-name">Medical History</div> </div> <div class="progress-step"> <div class="step-number">3</div> <div class="step-name">Confirmation</div> </div> </div> <form id="patientForm"> <div class="form-group"> <label class="form-label" for="fullName">Full Name</label> <input type="text" id="fullName" class="form-input" placeholder="Enter your full name"> </div> <div class="form-group"> <label class="form-label" for="dob">Date of Birth</label> <input type="date" id="dob" class="form-input"> </div> <div class="form-group"> <label class="form-label" for="bloodType">Blood Type</label> <select id="bloodType" class="form-input form-select"> <option value="">Select blood type</option> <option value="A+">A+</option> <option value="A-">A-</option> <option value="B+">B+</option> <option value="B-">B-</option> <option value="AB+">AB+</option> <option value="AB-">AB-</option> <option value="O+">O+</option> <option value="O-">O-</option> <option value="unknown">Unknown</option> </select> <div class="input-hint">This helps us prepare for any medical procedures that may require blood transfusions.</div> </div> <div class="form-group"> <label class="form-label" for="allergies">Known Allergies</label> <input type="text" id="allergies" class="form-input" placeholder="e.g., Penicillin, Peanuts, etc. (separate with commas)"> <div class="input-hint">List all allergies to medications, foods, or other substances.</div> </div> <div class="form-checkbox"> <input type="checkbox" id="termsAgree" class="checkbox-input"> <label for="termsAgree" class="checkbox-label">I confirm that the information provided is accurate to the best of my knowledge, and I consent to share my medical information with healthcare providers involved in my care.</label> </div> <div style="display: flex; justify-content: space-between; margin-top: 2rem;"> <button type="button" class="btn btn-primary" id="saveForm"> <span class="btn-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="M5 12h14"></path> <path d="M12 5l7 7-7 7"></path> </svg> </span> Continue to Medical History </button> </div> </form> <div class="form-success" id="formSuccess"> <div class="success-icon"></div> <div class="success-title">Information Saved</div> <div class="success-message">Your personal information has been successfully saved. You can now continue to the next step or return to edit this information later.</div> <button class="btn btn-primary" id="viewInfoBtn"> View Your Information </button> </div> </div> </div> </div> <div id="infoSection" style="display: none;"> <h1>Your Medical Information</h1> <div class="cards-container"> <div class="card interactive shimmer"> <div class="pattern-bg"></div> <div class="card-header"> <div class="card-title">Upcoming Appointment</div> <div class="card-icon pulse-animation"> <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> </div> </div> <div class="card-content"> You have an upcoming appointment with Dr. Sarah Chen for your annual physical examination. </div> <div class="info-grid"> <div class="info-item"> <div class="info-label">Date</div> <div class="info-value">May 15, 2023</div> </div> <div class="info-item"> <div class="info-label">Time</div> <div class="info-value">10:30 AM</div> </div> <div class="info-item"> <div class="info-label">Provider</div> <div class="info-value">Dr. Sarah Chen</div> </div> <div class="info-item"> <div class="info-label">Location</div> <div class="info-value">Main Clinic, Room 204</div> </div> </div> <div class="card-footer"> <div class="badge">Annual Physical</div> <div class="card-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> </div> </div> </div> <div class="card interactive"> <div class="card-header"> <div class="card-title">Medication Schedule</div> <div class="card-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="M12 2a9 9 0 0 1 9 9c0 3.6-3.84 6.68-9 10-5.16-3.32-9-6.4-9-10a9 9 0 0 1 9-9z"></path> </svg> </div> </div> <div class="card-content"> Your current prescription for Lisinopril requires daily intake to help manage your blood pressure. </div> <div class="info-grid"> <div class="info-item"> <div class="info-label">Medication</div> <div class="info-value">Lisinopril 10mg</div> </div> <div class="info-item"> <div class="info-label">Frequency</div> <div class="info-value">Once daily</div> </div> <div class="info-item"> <div class="info-label">Time</div> <div class="info-value">Morning with food</div> </div> <div class="info-item"> <div class="info-label">Refills</div> <div class="info-value">2 remaining</div> </div> </div> <div class="card-footer"> <div class="badge urgent">Refill Soon</div> <div class="card-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> </div> </div> </div> <div class="card interactive"> <div class="card-header"> <div class="card-title">Recent Lab Results</div> <div class="card-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="M22 12h-4l-3 9L9 3l-3 9H2"></path> </svg> </div> </div> <div class="card-content"> Your comprehensive metabolic panel has been analyzed. All values are within normal ranges. </div> <div class="info-grid"> <div class="info-item"> <div class="info-label">Test Date</div> <div class="info-value">April 28, 2023</div> </div> <div class="info-item"> <div class="info-label">Test Type</div> <div class="info-value">Comprehensive Panel</div> </div> <div class="info-item"> <div class="info-label">Cholesterol</div> <div class="info-value">185 mg/dL</div> </div> <div class="info-item"> <div class="info-label">Blood Glucose</div> <div class="info-value">92 mg/dL</div> </div> </div> <div class="card-footer"> <div class="badge">Normal Results</div> <div class="card-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> </div> </div> </div> </div> <button class="btn btn-primary" id="backToFormBtn"> <span class="btn-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="M19 12H5"></path> <path d="M12 19l-7-7 7-7"></path> </svg> </span> Back to Patient Form </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Toggle between form and info views const formView = document.getElementById('formView'); const infoView = document.getElementById('infoView'); const formSection = document.getElementById('formSection'); const infoSection = document.getElementById('infoSection'); formView.addEventListener('click', function() { formView.classList.add('active'); infoView.classList.remove('active'); formSection.style.display = 'block'; infoSection.style.display = 'none'; }); infoView.addEventListener('click', function() { infoView.classList.add('active'); formView.classList.remove('active'); infoSection.style.display = 'block'; formSection.style.display = 'none'; }); // Back to form button const backToFormBtn = document.getElementById('backToFormBtn'); backToFormBtn.addEventListener('click', function() { formView.classList.add('active'); infoView.classList.remove('active'); formSection.style.display = 'block'; infoSection.style.display = 'none'; }); // Form submission handling const saveForm = document.getElementById('saveForm'); const patientForm = document.getElementById('patientForm'); const formSuccess = document.getElementById('formSuccess'); const viewInfoBtn = document.getElementById('viewInfoBtn'); saveForm.addEventListener('click', function(e) { e.preventDefault(); // Simulate form validation let isValid = true; const inputs = patientForm.querySelectorAll('.form-input'); const checkbox = document.getElementById('termsAgree'); inputs.forEach(input => { if (input.value.trim() === '' && input.id !== 'allergies') { input.style.borderColor = '#F26E5A'; isValid = false; } else { input.style.borderColor = 'rgba(149, 175, 211, 0.3)'; } }); if (!checkbox.checked) { checkbox.style.borderColor = '#F26E5A'; isValid = false; } else { checkbox.style.borderColor = 'rgba(149, 175, 211, 0.3)'; } if (isValid) { patientForm.style.display = 'none'; formSuccess.style.display = 'block'; } }); viewInfoBtn.addEventListener('click', function() { infoView.classList.add('active'); formView.classList.remove('active'); infoSection.style.display = 'block'; formSection.style.display = 'none'; }); // Card hover effects for interactive cards const interactiveCards = document.querySelector
