Creating visually appealing 3D buttons can significantly enhance the user experience on your website. These buttons not only add depth but also make interactions more engaging.
In this article, we will explore 10 stunning 3D button examples that you can easily incorporate into your design projects. Each example showcases unique styles and techniques to inspire your next UI creation.
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 designing pixel-perfect 3D buttons a breeze. Loved by designers and developers alike, it ensures every UI element is crafted to perfection.
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 elevate your UI design game? With Subframe, you can create pixel-perfect 3D buttons and stunning interfaces in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Experience the ease and power of Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuantumVault Financial App</title> <style> :root { --primary-blue: #0066cc; --secondary-blue: #003366; --highlight-blue: #4d94ff; --light-grey: #e6e9ed; --medium-grey: #8c9cb0; --dark-grey: #2c3e50; --shadow-color: rgba(0, 0, 30, 0.3); --success-green: #00cc99; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #f5f7fa 0%, #e2e5e8 100%); overflow: hidden; } .app-container { width: 700px; height: 700px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; } .nav-section { display: flex; justify-content: space-between; align-items: center; padding: 25px 30px 15px; background: linear-gradient(to bottom, var(--secondary-blue), var(--primary-blue)); border-radius: 20px 20px 0 0; box-shadow: 0 4px 15px var(--shadow-color); color: white; z-index: 10; } .logo { font-weight: 700; font-size: 24px; display: flex; align-items: center; gap: 10px; } .logo-icon { width: 32px; height: 32px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .logo-icon svg { width: 22px; height: 22px; fill: var(--primary-blue); } .user-section { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--primary-blue); font-weight: 700; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: 2px solid rgba(255, 255, 255, 0.7); } .main-section { flex: 1; background-color: #f9fafc; padding: 30px; border-radius: 0 0 20px 20px; overflow-y: auto; position: relative; box-shadow: 0 4px 15px var(--shadow-color); } .balance-card { background: linear-gradient(145deg, var(--secondary-blue), var(--primary-blue)); border-radius: 14px; padding: 25px; margin-bottom: 30px; color: white; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 51, 102, 0.3); transition: transform 0.3s ease; } .balance-card:hover { transform: translateY(-5px); } .balance-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } .balance-title { font-size: 16px; margin-bottom: 10px; font-weight: 500; opacity: 0.9; letter-spacing: 0.5px; } .balance-amount { font-size: 36px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5px; position: relative; } .card-number { display: flex; justify-content: space-between; font-size: 14px; opacity: 0.8; } .grid-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } .metallic-button { background: linear-gradient(145deg, #f0f0f0, #d5d9de); border: none; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; position: relative; color: var(--dark-grey); font-weight: 600; text-align: center; transition: all 0.2s ease; box-shadow: 0 6px 12px rgba(0, 0, 30, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(0, 0, 30, 0.1); overflow: hidden; } .metallic-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0)); border-radius: 12px 12px 0 0; pointer-events: none; } .metallic-button:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 30, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(0, 0, 30, 0.1); } .metallic-button:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(0, 0, 30, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 0, 30, 0.2); background: linear-gradient(145deg, #e0e4e8, #d0d4d8); } .button-blue { background: linear-gradient(145deg, var(--primary-blue), var(--secondary-blue)); color: white; box-shadow: 0 6px 12px rgba(0, 51, 102, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 30, 0.2); } .button-blue::before { background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)); } .button-blue:hover { background: linear-gradient(145deg, var(--highlight-blue), var(--primary-blue)); box-shadow: 0 8px 16px rgba(0, 51, 102, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 30, 0.2); } .button-blue:active { background: linear-gradient(145deg, var(--secondary-blue), var(--primary-blue)); box-shadow: 0 3px 6px rgba(0, 51, 102, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 30, 0.3); } .button-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .recent-transactions { margin-top: 20px; } .section-title { font-size: 18px; font-weight: 600; color: var(--dark-grey); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .transaction-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-radius: 12px; margin-bottom: 12px; background: white; box-shadow: 0 2px 8px rgba(0, 0, 30, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .transaction-item:hover { transform: translateX(3px); box-shadow: 0 4px 12px rgba(0, 0, 30, 0.1); } .transaction-left { display: flex; align-items: center; gap: 15px; } .transaction-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--light-grey); } .transaction-info { display: flex; flex-direction: column; } .transaction-name { font-weight: 600; color: var(--dark-grey); } .transaction-date { font-size: 12px; color: var(--medium-grey); margin-top: 2px; } .transaction-amount { font-weight: 600; } .amount-positive { color: var(--success-green); } .amount-negative { color: #e74c3c; } /* Transfer screen */ .transfer-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 20; display: none; flex-direction: column; padding: 30px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .transfer-screen.active { display: flex; transform: translateY(0); } .screen-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .back-button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--light-grey); transition: background 0.2s ease; } .back-button:hover { background: #d5d9de; } .screen-title { font-size: 22px; font-weight: 700; color: var(--dark-grey); } .transfer-form { display: flex; flex-direction: column; gap: 25px; } .form-group { display: flex; flex-direction: column; gap: 10px; } .form-label { font-size: 14px; font-weight: 600; color: var(--medium-grey); } .form-input { padding: 16px; border-radius: 12px; border: 2px solid var(--light-grey); font-size: 16px; transition: all 0.2s ease; background: #f9fafb; } .form-input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); } .submit-button { margin-top: 20px; padding: 18px; border-radius: 12px; border: none; background: linear-gradient(145deg, var(--primary-blue), var(--secondary-blue)); color: white; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 6px 12px rgba(0, 51, 102, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 30, 0.2); position: relative; overflow: hidden; transition: all 0.3s ease; } .submit-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)); border-radius: 12px 12px 0 0; pointer-events: none; } .submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 51, 102, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 30, 0.2); background: linear-gradient(145deg, var(--highlight-blue), var(--primary-blue)); } .submit-button:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(0, 51, 102, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 30, 0.3); } /* Confirmation modal */ .confirmation-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 30, 0.5); display: none; align-items: center; justify-content: center; z-index: 100; opacity: 0; transition: opacity 0.3s ease; } .confirmation-modal.active { display: flex; opacity: 1; } .modal-content { width: 90%; max-width: 400px; background: white; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 20px 40px rgba(0, 0, 30, 0.3); transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .confirmation-modal.active .modal-content { transform: scale(1); } .success-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--success-green); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: white; font-size: 30px; } .modal-title { font-size: 24px; font-weight: 700; color: var(--dark-grey); margin-bottom: 10px; text-align: center; } .modal-message { text-align: center; color: var(--medium-grey); margin-bottom: 25px; } .close-modal { padding: 14px 25px; border-radius: 10px; border: none; background: var(--primary-blue); color: white; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .close-modal:hover { background: var(--highlight-blue); } .fingerprint-animation { width: 70px; height: 70px; position: relative; margin: 20px 0; } .fingerprint-base { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #f0f2f5; display: flex; align-items: center; justify-content: center; } .fingerprint-icon { width: 35px; height: 35px; opacity: 0.7; } .fingerprint-scan { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(to bottom, rgba(0,102,204,0), rgba(0,102,204,0.2)); animation: scanAnimation 2s infinite; opacity: 0; } @keyframes scanAnimation { 0% { transform: translateY(70px); opacity: 0.8; } 100% { transform: translateY(-10px); opacity: 0; } } .pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: transparent; border: 3px solid var(--primary-blue); opacity: 0; animation: pulseAnimation 2s infinite; } @keyframes pulseAnimation { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } .loading-indicator { display: none; margin: 20px 0; width: 100%; height: 4px; background: var(--light-grey); border-radius: 2px; overflow: hidden; position: relative; } .loading-bar { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--primary-blue); border-radius: 2px; animation: loadingAnimation 1.5s infinite; } @keyframes loadingAnimation { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* Responsive adjustments */ @media (max-width: 600px) { .nav-section { padding: 20px 20px 10px; } .main-section { padding: 20px; } .grid-section { grid-template-columns: 1fr; } .balance-amount { font-size: 30px; } } </style> </head> <body> <div class="app-container"> <div class="nav-section"> <div class="logo"> <div class="logo-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <path d="M4 10h16" stroke="white" stroke-width="2"></path> <path d="M7 15h3" stroke="white" stroke-width="2"></path> <path d="M7 18h6" stroke="white" stroke-width="2"></path> </svg> </div> <span>QuantumVault</span> </div> <div class="user-section"> <div class="user-avatar">JD</div> </div> </div> <div class="main-section"> <div class="balance-card"> <div class="balance-title">Available Balance</div> <div class="balance-amount">$24,875.12</div> <div class="card-number"> <span>•••• •••• •••• 5742</span> <span>09/25</span> </div> </div> <div class="grid-section"> <button class="metallic-button button-blue" id="send-button"> <div class="button-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none"> <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Send Money</span> </button> <button class="metallic-button"> <div class="button-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none"> <path d="M19 9l-7 7-7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Receive Funds</span> </button> <button class="metallic-button"> <div class="button-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke-width="2"/> <line x1="16" y1="2" x2="16" y2="6" stroke-width="2"/> <line x1="8" y1="2" x2="8" y2="6" stroke-width="2"/> <line x1="3" y1="10" x2="21" y2="10" stroke-width="2"/> </svg> </div> <span>Scheduled Payments</span> </button> <button class="metallic-button"> <div class="button-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Investments</span> </button> </div> <div class="recent-transactions"> <div class="section-title"> <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none"> <path d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Recent Transactions </div> <div class="transaction-item"> <div class="transaction-left"> <div class="transaction-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#0066cc" fill="none"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-info"> <div class="transaction-name">Vanguard Fund</div> <div class="transaction-date">Today, 10:42 AM</div> </div> </div> <div class="transaction-amount amount-positive">+$450.00</div> </div> <div class="transaction-item"> <div class="transaction-left"> <div class="transaction-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#e74c3c" fill="none"> <path d="M5 13l4 4L19 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-info"> <div class="transaction-name">Tech Gadgets Store</div> <div class="transaction-date">Yesterday, 3:15 PM</div> </div> </div> <div class="transaction-amount amount-negative">-$329.99</div> </div> <div class="transaction-item"> <div class="transaction-left"> <div class="transaction-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#e74c3c" fill="none"> <path d="M5 13l4 4L19 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-info"> <div class="transaction-name">Premier Dining</div> <div class="transaction-date">Apr 20, 8:30 PM</div> </div> </div> <div class="transaction-amount amount-negative">-$142.50</div> </div> <div class="transaction-item"> <div class="transaction-left"> <div class="transaction-icon"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#0066cc" fill="none"> <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-info"> <div class="transaction-name">Client Payment</div> <div class="transaction-date">Apr 18, 11:23 AM</div> </div> </div> <div class="transaction-amount amount-positive">+$1,250.00</div> </div> </div> </div> <!-- Transfer Screen --> <div class="transfer-screen" id="transfer-screen"> <div class="screen-header"> <div class="back-button" id="back-button"> <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" fill="none"> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="screen-title">Transfer Money</div> <div style="width: 40px;"></div> </div> <div class="transfer-form"> <div class="form-group"> <div class="form-label">Recipient</div> <input type="text" class="form-input" placeholder="Name or account number" id="recipient-input"> </div> <div class="form-group"> <div class="form-label">Amount</div> <input type="text" class="form-input" placeholder="0.00" id="amount-input"> </div> <div class="form-group"> <div class="form-label">Purpose</div> <input type="text" class="form-input" placeholder="What's this for?" id="purpose-input"> </div> <div class="loading-indicator" id="loading-indicator"> <div class="loading-bar"></div> </div> <div class="fingerprint-animation" id="fingerprint-animation"> <div class="fingerprint-base"> <svg class="fingerprint-icon" viewBox="0 0 24 24" stroke="currentColor" fill="none"> <path d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04a17.917 17.917 0 0 1-2.995-5.484M12 11c0 5.591-2.878 10.713-7.476 13.5M21.485 11.658a17.917 17.917 0 0 1-3.813 9.317m-1.548-3.515a14.92 14.92 0 0 1-1.516 3.017M12 11c0 1.593.097 3.151.279 4.665M18.985 7.47A17.973 17.973 0 0 1 12 11c0 3.906 1.236 7.539 3.338 10.517M12.553 18.66A16.17 16.17 0 0 0 12 11c0-2.671.334-5.437.964-8.001M15.912 15.461A19.937 19.937 0 0 0 12 11c0-2.217.405-4.386 1.15-6.445M7.049 15.655a19.937 19.937 0 0 1-.8-4.655c0-2.538.531-4.955 1.482-7.138M20.042 8.542a17.96 17.96 0 0 0-2.225-2.814M12 11c0-.388-.015-.772-.046-1.153M9.568 3.51A18.02 18.02 0 0 1 12 3c3.373 0 6.509.972 9.167 2.645" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="fingerprint-scan"></div> <div class="pulse"></div> </div> <button class="submit-button" id="submit-button">Secure Transfer</button> </div> </div> <!-- Confirmation Modal --> <div class="confirmation-modal" id="confirmation-modal"> <div class="modal-content"> <div class="success-icon"> <svg viewBox="0 0 24 24" width="35" height="35" stroke="currentColor" fill="none"> <path d="M20 6L9 17l-5-5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="modal-title">Transfer Complete!</div> <div class="modal-message">Your funds have been securely sent to the recipient.</div> <button class="close-modal" id="close-modal">Done</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const sendButton = document.getElementById('send-button'); const backButton = document.getElementById('back-button'); const submitButton = document.getElementById('submit-button'); const closeModalButton = document.getElementById('close-modal'); const transferScreen = document.getElementById('transfer-screen'); const confirmationModal = document.getElementById('confirmation-modal'); const fingerprintAnimation = document.getElementById('fingerprint-animation'); const loadingIndicator = document.getElementById('loading-indicator'); // Shiny effect on the balance card const balanceCard = document.querySelector('.balance-card'); balanceCard.addEventListener('mousemove', function(e) { const rect = balanceCard.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const percentX = (x - centerX) / centerX; const percentY = (y - centerY) / centerY; const deg = 5; const rotateX = percentY * deg; const rotateY = -percentX * deg; balanceCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); balanceCard.addEventListener('mouseleave', function() { balanceCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'; }); // Animate buttons on hover const buttons = document.querySelectorAll('.metallic-button'); buttons.forEach(button => { button.addEventListener('mousemove', function(e) { const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; button.style.setProperty('--x-position', `${x}px`); button.style.setProperty('--y-position', `${y}px`); }); }); // Open transfer screen sendButton.addEventListener('click', function() { transferScreen.classList.add('active'); }); // Close transfer screen backButton.addEventListener('click', function() { transferScreen.classList.remove('active'); }); // Submit transfer submitButton.addEventListener('click', function() { const recipientInput = document.getElementById('recipient-input'); const amountInput = document.getElementById('amount-input'); const purposeInput = document.getElementById('purpose-input'); // Basic validation if (!recipientInput.value) { recipientInput.style.borderColor = '#e74c3c'; return; } if (!amountInput.value || isNaN(parseFloat(amountInput.value))) { amountInput.style.borderColor = '#e74c3c'; return; } // Reset validation recipientInput.style.borderColor = ''; amountInput.style.borderColor = ''; // Show loading and fingerprint animation submitButton.style.display = 'none'; fingerprintAnimation.style.display = 'block'; loadingIndicator.style.display = 'block'; // Simulate processing setTimeout(function() { fingerprintAnimation.style.display = 'none'; loadingIndicator.style.display = 'none'; // Show confirmation confirmationModal.classList.add('active'); // Reset form recipientInput.value = ''; amountInput.value = ''; purposeInput.value = ''; submitButton.style.display = 'block'; }, 2500); }); // Close modal closeModalButton.addEventListener('click', function() { confirmationModal.classList.remove('active');
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MediPill App Interface</title> <style> :root { --primary: #4A90E2; --primary-light: #6BA5E9; --primary-dark: #3A7BC8; --secondary: #F8F9FB; --accent: #FF6B6B; --text: #333333; --text-light: #767676; --success: #4CAF50; --warning: #FFC107; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.1); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #F0F4F8; color: var(--text); height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .app-container { width: 100%; max-width: 380px; height: 650px; background-color: white; border-radius: 40px; overflow: hidden; position: relative; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .app-container:hover { transform: scale(1.01); } .app-header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 24px 20px; color: white; text-align: center; position: relative; } .app-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .app-subtitle { font-size: 14px; font-weight: 500; opacity: 0.9; } .profile-avatar { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: bold; font-size: 18px; box-shadow: var(--shadow-md); border: 2px solid rgba(255, 255, 255, 0.3); } .app-content { padding: 20px; height: calc(100% - 90px); overflow-y: auto; } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--text); } .medication-card { background-color: var(--secondary); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; border-left: 4px solid var(--primary); box-shadow: var(--shadow-sm); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .medication-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .medication-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; } .medication-dose { font-size: 14px; color: var(--text-light); margin-bottom: 12px; } .medication-time { display: inline-block; background-color: rgba(74, 144, 226, 0.1); color: var(--primary); padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; } .pill-buttons-container { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .pill-button { position: relative; width: calc(50% - 6px); height: 60px; border-radius: var(--radius-pill); border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: white; text-align: center; transition: all 0.2s ease; padding: 0 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } .pill-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); border-radius: var(--radius-pill); z-index: 1; } .pill-button::after { content: ''; position: absolute; height: 60%; width: 100%; left: 0; top: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); border-radius: var(--radius-pill) var(--radius-pill) 0 0; z-index: 1; } .pill-button:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); } .pill-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1); } .pill-button i { margin-right: 8px; font-size: 18px; } .pill-button.large { width: 100%; margin-top: 12px; background: linear-gradient(135deg, var(--accent), #FF8E8E); } .reminder-card { background-color: white; border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-md); border: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; } .reminder-icon { width: 40px; height: 40px; background-color: rgba(74, 144, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; color: var(--primary); font-size: 18px; } .reminder-info { flex-grow: 1; } .reminder-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .reminder-details { font-size: 13px; color: var(--text-light); } .tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background-color: white; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 0 12px; } .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; cursor: pointer; transition: background-color 0.2s ease; } .tab-item:hover { background-color: rgba(74, 144, 226, 0.1); } .tab-item.active { background-color: rgba(74, 144, 226, 0.15); } .tab-icon { font-size: 24px; color: var(--text-light); margin-bottom: 4px; } .tab-item.active .tab-icon { color: var(--primary); } .tab-label { font-size: 10px; font-weight: 500; color: var(--text-light); } .tab-item.active .tab-label { color: var(--primary); } .success-indicator { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 100px; height: 100px; background-color: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 36px; opacity: 0; z-index: 100; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .success-indicator.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } @media (max-width: 400px) { .app-container { max-width: 100%; height: 100vh; border-radius: 0; } .pill-button { font-size: 14px; } } .progress-bar { width: 100%; height: 6px; background-color: rgba(255, 255, 255, 0.3); border-radius: var(--radius-pill); margin-top: 12px; overflow: hidden; } .progress-fill { height: 100%; background-color: white; width: 75%; border-radius: var(--radius-pill); } .medication-status { position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--success); } .pill-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), transparent); opacity: 0; border-radius: var(--radius-pill); pointer-events: none; z-index: 2; transition: opacity 0.3s ease; } @keyframes pulseEffect { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.7; } } .pill-button:hover .pill-glow { opacity: 0.3; animation: pulseEffect 1.5s infinite; } .take-med-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(76, 175, 80, 0.2); border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left; z-index: 0; } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="profile-avatar">A</div> <h1 class="app-title">MediPill Tracker</h1> <p class="app-subtitle">Your medication companion</p> <div class="progress-bar"> <div class="progress-fill"></div> </div> </div> <div class="app-content"> <h2 class="section-title">Today's Medications</h2> <div class="medication-card"> <div class="medication-status"></div> <h3 class="medication-name">Lisinopril</h3> <p class="medication-dose">10mg - 1 tablet</p> <span class="medication-time">8:00 AM - Taken</span> </div> <div class="medication-card"> <h3 class="medication-name">Metformin</h3> <p class="medication-dose">500mg - 2 tablets</p> <span class="medication-time">1:00 PM - Due now</span> </div> <div class="medication-card"> <h3 class="medication-name">Atorvastatin</h3> <p class="medication-dose">20mg - 1 tablet</p> <span class="medication-time">8:00 PM - Upcoming</span> </div> <h2 class="section-title">Quick Actions</h2> <div class="pill-buttons-container"> <button class="pill-button" id="take-med"> <div class="pill-glow"></div> <div class="take-med-animation"></div> <i>💊</i> Take Medication </button> <button class="pill-button" id="refill"> <div class="pill-glow"></div> <i>🔄</i> Request Refill </button> <button class="pill-button" id="calendar"> <div class="pill-glow"></div> <i>📅</i> Schedule Reminder </button> <button class="pill-button" id="scan"> <div class="pill-glow"></div> <i>📷</i> Scan Prescription </button> <button class="pill-button large" id="emergency"> <div class="pill-glow"></div> <i>⚕️</i> Connect with Doctor </button> </div> <h2 class="section-title">Upcoming Reminders</h2> <div class="reminder-card"> <div class="reminder-icon">💊</div> <div class="reminder-info"> <h3 class="reminder-title">Medication Refill</h3> <p class="reminder-details">Lisinopril - 3 days remaining</p> </div> </div> <div class="reminder-card"> <div class="reminder-icon">🩺</div> <div class="reminder-info"> <h3 class="reminder-title">Doctor Appointment</h3> <p class="reminder-details">Dr. Smith - May 15, 2:30 PM</p> </div> </div> </div> <div class="tab-bar"> <div class="tab-item active"> <div class="tab-icon">💊</div> <div class="tab-label">Meds</div> </div> <div class="tab-item"> <div class="tab-icon">📊</div> <div class="tab-label">Stats</div> </div> <div class="tab-item"> <div class="tab-icon">⏰</div> <div class="tab-label">Reminders</div> </div> <div class="tab-item"> <div class="tab-icon">👤</div> <div class="tab-label">Profile</div> </div> </div> </div> <div class="success-indicator" id="success-indicator">✓</div> <script> document.addEventListener('DOMContentLoaded', function() { // Setup pill buttons const pillButtons = document.querySelectorAll('.pill-button'); const successIndicator = document.getElementById('success-indicator'); pillButtons.forEach(button => { button.addEventListener('click', function() { // Create ripple effect const ripple = document.createElement('div'); ripple.classList.add('pill-glow'); ripple.style.opacity = '0.6'; button.appendChild(ripple); // Show success indicator after a small delay setTimeout(() => { successIndicator.classList.add('show'); // If it's the take medication button, show an animation if (button.id === 'take-med') { const animation = button.querySelector('.take-med-animation'); animation.style.transition = 'transform 0.5s ease-out'; animation.style.transform = 'scaleX(1)'; // Update the medication card to show it as taken const medCard = document.querySelectorAll('.medication-card')[1]; const medTime = medCard.querySelector('.medication-time'); medTime.textContent = '1:00 PM - Taken'; // Add a status indicator const status = document.createElement('div'); status.classList.add('medication-status'); medCard.appendChild(status); } // Hide success indicator after a delay setTimeout(() => { successIndicator.classList.remove('show'); // Reset the animation if needed if (button.id === 'take-med') { const animation = button.querySelector('.take-med-animation'); animation.style.transition = 'none'; animation.style.transform = 'scaleX(0)'; } // Remove the ripple effect button.removeChild(ripple); }, 1500); }, 200); }); }); // Handle tab bar interactions const tabItems = document.querySelectorAll('.tab-item'); tabItems.forEach(tab => { tab.addEventListener('click', function() { // Remove active class from all tabs tabItems.forEach(t => t.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); }); }); // Handle medication card interactions const medicationCards = document.querySelectorAll('.medication-card'); medicationCards.forEach(card => { card.addEventListener('click', function() { // Add a slight pulse animation this.style.transform = 'scale(1.05)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); }); </script> </body> </html>
<html> <head> <style> :root { --primary: #ff8a3d; --primary-light: #ffa76a; --secondary: #3498db; --tertiary: #27ae60; --dark: #2c3e50; --light: #ecf0f1; --shadow: rgba(0, 0, 0, 0.2); --shadow-light: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(140deg, #f6f9fc, #e3ecf5); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .container { max-width: 700px; width: 100%; height: 700px; padding: 20px; margin: 0 auto; display: flex; flex-direction: column; position: relative; overflow: hidden; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; z-index: 10; } .logo { font-weight: 800; font-size: 24px; color: var(--dark); display: flex; align-items: center; } .logo span { color: var(--primary); margin-left: 5px; } .logo-icon { width: 30px; height: 30px; background: var(--primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; box-shadow: 0 3px 8px rgba(255, 138, 61, 0.3); } .logo-icon i { color: white; font-size: 16px; } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; filter: brightness(0.5); z-index: -1; animation: zoomEffect 30s infinite alternate ease-in-out; } @keyframes zoomEffect { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .content { z-index: 1; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; padding: 30px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .content::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary)); } h1 { color: var(--dark); font-size: 2.5rem; margin-bottom: 10px; line-height: 1.2; } h1 span { color: var(--primary); } p { color: var(--dark); margin-bottom: 30px; line-height: 1.6; font-size: 1.1rem; } .search-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; width: 100%; z-index: 10; } .tabs { display: flex; gap: 10px; margin-bottom: 10px; } .tab { padding: 10px 20px; background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .tab.active { background-color: var(--primary); color: white; box-shadow: 0 4px 10px rgba(255, 138, 61, 0.3); } .tab:not(.active):hover { background-color: rgba(255, 255, 255, 0.9); transform: translateY(-2px); } .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .input-group { position: relative; } input, select { width: 100%; padding: 16px 20px; font-size: 16px; border: none; border-radius: 12px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; color: var(--dark); } input:focus, select:focus { outline: none; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); background-color: white; } label { position: absolute; top: -10px; left: 15px; background-color: white; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--primary); border-radius: 4px; } .destination-container { grid-column: span 2; } .button-3d { margin-top: 20px; padding: 18px 32px; border: none; border-radius: 15px; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: white; box-shadow: 0 8px 15px var(--shadow-light), 0 4px 0 var(--shadow); transform-style: preserve-3d; transform: perspective(1000px) translateZ(0); } .button-3d::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); opacity: 0.8; clip-path: polygon(0 0, 100% 0, 100% 40%, 0 60%); transition: all 0.3s ease; } .button-3d:hover { transform: perspective(1000px) translateZ(10px) translateY(-5px); box-shadow: 0 15px 25px var(--shadow-light), 0 6px 0 var(--shadow); } .button-3d:active { transform: perspective(1000px) translateZ(3px) translateY(2px); box-shadow: 0 5px 10px var(--shadow-light), 0 2px 0 var(--shadow); } .button-3d:hover::before { opacity: 1; transform: translateY(-5px); } .destinations { display: flex; justify-content: space-between; margin-top: 20px; gap: 15px; width: 100%; } .destination-card { background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); border-radius: 12px; overflow: hidden; width: calc(33.33% - 10px); transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.08); position: relative; cursor: pointer; transform: translateY(0); } .destination-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .destination-card img { width: 100%; height: 100px; object-fit: cover; transition: all 0.5s ease; } .destination-card:hover img { transform: scale(1.1); } .destination-info { padding: 12px; position: relative; } .destination-name { font-weight: 700; margin-bottom: 5px; color: var(--dark); } .destination-price { color: var(--primary); font-weight: 600; font-size: 0.9rem; } .hot-deal { position: absolute; top: 10px; right: 10px; background-color: rgba(255, 61, 61, 0.9); color: white; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; z-index: 2; box-shadow: 0 3px 5px rgba(0,0,0,0.2); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .floating-bubbles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .bubble { position: absolute; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)); border-radius: 50%; animation: float 10s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.1); } } @media (max-width: 600px) { h1 { font-size: 1.8rem; } .inputs { grid-template-columns: 1fr; } .destination-container { grid-column: span 1; } .destinations { flex-direction: column; } .destination-card { width: 100%; } .tabs { flex-wrap: wrap; } } </style> </head> <body> <div class="container"> <div class="background-image"></div> <header> <div class="logo"> <div class="logo-icon"> <i>✈</i> </div> Wander<span>Lux</span> </div> </header> <div class="content"> <h1>Discover Your <span>Perfect Escape</span></h1> <p>Crafted adventures with exclusive rates and personalized itineraries to the world's most breathtaking destinations.</p> <div class="search-container"> <div class="tabs"> <div class="tab active" data-tab="flights"> <i>✈</i> Flights </div> <div class="tab" data-tab="hotels"> <i>🏨</i> Hotels </div> <div class="tab" data-tab="packages"> <i>🧳</i> Packages </div> </div> <div class="inputs"> <div class="input-group destination-container"> <label>Where to?</label> <input type="text" placeholder="Search destinations, attractions or experiences"> </div> <div class="input-group"> <label>Check-in</label> <input type="date"> </div> <div class="input-group"> <label>Check-out</label> <input type="date"> </div> <div class="input-group"> <label>Travelers</label> <select> <option>1 Adult</option> <option>2 Adults</option> <option>2 Adults, 1 Child</option> <option>2 Adults, 2 Children</option> <option>Group (5+)</option> </select> </div> <div class="input-group"> <label>Class</label> <select> <option>Economy</option> <option>Premium Economy</option> <option>Business</option> <option>First Class</option> </select> </div> </div> <button class="button-3d">Discover Adventures</button> </div> <div class="destinations"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1534351590666-13e3e96b5017?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="Santorini"> <div class="hot-deal">25% OFF</div> <div class="destination-info"> <div class="destination-name">Santorini, Greece</div> <div class="destination-price">From $799</div> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1535139262971-c51845709a48?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="Bali"> <div class="destination-info"> <div class="destination-name">Bali, Indonesia</div> <div class="destination-price">From $659</div> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1564507592333-c60657eea523?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="Maldives"> <div class="hot-deal">Last Minute</div> <div class="destination-info"> <div class="destination-name">Maldives</div> <div class="destination-price">From $1,299</div> </div> </div> </div> <div class="floating-bubbles"> <div class="bubble" style="width: 100px; height: 100px; left: 10%; top: 20%; animation-delay: 0s;"></div> <div class="bubble" style="width: 70px; height: 70px; left: 20%; top: 80%; animation-delay: 1s;"></div> <div class="bubble" style="width: 150px; height: 150px; left: 70%; top: 10%; animation-delay: 2s;"></div> <div class="bubble" style="width: 60px; height: 60px; left: 80%; top: 60%; animation-delay: 3s;"></div> <div class="bubble" style="width: 120px; height: 120px; left: 50%; top: 50%; animation-delay: 4s;"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // 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 you would normally switch content based on tab // For this demo we'll just change the button text const button = document.querySelector('.button-3d'); const tabType = this.getAttribute('data-tab'); if (tabType === 'flights') { button.textContent = 'Find Flights'; } else if (tabType === 'hotels') { button.textContent = 'Book Accommodations'; } else if (tabType === 'packages') { button.textContent = 'Discover Adventures'; } }); }); // Button hover sound effect const button = document.querySelector('.button-3d'); button.addEventListener('mouseenter', function() { this.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; }); button.addEventListener('mouseleave', function() { this.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; }); // Click ripple effect button.addEventListener('click', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '1px'; ripple.style.height = '1px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; ripple.style.transform = 'scale(0)'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.style.animation = 'ripple 0.6s linear'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); // Add keyframe for ripple animation const style = document.createElement('style'); style.innerHTML = ` @keyframes ripple { to { transform: scale(100); opacity: 0; } } `; document.head.appendChild(style); // Destination card interactions const cards = document.querySelectorAll('.destination-card'); cards.forEach(card => { card.addEventListener('click', function() { // Add a quick scaling effect this.style.transform = 'translateY(-5px) scale(0.95)'; setTimeout(() => { this.style.transform = 'translateY(-5px)'; }, 150); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retail Kiosk Interface</title> <style> :root { --primary: #3a7bd5; --primary-dark: #2e5eaa; --secondary: #ff6b6b; --success: #00c853; --neutral: #f5f7fa; --dark: #2c3e50; --shadow-light: rgba(0, 0, 0, 0.1); --shadow-medium: rgba(0, 0, 0, 0.2); --shadow-dark: rgba(0, 0, 0, 0.4); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-tap-highlight-color: transparent; } body { background: #f0f2f5; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; perspective: 1000px; } .kiosk-container { width: 700px; height: 700px; background: linear-gradient(145deg, #ffffff, #f0f0f0); border-radius: 30px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 30px; position: relative; display: flex; flex-direction: column; overflow: hidden; } .kiosk-header { text-align: center; margin-bottom: 30px; position: relative; } .kiosk-header h1 { color: var(--dark); font-size: 32px; margin-bottom: 10px; font-weight: 600; } .kiosk-header p { color: #777; font-size: 16px; max-width: 500px; margin: 0 auto; } .kiosk-content { flex-grow: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 10px; } .button-3d { position: relative; width: 100%; height: 120px; display: flex; justify-content: center; align-items: center; border-radius: 18px; background: linear-gradient(145deg, var(--neutral), #ffffff); box-shadow: 8px 8px 16px var(--shadow-medium), -8px -8px 16px rgba(255, 255, 255, 0.8); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; transform-style: preserve-3d; overflow: hidden; text-align: center; padding: 20px; } .button-3d::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0)); border-radius: 18px; opacity: 0.7; z-index: 1; transform: translateZ(2px); transition: opacity 0.3s ease; } .button-3d::after { content: ''; position: absolute; width: 100%; height: 30%; bottom: -30%; left: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.4)); transform: translateZ(10px) rotateX(-40deg); filter: blur(10px); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .button-3d:hover { transform: translateY(-5px) scale(1.02); box-shadow: 10px 10px 20px var(--shadow-medium), -10px -10px 20px rgba(255, 255, 255, 0.8); } .button-3d:hover::after { opacity: 1; transform: translateZ(10px) rotateX(-30deg); } .button-3d:active { transform: translateY(2px) scale(0.98); box-shadow: 5px 5px 10px var(--shadow-medium), -5px -5px 10px rgba(255, 255, 255, 0.8); } .button-3d:active::before { opacity: 0.5; } .button-content { position: relative; z-index: 2; transform: translateZ(5px); transition: transform 0.3s ease; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; } .button-3d:hover .button-content { transform: translateZ(10px); } .button-icon { font-size: 32px; margin-bottom: 5px; transition: transform 0.3s ease; } .button-3d:hover .button-icon { transform: scale(1.1); } .button-text { font-size: 18px; font-weight: 600; color: var(--dark); transition: color 0.3s ease; } .button-description { font-size: 12px; color: #777; display: block; margin-top: 3px; } .checkout { background: linear-gradient(145deg, var(--primary), var(--primary-dark)); } .checkout .button-text, .checkout .button-icon, .checkout .button-description { color: white; } .help { background: linear-gradient(145deg, var(--secondary), #e05555); } .help .button-text, .help .button-icon, .help .button-description { color: white; } .button-highlight { position: absolute; width: 100%; height: 100%; border-radius: 18px; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%); opacity: 0; transition: opacity 0.3s ease; z-index: 0; pointer-events: none; } .button-3d:hover .button-highlight { opacity: 1; } .button-ripple { position: absolute; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(25); opacity: 0; } } .kiosk-footer { text-align: center; margin-top: 30px; } .time-display { font-size: 14px; color: #888; margin-top: 10px; } .session-timer { display: inline-block; background-color: var(--dark); color: white; border-radius: 20px; padding: 4px 12px; margin-left: 10px; font-weight: 600; } .ambient-light-indicator { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #888; } .light-level { width: 16px; height: 16px; border-radius: 50%; background-color: #ffc107; box-shadow: 0 0 8px rgba(255, 193, 7, 0.5); } /* Button state indicators */ .state-indicator { position: absolute; bottom: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; transition: background-color 0.3s ease; } .button-3d:hover .state-indicator { background-color: var(--success); box-shadow: 0 0 5px var(--success); } .button-3d:active .state-indicator { background-color: #ff9800; box-shadow: 0 0 5px #ff9800; } /* Shimmer effect */ .button-3d::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); transition: left 0.7s ease; } .button-3d:hover::before { left: 100%; } @media (max-width: 700px) { .kiosk-container { width: 95%; height: 95%; border-radius: 20px; padding: 20px; } .kiosk-content { grid-template-columns: 1fr; gap: 20px; } .button-3d { height: 100px; } .kiosk-header h1 { font-size: 24px; } .kiosk-header p { font-size: 14px; } } </style> </head> <body> <div class="kiosk-container"> <div class="ambient-light-indicator"> <div class="light-level"></div> <span>Optimal Touch Conditions</span> </div> <div class="kiosk-header"> <h1>Self-Service Kiosk</h1> <p>Enhanced tactile interface with depth perception for reliable interaction in all lighting conditions</p> </div> <div class="kiosk-content"> <div class="button-3d" id="products"> <div class="button-highlight"></div> <div class="button-content"> <div class="button-icon">📦</div> <div class="button-text">Browse Products</div> <span class="button-description">Explore our full catalog</span> </div> <div class="state-indicator"></div> </div> <div class="button-3d" id="search"> <div class="button-highlight"></div> <div class="button-content"> <div class="button-icon">🔍</div> <div class="button-text">Product Finder</div> <span class="button-description">Search by name or SKU</span> </div> <div class="state-indicator"></div> </div> <div class="button-3d" id="scanner"> <div class="button-highlight"></div> <div class="button-content"> <div class="button-icon">📱</div> <div class="button-text">Scan & Shop</div> <span class="button-description">Use QR or barcode</span> </div> <div class="state-indicator"></div> </div> <div class="button-3d checkout" id="checkout"> <div class="button-highlight"></div> <div class="button-content"> <div class="button-icon">💳</div> <div class="button-text">Express Checkout</div> <span class="button-description">Complete your purchase</span> </div> <div class="state-indicator"></div> </div> <div class="button-3d" id="account"> <div class="button-highlight"></div> <div class="button-content"> <div class="button-icon">👤</div> <div class="button-text">My Account</div> <span class="button-description">View orders & rewards</span> </div> <div class="state-indicator"></div> </div> <div class="button-3d help" id="help"> <div class="button-highlight"></div> <div class="button-content"> <div class="button-icon">🛎️</div> <div class="button-text">Call Assistance</div> <span class="button-description">Connect with staff</span> </div> <div class="state-indicator"></div> </div> </div> <div class="kiosk-footer"> <div class="time-display"> Session time remaining: <span class="session-timer">2:00</span> </div> </div> </div> <script> // Interactive 3D button effects document.querySelectorAll('.button-3d').forEach(button => { // Handle mouse/touch move for spotlight effect button.addEventListener('mousemove', (e) => { const rect = button.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; const highlight = button.querySelector('.button-highlight'); highlight.style.setProperty('--x', `${x}%`); highlight.style.setProperty('--y', `${y}%`); }); // Handle click/touch for ripple effect button.addEventListener('mousedown', createRipple); button.addEventListener('touchstart', handleTouch, {passive: true}); // Handle click function button.addEventListener('click', () => { // Provide visual feedback button.classList.add('clicked'); setTimeout(() => { button.classList.remove('clicked'); // Show user feedback (in a real app, this would navigate or perform an action) const text = button.querySelector('.button-text').textContent; console.log(`${text} button clicked`); // Simulate button press const stateIndicator = button.querySelector('.state-indicator'); stateIndicator.style.backgroundColor = '#ff9800'; setTimeout(() => { stateIndicator.style.backgroundColor = '#ddd'; }, 300); }, 200); }); }); function createRipple(event) { const button = event.currentTarget; const rect = button.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const ripple = document.createElement('span'); ripple.classList.add('button-ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; button.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); } function handleTouch(event) { const touch = event.touches[0]; const button = event.currentTarget; const rect = button.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; // Update highlight position const highlight = button.querySelector('.button-highlight'); highlight.style.setProperty('--x', `${(x / rect.width) * 100}%`); highlight.style.setProperty('--y', `${(y / rect.height) * 100}%`); // Create ripple const ripple = document.createElement('span'); ripple.classList.add('button-ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; button.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); } // Session timer countdown function startSessionTimer() { let timeLeft = 120; // 2 minutes in seconds const timerDisplay = document.querySelector('.session-timer'); const timer = setInterval(() => { timeLeft--; const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; if (timeLeft <= 30) { timerDisplay.style.color = '#ff6b6b'; } if (timeLeft <= 0) { clearInterval(timer); // In a real app, this would trigger a timeout action } }, 1000); } // Simulate ambient light detection function simulateAmbientLight() { const lightIndicator = document.querySelector('.light-level'); const lightLevels = [ {color: '#ffc107', text: 'Optimal Touch Conditions'}, {color: '#8bc34a', text: 'Good Lighting'}, {color: '#03a9f4', text: 'Low Light Mode Active'} ]; let currentLevel = 0; setInterval(() => { currentLevel = (currentLevel + 1) % lightLevels.length; lightIndicator.style.backgroundColor = lightLevels[currentLevel].color; lightIndicator.style.boxShadow = `0 0 8px ${lightLevels[currentLevel].color}`; document.querySelector('.ambient-light-indicator span').textContent = lightLevels[currentLevel].text; }, 5000); } // Initialize document.addEventListener('DOMContentLoaded', () => { startSessionTimer(); simulateAmbientLight(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Home Control Interface</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #2A3B4C; --secondary: #384E63; --accent: #4AAFDB; --light: #F5F9FC; --shadow: rgba(13, 28, 43, 0.15); --highlight: rgba(255, 255, 255, 0.85); --button-size: 85px; --button-depth: 10px; } body { background: linear-gradient(135deg, #E9F0F5 0%, #D0DDE8 100%); height: 700px; width: 100%; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 30px 20px; overflow-x: hidden; overflow-y: auto; } .interface-container { width: 100%; max-width: 600px; padding: 20px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 24px; box-shadow: 0 15px 35px var(--shadow); border: 1px solid var(--highlight); } .interface-header { margin-bottom: 30px; text-align: center; } h1 { color: var(--primary); font-size: 24px; font-weight: 700; margin-bottom: 8px; } p.subtitle { color: var(--secondary); font-size: 15px; opacity: 0.85; line-height: 1.5; } .status-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding: 12px 20px; background: rgba(255, 255, 255, 0.5); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.7); } .status-item { display: flex; flex-direction: column; align-items: center; } .status-value { font-size: 18px; font-weight: 700; color: var(--primary); display: flex; align-items: center; } .status-value svg { margin-right: 6px; } .status-label { font-size: 13px; color: var(--secondary); opacity: 0.8; margin-top: 4px; } .buttons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 30px; } @media (max-width: 500px) { .buttons-grid { grid-template-columns: repeat(2, 1fr); } } .button-3d { position: relative; width: var(--button-size); height: var(--button-size); perspective: 500px; margin: 0 auto; cursor: pointer; } .button-face { position: absolute; width: 100%; height: 100%; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform-style: preserve-3d; transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2); backface-visibility: hidden; background: var(--light); box-shadow: 0 var(--button-depth) 0 0 var(--secondary), 0 var(--button-depth) 15px 0 rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.8); } .button-icon { height: 30px; width: 30px; margin-bottom: 8px; color: var(--primary); transition: all 0.2s ease; transform: translateZ(10px); } .button-label { font-size: 13px; color: var(--primary); font-weight: 600; transform: translateZ(5px); transition: all 0.2s ease; } .button-active .button-face { transform: translateY(calc(var(--button-depth) * 0.7)); box-shadow: 0 calc(var(--button-depth) * 0.3) 0 0 var(--secondary), 0 calc(var(--button-depth) * 0.3) 5px 0 rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.8); } .button-3d:hover .button-face:not(.processing) { transform: translateY(calc(var(--button-depth) * 0.3)); box-shadow: 0 calc(var(--button-depth) * 0.7) 0 0 var(--secondary), 0 calc(var(--button-depth) * 0.7) 10px 0 rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.8); } .processing .button-icon { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .scene-container { position: relative; height: 150px; width: 100%; margin-top: 15px; background: var(--light); border-radius: 16px; overflow: hidden; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; } .scene-title { font-size: 16px; font-weight: 600; color: var(--primary); margin-bottom: 14px; } .scene-icons { display: flex; gap: 25px; } .scene-icon { opacity: 0.3; transition: all 0.3s ease; transform: scale(0.9); } .scene-icon.active { opacity: 1; transform: scale(1); } .slider-container { width: 100%; margin-top: 25px; } .slider-row { display: flex; align-items: center; margin-bottom: 20px; } .slider-label { font-size: 14px; color: var(--primary); font-weight: 600; width: 100px; flex-shrink: 0; } .slider-track { height: 12px; background: rgba(0, 0, 0, 0.08); border-radius: 6px; position: relative; flex-grow: 1; overflow: hidden; } .slider-progress { position: absolute; height: 100%; top: 0; left: 0; background: var(--accent); border-radius: 6px; transition: width 0.3s ease; } .slider-handle { width: 24px; height: 24px; background: white; border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 2; transition: box-shadow 0.2s ease; } .slider-handle:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); } .slider-value { width: 45px; text-align: right; font-size: 14px; font-weight: 600; color: var(--primary); margin-left: 15px; } .material-lights .button-face { background: linear-gradient(145deg, #F5F5F5, #E1E1E1); } .material-climate .button-face { background: linear-gradient(145deg, #E6F4FD, #D9EBFA); } .material-security .button-face { background: linear-gradient(145deg, #F5EDE0, #EDE5D8); } .material-media .button-face { background: linear-gradient(145deg, #E0E6F5, #D8DEE9); } .material-blinds .button-face { background: linear-gradient(145deg, #E4E8ED, #D6DAE0); } .material-scenes .button-face { background: linear-gradient(145deg, #E8E0F5, #DFDAED); } .active-scene-name { font-size: 14px; color: var(--accent); font-weight: 700; margin-top: 10px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .active-scene-name.visible { opacity: 1; transform: translateY(0); } .waves { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .waves.active { opacity: 1; } .wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: expand 2s infinite ease-out; } .wave:nth-child(2) { animation-delay: 0.6s; } .wave:nth-child(3) { animation-delay: 1.2s; } @keyframes expand { 0% { width: 10px; height: 10px; opacity: 0.8; } 100% { width: 150px; height: 150px; opacity: 0; } } </style> </head> <body> <div class="interface-container"> <div class="interface-header"> <h1>Smart Home Control</h1> <p class="subtitle">Intuitive control for your connected home environment</p> </div> <div class="status-bar"> <div class="status-item"> <div class="status-value"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#2A3B4C"/> <path d="M12 2V4M12 20V22M4 12H2M6.31412 6.31412L4.8999 4.8999M17.6859 6.31412L19.1001 4.8999M6.31412 17.68L4.8999 19.0942M17.6859 17.68L19.1001 19.0942M22 12H20" stroke="#2A3B4C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 22°C </div> <div class="status-label">Temperature</div> </div> <div class="status-item"> <div class="status-value"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 16.8C7 18.5673 8.43269 20 10.2 20H13.8C15.5673 20 17 18.5673 17 16.8V11H7V16.8Z" fill="#2A3B4C"/> <path d="M5 7C5 6.44772 5.44772 6 6 6H18C18.5523 6 19 6.44772 19 7V11H5V7Z" stroke="#2A3B4C" stroke-width="2"/> <path d="M12 6V4M8 11V16M16 11V16" stroke="#2A3B4C" stroke-width="2" stroke-linecap="round"/> </svg> 42% </div> <div class="status-label">Humidity</div> </div> <div class="status-item"> <div class="status-value"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 11.1005C5 9.10047 9 4.50002 12 2C15 4.50002 19 9.10047 19 11.1005C19 16.0513 16.0899 20 12 20C7.91015 20 5 16.0513 5 11.1005Z" stroke="#2A3B4C" stroke-width="2"/> <path d="M12 2C15 4.5 19 9 19 11C19 16 16 17 12 17C8 17 5 16 5 11C5 9 9 4.5 12 2Z" fill="#2A3B4C" fill-opacity="0.5"/> </svg> 3 Active </div> <div class="status-label">Devices</div> </div> </div> <div class="buttons-grid"> <div class="button-3d material-lights" data-id="lights"> <div class="button-face"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 21H15M12 3V4M18.364 5.63604L17.6569 6.34315M21 12H20M4 12H3M6.34315 6.34315L5.63604 5.63604M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="button-label">Lighting</div> </div> </div> <div class="button-3d material-climate" data-id="climate"> <div class="button-face"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 13V9M12 13V9M16 13V9M7 17H17C18.1046 17 19 16.1046 19 15V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V15C5 16.1046 5.89543 17 7 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 21H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> <div class="button-label">Climate</div> </div> </div> <div class="button-3d material-security" data-id="security"> <div class="button-face"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3L4 7V12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12V7L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/> <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="button-label">Security</div> </div> </div> <div class="button-3d material-media" data-id="media"> <div class="button-face"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 8H20M4 16H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <path d="M6 12L10 9V15L6 12Z" fill="currentColor"/> <rect x="12" y="9" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/> </svg> <div class="button-label">Media</div> </div> </div> <div class="button-3d material-blinds" data-id="blinds"> <div class="button-face"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4H20M4 8H20M4 12H20M4 16H20M4 20H20M19 4V20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> <div class="button-label">Blinds</div> </div> </div> <div class="button-3d material-scenes" data-id="scenes"> <div class="button-face"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9L12 4L21 9M19 13V19.4C19 19.7314 18.7314 20 18.4 20H5.6C5.26863 20 5 19.7314 5 19.4V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 12H14M12 10V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="button-label">Scenes</div> </div> </div> </div> <div class="scene-container"> <div class="scene-title">Select Room Scene</div> <div class="scene-icons"> <svg class="scene-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-scene="work"> <path d="M10 3H3V10H10V3Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> <path d="M21 3H14V10H21V3Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> <path d="M21 14H14V21H21V14Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> <path d="M10 14H3V21H10V14Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> </svg> <svg class="scene-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-scene="relax"> <path d="M13 3H21V9H13V3Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> <path d="M8 17C10.2091 17 12 15.2091 12 13C12 10.7909 10.2091 9 8 9C5.79086 9 4 10.7909 4 13C4 15.2091 5.79086 17 8 17Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2"/> <path d="M14.4172 12.5C14.138 13.5986 14 14.2978 14 15C14 19.4183 10.4183 21 6 21" stroke="#2A3B4C" stroke-width="2" stroke-linecap="round"/> <path d="M17 17V21" stroke="#2A3B4C" stroke-width="2" stroke-linecap="round"/> <path d="M21 17V21" stroke="#2A3B4C" stroke-width="2" stroke-linecap="round"/> </svg> <svg class="scene-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-scene="movie"> <path d="M22 7L16 11.5L22 16V7Z" fill="#2A3B4C" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> <path d="M14 5H3C1.89543 5 1 5.89543 1 7V17C1 18.1046 1.89543 19 3 19H14C15.1046 19 16 18.1046 16 17V7C16 5.89543 15.1046 5 14 5Z" stroke="#2A3B4C" stroke-width="2" stroke-linejoin="round"/> </svg> </div> <div class="active-scene-name">Ready</div> <div class="waves"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> </div> <div class="slider-container"> <div class="slider-row"> <div class="slider-label">Brightness</div> <div class="slider-track" id="brightness-slider"> <div class="slider-progress" style="width: 70%;"></div> <div class="slider-handle" style="left: 70%;"></div> </div> <div class="slider-value">70%</div> </div> <div class="slider-row"> <div class="slider-label">Temperature</div> <div class="slider-track" id="temperature-slider"> <div class="slider-progress" style="width: 60%;"></div> <div class="slider-handle" style="left: 60%;"></div> </div> <div class="slider-value">22°C</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Button press effect const buttons = document.querySelectorAll('.button-3d'); const sceneIcons = document.querySelectorAll('.scene-icon'); const activeSceneName = document.querySelector('.active-scene-name'); const waves = document.querySelector('.waves'); buttons.forEach(button => { button.addEventListener('click', function() { // First deactivate all buttons buttons.forEach(b => b.classList.remove('button-active')); // Then activate the clicked button this.classList.add('button-active'); // Add processing animation const buttonFace = this.querySelector('.button-face'); buttonFace.classList.add('processing'); // Remove processing state after animation setTimeout(() => { buttonFace.classList.remove('processing'); }, 800); // Update the interface based on the button clicked const buttonId = this.getAttribute('data-id'); updateInterface(buttonId); }); }); // Scene selection sceneIcons.forEach(icon => { icon.addEventListener('click', function() { // First deactivate all icons sceneIcons.forEach(i => i.classList.remove('active')); // Then activate the clicked icon this.classList.add('active'); // Show scene name const sceneName = this.getAttribute('data-scene'); let sceneNameText = ''; if (sceneName === 'work') { sceneNameText = 'Work Mode'; } else if (sceneName === 'relax') { sceneNameText = 'Relaxation Mode'; } else if (sceneName === 'movie') { sceneNameText = 'Movie Night'; } activeSceneName.textContent = sceneNameText; activeSceneName.classList.add('visible'); // Show waves effect waves.classList.add('active'); // Hide waves after animation setTimeout(() => { waves.classList.remove('active'); }, 2000); }); }); // Sliders functionality const sliders = document.querySelectorAll('.slider-track'); sliders.forEach(slider => { const handle = slider.querySelector('.slider-handle'); const progress = slider.querySelector('.slider-progress'); const valueDisplay = slider.parentElement.querySelector('.slider-value'); let isDragging = false; const updateSlider = (e) => { const rect = slider.getBoundingClientRect(); let position = (e.clientX - rect.left) / rect.width; // Constrain position between 0 and 1 position = Math.max(0, Math.min(1, position)); // Update slider visuals const percentage = position * 100; handle.style.left = `${percentage}%`; progress.style.width = `${percentage}%`; // Update value display if (slider.id === 'brightness-slider') { valueDisplay.textContent = `${Math.round(percentage)}%`; } else if (slider.id === 'temperature-slider') { // Convert 0-100 to 16-28°C range const temp = 16 + (percentage / 100) * 12; valueDisplay.textContent = `${Math.round(temp)}°C`; } }; handle.addEventListener('mousedown', () => { isDragging = true; }); document.addEventListener('mousemove', (e) => { if (isDragging) { updateSlider(e); } }); document.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('click', (e) => { updateSlider(e); }); }); // Function to update interface based on selected control function updateInterface(controlType) { const statusItems = document.querySelectorAll('.status-item'); const sceneContainer = document.querySelector('.scene-container'); const sliderContainer = document.querySelector('.slider-container'); // Reset everything first statusItems.forEach(item => item.style.display = 'flex'); sceneContainer.style.display = 'flex'; sliderContainer.style.display = 'block'; // Update specific elements based on control type if (controlType === 'scenes') { sceneContainer.style.display = 'flex'; sliderContainer.style.display = 'none'; activeSceneName.classList.remove('visible'); } else if (controlType === 'lights') { document.querySelector('#brightness-slider').parentElement.style.display = 'flex'; document.querySelector('#temperature-slider').parentElement.style.display = 'none'; sceneContainer.style.display = 'none'; } else if (controlType === 'climate') { document.querySelector('#brightness-slider').parentElement.style.display = 'none'; document.querySelector('#temperature-slider').parentElement.style.display = 'flex'; sceneContainer.style.display = 'none'; } else { sceneContainer.style.display = 'none'; sliderContainer.style.display = 'none'; } } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaaS Analytics Dashboard</title> <style> :root { --primary-color: #2e3440; --secondary-color: #3b4252; --tertiary-color: #434c5e; --accent-color: #5e81ac; --highlight-color: #88c0d0; --text-color: #eceff4; --shadow-color: rgba(0, 0, 0, 0.2); --success-color: #a3be8c; --warning-color: #ebcb8b; --danger-color: #bf616a; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--primary-color); color: var(--text-color); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .dashboard { width: 100%; max-width: 700px; height: 700px; background-color: var(--secondary-color); border-radius: 16px; box-shadow: 0 20px 40px var(--shadow-color); display: flex; flex-direction: column; overflow: hidden; position: relative; } .header { padding: 24px; border-bottom: 1px solid var(--tertiary-color); display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; } .logo-icon { width: 32px; height: 32px; background-color: var(--highlight-color); border-radius: 8px; display: flex; justify-content: center; align-items: center; } .cube { width: 16px; height: 16px; position: relative; transform-style: preserve-3d; animation: rotate 10s infinite linear; } @keyframes rotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } .cube-face { position: absolute; width: 16px; height: 16px; background-color: var(--primary-color); opacity: 0.9; } .cube-face:nth-child(1) { transform: translateZ(8px); } .cube-face:nth-child(2) { transform: rotateY(180deg) translateZ(8px); } .cube-face:nth-child(3) { transform: rotateY(90deg) translateZ(8px); } .cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(8px); } .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(8px); } .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(8px); } .user-info { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 40px; height: 40px; background-color: var(--tertiary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 16px; color: var(--highlight-color); } .content { flex: 1; padding: 24px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; overflow: hidden; } .sidebar { display: flex; flex-direction: column; gap: 16px; } .section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 8px; } .menu { display: flex; flex-direction: column; gap: 8px; } .button-3d { position: relative; padding: 12px 16px; border-radius: 8px; font-weight: 500; font-size: 0.875rem; background-color: var(--tertiary-color); color: var(--text-color); border: none; cursor: pointer; transition: all 0.2s ease; text-align: left; display: flex; align-items: center; gap: 12px; transform: translateY(0); box-shadow: 0 2px 0 var(--primary-color), 0 4px 6px rgba(0, 0, 0, 0.1); } .button-3d:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--primary-color), 0 6px 8px rgba(0, 0, 0, 0.15); } .button-3d:active, .button-3d.active { transform: translateY(2px); box-shadow: 0 0 0 var(--primary-color) inset, 0 1px 2px rgba(0, 0, 0, 0.2) inset; background-color: var(--secondary-color); } .button-3d.active { background-color: var(--accent-color); } .button-icon { width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; opacity: 0.8; } .main-content { display: flex; flex-direction: column; gap: 24px; overflow-y: auto; padding-right: 8px; } .main-content::-webkit-scrollbar { width: 6px; } .main-content::-webkit-scrollbar-track { background: var(--tertiary-color); border-radius: 3px; } .main-content::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 3px; } .metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .metric-card { background-color: var(--tertiary-color); border-radius: 12px; padding: 16px; position: relative; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .metric-title { font-size: 0.875rem; opacity: 0.8; margin-bottom: 8px; } .metric-value { font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; } .metric-trend { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; } .trend-up { color: var(--success-color); } .trend-down { color: var(--danger-color); } .chart-container { background-color: var(--tertiary-color); border-radius: 12px; padding: 16px; height: 240px; position: relative; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .chart-title { font-weight: 600; } .chart-legend { display: flex; gap: 12px; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; opacity: 0.8; } .legend-color { width: 10px; height: 10px; border-radius: 2px; } .chart { height: calc(100% - 32px); display: flex; align-items: flex-end; gap: 8px; } .chart-bar { flex: 1; background-color: var(--accent-color); min-height: 4px; border-radius: 4px 4px 0 0; position: relative; transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .chart-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); border-radius: 4px 4px 0 0; } .chart-bar-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 0.625rem; opacity: 0.6; white-space: nowrap; } .table-container { background-color: var(--tertiary-color); border-radius: 12px; padding: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 12px 16px; text-align: left; font-size: 0.875rem; } .data-table th { font-weight: 600; opacity: 0.8; border-bottom: 1px solid var(--primary-color); } .data-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .data-table tbody tr:last-child { border-bottom: none; } .status { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .status-active { background-color: var(--success-color); color: var(--primary-color); } .status-pending { background-color: var(--warning-color); color: var(--primary-color); } .status-inactive { background-color: var(--danger-color); color: var(--text-color); } .tooltip { position: absolute; background-color: var(--primary-color); padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; white-space: nowrap; } .tooltip::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-style: solid; border-color: var(--primary-color) transparent transparent; } .button-actions { display: flex; gap: 8px; margin-top: 16px; } .button-primary { background-color: var(--highlight-color); color: var(--primary-color); } .settings-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--secondary-color); z-index: 100; padding: 24px; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; } .settings-container.active { transform: translateX(0); } .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .settings-content { flex: 1; overflow-y: auto; } .settings-section { margin-bottom: 24px; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--tertiary-color); transition: .4s; border-radius: 34px; } .switch-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: var(--text-color); transition: .4s; border-radius: 50%; } input:checked + .switch-slider { background-color: var(--accent-color); } input:checked + .switch-slider:before { transform: translateX(26px); } .preference-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tertiary-color); } .preference-item:last-child { border-bottom: none; } .preference-title { font-weight: 500; } .preference-description { font-size: 0.75rem; opacity: 0.7; margin-top: 4px; } /* Responsive Design */ @media (max-width: 700px) { .content { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .sidebar { padding-bottom: 16px; border-bottom: 1px solid var(--tertiary-color); } .menu { flex-direction: row; flex-wrap: wrap; } .button-3d { flex: 1; min-width: calc(50% - 8px); justify-content: center; } .metrics { grid-template-columns: 1fr; } } @media (max-width: 500px) { .header { padding: 16px; } .content { padding: 16px; } .button-3d { min-width: 100%; } .chart-container { height: 200px; } } /* Animation for notification dot */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .notification-dot { position: absolute; width: 8px; height: 8px; background-color: var(--highlight-color); border-radius: 50%; top: 12px; right: 12px; animation: pulse 1.5s infinite; } /* Depth effect for cards */ .depth-effect { position: relative; } .depth-effect::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.1); pointer-events: none; } </style> </head> <body> <div class="dashboard"> <div class="header"> <div class="logo"> <div class="logo-icon"> <div class="cube"> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> </div> </div> DataSphere </div> <div class="user-info"> <div class="user-avatar">JD</div> </div> </div> <div class="content"> <div class="sidebar"> <div> <div class="section-title">Navigation</div> <div class="menu"> <button class="button-3d active" data-section="dashboard"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="7" height="7"></rect> <rect x="14" y="3" width="7" height="7"></rect> <rect x="14" y="14" width="7" height="7"></rect> <rect x="3" y="14" width="7" height="7"></rect> </svg> </div> Dashboard </button> <button class="button-3d" data-section="analytics"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="14"></line> </svg> </div> Analytics </button> <button class="button-3d" data-section="customers"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> Customers </button> <button class="button-3d" data-section="integrations"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> </div> Integrations <span class="notification-dot"></span> </button> </div> </div> <div> <div class="section-title">Settings</div> <div class="menu"> <button class="button-3d" id="settings-button"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </div> Settings </button> <button class="button-3d"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </div> Notifications </button> </div> </div> <div class="button-actions"> <button class="button-3d button-primary"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </div> New Report </button> </div> </div> <div class="main-content"> <div class="metrics"> <div class="metric-card depth-effect"> <div class="metric-title">Active Users</div> <div class="metric-value">24,853</div> <div class="metric-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 12.4% from last week </div> </div> <div class="metric-card depth-effect"> <div class="metric-title">Conversion Rate</div> <div class="metric-value">5.8%</div> <div class="metric-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 0.6% from last week </div> </div> <div class="metric-card depth-effect"> <div class="metric-title">Revenue</div> <div class="metric-value">$148,290</div> <div class="metric-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> 8.2% from last month </div> </div> <div class="metric-card depth-effect"> <div class="metric-title">Churn Rate</div> <div class="metric-value">2.4%</div> <div class="metric-trend trend-down"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> 0.3% from last month </div> </div> </div> <div class="chart-container depth-effect"> <div class="chart-header"> <div class="chart-title">Revenue Trend (Last 7 days)</div> <div class="chart-legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--accent-color);"></div> <span>Revenue</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--highlight-color);"></div> <span>Target</span> </div> </div> </div> <div class="chart"> <div class="chart-bar" style="height: 40%;"> <div class="chart-bar-label">Mon</div> </div> <div class="chart-bar" style="height: 65%;"> <div class="chart-bar-label">Tue</div> </div> <div class="chart-bar" style="height: 50%;"> <div class="chart-bar-label">Wed</div> </div> <div class="chart-bar" style="height: 75%;"> <div class="chart-bar-label">Thu</div> </div> <div class="chart-bar" style="height: 85%;"> <div class="chart-bar-label">Fri</div> </div> <div class="chart-bar" style="height: 45%;"> <div class="chart-bar-label">Sat</div> </div> <div class="chart-bar" style="height: 30%;"> <div class="chart-bar-label">Sun</div> </div> </div> </div> <div class="table-container depth-effect"> <div class="table-header"> <div class="chart-title">Recent Integrations</div> </div> <table class="data-table"> <thead> <tr> <th>Integration</th> <th>Status</th> <th>Last Sync</th> <th>Data Points</th> </tr> </thead> <tbody> <tr> <td>CRM Connect</td> <td><span class="status status-active">Active</span></td> <td>5 mins ago</td> <td>24,532</td> </tr> <tr> <td>Payment Gateway</td> <td><span class="status status-active">Active</span></td> <td>15 mins ago</td> <td>12,845</td> </tr> <tr> <td>Marketing API</td> <td><span class="status status-pending">Pending</span></td> <td>2 hrs ago</td> <td>8,421</td> </tr> <tr> <td>Support Desk</td> <td><span class="status status-inactive">Inactive</span></td> <td>1 day ago</td> <td>3,254</td> </tr> </tbody> </table> </div> </div> </div> <div class="settings-container" id="settings-panel"> <div class="settings-header"> <h2>Settings</h2> <button class="button-3d" id="close-settings"> <div class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </button> </div> <div class="settings-content"> <div class="settings-section"> <div class="section-title">Interface Preferences</div> <div class="preference-item"> <div> <div class="preference-title">Data Refresh Rate</div> <div class="preference-description">How often dashboard data refreshes</div> </div> <select class="button-3d"> <option>Real-time</option> <option>Every minute</option> <option>Every 5 minutes</option> <option>Every 15 minutes</option> </select> </div> <div class="preference-item"> <div> <div class="preference-title">Enable 3D Interface Elements</div> <div class="preference-description">Use depth effects for buttons and cards</div> </div> <label class="toggle-switch"> <input type="checkbox" checked> <span class="switch-slider"></span> </label> </div> <div class="preference-item"> <div> <div class="preference-title">Chart Animation</div> <div class="preference-description">Enable animated transitions in charts</div> </div> <label class="toggle-switch"> <input type="checkbox" checked> <span class="switch-slider"></span> </label> </div> </div> <div class="settings-section"> <div class="section-title">Notifications</div> <div class="preference-item"> <div> <div class="preference-title">Push Notifications</div> <div class="preference-description">Receive alerts for important events</div> </div> <label class="toggle-switch"> <input type="checkbox" checked> <span class="switch-slider"></span> </label> </div> <div class="preference-item"> <div> <div class="preference-title">Email Reports</div> <div class="preference-description">Receive daily summary reports</div> </div> <label class="toggle-switch"> <input type="checkbox"> <span class="switch-slider"></span> </label> </div> </div> <div class="settings-section"> <div class="section-title">Data Display</div> <div class="preference-item"> <div> <div class="preference-title">Metric Display Format</div> <div class="preference-description">How metrics are formatted</div> </div> <select class="button-3d"> <option>Compact (1K, 1M)</option> <option>Full (1,000, 1,000,000)</option> </select> </div> <div class="preference-item"> <div> <div class="preference-title">Default Time Range</div> <div class="preference-description">Default view period for metrics</div> </div> <select class="button-3d"> <option>Last 7 days</option> <option>Last 30 days</option> <option>Last quarter</option> <option>Year to date</option> </select> </div> </div> </div> </div> <div class="tooltip" id="tooltip"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Button effects const buttons = document.querySelectorAll('.button-3d'); buttons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all navigation buttons if (this.parentElement.classList.contains('menu')) {
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tactile Music Experience</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; max-height: 700px; width: 100%; max-width: 700px; background: #121212; color: #fff; font-family: 'Inter', sans-serif; overflow: hidden; margin: 0 auto; } .player-container { width: 100%; max-width: 600px; height: 600px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 20px; background: linear-gradient(145deg, #1a1a1a, #0d0d0d); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .player-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 0, 128, 0.1), rgba(64, 0, 255, 0.1)); pointer-events: none; z-index: 1; } .visualizer-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; display: flex; align-items: flex-end; padding: 0 30px; z-index: 2; } .visualizer-bar { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.7); margin: 0 2px; border-radius: 2px; transform-origin: bottom; transition: height 0.05s ease; } .player-header { display: flex; justify-content: space-between; align-items: center; z-index: 2; } .now-playing { font-size: 0.9rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .track-info { z-index: 2; text-align: center; padding: 0 20px; } .track-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 10px; background: linear-gradient(45deg, #ff0080, #7928ca); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(255, 0, 128, 0.3); } .track-artist { font-size: 1.2rem; font-weight: 500; opacity: 0.8; margin-bottom: 30px; } .track-artwork { width: 250px; height: 250px; border-radius: 15px; margin: 0 auto; background-size: cover; background-position: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; z-index: 2; transition: transform 0.3s ease; } .track-artwork:hover { transform: scale(1.03); } .track-artwork::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); pointer-events: none; } .progress-container { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; margin-bottom: 15px; cursor: pointer; z-index: 2; } .progress-bar { height: 100%; width: 30%; background: linear-gradient(90deg, #ff0080, #7928ca); border-radius: 3px; position: relative; } .progress-bar::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .time-info { display: flex; justify-content: space-between; font-size: 0.8rem; opacity: 0.7; margin-bottom: 20px; z-index: 2; } .controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; z-index: 3; } .control-button { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; border: none; outline: none; position: relative; transition: all 0.2s ease; background: linear-gradient(145deg, #1a1a1a, #0d0d0d); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.05); } .control-button.small { width: 45px; height: 45px; } .control-button.play-pause { width: 70px; height: 70px; background: linear-gradient(145deg, #ff0080, #7928ca); } .control-button:active { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.05); transform: scale(0.95) translateY(2px); } .control-button svg { width: 24px; height: 24px; fill: #fff; } .control-button.play-pause svg { width: 28px; height: 28px; } .control-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent); z-index: -1; } .volume-controls { display: flex; align-items: center; gap: 10px; z-index: 2; } .volume-slider { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; position: relative; cursor: pointer; } .volume-level { height: 100%; width: 70%; background: linear-gradient(90deg, #ff0080, #7928ca); border-radius: 2px; position: relative; } .volume-level::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .volume-icon { width: 20px; height: 20px; fill: #fff; } .keyboard-keys { display: flex; justify-content: center; gap: 10px; margin-top: 15px; z-index: 3; } .key { width: 40px; height: 40px; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(145deg, #1a1a1a, #0d0d0d); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3), -3px -3px 6px rgba(255, 255, 255, 0.05); transition: all 0.15s ease; } .key:nth-child(1) { background: linear-gradient(145deg, #22162b, #190d28); } .key:nth-child(2) { background: linear-gradient(145deg, #451952, #331540); } .key:nth-child(3) { background: linear-gradient(145deg, #662549, #4f1c38); } .key:nth-child(4) { background: linear-gradient(145deg, #ae445a, #8e2e47); } .key:nth-child(5) { background: linear-gradient(145deg, #f39f5a, #d17a35); } .key:active, .key.active { box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5), inset -2px -2px 4px rgba(255, 255, 255, 0.05); transform: scale(0.95) translateY(2px); } .key span { color: #fff; font-size: 0.8rem; font-weight: 600; text-align: center; position: relative; z-index: 2; } .key::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent); z-index: 1; } .ripple { position: absolute; background: rgba(255, 255, 255, 0.4); border-radius: 50%; transform: scale(0); animation: ripple 0.5s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .glow { position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; background: linear-gradient(90deg, #ff0080, #7928ca); opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .additional-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; z-index: 2; } .mode-toggle, .menu-button { display: flex; align-items: center; background: none; border: none; color: #fff; opacity: 0.7; cursor: pointer; transition: opacity 0.2s ease; } .mode-toggle:hover, .menu-button:hover { opacity: 1; } .mode-toggle svg, .menu-button svg { width: 18px; height: 18px; margin-right: 5px; fill: #fff; } .beat-pulse { animation: pulse 0.5s ease; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 500px) { .player-container { padding: 15px; } .track-title { font-size: 1.8rem; } .track-artist { font-size: 1rem; } .track-artwork { width: 200px; height: 200px; } .control-button { width: 50px; height: 50px; } .control-button.small { width: 40px; height: 40px; } .control-button.play-pause { width: 60px; height: 60px; } .keyboard-keys { gap: 6px; } .key { width: 35px; height: 35px; } } </style> </head> <body> <div class="player-container"> <div class="player-header"> <p class="now-playing">Now Playing</p> <button class="menu-button"> <svg viewBox="0 0 24 24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg> Menu </button> </div> <div class="track-info"> <h1 class="track-title">Harmonic Resonance</h1> <p class="track-artist">Tactile Soundscapes</p> <div class="track-artwork" style="background-image: url('https://images.unsplash.com/photo-1513829596324-4bb2800c5efb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')"> <div class="glow"></div> </div> </div> <div> <div class="progress-container" id="progressContainer"> <div class="progress-bar" id="progressBar"></div> </div> <div class="time-info"> <span>1:42</span> <span>4:18</span> </div> <div class="controls"> <button class="control-button small" id="prevButton"> <svg viewBox="0 0 24 24"> <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/> </svg> </button> <button class="control-button small" id="rewindButton"> <svg viewBox="0 0 24 24"> <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/> </svg> </button> <button class="control-button play-pause" id="playButton"> <svg viewBox="0 0 24 24" id="playIcon"> <path d="M8 5v14l11-7z"/> </svg> <svg viewBox="0 0 24 24" id="pauseIcon" style="display: none;"> <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/> </svg> </button> <button class="control-button small" id="forwardButton"> <svg viewBox="0 0 24 24"> <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/> </svg> </button> <button class="control-button small" id="nextButton"> <svg viewBox="0 0 24 24"> <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/> </svg> </button> </div> <div class="volume-controls"> <svg class="volume-icon" viewBox="0 0 24 24"> <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/> </svg> <div class="volume-slider" id="volumeSlider"> <div class="volume-level" id="volumeLevel"></div> </div> </div> <div class="keyboard-keys"> <div class="key" data-note="C"> <span>C</span> </div> <div class="key" data-note="D"> <span>D</span> </div> <div class="key" data-note="E"> <span>E</span> </div> <div class="key" data-note="G"> <span>G</span> </div> <div class="key" data-note="A"> <span>A</span> </div> </div> <div class="additional-controls"> <button class="mode-toggle"> <svg viewBox="0 0 24 24"> <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/> </svg> Tactile Mode </button> </div> </div> <div class="visualizer-container" id="visualizer"> <!-- Bars will be generated by JavaScript --> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Initialize visualizer const visualizer = document.getElementById('visualizer'); const barsCount = 30; for (let i = 0; i < barsCount; i++) { const bar = document.createElement('div'); bar.className = 'visualizer-bar'; visualizer.appendChild(bar); } const bars = document.querySelectorAll('.visualizer-bar'); // Audio simulation functions function simulateAudio() { bars.forEach(bar => { const height = Math.floor(Math.random() * 65) + 5; bar.style.height = `${height}px`; }); // Randomly trigger artwork pulse if (Math.random() > 0.85) { document.querySelector('.track-artwork').classList.add('beat-pulse'); setTimeout(() => { document.querySelector('.track-artwork').classList.remove('beat-pulse'); }, 500); } // Randomly trigger glow effect if (Math.random() > 0.7) { const glow = document.querySelector('.glow'); glow.style.opacity = '1'; setTimeout(() => { glow.style.opacity = '0'; }, 300); } } // Start audio simulation let audioInterval = setInterval(simulateAudio, 100); // Play/pause functionality const playButton = document.getElementById('playButton'); const playIcon = document.getElementById('playIcon'); const pauseIcon = document.getElementById('pauseIcon'); let isPlaying = false; playButton.addEventListener('click', () => { isPlaying = !isPlaying; if (isPlaying) { playIcon.style.display = 'none'; pauseIcon.style.display = 'block'; audioInterval = setInterval(simulateAudio, 100); } else { playIcon.style.display = 'block'; pauseIcon.style.display = 'none'; clearInterval(audioInterval); // Reset visualizer bars bars.forEach(bar => { bar.style.height = '5px'; }); } // Add tactile feedback through animation addRipple(playButton); }); // Tactile keyboard functionality const keys = document.querySelectorAll('.key'); keys.forEach(key => { key.addEventListener('click', () => { // Visual feedback key.classList.add('active'); setTimeout(() => key.classList.remove('active'), 150); // Add ripple effect addRipple(key); // Trigger a special visualizer pattern const noteIndex = Array.from(keys).indexOf(key); triggerVisualizerPattern(noteIndex); }); }); // Create custom ripple effect function addRipple(element) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = element.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${event.clientX - rect.left - size / 2}px`; ripple.style.top = `${event.clientY - rect.top - size / 2}px`; element.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 500); } // Create special visualizer patterns for each key function triggerVisualizerPattern(keyIndex) { const patterns = [ // C pattern (wave form) () => { bars.forEach((bar, i) => { const sinValue = Math.sin(i * 0.2); const height = 40 + (sinValue * 25); setTimeout(() => { bar.style.height = `${height}px`; }, i * 20); }); }, // D pattern (peak in middle) () => { bars.forEach((bar, i) => { const distance = Math.abs(i - barsCount/2); const height = 70 - (distance * 2.5); setTimeout(() => { bar.style.height = `${height}px`; }, i * 10); }); }, // E pattern (ascending) () => { bars.forEach((bar, i) => { const height = 10 + (i * 2); setTimeout(() => { bar.style.height = `${height}px`; }, i * 15); }); }, // G pattern (symmetric pulse) () => { bars.forEach((bar, i) => { const height = Math.abs((i - barsCount/2) % 5) * 15 + 10; setTimeout(() => { bar.style.height = `${height}px`; }, i * 15); }); }, // A pattern (random peaks) () => { bars.forEach((bar, i) => { const isHighPeak = i % 3 === 0; const height = isHighPeak ? 60 : 15; setTimeout(() => { bar.style.height = `${height}px`; }, i * 25); }); } ]; // Call the appropriate pattern function if (patterns[keyIndex]) { patterns[keyIndex](); } } // Progress bar interaction const progressContainer = document.getElementById('progressContainer'); const progressBar = document.getElementById('progressBar'); progressContainer.addEventListener('click', (e) => { const rect = progressContainer.getBoundingClientRect(); const pos = (e.clientX - rect.left) / rect.width; progressBar.style.width = `${pos * 100}%`; // Add tactile feedback addRipple(progressContainer); }); // Volume slider interaction const volumeSlider = document.getElementById('volumeSlider'); const volumeLevel = document.getElementById('volumeLevel'); volumeSlider.addEventListener('click', (e) => { const rect = volumeSlider.getBoundingClientRect(); const pos = (e.clientX - rect.left) / rect.width; volumeLevel.style.width = `${pos * 100}%`; // Add tactile feedback addRipple(volumeSlider); }); // Add ripple effect to all buttons const allButtons = document.querySelectorAll('.control-button, .key, .menu-button, .mode-toggle'); allButtons.forEach(button => { button.addEventListener('click', () => { addRipple(button); }); }); // Initialize audio simulation simulateAudio(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #FF4785; --secondary: #6236FF; --accent: #00D1FF; --accent2: #FFD600; --dark: #222233; --light: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #e0e5ec 100%); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; perspective: 1000px; } .container { width: 100%; max-width: 700px; height: 700px; padding: 30px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; z-index: 2; } .logo { font-size: 26px; font-weight: 800; color: var(--primary); text-shadow: 2px 2px 0px rgba(255, 71, 133, 0.2); display: flex; align-items: center; } .logo svg { margin-right: 8px; } .notification-bubble { position: relative; height: 50px; width: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 -2px 5px rgba(0, 0, 0, 0.05); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .notification-bubble:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 -2px 5px rgba(0, 0, 0, 0.05); } .notification-badge { position: absolute; top: 5px; right: 5px; height: 18px; width: 18px; border-radius: 50%; background-color: var(--accent2); color: var(--dark); font-size: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .content-area { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; } .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } .button-3d { height: 180px; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1); } .button-3d::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: inherit; filter: blur(20px); opacity: 0.5; z-index: -1; } .button-3d .icon { font-size: 48px; margin-bottom: 15px; transition: transform 0.3s ease; } .button-3d .button-text { font-weight: 700; font-size: 18px; transition: transform 0.3s ease; } .create-post { background: linear-gradient(135deg, var(--primary), #FF7BAD); } .explore { background: linear-gradient(135deg, var(--secondary), #9C7CFF); } .button-3d:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), 0 15px 20px rgba(0, 0, 0, 0.15); } .button-3d:active { transform: translateY(5px) scale(0.98); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .button-3d:hover .icon { transform: translateY(-5px); } .button-3d:hover .button-text { transform: translateY(-3px); } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .trending-section { background: rgba(255, 255, 255, 0.85); border-radius: 24px; padding: 20px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); flex: 1; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .section-title { font-size: 18px; font-weight: 700; color: var(--dark); } .more-button { background: linear-gradient(135deg, var(--accent), #5AEAFF); border: none; height: 35px; padding: 0 15px; border-radius: 17.5px; color: var(--dark); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 209, 255, 0.3); transition: all 0.3s ease; } .more-button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 209, 255, 0.4); } .more-button:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(0, 209, 255, 0.3); } .trending-item { display: flex; align-items: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); border-radius: 16px; padding: 15px; margin-bottom: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); cursor: pointer; } .trending-item:hover { transform: translateX(5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .item-hashtag { flex: 1; font-weight: 600; color: var(--dark); } .item-count { color: var(--primary); font-weight: 700; font-size: 14px; background: rgba(255, 71, 133, 0.1); padding: 5px 12px; border-radius: 20px; } .nav-bar { display: flex; justify-content: space-around; background: rgba(255, 255, 255, 0.85); border-radius: 24px; padding: 15px 0; margin-top: 20px; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); z-index: 2; } .nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 -2px 5px rgba(0, 0, 0, 0.05); } .nav-item svg { width: 24px; height: 24px; transition: transform 0.3s ease; } .nav-item.active { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -2px 5px rgba(0, 0, 0, 0.05); } .nav-item.active svg { transform: translateY(-2px) scale(1.1); } .nav-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), inset 0 -2px 5px rgba(0, 0, 0, 0.05); } .nav-item.home { color: var(--primary); } .nav-item.search { color: var(--secondary); } .nav-item.messages { color: var(--accent); } .nav-item.profile { color: var(--accent2); } .floating-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; border-radius: 50%; opacity: 0.5; animation: float 15s infinite linear; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-100vh) rotate(360deg); } } @media (max-width: 600px) { .container { padding: 15px; } .action-buttons { gap: 10px; margin-bottom: 20px; } .button-3d { height: 150px; } .button-3d .icon { font-size: 36px; } .button-3d .button-text { font-size: 16px; } } </style> </head> <body> <div class="container"> <div class="app-header"> <div class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9H3V21H6V9Z" fill="#FF4785"/> <path d="M21 9H18V21H21V9Z" fill="#FF4785"/> <path d="M13.5 3C10.4624 3 8 5.46243 8 8.5V21H16V8.5C16 5.46243 13.5376 3 10.5 3H13.5Z" fill="#FF4785"/> </svg> PopSync </div> <div class="notification-bubble"> <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 21C11.1 21 12 20.1 12 19H8C8 20.1 8.9 21 10 21ZM16 9C16 5.93 13.36 3.36 10 2.5V2C10 1.17 9.33 0.5 8.5 0.5C7.67 0.5 7 1.17 7 2V2.5C3.64 3.36 1 5.93 1 9V16L0 17V18H20V17L19 16V9Z" fill="#6236FF"/> </svg> <div class="notification-badge">3</div> </div> </div> <div class="content-area"> <div class="action-buttons"> <div class="button-3d create-post"> <div class="icon"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="white"/> </svg> </div> <div class="button-text">Create Post</div> </div> <div class="button-3d explore"> <div class="icon"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 15.5C10.07 15.5 8.5 13.93 8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12C15.5 13.93 13.93 15.5 12 15.5Z" fill="white"/> </svg> </div> <div class="button-text">Explore Feed</div> </div> </div> <div class="trending-section"> <div class="section-header"> <div class="section-title">Trending Now</div> <button class="more-button">View All</button> </div> <div class="trending-item"> <div class="item-hashtag">#DanceChallenge</div> <div class="item-count">2.4M posts</div> </div> <div class="trending-item"> <div class="item-hashtag">#SummerVibes</div> <div class="item-count">1.8M posts</div> </div> <div class="trending-item"> <div class="item-hashtag">#PopSyncRemix</div> <div class="item-count">942K posts</div> </div> <div class="trending-item"> <div class="item-hashtag">#ArtistSpotlight</div> <div class="item-count">507K posts</div> </div> </div> </div> <div class="nav-bar"> <div class="nav-item home active"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 20V14H14V20H19V12H22L12 3L2 12H5V20H10Z" fill="#FF4785"/> </svg> </div> <div class="nav-item search"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#6236FF"/> </svg> </div> <div class="nav-item messages"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM18 14H6V12H18V14ZM18 11H6V9H18V11ZM18 8H6V6H18V8Z" fill="#00D1FF"/> </svg> </div> <div class="nav-item profile"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="#FFD600"/> </svg> </div> </div> <div class="floating-particles"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create particles const particlesContainer = document.querySelector('.floating-particles'); const colors = ['#FF4785', '#6236FF', '#00D1FF', '#FFD600']; const particleCount = 15; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 15 + 5; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.animationDuration = `${Math.random() * 30 + 15}s`; particle.style.animationDelay = `${Math.random() * 5}s`; particlesContainer.appendChild(particle); } // Add ripple effect to buttons const buttons = document.querySelectorAll('.button-3d, .nav-item, .notification-bubble, .more-button, .trending-item'); buttons.forEach(button => { button.addEventListener('click', function(e) { const x = e.clientX - this.getBoundingClientRect().left; const y = e.clientY - this.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Add bounce animation this.animate([ { transform: 'scale(1)' }, { transform: 'scale(0.95)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' } ], { duration: 400, easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' }); }); }); // Nav item click handling const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); }); }); // Add 3D tilt effect to buttons const tiltButtons = document.querySelectorAll('.button-3d'); tiltButtons.forEach(button => { button.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = x / rect.width - 0.5; const yPercent = y / rect.height - 0.5; const rotateY = xPercent * 10; const rotateX = yPercent * -10; this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`; }); button.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)'; }); }); }); </script> </body> </html>
<html> <head> <style> :root { --primary: #2d5bff; --primary-dark: #1e44c7; --secondary: #34c759; --secondary-dark: #28a745; --danger: #ff3b30; --danger-dark: #c92a21; --gray-1: #f8f9fa; --gray-2: #e9ecef; --gray-3: #dee2e6; --gray-4: #ced4da; --gray-5: #adb5bd; --gray-8: #343a40; --gray-9: #212529; --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: var(--gray-1); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .container { max-width: 660px; width: 100%; background: white; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 30px; position: relative; overflow: hidden; } h1 { font-size: 28px; margin-bottom: 12px; color: var(--gray-9); font-weight: 700; } h2 { font-size: 20px; margin-bottom: 24px; color: var(--gray-8); font-weight: 600; } p { color: var(--gray-8); line-height: 1.6; margin-bottom: 24px; } .button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .button-3d { position: relative; padding: 12px 24px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: white; cursor: pointer; box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2); transform: translateY(0); transition: all 0.15s ease; overflow: hidden; user-select: none; } .button-3d::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); border-radius: 8px; } .button-3d::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent); border-radius: 7px 7px 0 0; pointer-events: none; } .button-3d:active { transform: translateY(4px); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); } .button-3d.primary { background: linear-gradient(to bottom, var(--primary), var(--primary-dark)); } .button-3d.secondary { background: linear-gradient(to bottom, var(--secondary), var(--secondary-dark)); } .button-3d.danger { background: linear-gradient(to bottom, var(--danger), var(--danger-dark)); } .button-3d:hover::after { opacity: 0.7; } .button-3d:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2); } .button-3d.icon { display: flex; align-items: center; justify-content: center; gap: 8px; } .button-3d i { font-size: 16px; } .button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } .button-grid-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .btn-icon { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; position: relative; box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2); transform: translateY(0); transition: all 0.15s ease; background: linear-gradient(to bottom, var(--primary), var(--primary-dark)); } .btn-icon::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); border-radius: 12px; } .btn-icon::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent); border-radius: 11px 11px 0 0; pointer-events: none; } .btn-icon:active { transform: translateY(4px); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); } .btn-icon:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2); } .btn-icon:hover::after { opacity: 0.7; } .btn-label { font-size: 12px; font-weight: 600; color: var(--gray-8); } .toggle-container { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .toggle-label { font-size: 14px; font-weight: 600; color: var(--gray-8); } .toggle-switch { position: relative; width: 60px; height: 32px; border-radius: 16px; background: var(--gray-3); cursor: pointer; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .toggle-switch.active { background: linear-gradient(to right, var(--primary), var(--primary-dark)); } .toggle-switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .toggle-switch.active::after { left: calc(100% - 28px); } .notification { position: fixed; top: 20px; right: -300px; background: white; border-left: 4px solid var(--primary); padding: 16px; border-radius: 8px; box-shadow: var(--shadow-md); width: 280px; transition: all 0.3s ease; z-index: 1000; } .notification.show { right: 20px; } .notification-title { font-weight: 600; font-size: 16px; margin-bottom: 8px; } .notification-message { font-size: 14px; color: var(--gray-8); } @media (max-width: 600px) { .container { padding: 20px; } h1 { font-size: 24px; } h2 { font-size: 18px; } .button-grid { grid-template-columns: repeat(2, 1fr); } } /* Keyboard shortcut tooltip */ .keyboard-shortcut { display: inline-block; background: var(--gray-2); border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 600; color: var(--gray-8); margin-left: 8px; box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5); border: 1px solid var(--gray-3); } /* Progress bar for loading indicator */ .progress-container { width: 100%; height: 6px; background: var(--gray-2); border-radius: 3px; overflow: hidden; margin-bottom: 32px; } .progress-bar { height: 100%; width: 0; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 3px; transition: width 0.5s ease; } /* Background pattern */ .bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--gray-3) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3; pointer-events: none; } </style> </head> <body> <div class="container"> <div class="bg-pattern"></div> <h1>Productivity Suite Controls</h1> <h2>Professional 3D Button System for High-Efficiency Interfaces</h2> <p>Designed for intensive workflows where rapid, tactile feedback enhances productivity. These controls maintain visual hierarchy while providing actionable feedback with minimal cognitive load.</p> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <h2>Primary Action Buttons</h2> <div class="button-row"> <button class="button-3d primary icon" id="saveBtn"> <i>📥</i> Save Document <span class="keyboard-shortcut">⌘S</span> </button> <button class="button-3d secondary icon" id="exportBtn"> <i>📤</i> Export Data </button> <button class="button-3d danger icon" id="deleteBtn"> <i>🗑️</i> Delete Item </button> </div> <h2>Quick Access Tools</h2> <div class="button-grid"> <div class="button-grid-item"> <button class="btn-icon" id="calendarBtn">📅</button> <span class="btn-label">Calendar</span> </div> <div class="button-grid-item"> <button class="btn-icon" id="emailBtn">✉️</button> <span class="btn-label">Email</span> </div> <div class="button-grid-item"> <button class="btn-icon" id="filesBtn">📁</button> <span class="btn-label">Files</span> </div> <div class="button-grid-item"> <button class="btn-icon" id="statsBtn">📊</button> <span class="btn-label">Analytics</span> </div> <div class="button-grid-item"> <button class="btn-icon" id="notesBtn">📝</button> <span class="btn-label">Notes</span> </div> <div class="button-grid-item"> <button class="btn-icon" id="settingsBtn">⚙️</button> <span class="btn-label">Settings</span> </div> </div> <h2>System Preferences</h2> <div class="toggle-container"> <div class="toggle-label">Dark Mode</div> <div class="toggle-switch" id="darkModeToggle"></div> </div> <div class="toggle-container"> <div class="toggle-label">Auto-Save Documents</div> <div class="toggle-switch active" id="autoSaveToggle"></div> </div> <div class="toggle-container"> <div class="toggle-label">Enable Desktop Notifications</div> <div class="toggle-switch" id="notificationsToggle"></div> </div> </div> <div class="notification" id="notification"> <div class="notification-title">Action Completed</div> <div class="notification-message" id="notificationMessage">Your changes have been saved successfully.</div> </div> <script> // Progress bar animation on page load document.addEventListener('DOMContentLoaded', () => { const progressBar = document.getElementById('progressBar'); let width = 0; const interval = setInterval(() => { if (width >= 100) { clearInterval(interval); } else { width += 1; progressBar.style.width = width + '%'; } }, 10); }); // Toggle switches const toggles = document.querySelectorAll('.toggle-switch'); toggles.forEach(toggle => { toggle.addEventListener('click', () => { toggle.classList.toggle('active'); // Show notification for toggle changes if (toggle.id === 'autoSaveToggle') { showNotification('Auto-Save ' + (toggle.classList.contains('active') ? 'Enabled' : 'Disabled'), 'Documents will ' + (toggle.classList.contains('active') ? 'now be saved automatically.' : 'need to be saved manually.')); } else if (toggle.id === 'darkModeToggle') { showNotification('Theme Changed', 'Interface has switched to ' + (toggle.classList.contains('active') ? 'Dark' : 'Light') + ' mode.'); } else if (toggle.id === 'notificationsToggle') { showNotification('Notifications ' + (toggle.classList.contains('active') ? 'Enabled' : 'Disabled'), 'Desktop alerts are now ' + (toggle.classList.contains('active') ? 'active.' : 'turned off.')); } }); }); // Button press animations and notifications const allButtons = document.querySelectorAll('.button-3d, .btn-icon'); allButtons.forEach(button => { button.addEventListener('click', () => { // Apply press animation button.style.transform = 'translateY(4px)'; button.style.boxShadow = '0 0 0 0 rgba(0, 0, 0, 0.2)'; setTimeout(() => { // Reset to normal state button.style.transform = ''; button.style.boxShadow = ''; // Show different notifications based on which button was clicked if (button.id === 'saveBtn') { showNotification('Document Saved', 'Your work has been saved successfully. Last saved: ' + new Date().toLocaleTimeString()); } else if (button.id === 'exportBtn') { showNotification('Export Complete', 'Data has been exported to your selected format.'); } else if (button.id === 'deleteBtn') { showNotification('Item Deleted', 'The selected item has been moved to trash.'); } else if (button.id === 'calendarBtn') { showNotification('Calendar Opening', 'Launching calendar application...'); } else if (button.id === 'emailBtn') { showNotification('Mail Client', 'Opening your email inbox...'); } else if (button.id === 'filesBtn') { showNotification('File Explorer', 'Accessing your document library...'); } else if (button.id === 'statsBtn') { showNotification('Analytics Dashboard', 'Loading productivity metrics and reports...'); } else if (button.id === 'notesBtn') { showNotification('Note Taking', 'Opening your notes application...'); } else if (button.id === 'settingsBtn') { showNotification('Settings Panel', 'Accessing system configuration options...'); } }, 150); }); }); // Function to show notification function showNotification(title, message) { const notification = document.getElementById('notification'); document.querySelector('.notification-title').textContent = title; document.getElementById('notificationMessage').textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Add keyboard shortcuts document.addEventListener('keydown', (e) => { // Check for Cmd+S or Ctrl+S if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); // Prevent browser save dialog document.getElementById('saveBtn').click(); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AR Interface Buttons</title> <style> :root { --primary-color: #00d4ff; --secondary-color: #7648ff; --accent-color: #ff36a1; --light-color: #ffffff; --dark-color: #151a30; --depth-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); --glow-effect: 0 0 15px var(--primary-color); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--dark-color), #0a0e1d); overflow: hidden; perspective: 1000px; } .ar-interface { position: relative; width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; transform-style: preserve-3d; } .ar-header { text-align: center; color: var(--light-color); margin-bottom: 40px; opacity: 0; animation: fadeIn 1s forwards 0.2s; } .ar-header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(118, 72, 255, 0.3); } .ar-header p { font-size: 1rem; line-height: 1.6; max-width: 500px; color: rgba(255, 255, 255, 0.7); } .button-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; width: 100%; max-width: 600px; perspective: 1000px; } .ar-button { position: relative; width: 180px; height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 20px; background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transform-style: preserve-3d; transform: translateZ(10px); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s; overflow: hidden; opacity: 0; user-select: none; } .ar-button:nth-child(1) { animation: floatIn 0.8s forwards 0.4s; } .ar-button:nth-child(2) { animation: floatIn 0.8s forwards 0.6s; } .ar-button:nth-child(3) { animation: floatIn 0.8s forwards 0.8s; } .ar-button:nth-child(4) { animation: floatIn 0.8s forwards 1s; } .ar-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent); z-index: 1; } .ar-button::after { content: ''; position: absolute; width: 100%; height: 40%; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent); z-index: 1; } .button-icon { font-size: 3rem; margin-bottom: 15px; transition: transform 0.3s, text-shadow 0.3s; z-index: 2; } .ar-button:nth-child(1) .button-icon { color: var(--primary-color); } .ar-button:nth-child(2) .button-icon { color: var(--secondary-color); } .ar-button:nth-child(3) .button-icon { color: var(--accent-color); } .ar-button:nth-child(4) .button-icon { color: #36ff8a; } .button-text { color: var(--light-color); font-weight: 600; font-size: 1.1rem; text-align: center; z-index: 2; transition: transform 0.3s; } .button-description { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-align: center; max-width: 90%; margin-top: 8px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; z-index: 2; } .ar-button.active .button-description { opacity: 1; transform: translateY(0); } .glow-effect { position: absolute; width: 100%; height: 100%; border-radius: 20px; opacity: 0; transition: opacity 0.5s; z-index: 0; } .ar-button:nth-child(1) .glow-effect { box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); } .ar-button:nth-child(2) .glow-effect { box-shadow: 0 0 30px rgba(118, 72, 255, 0.5); } .ar-button:nth-child(3) .glow-effect { box-shadow: 0 0 30px rgba(255, 54, 161, 0.5); } .ar-button:nth-child(4) .glow-effect { box-shadow: 0 0 30px rgba(54, 255, 138, 0.5); } .ar-button.active .glow-effect { opacity: 0.8; } .depth-ring { position: absolute; border-radius: 18px; opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .depth-ring-1 { width: calc(100% - 4px); height: calc(100% - 4px); border: 1px solid rgba(255, 255, 255, 0.2); transform: translateZ(5px); } .depth-ring-2 { width: calc(100% - 12px); height: calc(100% - 12px); border: 1px solid rgba(255, 255, 255, 0.1); transform: translateZ(10px); } .depth-ring-3 { width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid rgba(255, 255, 255, 0.05); transform: translateZ(15px); } .ar-button.active .depth-ring { opacity: 1; } .tracking-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.15; background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 50px 50px, linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 50px 50px; transform: perspective(800px) rotateX(60deg) translateY(-200px) scale(1.5); } .gesture-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; opacity: 0; animation: fadeIn 1s forwards 1.5s; } .gesture-icon { font-size: 1.2rem; animation: pulse 2s infinite; } /* Animations */ @keyframes floatIn { 0% { opacity: 0; transform: translateZ(-50px); } 100% { opacity: 1; transform: translateZ(10px); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Responsive adjustments */ @media (max-width: 700px) { .ar-header h1 { font-size: 2rem; } .button-container { gap: 15px; max-width: 90%; } .ar-button { width: 150px; height: 150px; } .button-icon { font-size: 2.5rem; } .button-text { font-size: 1rem; } } @media (max-width: 500px) { .ar-button { width: 130px; height: 130px; } .button-icon { font-size: 2rem; margin-bottom: 10px; } .button-text { font-size: 0.9rem; } .button-description { font-size: 0.7rem; } } </style> </head> <body> <div class="ar-interface"> <div class="tracking-grid"></div> <div class="ar-header"> <h1>Spatial Interface</h1> <p>Explore our next-generation AR controls with depth-responsive gestures and tactile feedback</p> </div> <div class="button-container"> <div class="ar-button" data-depth="20"> <div class="glow-effect"></div> <div class="depth-ring depth-ring-1"></div> <div class="depth-ring depth-ring-2"></div> <div class="depth-ring depth-ring-3"></div> <div class="button-icon">🔍</div> <div class="button-text">Scan Object</div> <div class="button-description">Identify real-world objects and retrieve related information</div> </div> <div class="ar-button" data-depth="25"> <div class="glow-effect"></div> <div class="depth-ring depth-ring-1"></div> <div class="depth-ring depth-ring-2"></div> <div class="depth-ring depth-ring-3"></div> <div class="button-icon">🌐</div> <div class="button-text">View Models</div> <div class="button-description">Access your 3D model library with spatial positioning</div> </div> <div class="ar-button" data-depth="15"> <div class="glow-effect"></div> <div class="depth-ring depth-ring-1"></div> <div class="depth-ring depth-ring-2"></div> <div class="depth-ring depth-ring-3"></div> <div class="button-icon">✏️</div> <div class="button-text">Air Sketch</div> <div class="button-description">Draw 3D annotations that persist in physical space</div> </div> <div class="ar-button" data-depth="30"> <div class="glow-effect"></div> <div class="depth-ring depth-ring-1"></div> <div class="depth-ring depth-ring-2"></div> <div class="depth-ring depth-ring-3"></div> <div class="button-icon">🔊</div> <div class="button-text">Spatial Audio</div> <div class="button-description">Attach sound elements to physical locations</div> </div> </div> <div class="gesture-hint"> <span class="gesture-icon">👋</span> <span>Hover and press to activate depth-responsive controls</span> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const arButtons = document.querySelectorAll('.ar-button'); const buttonContainer = document.querySelector('.button-container'); // Add 3D parallax effect to buttons based on mouse position document.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; buttonContainer.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; arButtons.forEach(button => { // Calculate relative position for each button to add unique movement const buttonRect = button.getBoundingClientRect(); const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; const distanceX = (e.pageX - buttonCenterX) / 30; const distanceY = (e.pageY - buttonCenterY) / 30; const baseDepth = parseInt(button.getAttribute('data-depth')) || 10; if (!button.classList.contains('active')) { button.style.transform = `translateZ(${baseDepth}px) translateX(${-distanceX}px) translateY(${-distanceY}px) rotateX(${distanceY/2}deg) rotateY(${-distanceX/2}deg)`; } }); }); // Reset position when mouse leaves document.addEventListener('mouseleave', () => { buttonContainer.style.transform = 'rotateY(0deg) rotateX(0deg)'; arButtons.forEach(button => { if (!button.classList.contains('active')) { const baseDepth = parseInt(button.getAttribute('data-depth')) || 10; button.style.transform = `translateZ(${baseDepth}px)`; } }); }); // Button interactions arButtons.forEach(button => { const baseDepth = parseInt(button.getAttribute('data-depth')) || 10; const activatedDepth = baseDepth + 30; // Mouse enter (hover) effect button.addEventListener('mouseenter', () => { if (!button.classList.contains('active')) { button.style.transform = `translateZ(${baseDepth + 10}px)`; button.style.boxShadow = `0 15px 35px rgba(0, 0, 0, 0.3)`; } }); // Mouse leave effect button.addEventListener('mouseleave', () => { if (!button.classList.contains('active')) { button.style.transform = `translateZ(${baseDepth}px)`; button.style.boxShadow = 'none'; } }); // Click/press effect button.addEventListener('mousedown', () => { // Simulate haptic feedback with vibration if available if (navigator.vibrate) { navigator.vibrate(50); } // Toggle active state const isActive = button.classList.contains('active'); // First, deactivate all buttons arButtons.forEach(btn => { btn.classList.remove('active'); const btnBaseDepth = parseInt(btn.getAttribute('data-depth')) || 10; btn.style.transform = `translateZ(${btnBaseDepth}px)`; }); // Then activate this one if it wasn't already active if (!isActive) { button.classList.add('active'); button.style.transform = `translateZ(${activatedDepth}px)`; button.style.boxShadow = `0 30px 60px rgba(0, 0, 0, 0.4)`; // Add audio feedback const audio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMD19fX19fX19fX19fX19fX1//////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAQcAAAAAAAAAbCyWLhiAAAAAAD/+9RkAA/wAABpAAAACAAADSAAAAEAAAGkAAAAIAAANIAAAARMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
