Accordion menus are a versatile and efficient way to organize content on a webpage. They allow users to expand and collapse sections, making navigation intuitive and user-friendly.
In this article, we will explore 10 outstanding examples of accordion menus that showcase innovative design and functionality. These examples will inspire you to create your own dynamic and engaging interfaces.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your UI game with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect designs every time, making it a favorite among professionals.
Ready to create stunning accordion menus effortlessly? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe to design pixel-perfect UIs, including stunning accordion menus, with unmatched efficiency. Its drag-and-drop interface makes creating beautiful, responsive designs a breeze.
Ready to elevate your design game? Start for free and begin creating immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #3a86ff; --secondary: #ff006e; --dark: #141b41; --light: #f8f9fa; --gray: #e9ecef; --success: #43aa8b; --easing: cubic-bezier(0.65, 0, 0.35, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { max-width: 650px; width: 100%; background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 0 0 20px 0; } .header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 30px; position: relative; overflow: hidden; margin-bottom: 30px; } .header::before { content: ''; position: absolute; top: -10px; right: -10px; background: rgba(255, 255, 255, 0.1); width: 200px; height: 200px; border-radius: 50%; } .header::after { content: ''; position: absolute; bottom: -80px; left: -50px; background: rgba(255, 255, 255, 0.15); width: 150px; height: 150px; border-radius: 50%; } .header h1 { font-size: 2.2rem; margin-bottom: 10px; font-weight: 800; position: relative; z-index: 1; } .header p { opacity: 0.9; font-size: 1rem; line-height: 1.5; position: relative; z-index: 1; } .accordion { padding: 0 30px; } .accordion-item { border-radius: 12px; margin-bottom: 15px; background: white; border: 1px solid var(--gray); transition: all 0.3s var(--easing); overflow: hidden; } .accordion-item.active { border-color: var(--primary); box-shadow: 0 5px 15px rgba(58, 134, 255, 0.1); } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; user-select: none; position: relative; transition: all 0.3s var(--easing); } .accordion-title { font-weight: 600; font-size: 1.05rem; color: var(--dark); flex: 1; padding-right: 40px; } .accordion-item.active .accordion-title { color: var(--primary); } .accordion-icon { position: relative; width: 24px; height: 24px; transition: transform 0.4s var(--easing); } .accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background-color: var(--dark); border-radius: 2px; transition: all 0.4s var(--easing); } .accordion-icon::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); } .accordion-icon::after { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); } .accordion-item.active .accordion-icon::before, .accordion-item.active .accordion-icon::after { background-color: var(--primary); } .accordion-item.active .accordion-icon::after { transform: translateX(-50%) scaleY(0); } .accordion-item:hover .accordion-header { background-color: rgba(58, 134, 255, 0.03); } .accordion-content { max-height: 0; overflow: hidden; padding: 0 24px; transition: all 0.5s var(--easing); opacity: 0; transform: translateY(-10px); } .accordion-item.active .accordion-content { max-height: 300px; padding: 0 24px 24px; opacity: 1; transform: translateY(0); } .accordion-content p { line-height: 1.7; color: #495057; margin-bottom: 15px; } .accordion-content p:last-child { margin-bottom: 0; } .tag { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; padding: 4px 8px; border-radius: 20px; margin-left: 10px; letter-spacing: 0.5px; } .tag-shipping { background-color: #e9f5ff; color: var(--primary); } .tag-payment { background-color: #ffedea; color: #ff5233; } .tag-returns { background-color: #eafaef; color: var(--success); } .tag-account { background-color: #f0e6ff; color: #9333ea; } .tag-orders { background-color: #fff8e6; color: #f59e0b; } .highlight { font-weight: 600; color: var(--primary); position: relative; display: inline-block; } .highlight::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 3px; opacity: 0.3; } .tip { background-color: #f8fafc; border-left: 4px solid var(--success); padding: 12px 15px; margin-top: 15px; border-radius: 4px; font-size: 0.9rem; } .tip-title { font-weight: 600; color: var(--success); margin-bottom: 5px; display: flex; align-items: center; } .tip-title::before { content: '💡'; margin-right: 6px; } .link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; transition: all 0.2s; } .link:hover { color: var(--secondary); } .search-container { padding: 0 30px; margin-bottom: 25px; position: relative; } .search-input { width: 100%; padding: 15px 20px 15px 50px; border-radius: 10px; border: 2px solid var(--gray); font-size: 1rem; background-color: white; transition: all 0.3s; outline: none; } .search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2); } .search-icon { position: absolute; left: 45px; top: 50%; transform: translateY(-50%); color: #adb5bd; transition: all 0.3s; } .search-input:focus + .search-icon { color: var(--primary); } @media (max-width: 640px) { .header { padding: 25px; } .header h1 { font-size: 1.8rem; } .accordion { padding: 0 20px; } .search-container { padding: 0 20px; } .accordion-header { padding: 15px 20px; } .accordion-title { font-size: 0.95rem; } .accordion-item.active .accordion-content { padding: 0 20px 20px; } } /* Animation for new items */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeIn 0.5s var(--easing) forwards; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #aaa; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Shopping FAQs</h1> <p>Find quick answers to your most pressing questions about orders, shipping, returns, and more.</p> </div> <div class="search-container"> <input type="text" class="search-input" placeholder="Search for a question..."> <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion"> <div class="accordion-item animate-in" style="animation-delay: 0.1s;"> <div class="accordion-header"> <div class="accordion-title">What are your shipping options and timeframes?</div> <span class="tag tag-shipping">Shipping</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>We offer three shipping options:</p> <p>• <span class="highlight">Standard Shipping</span> (3-5 business days): $4.99 or FREE on orders over $50<br> • <span class="highlight">Express Shipping</span> (2 business days): $9.99<br> • <span class="highlight">Next-Day Delivery</span>: $19.99 (order by 2PM EST for next-day delivery)</p> <p>International shipping is available to 60+ countries with delivery in 7-14 business days. Shipping rates vary by location and will be calculated at checkout.</p> <div class="tip"> <div class="tip-title">Pro Tip</div> <p>Sign up for our newsletter to receive free shipping codes that work on any order size!</p> </div> </div> </div> <div class="accordion-item animate-in" style="animation-delay: 0.2s;"> <div class="accordion-header"> <div class="accordion-title">How do I track my order?</div> <span class="tag tag-orders">Orders</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>Tracking your order is simple! Once your order ships, you'll receive a confirmation email with your tracking number and a direct link to monitor its journey.</p> <p>You can also check your order status by:</p> <p>1. Logging into your account and visiting "Order History"<br> 2. Using our <a href="#" class="link">Order Lookup Tool</a> with your order number and email<br> 3. Texting your order number to 555-SHOP for instant updates</p> <p>Our tracking system updates every 4 hours, providing real-time information about your package's location and estimated delivery date.</p> </div> </div> <div class="accordion-item animate-in" style="animation-delay: 0.3s;"> <div class="accordion-header"> <div class="accordion-title">What is your return and exchange policy?</div> <span class="tag tag-returns">Returns</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>We offer a <span class="highlight">45-day hassle-free return policy</span> on most items. If you're not completely satisfied with your purchase, you can return it for a full refund or exchange it for something else.</p> <p>To initiate a return:</p> <p>1. Log into your account and select the order containing the item<br> 2. Choose "Return or Exchange Item" and follow the prompts<br> 3. Print your prepaid return label (FREE for exchanges, $5.99 for returns)</p> <p>Items must be unworn, unwashed, and with original tags attached. Some restrictions apply to final sale items, intimates, and personalized products.</p> <div class="tip"> <div class="tip-title">Customer Guarantee</div> <p>Members of our loyalty program enjoy free return shipping and an extended 60-day return window!</p> </div> </div> </div> <div class="accordion-item animate-in" style="animation-delay: 0.4s;"> <div class="accordion-header"> <div class="accordion-title">Which payment methods do you accept?</div> <span class="tag tag-payment">Payment</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>We accept a wide range of payment options to make shopping convenient for everyone:</p> <p>• All major credit and debit cards (Visa, Mastercard, American Express, Discover)<br> • PayPal and Venmo<br> • Apple Pay and Google Pay<br> • Shop Pay and Afterpay (buy now, pay later in 4 installments)<br> • Gift cards and store credit</p> <p>All transactions are encrypted and secured with industry-leading technology. We never store your full credit card details on our servers.</p> <p>International customers: We process transactions in USD, but your bank will convert to your local currency. Some banks may charge a foreign transaction fee.</p> </div> </div> <div class="accordion-item animate-in" style="animation-delay: 0.5s;"> <div class="accordion-header"> <div class="accordion-title">How do I reset my password or update account info?</div> <span class="tag tag-account">Account</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>To reset your password:</p> <p>1. Click "Login" at the top of our website<br> 2. Select "Forgot Password?"<br> 3. Enter the email address associated with your account<br> 4. Check your inbox for a password reset link (valid for 30 minutes)</p> <p>To update your account information:</p> <p>1. Log into your account<br> 2. Navigate to "Account Settings"<br> 3. Select the information you wish to update (shipping address, payment methods, etc.)<br> 4. Make your changes and click "Save"</p> <p>For security reasons, some changes may require reverification through email confirmation.</p> </div> </div> <div class="accordion-item animate-in" style="animation-delay: 0.6s;"> <div class="accordion-header"> <div class="accordion-title">Do you offer price matching or price adjustment?</div> <span class="tag tag-payment">Payment</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>Yes, we offer both price matching and price adjustments!</p> <p><span class="highlight">Price Matching:</span> If you find an identical item for a lower price at a qualifying competitor, we'll match it at the time of purchase. Simply show us the competitor's current advertised price (online or in-store) when checking out.</p> <p><span class="highlight">Price Adjustment:</span> If an item you purchased goes on sale within 14 days of your purchase, we'll refund the difference. Contact our customer service team with your order number and proof of the price change.</p> <p>Exclusions apply to clearance items, flash sales, and doorbusters. Price matching is limited to retailers who sell identical products (same model, color, size, etc.).</p> </div> </div> <div class="accordion-item animate-in" style="animation-delay: 0.7s;"> <div class="accordion-header"> <div class="accordion-title">How does your loyalty program work?</div> <span class="tag tag-account">Account</span> <div class="accordion-icon"></div> </div> <div class="accordion-content"> <p>Our <span class="highlight">StyleRewards</span> loyalty program lets you earn points with every purchase that convert to store credit!</p> <p>• <strong>Silver Tier (0-499 points):</strong> Earn 1 point per $1 spent, birthday gift, exclusive sale access<br> • <strong>Gold Tier (500-999 points):</strong> Earn 1.5 points per $1 spent, free standard shipping, early access to new collections<br> • <strong>Platinum Tier (1000+ points):</strong> Earn 2 points per $1 spent, free express shipping, dedicated concierge, annual gift</p> <p>100 points = $5 in StyleRewards credit that can be applied to any purchase. Points never expire as long as your account remains active with at least one purchase per year.</p> <p>Join for free at checkout or through your account settings!</p> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); header.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all items accordionItems.forEach(otherItem => { if (otherItem !== item) { otherItem.classList.remove('active'); } }); // Toggle the clicked item if (!isActive) { item.classList.add('active'); } else { item.classList.remove('active'); } }); }); // Search functionality const searchInput = document.querySelector('.search-input'); searchInput.addEventListener('input', function() { const searchText = this.value.toLowerCase(); accordionItems.forEach(item => { const title = item.querySelector('.accordion-title').textContent.toLowerCase(); const content = item.querySelector('.accordion-content').textContent.toLowerCase(); // Check if the search text is in the title or content if (title.includes(searchText) || content.includes(searchText)) { item.style.display = 'block'; // If we have search text and it matches, automatically expand this item if (searchText.length > 2) { item.classList.add('active'); // Highlight matching text if needed // (This would be a more advanced feature) } } else { item.style.display = 'none'; } }); // If search is cleared, collapse all items if (searchText === '') { accordionItems.forEach(item => { item.classList.remove('active'); item.style.display = 'block'; }); } }); // Add ripple effect on accordion headers accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); header.addEventListener('mousedown', function(e) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.cssText = ` position: absolute; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; pointer-events: none; width: 0; height: 0; left: ${x}px; top: ${y}px; transform: translate(-50%, -50%); transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1); `; this.appendChild(ripple); setTimeout(() => { ripple.style.width = '300px'; ripple.style.height = '300px'; ripple.style.opacity = '0'; }, 1); setTimeout(() => { ripple.remove(); }, 500); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enterprise Dashboard Navigation</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --accent-hover: #2980b9; --text: #2c3e50; --text-light: #7f8c8d; --bg: #f9f9f9; --bg-panel: #ffffff; --border: #ecf0f1; --success: #27ae60; --warning: #f39c12; --danger: #e74c3c; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; padding: 0; margin: 0; font-size: 14px; line-height: 1.5; overflow-x: hidden; } .dashboard-container { display: flex; max-width: 700px; height: 700px; margin: 0 auto; overflow: hidden; background-color: var(--bg); box-shadow: 0 10px 30px rgba(44, 62, 80, 0.1); border-radius: 8px; } .sidebar { width: 280px; background-color: var(--bg-panel); border-right: 1px solid var(--border); overflow-y: auto; transition: width 0.3s ease; height: 100%; padding: 0; position: relative; } .content-area { flex: 1; overflow-y: auto; padding: 24px; background-color: var(--bg); position: relative; } .header { padding: 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background-color: var(--bg-panel); } .logo { font-weight: 700; font-size: 18px; color: var(--primary); display: flex; align-items: center; gap: 10px; } .logo-icon { width: 24px; height: 24px; background-color: var(--accent); border-radius: 6px; position: relative; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; background-color: white; } .logo-icon::before { width: 12px; height: 2px; top: 11px; left: 6px; } .logo-icon::after { width: 2px; height: 12px; top: 6px; left: 11px; } .accordion { padding: 0; list-style: none; } .accordion-item { border-bottom: 1px solid var(--border); } .accordion-button { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 16px 20px; border: none; background-color: var(--bg-panel); color: var(--text); cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.2s ease; } .accordion-button:hover { background-color: rgba(52, 152, 219, 0.05); } .accordion-button.active { background-color: rgba(52, 152, 219, 0.1); color: var(--accent); } .accordion-button-text { display: flex; align-items: center; gap: 12px; } .icon { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--text-light); transition: transform 0.3s ease, color 0.3s ease; } .accordion-button.active .icon { color: var(--accent); } .chevron { font-size: 12px; transition: transform 0.3s ease; } .accordion-button.active .chevron { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: rgba(44, 62, 80, 0.02); } .accordion-content-inner { padding: 8px 0; } .sub-menu { list-style: none; padding: 0; } .sub-menu-item { padding: 0; } .sub-menu-link { display: flex; align-items: center; padding: 10px 20px 10px 54px; color: var(--text-light); text-decoration: none; font-weight: 500; font-size: 13px; position: relative; transition: all 0.2s ease; } .sub-menu-link:hover { background-color: rgba(52, 152, 219, 0.05); color: var(--accent); } .sub-menu-link.active { color: var(--accent); background-color: rgba(52, 152, 219, 0.08); } .sub-menu-link.active::before { content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background-color: var(--accent); border-radius: 2px; } .badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; background-color: var(--accent); color: white; margin-left: 8px; } .badge.warning { background-color: var(--warning); } .badge.danger { background-color: var(--danger); } .badge.success { background-color: var(--success); } .content-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .content-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .content-description { color: var(--text-light); font-size: 14px; } .data-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; } .data-card { background-color: var(--bg-panel); border-radius: 8px; padding: 16px; border: 1px solid var(--border); transition: all 0.2s ease; } .data-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(44, 62, 80, 0.1); } .data-card-title { font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; } .data-card-value { font-size: 24px; font-weight: 700; margin-bottom: 8px; } .data-card-trend { display: flex; align-items: center; font-size: 12px; font-weight: 600; } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } .data-chart { background-color: var(--bg-panel); border-radius: 8px; padding: 16px; border: 1px solid var(--border); height: 240px; position: relative; overflow: hidden; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .chart-title { font-size: 15px; font-weight: 600; } .chart-controls { display: flex; gap: 8px; } .chart-control { padding: 6px 12px; background-color: transparent; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--text-light); cursor: pointer; transition: all 0.2s ease; } .chart-control:hover { background-color: rgba(52, 152, 219, 0.05); color: var(--accent); border-color: var(--accent); } .chart-control.active { background-color: var(--accent); color: white; border-color: var(--accent); } .chart-canvas { width: 100%; height: 160px; display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; } .chart-bar { flex: 1; background-color: var(--accent); border-radius: 4px 4px 0 0; transition: height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; opacity: 0.7; } .chart-bar:hover { opacity: 1; } .chart-bar::after { content: attr(data-value); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--text); } .chart-axis { display: flex; justify-content: space-between; margin-top: 8px; } .chart-label { font-size: 10px; color: var(--text-light); flex: 1; text-align: center; } .toggle-btn { position: absolute; top: 20px; right: 24px; background-color: var(--accent); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); z-index: 10; transition: all 0.3s ease; } .toggle-btn:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(52, 152, 219, 0.4); } .user-profile { display: flex; align-items: center; padding: 16px 20px; margin-top: auto; border-top: 1px solid var(--border); position: absolute; bottom: 0; width: 100%; background-color: var(--bg-panel); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 12px; } .user-info { flex: 1; } .user-name { font-size: 13px; font-weight: 600; } .user-role { font-size: 11px; color: var(--text-light); } .settings-btn { color: var(--text-light); background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .settings-btn:hover { color: var(--accent); } /* Tooltip styles */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; padding: 6px 10px; background-color: var(--secondary); color: white; font-size: 11px; border-radius: 4px; white-space: nowrap; z-index: 10; } [data-tooltip]:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--secondary) transparent transparent transparent; z-index: 10; } /* Animation keyframes */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } .fadeIn { animation: fadeIn 0.5s ease forwards; } @media (max-width: 700px) { .dashboard-container { flex-direction: column; height: 700px; } .sidebar { width: 100%; height: auto; max-height: 350px; border-right: none; border-bottom: 1px solid var(--border); } .content-area { height: auto; } .data-cards { grid-template-columns: 1fr; } .user-profile { position: relative; } } </style> </head> <body> <div class="dashboard-container"> <aside class="sidebar"> <div class="header"> <div class="logo"> <div class="logo-icon"></div> <span>DataSphere</span> </div> </div> <ul class="accordion"> <li class="accordion-item"> <button class="accordion-button active"> <div class="accordion-button-text"> <span class="icon">📊</span> <span>Analytics</span> </div> <span class="chevron">▼</span> </button> <div class="accordion-content" style="max-height: 500px;"> <div class="accordion-content-inner"> <ul class="sub-menu"> <li class="sub-menu-item"> <a href="#" class="sub-menu-link active">Performance Metrics</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">User Behavior</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Conversion Funnels</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Real-time Data <span class="badge pulse">Live</span></a> </li> </ul> </div> </div> </li> <li class="accordion-item"> <button class="accordion-button"> <div class="accordion-button-text"> <span class="icon">📈</span> <span>Reports</span> </div> <span class="chevron">▼</span> </button> <div class="accordion-content"> <div class="accordion-content-inner"> <ul class="sub-menu"> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Monthly Summary</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Quarterly Analysis</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Annual Projections</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Custom Reports <span class="badge success">New</span></a> </li> </ul> </div> </div> </li> <li class="accordion-item"> <button class="accordion-button"> <div class="accordion-button-text"> <span class="icon">🔍</span> <span>Data Management</span> </div> <span class="chevron">▼</span> </button> <div class="accordion-content"> <div class="accordion-content-inner"> <ul class="sub-menu"> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Data Sources</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Integration Settings</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Data Quality <span class="badge warning">4 Issues</span></a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Storage Management</a> </li> </ul> </div> </div> </li> <li class="accordion-item"> <button class="accordion-button"> <div class="accordion-button-text"> <span class="icon">⚙️</span> <span>System</span> </div> <span class="chevron">▼</span> </button> <div class="accordion-content"> <div class="accordion-content-inner"> <ul class="sub-menu"> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Team Management</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">User Permissions</a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">Security <span class="badge danger">Update</span></a> </li> <li class="sub-menu-item"> <a href="#" class="sub-menu-link">System Health</a> </li> </ul> </div> </div> </li> </ul> <div class="user-profile"> <div class="user-avatar">AJ</div> <div class="user-info"> <div class="user-name">Alex Johnson</div> <div class="user-role">Data Analyst</div> </div> <button class="settings-btn" data-tooltip="Account Settings">⚙️</button> </div> </aside> <main class="content-area"> <div class="content-header"> <h1 class="content-title">Performance Metrics</h1> <p class="content-description">Track key performance indicators and monitor trends over time.</p> </div> <div class="data-cards"> <div class="data-card fadeIn" style="animation-delay: 0.1s"> <div class="data-card-title">ACTIVE USERS</div> <div class="data-card-value">24,834</div> <div class="data-card-trend trend-up">+12.6% vs last week</div> </div> <div class="data-card fadeIn" style="animation-delay: 0.2s"> <div class="data-card-title">CONVERSION RATE</div> <div class="data-card-value">3.7%</div> <div class="data-card-trend trend-up">+0.4% vs last week</div> </div> <div class="data-card fadeIn" style="animation-delay: 0.3s"> <div class="data-card-title">AVG. SESSION TIME</div> <div class="data-card-value">4:32</div> <div class="data-card-trend trend-down">-0:18 vs last week</div> </div> <div class="data-card fadeIn" style="animation-delay: 0.4s"> <div class="data-card-title">ERROR RATE</div> <div class="data-card-value">0.26%</div> <div class="data-card-trend trend-up">+0.03% vs last week</div> </div> </div> <div class="data-chart fadeIn" style="animation-delay: 0.5s"> <div class="chart-header"> <div class="chart-title">User Engagement Trend</div> <div class="chart-controls"> <button class="chart-control">Week</button> <button class="chart-control active">Month</button> <button class="chart-control">Quarter</button> </div> </div> <div class="chart-canvas"> <div class="chart-bar" style="height: 30%" data-value="43"></div> <div class="chart-bar" style="height: 45%" data-value="65"></div> <div class="chart-bar" style="height: 40%" data-value="58"></div> <div class="chart-bar" style="height: 60%" data-value="87"></div> <div class="chart-bar" style="height: 50%" data-value="72"></div> <div class="chart-bar" style="height: 75%" data-value="108"></div> <div class="chart-bar" style="height: 85%" data-value="124"></div> </div> <div class="chart-axis"> <div class="chart-label">Apr 1</div> <div class="chart-label">Apr 5</div> <div class="chart-label">Apr 10</div> <div class="chart-label">Apr 15</div> <div class="chart-label">Apr 20</div> <div class="chart-label">Apr 25</div> <div class="chart-label">Apr 30</div> </div> </div> </main> </div> <script> document.addEventListener('DOMContentLoaded', function() { const accordionButtons = document.querySelectorAll('.accordion-button'); // Initialize accordion accordionButtons.forEach(button => { button.addEventListener('click', function() { // Toggle active state this.classList.toggle('active'); // Get the content element const content = this.nextElementSibling; // Toggle height if (this.classList.contains('active')) { content.style.maxHeight = content.scrollHeight + 'px'; } else { content.style.maxHeight = '0px'; } }); }); // Sublinks click handler const subMenuLinks = document.querySelectorAll('.sub-menu-link'); subMenuLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Remove active class from all links subMenuLinks.forEach(l => l.classList.remove('active')); // Add active class to clicked link this.classList.add('active'); // Update content area with relevant content (simulated) const contentTitle = document.querySelector('.content-title'); const contentDescription = document.querySelector('.content-description'); if (contentTitle && contentDescription) { contentTitle.textContent = this.textContent.replace(/Live|New|Update|\d+ Issues/g, '').trim(); // Custom descriptions for each menu item const descriptions = { 'Performance Metrics': 'Track key performance indicators and monitor trends over time.', 'User Behavior': 'Analyze how users interact with your product and services.', 'Conversion Funnels': 'Visualize and optimize your conversion paths.', 'Real-time Data': 'Monitor activity as it happens with live data feeds.', 'Monthly Summary': 'Review aggregated data from the past month.', 'Quarterly Analysis': 'Examine quarterly performance and identify trends.', 'Annual Projections': 'Plan and forecast based on historical data.', 'Custom Reports': 'Create and manage tailored reports for specific needs.', 'Data Sources': 'Manage connections to your various data providers.', 'Integration Settings': 'Configure how systems share and process data.', 'Data Quality': 'Identify and resolve data inconsistencies and errors.', 'Storage Management': 'Monitor and optimize your data storage usage.', 'Team Management': 'Add, remove, and organize team members and groups.', 'User Permissions': 'Set access controls for dashboard components.', 'Security': 'Configure security settings and review access logs.', 'System Health': 'Monitor system performance and resource usage.' }; const linkText = this.textContent.replace(/Live|New|Update|\d+ Issues/g, '').trim(); contentDescription.textContent = descriptions[linkText] || 'View detailed information about this section.'; } // Simulate content loading with animation const dataCards = document.querySelectorAll('.data-card'); const dataChart = document.querySelector('.data-chart'); if (dataCards.length) { dataCards.forEach((card, index) => { card.classList.remove('fadeIn'); setTimeout(() => { card.classList.add('fadeIn'); }, 50 * index); }); } if (dataChart) { dataChart.classList.remove('fadeIn'); setTimeout(() => { dataChart.classList.add('fadeIn'); // Update chart data randomly to simulate different data per section const chartBars = dataChart.querySelectorAll('.chart-bar'); chartBars.forEach(bar => { const randomHeight = Math.floor(Math.random() * 85) + 15; const randomValue = Math.floor(randomHeight * 1.45); bar.style.height = randomHeight + '%'; bar.setAttribute('data-value', randomValue); }); }, 200); } }); }); // Chart controls click handler const chartControls = document.querySelectorAll('.chart-control'); chartControls.forEach(control => { control.addEventListener('click', function() { // Remove active class from all controls chartControls.forEach(c => c.classList.remove('active')); // Add active class to clicked control this.classList.add('active'); // Update chart data to simulate timeframe change const chartBars = document.querySelectorAll('.chart-bar'); chartBars.forEach(bar => { const randomHeight = Math.floor(Math.random() * 85) + 15; const randomValue = Math.floor(randomHeight * 1.45); bar.style.height = '0%'; setTimeout(() => { bar.style.height = randomHeight + '%'; bar.setAttribute('data-value', randomValue); }, 300); }); // Update time labels based on selected timeframe const chartLabels = document.querySelectorAll('.chart-label'); const labelSets = { 'Week': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 'Month': ['Apr 1', 'Apr 5', 'Apr 10', 'Apr 15', 'Apr 20', 'Apr 25', 'Apr 30'], 'Quarter': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }; const selectedTimeframe = this.textContent; const labels = labelSets[selectedTimeframe] || labelSets['Month']; chartLabels.forEach((label, index) => { label.textContent = labels[index] || ''; }); }); }); // Initialize bar chart animation on load setTimeout(() => { const chartBars = document.querySelectorAll('.chart-bar'); const originalHeights = Array.from(chartBars).map(bar => bar.style.height); // Reset heights to animate from zero chartBars.forEach(bar => { bar.style.height = '0%'; }); // Animate to original heights setTimeout(() => { chartBars.forEach((bar, index) => { bar.style.height = originalHeights[index]; }); }, 300); }, 500); }); </script> </body> </html>
<html> <head> <style> :root { --primary-color: #232a36; --secondary-color: #f5f7fa; --highlight-color: #3498db; --text-primary: #2c3e50; --text-secondary: #7f8c8d; --border-color: #e0e4e9; --shadow-color: rgba(0, 0, 0, 0.05); --transition-speed: 0.3s; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background-color: var(--secondary-color); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; display: flex; justify-content: center; padding: 20px; height: 100vh; } .documentation-portal { width: 100%; max-width: 700px; background-color: white; border-radius: 8px; box-shadow: 0 8px 30px var(--shadow-color); overflow: hidden; display: flex; flex-direction: column; height: 100%; max-height: 700px; } .portal-header { padding: 20px 25px; background-color: var(--primary-color); color: white; position: relative; z-index: 10; } .portal-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; display: flex; align-items: center; } .portal-title svg { margin-right: 10px; } .portal-subtitle { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .search-container { margin-top: 15px; position: relative; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); } .search-input { width: 100%; padding: 10px 10px 10px 40px; border-radius: 6px; border: none; background-color: rgba(255, 255, 255, 0.1); color: white; font-family: var(--font-sans); font-size: 0.9rem; transition: background-color var(--transition-speed); } .search-input:focus { outline: none; background-color: rgba(255, 255, 255, 0.15); } .search-input::placeholder { color: rgba(255, 255, 255, 0.5); } .accordion-container { overflow-y: auto; flex-grow: 1; padding: 20px 0; scrollbar-width: thin; scrollbar-color: var(--text-secondary) transparent; } .accordion-container::-webkit-scrollbar { width: 6px; } .accordion-container::-webkit-scrollbar-track { background: transparent; } .accordion-container::-webkit-scrollbar-thumb { background-color: var(--text-secondary); border-radius: 20px; } .accordion-section { border-bottom: 1px solid var(--border-color); margin-bottom: 10px; } .accordion-header { padding: 15px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color var(--transition-speed); font-weight: 600; position: relative; } .accordion-header:hover { background-color: rgba(0, 0, 0, 0.02); } .accordion-header .indicator { transition: transform var(--transition-speed); color: var(--text-secondary); } .accordion-header.active .indicator { transform: rotate(90deg); color: var(--highlight-color); } .accordion-header .section-icon { margin-right: 12px; color: var(--highlight-color); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-speed) ease-out; padding: 0 25px; } .sub-topic { padding: 10px 0 10px 30px; cursor: pointer; position: relative; display: flex; align-items: center; font-size: 0.95rem; color: var(--text-secondary); transition: color var(--transition-speed); } .sub-topic:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background-color: var(--border-color); } .sub-topic:hover { color: var(--highlight-color); } .sub-topic.active { color: var(--highlight-color); font-weight: 500; } .sub-topic.active:before { background-color: var(--highlight-color); } .sub-topic-icon { margin-right: 8px; font-size: 16px; } .topic-detail { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; padding: 0 0 0 30px; margin-left: 30px; border-left: 1px dashed var(--border-color); } .topic-detail.show { max-height: 500px; padding-top: 10px; padding-bottom: 15px; } .code-block { background-color: #f8f9fa; border-radius: 4px; padding: 12px; margin: 10px 0; font-family: var(--font-mono); font-size: 0.85rem; overflow-x: auto; position: relative; border-left: 3px solid var(--highlight-color); } .code-block code { display: block; color: var(--text-primary); line-height: 1.5; } .copy-button { position: absolute; top: 8px; right: 8px; background-color: rgba(255, 255, 255, 0.8); border: none; border-radius: 4px; padding: 4px 8px; font-size: 0.7rem; cursor: pointer; transition: background-color var(--transition-speed); color: var(--text-primary); } .copy-button:hover { background-color: rgba(255, 255, 255, 1); } .info-box { background-color: rgba(52, 152, 219, 0.1); border-left: 3px solid var(--highlight-color); padding: 10px 15px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; } .info-box-title { display: flex; align-items: center; font-weight: 600; margin-bottom: 5px; color: var(--highlight-color); } .info-box-title svg { margin-right: 8px; } .info-box-content { color: var(--text-primary); } .topic-header { font-weight: 500; margin-bottom: 8px; font-size: 0.95rem; color: var(--text-primary); } .topic-text { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.6; } /* Badge styles */ .badge { display: inline-block; padding: 3px 6px; font-size: 0.7rem; border-radius: 3px; background-color: #e9f0fd; color: var(--highlight-color); font-weight: 600; margin-left: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .badge.new { background-color: #ebfbf0; color: #38c172; } .badge.beta { background-color: #feeed7; color: #f6993f; } .pagination { display: flex; justify-content: space-between; padding: 15px 25px; background-color: white; border-top: 1px solid var(--border-color); } .pagination-button { display: flex; align-items: center; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; padding: 5px 10px; transition: color var(--transition-speed); } .pagination-button:hover { color: var(--highlight-color); } .pagination-button svg { width: 16px; height: 16px; } .prev-button svg { margin-right: 8px; } .next-button svg { margin-left: 8px; } .pagination-button.disabled { opacity: 0.5; cursor: not-allowed; } .pagination-button.disabled:hover { color: var(--text-secondary); } /* ANIMATION KEYFRAMES */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(52, 152, 219, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); } } /* RESPONSIVE STYLES */ @media (max-width: 600px) { .portal-header { padding: 15px 20px; } .accordion-header, .accordion-content { padding-left: 20px; padding-right: 20px; } .pagination { padding: 12px 20px; } .portal-title { font-size: 1.3rem; } } @media (max-width: 400px) { .portal-title { font-size: 1.1rem; } .portal-subtitle { font-size: 0.8rem; } } </style> </head> <body> <div class="documentation-portal"> <div class="portal-header"> <div class="portal-title"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5 9L12 16.5L4.5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Developer Documentation </div> <div class="portal-subtitle">Cloud API Reference v4.2.1</div> <div class="search-container"> <div class="search-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 21L15.8033 15.8033M15.8033 15.8033C17.1605 14.4461 18 12.5711 18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18C12.5711 18 14.4461 17.1605 15.8033 15.8033Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <input type="text" class="search-input" placeholder="Search documentation..."> </div> </div> <div class="accordion-container"> <!-- GETTING STARTED SECTION --> <div class="accordion-section"> <div class="accordion-header" data-section="getting-started"> <div> <svg class="section-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Getting Started </div> <svg class="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-content" id="getting-started-content"> <div class="sub-topic" data-topic="introduction"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V12M12 16H12.01M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Introduction <span class="badge">Essential</span> </div> <div class="topic-detail" id="introduction-detail"> <div class="topic-header">Overview</div> <p class="topic-text">The Cloud API provides a comprehensive set of endpoints for managing cloud resources programmatically. This introduction will help you understand the core concepts before diving into specific API operations.</p> <div class="info-box"> <div class="info-box-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Before you begin </div> <div class="info-box-content"> Ensure you have a valid API key and have activated your account in the developer portal. All requests require authentication. </div> </div> </div> <div class="sub-topic" data-topic="authentication"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15V17M6 9V7C6 4.79086 7.79086 3 10 3H14C16.2091 3 18 4.79086 18 7V9M6 9C3.79086 9 2 10.7909 2 13V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V13C22 10.7909 20.2091 9 18 9M6 9H18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Authentication </div> <div class="topic-detail" id="authentication-detail"> <div class="topic-header">API Key Authentication</div> <p class="topic-text">All API requests require an API key to be included in the request headers. Your API key should be kept confidential and not shared publicly.</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Example request with API key const response = await fetch('https://api.cloudservice.com/v4/resources', { headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' } }); </code> </div> <div class="topic-header">Scoped Access Tokens</div> <p class="topic-text">For more granular control, you can generate scoped access tokens with specific permissions and expiration times.</p> </div> <div class="sub-topic" data-topic="quickstart"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 10V3L4 14H11V21L20 10H13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Quick Start Guide <span class="badge new">New</span> </div> <div class="topic-detail" id="quickstart-detail"> <div class="topic-header">5-Minute Setup</div> <p class="topic-text">Get up and running with the Cloud API in just five minutes. This guide will walk you through creating your first resource.</p> <ol style="margin-left: 15px; margin-bottom: 15px; color: var(--text-secondary);"> <li>Generate an API key in the developer portal</li> <li>Install the official SDK for your language</li> <li>Authenticate your first request</li> <li>Create a basic cloud resource</li> </ol> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Quick start example in JavaScript import { CloudClient } from '@cloud/sdk'; const client = new CloudClient({ apiKey: 'YOUR_API_KEY' }); // Create your first virtual machine async function createVM() { const vm = await client.compute.createInstance({ name: 'my-first-instance', size: 'standard.small', image: 'ubuntu-20.04' }); console.log(`VM created with ID: ${vm.id}`); } </code> </div> </div> </div> </div> <!-- CORE CONCEPTS SECTION --> <div class="accordion-section"> <div class="accordion-header" data-section="core-concepts"> <div> <svg class="section-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 9.5H12M12 9.5H22M12 9.5V21M22 4.5V16.5C22 17.6046 21.1046 18.5 20 18.5H4C2.89543 18.5 2 17.6046 2 16.5V4.5C2 3.39543 2.89543 2.5 4 2.5H20C21.1046 2.5 22 3.39543 22 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Core Concepts </div> <svg class="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-content" id="core-concepts-content"> <div class="sub-topic" data-topic="resources"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 12H15M9 16H15M9 8H15M5 8H5.01M5 12H5.01M5 16H5.01M3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Resource Model </div> <div class="topic-detail" id="resources-detail"> <div class="topic-header">Understanding Cloud Resources</div> <p class="topic-text">All entities in the Cloud API are represented as resources. Each resource has a unique identifier, metadata, and a set of operations that can be performed on it.</p> <div class="topic-header">Resource Hierarchy</div> <p class="topic-text">Resources are organized hierarchically. Projects contain resources, which may contain child resources. This hierarchy informs access control and resource management.</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Example resource structure { "id": "res-8fb31xvp", "name": "production-database", "type": "database", "created_at": "2023-03-15T14:32:09Z", "project_id": "proj-5wn72c", "tags": ["production", "mysql", "critical"], "status": "running", "region": "us-east-1" } </code> </div> </div> <div class="sub-topic" data-topic="rate-limiting"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Rate Limiting </div> <div class="topic-detail" id="rate-limiting-detail"> <div class="topic-header">API Rate Limits</div> <p class="topic-text">To ensure fair usage, the API implements rate limiting. Default limits are 100 requests per minute per API key, with burst capabilities for short periods.</p> <div class="info-box"> <div class="info-box-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Rate Limit Headers </div> <div class="info-box-content"> Monitor your usage with the following response headers: <code style="display: block; margin-top: 5px; font-family: var(--font-mono);"> X-RateLimit-Limit: 100 X-RateLimit-Remaining: 86 X-RateLimit-Reset: 1625176672 </code> </div> </div> <div class="topic-header">Handling Rate Limit Exceeded</div> <p class="topic-text">When you exceed rate limits, the API returns a 429 Too Many Requests status code. Implement exponential backoff in your clients to handle this gracefully.</p> </div> <div class="sub-topic" data-topic="error-handling"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 9V13M12 17H12.01M5.07183 19H18.9282C20.4678 19 21.4301 17.3333 20.6603 16L13.7321 4C12.9623 2.66667 11.0378 2.66667 10.268 4L3.33978 16C2.56998 17.3333 3.53223 19 5.07183 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Error Handling <span class="badge beta">Beta</span> </div> <div class="topic-detail" id="error-handling-detail"> <div class="topic-header">Standard Error Format</div> <p class="topic-text">All API errors follow a consistent JSON format that includes an error code, message, and optional details for debugging.</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Example error response { "error": { "code": "resource_not_found", "message": "The requested resource was not found", "details": { "resource_id": "vm-273x9c", "resource_type": "virtual_machine" }, "request_id": "req-9c724a31" // Use this ID when contacting support } } </code> </div> <div class="topic-header">Common Error Codes</div> <p class="topic-text">Familiarize yourself with common error codes to improve your error handling logic:</p> <ul style="margin-left: 15px; margin-bottom: 15px; color: var(--text-secondary);"> <li><strong>authentication_failed</strong> - Invalid or missing API key</li> <li><strong>resource_not_found</strong> - The requested resource doesn't exist</li> <li><strong>quota_exceeded</strong> - Account quota has been exceeded</li> <li><strong>invalid_request</strong> - Malformed request syntax</li> </ul> </div> </div> </div> <!-- API ENDPOINTS SECTION --> <div class="accordion-section"> <div class="accordion-header" data-section="api-endpoints"> <div> <svg class="section-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 20L14 4M18 8L22 12L18 16M6 16L2 12L6 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> API Endpoints </div> <svg class="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-content" id="api-endpoints-content"> <div class="sub-topic" data-topic="compute"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19M5 12C3.89543 12 3 11.1046 3 10V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V10C21 11.1046 20.1046 12 19 12M5 12C3.89543 12 3 12.8954 3 14V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V14C21 12.8954 20.1046 12 19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Compute Resources <span class="badge">v4</span> </div> <div class="topic-detail" id="compute-detail"> <div class="topic-header">Virtual Machines API</div> <p class="topic-text">Create, manage, and monitor virtual machine instances with the following endpoints:</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // List all VMs GET /v4/compute/instances // Create a new VM POST /v4/compute/instances { "name": "api-server", "size": "standard.medium", "image": "ubuntu-20.04", "region": "us-east-1", "ssh_keys": ["key-1234"] } // Get VM details GET /v4/compute/instances/{instance_id} // Delete a VM DELETE /v4/compute/instances/{instance_id} </code> </div> <div class="info-box"> <div class="info-box-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 10V3L4 14H11V21L20 10H13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Performance Tip </div> <div class="info-box-content"> Use the <code>?embed=metrics</code> query parameter to include real-time performance metrics when fetching instance details. </div> </div> </div> <div class="sub-topic" data-topic="storage"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 16V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V16M19 8V4C19 3.44772 18.5523 3 18 3H6C5.44772 3 5 3.44772 5 4V8M2 12H22M10 12H14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> Storage Services </div> <div class="topic-detail" id="storage-detail"> <div class="topic-header">Block Storage API</div> <p class="topic-text">Manage persistent block storage volumes that can be attached to VM instances:</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Create a new volume POST /v4/storage/volumes { "name": "database-storage", "size_gb": 100, "type": "ssd", "region": "us-east-1" } // Attach volume to instance POST /v4/storage/volumes/{volume_id}/actions { "type": "attach", "instance_id": "vm-273x9c", "device": "/dev/sda" } </code> </div> <div class="topic-header">Object Storage API</div> <p class="topic-text">Store and retrieve any amount of data with the object storage service:</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Create a new bucket POST /v4/storage/buckets { "name": "user-uploads", "region": "us-east-1", "access": "private" } // List objects in bucket GET /v4/storage/buckets/{bucket_name}/objects </code> </div> </div> <div class="sub-topic" data-topic="networking"> <svg class="sub-topic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 6H20M9 12H20M9 18H20M5 6V6.01M5 12V12.01M5 18V18.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Networking </div> <div class="topic-detail" id="networking-detail"> <div class="topic-header">Virtual Networks</div> <p class="topic-text">Create and manage isolated virtual networks for your cloud resources:</p> <div class="code-block"> <button class="copy-button">Copy</button> <code> // Create a new VPC POST /v4/networking/vpcs { "name": "production-network", "region": "us-east-1", "ip_range": "10.10.0.0/16" } // Create a subnet within a VPC POST /v4/networking/subnets { "name": "database-subnet", "vpc_id": "vpc-938xc2", "ip_range": "10.10.1.0/24", "zone
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Portfolio Accordion</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Caveat:wght@500;700&display=swap'); :root { --primary-color: #1e2b3a; --secondary-color: #ff6b6b; --accent-color: #4ecdc4; --light-color: #f7f9fc; --dark-color: #2d3748; --transition-speed: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: var(--light-color); color: var(--primary-color); height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; padding: 20px; background-image: radial-gradient(#4ecdc4 0.5px, transparent 0.5px), radial-gradient(#ff6b6b 0.5px, transparent 0.5px); background-size: 40px 40px; background-position: 0 0, 20px 20px; background-attachment: fixed; } .container { max-width: 660px; width: 100%; padding: 20px; background-color: rgba(255, 255, 255, 0.95); border-radius: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.2); overflow: hidden; position: relative; } .header { text-align: center; margin-bottom: 30px; position: relative; } .header::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: var(--accent-color); border-radius: 2px; } .header h1 { font-size: 2rem; margin-bottom: 10px; position: relative; display: inline-block; } .header h1::before { content: "✨"; position: absolute; top: -15px; left: -20px; transform: rotate(-10deg); font-size: 1.2rem; } .header h1::after { content: "✨"; position: absolute; top: -10px; right: -20px; transform: rotate(10deg); font-size: 1.2rem; } .header p { font-size: 0.9rem; color: #666; font-family: 'Caveat', cursive; font-size: 1.2rem; } .accordion { list-style: none; perspective: 1000px; } .accordion-item { margin-bottom: 15px; border-radius: 12px; background: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; transition: all var(--transition-speed) ease; transform-origin: top center; transform-style: preserve-3d; border: 1px solid rgba(0, 0, 0, 0.05); } .accordion-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--secondary-color); transform: scaleY(0); transition: transform var(--transition-speed) ease; border-radius: 4px 0 0 4px; } .accordion-item:hover::before { transform: scaleY(1); } .accordion-header { padding: 18px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; transition: background-color var(--transition-speed) ease; position: relative; z-index: 1; } .accordion-header:hover { background-color: rgba(78, 205, 196, 0.05); } .accordion-title { display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--dark-color); } .accordion-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(78, 205, 196, 0.1); border-radius: 50%; transition: all var(--transition-speed) ease; } .accordion-icon svg { width: 20px; height: 20px; transition: all var(--transition-speed) ease; } .accordion-toggle { width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; transition: all var(--transition-speed) ease; } .accordion-toggle svg { width: 12px; height: 12px; transition: transform var(--transition-speed) ease; color: var(--dark-color); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-speed) ease, padding var(--transition-speed) ease; background-color: white; border-radius: 0 0 12px 12px; opacity: 0; transform: translateY(-20px); } .accordion-body { padding: 0 20px 20px; } .accordion-item.active { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .accordion-item.active .accordion-icon { background: var(--accent-color); } .accordion-item.active .accordion-icon svg { color: white; } .accordion-item.active .accordion-toggle { background: var(--secondary-color); } .accordion-item.active .accordion-toggle svg { transform: rotate(180deg); color: white; } .accordion-item.active .accordion-content { opacity: 1; transform: translateY(0); } .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; margin-top: 15px; } .project-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; position: relative; height: 100px; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.05); } .project-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1); } .project-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .project-card:hover .project-image { transform: scale(1.1); } .project-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; padding: 10px; transform: translateY(100%); transition: transform 0.3s ease; } .project-card:hover .project-overlay { transform: translateY(0); } .project-title { font-size: 0.8rem; font-weight: 600; margin: 0; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } .hand-drawn { position: absolute; opacity: 0.8; pointer-events: none; z-index: 0; } .squiggle-1 { top: 50px; right: 30px; animation: float 4s ease-in-out infinite; } .squiggle-2 { bottom: 40px; left: 30px; animation: float 5s ease-in-out infinite; } .description { margin-top: 15px; line-height: 1.6; color: #555; font-size: 0.9rem; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .tag { padding: 4px 10px; background: rgba(78, 205, 196, 0.1); color: var(--accent-color); border-radius: 20px; font-size: 0.7rem; font-weight: 600; transition: all 0.3s ease; } .tag:hover { background: var(--accent-color); color: white; transform: translateY(-2px); } @media (max-width: 600px) { .container { padding: 15px; border-radius: 16px; } .header h1 { font-size: 1.6rem; } .accordion-title { font-size: 0.9rem; } .project-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .project-title { font-size: 0.7rem; } } /* Creative Border Effect */ .border-animation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1; } .border-animation__path { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2s ease; } .accordion-item:hover .border-animation__path { stroke-dashoffset: 0; } /* Tooltip */ .tooltip { position: absolute; background: var(--dark-color); color: white; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; z-index: 100; max-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--dark-color); } /* Scroll styles */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } </style> </head> <body> <div class="container"> <div class="header"> <h1>Creative Portfolio</h1> <p>Explore my creative universe—click to unfold</p> </div> <ul class="accordion"> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> </div> Visual Design </div> <div class="accordion-toggle"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="description"> Each visual project is an opportunity to create beauty that serves a purpose. My approach combines bold aesthetics with intuitive user experiences. </div> <div class="tags"> <span class="tag">Brand Identity</span> <span class="tag">UI Design</span> <span class="tag">Editorial</span> <span class="tag">Illustration</span> </div> <div class="project-grid"> <div class="project-card"> <img src="https://images.unsplash.com/photo-1634986666676-ec8fd927c23d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Nebula Brand Identity" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Nebula Brand Identity</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1547119957-637f8679db1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Minimalist UI Kit" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Minimalist UI Kit</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1618004912476-29818d81ae2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Typographic Posters" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Typographic Posters</h3> </div> </div> </div> </div> </div> <svg class="border-animation" width="100%" height="100%" viewBox="0 0 400 120" preserveAspectRatio="none"> <path class="border-animation__path" d="M10,10 L390,10 L390,110 L10,110 Z" fill="none" stroke="#4ecdc4" stroke-width="2" /> </svg> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> </svg> </div> Interactive Projects </div> <div class="accordion-toggle"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="description"> I create digital experiences that engage and delight. Every interaction is an opportunity to tell a story and create a memorable connection with users. </div> <div class="tags"> <span class="tag">Motion Design</span> <span class="tag">Interactive Art</span> <span class="tag">Web Experiments</span> <span class="tag">AR/VR</span> </div> <div class="project-grid"> <div class="project-card"> <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Particle Symphony" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Particle Symphony</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1566837945700-30057527ade0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Augmented Canvas" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Augmented Canvas</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Kinetic Typography" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Kinetic Typography</h3> </div> </div> </div> </div> </div> <svg class="border-animation" width="100%" height="100%" viewBox="0 0 400 120" preserveAspectRatio="none"> <path class="border-animation__path" d="M10,10 L390,10 L390,110 L10,110 Z" fill="none" stroke="#ff6b6b" stroke-width="2" /> </svg> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" /> </svg> </div> Product Design </div> <div class="accordion-toggle"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="description"> My product design work blends functionality with delight. I focus on creating intuitive experiences that feel effortless and solve real user problems. </div> <div class="tags"> <span class="tag">UX Design</span> <span class="tag">Design Systems</span> <span class="tag">Mobile Apps</span> <span class="tag">Product Strategy</span> </div> <div class="project-grid"> <div class="project-card"> <img src="https://images.unsplash.com/photo-1544256718-3bcf237f3974?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Nucleus Design System" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Nucleus Design System</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mindful Mobile App" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Mindful Mobile App</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Ecommerce Redesign" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Ecommerce Redesign</h3> </div> </div> </div> </div> </div> <svg class="border-animation" width="100%" height="100%" viewBox="0 0 400 120" preserveAspectRatio="none"> <path class="border-animation__path" d="M10,10 L390,10 L390,110 L10,110 Z" fill="none" stroke="#ffd166" stroke-width="2" /> </svg> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /> </svg> </div> Experimental Art </div> <div class="accordion-toggle"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="description"> When I'm not solving design problems, I'm creating for the joy of exploration. These projects allow me to push boundaries and discover new possibilities. </div> <div class="tags"> <span class="tag">Generative Art</span> <span class="tag">Digital Collage</span> <span class="tag">3D Experiments</span> <span class="tag">Concept Art</span> </div> <div class="project-grid"> <div class="project-card"> <img src="https://images.unsplash.com/photo-1533158307587-828f0a76ef46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Algorithmic Landscapes" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Algorithmic Landscapes</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Digital Dreamscapes" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Digital Dreamscapes</h3> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1549490349-8643362247b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Geometric Explorations" class="project-image"> <div class="project-overlay"> <h3 class="project-title">Geometric Explorations</h3> </div> </div> </div> </div> </div> <svg class="border-animation" width="100%" height="100%" viewBox="0 0 400 120" preserveAspectRatio="none"> <path class="border-animation__path" d="M10,10 L390,10 L390,110 L10,110 Z" fill="none" stroke="#6b76ff" stroke-width="2" /> </svg> </li> </ul> <svg class="hand-drawn squiggle-1" width="80" height="30" viewBox="0 0 80 30"> <path d="M5,20 C10,10 20,15 25,20 C30,25 40,30 45,20 C50,10 60,5 70,15 C80,25 85,20 90,15" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" /> </svg> <svg class="hand-drawn squiggle-2" width="60" height="20" viewBox="0 0 60 20"> <path d="M5,10 C10,5 15,15 20,10 C25,5 30,10 35,15 C40,20 45,5 50,10" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" /> </svg> </div> <div class="tooltip" id="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { const accordionItems = document.querySelectorAll('.accordion-item'); const tooltip = document.getElementById('tooltip'); // Accordion functionality accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); const content = item.querySelector('.accordion-content'); header.addEventListener('click', () => { // Close all other items accordionItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('active')) { otherItem.classList.remove('active'); const otherContent = otherItem.querySelector('.accordion-content'); otherContent.style.maxHeight = '0'; otherContent.style.opacity = '0'; } }); // Toggle current item const isActive = item.classList.contains('active'); if (isActive) { item.classList.remove('active'); content.style.maxHeight = '0'; content.style.opacity = '0'; } else { item.classList.add('active'); content.style.maxHeight = content.scrollHeight + 'px'; content.style.opacity = '1'; // Add a small delay to handle transition setTimeout(() => { content.style.maxHeight = content.scrollHeight + 'px'; }, 50); } }); // Update max-height on window resize to ensure proper accordion behavior window.addEventListener('resize', () => { if (item.classList.contains('active')) { content.style.maxHeight = content.scrollHeight + 'px'; } }); }); // Project card hover animations with tooltip const projectCards = document.querySelectorAll('.project-card'); projectCards.forEach(card => { card.addEventListener('mouseenter', (e) => { const title = card.querySelector('.project-title').textContent; showTooltip(e, 'Click to see ' + title + ' details'); }); card.addEventListener('mousemove', (e) => { updateTooltipPosition(e); }); card.addEventListener('mouseleave', () => { hideTooltip(); }); card.addEventListener('click', () => { // In a real implementation, this would show project details // For this demo, we'll just add a subtle feedback effect card.style.transform = 'scale(0.98)'; setTimeout(() => { card.style.transform = ''; }, 150); }); }); // Tag hover effect const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('mouseenter', (e) => { showTooltip(e, 'Browse ' + tag.textContent + ' projects'); }); tag.addEventListener('mousemove', (e) => { updateTooltipPosition(e); }); tag.addEventListener('mouseleave', () => { hideTooltip(); }); }); // Tooltip functions function showTooltip(e, text) { tooltip.textContent = text; tooltip.style.opacity = '1'; updateTooltipPosition(e); } function updateTooltipPosition(e) { const x = e.clientX; const y = e.clientY; tooltip.style.left = (x + 10) + 'px'; tooltip.style.top = (y - 30) + 'px'; } function hideTooltip() { tooltip.style.opacity = '0'; } // Initial state - open the first accordion item if (accordionItems.length > 0) { const firstItem = accordionItems[0]; const firstContent = firstItem.querySelector('.accordion-content'); firstItem.classList.add('active'); firstContent.style.maxHeight = firstContent.scrollHeight + 'px'; firstContent.style.opacity = '1'; } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusPay Mobile Banking</title> <style> :root { --primary-dark: #151b26; --secondary-dark: #1c2433; --text-light: #f5f7fa; --text-dim: #b7c0cd; --accent: #4f8cff; --accent-hover: #3a7cff; --accent-secondary: #6342ff; --success: #00d09c; --danger: #ff4560; --warning: #ffab00; --border-radius: 16px; --border-radius-sm: 8px; --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--primary-dark); color: var(--text-light); height: 100vh; padding: 20px; display: flex; flex-direction: column; max-width: 700px; margin: 0 auto; } .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .app-title { font-size: 1.5rem; font-weight: 700; } .app-title span { background: linear-gradient(45deg, var(--accent), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dark-mode-toggle { background: var(--secondary-dark); border: none; width: 60px; height: 30px; border-radius: 15px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; transition: var(--transition); } .dark-mode-toggle i { font-size: 14px; color: var(--text-dim); } .toggle-slider { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); left: 3px; transition: var(--transition); box-shadow: 0 2px 8px rgba(79, 140, 255, 0.3); } .dark-mode-toggle.active .toggle-slider { left: 33px; background: var(--accent-secondary); } .account-balance { background: linear-gradient(135deg, var(--secondary-dark), rgba(28, 36, 51, 0.7)); border-radius: var(--border-radius); padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); } .balance-decoration { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.1; top: -50px; right: -50px; } .account-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .account-type { font-size: 0.875rem; color: var(--text-dim); } .account-number { font-size: 0.825rem; background: rgba(255, 255, 255, 0.1); padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 6px; } .account-number i { font-size: 0.75rem; } .balance-amount { font-size: 2.5rem; font-weight: 700; margin: 16px 0; position: relative; } .balance-amount::before { content: "$"; font-size: 1.25rem; position: relative; top: -10px; left: 0; margin-right: 4px; } .balance-change { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; } .balance-change.positive { color: var(--success); } .balance-change.negative { color: var(--danger); } .accordion-container { background: var(--secondary-dark); border-radius: var(--border-radius); overflow: hidden; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .accordion-item { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .accordion-item:last-child { border-bottom: none; } .accordion-header { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); } .accordion-header:hover { background-color: rgba(255, 255, 255, 0.05); } .accordion-header h3 { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 12px; } .accordion-header h3 i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: rgba(79, 140, 255, 0.15); border-radius: var(--border-radius-sm); color: var(--accent); font-size: 0.875rem; } .accordion-header .indicator { width: 24px; height: 24px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .accordion-header .indicator i { font-size: 0.75rem; transition: var(--transition); } .accordion-item.active .accordion-header .indicator { background-color: var(--accent); } .accordion-item.active .accordion-header .indicator i { transform: rotate(-180deg); } .accordion-content { height: 0; overflow: hidden; transition: var(--transition); padding: 0 20px; opacity: 0; } .accordion-item.active .accordion-content { height: auto; padding: 0 20px 20px; opacity: 1; } .transaction-list { list-style: none; } .transaction-item { padding: 16px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: var(--transition); cursor: pointer; } .transaction-item:last-child { border-bottom: none; } .transaction-item:hover { transform: translateX(4px); } .transaction-details { display: flex; align-items: center; gap: 12px; } .transaction-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .transaction-icon.debit { background-color: rgba(255, 69, 96, 0.15); color: var(--danger); } .transaction-icon.credit { background-color: rgba(0, 208, 156, 0.15); color: var(--success); } .transaction-icon.transfer { background-color: rgba(99, 66, 255, 0.15); color: var(--accent-secondary); } .transaction-info h4 { font-size: 0.95rem; margin-bottom: 4px; } .transaction-info p { font-size: 0.825rem; color: var(--text-dim); } .transaction-amount { font-weight: 600; font-size: 1rem; text-align: right; } .transaction-amount.debit { color: var(--danger); } .transaction-amount.credit { color: var(--success); } .transaction-date { font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; } .account-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .action-button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background-color: rgba(255, 255, 255, 0.05); border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); } .action-button:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .action-button i { width: 32px; height: 32px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; background-color: var(--accent); color: white; font-size: 0.875rem; } .action-button span { font-size: 0.75rem; text-align: center; } .spending-chart { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .chart-header h4 { font-size: 0.95rem; font-weight: 600; } .chart-period { font-size: 0.75rem; color: var(--text-dim); background-color: rgba(255, 255, 255, 0.05); padding: 4px 10px; border-radius: 12px; } .spending-category { display: flex; flex-direction: column; gap: 6px; } .category-label { display: flex; justify-content: space-between; font-size: 0.85rem; } .category-percentage { font-size: 0.75rem; color: var(--text-dim); } .progress-bar { width: 100%; height: 8px; background-color: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; position: relative; } .progress-fill { height: 100%; border-radius: 4px; position: absolute; transition: width 1s ease; } .progress-fill.shopping { background-color: var(--accent); width: 35%; } .progress-fill.food { background-color: var(--warning); width: 25%; } .progress-fill.transport { background-color: var(--accent-secondary); width: 20%; } .progress-fill.entertainment { background-color: var(--success); width: 15%; } .progress-fill.other { background-color: var(--danger); width: 5%; } .settings-list { list-style: none; } .settings-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .settings-item:last-child { border-bottom: none; } .settings-item-title { display: flex; align-items: center; gap: 12px; } .settings-item-title i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-sm); font-size: 0.875rem; } .toggle-switch { width: 40px; height: 20px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; position: relative; cursor: pointer; transition: var(--transition); } .toggle-switch::after { content: ""; width: 16px; height: 16px; background-color: var(--text-light); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: var(--transition); } .toggle-switch.active { background-color: var(--accent); } .toggle-switch.active::after { left: 22px; } .nav-bar { position: sticky; bottom: 0; background-color: var(--secondary-dark); border-radius: var(--border-radius); margin-top: auto; display: flex; justify-content: space-around; padding: 12px 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); z-index: 10; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: var(--transition); padding: 8px 16px; border-radius: var(--border-radius-sm); } .nav-item:hover, .nav-item.active { background-color: rgba(255, 255, 255, 0.05); } .nav-item i { font-size: 1.25rem; color: var(--text-dim); transition: var(--transition); } .nav-item span { font-size: 0.7rem; color: var(--text-dim); transition: var(--transition); } .nav-item.active i, .nav-item.active span { color: var(--accent); } .loader { width: 100%; height: 3px; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-secondary), transparent); background-size: 200% 100%; animation: loader 1.5s infinite; } @keyframes loader { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(79, 140, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0); } } @media (max-width: 500px) { body { padding: 16px; } .account-actions { grid-template-columns: repeat(2, 1fr); } .balance-amount { font-size: 2rem; } .nav-item { padding: 8px; } .transaction-icon { width: 36px; height: 36px; } } </style> </head> <body> <div class="loader"></div> <div class="app-header"> <h1 class="app-title">Nexus<span>Pay</span></h1> <button class="dark-mode-toggle active"> <i class="fas fa-moon"></i> <i class="fas fa-sun"></i> <div class="toggle-slider"></div> </button> </div> <div class="account-balance"> <div class="balance-decoration"></div> <div class="account-info"> <span class="account-type">Checking Account</span> <div class="account-number"> <i class="fas fa-lock"></i> <span>•••• 4587</span> </div> </div> <div class="balance-amount">12,468.35</div> <div class="balance-change positive"> <i class="fas fa-arrow-up"></i> <span>$842.55 (6.8%) this month</span> </div> </div> <div class="accordion-container"> <div class="accordion-item active"> <div class="accordion-header"> <h3><i class="fas fa-exchange-alt"></i> Recent Transactions</h3> <div class="indicator"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="accordion-content"> <ul class="transaction-list"> <li class="transaction-item"> <div class="transaction-details"> <div class="transaction-icon debit"> <i class="fas fa-shopping-bag"></i> </div> <div class="transaction-info"> <h4>Amazon Shopping</h4> <p>Electronics & Gadgets</p> </div> </div> <div class="transaction-data"> <div class="transaction-amount debit">-$249.99</div> <div class="transaction-date">Today, 2:34 PM</div> </div> </li> <li class="transaction-item"> <div class="transaction-details"> <div class="transaction-icon credit"> <i class="fas fa-briefcase"></i> </div> <div class="transaction-info"> <h4>Salary Deposit</h4> <p>Nexus Technologies Inc.</p> </div> </div> <div class="transaction-data"> <div class="transaction-amount credit">+$3,450.00</div> <div class="transaction-date">Yesterday, 9:15 AM</div> </div> </li> <li class="transaction-item"> <div class="transaction-details"> <div class="transaction-icon debit"> <i class="fas fa-utensils"></i> </div> <div class="transaction-info"> <h4>Bistro Nouveau</h4> <p>Food & Dining</p> </div> </div> <div class="transaction-data"> <div class="transaction-amount debit">-$86.24</div> <div class="transaction-date">Oct 18, 8:45 PM</div> </div> </li> <li class="transaction-item"> <div class="transaction-details"> <div class="transaction-icon transfer"> <i class="fas fa-paper-plane"></i> </div> <div class="transaction-info"> <h4>Transfer to Sarah</h4> <p>Split rent payment</p> </div> </div> <div class="transaction-data"> <div class="transaction-amount debit">-$900.00</div> <div class="transaction-date">Oct 17, 3:20 PM</div> </div> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3><i class="fas fa-chart-pie"></i> Spending Analysis</h3> <div class="indicator"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="accordion-content"> <div class="spending-chart"> <div class="chart-header"> <h4>Monthly Breakdown</h4> <span class="chart-period">October 2023</span> </div> <div class="spending-category"> <div class="category-label"> <span>Shopping</span> <span class="category-percentage">35%</span> </div> <div class="progress-bar"> <div class="progress-fill shopping"></div> </div> </div> <div class="spending-category"> <div class="category-label"> <span>Food & Dining</span> <span class="category-percentage">25%</span> </div> <div class="progress-bar"> <div class="progress-fill food"></div> </div> </div> <div class="spending-category"> <div class="category-label"> <span>Transportation</span> <span class="category-percentage">20%</span> </div> <div class="progress-bar"> <div class="progress-fill transport"></div> </div> </div> <div class="spending-category"> <div class="category-label"> <span>Entertainment</span> <span class="category-percentage">15%</span> </div> <div class="progress-bar"> <div class="progress-fill entertainment"></div> </div> </div> <div class="spending-category"> <div class="category-label"> <span>Other</span> <span class="category-percentage">5%</span> </div> <div class="progress-bar"> <div class="progress-fill other"></div> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3><i class="fas fa-money-check-alt"></i> Quick Actions</h3> <div class="indicator"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="accordion-content"> <div class="account-actions"> <div class="action-button"> <i class="fas fa-paper-plane pulse"></i> <span>Send Money</span> </div> <div class="action-button"> <i class="fas fa-qrcode"></i> <span>Scan & Pay</span> </div> <div class="action-button"> <i class="fas fa-credit-card"></i> <span>Cards</span> </div> <div class="action-button"> <i class="fas fa-money-bill-wave"></i> <span>Withdraw</span> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3><i class="fas fa-cog"></i> Security Settings</h3> <div class="indicator"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="accordion-content"> <ul class="settings-list"> <li class="settings-item"> <div class="settings-item-title"> <i class="fas fa-fingerprint"></i> <span>Biometric Authentication</span> </div> <div class="toggle-switch active"></div> </li> <li class="settings-item"> <div class="settings-item-title"> <i class="fas fa-bell"></i> <span>Transaction Notifications</span> </div> <div class="toggle-switch active"></div> </li> <li class="settings-item"> <div class="settings-item-title"> <i class="fas fa-shield-alt"></i> <span>Two-Factor Authentication</span> </div> <div class="toggle-switch active"></div> </li> <li class="settings-item"> <div class="settings-item-title"> <i class="fas fa-globe"></i> <span>International Payments</span> </div> <div class="toggle-switch"></div> </li> </ul> </div> </div> </div> <div class="nav-bar"> <div class="nav-item active"> <i class="fas fa-home"></i> <span>Home</span> </div> <div class="nav-item"> <i class="fas fa-wallet"></i> <span>Accounts</span> </div> <div class="nav-item"> <i class="fas fa-chart-line"></i> <span>Insights</span> </div> <div class="nav-item"> <i class="fas fa-user"></i> <span>Profile</span> </div> </div> <script src="https://kit.fontawesome.com/3b0c2052e3.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Accordion functionality const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); const content = item.querySelector('.accordion-content'); header.addEventListener('click', () => { // Close all other items accordionItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('active')) { otherItem.classList.remove('active'); otherItem.querySelector('.accordion-content').style.height = '0'; } }); // Toggle current item item.classList.toggle('active'); if (item.classList.contains('active')) { content.style.height = content.scrollHeight + 'px'; // Animate progress bars if it's the spending analysis section if (item.querySelector('.spending-chart')) { const progressBars = item.querySelectorAll('.progress-fill'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 100); }); } } else { content.style.height = '0'; } }); }); // Dark mode toggle const darkModeToggle = document.querySelector('.dark-mode-toggle'); darkModeToggle.addEventListener('click', () => { darkModeToggle.classList.toggle('active'); const root = document.documentElement; if (darkModeToggle.classList.contains('active')) { // Dark mode root.style.setProperty('--primary-dark', '#151b26'); root.style.setProperty('--secondary-dark', '#1c2433'); root.style.setProperty('--text-light', '#f5f7fa'); } else { // Light mode root.style.setProperty('--primary-dark', '#f5f7fa'); root.style.setProperty('--secondary-dark', '#ffffff'); root.style.setProperty('--text-light', '#151b26'); } }); // Toggle switches const toggleSwitches = document.querySelectorAll('.toggle-switch'); toggleSwitches.forEach(toggle => { toggle.addEventListener('click', () => { toggle.classList.toggle('active'); }); }); // Navigation const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', () => { navItems.forEach(navItem => { navItem.classList.remove('active'); }); item.classList.add('active'); }); }); // Transaction items hover effect const transactionItems = document.querySelectorAll('.transaction-item'); transactionItems.forEach(item => { item.addEventListener('click', () => { // Could add transaction details view here console.log('Transaction details'); }); }); // Remove loader after page load setTimeout(() => { document.querySelector('.loader').style.display = 'none'; }, 1500); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Booking Accordion</title> <style> :root { --primary: #FF5A5F; --secondary: #00A699; --tertiary: #FC642D; --quaternary: #484848; --light: #FFFFFF; --shadow: rgba(0, 0, 0, 0.1); --background: #f9f9f9; --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; } body { background-color: var(--background); color: var(--quaternary); display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; } .container { max-width: 640px; width: 100%; background-color: var(--light); border-radius: 16px; box-shadow: 0 10px 25px var(--shadow); overflow: hidden; } .header { background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%); color: var(--light); padding: 24px; position: relative; overflow: hidden; } .header h1 { font-size: 28px; margin-bottom: 8px; font-weight: 700; position: relative; z-index: 1; } .header p { font-size: 16px; opacity: 0.9; position: relative; z-index: 1; } .header::before { content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 180px; background-image: radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 10.5%); background-size: 20px 20px; transform: translate(40px, -60px); z-index: 0; } .accordion { list-style: none; } .accordion-item { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .accordion-toggle { display: flex; align-items: center; padding: 20px 24px; cursor: pointer; width: 100%; text-align: left; border: none; background-color: var(--light); color: var(--quaternary); font-size: 18px; font-weight: 600; transition: var(--transition); position: relative; } .accordion-toggle:hover { background-color: rgba(255, 90, 95, 0.05); } .accordion-icon { margin-right: 16px; background-color: rgba(255, 90, 95, 0.1); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); } .accordion-item:nth-child(2) .accordion-icon { background-color: rgba(0, 166, 153, 0.1); } .accordion-item:nth-child(3) .accordion-icon { background-color: rgba(252, 100, 45, 0.1); } .accordion-icon svg { width: 20px; height: 20px; fill: var(--primary); transition: var(--transition); } .accordion-item:nth-child(2) .accordion-icon svg { fill: var(--secondary); } .accordion-item:nth-child(3) .accordion-icon svg { fill: var(--tertiary); } .accordion-arrow { position: absolute; right: 24px; transition: var(--transition); } .active .accordion-arrow { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: var(--light); } .accordion-inner { padding: 0 24px 20px 80px; } .sub-accordion { list-style: none; margin-bottom: 16px; } .sub-accordion-item { margin-bottom: 4px; } .sub-accordion-toggle { display: flex; justify-content: space-between; align-items: center; background-color: rgba(72, 72, 72, 0.03); padding: 12px 16px; border-radius: 8px; cursor: pointer; width: 100%; text-align: left; border: none; color: var(--quaternary); font-size: 16px; font-weight: 500; transition: var(--transition); } .sub-accordion-toggle:hover { background-color: rgba(72, 72, 72, 0.08); } .sub-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .sub-accordion-inner { padding: 12px 16px; } .card { background-color: var(--light); border-radius: 8px; padding: 16px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; cursor: pointer; transition: var(--transition); border-left: 3px solid transparent; } .flight-card { border-left-color: var(--primary); } .hotel-card { border-left-color: var(--secondary); } .car-card { border-left-color: var(--tertiary); } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .card h4 { margin-bottom: 8px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; } .card p { font-size: 14px; color: rgba(72, 72, 72, 0.8); margin-bottom: 12px; } .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .price { font-weight: 700; font-size: 18px; color: var(--quaternary); } .tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; } .tag-economy { background-color: rgba(255, 90, 95, 0.1); color: var(--primary); } .tag-standard { background-color: rgba(0, 166, 153, 0.1); color: var(--secondary); } .tag-compact { background-color: rgba(252, 100, 45, 0.1); color: var(--tertiary); } .select-btn { background-color: var(--light); color: var(--quaternary); border: 1px solid rgba(72, 72, 72, 0.2); padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); } .select-btn:hover { background-color: rgba(72, 72, 72, 0.05); } .flight-card .select-btn:hover { background-color: rgba(255, 90, 95, 0.05); color: var(--primary); border-color: var(--primary); } .hotel-card .select-btn:hover { background-color: rgba(0, 166, 153, 0.05); color: var(--secondary); border-color: var(--secondary); } .car-card .select-btn:hover { background-color: rgba(252, 100, 45, 0.05); color: var(--tertiary); border-color: var(--tertiary); } .pulse { animation: pulse 0.5s ease-in-out; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 600px) { .header h1 { font-size: 24px; } .accordion-toggle { font-size: 16px; padding: 16px 20px; } .accordion-icon { width: 32px; height: 32px; margin-right: 12px; } .accordion-inner { padding: 0 20px 16px 64px; } .sub-accordion-toggle { padding: 10px 12px; font-size: 14px; } .card { padding: 12px; } .card h4 { font-size: 14px; } .card p { font-size: 12px; } .price { font-size: 16px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Wanderlust Expeditions</h1> <p>Build your perfect adventure in just a few clicks</p> </div> <ul class="accordion"> <li class="accordion-item"> <button class="accordion-toggle"> <div class="accordion-icon"> <svg viewBox="0 0 24 24"> <path d="M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3A2,2 0 0,1 1,16V4A2,2 0 0,1 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12Z"></path> </svg> </div> Flight Options <svg class="accordion-arrow" width="14" height="8" viewBox="0 0 14 8"> <path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/> </svg> </button> <div class="accordion-content"> <div class="accordion-inner"> <ul class="sub-accordion"> <li class="sub-accordion-item"> <button class="sub-accordion-toggle"> <span>Outbound Flights</span> <svg width="12" height="12" viewBox="0 0 12 12"> <path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <div class="sub-accordion-content"> <div class="sub-accordion-inner"> <div class="card flight-card"> <h4> NYC → LDN <span class="tag tag-economy">Economy</span> </h4> <p>JFK 10:15 AM → LHR 10:05 PM • Non-stop • 7h 50m • Virgin Atlantic</p> <div class="card-footer"> <div class="price">$458</div> <button class="select-btn">Select</button> </div> </div> <div class="card flight-card"> <h4> NYC → LDN <span class="tag tag-economy">Economy</span> </h4> <p>JFK 5:30 PM → LHR 6:20 AM (+1) • Non-stop • 6h 50m • British Airways</p> <div class="card-footer"> <div class="price">$512</div> <button class="select-btn">Select</button> </div> </div> </div> </div> </li> <li class="sub-accordion-item"> <button class="sub-accordion-toggle"> <span>Return Flights</span> <svg width="12" height="12" viewBox="0 0 12 12"> <path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <div class="sub-accordion-content"> <div class="sub-accordion-inner"> <div class="card flight-card"> <h4> LDN → NYC <span class="tag tag-economy">Economy</span> </h4> <p>LHR 1:30 PM → JFK 4:25 PM • Non-stop • 7h 55m • American Airlines</p> <div class="card-footer"> <div class="price">$487</div> <button class="select-btn">Select</button> </div> </div> <div class="card flight-card"> <h4> LDN → NYC <span class="tag tag-economy">Economy</span> </h4> <p>LHR 8:10 AM → JFK 11:15 AM • Non-stop • 8h 5m • Delta</p> <div class="card-footer"> <div class="price">$436</div> <button class="select-btn">Select</button> </div> </div> </div> </div> </li> </ul> </div> </div> </li> <li class="accordion-item"> <button class="accordion-toggle"> <div class="accordion-icon"> <svg viewBox="0 0 24 24"> <path d="M8,11H11V21H13V11H16L12,7L8,11M19,3H5C3.89,3 3,3.89 3,5V18H5V5H19V18H21V5C21,3.89 20.11,3 19,3Z"></path> </svg> </div> Hotel Stays <svg class="accordion-arrow" width="14" height="8" viewBox="0 0 14 8"> <path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/> </svg> </button> <div class="accordion-content"> <div class="accordion-inner"> <ul class="sub-accordion"> <li class="sub-accordion-item"> <button class="sub-accordion-toggle"> <span>London City Center</span> <svg width="12" height="12" viewBox="0 0 12 12"> <path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <div class="sub-accordion-content"> <div class="sub-accordion-inner"> <div class="card hotel-card"> <h4> The Royal Buckingham <span class="tag tag-standard">4-Star</span> </h4> <p>Covent Garden • Free Wi-Fi • City views • Breakfast included</p> <div class="card-footer"> <div class="price">$218/night</div> <button class="select-btn">Select</button> </div> </div> <div class="card hotel-card"> <h4> London Bridge Suites <span class="tag tag-standard">4-Star</span> </h4> <p>South Bank • Free Wi-Fi • Thames view • Fitness center</p> <div class="card-footer"> <div class="price">$194/night</div> <button class="select-btn">Select</button> </div> </div> </div> </div> </li> <li class="sub-accordion-item"> <button class="sub-accordion-toggle"> <span>London Outskirts</span> <svg width="12" height="12" viewBox="0 0 12 12"> <path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <div class="sub-accordion-content"> <div class="sub-accordion-inner"> <div class="card hotel-card"> <h4> Greenwich Village Inn <span class="tag tag-standard">3-Star</span> </h4> <p>Greenwich • Free Wi-Fi • Free parking • 15min tube to city</p> <div class="card-footer"> <div class="price">$142/night</div> <button class="select-btn">Select</button> </div> </div> <div class="card hotel-card"> <h4> Hampstead Heath Lodge <span class="tag tag-standard">3-Star</span> </h4> <p>Hampstead • Free breakfast • Garden view • 20min tube to city</p> <div class="card-footer"> <div class="price">$138/night</div> <button class="select-btn">Select</button> </div> </div> </div> </div> </li> </ul> </div> </div> </li> <li class="accordion-item"> <button class="accordion-toggle"> <div class="accordion-icon"> <svg viewBox="0 0 24 24"> <path d="M5,11L6.5,6.5H17.5L19,11M17.5,16A1.5,1.5 0 0,1 16,14.5A1.5,1.5 0 0,1 17.5,13A1.5,1.5 0 0,1 19,14.5A1.5,1.5 0 0,1 17.5,16M6.5,16A1.5,1.5 0 0,1 5,14.5A1.5,1.5 0 0,1 6.5,13A1.5,1.5 0 0,1 8,14.5A1.5,1.5 0 0,1 6.5,16M18.92,6C18.72,5.42 18.16,5 17.5,5H6.5C5.84,5 5.28,5.42 5.08,6L3,12V20A1,1 0 0,0 4,21H5A1,1 0 0,0 6,20V19H18V20A1,1 0 0,0 19,21H20A1,1 0 0,0 21,20V12L18.92,6Z"></path> </svg> </div> Car Rentals <svg class="accordion-arrow" width="14" height="8" viewBox="0 0 14 8"> <path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/> </svg> </button> <div class="accordion-content"> <div class="accordion-inner"> <ul class="sub-accordion"> <li class="sub-accordion-item"> <button class="sub-accordion-toggle"> <span>Airport Pickup</span> <svg width="12" height="12" viewBox="0 0 12 12"> <path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <div class="sub-accordion-content"> <div class="sub-accordion-inner"> <div class="card car-card"> <h4> Mini Cooper <span class="tag tag-compact">Compact</span> </h4> <p>Manual • Unlimited mileage • 45 MPG • 2 bags</p> <div class="card-footer"> <div class="price">$38/day</div> <button class="select-btn">Select</button> </div> </div> <div class="card car-card"> <h4> Ford Focus Estate <span class="tag tag-compact">Mid-size</span> </h4> <p>Automatic • Unlimited mileage • 40 MPG • 4 bags</p> <div class="card-footer"> <div class="price">$52/day</div> <button class="select-btn">Select</button> </div> </div> </div> </div> </li> <li class="sub-accordion-item"> <button class="sub-accordion-toggle"> <span>City Center Pickup</span> <svg width="12" height="12" viewBox="0 0 12 12"> <path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <div class="sub-accordion-content"> <div class="sub-accordion-inner"> <div class="card car-card"> <h4> Volkswagen Golf <span class="tag tag-compact">Compact</span> </h4> <p>Automatic • 200 miles/day • 42 MPG • 3 bags</p> <div class="card-footer"> <div class="price">$44/day</div> <button class="select-btn">Select</button> </div> </div> <div class="card car-card"> <h4> Vauxhall Insignia <span class="tag tag-compact">Full-size</span> </h4> <p>Automatic • 250 miles/day • 38 MPG • 5 bags</p> <div class="card-footer"> <div class="price">$58/day</div> <button class="select-btn">Select</button> </div> </div> </div> </div> </li> </ul> </div> </div> </li> </ul> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Main accordion functionality const accordionToggles = document.querySelectorAll('.accordion-toggle'); accordionToggles.forEach(toggle => { toggle.addEventListener('click', function() { const content = this.nextElementSibling; const contentHeight = content.scrollHeight; const isActive = this.classList.contains('active'); // Close all accordion items accordionToggles.forEach(otherToggle => { if (otherToggle !== toggle) { otherToggle.classList.remove('active'); otherToggle.nextElementSibling.style.maxHeight = '0'; } }); // Toggle current accordion item if (isActive) { this.classList.remove('active'); content.style.maxHeight = '0'; } else { this.classList.add('active'); this.classList.add('pulse'); content.style.maxHeight = contentHeight + 'px'; // Add dynamic height adjustment for sub-accordions content.addEventListener('transitionend', function updateHeight() { if (content.style.maxHeight !== '0px') { content.style.maxHeight = content.scrollHeight + 'px'; } content.removeEventListener('transitionend', updateHeight); }); setTimeout(() => { this.classList.remove('pulse'); }, 500); } }); }); // Sub-accordion functionality const subAccordionToggles = document.querySelectorAll('.sub-accordion-toggle'); subAccordionToggles.forEach(toggle => { toggle.addEventListener('click', function() { const content = this.nextElementSibling; const contentHeight = content.scrollHeight; const isActive = this.querySelector('svg').style.transform === 'rotate(45deg)'; const mainAccordionContent = this.closest('.accordion-content'); if (isActive) { this.querySelector('svg').style.transform = 'rotate(0)'; content.style.maxHeight = '0'; } else { this.querySelector('svg').style.transform = 'rotate(45deg)'; content.style.maxHeight = contentHeight + 'px'; // Update main accordion height to accommodate sub-accordion setTimeout(() => { mainAccordionContent.style.maxHeight = mainAccordionContent.scrollHeight + 'px'; }, 10); } }); }); // Select button functionality const selectButtons = document.querySelectorAll('.select-btn'); selectButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Reset all buttons selectButtons.forEach(btn => { btn.textContent = 'Select'; btn.style.backgroundColor = ''; btn.style.color = ''; btn.style.borderColor = ''; }); // Update selected button this.textContent = 'Selected'; // Apply specific styling based on card type const card = this.closest('.card'); if (card.classList.contains('flight-card')) { this.style.backgroundColor = 'var(--primary)'; this.style.color = 'white'; this.style.borderColor = 'var(--primary)'; } else if (card.classList.contains('hotel-card')) { this.style.backgroundColor = 'var(--secondary)'; this.style.color = 'white'; this.style.borderColor = 'var(--secondary)'; } else if (card.classList.contains('car-card')) { this.style.backgroundColor = 'var(--tertiary)'; this.style.color = 'white'; this.style.borderColor = 'var(--tertiary)'; } // Pulse animation on card card.classList.add('pulse'); setTimeout(() => { card.classList.remove('pulse'); }, 500); }); }); // Open first accordion by default if (accordionToggles.length > 0) { accordionToggles[0].click(); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #3a5a40; --secondary: #a3b18a; --tertiary: #dad7cd; --accent: #588157; --dark: #344e41; --light: #f5f5f5; --shadow: rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #f9f9f7; color: #333; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 660px; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); overflow: hidden; position: relative; } .header { background: linear-gradient(135deg, var(--primary), var(--dark)); color: white; padding: 24px; border-radius: 12px 12px 0 0; } .header h1 { font-size: 1.8rem; margin-bottom: 6px; font-weight: 700; } .header p { font-size: 0.9rem; opacity: 0.85; } .search-container { padding: 16px 24px; background-color: var(--light); border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; } .search-input { flex: 1; padding: 10px 16px; border: 1px solid #ddd; border-radius: 30px; font-size: 0.9rem; background-color: white; transition: var(--transition); } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88, 129, 87, 0.1); } .listings-container { max-height: 520px; overflow-y: auto; padding: 10px 0; scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; } .listings-container::-webkit-scrollbar { width: 6px; } .listings-container::-webkit-scrollbar-track { background: transparent; } .listings-container::-webkit-scrollbar-thumb { background-color: var(--secondary); border-radius: 20px; } .accordion-item { margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); } .accordion-header { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .accordion-header::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background-color: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: var(--transition); } .accordion-header:hover { background-color: rgba(163, 177, 138, 0.1); } .accordion-header:hover::before { transform: scaleY(1); } .accordion-left { display: flex; align-items: center; } .property-status { margin-right: 15px; font-size: 0.7rem; text-transform: uppercase; padding: 4px 8px; border-radius: 30px; font-weight: 600; letter-spacing: 0.5px; } .status-sale { background-color: #e9f5db; color: var(--primary); } .status-rent { background-color: #bee1e6; color: #2c7da0; } .property-title { font-weight: 600; margin-right: 10px; } .property-price { font-weight: 700; color: var(--accent); margin-left: auto; } .accordion-icon { margin-left: 15px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--tertiary); color: var(--dark); transition: var(--transition); } .accordion-icon svg { width: 12px; height: 12px; transition: var(--transition); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .accordion-inner { padding: 0 24px 24px; } .property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .property-image { grid-column: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: var(--transition); transform: translateY(0); } .property-image:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); } .property-image img { width: 100%; height: 180px; object-fit: cover; display: block; transition: var(--transition); } .property-image:hover img { transform: scale(1.05); } .property-details { grid-column: 2; } .property-address { color: #666; font-size: 0.9rem; margin-bottom: 10px; display: flex; align-items: center; } .property-address svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--secondary); } .property-specs { display: flex; margin-bottom: 15px; flex-wrap: wrap; } .spec-item { margin-right: 15px; display: flex; align-items: center; font-size: 0.85rem; margin-bottom: 8px; } .spec-item svg { width: 16px; height: 16px; margin-right: 5px; fill: var(--accent); } .property-description { font-size: 0.9rem; line-height: 1.6; color: #555; margin-bottom: 20px; } .viewing-schedule { background-color: var(--tertiary); padding: 15px; border-radius: 8px; margin-top: 15px; } .viewing-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; color: var(--dark); display: flex; align-items: center; } .viewing-title svg { width: 16px; height: 16px; margin-right: 6px; fill: var(--dark); } .viewing-dates { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .date-option { background-color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: var(--transition); border: 1px solid transparent; } .date-option:hover { background-color: var(--accent); color: white; transform: translateY(-2px); } .date-option.selected { background-color: var(--primary); color: white; border-color: var(--dark); } .contact-agent { display: flex; align-items: center; margin-top: 20px; padding-top: 15px; border-top: 1px dashed rgba(0,0,0,0.1); } .agent-photo { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 15px; border: 2px solid var(--secondary); } .agent-photo img { width: 100%; height: 100%; object-fit: cover; } .agent-info { flex: 1; } .agent-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; } .agent-title { font-size: 0.8rem; color: #666; margin-bottom: 5px; } .agent-contact { display: flex; align-items: center; } .contact-button { border: none; background-color: var(--accent); color: white; font-size: 0.8rem; padding: 6px 12px; border-radius: 20px; cursor: pointer; margin-right: 10px; display: flex; align-items: center; transition: var(--transition); } .contact-button:hover { background-color: var(--primary); transform: translateY(-2px); } .contact-button svg { width: 14px; height: 14px; margin-right: 5px; } .favorite-button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ddd; background-color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .favorite-button:hover { background-color: #ffebee; border-color: #ffcdd2; } .favorite-button svg { width: 16px; height: 16px; fill: #ddd; transition: var(--transition); } .favorite-button:hover svg { fill: #e57373; } .favorite-button.active svg { fill: #e57373; } .cta-button { display: block; width: 100%; background-color: var(--primary); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); text-align: center; margin-top: 15px; } .cta-button:hover { background-color: var(--dark); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .active .accordion-header { background-color: rgba(163, 177, 138, 0.15); } .active .accordion-header::before { transform: scaleY(1); } .active .accordion-icon { background-color: var(--accent); color: white; } .active .accordion-icon svg { transform: rotate(180deg); } @media (max-width: 600px) { .property-grid { grid-template-columns: 1fr; } .property-image, .property-details { grid-column: 1; } .header h1 { font-size: 1.5rem; } .accordion-header { flex-direction: column; align-items: flex-start; } .property-price { margin-left: 0; margin-top: 5px; } .accordion-icon { position: absolute; top: 16px; right: 16px; } .viewing-dates { flex-direction: column; } } /* Animation keyframes */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 1.5s ease-in-out infinite; } /* Badge for newly listed properties */ .new-badge { position: absolute; top: 10px; right: 10px; background-color: #ff6b6b; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transform: rotate(5deg); } /* Loading animation */ .loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loading.active { opacity: 1; pointer-events: all; } .loading-spinner { width: 40px; height: 40px; border: 4px solid var(--tertiary); border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="loading"> <div class="loading-spinner"></div> </div> <div class="header"> <h1>Berkeley Hills Estates</h1> <p>Discover your dream property in the heart of Northern California</p> </div> <div class="search-container"> <input type="text" class="search-input" placeholder="Search by location, price or features..."> </div> <div class="listings-container"> <!-- Property 1 --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-left"> <span class="property-status status-sale">For Sale</span> <span class="property-title">Redwood Overlook Estate</span> </div> <span class="property-price">$2,875,000</span> <div class="accordion-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> <div class="new-badge">New</div> </div> <div class="accordion-content"> <div class="accordion-inner"> <div class="property-grid"> <div class="property-image"> <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Redwood Overlook Estate"> </div> <div class="property-details"> <div class="property-address"> <svg viewBox="0 0 24 24"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/> </svg> 128 Skyline Ridge, Berkeley Hills, CA </div> <div class="property-specs"> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </svg> 5 Bedrooms </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M7 19h10v1c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1zm0-1h10v-5H7v5zM17 3v5H7V3h10zm0 0c0-1.1-.9-1.99-2-1.99H9c-1.1 0-2 .9-2 2"/> </svg> 4.5 Baths </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/> </svg> 4,650 sqft </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M8 18h8v-8H8v8zm4-14c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/> </svg> 1.2 Acre Lot </div> </div> <p class="property-description"> Perched on Berkeley's scenic ridgeline, this architectural masterpiece offers panoramic bay views, a chef's kitchen with walnut cabinetry, and an infinity pool merging with the horizon. The primary suite features floor-to-ceiling windows capturing the Golden Gate sunset. </p> </div> </div> <div class="viewing-schedule"> <div class="viewing-title"> <svg viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> Available Viewing Times </div> <div class="viewing-dates"> <div class="date-option">Sat, Oct 7 • 10:00 AM</div> <div class="date-option">Sat, Oct 7 • 2:30 PM</div> <div class="date-option">Sun, Oct 8 • 11:00 AM</div> <div class="date-option">Sun, Oct 8 • 4:00 PM</div> <div class="date-option">Tue, Oct 10 • 5:30 PM</div> </div> </div> <div class="contact-agent"> <div class="agent-photo"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Agent Photo"> </div> <div class="agent-info"> <div class="agent-name">Alexandra Chen</div> <div class="agent-title">Senior Estates Specialist</div> <div class="agent-contact"> <button class="contact-button"> <svg viewBox="0 0 24 24" fill="white"> <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/> </svg> Contact </button> <button class="favorite-button"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> </div> </div> </div> <button class="cta-button pulse">Schedule Private Viewing</button> </div> </div> </div> <!-- Property 2 --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-left"> <span class="property-status status-rent">For Rent</span> <span class="property-title">Claremont Gardens Townhouse</span> </div> <span class="property-price">$5,800/mo</span> <div class="accordion-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-inner"> <div class="property-grid"> <div class="property-image"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Claremont Gardens Townhouse"> </div> <div class="property-details"> <div class="property-address"> <svg viewBox="0 0 24 24"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/> </svg> 75 Claremont Ave, Berkeley, CA </div> <div class="property-specs"> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </svg> 3 Bedrooms </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M7 19h10v1c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1zm0-1h10v-5H7v5zM17 3v5H7V3h10zm0 0c0-1.1-.9-1.99-2-1.99H9c-1.1 0-2 .9-2 2"/> </svg> 2.5 Baths </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/> </svg> 2,200 sqft </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M10 16v-1H3.01L3 19c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2v-4h-7v1h-4zm10-9h-4.01V5l-2-2h-4l-2 2v2H4c-1.1 0-2 .9-2 2v3c0 1.11.89 2 2 2h6v-2h4v2h6c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm-6 0h-4V5h4v2z"/> </svg> Furnished </div> </div> <p class="property-description"> This elegantly renovated townhouse in the prestigious Claremont district features a gourmet kitchen with Caesarstone countertops, hardwood floors throughout, and a private garden terrace. Smart home technology, EV charging, and proximity to UC Berkeley make this an ideal academic or professional residence. </p> </div> </div> <div class="viewing-schedule"> <div class="viewing-title"> <svg viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> Available Viewing Times </div> <div class="viewing-dates"> <div class="date-option">Mon, Oct 9 • 12:00 PM</div> <div class="date-option">Wed, Oct 11 • 3:30 PM</div> <div class="date-option">Thu, Oct 12 • 5:00 PM</div> <div class="date-option">Sat, Oct 14 • 1:00 PM</div> </div> </div> <div class="contact-agent"> <div class="agent-photo"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent Photo"> </div> <div class="agent-info"> <div class="agent-name">Marcus Johnson</div> <div class="agent-title">Rental Properties Manager</div> <div class="agent-contact"> <button class="contact-button"> <svg viewBox="0 0 24 24" fill="white"> <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/> </svg> Contact </button> <button class="favorite-button"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> </div> </div> </div> <button class="cta-button">Apply Now</button> </div> </div> </div> <!-- Property 3 --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-left"> <span class="property-status status-sale">For Sale</span> <span class="property-title">North Berkeley Craftsman</span> </div> <span class="property-price">$1,895,000</span> <div class="accordion-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> <div class="new-badge">New</div> </div> <div class="accordion-content"> <div class="accordion-inner"> <div class="property-grid"> <div class="property-image"> <img src="https://images.unsplash.com/photo-1518780664697-55e3ad937233?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="North Berkeley Craftsman"> </div> <div class="property-details"> <div class="property-address"> <svg viewBox="0 0 24 24"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/> </svg> 1847 Shattuck Ave, Berkeley, CA </div> <div class="property-specs"> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </svg> 4 Bedrooms </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M7 19h10v1c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1zm0-1h10v-5H7v5zM17 3v5H7V3h10zm0 0c0-1.1-.9-1.99-2-1.99H9c-1.1 0-2 .9-2 2"/> </svg> 3 Baths </div> <div class="spec-item"> <svg viewBox="0 0 24 24"> <path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Literary Horizons - Blog Categories</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Serif+Pro:wght@400;600&display=swap'); :root { --cream: #f8f5f0; --ink: #2d2d2a; --accent: #b83b5e; --pale-gray: #e6e6e1; --medium-gray: #aeaea6; --dark-gray: #5a5a57; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Source Serif Pro', Georgia, serif; color: var(--ink); background-color: var(--cream); line-height: 1.6; padding: 20px; max-width: 700px; margin: 0 auto; height: 100vh; overflow-y: auto; } .container { max-width: 100%; margin: 0 auto; } header { margin-bottom: 30px; position: relative; border-bottom: 1px solid var(--medium-gray); padding-bottom: 15px; } h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 2.4rem; font-weight: 700; margin-bottom: 10px; color: var(--ink); letter-spacing: -0.5px; } .subtitle { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--dark-gray); margin-bottom: 15px; } .accordion { list-style: none; margin-bottom: 20px; } .accordion-header { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 700; padding: 15px 20px; background-color: var(--pale-gray); margin-top: 10px; cursor: pointer; position: relative; display: flex; justify-content: space-between; align-items: center; border-left: 3px solid transparent; transition: all 0.3s ease; } .accordion-header::after { content: "⊕"; font-size: 1.3rem; color: var(--dark-gray); transition: all 0.3s ease; } .accordion-header.active { border-left: 3px solid var(--accent); color: var(--accent); } .accordion-header.active::after { content: "⊖"; color: var(--accent); } .accordion-header:hover { background-color: #e0e0da; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); background: var(--cream); padding: 0 20px; } .accordion-content.active { max-height: 600px; padding: 20px; border-bottom: 1px dashed var(--medium-gray); } .tag-cloud { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-block; padding: 4px 10px; background-color: var(--pale-gray); border-radius: 20px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--medium-gray); } .tag:hover { background-color: var(--accent); color: white; border-color: var(--accent); transform: translateY(-2px); } .post-list { margin-top: 15px; } .post-item { margin-bottom: 20px; position: relative; padding-left: 10px; } .post-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 5px; color: var(--ink); text-decoration: none; display: block; transition: color 0.2s ease; } .post-title:hover { color: var(--accent); } .post-meta { font-size: 0.9rem; color: var(--dark-gray); display: flex; align-items: center; gap: 10px; } .post-meta::before { content: ""; display: inline-block; width: 20px; height: 1px; background-color: var(--medium-gray); } .search-container { margin-bottom: 25px; position: relative; } .search-input { width: 100%; padding: 12px 45px 12px 15px; font-family: 'Source Serif Pro', Georgia, serif; font-size: 1rem; border: 1px solid var(--medium-gray); background-color: var(--cream); border-radius: 4px; transition: all 0.3s ease; } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184, 59, 94, 0.2); } .search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--dark-gray); } .highlighted { background-color: rgba(184, 59, 94, 0.2); padding: 0 2px; } .results-count { display: none; margin-top: 10px; font-style: italic; color: var(--dark-gray); } .category-count { background-color: var(--accent); color: white; font-size: 0.8rem; font-weight: normal; padding: 2px 8px; border-radius: 20px; margin-left: 10px; font-family: 'Source Serif Pro', Georgia, serif; } footer { margin-top: 30px; text-align: center; font-size: 0.9rem; color: var(--dark-gray); border-top: 1px solid var(--medium-gray); padding-top: 15px; } .no-results { text-align: center; padding: 40px 20px; color: var(--dark-gray); font-style: italic; } /* Decorative elements */ .decorative-line { width: 50px; height: 3px; background-color: var(--accent); margin: 15px 0; } /* Animation for hovering on post items */ .post-item::before { content: ""; position: absolute; left: 0; top: 5px; height: 0; width: 3px; background-color: var(--accent); transition: height 0.3s ease; } .post-item:hover::before { height: calc(100% - 10px); } @media (max-width: 500px) { body { padding: 15px; } h1 { font-size: 2rem; } .accordion-header { font-size: 1.1rem; padding: 12px 15px; } .accordion-content.active { padding: 15px; } .post-title { font-size: 1rem; } } </style> </head> <body> <div class="container"> <header> <h1>Literary Horizons</h1> <p class="subtitle">Exploring the written world, one page at a time</p> <div class="decorative-line"></div> </header> <div class="search-container"> <input type="text" class="search-input" placeholder="Search articles by keyword..."> <span class="search-icon">⌕</span> <div class="results-count"></div> </div> <ul class="accordion"> <li> <div class="accordion-header active">Literary Criticism <span class="category-count">12</span></div> <div class="accordion-content active"> <div class="tag-cloud"> <span class="tag">Book Reviews</span> <span class="tag">Literary Theory</span> <span class="tag">Close Reading</span> <span class="tag">Comparative Literature</span> <span class="tag">Text Analysis</span> </div> <div class="post-list"> <div class="post-item"> <a href="#" class="post-title">The Subversive Nature of Stream of Consciousness in Virginia Woolf's Works</a> <div class="post-meta">April 12, 2023 • 8 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Deconstructing Dystopia: Orwell's Linguistic Innovations</a> <div class="post-meta">March 7, 2023 • 12 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">The Art of Unreliable Narration in Modern Fiction</a> <div class="post-meta">February 18, 2023 • 10 min read</div> </div> </div> </div> </li> <li> <div class="accordion-header">Writing Craft <span class="category-count">18</span></div> <div class="accordion-content"> <div class="tag-cloud"> <span class="tag">Fiction Techniques</span> <span class="tag">Character Development</span> <span class="tag">Dialogue Writing</span> <span class="tag">Plot Structure</span> <span class="tag">Style Guides</span> </div> <div class="post-list"> <div class="post-item"> <a href="#" class="post-title">Beyond Said: Crafting Dialogue Tags That Enhance Character</a> <div class="post-meta">April 3, 2023 • 7 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">The Five-Act Structure: Reinterpreting Classical Techniques</a> <div class="post-meta">March 21, 2023 • 9 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Wielding Sensory Details: Making Readers Feel Present</a> <div class="post-meta">February 9, 2023 • 6 min read</div> </div> </div> </div> </li> <li> <div class="accordion-header">Poetry Corner <span class="category-count">9</span></div> <div class="accordion-content"> <div class="tag-cloud"> <span class="tag">Sonnets</span> <span class="tag">Free Verse</span> <span class="tag">Poetic Forms</span> <span class="tag">Metrical Analysis</span> <span class="tag">Contemporary Poets</span> </div> <div class="post-list"> <div class="post-item"> <a href="#" class="post-title">The Revival of the Villanelle in Contemporary Poetry</a> <div class="post-meta">April 8, 2023 • 5 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Breaking the Pentameter: How Modern Poets Subvert Classical Forms</a> <div class="post-meta">March 15, 2023 • 11 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Image as Argument: The Visual Logic of Imagist Poetry</a> <div class="post-meta">January 29, 2023 • 8 min read</div> </div> </div> </div> </li> <li> <div class="accordion-header">Publishing Insights <span class="category-count">14</span></div> <div class="accordion-content"> <div class="tag-cloud"> <span class="tag">Industry Trends</span> <span class="tag">Manuscript Submission</span> <span class="tag">Agent Interviews</span> <span class="tag">Self-Publishing</span> <span class="tag">Book Marketing</span> </div> <div class="post-list"> <div class="post-item"> <a href="#" class="post-title">The Digital Renaissance: How E-Publishing Changed Literary Gatekeeping</a> <div class="post-meta">April 17, 2023 • 14 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Query Letters That Succeeded: A Study of Effective Pitches</a> <div class="post-meta">March 2, 2023 • 9 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Building Author Platforms: Social Media Strategies That Work</a> <div class="post-meta">February 5, 2023 • 11 min read</div> </div> </div> </div> </li> <li> <div class="accordion-header">Historical Literature <span class="category-count">10</span></div> <div class="accordion-content"> <div class="tag-cloud"> <span class="tag">Medieval Literature</span> <span class="tag">Renaissance Writers</span> <span class="tag">Victorian Novels</span> <span class="tag">Modernist Movement</span> <span class="tag">Literary Evolution</span> </div> <div class="post-list"> <div class="post-item"> <a href="#" class="post-title">Chaucer's Subversive Humor: Satire as Social Commentary</a> <div class="post-meta">April 1, 2023 • 13 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">The Rise of the Novel: Epistolary Techniques in 18th Century Fiction</a> <div class="post-meta">March 11, 2023 • 15 min read</div> </div> <div class="post-item"> <a href="#" class="post-title">Modernist Reactions to Industrialization: Literary Responses to Changing Landscapes</a> <div class="post-meta">January 22, 2023 • 10 min read</div> </div> </div> </div> </li> </ul> <div class="no-results" style="display: none;"> <p>No articles match your search criteria. Try different keywords or browse our categories.</p> </div> <footer> <p>© 2023 Literary Horizons • Curated with love for the written word</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Accordion functionality const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', function() { this.classList.toggle('active'); const content = this.nextElementSibling; content.classList.toggle('active'); // Add a little bounce animation on open if (content.classList.contains('active')) { content.style.animation = 'none'; setTimeout(() => { content.style.animation = 'bounce 0.5s ease'; }, 10); } }); }); // Search functionality const searchInput = document.querySelector('.search-input'); const resultsCount = document.querySelector('.results-count'); const postItems = document.querySelectorAll('.post-item'); const noResults = document.querySelector('.no-results'); const accordion = document.querySelector('.accordion'); searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase().trim(); let matchCount = 0; if (searchTerm === '') { // Reset everything if search is empty postItems.forEach(item => { item.style.display = 'block'; const title = item.querySelector('.post-title'); title.innerHTML = title.textContent; // Remove any highlighting }); accordionHeaders.forEach(header => { const content = header.nextElementSibling; if (!content.classList.contains('active')) { header.classList.remove('active'); } }); resultsCount.style.display = 'none'; noResults.style.display = 'none'; accordion.style.display = 'block'; return; } // Otherwise, perform search postItems.forEach(item => { const title = item.querySelector('.post-title'); const titleText = title.textContent.toLowerCase(); if (titleText.includes(searchTerm)) { // Show this item item.style.display = 'block'; matchCount++; // Highlight the matching text const regex = new RegExp(`(${searchTerm})`, 'gi'); title.innerHTML = title.textContent.replace( regex, '<span class="highlighted">$1</span>' ); // Make sure its accordion section is open const accordionContent = item.closest('.accordion-content'); const accordionHeader = accordionContent.previousElementSibling; accordionContent.classList.add('active'); accordionHeader.classList.add('active'); } else { // Hide this item item.style.display = 'none'; } }); // Show search results count resultsCount.style.display = 'block'; resultsCount.textContent = `Found ${matchCount} article${matchCount !== 1 ? 's' : ''} matching "${searchTerm}"`; // Show no results message if needed if (matchCount === 0) { noResults.style.display = 'block'; accordion.style.display = 'none'; } else { noResults.style.display = 'none'; accordion.style.display = 'block'; } }); // Tag functionality - filter posts when clicking on a tag const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', function() { const tagText = this.textContent.toLowerCase(); searchInput.value = tagText; // Trigger the input event to perform the search const inputEvent = new Event('input', { bubbles: true }); searchInput.dispatchEvent(inputEvent); }); }); // Add a subtle animation for the search icon const searchIcon = document.querySelector('.search-icon'); searchInput.addEventListener('focus', function() { searchIcon.style.transition = 'transform 0.3s ease'; searchIcon.style.transform = 'translateY(-50%) scale(1.2)'; searchIcon.style.color = 'var(--accent)'; }); searchInput.addEventListener('blur', function() { searchIcon.style.transform = 'translateY(-50%) scale(1)'; searchIcon.style.color = 'var(--dark-gray)'; }); // Add CSS animation for bounce effect const style = document.createElement('style'); style.textContent = ` @keyframes bounce { 0% { transform: scale(0.98); } 50% { transform: scale(1.01); } 100% { transform: scale(1); } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechFusion Summit 2024</title> <style> :root { --primary: #0072ff; --secondary: #00c6ff; --accent: #FF3366; --dark: #1a1a2e; --light: #f5f5f7; --success: #00c853; --warning: #ffab00; --gray: #6c757d; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } body { background-color: var(--light); color: var(--dark); padding: 20px; max-width: 700px; margin: 0 auto; height: 100vh; overflow-y: auto; } .conference-header { text-align: center; margin-bottom: 30px; position: relative; } .conference-title { font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 5px; letter-spacing: -0.5px; } .conference-dates { font-size: 1rem; color: var(--gray); font-weight: 500; margin-bottom: 10px; } .conference-location { font-size: 0.9rem; color: var(--dark); font-weight: 600; padding: 8px 15px; background-color: rgba(0, 114, 255, 0.1); border-radius: 20px; display: inline-block; } .location-icon { color: var(--primary); margin-right: 5px; } .tabs { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; } .tab { padding: 10px 15px; background-color: white; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 0.9rem; border: 1px solid #e6e6e6; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); flex-grow: 1; text-align: center; position: relative; overflow: hidden; } .tab::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--primary); transform: scaleY(0); transition: transform 0.3s ease; } .tab.active { background-color: #fff; color: var(--primary); border-color: var(--primary); box-shadow: 0 5px 15px rgba(0, 114, 255, 0.15); } .tab.active::before { transform: scaleY(1); } .day-label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 2px; color: var(--gray); } .day-date { display: block; font-size: 1rem; font-weight: 700; } .schedule-container { margin-bottom: 30px; } .schedule-day { display: none; animation: fadeIn 0.5s ease forwards; } .schedule-day.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .session { background-color: white; border-radius: 12px; overflow: hidden; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid #e6e6e6; transition: all 0.3s ease; } .session:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .session-header { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; position: relative; border-bottom: 1px solid transparent; transition: all 0.2s ease; } .session.active .session-header { border-bottom-color: #e6e6e6; } .session-time { display: flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-bottom: 5px; } .session-time svg { margin-right: 6px; } .session-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin: 0; transition: color 0.2s ease; } .session-presenter { font-size: 0.85rem; color: var(--gray); margin-top: 4px; } .session-indicator { width: 24px; height: 24px; border-radius: 50%; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; flex-shrink: 0; margin-left: 10px; } .session-indicator svg { width: 12px; height: 12px; fill: var(--gray); transition: all 0.3s ease; } .session.active .session-indicator { background-color: var(--primary); } .session.active .session-indicator svg { fill: white; transform: rotate(180deg); } .session-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } .session-details { padding: 20px; } .session-label { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .workshop { background-color: rgba(255, 171, 0, 0.15); color: #e67700; } .keynote { background-color: rgba(255, 51, 102, 0.15); color: #d81b60; } .panel { background-color: rgba(0, 200, 83, 0.15); color: #00a040; } .networking { background-color: rgba(103, 58, 183, 0.15); color: #5e35b1; } .break { background-color: rgba(108, 117, 125, 0.15); color: #495057; } .session-description { font-size: 0.95rem; line-height: 1.6; color: #505050; margin-bottom: 15px; } .tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .tag { padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background-color: #f0f0f0; color: var(--gray); } .location-detail { display: flex; align-items: center; font-size: 0.85rem; color: var(--dark); padding: 8px 12px; background-color: rgba(0, 0, 0, 0.03); border-radius: 8px; width: fit-content; margin-top: 15px; } .location-detail svg { margin-right: 6px; color: var(--primary); } .time-progress { height: 6px; background-color: rgba(0, 114, 255, 0.15); border-radius: 3px; overflow: hidden; margin-top: 15px; } .time-bar { height: 100%; width: 75%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 3px; } .cta-button { display: inline-block; padding: 10px 20px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border-radius: 8px; font-weight: 600; text-decoration: none; margin-top: 15px; transition: all 0.3s ease; border: none; cursor: pointer; outline: none; box-shadow: 0 4px 10px rgba(0, 114, 255, 0.2); } .cta-button:hover { box-shadow: 0 6px 15px rgba(0, 114, 255, 0.3); transform: translateY(-2px); } .cta-button svg { margin-left: 6px; transition: transform 0.2s ease; } .cta-button:hover svg { transform: translateX(3px); } .current-session { position: relative; } .current-session::after { content: 'LIVE NOW'; position: absolute; top: 15px; right: 15px; background-color: var(--accent); color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.7; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.7; transform: scale(0.95); } } @media (max-width: 500px) { .conference-title { font-size: 1.8rem; } .session-header { padding: 15px; } .session-details { padding: 15px; } .tabs { gap: 6px; } .tab { padding: 8px 10px; font-size: 0.8rem; } .day-date { font-size: 0.85rem; } .session-title { font-size: 0.95rem; } } .refresh-indicator { position: fixed; bottom: 20px; right: 20px; background-color: var(--accent); color: white; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(255, 51, 102, 0.3); cursor: pointer; z-index: 10; opacity: 0; transform: scale(0.8); transition: all 0.3s ease; animation: appearAfterDelay 5s forwards; } @keyframes appearAfterDelay { to { opacity: 1; transform: scale(1); } } .refresh-indicator:hover { transform: scale(1.1); box-shadow: 0 6px 15px rgba(255, 51, 102, 0.4); } .refresh-indicator svg { width: 20px; height: 20px; fill: white; } .notification-badge { position: absolute; top: 20px; right: 20px; background-color: var(--success); color: white; font-size: 0.7rem; font-weight: 700; padding: 6px 12px; border-radius: 20px; opacity: 0; transform: translateY(-20px); transition: all 0.3s ease; z-index: 20; } .notification-badge.show { opacity: 1; transform: translateY(0); } .fade-out { animation: fadeOut 0.5s ease 2s forwards; } @keyframes fadeOut { to { opacity: 0; transform: translateY(-20px); } } </style> </head> <body> <div class="conference-header"> <h1 class="conference-title">TechFusion Summit 2024</h1> <p class="conference-dates">June 15-18, 2024</p> <div class="conference-location"> <span class="location-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> </span> Quantum Innovation Center, San Francisco </div> </div> <div class="notification-badge" id="notification"> Schedule updated successfully! </div> <div class="tabs" id="day-tabs"> <div class="tab active" data-day="day1"> <span class="day-label">DAY 1</span> <span class="day-date">June 15</span> </div> <div class="tab" data-day="day2"> <span class="day-label">DAY 2</span> <span class="day-date">June 16</span> </div> <div class="tab" data-day="day3"> <span class="day-label">DAY 3</span> <span class="day-date">June 17</span> </div> <div class="tab" data-day="day4"> <span class="day-label">DAY 4</span> <span class="day-date">June 18</span> </div> </div> <div class="schedule-container"> <div class="schedule-day active" id="day1"> <div class="session"> <div class="session-header"> <div class="session-info"> <div class="session-time"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/> <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/> </svg> 08:30 - 09:30 </div> <h3 class="session-title">Registration & Networking Breakfast</h3> <div class="session-presenter">Welcome Team</div> </div> <div class="session-indicator"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/> </svg> </div> </div> <div class="session-content"> <div class="session-details"> <span class="session-label networking">Networking</span> <p class="session-description">Start your day with coffee, light breakfast, and meet fellow attendees. Pick up your badge and conference materials at the registration desk.</p> <div class="location-detail"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Grand Foyer, 1st Floor </div> </div> </div> </div> <div class="session current-session"> <div class="session-header"> <div class="session-info"> <div class="session-time"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/> <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/> </svg> 09:30 - 10:30 </div> <h3 class="session-title">Opening Keynote: The Quantum Leap in AI</h3> <div class="session-presenter">Dr. Sophia Chen, Quantum AI Research</div> </div> <div class="session-indicator"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/> </svg> </div> </div> <div class="session-content"> <div class="session-details"> <span class="session-label keynote">Keynote</span> <p class="session-description">Dr. Chen will explore how quantum computing is revolutionizing the field of artificial intelligence, breaking computational barriers, and enabling new paradigms in machine learning algorithms that were previously impossible.</p> <div class="tag-container"> <span class="tag">Quantum Computing</span> <span class="tag">AI</span> <span class="tag">Machine Learning</span> </div> <div class="location-detail"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Main Stage, 2nd Floor </div> <div class="time-progress"> <div class="time-bar"></div> </div> <button class="cta-button"> Add to My Schedule <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="white"/> </svg> </button> </div> </div> </div> <div class="session"> <div class="session-header"> <div class="session-info"> <div class="session-time"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/> <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/> </svg> 10:45 - 12:15 </div> <h3 class="session-title">Workshop: Hands-on Blockchain Development</h3> <div class="session-presenter">Marco Venti, Blockchain Architect</div> </div> <div class="session-indicator"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/> </svg> </div> </div> <div class="session-content"> <div class="session-details"> <span class="session-label workshop">Workshop</span> <p class="session-description">This interactive session will guide you through the process of building your own decentralized application (dApp). Participants will learn about smart contracts, Web3 integration, and security best practices for blockchain development.</p> <p class="session-description"><strong>Requirements:</strong> Laptop with Node.js installed, basic JavaScript knowledge.</p> <div class="tag-container"> <span class="tag">Blockchain</span> <span class="tag">Web3</span> <span class="tag">Smart Contracts</span> <span class="tag">Beginner-Friendly</span> </div> <div class="location-detail"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Workshop Room A, 3rd Floor </div> <button class="cta-button"> Add to My Schedule <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="white"/> </svg> </button> </div> </div> </div> <div class="session"> <div class="session-header"> <div class="session-info"> <div class="session-time"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/> <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/> </svg> 12:15 - 13:30 </div> <h3 class="session-title">Lunch & Networking</h3> <div class="session-presenter">Catered Experience</div> </div> <div class="session-indicator"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/> </svg> </div> </div> <div class="session-content"> <div class="session-details"> <span class="session-label break">Break</span> <p class="session-description">Enjoy a gourmet lunch featuring local cuisine. Special dietary requirements accommodated. Take this opportunity to connect with speakers and fellow attendees in a relaxed environment.</p> <div class="location-detail"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Dining Hall, 1st Floor </div> </div> </div> </div> </div> <div class="schedule-day" id="day2"> <div class="session"> <div class="session-header"> <div class="session-info"> <div class="session-time"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/> <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/> </svg> 09:00 - 10:15 </div> <h3 class="session-title">Panel: Ethical AI and Data Privacy</h3> <div class="session-presenter">Industry Leaders Panel</div> </div> <div class="session-indicator"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/> </svg> </div> </div> <div class="session-content"> <div class="session-details"> <span class="session-label panel">Panel</span> <p class="session-description">Join our expert panel as they discuss the critical intersection of AI advancement and data privacy protection. The discussion will cover regulatory frameworks, ethical algorithms, and how companies can innovate while respecting user privacy.</p> <div class="tag-container"> <span class="tag">Ethics</span> <span class="tag">AI Regulation</span> <span class="tag">Data Privacy</span> </div> <div class="location-detail"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Conference Room B, 2nd Floor </div> <button class="cta-button"> Add to My Schedule <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="white"/> </svg> </button> </div> </div> </div> <div class="session"> <div class="session-header"> <div class="session-info"> <div class="session-time"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/> <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/> </svg> 10:30 - 12:00 </div> <h3 class="session-title">Workshop: Cloud-Native Microservices Architecture</h3> <div class="session-presenter">Lina Rodriguez, Cloud Architect</div> </div> <div class="session-indicator"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/> </svg> </div> </div> <div class="session-content"> <div class="session-details"> <span class="session-label workshop">Workshop</span> <p class="session-description">This hands-on workshop will walk you through designing, implementing and deploying microservices using Kubernetes and service mesh technologies. Learn how to build resilient, scalable systems that can handle global traffic.</p> <p class="session-description"><strong>Requirements:</strong> Basic knowledge of Docker, laptop with Docker installed.</p> <div class="tag-container"> <span class="tag">Kubernetes</span> <span class="tag">Microservices</span> <span class="tag">DevOps</span> <span class="tag">Intermediate</span> </div> <div class="location-detail"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Data Insights Accordion</title> <style> :root { --primary: #0066ff; --primary-light: #4d94ff; --secondary: #00e6c3; --dark: #151c28; --light: #f7f9fc; --text: #e0e6f0; --accent: #ff3366; --grid-line: rgba(90, 106, 130, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'IBM Plex Mono', 'Roboto Mono', monospace; background-color: var(--dark); color: var(--text); line-height: 1.6; width: 100%; height: 100vh; overflow-x: hidden; padding: 20px; } .container { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; opacity: 0; animation: fadeIn 0.8s forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .header { margin-bottom: 20px; position: relative; } .header h1 { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--light); position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; width: 40px; height: 3px; background: var(--secondary); bottom: -5px; left: 0; } .header p { font-size: 14px; opacity: 0.85; max-width: 90%; } .accordion { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--primary) var(--dark); margin-bottom: 20px; } .accordion::-webkit-scrollbar { width: 6px; } .accordion::-webkit-scrollbar-track { background: var(--dark); } .accordion::-webkit-scrollbar-thumb { background-color: var(--primary-light); border-radius: 6px; } .accordion-item { margin-bottom: 12px; border-radius: 6px; overflow: hidden; background: rgba(38, 48, 65, 0.7); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); border: 1px solid rgba(90, 106, 130, 0.15); transition: all 0.3s ease; } .accordion-item:hover { box-shadow: 0 6px 20px rgba(0, 102, 255, 0.1); border: 1px solid rgba(0, 102, 255, 0.2); } .accordion-header { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; transition: all 0.3s ease; } .accordion-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 102, 255, 0.1) 0%, rgba(0, 0, 0, 0) 100%); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .accordion-header:hover::before { opacity: 1; } .active .accordion-header { background: linear-gradient(90deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%); border-bottom: 1px solid rgba(90, 106, 130, 0.15); } .accordion-title { font-size: 15px; font-weight: 500; color: var(--light); display: flex; align-items: center; } .accordion-title .icon { margin-right: 10px; width: 24px; height: 24px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; } .accordion-toggle { width: 24px; height: 24px; position: relative; display: flex; align-items: center; justify-content: center; } .accordion-toggle span { position: absolute; width: 14px; height: 2px; background-color: var(--secondary); border-radius: 2px; transition: all 0.3s ease; } .accordion-toggle span:first-child { transform: rotate(90deg); } .active .accordion-toggle span:first-child { transform: rotate(0); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .accordion-body { padding: 0 20px 20px; } .data-overview { margin-bottom: 15px; } .data-overview p { font-size: 13px; margin-bottom: 10px; line-height: 1.5; } .data-metrics { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; } .metric-card { flex: 1; min-width: 110px; background: rgba(25, 32, 45, 0.7); padding: 12px; border-radius: 6px; border: 1px solid rgba(90, 106, 130, 0.15); transition: all 0.3s ease; } .metric-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); border-color: var(--primary-light); } .metric-title { font-size: 12px; opacity: 0.7; margin-bottom: 5px; } .metric-value { font-size: 20px; font-weight: 600; color: var(--light); } .metric-change { font-size: 11px; margin-top: 3px; } .metric-change.positive { color: var(--secondary); } .metric-change.negative { color: var(--accent); } .chart-container { height: 200px; width: 100%; position: relative; margin-bottom: 15px; overflow: hidden; border-radius: 6px; background: rgba(25, 32, 45, 0.5); padding: 15px; display: flex; justify-content: center; align-items: center; } .chart-container canvas { width: 100%; height: 100%; } .data-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; font-size: 12px; } .breakdown-item { display: flex; justify-content: space-between; padding: 8px 10px; background: rgba(25, 32, 45, 0.5); border-radius: 4px; transition: transform 0.2s ease; } .breakdown-item:hover { transform: translateX(5px); background: rgba(0, 102, 255, 0.1); } .breakdown-value { font-weight: 500; color: var(--secondary); } .time-periods { display: flex; gap: 8px; margin-bottom: 15px; } .time-period { font-size: 12px; padding: 6px 12px; background: rgba(25, 32, 45, 0.7); border-radius: 20px; cursor: pointer; transition: all 0.3s ease; border: 1px solid transparent; } .time-period:hover { background: rgba(0, 102, 255, 0.1); } .time-period.active { background: rgba(0, 102, 255, 0.2); border-color: var(--primary-light); color: var(--light); } .data-grid { height: 170px; position: relative; background: rgba(25, 32, 45, 0.5); border-radius: 6px; overflow: hidden; margin-bottom: 15px; } .grid-line { position: absolute; background-color: var(--grid-line); } .grid-line-horizontal { width: 100%; height: 1px; } .grid-line-vertical { height: 100%; width: 1px; } .data-point { position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary); transform: translate(-50%, -50%); transition: all 0.3s ease; } .data-point::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background-color: rgba(0, 102, 255, 0.2); opacity: 0; transition: opacity 0.3s ease; } .data-point:hover { background-color: var(--secondary); } .data-point:hover::before { opacity: 1; } .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(21, 28, 40, 0.7); display: flex; justify-content: center; align-items: center; z-index: 10; backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loading-overlay.show { opacity: 1; pointer-events: auto; } .spinner { width: 30px; height: 30px; border: 3px solid rgba(0, 102, 255, 0.3); border-radius: 50%; border-top-color: var(--primary); animation: spinner 1s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } .tooltip { position: absolute; background: rgba(25, 32, 45, 0.95); color: var(--light); border-radius: 4px; padding: 8px 12px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s; transform: translate(-50%, -100%); margin-top: -10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); z-index: 100; white-space: nowrap; border: 1px solid var(--primary-light); } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(25, 32, 45, 0.95); } .time-series-line { position: absolute; height: 2px; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .geo-map { position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; } .geo-map.show { opacity: 1; } .map-region { position: absolute; background-color: rgba(0, 102, 255, 0.15); border: 1px solid var(--primary-light); border-radius: 2px; transition: all 0.3s ease; } .map-region:hover { background-color: rgba(0, 102, 255, 0.3); transform: scale(1.05); } .footer { font-size: 12px; opacity: 0.7; text-align: center; padding: 10px 0; position: relative; } .refresh-button { position: absolute; right: 0; top: -40px; background: rgba(25, 32, 45, 0.7); border: 1px solid rgba(90, 106, 130, 0.15); color: var(--text); border-radius: 5px; padding: 6px 12px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; } .refresh-button:hover { background: rgba(0, 102, 255, 0.2); border-color: var(--primary-light); } .refresh-icon { width: 14px; height: 14px; border: 2px solid var(--secondary); border-radius: 50%; border-right-color: transparent; transition: transform 0.5s ease; } .refresh-button:hover .refresh-icon { transform: rotate(180deg); } @media (max-width: 580px) { .data-metrics { flex-direction: column; gap: 10px; } .metric-card { min-width: unset; } .data-breakdown { grid-template-columns: 1fr; } .header h1 { font-size: 20px; } .header p { font-size: 13px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>QUANTUM ANALYTICS</h1> <p>Advanced data insights with real-time performance metrics across multiple business dimensions.</p> <button class="refresh-button"> <span class="refresh-icon"></span> Refresh Data </button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="icon">1</div> Performance Metrics </div> <div class="accordion-toggle"> <span></span> <span></span> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="data-overview"> <p>Comprehensive analysis of all key performance indicators showing a 14.3% growth in overall performance with significant increases in conversion rates.</p> </div> <div class="time-periods"> <div class="time-period active">1W</div> <div class="time-period">1M</div> <div class="time-period">3M</div> <div class="time-period">1Y</div> </div> <div class="data-metrics"> <div class="metric-card"> <div class="metric-title">Conversion</div> <div class="metric-value">8.7%</div> <div class="metric-change positive">+2.3%</div> </div> <div class="metric-card"> <div class="metric-title">Sessions</div> <div class="metric-value">12.5K</div> <div class="metric-change positive">+18.9%</div> </div> <div class="metric-card"> <div class="metric-title">Avg. Time</div> <div class="metric-value">3:42</div> <div class="metric-change positive">+0:22</div> </div> </div> <div class="chart-container" id="performanceChart"> <div class="loading-overlay"> <div class="spinner"></div> </div> </div> <div class="data-breakdown"> <div class="breakdown-item"> <span>Mobile Traffic</span> <span class="breakdown-value">68.2%</span> </div> <div class="breakdown-item"> <span>Desktop Traffic</span> <span class="breakdown-value">28.7%</span> </div> <div class="breakdown-item"> <span>Tablet Traffic</span> <span class="breakdown-value">3.1%</span> </div> <div class="breakdown-item"> <span>Bounce Rate</span> <span class="breakdown-value">42.3%</span> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="icon">2</div> User Engagement </div> <div class="accordion-toggle"> <span></span> <span></span> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="data-overview"> <p>User engagement metrics reveal a significant upward trend in feature adoption and session depth, indicating increased product stickiness.</p> </div> <div class="time-periods"> <div class="time-period">1W</div> <div class="time-period active">1M</div> <div class="time-period">3M</div> <div class="time-period">1Y</div> </div> <div class="data-metrics"> <div class="metric-card"> <div class="metric-title">DAU/MAU</div> <div class="metric-value">56%</div> <div class="metric-change positive">+5.2%</div> </div> <div class="metric-card"> <div class="metric-title">Retention</div> <div class="metric-value">72.4%</div> <div class="metric-change positive">+3.1%</div> </div> <div class="metric-card"> <div class="metric-title">Interactions</div> <div class="metric-value">43.2K</div> <div class="metric-change positive">+12.7%</div> </div> </div> <div class="data-grid" id="engagementGrid"> <div class="loading-overlay"> <div class="spinner"></div> </div> </div> <div class="data-breakdown"> <div class="breakdown-item"> <span>Feature A Usage</span> <span class="breakdown-value">86.3%</span> </div> <div class="breakdown-item"> <span>Feature B Usage</span> <span class="breakdown-value">45.7%</span> </div> <div class="breakdown-item"> <span>Feature C Usage</span> <span class="breakdown-value">32.9%</span> </div> <div class="breakdown-item"> <span>Feature D Usage</span> <span class="breakdown-value">18.5%</span> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="icon">3</div> Geographic Distribution </div> <div class="accordion-toggle"> <span></span> <span></span> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="data-overview"> <p>Regional distribution analysis shows North America leading user growth, while APAC regions demonstrate the highest engagement per session.</p> </div> <div class="time-periods"> <div class="time-period">1W</div> <div class="time-period">1M</div> <div class="time-period active">3M</div> <div class="time-period">1Y</div> </div> <div class="chart-container" id="geoChart"> <div class="geo-map"> <!-- Map regions are dynamically generated --> </div> <div class="loading-overlay"> <div class="spinner"></div> </div> </div> <div class="data-metrics"> <div class="metric-card"> <div class="metric-title">NA Share</div> <div class="metric-value">42.6%</div> <div class="metric-change negative">-1.8%</div> </div> <div class="metric-card"> <div class="metric-title">EMEA Share</div> <div class="metric-value">31.3%</div> <div class="metric-change positive">+2.4%</div> </div> <div class="metric-card"> <div class="metric-title">APAC Share</div> <div class="metric-value">26.1%</div> <div class="metric-change positive">+4.7%</div> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="icon">4</div> Revenue Analysis </div> <div class="accordion-toggle"> <span></span> <span></span> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="data-overview"> <p>Revenue grew 23.7% quarter-over-quarter with subscription tiers showing the strongest performance. Enterprise plans leading growth at 37.2%.</p> </div> <div class="time-periods"> <div class="time-period">1W</div> <div class="time-period">1M</div> <div class="time-period">3M</div> <div class="time-period active">1Y</div> </div> <div class="data-metrics"> <div class="metric-card"> <div class="metric-title">MRR</div> <div class="metric-value">$837K</div> <div class="metric-change positive">+23.7%</div> </div> <div class="metric-card"> <div class="metric-title">ARPU</div> <div class="metric-value">$94.50</div> <div class="metric-change positive">+7.2%</div> </div> <div class="metric-card"> <div class="metric-title">LTV</div> <div class="metric-value">$2,145</div> <div class="metric-change positive">+15.3%</div> </div> </div> <div class="chart-container" id="revenueChart"> <div class="loading-overlay"> <div class="spinner"></div> </div> </div> <div class="data-breakdown"> <div class="breakdown-item"> <span>Basic Tier</span> <span class="breakdown-value">18.3%</span> </div> <div class="breakdown-item"> <span>Pro Tier</span> <span class="breakdown-value">42.7%</span> </div> <div class="breakdown-item"> <span>Enterprise</span> <span class="breakdown-value">39.0%</span> </div> <div class="breakdown-item"> <span>Churn Rate</span> <span class="breakdown-value">3.2%</span> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-title"> <div class="icon">5</div> Predictive Trends </div> <div class="accordion-toggle"> <span></span> <span></span> </div> </div> <div class="accordion-content"> <div class="accordion-body"> <div class="data-overview"> <p>AI-powered forecasting models project 32.5% growth in Q3 with emerging markets showing the highest potential for expansion and new user acquisition.</p> </div> <div class="time-periods"> <div class="time-period active">Q3</div> <div class="time-period">Q4</div> <div class="time-period">FY23</div> <div class="time-period">FY24</div> </div> <div class="chart-container" id="predictiveChart"> <div class="loading-overlay"> <div class="spinner"></div> </div> </div> <div class="data-metrics"> <div class="metric-card"> <div class="metric-title">Growth Est.</div> <div class="metric-value">32.5%</div> <div class="metric-change positive">+5.3%</div> </div> <div class="metric-card"> <div class="metric-title">Confidence</div> <div class="metric-value">87.2%</div> <div class="metric-change positive">+2.8%</div> </div> <div class="metric-card"> <div class="metric-title">Risk Factor</div> <div class="metric-value">Medium</div> <div class="metric-change">Stable</div> </div> </div> <div class="data-breakdown"> <div class="breakdown-item"> <span>NA Projection</span> <span class="breakdown-value">+18.7%</span> </div> <div class="breakdown-item"> <span>EMEA Projection</span> <span class="breakdown-value">+29.3%</span> </div> <div class="breakdown-item"> <span>APAC Projection</span> <span class="breakdown-value">+47.8%</span> </div> <div class="breakdown-item"> <span>LATAM Projection</span> <span class="breakdown-value">+33.6%</span> </div> </div> </div> </div> </div> </div> <div class="footer"> Last updated: Today at 14:27 UTC • Data refresh interval: 15 min </div> <div id="tooltip" class="tooltip"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize accordion functionality const accordionItems = document.querySelectorAll('.accordion-item'); const tooltip = document.getElementById('tooltip'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); const content = item.querySelector('.accordion-content'); header.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all accordion items accordionItems.forEach(otherItem => { otherItem.classList.remove('active'); otherItem.querySelector('.accordion-content').style.maxHeight = '0'; }); // If the clicked item wasn't active, open it if (!isActive) { item.classList.add('active'); content.style.maxHeight = content.scrollHeight + 'px'; // Initialize charts when accordion opens setTimeout(() => { const chartContainers = item.querySelectorAll('.chart-container'); chartContainers.forEach(container => { initializeChart(container.id); }); // Initialize data grid if present const gridContainer = item.querySelector('.data-grid'); if (gridContainer) { initializeGrid(gridContainer.id); } }, 500); } }); }); // Time period selection const timePeriods = document.querySelectorAll('.time-period'); timePeriods.forEach(period => { period.addEventListener('click', (e) => { const parent = period.parentElement; parent.querySelectorAll('.time-period').forEach(p => { p.classList.remove('active'); }); period.classList.add('active'); // Reload chart data when time period changes const chartContainer = parent.nextElementSibling.classList.contains('chart-container') ? parent.nextElementSibling : parent.parentElement.querySelector('.chart-container'); if (chartContainer) { reloadChart(chartContainer.id, period.textContent); } // Reload grid data if present const gridContainer = parent.nextElementSibling.classList.contains('data-grid') ? parent.nextElementSibling : parent.parentElement.querySelector('.data-grid'); if (gridContainer) { reloadGrid(gridContainer.id, period.textContent); } }); }); // Refresh button functionality const refreshButton = document.querySelector('.refresh-button'); refreshButton.addEventListener('click', () => { const activeItem = document.querySelector('.accordion-item.active'); if (activeItem) { const chartContainers = activeItem.querySelectorAll('.chart-container'); chartContainers.forEach(container => { reloadChart(container.id, activeItem.querySelector('.time-period.active')?.textContent || '1M'); }); const gridContainer = activeItem.querySelector('.data-grid'); if (gridContainer) { reloadGrid(gridContainer.id, activeItem.querySelector('.time-period.active')?.textContent || '1M'); } } }); // Initialize tooltip document.addEventListener('mousemove', (e) => { tooltip.style.left = e.pageX + 'px'; tooltip.style.top = e.pageY + 'px'; }); // Open first accordion by default with a delay setTimeout(() => { accordionItems[0].querySelector('.accordion-header').click(); }, 500); // Chart initialization functions function initializeChart(chartId) { const chartContainer = document.getElementById(chartId); if (!chartContainer) return; const loadingOverlay = chartContainer.querySelector('.loading-overlay'); loadingOverlay.classList.add('show'); // Simulate loading time setTimeout(() => { loadingOverlay.classList.remove('show'); // Different charts based on ID switch(chartId) { case 'performanceChart': renderPerformanceChart(chartContainer); break; case 'revenueChart': renderRevenueChart(chartContainer); break; case 'predictiveChart': renderPredictiveChart(chartContainer); break; case 'geoChart': renderGeoMap(chartContainer); break; } }, 800); } function reloadChart(chartId, timePeriod) { const chartContainer = document.getElementById(chartId); if (!chartContainer) return; const loadingOverlay = chartContainer.querySelector('.loading-overlay'); loadingOverlay.classList.add('show'); // Clear existing chart while (chartContainer.firstChild) { if (chartContainer.firstChild.classList && chartContainer.firstChild.classList.contains('loading-overlay')) { break; } chartContainer.removeChild(chartContainer.firstChild); } // Simulate loading time setTimeout(() => { loadingOverlay.classList.remove('show'); // Different charts based on ID switch(chartId) { case 'performanceChart': renderPerformanceChart(chartContainer, timePeriod); break; case 'revenueChart': renderRevenueChart(chartContainer, timePeriod); break; case 'predictiveChart': renderPredictiveChart(chartContainer, timePeriod); break; case 'geoChart': renderGeoMap(chartContainer, timePeriod); break; } }, 800); } function renderPerformanceChart(container, timePeriod = '1W') { const canvas = document.createElement('canvas'); container.appendChild(canvas); // Create time-series line const timeLine = document.createElement('div'); timeLine.classList.add('time-series-line'); timeLine.style.width = '90%'; timeLine.style.bottom = '40px'; timeLine.style.left = '5%'; container.appendChild(timeLine); // Animate the time-series line setTimeout(() => { timeLine.style.transform = 'scaleX(1)'; }, 100); // Add data points const pointsCount = timePeriod === '1Y' ? 12 : timePeriod === '3M' ? 6 : timePeriod === '1M' ? 4 : 7; for (let i = 0; i < pointsCount; i++) { const point = document.createElement('div'); point.classList.add('data-point'); const xPos = 5 + (90 * i / (pointsCount - 1));
