Breadcrumbs are essential navigational aids that enhance user experience by providing a clear path back to the homepage. They help users understand their current location within a website's hierarchy.
In this article, we will explore 10 exemplary breadcrumb designs that effectively guide users through complex websites. These examples showcase the best practices in breadcrumb implementation.
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 love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect breadcrumbs effortlessly, ensuring a seamless user experience every time.
Join the community of satisfied users and elevate your UI design. 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
Experience the efficiency of Subframe and create pixel-perfect UIs, including Breadcrumbs, in minutes. Our drag-and-drop editor and beautifully crafted components make design effortless.
Join the community of designers and developers who trust Subframe for their UI needs. Start for free and begin creating immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Artisan Breadcrumbs</title> <style> :root { --primary: #5a67d8; --primary-light: #c3dafe; --secondary: #f7fafc; --text: #2d3748; --text-light: #718096; --accent: #ed8936; --background: #ffffff; --shadow: 0 4px 6px rgba(0, 0, 0, 0.05); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--background); color: var(--text); line-height: 1.6; padding: 0; margin: 0; height: 100vh; overflow-x: hidden; } .container { max-width: 700px; margin: 0 auto; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; } header { padding: 1rem 0; margin-bottom: 2rem; border-bottom: 1px solid var(--primary-light); } header h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; } .header-subtitle { font-size: 0.875rem; color: var(--text-light); } .example-section { margin-bottom: 2rem; } .example-section h2 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text); border-left: 3px solid var(--primary); padding-left: 0.75rem; } .breadcrumb-showcase { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.5rem; } .showcase-item { background-color: var(--secondary); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); transition: var(--transition); } .showcase-item:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); } .showcase-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 0.75rem; } /* Breadcrumb Styles */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; margin: 0.5rem 0; position: relative; } .breadcrumb-item { position: relative; display: flex; align-items: center; font-size: 0.875rem; color: var(--text-light); } .breadcrumb-link { position: relative; color: inherit; text-decoration: none; padding: 0.25rem 0.5rem; transition: var(--transition); white-space: nowrap; } .breadcrumb-link:after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 50%; background-color: var(--primary); transition: var(--transition); } .breadcrumb-link:hover { color: var(--primary); } .breadcrumb-link:hover:after { width: calc(100% - 1rem); left: 0.5rem; } .breadcrumb-separator { margin: 0 0.25rem; color: var(--text-light); opacity: 0.5; } .breadcrumb-item:last-child .breadcrumb-link { color: var(--text); font-weight: 500; } .breadcrumb-item:last-child .breadcrumb-link:hover:after { background-color: var(--accent); } /* Animated breadcrumb */ .animated-breadcrumb .breadcrumb-item { transform: translateY(0); transition: transform 0.3s ease; } .animated-breadcrumb:hover .breadcrumb-item { animation: float 1.5s infinite ease-in-out; } .animated-breadcrumb .breadcrumb-item:nth-child(2) { animation-delay: 0.1s; } .animated-breadcrumb .breadcrumb-item:nth-child(3) { animation-delay: 0.2s; } .animated-breadcrumb .breadcrumb-item:nth-child(4) { animation-delay: 0.3s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Minimal breadcrumb */ .minimal-breadcrumb .breadcrumb-separator { width: 4px; height: 4px; border-radius: 50%; background-color: var(--text-light); margin: 0 0.5rem; opacity: 0.5; } .minimal-breadcrumb .breadcrumb-item:hover .breadcrumb-link { background-color: rgba(90, 103, 216, 0.1); border-radius: 4px; } /* Mobile breadcrumb */ .mobile-breadcrumb { position: relative; } .mobile-breadcrumb .ellipsis { display: none; margin: 0 0.25rem; color: var(--text-light); cursor: pointer; } .mobile-breadcrumb .ellipsis:hover { color: var(--primary); } .mobile-breadcrumb .breadcrumb-collapsed { display: none; position: absolute; top: 100%; left: 0; background-color: var(--background); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 0.5rem; z-index: 10; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; } .mobile-breadcrumb .breadcrumb-collapsed .breadcrumb-item { margin: 0.25rem 0; } .mobile-breadcrumb .breadcrumb-collapsed.is-open { display: flex; } /* Visual indicator */ .visual-breadcrumb .breadcrumb-indicator { position: absolute; bottom: -5px; height: 2px; background-color: var(--primary); transition: var(--transition); opacity: 0; } /* Info section */ .info-section { margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--primary-light); font-size: 0.875rem; color: var(--text-light); } .info-section h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--text); } .info-list { list-style: none; margin-top: 0.75rem; } .info-list li { display: flex; align-items: flex-start; margin-bottom: 0.5rem; } .info-list li:before { content: '•'; color: var(--primary); font-weight: bold; margin-right: 0.5rem; } /* Responsive styles */ @media (max-width: 600px) { .container { padding: 1rem; } header h1 { font-size: 1.25rem; } .showcase-item { padding: 1rem; } /* Mobile breadcrumb adjustments */ .mobile-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child) { display: none; } .mobile-breadcrumb .ellipsis { display: block; } } </style> </head> <body> <div class="container"> <header> <h1>Artisan Breadcrumbs</h1> <p class="header-subtitle">Guiding users through multi-level product hierarchies with elegance</p> </header> <div class="example-section"> <h2>Breadcrumb Variations</h2> <div class="breadcrumb-showcase"> <!-- Standard breadcrumb --> <div class="showcase-item"> <div class="showcase-label">Standard Hierarchy</div> <nav class="breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Home</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Electronics</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Audio</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Headphones</a> </div> </nav> </div> <!-- Animated breadcrumb --> <div class="showcase-item"> <div class="showcase-label">With Hover Animation</div> <nav class="breadcrumb animated-breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Home</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Fashion</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Women</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Outerwear</a> </div> </nav> </div> <!-- Minimal breadcrumb --> <div class="showcase-item"> <div class="showcase-label">Minimal Style</div> <nav class="breadcrumb minimal-breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Home</a> </div> <div class="breadcrumb-separator"></div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Books</a> </div> <div class="breadcrumb-separator"></div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Non-fiction</a> </div> <div class="breadcrumb-separator"></div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Science & Nature</a> </div> </nav> </div> <!-- Mobile-friendly breadcrumb --> <div class="showcase-item"> <div class="showcase-label">Mobile-Responsive</div> <nav class="breadcrumb mobile-breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Home</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Furniture</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Living Room</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Sofas & Couches</a> </div> <span class="ellipsis">...</span> <div class="breadcrumb-collapsed"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Furniture</a> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Living Room</a> </div> </div> </nav> </div> <!-- Visual indicator breadcrumb --> <div class="showcase-item"> <div class="showcase-label">Visual Indicator</div> <nav class="breadcrumb visual-breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Home</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Food & Drinks</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Pantry</a> </div> <span class="breadcrumb-separator">›</span> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link">Baking Supplies</a> </div> <div class="breadcrumb-indicator"></div> </nav> </div> </div> </div> <div class="info-section"> <h3>Key Benefits</h3> <ul class="info-list"> <li>Intuitive spatial navigation through clear hierarchical structures</li> <li>Minimalist typography enhances readability without visual clutter</li> <li>Responsive design adapts gracefully from desktop to mobile screens</li> <li>Subtle interactive elements provide contextual feedback</li> <li>Consistent styling increases user confidence in navigation</li> </ul> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Mobile breadcrumb functionality const ellipsisButton = document.querySelector('.mobile-breadcrumb .ellipsis'); const collapsedMenu = document.querySelector('.mobile-breadcrumb .breadcrumb-collapsed'); if (ellipsisButton) { ellipsisButton.addEventListener('click', function() { collapsedMenu.classList.toggle('is-open'); }); } // Close collapsed menu when clicking outside document.addEventListener('click', function(event) { if (!event.target.closest('.mobile-breadcrumb')) { if (collapsedMenu.classList.contains('is-open')) { collapsedMenu.classList.remove('is-open'); } } }); // Visual indicator for visual breadcrumb const visualBreadcrumb = document.querySelector('.visual-breadcrumb'); const indicator = visualBreadcrumb.querySelector('.breadcrumb-indicator'); const links = visualBreadcrumb.querySelectorAll('.breadcrumb-link'); links.forEach(link => { link.addEventListener('mouseenter', function() { const rect = this.getBoundingClientRect(); const parentRect = visualBreadcrumb.getBoundingClientRect(); indicator.style.left = (rect.left - parentRect.left) + 'px'; indicator.style.width = rect.width + 'px'; indicator.style.opacity = '1'; }); link.addEventListener('mouseleave', function() { indicator.style.opacity = '0'; }); }); visualBreadcrumb.addEventListener('mouseleave', function() { indicator.style.opacity = '0'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Intranet Navigation Breadcrumbs</title> <style> :root { --primary-blue: #0056b3; --secondary-blue: #007bff; --light-blue: #e1f0ff; --hover-blue: #004494; --dark-grey: #333; --medium-grey: #666; --light-grey: #f2f2f2; --white: #fff; --transition-speed: 0.3s; --border-radius: 4px; --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --shadow-hover: 0 4px 14px rgba(0, 86, 179, 0.25); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-grey); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .intranet-header { background-color: var(--primary-blue); color: var(--white); width: 100%; padding: 15px 20px; border-radius: var(--border-radius); display: flex; align-items: center; margin-bottom: 25px; box-shadow: var(--shadow); } .intranet-logo { font-weight: 600; font-size: 20px; display: flex; align-items: center; } .intranet-logo svg { margin-right: 10px; } .breadcrumb-container { background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); width: 100%; padding: 20px; margin-bottom: 20px; } .breadcrumb-title { color: var(--dark-grey); margin-bottom: 15px; font-size: 18px; font-weight: 600; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; padding: 12px 15px; background: var(--light-grey); border-radius: var(--border-radius); position: relative; overflow: hidden; } .breadcrumb::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--primary-blue); } .breadcrumb-item { display: flex; align-items: center; position: relative; } .breadcrumb-link { color: var(--medium-grey); text-decoration: none; padding: 6px 10px; font-size: 14px; border-radius: var(--border-radius); transition: all var(--transition-speed); display: flex; align-items: center; position: relative; z-index: 1; } .breadcrumb-link:hover, .breadcrumb-link:focus { color: var(--primary-blue); background-color: var(--light-blue); box-shadow: var(--shadow-hover); outline: none; } .breadcrumb-link:focus::after { content: ''; position: absolute; bottom: -2px; left: 10px; right: 10px; height: 2px; background-color: var(--primary-blue); animation: focusLine 0.3s ease-in-out forwards; } @keyframes focusLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } .breadcrumb-item:last-child .breadcrumb-link { color: var(--primary-blue); font-weight: 600; background-color: var(--light-blue); } .breadcrumb-separator { margin: 0 5px; color: var(--medium-grey); display: flex; align-items: center; } .tooltip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: var(--dark-grey); color: var(--white); padding: 8px 12px; border-radius: var(--border-radius); font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility var(--transition-speed), transform var(--transition-speed); z-index: 10; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); pointer-events: none; margin-top: 10px; } .tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: transparent transparent var(--dark-grey) transparent; } .breadcrumb-link:hover + .tooltip, .breadcrumb-link:focus + .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .content-preview { background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); width: 100%; padding: 20px; color: var(--dark-grey); } .content-title { font-size: 22px; margin-bottom: 15px; color: var(--primary-blue); border-bottom: 1px solid var(--light-grey); padding-bottom: 10px; } .content-section { margin-bottom: 20px; } .mobile-warning { display: none; margin-top: 20px; background-color: var(--light-blue); padding: 10px; border-radius: var(--border-radius); border-left: 4px solid var(--primary-blue); color: var(--primary-blue); font-size: 14px; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(0, 86, 179, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0); } } .breadcrumb-examples { margin-top: 25px; } .breadcrumb-example { margin-bottom: 15px; cursor: pointer; padding: 10px; background-color: var(--light-grey); border-radius: var(--border-radius); transition: all var(--transition-speed); } .breadcrumb-example:hover { background-color: var(--light-blue); transform: translateY(-2px); } .example-title { font-weight: 600; color: var(--primary-blue); margin-bottom: 5px; } /* Responsive design */ @media (max-width: 600px) { .breadcrumb { padding: 8px 10px; } .breadcrumb-link { padding: 4px 6px; font-size: 12px; } .mobile-warning { display: block; } .intranet-header { padding: 10px 15px; } .intranet-logo { font-size: 16px; } } </style> </head> <body> <header class="intranet-header"> <div class="intranet-logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> AcmeCorp Intranet </div> </header> <div class="breadcrumb-container"> <h2 class="breadcrumb-title">Navigation Breadcrumbs</h2> <nav class="breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link" tabindex="0"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Home </a> <div class="tooltip">Return to AcmeCorp Intranet Home</div> </div> <div class="breadcrumb-separator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link" tabindex="0">Departments</a> <div class="tooltip">Browse all organizational departments</div> </div> <div class="breadcrumb-separator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link" tabindex="0">Marketing</a> <div class="tooltip">Marketing Department - 47 team members</div> </div> <div class="breadcrumb-separator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link" tabindex="0">Digital Marketing</a> <div class="tooltip">Digital Marketing Team - 12 team members</div> </div> <div class="breadcrumb-separator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link pulse" tabindex="0">Q3 Campaign Planning</a> <div class="tooltip">Q3 Campaign Planning - Last updated: Today</div> </div> </nav> <div class="mobile-warning"> Scroll horizontally to view the complete breadcrumb trail. </div> </div> <div class="content-preview"> <h2 class="content-title">Breadcrumb Navigation Examples</h2> <p class="content-section"> Below are examples of our corporate intranet breadcrumb navigation patterns for different organizational structures. Click on an example to see it in action. </p> <div class="breadcrumb-examples"> <div class="breadcrumb-example" data-path="Home > Departments > Marketing > Digital Marketing > Q3 Campaign Planning"> <div class="example-title">Marketing Department Path</div> <div class="example-description">Displays navigation through the marketing organizational structure</div> </div> <div class="breadcrumb-example" data-path="Home > Departments > HR > Policies > Leave Management > Parental Leave"> <div class="example-title">HR Policies Path</div> <div class="example-description">Shows navigation through HR policy documentation</div> </div> <div class="breadcrumb-example" data-path="Home > Projects > Product Launch > Timeline > Milestone 3"> <div class="example-title">Project Management Path</div> <div class="example-description">Illustrates project hierarchy navigation</div> </div> </div> </div> <script> // Function to handle focus and keyboard navigation document.addEventListener('DOMContentLoaded', function() { const breadcrumbLinks = document.querySelectorAll('.breadcrumb-link'); breadcrumbLinks.forEach(link => { // Handle keyboard navigation link.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); // Simulate click this.click(); } }); // Handle click event link.addEventListener('click', function(e) { e.preventDefault(); // Add animation effect this.classList.add('pulse'); // Remove animation after it completes setTimeout(() => { this.classList.remove('pulse'); }, 2000); // Update active state breadcrumbLinks.forEach(l => { l.parentElement.classList.remove('active'); }); this.parentElement.classList.add('active'); }); }); // Example breadcrumb paths const breadcrumbExamples = document.querySelectorAll('.breadcrumb-example'); const breadcrumbNav = document.querySelector('.breadcrumb'); breadcrumbExamples.forEach(example => { example.addEventListener('click', function() { const path = this.getAttribute('data-path').split(' > '); // Clear current breadcrumb breadcrumbNav.innerHTML = ''; // Build new breadcrumb path.forEach((item, index) => { const breadcrumbItem = document.createElement('div'); breadcrumbItem.className = 'breadcrumb-item'; const link = document.createElement('a'); link.href = '#'; link.className = 'breadcrumb-link'; link.setAttribute('tabindex', '0'); // Add home icon to first item if (index === 0) { link.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> ${item} `; } else { link.textContent = item; } // Add pulse animation to last item if (index === path.length - 1) { link.classList.add('pulse'); } breadcrumbItem.appendChild(link); // Add tooltip const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.textContent = getTooltipText(item, index === path.length - 1); breadcrumbItem.appendChild(tooltip); breadcrumbNav.appendChild(breadcrumbItem); // Add separator if not the last item if (index < path.length - 1) { const separator = document.createElement('div'); separator.className = 'breadcrumb-separator'; separator.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> `; breadcrumbNav.appendChild(separator); } }); // Re-attach event listeners const newBreadcrumbLinks = document.querySelectorAll('.breadcrumb-link'); newBreadcrumbLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 2000); newBreadcrumbLinks.forEach(l => { l.parentElement.classList.remove('active'); }); this.parentElement.classList.add('active'); }); }); }); }); // Helper function to generate tooltip text function getTooltipText(item, isLast) { const date = new Date(); const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; switch(item) { case 'Home': return 'Return to AcmeCorp Intranet Home'; case 'Departments': return 'Browse all organizational departments'; case 'Projects': return 'View all active company projects'; case 'Marketing': return 'Marketing Department - 47 team members'; case 'HR': return 'Human Resources Department - 23 team members'; case 'Policies': return 'Corporate Policy Repository - 178 documents'; case 'Digital Marketing': return 'Digital Marketing Team - 12 team members'; case 'Product Launch': return 'New Product Launch 2023 - In Progress'; default: return isLast ? `${item} - Last updated: ${formattedDate}` : `Navigate to ${item}`; } } // Add subtle animation to the container const breadcrumbContainer = document.querySelector('.breadcrumb-container'); breadcrumbContainer.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-2px)'; this.style.boxShadow = var(--shadow-hover); this.style.transition = 'all 0.3s ease'; }); breadcrumbContainer.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = var(--shadow); this.style.transition = 'all 0.3s ease'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Educational Platform Breadcrumbs</title> <style> @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); :root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #7209b7; --success: #4cc9f0; --warning: #f72585; --light: #f8f9fa; --dark: #212529; --background: #f0f2f5; --completed: #4ade80; --pending: #fb923c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Quicksand', sans-serif; } body { background-color: var(--background); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 1.5rem; overflow-x: hidden; } .container { width: 100%; max-width: 700px; background-color: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 2rem; } .header { display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { background: linear-gradient(135deg, var(--primary), var(--accent)); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.2rem; } .logo-text { font-weight: 700; font-size: 1.25rem; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .profile { display: flex; align-items: center; gap: 0.75rem; } .profile-info { text-align: right; } .profile-name { font-weight: 600; font-size: 0.9rem; } .profile-role { font-size: 0.7rem; opacity: 0.7; } .profile-avatar { width: 35px; height: 35px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .title { text-align: center; margin-bottom: 0.5rem; } .subtitle { text-align: center; font-size: 0.9rem; opacity: 0.7; margin-bottom: 1.5rem; } .breadcrumb-container { width: 100%; position: relative; margin-bottom: 1rem; } .breadcrumb-track { height: 6px; background-color: #e9ecef; border-radius: 3px; position: absolute; width: 100%; top: 24px; z-index: 1; } .breadcrumb-progress { height: 6px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 3px; position: absolute; top: 24px; z-index: 2; transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .breadcrumbs { display: flex; justify-content: space-between; position: relative; z-index: 3; } .breadcrumb-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; position: relative; transition: transform 0.3s ease; width: 16.66%; } .breadcrumb-item:hover { transform: translateY(-5px); } .breadcrumb-circle { width: 48px; height: 48px; border-radius: 50%; background-color: white; border: 3px solid #e9ecef; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .breadcrumb-circle::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--accent)); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .breadcrumb-item.active .breadcrumb-circle { border-color: var(--primary); transform: scale(1.1); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3); } .breadcrumb-item.active .breadcrumb-circle::before { opacity: 1; } .breadcrumb-item.completed .breadcrumb-circle { border-color: var(--completed); background-color: var(--completed); } .breadcrumb-item.locked .breadcrumb-circle { background-color: #f5f5f5; cursor: not-allowed; } .breadcrumb-icon { color: #adb5bd; font-size: 1.2rem; transition: all 0.3s ease; } .breadcrumb-item.active .breadcrumb-icon { color: var(--primary); } .breadcrumb-item.completed .breadcrumb-icon { color: white; } .breadcrumb-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-align: center; transition: all 0.3s ease; white-space: nowrap; } .breadcrumb-item.active .breadcrumb-label { color: var(--primary); font-weight: 700; } .module-content { background-color: #f8f9fa; border-radius: 1rem; padding: 1.5rem; position: relative; overflow: hidden; transition: all 0.5s ease; min-height: 200px; } .module { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 1.5rem; opacity: 0; transform: translateX(50px); pointer-events: none; transition: all 0.5s ease; } .module.active { opacity: 1; transform: translateX(0); pointer-events: all; } .module-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .module-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } .module-title { font-weight: 700; margin-bottom: 0.25rem; } .module-desc { font-size: 0.85rem; opacity: 0.7; line-height: 1.4; } .module-body { flex: 1; margin: 0.5rem 0 1.5rem; } .module-footer { display: flex; justify-content: space-between; align-items: center; } .nav-buttons { display: flex; gap: 0.75rem; } .nav-button { background-color: white; border: none; border-radius: 0.5rem; padding: 0.6rem 1.2rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } .nav-button.prev { color: var(--dark); } .nav-button.next { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; } .nav-button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .nav-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .progress-indicator { font-size: 0.8rem; font-weight: 600; color: #6c757d; } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); background-color: var(--dark); color: white; font-size: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 10; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .breadcrumb-item:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-5px); } .breadcrumb-item.locked:hover .tooltip { opacity: 1; visibility: visible; } /* Module-specific styling */ .module-icon.introduction { background: linear-gradient(135deg, #4cc9f0, #4361ee); } .module-icon.fundamentals { background: linear-gradient(135deg, #4361ee, #3a0ca3); } .module-icon.intermediate { background: linear-gradient(135deg, #3a0ca3, #7209b7); } .module-icon.advanced { background: linear-gradient(135deg, #7209b7, #f72585); } .module-icon.project { background: linear-gradient(135deg, #f72585, #ff9e00); } .module-icon.certificate { background: linear-gradient(135deg, #ff9e00, #4cc9f0); } .point-list { list-style: none; margin-top: 1rem; } .point-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.9rem; } .point-icon { color: var(--primary); margin-top: 0.1rem; flex-shrink: 0; } .resource-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem; background-color: white; border-radius: 0.5rem; margin-bottom: 0.5rem; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); text-decoration: none; color: var(--dark); } .resource-link:hover { transform: translateX(5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .resource-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; } .resource-icon.video { background: linear-gradient(135deg, #f72585, #b5179e); } .resource-icon.article { background: linear-gradient(135deg, #4cc9f0, #4361ee); } .resource-icon.quiz { background: linear-gradient(135deg, #fb8500, #ffb703); } .resource-info { flex: 1; } .resource-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; } .resource-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; opacity: 0.7; } .progress-bar { height: 5px; width: 100%; background-color: #e9ecef; border-radius: 3px; margin-top: 0.5rem; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 3px; transition: width 0.3s ease; } .achievement { display: flex; align-items: center; gap: 1rem; background-color: #fff8e6; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; } .achievement-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #ffbe0b, #fb8500); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; } .achievement-info { flex: 1; } .achievement-title { font-weight: 700; margin-bottom: 0.25rem; color: #b45309; } .achievement-desc { font-size: 0.8rem; color: #92400e; } .requirement-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .requirement-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.5rem; background-color: white; border-radius: 0.5rem; } .requirement-icon { color: var(--completed); } .feedback-item { background-color: white; border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .feedback-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .feedback-avatar { width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.8rem; } .feedback-info { flex: 1; } .feedback-name { font-weight: 600; font-size: 0.85rem; } .feedback-role { font-size: 0.7rem; opacity: 0.7; } .feedback-rating { display: flex; gap: 0.15rem; color: #ffc107; font-size: 0.75rem; } .feedback-text { font-size: 0.85rem; line-height: 1.4; } .certificate-preview { width: 100%; height: 130px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: relative; overflow: hidden; } .certificate-image { position: absolute; width: 90%; height: 80%; background: linear-gradient(135deg, var(--light), white); border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; } .certificate-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; text-align: center; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .certificate-logo { font-size: 1.5rem; color: var(--primary); margin-bottom: 0.5rem; } @media (max-width: 640px) { .container { padding: 1.25rem; } .breadcrumb-label { font-size: 0.65rem; } .breadcrumb-circle { width: 40px; height: 40px; } .module { padding: 1.25rem; } .nav-button { padding: 0.5rem 0.8rem; font-size: 0.8rem; } } @media (max-width: 480px) { .breadcrumb-label { display: none; } .breadcrumb-circle { width: 36px; height: 36px; } .nav-buttons { gap: 0.5rem; } } /* Pulse animation for active breadcrumb */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(67, 97, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0); } } .breadcrumb-item.active .breadcrumb-circle { animation: pulse 2s infinite; } /* Toast notification */ .toast { position: fixed; bottom: 20px; right: 20px; background-color: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 0.75rem; transform: translateY(100px); opacity: 0; transition: all 0.3s ease; z-index: 1000; } .toast.show { transform: translateY(0); opacity: 1; } .toast-icon { width: 36px; height: 36px; border-radius: 50%; background-color: var(--completed); display: flex; align-items: center; justify-content: center; color: white; } .toast-content { flex: 1; } .toast-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; } .toast-message { font-size: 0.8rem; opacity: 0.7; } .toast-close { color: #6c757d; cursor: pointer; font-size: 1.2rem; line-height: 1; } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon">L+</div> <div class="logo-text">LearnPath</div> </div> <div class="profile"> <div class="profile-info"> <div class="profile-name">Alex Chen</div> <div class="profile-role">Web Development Path</div> </div> <div class="profile-avatar">AC</div> </div> </div> <div> <h2 class="title">Modern JavaScript Fundamentals</h2> <p class="subtitle">Master JavaScript with our interactive learning modules</p> <div class="breadcrumb-container"> <div class="breadcrumb-track"></div> <div class="breadcrumb-progress" id="progress-bar"></div> <div class="breadcrumbs"> <div class="breadcrumb-item completed" data-module="introduction"> <div class="tooltip">Course Introduction</div> <div class="breadcrumb-circle"> <i class="breadcrumb-icon">📚</i> </div> <div class="breadcrumb-label">Introduction</div> </div> <div class="breadcrumb-item active" data-module="fundamentals"> <div class="tooltip">JavaScript Fundamentals</div> <div class="breadcrumb-circle"> <i class="breadcrumb-icon">📝</i> </div> <div class="breadcrumb-label">Fundamentals</div> </div> <div class="breadcrumb-item" data-module="intermediate"> <div class="tooltip">Intermediate Concepts</div> <div class="breadcrumb-circle"> <i class="breadcrumb-icon">🧩</i> </div> <div class="breadcrumb-label">Intermediate</div> </div> <div class="breadcrumb-item" data-module="advanced"> <div class="tooltip">Advanced JavaScript</div> <div class="breadcrumb-circle"> <i class="breadcrumb-icon">🚀</i> </div> <div class="breadcrumb-label">Advanced</div> </div> <div class="breadcrumb-item locked" data-module="project"> <div class="tooltip">Complete Advanced module first</div> <div class="breadcrumb-circle"> <i class="breadcrumb-icon">🔨</i> </div> <div class="breadcrumb-label">Project</div> </div> <div class="breadcrumb-item locked" data-module="certificate"> <div class="tooltip">Complete all previous modules</div> <div class="breadcrumb-circle"> <i class="breadcrumb-icon">🏆</i> </div> <div class="breadcrumb-label">Certificate</div> </div> </div> </div> </div> <div class="module-content"> <div class="module" id="introduction"> <div class="module-header"> <div class="module-icon introduction">📚</div> <div> <h3 class="module-title">Course Introduction</h3> <div class="module-desc">Welcome to Modern JavaScript Fundamentals</div> </div> </div> <div class="module-body"> <p>This course is designed to take you from JavaScript beginner to confident developer. You'll learn modern ES6+ syntax and best practices.</p> <ul class="point-list"> <li class="point-item"> <div class="point-icon">✓</div> <div>Understand why JavaScript is the backbone of modern web development</div> </li> <li class="point-item"> <div class="point-icon">✓</div> <div>Get familiar with the course structure and learning path</div> </li> <li class="point-item"> <div class="point-icon">✓</div> <div>Set up your local development environment with the right tools</div> </li> </ul> <div class="achievement"> <div class="achievement-icon">🎯</div> <div class="achievement-info"> <div class="achievement-title">First Step Badge Earned!</div> <div class="achievement-desc">You've completed the introduction module</div> </div> </div> </div> <div class="module-footer"> <div class="progress-indicator">Module 1/6 Completed</div> <div class="nav-buttons"> <button class="nav-button prev" disabled> <span>←</span> Previous </button> <button class="nav-button next"> Next <span>→</span> </button> </div> </div> </div> <div class="module" id="fundamentals"> <div class="module-header"> <div class="module-icon fundamentals">📝</div> <div> <h3 class="module-title">JavaScript Fundamentals</h3> <div class="module-desc">Core concepts and building blocks</div> </div> </div> <div class="module-body"> <p>Master the essential JavaScript concepts that form the foundation of any JavaScript application.</p> <div class="resource-link"> <div class="resource-icon video">▶️</div> <div class="resource-info"> <div class="resource-title">Variables, Data Types & Operators</div> <div class="resource-meta"> <span>12 min video</span> <span>•</span> <span>Interactive examples</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 100%;"></div> </div> </div> </div> <div class="resource-link"> <div class="resource-icon article">📄</div> <div class="resource-info"> <div class="resource-title">Functions, Objects & Arrays</div> <div class="resource-meta"> <span>Reading</span> <span>•</span> <span>15 min</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 75%;"></div> </div> </div> </div> <div class="resource-link"> <div class="resource-icon quiz">❓</div> <div class="resource-info"> <div class="resource-title">JavaScript Fundamentals Quiz</div> <div class="resource-meta"> <span>10 questions</span> <span>•</span> <span>Not started</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 0%;"></div> </div> </div> </div> </div> <div class="module-footer"> <div class="progress-indicator">In progress (60%)</div> <div class="nav-buttons"> <button class="nav-button prev"> <span>←</span> Previous </button> <button class="nav-button next"> Next <span>→</span> </button> </div> </div> </div> <div class="module" id="intermediate"> <div class="module-header"> <div class="module-icon intermediate">🧩</div> <div> <h3 class="module-title">Intermediate Concepts</h3> <div class="module-desc">Elevate your JavaScript skills</div> </div> </div> <div class="module-body"> <p>Now that you understand the basics, let's explore more advanced JavaScript features and patterns.</p> <ul class="point-list"> <li class="point-item"> <div class="point-icon">↪</div> <div>ES6+ features: Arrow functions, destructuring, spread & rest operators</div> </li> <li class="point-item"> <div class="point-icon">↪</div> <div>Understanding scope, closures, and the 'this' keyword</div> </li> <li class="point-item"> <div class="point-icon">↪</div> <div>Asynchronous JavaScript with Promises and async/await</div> </li> <li class="point-item"> <div class="point-icon">↪</div> <div>Error handling techniques and debugging strategies</div> </li> </ul> </div> <div class="module-footer"> <div class="progress-indicator">Not started yet</div> <div class="nav-buttons"> <button class="nav-button prev"> <span>←</span> Previous </button> <button class="nav-button next"> Next <span>→</span> </button> </div> </div> </div> <div class="module" id="advanced"> <div class="module-header"> <div class="module-icon advanced">🚀</div> <div> <h3 class="module-title">Advanced JavaScript</h3> <div class="module-desc">Master professional techniques</div> </div> </div> <div class="module-body"> <p>Dive into advanced JavaScript patterns that professional developers use daily.</p> <ul class="point-list"> <li class="point-item"> <div class="point-icon">↪</div> <div>Design patterns: Module, Factory, Observer, and more</div> </li> <li class="point-item"> <div class="point-icon">↪</div> <div>Working with APIs, fetch, and modern data handling</div> </li> <li class="point-item"> <div class="point-icon">↪</div> <div>Performance optimization and memory management</div> </li> <li class="point-item"> <div class="point-icon">↪</div> <div>Testing your JavaScript code with Jest</div> </li> </ul> </div> <div class="module-footer"> <div class="progress-indicator">Locked - Complete previous modules</div> <div class="nav-buttons"> <button class="nav-button prev"> <span>←</span> Previous </button> <button class="nav-button next"> Next <span>→</span> </button> </div> </div> </div> <div class="module" id="project"> <div class="module-header"> <div class="module-icon project">🔨</div> <div> <h3 class="module-title">Capstone Project</h3> <div class="module-desc">Apply everything you've learned</div> </div> </div> <div class="module-body"> <p>Build a real-world application that demonstrates your JavaScript mastery.</p> <div class="requirement-list"> <div class="requirement-item"> <div class="requirement-icon">✓</div> <div>Create an interactive web application with vanilla JavaScript</div> </div> <div class="requirement-item"> <div class="requirement-icon">✓</div> <div>Implement ES6+ features and advanced patterns</div> </div> <div class="requirement-item"> <div class="requirement-icon">✓</div> <div>Work with APIs and asynchronous data</div> </div> <div class="requirement-item"> <div class="requirement-icon">✓</div> <div>Write clean, optimized and well-documented code</div> </div> </div> <div class="feedback-item"> <div class="feedback-header"> <div class="feedback-avatar">MJ</div> <div class="feedback-info"> <div class="feedback-name">Mentor Feedback</div> <div class="feedback-role">Maria Johnson, Sr. JavaScript Developer</div> </div> <div class="feedback-rating"> <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span> </div> </div> <div class="feedback-text"> "Once you complete this project, you'll have a solid foundation that will make future JavaScript frameworks much easier to learn!" </div> </div> </div> <div class="module-footer"> <div class="progress-indicator">Locked - Complete previous modules</div> <div class="nav-buttons"> <button class="nav-button prev"> <span>←</span> Previous </button> <button class="nav-button next"> Next <span>→</span> </button> </div> </div> </div> <div class="module" id="certificate"> <div class="module-header"> <div class="module-icon certificate">🏆</div> <div> <h3 class="module-title">Course Completion</h3> <div class="module-desc">Receive your JavaScript certification</div> </div> </div> <div class="module-body"> <div class="certificate-preview"> <div class="certificate-image"> <div class="certificate-logo">🏅</div> <div class="certificate-title">MODERN JAVASCRIPT MASTERY</div> <div style="font-size: 0.7rem; opacity: 0.7;">Presented to Alex Chen</div> </div> </div> <p style="text-align: center; font-size: 0.9rem;">Congratulations on completing the Modern JavaScript Fundamentals course! Your certificate will be available for download and sharing.</p> <div class="achievement"> <div class="achievement-icon">🎉</div> <div class="achievement
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Booking Breadcrumbs</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap'); :root { --primary-color: #2A7FFF; --secondary-color: #FF6B6B; --accent-color: #FFD166; --dark-blue: #1A3A5F; --light-color: #F8F9FA; --text-color: #2D3748; --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); --gradient-primary: linear-gradient(135deg, #2A7FFF 0%, #06D6A0 100%); --gradient-secondary: linear-gradient(135deg, #FF6B6B 0%, #FFD166 100%); --gradient-accent: linear-gradient(135deg, #06D6A0 0%, #2A7FFF 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: var(--light-color); color: var(--text-color); line-height: 1.6; height: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .app-container { width: 100%; height: 100%; max-width: 700px; max-height: 700px; overflow-y: auto; padding: 20px; background-color: white; border-radius: 16px; box-shadow: var(--box-shadow); } .header { margin-bottom: 20px; } .header h1 { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--dark-blue); margin-bottom: 5px; } .header p { font-size: 14px; color: #6B7280; } .breadcrumb-container { position: relative; margin: 40px 0; } .breadcrumb-path { display: flex; justify-content: space-between; position: relative; z-index: 1; } .breadcrumb-line { position: absolute; top: 30px; left: 0; width: 100%; height: 4px; background: #E2E8F0; z-index: 0; } .breadcrumb-progress { position: absolute; top: 30px; left: 0; height: 4px; background: var(--gradient-primary); transition: width 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 1; border-radius: 2px; } .breadcrumb-step { display: flex; flex-direction: column; align-items: center; position: relative; width: 60px; cursor: pointer; z-index: 2; } .breadcrumb-dot { width: 30px; height: 30px; border-radius: 50%; background: white; border: 3px solid #E2E8F0; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } .breadcrumb-dot i { opacity: 0; color: white; font-size: 12px; transition: opacity 0.3s ease; } .breadcrumb-label { margin-top: 15px; font-size: 12px; font-weight: 600; text-align: center; color: #6B7280; transition: all 0.3s ease; width: 90px; } .breadcrumb-step.active .breadcrumb-dot { background: var(--primary-color); border-color: var(--primary-color); transform: scale(1.2); } .breadcrumb-step.active .breadcrumb-dot i { opacity: 1; } .breadcrumb-step.active .breadcrumb-label { color: var(--primary-color); font-weight: 700; } .breadcrumb-step.completed .breadcrumb-dot { background: var(--primary-color); border-color: var(--primary-color); } .breadcrumb-step.completed .breadcrumb-dot i { opacity: 1; } .breadcrumb-step:hover .breadcrumb-dot { transform: scale(1.1); box-shadow: 0 4px 12px rgba(42, 127, 255, 0.25); } .breadcrumb-step:not(.active):not(.completed):hover .breadcrumb-dot { border-color: #CBD5E0; } .breadcrumb-tooltip { position: absolute; top: -50px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--dark-blue); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; opacity: 0; visibility: hidden; transition: all 0.3s ease; white-space: nowrap; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); pointer-events: none; } .breadcrumb-tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--dark-blue); } .breadcrumb-step:hover .breadcrumb-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .content-wrapper { position: relative; height: 400px; overflow: hidden; border-radius: 12px; margin-top: 20px; } .content-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 25px; background: white; opacity: 0; transform: translateX(50px); transition: all 0.5s ease; border-radius: 12px; box-shadow: var(--box-shadow); display: flex; flex-direction: column; } .content-slide.active { opacity: 1; transform: translateX(0); } .destination-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px; } .destination-card { position: relative; height: 150px; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .destination-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .destination-card:hover img { transform: scale(1.1); } .destination-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); color: white; } .destination-name { font-weight: 600; font-size: 16px; margin-bottom: 3px; } .destination-info { font-size: 12px; opacity: 0.9; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--dark-blue); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #E2E8F0; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 14px; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(42, 127, 255, 0.1); } .date-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .travelers-select { display: flex; justify-content: space-between; margin-top: 15px; } .traveler-type { display: flex; align-items: center; margin-bottom: 10px; } .traveler-type span { flex: 1; font-size: 14px; } .counter { display: flex; align-items: center; } .counter-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; border: none; border-radius: 50%; cursor: pointer; font-size: 16px; transition: all 0.2s ease; } .counter-btn:hover { background: var(--primary-color); color: white; } .counter-value { padding: 0 12px; font-weight: 600; } .accommodation-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .accommodation-option { padding: 10px 15px; background: #F1F5F9; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .accommodation-option:hover { background: rgba(42, 127, 255, 0.1); } .accommodation-option.selected { background: var(--primary-color); color: white; } .confirmation-details { background: #F8FAFC; border-radius: 10px; padding: 20px; margin-top: 20px; } .confirmation-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #E2E8F0; } .confirmation-item:last-child { border-bottom: none; } .confirmation-label { font-weight: 500; color: #64748B; } .confirmation-value { font-weight: 600; color: var(--dark-blue); } .total-price { margin-top: 20px; padding: 15px; background: var(--dark-blue); color: white; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; } .total-price-label { font-size: 14px; } .total-price-value { font-size: 20px; font-weight: 700; } .navigation-buttons { display: flex; justify-content: space-between; margin-top: 30px; } .btn { padding: 12px 24px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; border: none; display: flex; align-items: center; gap: 8px; } .btn-primary { background: var(--gradient-primary); color: white; box-shadow: 0 4px 15px rgba(42, 127, 255, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(42, 127, 255, 0.35); } .btn-secondary { background: transparent; color: var(--text-color); border: 1px solid #E2E8F0; } .btn-secondary:hover { background: #F8FAFC; } .btn-success { background: var(--gradient-accent); color: white; box-shadow: 0 4px 15px rgba(6, 214, 160, 0.25); } .btn-success:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(6, 214, 160, 0.35); } .success-animation { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 20px; } .checkmark { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #06D6A0, #2A7FFF); position: relative; animation: scaleIn 0.5s ease forwards; transform: scale(0); } .checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: white; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scaleIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } .success-message { text-align: center; } .success-message h2 { color: var(--dark-blue); margin-bottom: 10px; } .success-message p { color: #64748B; max-width: 300px; margin: 0 auto; } .confetti { position: absolute; width: 10px; height: 10px; background-color: #f2d74e; opacity: 0; } @media (max-width: 500px) { .app-container { padding: 15px; } .header h1 { font-size: 24px; } .breadcrumb-label { font-size: 10px; width: 70px; } .destination-grid { grid-template-columns: 1fr; } .date-inputs { grid-template-columns: 1fr; } .btn { padding: 10px 18px; font-size: 13px; } } </style> </head> <body> <div class="app-container"> <div class="header"> <h1>ExploreWander</h1> <p>Turn your travel dreams into unforgettable journeys</p> </div> <div class="breadcrumb-container"> <div class="breadcrumb-line"></div> <div class="breadcrumb-progress" id="breadcrumb-progress"></div> <div class="breadcrumb-path"> <div class="breadcrumb-step active" data-step="1"> <div class="breadcrumb-dot"> <i class="fas fa-check">✓</i> </div> <div class="breadcrumb-label">Destination</div> <div class="breadcrumb-tooltip">Choose your dream destination</div> </div> <div class="breadcrumb-step" data-step="2"> <div class="breadcrumb-dot"> <i class="fas fa-check">✓</i> </div> <div class="breadcrumb-label">Dates & Travelers</div> <div class="breadcrumb-tooltip">Select your travel dates</div> </div> <div class="breadcrumb-step" data-step="3"> <div class="breadcrumb-dot"> <i class="fas fa-check">✓</i> </div> <div class="breadcrumb-label">Accommodation</div> <div class="breadcrumb-tooltip">Find your perfect stay</div> </div> <div class="breadcrumb-step" data-step="4"> <div class="breadcrumb-dot"> <i class="fas fa-check">✓</i> </div> <div class="breadcrumb-label">Review & Book</div> <div class="breadcrumb-tooltip">Confirm your adventure</div> </div> </div> </div> <div class="content-wrapper"> <!-- Step 1: Destination --> <div class="content-slide active" id="step-1"> <h2>Where to next?</h2> <p>Select your destination from our curated collection</p> <div class="destination-grid"> <div class="destination-card" data-destination="Kyoto"> <img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Kyoto, Japan"> <div class="destination-overlay"> <div class="destination-name">Kyoto, Japan</div> <div class="destination-info">Ancient temples & gardens</div> </div> </div> <div class="destination-card" data-destination="Santorini"> <img src="https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Santorini, Greece"> <div class="destination-overlay"> <div class="destination-name">Santorini, Greece</div> <div class="destination-info">Iconic white & blue vistas</div> </div> </div> <div class="destination-card" data-destination="Patagonia"> <img src="https://images.unsplash.com/photo-1551887335-805350b9a413?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Patagonia, Chile"> <div class="destination-overlay"> <div class="destination-name">Patagonia, Chile</div> <div class="destination-info">Breathtaking landscapes</div> </div> </div> <div class="destination-card" data-destination="Bali"> <img src="https://images.unsplash.com/photo-1573790387438-4da905039392?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Bali, Indonesia"> <div class="destination-overlay"> <div class="destination-name">Bali, Indonesia</div> <div class="destination-info">Cultural paradise</div> </div> </div> </div> </div> <!-- Step 2: Dates & Travelers --> <div class="content-slide" id="step-2"> <h2>When are you traveling?</h2> <p>Select your dates and number of travelers</p> <div class="form-group"> <label>Travel Dates</label> <div class="date-inputs"> <input type="date" class="form-control" id="departure-date" min="2023-10-01"> <input type="date" class="form-control" id="return-date" min="2023-10-01"> </div> </div> <div class="form-group"> <label>Travelers</label> <div class="travelers-select"> <div> <div class="traveler-type"> <span>Adults</span> <div class="counter"> <button class="counter-btn decrease-btn" data-type="adults">-</button> <span class="counter-value" id="adults-count">2</span> <button class="counter-btn increase-btn" data-type="adults">+</button> </div> </div> <div class="traveler-type"> <span>Children</span> <div class="counter"> <button class="counter-btn decrease-btn" data-type="children">-</button> <span class="counter-value" id="children-count">0</span> <button class="counter-btn increase-btn" data-type="children">+</button> </div> </div> </div> </div> </div> </div> <!-- Step 3: Accommodation --> <div class="content-slide" id="step-3"> <h2>Where would you like to stay?</h2> <p>Choose your preferred accommodation type</p> <div class="form-group"> <label>Accommodation Type</label> <div class="accommodation-options"> <div class="accommodation-option" data-type="hotel">Hotel</div> <div class="accommodation-option" data-type="resort">Resort</div> <div class="accommodation-option" data-type="villa">Villa</div> <div class="accommodation-option" data-type="apartment">Apartment</div> <div class="accommodation-option" data-type="hostel">Hostel</div> </div> </div> <div class="form-group"> <label>Room Preference</label> <select class="form-control" id="room-preference"> <option value="standard">Standard Room</option> <option value="deluxe">Deluxe Room</option> <option value="suite">Suite</option> <option value="family">Family Room</option> </select> </div> <div class="form-group"> <label>Special Requests</label> <textarea class="form-control" id="special-requests" rows="3" placeholder="Any special preferences or needs..."></textarea> </div> </div> <!-- Step 4: Review & Book --> <div class="content-slide" id="step-4"> <h2>Review Your Journey</h2> <p>Check your travel details before confirming</p> <div class="confirmation-details"> <div class="confirmation-item"> <span class="confirmation-label">Destination:</span> <span class="confirmation-value" id="confirm-destination">Kyoto, Japan</span> </div> <div class="confirmation-item"> <span class="confirmation-label">Travel Dates:</span> <span class="confirmation-value" id="confirm-dates">Oct 15 - Oct 25, 2023</span> </div> <div class="confirmation-item"> <span class="confirmation-label">Travelers:</span> <span class="confirmation-value" id="confirm-travelers">2 Adults, 0 Children</span> </div> <div class="confirmation-item"> <span class="confirmation-label">Accommodation:</span> <span class="confirmation-value" id="confirm-accommodation">Hotel - Deluxe Room</span> </div> </div> <div class="total-price"> <span class="total-price-label">Total Price:</span> <span class="total-price-value" id="total-price">$2,450</span> </div> </div> <!-- Step 5: Success --> <div class="content-slide" id="step-5"> <div class="success-animation"> <div class="checkmark"> <svg class="checkmark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/> <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> </svg> </div> <div class="success-message"> <h2>Booking Confirmed!</h2> <p>Get ready for your adventure to Kyoto, Japan. Check your email for your booking details.</p> </div> </div> </div> </div> <div class="navigation-buttons"> <button class="btn btn-secondary" id="back-btn" style="display: none;"> <span>Back</span> </button> <button class="btn btn-primary" id="next-btn"> <span>Next</span> </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Variables const breadcrumbSteps = document.querySelectorAll('.breadcrumb-step'); const contentSlides = document.querySelectorAll('.content-slide'); const progressBar = document.getElementById('breadcrumb-progress'); const nextBtn = document.getElementById('next-btn'); const backBtn = document.getElementById('back-btn'); let currentStep = 1; let totalSteps = breadcrumbSteps.length; let selectedDestination = ''; let selectedAccommodationType = ''; // Initialize the progress bar updateProgressBar(); // Event Listeners nextBtn.addEventListener('click', goToNextStep); backBtn.addEventListener('click', goToPreviousStep); // Click on breadcrumb steps breadcrumbSteps.forEach(step => { step.addEventListener('click', function() { const stepNumber = parseInt(this.dataset.step); // Only allow clicking on completed steps or the next available step if (stepNumber <= currentStep) { goToStep(stepNumber); } }); }); // Destination cards selection const destinationCards = document.querySelectorAll('.destination-card'); destinationCards.forEach(card => { card.addEventListener('click', function() { destinationCards.forEach(c => c.style.opacity = '0.6'); this.style.opacity = '1'; selectedDestination = this.dataset.destination; document.getElementById('confirm-destination').textContent = this.querySelector('.destination-name').textContent; nextBtn.removeAttribute('disabled'); }); }); // Counter buttons for travelers const increaseButtons = document.querySelectorAll('.increase-btn'); const decreaseButtons = document.querySelectorAll('.decrease-btn'); increaseButtons.forEach(btn => { btn.addEventListener('click', function() { const type = this.dataset.type; const countElement = document.getElementById(`${type}-count`); let count = parseInt(countElement.textContent); countElement.textContent = ++count; updateTravelersConfirmation(); }); }); decreaseButtons.forEach(btn => { btn.addEventListener('click', function() { const type = this.dataset.type; const countElement = document.getElementById(`${type}-count`); let count = parseInt(countElement.textContent); if (count > 0) { countElement.textContent = --count; updateTravelersConfirmation(); } }); }); // Accommodation options selection const accommodationOptions = document.querySelectorAll('.accommodation-option'); accommodationOptions.forEach(option => { option.addEventListener('click', function() { accommodationOptions.forEach(o => o.classList.remove('selected')); this.classList.add('selected'); selectedAccommodationType = this.dataset.type; updateAccommodationConfirmation(); }); }); // Date inputs handling const departureDate = document.getElementById('departure-date'); const returnDate = document.getElementById('return-date'); departureDate.addEventListener('change', function() { // Set minimum return date to departure date returnDate.min = this.value; if (returnDate.value && returnDate.value < this.value) { returnDate.value = this.value; } updateDatesConfirmation(); }); returnDate.addEventListener('change', function() { updateDatesConfirmation(); }); // Room preference handling const roomPreference = document.getElementById('room-preference'); roomPreference.addEventListener('change', function() { updateAccommodationConfirmation(); }); // Functions function goToNextStep() { if (currentStep < totalSteps) { goToStep(currentStep + 1); } else if (currentStep === totalSteps) { // Book button clicked on final step completeBooking(); } } function goToPreviousStep() { if (currentStep > 1) { goToStep(currentStep - 1); } } function goToStep(step) { // Update breadcrumb steps breadcrumbSteps.forEach(s => { const stepNum = parseInt(s.dataset.step); s.classList.remove('active'); if (stepNum < step) { s.classList.add('completed'); } else if (stepNum === step) { s.classList.add('active'); } else { s.classList.remove('completed'); } }); // Update content slides contentSlides.forEach(slide => { slide.classList.remove('active'); }); document.getElementById(`step-${step}`).classList.add('active'); // Update current step currentStep = step; // Update progress bar updateProgressBar(); // Update navigation buttons updateNavigationButtons(); } function updateProgressBar() { const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100; progressBar.style.width = `${progressPercentage}%`; } function updateNavigationButtons() { if (currentStep === 1) { backBtn.style.display = 'none'; } else { backBtn.style.display = 'flex'; } if (currentStep === totalSteps) { nextBtn.querySelector('span').textContent = 'Book Now'; nextBtn.classList.add('btn-success'); } else { nextBtn.querySelector('span').textContent = 'Next'; nextBtn.classList.remove('btn-success'); } } function updateTravelersConfirmation() { const adults = document.getElementById('adults-count').textContent; const children = document.getElementById('children-count').textContent; document.getElementById('confirm-travelers').textContent = `${adults} Adult${adults !== '1' ? 's' : ''}, ${children} Child${children !== '1' ? 'ren' : ''}`; } function updateDatesConfirmation() { if (departureDate.value && returnDate.value) { const depDate = new Date(departureDate.value); const retDate = new Date(returnDate.value); const options = { month: 'short', day: 'numeric', year: 'numeric' }; document.getElementById('confirm-dates').textContent = `${depDate.toLocaleDateString('en-US', options)} - ${retDate.toLocaleDateString('en-US', options)}`; } } function updateAccommodationConfirmation() { if (selectedAccommodationType) { const roomType = roomPreference.options[roomPreference.selectedIndex].text; document.getElementById('confirm-accommodation').textContent = `${selectedAccommodationType.charAt(0).toUpperCase() + selectedAccommodationType.slice(1)} - ${roomType}`; } } function completeBooking() { goToStep(5); nextBtn.style.display = 'none'; backBtn.style.display = 'none'; createConfetti(); } function createConfetti() { const confettiContainer = document.querySelector('.content-wrapper'); const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590']; for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.left = Math.random() * 100 + '%'; confetti.style.top = '-10px'; confetti.style.transform = `rotate(${Math.random() * 360}deg)`; confettiContainer.appendChild(confetti); const animationDuration = Math.random() * 3 + 2; confetti.animate([ { top: '-10px', opacity: 1, transform: `rotate(0deg) translateX(0px)` }, { top: '100%', opacity: 0, transform: `rotate(${Math.random() * 360 * 2}deg) translateX(${Math.random() * 100 - 50}px)` } ], { duration: animationDuration * 1000, easing: 'cubic-bezier(.37,1.04,.68,.98)', fill: 'forwards' }); setTimeout(() => { confetti.remove(); }, animationDuration * 1000); } } // Set default date values (current date + 1 week) const today = new Date(); const nextWeek = new Date(today); nextWeek.setDate(today.getDate() + 7); departureDate.valueAsDate = today; returnDate.valueAsDate = nextWeek; updateDatesConfirmation(); updateTravelersConfirmation(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Healthcare Portal Breadcrumbs</title> <style> :root { --primary: #4a90e2; --secondary: #e6f0fd; --accent: #70c1b3; --text-dark: #2c3e50; --text-light: #7f8c8d; --background: #f9f9f9; --hover: #3a7bc8; --white: #ffffff; --shadow: rgba(0, 0, 0, 0.08); --transition: all 0.3s ease; /* Pastel colors for breadcrumbs */ --pastel-blue: #d4e6f9; --pastel-green: #d4f9e6; --pastel-purple: #e6d4f9; --pastel-orange: #f9e6d4; --pastel-pink: #f9d4e6; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background); color: var(--text-dark); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 2rem 1rem; } .container { width: 100%; max-width: 700px; margin: 0 auto; background-color: var(--white); border-radius: 12px; box-shadow: 0 4px 20px var(--shadow); overflow: hidden; } header { background-color: var(--primary); padding: 1.5rem; color: var(--white); position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: -20px; right: -20px; width: 120px; height: 120px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; } header::after { content: ''; position: absolute; bottom: -30px; left: 30px; width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.08); border-radius: 50%; } h1 { font-size: 1.75rem; position: relative; z-index: 1; margin-bottom: 0.5rem; } .subtitle { font-size: 0.95rem; opacity: 0.9; position: relative; z-index: 1; } main { padding: 2rem 1.5rem; } h2 { margin-bottom: 1.5rem; font-size: 1.3rem; color: var(--text-dark); position: relative; display: inline-block; } h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 50%; height: 3px; background-color: var(--accent); border-radius: 10px; } /* Breadcrumb styles */ .breadcrumb-examples { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.5rem; } .breadcrumb-section { padding: 1.5rem; border-radius: 10px; background-color: var(--white); box-shadow: 0 2px 12px var(--shadow); transition: var(--transition); } .breadcrumb-section:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--shadow); } .breadcrumb-title { font-size: 1rem; margin-bottom: 1rem; color: var(--text-dark); display: flex; align-items: center; gap: 0.5rem; } .breadcrumb-title svg { width: 20px; height: 20px; } /* Static breadcrumb styles */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; } .breadcrumb-item { display: flex; align-items: center; font-size: 0.95rem; font-weight: 500; } .breadcrumb-item:not(:last-child)::after { content: '›'; margin-left: 0.5rem; color: var(--text-light); } .breadcrumb-item a { text-decoration: none; color: var(--primary); position: relative; transition: var(--transition); padding: 0.3rem 0.6rem; border-radius: 4px; } .breadcrumb-item a:hover { color: var(--hover); background-color: var(--secondary); } .breadcrumb-item.active { color: var(--text-dark); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 4px; } /* Pastel breadcrumb styles */ .pastel-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; } .pastel-breadcrumb-item { display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 500; padding: 0.4rem 1rem; position: relative; margin-right: 1.5rem; border-radius: 4px; } .pastel-breadcrumb-item::after { content: ''; position: absolute; right: -0.8rem; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; border-top: 2px solid var(--text-light); border-right: 2px solid var(--text-light); transform: translateY(-50%) rotate(45deg); opacity: 0.7; } .pastel-breadcrumb-item:last-child::after { display: none; } .pastel-breadcrumb-item:nth-child(1) { background-color: var(--pastel-blue); } .pastel-breadcrumb-item:nth-child(2) { background-color: var(--pastel-green); } .pastel-breadcrumb-item:nth-child(3) { background-color: var(--pastel-purple); } .pastel-breadcrumb-item:nth-child(4) { background-color: var(--pastel-orange); } .pastel-breadcrumb-item:nth-child(5) { background-color: var(--pastel-pink); } .pastel-breadcrumb-item a { text-decoration: none; color: var(--text-dark); transition: var(--transition); } .pastel-breadcrumb-item a:hover { color: var(--primary); } .pastel-breadcrumb-item.active { font-weight: 600; } /* Interactive breadcrumb */ .interactive-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; } .interactive-breadcrumb-item { display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 500; background-color: var(--white); padding: 0.5rem 1rem; margin-right: 2px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; z-index: 1; } .interactive-breadcrumb-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); z-index: 2; } .interactive-breadcrumb-item a { text-decoration: none; color: var(--text-dark); display: flex; align-items: center; gap: 0.5rem; } .interactive-breadcrumb-item a:hover { color: var(--primary); } .interactive-breadcrumb-item.active { background-color: var(--secondary); font-weight: 600; } .interactive-breadcrumb-item .icon { width: 18px; height: 18px; opacity: 0.7; } /* Responsive breadcrumb */ .responsive-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 1.2rem; } @media (max-width: 500px) { .responsive-breadcrumb { flex-direction: column; align-items: flex-start; } .responsive-breadcrumb-item { width: 100%; margin-bottom: 0.3rem; } .responsive-breadcrumb-item::after { content: '↓'; display: inline-block; margin-left: 0.5rem; transform: rotate(0deg); } .responsive-breadcrumb-item:last-child::after { display: none; } } .responsive-breadcrumb-item { display: flex; align-items: center; font-size: 0.9rem; font-weight: 500; } .responsive-breadcrumb-item::after { content: '›'; margin-left: 0.5rem; margin-right: 0.2rem; color: var(--text-light); } .responsive-breadcrumb-item:last-child::after { display: none; } .responsive-breadcrumb-item a { text-decoration: none; color: var(--primary); padding: 0.3rem 0.6rem; border-radius: 4px; transition: var(--transition); } .responsive-breadcrumb-item a:hover { background-color: var(--secondary); } .responsive-breadcrumb-item.active { color: var(--text-dark); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 4px; } /* Context info */ .context-info { background-color: var(--secondary); padding: 1rem; border-radius: 8px; font-size: 0.9rem; margin-top: 1rem; color: var(--text-dark); position: relative; padding-left: 2.5rem; } .context-info::before { content: 'i'; position: absolute; left: 1rem; top: 1rem; width: 20px; height: 20px; background-color: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-style: italic; } /* Switch toggle */ .toggle-section { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding: 1rem; background-color: var(--white); border-radius: 8px; box-shadow: 0 2px 12px var(--shadow); } .toggle-label { font-size: 0.9rem; font-weight: 500; } .toggle-wrapper { position: relative; display: inline-block; width: 50px; height: 24px; } .toggle-input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: var(--transition); border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: var(--transition); border-radius: 50%; } .toggle-input:checked + .toggle-slider { background-color: var(--primary); } .toggle-input:checked + .toggle-slider:before { transform: translateX(26px); } .toggle-input:focus + .toggle-slider { box-shadow: 0 0 1px var(--primary); } /* Footer */ footer { margin-top: 2rem; text-align: center; padding: 1.5rem; font-size: 0.85rem; color: var(--text-light); border-top: 1px solid rgba(0, 0, 0, 0.05); } .animated-dot { display: inline-block; width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; margin: 0 3px; animation: pulse 1.5s infinite; } .animated-dot:nth-child(2) { animation-delay: 0.3s; } .animated-dot:nth-child(3) { animation-delay: 0.6s; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* General responsiveness */ @media (max-width: 600px) { header { padding: 1rem; } h1 { font-size: 1.5rem; } main { padding: 1.5rem 1rem; } .breadcrumb-section { padding: 1rem; } } </style> </head> <body> <div class="container"> <header> <h1>Northside Medical Center</h1> <p class="subtitle">Patient Portal Navigation System</p> </header> <main> <h2>Breadcrumb Navigation Examples</h2> <div class="breadcrumb-examples"> <div class="breadcrumb-section"> <h3 class="breadcrumb-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Standard High-Contrast Breadcrumbs </h3> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Patient Portal</a></li> <li class="breadcrumb-item"><a href="#">Medical Records</a></li> <li class="breadcrumb-item"><a href="#">Test Results</a></li> <li class="breadcrumb-item active">Blood Work</li> </ol> </nav> <div class="context-info"> Standard breadcrumbs with high contrast for improved readability. Uses chevrons as separators and highlights the current page. </div> </div> <div class="breadcrumb-section"> <h3 class="breadcrumb-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="9" y1="21" x2="9" y2="9"></line> </svg> Pastel Background Breadcrumbs </h3> <nav aria-label="breadcrumb"> <ol class="pastel-breadcrumb"> <li class="pastel-breadcrumb-item"><a href="#">Home</a></li> <li class="pastel-breadcrumb-item"><a href="#">My Health</a></li> <li class="pastel-breadcrumb-item"><a href="#">Appointments</a></li> <li class="pastel-breadcrumb-item active">Schedule Visit</li> </ol> </nav> <div class="context-info"> Muted pastel backgrounds improve visual boundaries while maintaining WCAG AA contrast compliance. Arrow separators enhance directional guidance. </div> </div> <div class="breadcrumb-section"> <h3 class="breadcrumb-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Interactive Breadcrumbs with Icons </h3> <nav aria-label="breadcrumb"> <ol class="interactive-breadcrumb"> <li class="interactive-breadcrumb-item"> <a href="#"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> Dashboard </a> </li> <li class="interactive-breadcrumb-item"> <a href="#"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> Profile </a> </li> <li class="interactive-breadcrumb-item"> <a href="#"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path> <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path> </svg> Medical History </a> </li> <li class="interactive-breadcrumb-item active"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path> <path d="M8 10h8"></path> <path d="M8 14h4"></path> </svg> Allergy Information </li> </ol> </nav> <div class="context-info"> Elevated breadcrumbs with icon support improve recognition for users with cognitive impairments. Hover effects provide subtle feedback. </div> </div> <div class="breadcrumb-section"> <h3 class="breadcrumb-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> <line x1="8" y1="21" x2="16" y2="21"></line> <line x1="12" y1="17" x2="12" y2="21"></line> </svg> Responsive Collapsing Breadcrumbs </h3> <nav aria-label="breadcrumb"> <ol class="responsive-breadcrumb"> <li class="responsive-breadcrumb-item"><a href="#">Portal</a></li> <li class="responsive-breadcrumb-item"><a href="#">Medications</a></li> <li class="responsive-breadcrumb-item"><a href="#">Prescriptions</a></li> <li class="responsive-breadcrumb-item active">Refill Request</li> </ol> </nav> <div class="context-info"> Adapts to smaller screens by transforming into a vertical layout. Maintains context and navigability on mobile devices without losing information. </div> </div> <div class="toggle-section"> <span class="toggle-label">High Contrast Mode</span> <label class="toggle-wrapper"> <input type="checkbox" class="toggle-input" id="contrastToggle"> <span class="toggle-slider"></span> </label> </div> </div> </main> <footer> Northside Medical Center Patient Portal <div class="animated-dots"> <span class="animated-dot"></span> <span class="animated-dot"></span> <span class="animated-dot"></span> </div> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // High contrast toggle functionality const contrastToggle = document.getElementById('contrastToggle'); const container = document.querySelector('.container'); contrastToggle.addEventListener('change', function() { if (this.checked) { document.documentElement.style.setProperty('--text-dark', '#000000'); document.documentElement.style.setProperty('--background', '#ffffff'); document.documentElement.style.setProperty('--primary', '#0056b3'); document.documentElement.style.setProperty('--secondary', '#e1f0ff'); // Increase contrast for all breadcrumb items const breadcrumbItems = document.querySelectorAll('.breadcrumb-item a, .pastel-breadcrumb-item a, .interactive-breadcrumb-item a, .responsive-breadcrumb-item a'); breadcrumbItems.forEach(item => { item.style.color = '#0056b3'; item.style.fontWeight = '600'; }); // Add border to pastel breadcrumbs for better visibility const pastelItems = document.querySelectorAll('.pastel-breadcrumb-item'); pastelItems.forEach(item => { item.style.border = '1px solid rgba(0,0,0,0.2)'; }); } else { // Reset to default styles document.documentElement.style.setProperty('--text-dark', '#2c3e50'); document.documentElement.style.setProperty('--background', '#f9f9f9'); document.documentElement.style.setProperty('--primary', '#4a90e2'); document.documentElement.style.setProperty('--secondary', '#e6f0fd'); const breadcrumbItems = document.querySelectorAll('.breadcrumb-item a, .pastel-breadcrumb-item a, .interactive-breadcrumb-item a, .responsive-breadcrumb-item a'); breadcrumbItems.forEach(item => { item.style.color = ''; item.style.fontWeight = ''; }); const pastelItems = document.querySelectorAll('.pastel-breadcrumb-item'); pastelItems.forEach(item => { item.style.border = 'none'; }); } }); // Add subtle animation to all breadcrumb sections on initialization const sections = document.querySelectorAll('.breadcrumb-section'); sections.forEach((section, index) => { section.style.opacity = '0'; section.style.transform = 'translateY(20px)'; setTimeout(() => { section.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; section.style.opacity = '1'; section.style.transform = 'translateY(0)'; }, 100 * (index + 1)); }); // Make breadcrumb items interactive (prevent default on links) const breadcrumbLinks = document.querySelectorAll('.breadcrumb a, .pastel-breadcrumb a, .interactive-breadcrumb a, .responsive-breadcrumb a'); breadcrumbLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Show a visual feedback this.style.transition = 'all 0.2s ease'; this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); }); }); // Add tooltip functionality to interactive breadcrumbs const interactiveItems = document.querySelectorAll('.interactive-breadcrumb-item'); interactiveItems.forEach(item => { const originalText = item.innerHTML; item.addEventListener('mouseenter', function() { const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.style.position = 'absolute'; tooltip.style.bottom = '100%'; tooltip.style.left = '50%'; tooltip.style.transform = 'translateX(-50%)'; tooltip.style.backgroundColor = 'rgba(0,0,0,0.8)'; tooltip.style.color = 'white'; tooltip.style.padding = '5px 10px'; tooltip.style.borderRadius = '4px'; tooltip.style.fontSize = '12px'; tooltip.style.whiteSpace = 'nowrap'; tooltip.style.zIndex = '1000'; tooltip.style.opacity = '0'; tooltip.style.transition = 'opacity 0.3s ease'; if (item.classList.contains('active')) { tooltip.textContent = 'Current Page'; } else { tooltip.textContent = 'Navigate to this section'; } item.style.position = 'relative'; item.appendChild(tooltip); setTimeout(() => { tooltip.style.opacity = '1'; }, 10); }); item.addEventListener('mouseleave', function() { const tooltip = item.querySelector('.tooltip'); if (tooltip) { tooltip.style.opacity = '0'; setTimeout(() => { tooltip.remove(); }, 300); } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Financial Dashboard Breadcrumbs</title> <style> :root { --bg-primary: #121212; --bg-card: #1e1e1e; --bg-accent: #2a2a2a; --text-primary: #ffffff; --text-secondary: #a0a0a0; --accent-blue: #0f7cd6; --accent-green: #00c875; --accent-orange: #ff7d00; --accent-red: #e63946; --breadcrumb-height: 60px; --border-radius: 8px; --transition-standard: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--bg-primary); color: var(--text-primary); height: 100%; overflow: hidden; display: flex; flex-direction: column; position: relative; } .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 20px; height: 700px; display: flex; flex-direction: column; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .dashboard-title { font-size: 24px; font-weight: 600; } .dashboard-subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 5px; } .user-profile { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--accent-blue); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-primary); } .breadcrumb-container { background-color: var(--bg-card); border-radius: var(--border-radius); padding: 20px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .breadcrumb-nav { display: flex; height: var(--breadcrumb-height); position: relative; z-index: 1; } .breadcrumb-step { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: var(--transition-standard); } .breadcrumb-step::before { content: ''; position: absolute; top: 50%; width: 100%; height: 2px; background-color: var(--text-secondary); z-index: -1; } .breadcrumb-step:first-child::before { width: 50%; right: 0; } .breadcrumb-step:last-child::before { width: 50%; left: 0; } .step-indicator { width: 30px; height: 30px; border-radius: 50%; background-color: var(--bg-accent); border: 2px solid var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; z-index: 2; transition: var(--transition-standard); } .step-active .step-indicator { background-color: var(--accent-blue); border-color: var(--accent-blue); transform: scale(1.1); box-shadow: 0 0 0 5px rgba(15, 124, 214, 0.2); } .step-complete .step-indicator { background-color: var(--accent-green); border-color: var(--accent-green); } .step-complete::before, .step-active::before { background-color: var(--accent-green); } .step-error .step-indicator { background-color: var(--accent-red); border-color: var(--accent-red); animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); } } .step-label { position: absolute; bottom: -25px; text-align: center; font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: var(--transition-standard); width: 100%; } .step-active .step-label { color: var(--text-primary); font-weight: 600; } .step-detail { position: absolute; top: 15px; left: 50%; transform: translateX(-50%) translateY(-50px); background-color: var(--bg-accent); border-radius: var(--border-radius); padding: 8px 14px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: var(--transition-standard); box-shadow: var(--shadow-soft); z-index: 10; } .step-detail::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: var(--bg-accent) transparent transparent transparent; } .breadcrumb-step:hover .step-detail { opacity: 1; transform: translateX(-50%) translateY(0); } .context-data { display: flex; margin-top: 50px; position: relative; overflow: hidden; } .data-panel { flex: 1; display: none; flex-direction: column; gap: 15px; animation: fadeIn 0.4s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .data-panel.active { display: flex; } .data-card { background-color: var(--bg-accent); border-radius: var(--border-radius); padding: 15px; transition: var(--transition-standard); } .data-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .data-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .data-card-title { font-size: 16px; font-weight: 600; } .data-card-subtitle { font-size: 12px; color: var(--text-secondary); } .data-value { font-size: 24px; font-weight: 700; margin: 5px 0; } .data-description { font-size: 12px; color: var(--text-secondary); } .data-tag { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; margin-top: 10px; } .tag-success { background-color: rgba(0, 200, 117, 0.2); color: var(--accent-green); } .tag-warning { background-color: rgba(255, 125, 0, 0.2); color: var(--accent-orange); } .tag-danger { background-color: rgba(230, 57, 70, 0.2); color: var(--accent-red); } .action-buttons { display: flex; gap: 10px; margin-top: 20px; } .action-button { padding: 10px 15px; border-radius: var(--border-radius); border: none; font-weight: 600; cursor: pointer; transition: var(--transition-standard); font-size: 14px; flex: 1; } .btn-primary { background-color: var(--accent-blue); color: var(--text-primary); } .btn-primary:hover { background-color: #0e69b6; transform: translateY(-2px); } .btn-secondary { background-color: var(--bg-accent); color: var(--text-primary); } .btn-secondary:hover { background-color: #3a3a3a; transform: translateY(-2px); } .notification-badge { position: absolute; top: 20px; right: 20px; background-color: var(--accent-green); color: var(--text-primary); border-radius: 20px; padding: 5px 10px; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(-10px); transition: var(--transition-standard); z-index: 100; } .notification-badge.show { opacity: 1; transform: translateY(0); } .breadcrumb-progress { position: absolute; bottom: 0; left: 0; height: 4px; background-color: var(--accent-blue); transition: width 0.5s ease-in-out; } .data-chart { width: 100%; height: 100px; margin-top: 10px; display: flex; align-items: flex-end; gap: 6px; } .chart-bar { flex: 1; background-color: var(--accent-blue); border-radius: 4px 4px 0 0; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Responsive styles */ @media (max-width: 600px) { .container { padding: 15px; } .breadcrumb-nav { height: auto; flex-direction: column; gap: 40px; } .breadcrumb-step::before { width: 2px; height: 100%; left: 50%; top: 0; } .breadcrumb-step:first-child::before { height: 50%; top: 50%; width: 2px; } .breadcrumb-step:last-child::before { height: 50%; bottom: 50%; top: auto; width: 2px; } .step-label { position: relative; bottom: auto; margin-top: 8px; } .data-panel { margin-top: 30px; } } /* Loading animation for real-time data */ .loading-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; background: var(--accent-blue); animation: loadingPulse 1.4s infinite ease-in-out both; } .loading-dot:nth-child(1) { animation-delay: -0.32s; } .loading-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes loadingPulse { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .financial-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px; } .summary-item { background-color: var(--bg-accent); border-radius: var(--border-radius); padding: 12px; display: flex; flex-direction: column; } .summary-label { font-size: 12px; color: var(--text-secondary); } .summary-value { font-size: 18px; font-weight: 600; margin-top: 5px; } .glow-effect { position: absolute; width: 100px; height: 100px; background: radial-gradient(circle, rgba(15, 124, 214, 0.2) 0%, rgba(15, 124, 214, 0) 70%); border-radius: 50%; pointer-events: none; z-index: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; } .crypto-ticker { background-color: var(--bg-accent); border-radius: var(--border-radius); margin-top: 15px; padding: 12px; overflow: hidden; position: relative; } .ticker-container { display: flex; animation: tickerScroll 20s linear infinite; } .ticker-item { display: flex; align-items: center; margin-right: 30px; white-space: nowrap; } .ticker-symbol { font-weight: 600; margin-right: 8px; } .ticker-price { color: var(--text-secondary); } .ticker-change { margin-left: 8px; font-size: 12px; } .change-up { color: var(--accent-green); } .change-down { color: var(--accent-red); } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } </style> </head> <body> <div class="container"> <div class="dashboard-header"> <div> <h1 class="dashboard-title">High-Stakes Finance</h1> <p class="dashboard-subtitle">Trade execution workflow</p> </div> <div class="user-profile"> <div class="user-avatar">SL</div> </div> </div> <div class="breadcrumb-container"> <div class="breadcrumb-nav"> <div class="breadcrumb-step step-complete" data-step="1"> <div class="step-indicator">✓</div> <div class="step-label">Account Verification</div> <div class="step-detail">Completed: May 12, 2023 · 09:45 AM</div> </div> <div class="breadcrumb-step step-complete" data-step="2"> <div class="step-indicator">✓</div> <div class="step-label">Position Selection</div> <div class="step-detail">TSLA Short · 125 contracts · $775.3K exposure</div> </div> <div class="breadcrumb-step step-active" data-step="3"> <div class="step-indicator">3</div> <div class="step-label">Risk Assessment</div> <div class="step-detail"> <span class="loading-dot"></span> <span class="loading-dot"></span> <span class="loading-dot"></span> Analyzing market conditions </div> </div> <div class="breadcrumb-step" data-step="4"> <div class="step-indicator">4</div> <div class="step-label">Execution</div> <div class="step-detail">Ready for market entry when approved</div> </div> <div class="breadcrumb-step" data-step="5"> <div class="step-indicator">5</div> <div class="step-label">Confirmation</div> <div class="step-detail">Transaction awaiting execution</div> </div> </div> <div class="breadcrumb-progress"></div> <div class="context-data"> <div class="data-panel" id="panel-1"> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Account Verification</div> <div class="data-card-subtitle">Identity & Funds Confirmation</div> </div> </div> <div class="data-value">Level 3 Clearance</div> <div class="data-description">Your account has been verified for high-volume trading with options and futures capabilities.</div> <span class="data-tag tag-success">Verified</span> </div> <div class="financial-summary"> <div class="summary-item"> <span class="summary-label">Available Margin</span> <span class="summary-value">$2.45M</span> </div> <div class="summary-item"> <span class="summary-label">Portfolio Value</span> <span class="summary-value">$5.87M</span> </div> </div> </div> <div class="data-panel" id="panel-2"> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Position Parameters</div> <div class="data-card-subtitle">Short Position - TSLA</div> </div> </div> <div class="data-value">125 Contracts</div> <div class="data-description">TSLA Jun 23 $180 Puts @ $62.90</div> <span class="data-tag tag-warning">High Liquidity Risk</span> </div> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Potential Outcomes</div> </div> </div> <div class="financial-summary"> <div class="summary-item"> <span class="summary-label">Max Profit</span> <span class="summary-value">$786.3K</span> </div> <div class="summary-item"> <span class="summary-label">Max Loss</span> <span class="summary-value">$1.24M</span> </div> </div> </div> </div> <div class="data-panel active" id="panel-3"> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Market Volatility</div> <div class="data-card-subtitle">Real-time Analysis</div> </div> </div> <div class="data-value">VIX: 28.45 <span style="font-size: 16px; color: var(--accent-red);">↑4.2%</span></div> <div class="data-description">Market volatility above historic average. Consider reducing position size.</div> <div class="data-chart"> <div class="chart-bar" style="height: 40%"></div> <div class="chart-bar" style="height: 60%"></div> <div class="chart-bar" style="height: 45%"></div> <div class="chart-bar" style="height: 80%"></div> <div class="chart-bar" style="height: 65%"></div> <div class="chart-bar" style="height: 70%"></div> <div class="chart-bar" style="height: 90%"></div> <div class="chart-bar" style="height: 75%"></div> </div> </div> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Risk Metrics</div> </div> </div> <div class="financial-summary"> <div class="summary-item"> <span class="summary-label">Risk/Reward Ratio</span> <span class="summary-value">1.58</span> </div> <div class="summary-item"> <span class="summary-label">Delta</span> <span class="summary-value">-0.65</span> </div> <div class="summary-item"> <span class="summary-label">Theta</span> <span class="summary-value">-$1,235/day</span> </div> <div class="summary-item"> <span class="summary-label">Portfolio VaR</span> <span class="summary-value">8.7%</span> </div> </div> </div> <div class="crypto-ticker"> <div class="ticker-container"> <div class="ticker-item"> <span class="ticker-symbol">BTC</span> <span class="ticker-price">$35,785.45</span> <span class="ticker-change change-up">+2.4%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">ETH</span> <span class="ticker-price">$1,895.32</span> <span class="ticker-change change-up">+1.8%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">XRP</span> <span class="ticker-price">$0.5721</span> <span class="ticker-change change-down">-0.6%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">SOL</span> <span class="ticker-price">$42.58</span> <span class="ticker-change change-up">+5.2%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">BTC</span> <span class="ticker-price">$35,785.45</span> <span class="ticker-change change-up">+2.4%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">ETH</span> <span class="ticker-price">$1,895.32</span> <span class="ticker-change change-up">+1.8%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">XRP</span> <span class="ticker-price">$0.5721</span> <span class="ticker-change change-down">-0.6%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">SOL</span> <span class="ticker-price">$42.58</span> <span class="ticker-change change-up">+5.2%</span> </div> </div> </div> <div class="action-buttons"> <button class="action-button btn-secondary" id="cancel-btn">Revise Position</button> <button class="action-button btn-primary" id="continue-btn">Continue to Execution</button> </div> </div> <div class="data-panel" id="panel-4"> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Execution Strategy</div> <div class="data-card-subtitle">Order Parameters</div> </div> </div> <div class="data-value">TWAP Order</div> <div class="data-description">Time-Weighted Average Price execution over 30 minute window to minimize market impact.</div> </div> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Market Depth</div> </div> </div> <div class="financial-summary"> <div class="summary-item"> <span class="summary-label">Bid/Ask Spread</span> <span class="summary-value">$0.85</span> </div> <div class="summary-item"> <span class="summary-label">Order Book Depth</span> <span class="summary-value">245 contracts</span> </div> </div> </div> </div> <div class="data-panel" id="panel-5"> <div class="data-card"> <div class="data-card-header"> <div> <div class="data-card-title">Trade Confirmation</div> <div class="data-card-subtitle">Transaction Details</div> </div> </div> <div class="data-value">TX-8729384756</div> <div class="data-description">Your transaction has been confirmed and will be reflected in your portfolio shortly.</div> <span class="data-tag tag-success">Confirmed</span> </div> <div class="financial-summary"> <div class="summary-item"> <span class="summary-label">Execution Price</span> <span class="summary-value">$62.75</span> </div> <div class="summary-item"> <span class="summary-label">Total Cost</span> <span class="summary-value">$784,375</span> </div> <div class="summary-item"> <span class="summary-label">Commission</span> <span class="summary-value">$1,250</span> </div> <div class="summary-item"> <span class="summary-label">Executed At</span> <span class="summary-value">12:45:28 PM</span> </div> </div> </div> </div> <div class="notification-badge" id="notification">Market volatility alert: TSLA -2.5%</div> </div> </div> <div class="glow-effect" id="glow"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize variables let currentStep = 3; const totalSteps = 5; const breadcrumbSteps = document.querySelectorAll('.breadcrumb-step'); const dataPanels = document.querySelectorAll('.data-panel'); const continueBtn = document.getElementById('continue-btn'); const cancelBtn = document.getElementById('cancel-btn'); const notification = document.getElementById('notification'); const progressBar = document.querySelector('.breadcrumb-progress'); const chartBars = document.querySelectorAll('.chart-bar'); const glowEffect = document.getElementById('glow'); // Update progress bar function updateProgress() { const progress = ((currentStep - 1) / (totalSteps - 1)) * 100; progressBar.style.width = `${progress}%`; } // Initialize steps function initializeSteps() { breadcrumbSteps.forEach((step, index) => { const stepNum = index + 1; // Add click event to steps step.addEventListener('click', function() { if (stepNum <= currentStep) { setActiveStep(stepNum); } }); // Add hover effect to create glow step.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); glowEffect.style.left = `${e.clientX}px`; glowEffect.style.top = `${e.clientY}px`; glowEffect.style.opacity = '1'; }); step.addEventListener('mouseleave', function() { glowEffect.style.opacity = '0'; }); }); } // Set active step function setActiveStep(step) { // Reset all steps breadcrumbSteps.forEach((s, i) => { const num = i + 1; s.classList.remove('step-active'); if (num < step) { s.classList.add('step-complete'); s.classList.remove('step-error'); } else if (num === step) { s.classList.add('step-active'); s.classList.remove('step-complete', 'step-error'); } else { s.classList.remove('step-complete', 'step-error'); } }); // Show corresponding data panel dataPanels.forEach((panel, i) => { panel.classList.remove('active'); if (i === step - 1) { panel.classList.add('active'); } }); currentStep = step; updateProgress(); } // Simulate real-time chart data function animateCharts() { chartBars.forEach(bar => { const randomHeight = Math.floor(Math.random() * 70) + 30; setTimeout(() => { bar.style.height = `${randomHeight}%`; }, Math.random() * 1000); }); } // Show notification function showNotification(message) { notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 5000); } // Button event handlers if (continueBtn) { continueBtn.addEventListener('click', function() { if (currentStep < totalSteps) { setActiveStep(currentStep + 1); showNotification("Position analysis complete, proceeding to execution"); } }); } if (cancelBtn) { cancelBtn.addEventListener('click', function() { setActiveStep(2); showNotification("Returning to position selection"); }); } // Initialize initializeSteps(); updateProgress(); // Simulate real-time updates setInterval(animateCharts, 5000); // Show initial notification after short delay setTimeout(() => { showNotification("Market volatility alert: TSLA -2.5%"); }, 2000); // Simulate real-time ticker updates const tickers = document.querySelectorAll('.ticker-change'); setInterval(() => { tickers.forEach(ticker => { const isUp = Math.random() > 0.5; const change = (Math.random() * 2 + 0.1).toFixed(1); ticker.textContent = isUp ? `+${change}%` : `-${change}%`; ticker.className = 'ticker-change ' + (isUp ? 'change-up' : 'change-down'); }); }, 7000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Real Estate Listing Breadcrumbs</title> <style> :root { --primary: #3a5a78; --light-primary: #eef4f8; --secondary: #e8c48e; --text: #333; --light-text: #777; --light-bg: #f9f9f9; --white: #ffffff; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: var(--light-bg); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 650px; margin: 0 auto; background-color: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; position: relative; } h1 { font-size: 24px; font-weight: 600; margin-bottom: 24px; color: var(--primary); position: relative; } h1::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 3px; background-color: var(--secondary); border-radius: 2px; } .breadcrumb-container { margin: 30px 0; position: relative; } .breadcrumb-progress { position: absolute; height: 3px; background-color: var(--secondary); top: 15px; left: 0; transition: width 0.5s ease-in-out; z-index: 1; } .breadcrumbs { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } .breadcrumb-item { display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; flex: 1; transition: var(--transition); } .breadcrumb-node { width: 34px; height: 34px; border-radius: 50%; background-color: var(--light-bg); border: 2px solid var(--light-primary); display: flex; align-items: center; justify-content: center; color: var(--light-text); font-weight: 600; font-size: 14px; margin-bottom: 10px; position: relative; z-index: 3; transition: var(--transition); } .breadcrumb-label { font-size: 12px; color: var(--light-text); font-weight: 500; text-align: center; transition: var(--transition); white-space: nowrap; opacity: 0.7; } .breadcrumb-item.active .breadcrumb-node { background-color: var(--primary); border-color: var(--primary); color: var(--white); transform: scale(1.1); box-shadow: 0 0 0 4px rgba(58, 90, 120, 0.2); } .breadcrumb-item.active .breadcrumb-label { color: var(--primary); font-weight: 600; opacity: 1; } .breadcrumb-item.completed .breadcrumb-node { background-color: var(--secondary); border-color: var(--secondary); color: var(--white); } .breadcrumb-item.completed .breadcrumb-label { color: var(--secondary); } .property-container { margin-top: 40px; overflow: hidden; position: relative; } .property-slide { display: none; opacity: 0; transform: translateX(30px); transition: opacity 0.5s ease, transform 0.5s ease; } .property-slide.active { display: block; opacity: 1; transform: translateX(0); } .property-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background-color: var(--white); transition: var(--transition); } .property-image { width: 100%; height: 200px; object-fit: cover; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .property-details { padding: 20px; } .property-type { display: inline-block; padding: 4px 10px; background-color: var(--light-primary); color: var(--primary); font-size: 11px; font-weight: 600; border-radius: 30px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .property-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text); } .property-location { display: flex; align-items: center; color: var(--light-text); font-size: 13px; margin-bottom: 15px; } .location-icon { margin-right: 6px; font-size: 16px; color: var(--secondary); } .property-features { display: flex; justify-content: space-between; border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 15px; margin-top: 15px; } .feature { display: flex; flex-direction: column; align-items: center; } .feature-value { font-weight: 600; font-size: 14px; color: var(--primary); } .feature-label { font-size: 11px; color: var(--light-text); margin-top: 3px; } .property-price { font-size: 20px; font-weight: 700; color: var(--primary); margin-top: 15px; display: flex; align-items: center; justify-content: space-between; } .price-label { font-size: 12px; color: var(--light-text); font-weight: 400; } .navigation-buttons { display: flex; justify-content: space-between; margin-top: 30px; } .nav-button { padding: 12px 20px; background-color: var(--white); color: var(--primary); border: 2px solid var(--primary); border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: var(--transition); font-size: 14px; display: flex; align-items: center; } .nav-button:hover { background-color: var(--primary); color: var(--white); } .nav-button:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--light-text); color: var(--light-text); } .nav-button.next { background-color: var(--primary); color: var(--white); } .nav-button.next:hover { background-color: #2d4a68; } .nav-button i { margin: 0 6px; } .pulse-animation { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(58, 90, 120, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(58, 90, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 90, 120, 0); } } .ripple { position: absolute; width: 10px; height: 10px; background-color: rgba(232, 196, 142, 0.4); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: ripple-animation 0.8s linear; } @keyframes ripple-animation { 0% { width: 0; height: 0; opacity: 0.5; } 100% { width: 200px; height: 200px; opacity: 0; } } @media screen and (max-width: 600px) { .container { padding: 20px; } h1 { font-size: 20px; } .breadcrumb-node { width: 28px; height: 28px; font-size: 12px; } .breadcrumb-label { font-size: 10px; } .property-title { font-size: 16px; } .property-image { height: 160px; } .nav-button { padding: 10px 16px; font-size: 12px; } } @media screen and (max-width: 400px) { .breadcrumb-label { font-size: 9px; } } </style> </head> <body> <div class="container"> <h1>Find Your Dream Home</h1> <div class="breadcrumb-container"> <div class="breadcrumb-progress" id="breadcrumb-progress"></div> <div class="breadcrumbs"> <div class="breadcrumb-item active" data-step="1"> <div class="breadcrumb-node">1</div> <div class="breadcrumb-label">Location</div> </div> <div class="breadcrumb-item" data-step="2"> <div class="breadcrumb-node">2</div> <div class="breadcrumb-label">Property Type</div> </div> <div class="breadcrumb-item" data-step="3"> <div class="breadcrumb-node">3</div> <div class="breadcrumb-label">Price Range</div> </div> <div class="breadcrumb-item" data-step="4"> <div class="breadcrumb-node">4</div> <div class="breadcrumb-label">Features</div> </div> <div class="breadcrumb-item" data-step="5"> <div class="breadcrumb-node">5</div> <div class="breadcrumb-label">Results</div> </div> </div> </div> <div class="property-container"> <!-- Step 1: Location --> <div class="property-slide active" data-step="1"> <div class="property-card"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Neighborhood view" class="property-image"> <div class="property-details"> <span class="property-type">Step 1 of 5</span> <h3 class="property-title">Select Your Preferred Neighborhood</h3> <p class="property-location"> <i class="location-icon">📍</i> From urban downtown to suburban tranquility </p> <p style="font-size: 13px; color: var(--light-text); margin-bottom: 15px;"> Browse through our exclusive neighborhoods with top-rated schools, excellent amenities, and convenient commute options. </p> <div class="property-features"> <div class="feature"> <div class="feature-value">24</div> <div class="feature-label">Neighborhoods</div> </div> <div class="feature"> <div class="feature-value">150+</div> <div class="feature-label">Properties</div> </div> <div class="feature"> <div class="feature-value">12</div> <div class="feature-label">School Districts</div> </div> </div> </div> </div> </div> <!-- Step 2: Property Type --> <div class="property-slide" data-step="2"> <div class="property-card"> <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Modern house" class="property-image"> <div class="property-details"> <span class="property-type">Step 2 of 5</span> <h3 class="property-title">Choose Your Ideal Property Type</h3> <p class="property-location"> <i class="location-icon">🏠</i> Find the perfect style for your lifestyle </p> <p style="font-size: 13px; color: var(--light-text); margin-bottom: 15px;"> From contemporary condos to spacious single-family homes, we have options to match your unique preferences. </p> <div class="property-features"> <div class="feature"> <div class="feature-value">Condos</div> <div class="feature-label">Urban Living</div> </div> <div class="feature"> <div class="feature-value">Houses</div> <div class="feature-label">Family Homes</div> </div> <div class="feature"> <div class="feature-value">Luxury</div> <div class="feature-label">Premium Properties</div> </div> </div> </div> </div> </div> <!-- Step 3: Price Range --> <div class="property-slide" data-step="3"> <div class="property-card"> <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Luxury interior" class="property-image"> <div class="property-details"> <span class="property-type">Step 3 of 5</span> <h3 class="property-title">Set Your Ideal Budget</h3> <p class="property-location"> <i class="location-icon">💲</i> Investment options for every price point </p> <p style="font-size: 13px; color: var(--light-text); margin-bottom: 15px;"> Our diverse portfolio includes properties at various price points with flexible financing options. </p> <div class="property-features"> <div class="feature"> <div class="feature-value">Starter</div> <div class="feature-label">$200k-400k</div> </div> <div class="feature"> <div class="feature-value">Mid-Range</div> <div class="feature-label">$400k-700k</div> </div> <div class="feature"> <div class="feature-value">Premium</div> <div class="feature-label">$700k+</div> </div> </div> </div> </div> </div> <!-- Step 4: Features --> <div class="property-slide" data-step="4"> <div class="property-card"> <img src="https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Home features" class="property-image"> <div class="property-details"> <span class="property-type">Step 4 of 5</span> <h3 class="property-title">Select Must-Have Features</h3> <p class="property-location"> <i class="location-icon">✓</i> Customize your perfect living space </p> <p style="font-size: 13px; color: var(--light-text); margin-bottom: 15px;"> From private pools to open-concept kitchens, specify the features that will make your house feel like home. </p> <div class="property-features"> <div class="feature"> <div class="feature-value">Interior</div> <div class="feature-label">Kitchen, Bath</div> </div> <div class="feature"> <div class="feature-value">Outdoor</div> <div class="feature-label">Pool, Patio</div> </div> <div class="feature"> <div class="feature-value">Smart</div> <div class="feature-label">Tech Ready</div> </div> </div> </div> </div> </div> <!-- Step 5: Results --> <div class="property-slide" data-step="5"> <div class="property-card"> <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Matching property" class="property-image"> <div class="property-details"> <span class="property-type">Perfect Match</span> <h3 class="property-title">Lakeside Modern Villa</h3> <p class="property-location"> <i class="location-icon">📍</i> 428 Lakeview Drive, Pinecrest Estates </p> <p style="font-size: 13px; color: var(--light-text); margin-bottom: 15px;"> This stunning 4-bedroom contemporary home features panoramic lake views, a chef's kitchen, and state-of-the-art smart home technology. </p> <div class="property-features"> <div class="feature"> <div class="feature-value">4</div> <div class="feature-label">Bedrooms</div> </div> <div class="feature"> <div class="feature-value">3.5</div> <div class="feature-label">Bathrooms</div> </div> <div class="feature"> <div class="feature-value">2,850</div> <div class="feature-label">Sq Ft</div> </div> </div> <div class="property-price"> <span class="price-label">Starting at</span> $685,000 </div> </div> </div> </div> </div> <div class="navigation-buttons"> <button id="prevBtn" class="nav-button prev" disabled> <i>←</i> Previous </button> <button id="nextBtn" class="nav-button next"> Next <i>→</i> </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const breadcrumbItems = document.querySelectorAll('.breadcrumb-item'); const propertySlides = document.querySelectorAll('.property-slide'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const progressBar = document.getElementById('breadcrumb-progress'); let currentStep = 1; const totalSteps = breadcrumbItems.length; // Initialize progress bar updateProgressBar(); // Add ripple effect to container document.querySelector('.container').addEventListener('click', function(e) { const ripple = document.createElement('div'); ripple.className = 'ripple'; ripple.style.left = `${e.clientX}px`; ripple.style.top = `${e.clientY}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); }); // Add click event listeners to breadcrumb items breadcrumbItems.forEach(item => { item.addEventListener('click', function() { const step = parseInt(this.getAttribute('data-step')); if (step < currentStep || (step <= currentStep + 1 && step > currentStep)) { navigateToStep(step); } }); // Add hover animation item.addEventListener('mouseenter', function() { if (this.classList.contains('active') || this.classList.contains('completed')) { this.querySelector('.breadcrumb-node').classList.add('pulse-animation'); } }); item.addEventListener('mouseleave', function() { this.querySelector('.breadcrumb-node').classList.remove('pulse-animation'); }); }); // Add click event listeners to navigation buttons prevBtn.addEventListener('click', function() { if (currentStep > 1) { navigateToStep(currentStep - 1); } }); nextBtn.addEventListener('click', function() { if (currentStep < totalSteps) { navigateToStep(currentStep + 1); } }); function navigateToStep(step) { // Update active breadcrumb breadcrumbItems.forEach(item => { const itemStep = parseInt(item.getAttribute('data-step')); item.classList.remove('active'); if (itemStep < step) { item.classList.add('completed'); } else if (itemStep === step) { item.classList.add('active'); } else { item.classList.remove('completed'); } }); // Update visible property slide with animation propertySlides.forEach(slide => { const slideStep = parseInt(slide.getAttribute('data-step')); if (slideStep === step) { slide.classList.add('active'); } else { slide.classList.remove('active'); } }); // Update navigation buttons prevBtn.disabled = step === 1; nextBtn.textContent = step === totalSteps ? 'View Property' : 'Next'; nextBtn.innerHTML = step === totalSteps ? 'View Property <i>→</i>' : 'Next <i>→</i>'; currentStep = step; updateProgressBar(); } function updateProgressBar() { // Calculate progress percentage const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100; progressBar.style.width = `${progressPercentage}%`; } // Add some flair - auto-pulse the active node every few seconds setInterval(() => { const activeNode = document.querySelector('.breadcrumb-item.active .breadcrumb-node'); if (activeNode) { activeNode.classList.add('pulse-animation'); setTimeout(() => { activeNode.classList.remove('pulse-animation'); }, 1500); } }, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaaS Application Breadcrumbs</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #4361ee; --secondary: #3a0ca3; --success: #2ec4b6; --warning: #ff9f1c; --danger: #e63946; --dark: #2b2d42; --light: #f8f9fa; --medium: #e9ecef; --text: #495057; --border: #dee2e6; } body { background-color: #f6f8fc; color: var(--text); height: 100vh; display: flex; flex-direction: column; padding: 20px; overflow-x: hidden; } .app-container { max-width: 700px; width: 100%; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; height: 660px; } .app-header { padding: 24px; background: white; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); } .logo { font-weight: 700; font-size: 20px; color: var(--dark); display: flex; align-items: center; gap: 8px; } .logo-icon { width: 28px; height: 28px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; } .user-info { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } .breadcrumb-container { padding: 20px 24px; background: white; position: relative; } .breadcrumbs { display: flex; align-items: center; overflow-x: auto; gap: 16px; position: relative; scrollbar-width: none; } .breadcrumbs::-webkit-scrollbar { display: none; } .breadcrumb-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--medium); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; transition: all 0.2s ease-in-out; position: relative; user-select: none; } .breadcrumb-item:not(.active):hover { background: var(--border); } .breadcrumb-item.active { background: var(--primary); color: white; padding-right: 20px; } .breadcrumb-item:not(:last-child)::after { content: ''; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-top: 2px solid var(--border); border-right: 2px solid var(--border); transform: translateY(-50%) rotate(45deg); } .breadcrumb-icon { font-size: 16px; display: flex; align-items: center; justify-content: center; } .breadcrumb-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--primary); transition: width 0.3s ease-out, transform 0.3s ease-out; } .content-container { flex: 1; padding: 24px; overflow-y: auto; position: relative; } .content-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; opacity: 0; transform: translateX(40px); pointer-events: none; } .content-view.active { opacity: 1; transform: translateX(0); pointer-events: all; } h2 { color: var(--dark); margin-bottom: 16px; font-size: 22px; font-weight: 600; } p { color: var(--text); line-height: 1.6; margin-bottom: 20px; font-size: 15px; } .action-btn { background: var(--primary); color: white; border: none; border-radius: 8px; padding: 12px 24px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; font-size: 14px; display: flex; align-items: center; gap: 8px; margin-top: 16px; } .action-btn:hover { background: var(--secondary); } .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 16px; } .card-title { font-weight: 600; margin-bottom: 12px; color: var(--dark); font-size: 16px; } .progress-container { height: 8px; background: var(--medium); border-radius: 4px; overflow: hidden; margin-top: 12px; } .progress-bar { height: 100%; background: var(--primary); border-radius: 4px; width: 0; transition: width 1s ease-out; } .form-group { margin-bottom: 16px; } .form-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: var(--dark); } .form-control { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; transition: border-color 0.2s ease; } .form-control:focus { outline: none; border-color: var(--primary); } .checkbox-group { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); } .info-group { display: flex; gap: 12px; margin-bottom: 16px; } .info-item { flex: 1; padding: 16px; background: #f8f9fa; border-radius: 8px; text-align: center; } .info-value { font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 4px; } .info-label { font-size: 13px; color: var(--text); } .badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-right: 8px; } .badge-success { background: rgba(46, 196, 182, 0.1); color: var(--success); } .badge-warning { background: rgba(255, 159, 28, 0.1); color: var(--warning); } .action-group { display: flex; gap: 12px; margin-top: 20px; } .btn-secondary { background: var(--medium); color: var(--text); } .btn-secondary:hover { background: var(--border); } .completion-mark { display: inline-flex; width: 20px; height: 20px; background: var(--success); border-radius: 50%; align-items: center; justify-content: center; color: white; margin-left: 8px; transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .completion-mark.show { transform: scale(1); } .hint-badge { position: absolute; top: -6px; right: -6px; background: var(--warning); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; } .loading-dots { display: inline-flex; align-items: center; margin-left: 4px; } .loading-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; margin: 0 2px; animation: dot-pulse 1.4s infinite ease-in-out; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-pulse { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.8; transform: scale(1.2); } } .mini-tip { position: absolute; bottom: 12px; right: 12px; background: var(--dark); color: white; font-size: 12px; padding: 8px 12px; border-radius: 8px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: 100; } .mini-tip.show { opacity: 1; transform: translateY(0); } .mini-tip::before { content: ''; position: absolute; top: -4px; right: 16px; width: 8px; height: 8px; background: var(--dark); transform: rotate(45deg); } @media (max-width: 600px) { .breadcrumb-item { padding: 6px 12px; font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .app-header { padding: 16px; } .content-container { padding: 16px; } .breadcrumb-container { padding: 16px; } .action-group { flex-direction: column; } } /* Loader component */ .loader-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 1; transition: opacity 0.3s ease; } .loader-container.hidden { opacity: 0; pointer-events: none; } .loader { width: 48px; height: 48px; border-radius: 50%; display: inline-block; border-top: 3px solid var(--primary); border-right: 3px solid transparent; box-sizing: border-box; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5Z"/> </svg> </div> FlowTracker </div> <div class="user-info"> <div class="user-avatar">JP</div> </div> </div> <div class="breadcrumb-container"> <div class="breadcrumbs" id="breadcrumbs"> <div class="breadcrumb-item active" data-index="0"> <div class="breadcrumb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> </svg> </div> Dashboard <span class="completion-mark show"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> </svg> </span> </div> <div class="breadcrumb-item" data-index="1"> <div class="breadcrumb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/> </svg> </div> Project Setup <span class="completion-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> </svg> </span> </div> <div class="breadcrumb-item" data-index="2"> <div class="breadcrumb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> </svg> </div> Team Config <span class="hint-badge">3</span> <span class="completion-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> </svg> </span> </div> <div class="breadcrumb-item" data-index="3"> <div class="breadcrumb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/> </svg> </div> Validation <span class="completion-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> </svg> </span> </div> <div class="breadcrumb-item" data-index="4"> <div class="breadcrumb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/> </svg> </div> Cleanup <span class="completion-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> </svg> </span> </div> </div> <div class="breadcrumb-progress" id="breadcrumb-progress"></div> </div> <div class="content-container"> <div class="content-view active" id="view-0"> <h2>Project Dashboard</h2> <p>Welcome to your project workflow. This dashboard gives you a quick overview of your current project status and next steps in the process.</p> <div class="info-group"> <div class="info-item"> <div class="info-value">86%</div> <div class="info-label">Completion</div> </div> <div class="info-item"> <div class="info-value">3</div> <div class="info-label">Days Left</div> </div> <div class="info-item"> <div class="info-value">4/5</div> <div class="info-label">Steps Completed</div> </div> </div> <div class="card"> <div class="card-title">Recent Activity</div> <p class="card-content"> <span class="badge badge-success">Completed</span> Team configuration saved </p> <p class="card-content"> <span class="badge badge-warning">In Progress</span> Running validation checks </p> <div class="progress-container"> <div class="progress-bar" style="width: 86%;"></div> </div> </div> <button class="action-btn" onclick="navigateTo(1)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </svg> Continue to Project Setup </button> </div> <div class="content-view" id="view-1"> <h2>Project Setup</h2> <p>Configure your project details and settings. This information will be used throughout your workflow.</p> <div class="form-group"> <label class="form-label">Project Name</label> <input type="text" class="form-control" value="SaaS Analytics Dashboard"> </div> <div class="form-group"> <label class="form-label">Project Description</label> <textarea class="form-control" rows="3">A comprehensive analytics dashboard for SaaS platforms with real-time data visualization and custom reporting features.</textarea> </div> <div class="form-group"> <label class="form-label">Project Settings</label> <div class="checkbox-group"> <input type="checkbox" id="setting1" checked> <label for="setting1">Enable automated reporting</label> </div> <div class="checkbox-group"> <input type="checkbox" id="setting2" checked> <label for="setting2">Integrate with existing systems</label> </div> <div class="checkbox-group"> <input type="checkbox" id="setting3"> <label for="setting3">Advanced security features</label> </div> </div> <div class="action-group"> <button class="action-btn btn-secondary" onclick="navigateTo(0)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/> </svg> Back </button> <button class="action-btn" onclick="navigateTo(2)"> <span>Save & Continue</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </svg> </button> </div> </div> <div class="content-view" id="view-2"> <h2>Team Configuration</h2> <p>Add team members and assign roles for this project. Team members will receive notifications about project updates.</p> <div class="card"> <div class="card-title">Team Members</div> <div class="checkbox-group"> <input type="checkbox" id="member1" checked> <label for="member1">Alex Morgan (Project Lead)</label> </div> <div class="checkbox-group"> <input type="checkbox" id="member2" checked> <label for="member2">Jordan Kim (Developer)</label> </div> <div class="checkbox-group"> <input type="checkbox" id="member3" checked> <label for="member3">Taylor Wilson (Designer)</label> </div> <div class="checkbox-group"> <input type="checkbox" id="member4"> <label for="member4">Casey Jones (QA Specialist)</label> </div> </div> <div class="form-group"> <label class="form-label">Notification Settings</label> <div class="checkbox-group"> <input type="checkbox" id="notify1" checked> <label for="notify1">Daily progress updates</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify2" checked> <label for="notify2">Critical alerts</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify3"> <label for="notify3">Weekly summary reports</label> </div> </div> <div class="action-group"> <button class="action-btn btn-secondary" onclick="navigateTo(1)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/> </svg> Back </button> <button class="action-btn" onclick="navigateTo(3)"> Continue to Validation <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </svg> </button> </div> </div> <div class="content-view" id="view-3"> <h2>Validation</h2> <p>The system will now validate your configuration to ensure everything is set up correctly before launching.</p> <div class="card"> <div class="card-title">Validation Status</div> <div id="validation-status">Running validation checks<span class="loading-dots"><span></span><span></span><span></span></span></div> <div class="progress-container"> <div class="progress-bar" id="validation-progress" style="width: 0%"></div> </div> </div> <div id="validation-results" style="display: none;"> <div class="card"> <div class="card-title">Validation Results</div> <div class="checkbox-group"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2ec4b6" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/> </svg> <label>Project configuration valid</label> </div> <div class="checkbox-group"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2ec4b6" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Chronicle - Interactive News Breadcrumbs</title> <style> :root { --primary: #0c1e3e; --secondary: #e63946; --tertiary: #f1faee; --accent: #a8dadc; --dark: #1d3557; --light: #f9f9f9; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; min-height: 100vh; padding: 20px; overflow-x: hidden; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 3px solid var(--secondary); padding-bottom: 10px; } .logo { font-size: 1.8rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: -1px; display: flex; align-items: center; } .logo::before { content: ""; display: inline-block; width: 25px; height: 25px; margin-right: 10px; background-color: var(--secondary); border-radius: 50%; animation: pulse 3s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .date { font-size: 0.9rem; color: var(--dark); opacity: 0.8; } main { flex: 1; display: flex; flex-direction: column; } .breadcrumbs-container { position: relative; background-color: var(--primary); border-radius: 8px; padding: 20px; margin-bottom: 25px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); overflow: hidden; } .breadcrumbs-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--secondary), var(--accent)); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 15px; } .breadcrumb-item { position: relative; padding: 8px 15px; background-color: rgba(255, 255, 255, 0.1); color: var(--tertiary); border-radius: 4px; font-weight: 600; transition: var(--transition); cursor: pointer; display: flex; align-items: center; overflow: hidden; } .breadcrumb-item:hover, .breadcrumb-item.active { background-color: var(--secondary); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3); } .breadcrumb-item::after { content: "›"; margin-left: 10px; font-size: 1.2rem; } .breadcrumb-item:last-child::after { content: ""; } .breadcrumb-item span { position: relative; z-index: 2; } .breadcrumb-item .ripple { position: absolute; background: rgba(255, 255, 255, 0.7); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; z-index: 1; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .content-area { background-color: white; border-radius: 8px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; overflow: hidden; } .section-indicator { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: var(--secondary); letter-spacing: 1px; margin-bottom: 5px; display: flex; align-items: center; } .section-indicator::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: var(--secondary); margin-right: 8px; border-radius: 50%; } .article-title { font-size: 1.8rem; margin-bottom: 15px; line-height: 1.2; font-weight: 800; color: var(--primary); } .article-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-size: 0.85rem; color: var(--dark); opacity: 0.7; } .article-meta span { display: flex; align-items: center; } .article-meta span::before { content: ""; display: inline-block; width: 4px; height: 4px; background-color: var(--dark); margin-right: 5px; border-radius: 50%; } .article-preview { line-height: 1.6; margin-bottom: 25px; color: var(--dark); } .article-preview p { margin-bottom: 15px; } .related-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .tag { background-color: var(--accent); color: var(--primary); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; transition: var(--transition); cursor: pointer; } .tag:hover { background-color: var(--primary); color: var(--tertiary); transform: translateY(-2px); } .articles-list { display: none; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .article-card { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; } .article-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .article-image { height: 150px; background-size: cover; background-position: center; position: relative; } .article-image::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); } .article-card-content { padding: 15px; } .article-card-title { font-size: 1.1rem; margin-bottom: 10px; font-weight: 700; color: var(--primary); } .article-card-excerpt { font-size: 0.9rem; color: var(--dark); opacity: 0.8; line-height: 1.4; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-card-meta { font-size: 0.8rem; color: var(--dark); opacity: 0.6; display: flex; align-items: center; justify-content: space-between; } .breadcrumb-tooltip { position: absolute; background-color: var(--dark); color: white; font-size: 0.8rem; padding: 6px 10px; border-radius: 4px; top: -30px; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: var(--transition); white-space: nowrap; } .breadcrumb-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .breadcrumb-item:hover .breadcrumb-tooltip { opacity: 1; top: -40px; } .contextual-info { background-color: var(--accent); padding: 15px; border-radius: 6px; margin-top: 20px; font-size: 0.9rem; color: var(--primary); position: relative; overflow: hidden; display: none; } .contextual-info::before { content: "CONTEXT"; position: absolute; top: 0; right: 0; background-color: var(--primary); color: white; font-size: 0.7rem; padding: 3px 8px; border-bottom-left-radius: 6px; } @media (max-width: 700px) { .breadcrumbs { flex-direction: row; overflow-x: auto; padding-bottom: 10px; } .article-title { font-size: 1.5rem; } .breadcrumb-item { padding: 6px 12px; font-size: 0.9rem; } .articles-list { grid-template-columns: 1fr; } } .toggle-view { background-color: var(--primary); color: white; border: none; border-radius: 20px; padding: 8px 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; transition: var(--transition); margin-top: 20px; align-self: flex-start; } .toggle-view:hover { background-color: var(--secondary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .toggle-view::before { content: "→"; margin-right: 8px; font-size: 1.1rem; } /* Content for different views */ .section-content { display: none; } .section-content.active { display: block; animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Progress indicator */ .navigation-progress { height: 4px; background-color: rgba(255, 255, 255, 0.2); border-radius: 2px; margin-top: 10px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--accent)); width: 0; transition: width 0.3s ease; } </style> </head> <body> <header> <div class="logo">The Chronicle</div> <div class="date" id="current-date"></div> </header> <main> <div class="breadcrumbs-container"> <div class="breadcrumbs" id="breadcrumbs"> <div class="breadcrumb-item active" data-section="home"> <span>Home</span> <div class="breadcrumb-tooltip">Start exploring top stories</div> </div> </div> <div class="navigation-progress"> <div class="progress-bar" id="progress-bar"></div> </div> </div> <div class="content-area" id="content-area"> <!-- Home Section --> <div class="section-content active" id="home-content"> <div class="section-indicator">Featured Story</div> <h1 class="article-title">Climate Crisis Escalates: World Leaders Convene for Emergency Summit</h1> <div class="article-meta"> <span>By Sarah Chen</span> <span>8 min read</span> <span>Politics</span> </div> <div class="article-preview"> <p>As unprecedented wildfires ravage Australia and flooding threatens coastal cities worldwide, heads of state have declared a global environmental emergency. The International Climate Summit, hastily organized following the latest IPCC report, begins tomorrow in Geneva with the most ambitious agenda to date.</p> <p>Scientists warn that immediate action is no longer optional, as tipping points previously projected for 2050 appear to have accelerated. "We're no longer discussing prevention—we're discussing survival strategies," says Dr. James Morello of the Climate Research Institute.</p> </div> <div class="related-tags"> <div class="tag" data-section="politics">Politics</div> <div class="tag" data-section="environment">Environment</div> <div class="tag" data-section="global">Global Affairs</div> </div> </div> <!-- Politics Section --> <div class="section-content" id="politics-content"> <div class="section-indicator">Politics</div> <h1 class="article-title">Bipartisan Infrastructure Bill Passes After Marathon Negotiation</h1> <div class="article-meta"> <span>By Michael Rodriguez</span> <span>6 min read</span> <span>Politics</span> </div> <div class="article-preview"> <p>In a rare display of cross-party cooperation, the Senate passed the long-debated $1.2 trillion infrastructure package yesterday evening. The bill allocates significant funding to repair America's aging roads, bridges, and water systems, while making historic investments in broadband expansion and clean energy initiatives.</p> <p>"This represents what's possible when we put country ahead of party," said Senator Claire Johnson, one of the key architects of the compromise. The legislation includes $110 billion for roads and bridges, $66 billion for railways, and $65 billion for broadband infrastructure.</p> </div> <div class="contextual-info"> This bill marks the largest infrastructure investment in over 70 years, surpassing even the Interstate Highway System initiative of the 1950s. </div> <div class="related-tags"> <div class="tag" data-section="economy">Economy</div> <div class="tag" data-section="technology">Technology</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Environment Section --> <div class="section-content" id="environment-content"> <div class="section-indicator">Environment</div> <h1 class="article-title">Ocean Plastic Removal Project Shows Promising Results</h1> <div class="article-meta"> <span>By Emma Watkins</span> <span>5 min read</span> <span>Environment</span> </div> <div class="article-preview"> <p>The ambitious OceanClean Initiative has removed over 250,000 metric tons of plastic from the Pacific Garbage Patch in its first year of operation. Using innovative collection systems powered by ocean currents, the project has exceeded expectations and is now expanding to four additional locations.</p> <p>"What we're seeing is not just waste removal, but ecosystem recovery," explains Dr. Lena Patel, marine biologist and project lead. "Areas where we've been operating the longest are showing increased biodiversity and healthier coral systems."</p> </div> <div class="related-tags"> <div class="tag" data-section="science">Science</div> <div class="tag" data-section="technology">Technology</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Global Affairs Section --> <div class="section-content" id="global-content"> <div class="section-indicator">Global Affairs</div> <h1 class="article-title">Diplomatic Breakthrough as Peace Accord Signed in Sudanese Conflict</h1> <div class="article-meta"> <span>By Marcus Williams</span> <span>7 min read</span> <span>Global Affairs</span> </div> <div class="article-preview"> <p>After three years of devastating civil conflict and eighteen months of negotiations, rival Sudanese factions signed a comprehensive peace agreement yesterday in Cairo. The UN-brokered deal establishes a transitional government, with elections scheduled within 24 months.</p> <p>Humanitarian organizations welcomed the news but emphasized the urgent need for aid. "Over 4 million people have been displaced, and rebuilding critical infrastructure will take years," noted Elena Navarro of International Relief Coalition. The accord includes provisions for disarmament and reconstruction funding worth $8.5 billion over five years.</p> </div> <div class="contextual-info"> This represents the third major attempt at peace in the region since 2019, with previous agreements collapsing within months. </div> <div class="related-tags"> <div class="tag" data-section="politics">Politics</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Economy Section --> <div class="section-content" id="economy-content"> <div class="section-indicator">Economy</div> <h1 class="article-title">Federal Reserve Signals Policy Shift as Inflation Concerns Mount</h1> <div class="article-meta"> <span>By David Chang</span> <span>4 min read</span> <span>Economy</span> </div> <div class="article-preview"> <p>The Federal Reserve indicated yesterday that it may accelerate its timeline for interest rate increases, responding to persistent inflation that has reached a 13-year high. Markets reacted immediately, with the Dow falling 1.2% and Treasury yields climbing.</p> <p>"We're seeing supply chain disruptions lasting longer than anticipated, combined with strong consumer demand," said Federal Reserve Chair in the post-meeting press conference. "Our revised projections show we may need two rate hikes in 2022, rather than the single increase previously forecasted."</p> </div> <div class="related-tags"> <div class="tag" data-section="politics">Politics</div> <div class="tag" data-section="business">Business</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Technology Section --> <div class="section-content" id="technology-content"> <div class="section-indicator">Technology</div> <h1 class="article-title">Quantum Computing Breakthrough Could Revolutionize Medical Research</h1> <div class="article-meta"> <span>By Alicia Morgan</span> <span>5 min read</span> <span>Technology</span> </div> <div class="article-preview"> <p>Scientists at the Quantum Research Institute have demonstrated a new error-correction technique that allows quantum computers to maintain coherence 100 times longer than previous methods. The discovery could accelerate pharmaceutical development by enabling complex molecular simulations that were previously impossible.</p> <p>"We can now simulate protein folding with unprecedented accuracy," explains Dr. Robert Zhang, lead researcher. "What used to take conventional supercomputers months can now be calculated in hours. This could reduce drug development timelines from years to months."</p> </div> <div class="contextual-info"> Quantum computing uses quantum bits or "qubits" that can represent both 0 and 1 simultaneously, allowing for exponentially more computing power than traditional systems. </div> <div class="related-tags"> <div class="tag" data-section="science">Science</div> <div class="tag" data-section="health">Health</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Science Section --> <div class="section-content" id="science-content"> <div class="section-indicator">Science</div> <h1 class="article-title">James Webb Telescope Captures First Images of Exoplanet Atmosphere</h1> <div class="article-meta"> <span>By Thomas Greene</span> <span>6 min read</span> <span>Science</span> </div> <div class="article-preview"> <p>The James Webb Space Telescope has delivered its most significant findings yet: detailed atmospheric composition data from an Earth-sized exoplanet 40 light-years away. The observations revealed water vapor and methane, potential signatures of biological activity.</p> <p>"This is the moment we've been waiting for," said Dr. Maria Lopez of NASA's Exoplanet Research Division. "For the first time, we're analyzing the atmosphere of a rocky planet in the habitable zone of its star with enough precision to detect potential biosignatures."</p> </div> <div class="related-tags"> <div class="tag" data-section="technology">Technology</div> <div class="tag" data-section="environment">Environment</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Health Section --> <div class="section-content" id="health-content"> <div class="section-indicator">Health</div> <h1 class="article-title">Alzheimer's Treatment Shows 42% Reduction in Cognitive Decline</h1> <div class="article-meta"> <span>By Jennifer Lucas</span> <span>5 min read</span> <span>Health</span> </div> <div class="article-preview"> <p>A groundbreaking clinical trial for a new Alzheimer's treatment has reported unprecedented success in slowing cognitive decline. The drug, which targets specific protein plaques in the brain, showed a 42% reduction in disease progression over 18 months compared to placebo.</p> <p>"These results represent the most significant advancement in Alzheimer's treatment in decades," said Dr. James Chen, neurologist and principal investigator. "While not a cure, this could give patients several more years of independence and quality life."</p> </div> <div class="contextual-info"> Alzheimer's disease affects approximately 6 million Americans and is projected to reach nearly 13 million by 2050 without effective interventions. </div> <div class="related-tags"> <div class="tag" data-section="science">Science</div> <div class="tag" data-section="technology">Technology</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <!-- Business Section --> <div class="section-content" id="business-content"> <div class="section-indicator">Business</div> <h1 class="article-title">Sustainable Fashion Startup Secures $120M in Funding</h1> <div class="article-meta"> <span>By Ryan Martinez</span> <span>4 min read</span> <span>Business</span> </div> <div class="article-preview"> <p>EcoThread, the rapidly growing sustainable fashion company, has closed a $120 million Series C funding round led by Greenfield Ventures. The investment values the four-year-old startup at $1.2 billion, cementing its unicorn status in the competitive retail sector.</p> <p>The company has pioneered fabric recycling technology that transforms post-consumer textile waste into premium materials. "This funding will help us scale our manufacturing capacity tenfold," said Sophia Kim, EcoThread's CEO. "Our goal is to make sustainability the standard, not the exception, in the fashion industry."</p> </div> <div class="related-tags"> <div class="tag" data-section="economy">Economy</div> <div class="tag" data-section="environment">Environment</div> <div class="tag" data-section="home">Return Home</div> </div> </div> <button class="toggle-view" id="toggle-view">View Related Articles</button> <div class="articles-list" id="articles-list"> <!-- Will be populated by JS --> </div> </div> </main> <script> document.addEventListener('DOMContentLoaded', function() { // Set current date const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', dateOptions); // Breadcrumb navigation const breadcrumbsContainer = document.getElementById('breadcrumbs'); const contentArea = document.getElementById('content-area'); const progressBar = document.getElementById('progress-bar'); const toggleViewBtn = document.getElementById('toggle-view'); const articlesList = document.getElementById('articles-list'); let currentSection = 'home'; let breadcrumbHistory = ['home']; updateProgressBar(); // Function to handle breadcrumb navigation function navigateTo(section, addToHistory = true) { // Hide all section content document.querySelectorAll('.section-content').forEach(el => { el.classList.remove('active'); }); // Show selected section content const sectionContent = document.getElementById(`${section}-content`); if (sectionContent) { sectionContent.classList.add('active'); } // Update active breadcrumb document.querySelectorAll('.breadcrumb-item').forEach(el => { el.classList.remove('active'); if (el.dataset.section === section) { el.classList.add('active'); } }); // Add to breadcrumb history if needed if (addToHistory && section !== breadcrumbHistory[breadcrumbHistory.length - 1]) { currentSection = section; breadcrumbHistory.push(section); updateBreadcrumbs(); updateProgressBar(); } // Reset articles view articlesList.style.display = 'none'; toggleViewBtn.textContent = 'View Related Articles'; } // Update breadcrumbs based on history function updateBreadcrumbs() { breadcrumbsContainer.innerHTML = ''; breadcrumbHistory.forEach((section, index) => { const isActive = index === breadcrumbHistory.length - 1; const item = document.createElement('div'); item.className = `breadcrumb-item ${isActive ? 'active' : ''}`; item.dataset.section = section; const displayNames = { 'home': 'Home', 'politics': 'Politics', 'environment': 'Environment', 'global': 'Global Affairs', 'economy': 'Economy', 'technology': 'Technology', 'science': 'Science', 'health': 'Health', 'business': 'Business' }; const tooltips = { 'home': 'Start exploring top stories', 'politics': 'Latest political developments', 'environment': 'Climate and conservation news', 'global': 'International relations and diplomacy', 'economy': 'Markets, finance, and economic trends', 'technology': 'Innovation and digital transformation', 'science': 'Research and scientific discoveries', 'health': 'Medical breakthroughs and public health', 'business': 'Corporate news and industry analysis' }; item.innerHTML = ` <span>${displayNames[section] || section}</span> <div class="breadcrumb-tooltip">${tooltips[section] || 'Navigate to section'}</div> `; item.addEventListener('click', function() { // If clicking a previous breadcrumb, trim history if (index < breadcrumbHistory.length - 1) { breadcrumbHistory = breadcrumbHistory.slice(0, index + 1); navigateTo(section, false); updateBreadcrumbs(); updateProgressBar(); } }); // Add ripple effect on click item.addEventListener('mousedown', function(e) { const ripple = document.createElement('span'); ripple.className = 'ripple'; this.appendChild(ripple); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; setTimeout(() => { ripple.remove(); }, 600); }); breadcrumbsContainer.appendChild(item); }); } // Update progress bar function updateProgressBar() { const progress = (breadcrumbHistory.length - 1) / 7 * 100; // Assuming max depth of 8 progressBar.style.width = `${Math.min(progress, 100)}%`; } // Set up event delegation for navigation document.addEventListener('click', function(e) { // Handle tag navigation if (e.target.classList.contains('tag')) { const section = e.target.dataset.section; if (section) { navigateTo(section); } } }); // Toggle view button toggleViewBtn.addEventListener('click', function() { if (articlesList.style.display === 'none' || articlesList.style.display === '') { articlesList.style.display = 'grid'; this.textContent = 'Hide Related Articles'; populateRelatedArticles(currentSection); // Show contextual info when viewing related articles const contextualInfo = document.querySelector(`#${currentSection}-content .contextual-info`); if (contextualInfo) { contextualInfo.style.display = 'block'; } } else { articlesList.style.display = 'none'; this.textContent = 'View Related Articles'; // Hide contextual info document.querySelectorAll('.contextual-info').forEach(el => { el.style.display = 'none'; }); } }); // Populate related articles function populateRelatedArticles(section) { // Clear previous articles articlesList.innerHTML = ''; // Article data based on section const articleData = { 'home': [ { title: 'Record-Breaking Heat Wave Sweeps Western States', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?heatwave")', excerpt: 'Temperatures reach 115°F in multiple cities as power grids struggle to meet demand.', author: 'Emily Rodriguez', date: 'Today' }, { title: 'Tech Giant Unveils Revolutionary AI Assistant', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?technology")', excerpt: 'New system can understand complex instructions and generate creative content.', author: 'Marcus Lee', date: 'Yesterday' }, { title: 'Global Stock Markets Hit All-Time High', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?stockmarket")', excerpt: 'Investors optimistic as major indices surge following positive economic data.', author: 'Sarah Johnson', date: '2 days ago' } ], 'politics': [ { title: 'Senate Debates Landmark Voting Rights Bill', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?voting")', excerpt: 'Marathon session expected as legislators argue over election security provisions.', author: 'Robert Wilson', date: 'Today' }, { title: 'Foreign Policy Shift Announced in Major Address', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?diplomacy")', excerpt: 'Administration outlines new approach to international relations and security.', author: 'Diane Foster', date: 'Yesterday' } ], 'environment': [ { title: 'Innovative Carbon Capture Plant Opens in Norway', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?carbon")', excerpt: 'Facility can remove 1 million tons of CO2 annually, equivalent to 200,000 cars.', author: 'Erik Hansson', date: '3 days ago' }, { title: 'Endangered Species Recovery Program Shows Promise', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?wildlife")', excerpt: 'Conservation efforts lead to population increase for several threatened species.', author: 'Maria Gonzalez', date: 'Last week' } ], 'global': [ { title: 'New Trade Agreement Ratified Between Asian Nations', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?trade")', excerpt: 'Historic pact creates world's largest free trade zone covering 2.2 billion people.', author: 'Jonathan Kim', date: 'Today' }, { title: 'Cultural Exchange Program Launches Amid Tensions', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?culture")', excerpt: 'Initiative aims to build bridges through arts and education partnerships.', author: 'Sofia Romano', date: 'Yesterday' } ], 'technology': [ { title: 'Breakthrough in Battery Technology Promises 10x Capacity', image: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("https://source.unsplash.com/random/300x150/?battery")', excerpt: 'New solid-state design could revolutionize electric vehicles and grid storage.', author: 'Amir P
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonVerse Gaming Breadcrumbs</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Play:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --neon-blue: #00fffc; --neon-pink: #ff00ff; --neon-purple: #9d00ff; --neon-green: #39ff14; --dark-bg: #0a0a0f; --darker-bg: #050508; --panel-bg: rgba(16, 16, 32, 0.7); } body { background-color: var(--dark-bg); background-image: radial-gradient(circle at 20% 30%, rgba(57, 255, 20, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 255, 252, 0.05) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(157, 0, 255, 0.03) 0%, transparent 80%); color: white; font-family: 'Play', sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2rem 1rem; overflow-x: hidden; } .portal-container { width: 100%; max-width: 670px; height: 620px; display: flex; flex-direction: column; position: relative; gap: 1.5rem; } .header { text-align: center; font-family: 'Orbitron', sans-serif; margin-bottom: 1rem; position: relative; } .header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 8px rgba(157, 0, 255, 0.4); } .header p { font-size: 1rem; color: #b8b8b8; max-width: 500px; margin: 0 auto; } .breadcrumbs-container { width: 100%; background: var(--panel-bg); border-radius: 12px; padding: 1.5rem; box-shadow: 0 0 15px rgba(0, 255, 252, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(157, 0, 255, 0.2); transition: all 0.3s ease; } .breadcrumbs-nav { margin-bottom: 1.5rem; } .breadcrumbs-title { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; color: white; display: flex; align-items: center; gap: 0.5rem; } .breadcrumbs-title i { color: var(--neon-pink); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; position: relative; } .breadcrumb-item { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; font-weight: 500; padding: 0.5rem 1rem; background: rgba(10, 10, 15, 0.8); border-radius: 6px; color: #b8b8b8; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); z-index: 2; } .breadcrumb-item:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b8b8b8' width='24px' height='24px'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; z-index: 3; } .breadcrumb-item:hover { color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } .breadcrumb-item:hover .glow { opacity: 1; } .breadcrumb-item.active { background: rgba(57, 255, 20, 0.15); color: var(--neon-green); font-weight: 700; } .breadcrumb-item.active::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); } .glow { position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: radial-gradient( circle at center, rgba(57, 255, 20, 0.3) 0%, rgba(157, 0, 255, 0.2) 40%, transparent 70% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: -1; } .content-panel { margin-top: 1.5rem; background: rgba(5, 5, 8, 0.9); border-radius: 8px; padding: 1.5rem; height: 350px; overflow-y: auto; position: relative; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4); scrollbar-width: thin; scrollbar-color: var(--neon-purple) var(--darker-bg); } .content-panel::-webkit-scrollbar { width: 8px; } .content-panel::-webkit-scrollbar-track { background: var(--darker-bg); border-radius: 4px; } .content-panel::-webkit-scrollbar-thumb { background: var(--neon-purple); border-radius: 4px; } .tab-content { display: none; animation: fadeIn 0.5s ease forwards; } .tab-content.active { display: block; } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; } .game-card { background: rgba(16, 16, 32, 0.7); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); position: relative; cursor: pointer; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(57, 255, 20, 0.2); } .game-card:hover .game-image { transform: scale(1.05); } .game-image { width: 100%; height: 120px; object-fit: cover; transition: transform 0.3s ease; } .game-info { padding: 0.75rem; } .game-title { font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.25rem; color: white; } .game-category { font-size: 0.7rem; color: #b8b8b8; } .content-title { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; margin-bottom: 1rem; color: white; background: linear-gradient(to right, white, var(--neon-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .content-info { margin-bottom: 1.5rem; line-height: 1.6; color: #b8b8b8; } .breadcrumb-path { position: relative; height: 2px; background: rgba(184, 184, 184, 0.2); margin: 0 0.5rem; width: 100%; max-width: 90%; margin: 1rem auto; border-radius: 2px; overflow: hidden; } .breadcrumb-progress { position: absolute; height: 100%; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); width: 0; box-shadow: 0 0 10px rgba(157, 0, 255, 0.5); transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .breadcrumb-dot { position: absolute; height: 8px; width: 8px; background: white; border-radius: 50%; top: 50%; transform: translateY(-50%); box-shadow: 0 0 5px var(--neon-blue); transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .feature-item { display: flex; align-items: center; margin-bottom: 1rem; gap: 0.75rem; } .feature-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(57, 255, 20, 0.1); border-radius: 4px; color: var(--neon-green); font-size: 0.8rem; } .feature-text { font-size: 0.9rem; } .game-tag { display: inline-block; padding: 0.25rem 0.5rem; background: rgba(157, 0, 255, 0.2); border-radius: 4px; font-size: 0.7rem; margin-right: 0.5rem; margin-bottom: 0.5rem; color: var(--neon-blue); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(57, 255, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); } } .pulse { animation: pulse 2s infinite; } /* Mobile Responsiveness */ @media (max-width: 700px) { .header h1 { font-size: 1.8rem; } .breadcrumbs { gap: 0.5rem; flex-wrap: wrap; } .breadcrumb-item { font-size: 0.8rem; padding: 0.4rem 0.75rem; } .game-grid { grid-template-columns: repeat(2, 1fr); } .portal-container { height: auto; } .content-panel { height: 300px; } } /* Gaming-specific design elements */ .glitch-effect { position: relative; overflow: hidden; } .glitch-effect::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 blue; top: 0; color: white; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-animation 3s infinite linear alternate-reverse; } .glitch-effect::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 red; top: 0; color: white; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-animation 2s infinite linear alternate-reverse; } @keyframes glitch-animation { 0% { clip: rect(44px, 9999px, 56px, 0); } 5% { clip: rect(25px, 9999px, 99px, 0); } 10% { clip: rect(58px, 9999px, 91px, 0); } 15% { clip: rect(35px, 9999px, 7px, 0); } 20% { clip: rect(72px, 9999px, 3px, 0); } 25% { clip: rect(61px, 9999px, 95px, 0); } 30% { clip: rect(72px, 9999px, 91px, 0); } 35% { clip: rect(58px, 9999px, 46px, 0); } 40% { clip: rect(20px, 9999px, 90px, 0); } 45% { clip: rect(35px, 9999px, 31px, 0); } 50% { clip: rect(2px, 9999px, 46px, 0); } 55% { clip: rect(12px, 9999px, 15px, 0); } 60% { clip: rect(19px, 9999px, 54px, 0); } 65% { clip: rect(85px, 9999px, 62px, 0); } 70% { clip: rect(99px, 9999px, 92px, 0); } 75% { clip: rect(1px, 9999px, 83px, 0); } 80% { clip: rect(28px, 9999px, 43px, 0); } 85% { clip: rect(54px, 9999px, 16px, 0); } 90% { clip: rect(87px, 9999px, 23px, 0); } 95% { clip: rect(9px, 9999px, 29px, 0); } 100% { clip: rect(33px, 9999px, 37px, 0); } } /* Hover effects for game card */ .game-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(10, 10, 15, 0.9) 0%, rgba(10, 10, 15, 0) 50%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 0.75rem; } .game-card:hover .game-overlay { opacity: 1; } .play-button { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; text-transform: uppercase; background: var(--neon-green); color: var(--dark-bg); border: none; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-weight: 700; transition: all 0.2s ease; box-shadow: 0 0 10px rgba(57, 255, 20, 0.5); } .play-button:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(57, 255, 20, 0.7); } </style> </head> <body> <div class="portal-container"> <div class="header"> <h1 class="glitch-effect" data-text="NEONVERSE">NEONVERSE</h1> <p>Navigate through our immersive gaming universe with dynamic breadcrumb navigation</p> </div> <div class="breadcrumbs-container"> <div class="breadcrumbs-nav"> <div class="breadcrumbs-title"> <i class="fas fa-gamepad">🎮</i> Navigation Portal </div> <div class="breadcrumbs" id="breadcrumbs"> <div class="breadcrumb-item active" data-index="0" data-target="home"> <i class="fas fa-home">🏠</i> Home <div class="glow"></div> </div> <div class="breadcrumb-item" data-index="1" data-target="genres"> <i class="fas fa-th">🎲</i> Genres <div class="glow"></div> </div> <div class="breadcrumb-item" data-index="2" data-target="multiplayer"> <i class="fas fa-users">👥</i> Multiplayer <div class="glow"></div> </div> <div class="breadcrumb-item" data-index="3" data-target="esports"> <i class="fas fa-trophy">🏆</i> Esports <div class="glow"></div> </div> </div> <div class="breadcrumb-path"> <div class="breadcrumb-progress" id="breadcrumbProgress"></div> <div class="breadcrumb-dot" id="breadcrumbDot"></div> </div> </div> <div class="content-panel"> <div class="tab-content active" id="home"> <h3 class="content-title">Discover Your Gaming Journey</h3> <p class="content-info">Welcome to NeonVerse, your portal to the latest and greatest in gaming. Our breadcrumb navigation system lets you seamlessly explore different gaming categories with futuristic style.</p> <h4 class="content-title">Featured Games</h4> <div class="game-grid"> <div class="game-card"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%230a0a0f'/%3E%3Cpath d='M60 30 L90 80 L30 80 Z' fill='%2339ff14'/%3E%3Ccircle cx='60' cy='50' r='10' fill='%23ff00ff'/%3E%3C/svg%3E" alt="Cyber Racer" class="game-image"> <div class="game-info"> <div class="game-title">Cyber Racer</div> <div class="game-category">Racing</div> </div> <div class="game-overlay"> <button class="play-button">Play Now</button> </div> </div> <div class="game-card"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%230a0a0f'/%3E%3Crect x='30' y='30' width='60' height='60' fill='%2300fffc'/%3E%3Ccircle cx='60' cy='60' r='20' fill='%239d00ff'/%3E%3C/svg%3E" alt="Neon Defender" class="game-image"> <div class="game-info"> <div class="game-title">Neon Defender</div> <div class="game-category">Strategy</div> </div> <div class="game-overlay"> <button class="play-button">Play Now</button> </div> </div> <div class="game-card"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%230a0a0f'/%3E%3Cpath d='M20 20 H100 V100 H20 Z' stroke='%23ff00ff' stroke-width='4' fill='none'/%3E%3Ccircle cx='40' cy='40' r='15' fill='%2339ff14'/%3E%3Ccircle cx='80' cy='80' r='15' fill='%2300fffc'/%3E%3C/svg%3E" alt="Quantum Quest" class="game-image"> <div class="game-info"> <div class="game-title">Quantum Quest</div> <div class="game-category">RPG</div> </div> <div class="game-overlay"> <button class="play-button">Play Now</button> </div> </div> <div class="game-card"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%230a0a0f'/%3E%3Ccircle cx='60' cy='60' r='40' stroke='%2300fffc' stroke-width='4' fill='none'/%3E%3Cpath d='M40 60 L60 40 L80 60 L60 80 Z' fill='%23ff00ff'/%3E%3C/svg%3E" alt="Void Runners" class="game-image"> <div class="game-info"> <div class="game-title">Void Runners</div> <div class="game-category">Action</div> </div> <div class="game-overlay"> <button class="play-button">Play Now</button> </div> </div> </div> </div> <div class="tab-content" id="genres"> <h3 class="content-title">Gaming Genres</h3> <p class="content-info">Explore diverse gaming experiences across different genres. From heart-pounding action to mind-bending puzzles, find your niche in the gaming universe.</p> <div class="feature-item"> <div class="feature-icon">🏹</div> <div class="feature-text"><strong>Action & Adventure</strong> - Experience adrenaline-pumping gameplay with intense combat and exploration</div> </div> <div class="feature-item"> <div class="feature-icon">🧠</div> <div class="feature-text"><strong>Strategy & Simulation</strong> - Test your tactical thinking and management skills</div> </div> <div class="feature-item"> <div class="feature-icon">🔮</div> <div class="feature-text"><strong>RPG & MMO</strong> - Immerse yourself in rich storytelling and character development</div> </div> <div class="feature-item"> <div class="feature-icon">🏎️</div> <div class="feature-text"><strong>Racing & Sports</strong> - Compete in high-speed competitions and athletic challenges</div> </div> <div class="feature-item"> <div class="feature-icon">👻</div> <div class="feature-text"><strong>Horror & Survival</strong> - Test your nerves in tense, atmospheric experiences</div> </div> <div class="game-tag">FPS</div> <div class="game-tag">Open World</div> <div class="game-tag">Roguelike</div> <div class="game-tag">Platformer</div> <div class="game-tag">Simulation</div> <div class="game-tag">Battle Royale</div> <div class="game-tag">MOBA</div> <div class="game-tag">Puzzle</div> </div> <div class="tab-content" id="multiplayer"> <h3 class="content-title">Multiplayer Universe</h3> <p class="content-info">Connect with players worldwide and forge new alliances or rivalries. Our multiplayer games feature state-of-the-art netcode for seamless online experiences.</p> <div class="feature-item"> <div class="feature-icon">🌐</div> <div class="feature-text"><strong>Global Matchmaking</strong> - Find opponents at your skill level 24/7</div> </div> <div class="feature-item"> <div class="feature-icon">👥</div> <div class="feature-text"><strong>Squad System</strong> - Team up with friends for coordinated gameplay</div> </div> <div class="feature-item"> <div class="feature-icon">💬</div> <div class="feature-text"><strong>Voice Chat</strong> - Integrated communication for strategic planning</div> </div> <div class="feature-item"> <div class="feature-icon">🏆</div> <div class="feature-text"><strong>Ranked Ladders</strong> - Climb competitive leaderboards</div> </div> <h4 class="content-title">Top Multiplayer Titles</h4> <div class="game-grid"> <div class="game-card"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%230a0a0f'/%3E%3Cpath d='M20 60 L60 20 L100 60 L60 100 Z' fill='%23ff00ff'/%3E%3Ccircle cx='60' cy='60' r='15' fill='%2300fffc'/%3E%3C/svg%3E" alt="Nexus Wars" class="game-image"> <div class="game-info"> <div class="game-title">Nexus Wars</div> <div class="game-category">MOBA</div> </div> <div class="game-overlay"> <button class="play-button">Play Now</button> </div> </div> <div class="game-card"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%230a0a0f'/%3E%3Ccircle cx='40' cy='40' r='20' fill='%2339ff14'/%3E%3Ccircle cx='80' cy='80' r='20' fill='%23ff00ff'/%3E%3Cline x1='40' y1='40' x2='80' y2='80' stroke='%2300fffc' stroke-width='4'/%3E%3C/svg%3E" alt="Astral Siege" class="game-image"> <div class="game-info"> <div class="game-title">Astral Siege</div> <div class="game-category">FPS</div> </div> <div class="game-overlay"> <button class="play-button">Play Now</button> </div> </div> </div> </div> <div class="tab-content" id="esports"> <h3 class="content-title">Esports Arena</h3> <p class="content-info">Enter the competitive gaming scene with our esports platform. Watch live tournaments, follow your favorite teams, and participate in community events.</p> <div class="feature-item"> <div class="feature-icon">📺</div> <div class="feature-text"><strong>Live Streams</strong> - Watch professional matches with expert commentary</div> </div> <div class="feature-item"> <div class="feature-icon">📊</div> <div class="feature-text"><strong>Tournament Brackets</strong> - Follow elimination rounds and championship series</div> </div> <div class="feature-item"> <div class="feature-icon">🎯</div> <div class="feature-text"><strong>Amateur Leagues</strong> - Compete in organized play at your skill level</div> </div> <div class="feature-item"> <div class="feature-icon">💰</div> <div class="feature-text"><strong>Prize Pools</strong> - Win rewards in community tournaments</div> </div> <h4 class="content-title">Upcoming Championships</h4> <div class="feature-item pulse"> <div class="feature-icon">🔴</div> <div class="feature-text"><strong>Cyber Circuit Finals</strong> - Starting in 3 days, 12:00 PM UTC</div> </div> <div class="feature-item"> <div class="feature-icon">⏰</div> <div class="feature-text"><strong>Neon League Season 4</strong> - Registration closes April 15</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const breadcrumbItems = document.querySelectorAll('.breadcrumb-item'); const tabContents = document.querySelectorAll('.tab-content'); const breadcrumbProgress = document.getElementById('breadcrumbProgress'); const breadcrumbDot = document.getElementById('breadcrumbDot'); // Set initial progress updateProgress(0); // Add click event to breadcrumb items breadcrumbItems.forEach(item => { item.addEventListener('click', function() { const index = parseInt(this.getAttribute('data-index')); const targetId = this.getAttribute('data-target'); // Update active breadcrumb breadcrumbItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); // Update active content tabContents.forEach(content => content.classList.remove('active')); document.getElementById(targetId).classList.add('active'); // Update progress bar updateProgress(index); // Add glitch effect addGlitchEffect(this); }); // Add hover sound effect item.addEventListener('mouseenter', function() { playHoverSound(); }); }); // Function to update progress bar function updateProgress(index) { const totalItems = breadcrumbItems.length - 1; const progressWidth = index === 0 ? 0 : (index / totalItems) * 100; breadcrumbProgress.style.width = `${progressWidth}%`; // Update dot position if (index === 0) { breadcrumbDot.style.left = '0%'; } else { breadcrumbDot.style.left = `${progressWidth}%`; } } // Function to play hover sound (simulate it with class) function playHoverSound() { // In a real implementation, we would play an actual sound // For this demo, we'll just add/remove a class for visual feedback const audioFeedback = document.createElement('div'); audioFeedback.style.position = 'absolute'; audioFeedback.style.width = '50px'; audioFeedback.style.height = '50px'; audioFeedback.style.background = 'radial-gradient(circle, rgba(57,255,20,0.2) 0%, rgba(57,255,20,0) 70%)'; audioFeedback.style.borderRadius = '50%'; audioFeedback.style.pointerEvents = 'none'; audioFeedback.style.zIndex = '1000'; audioFeedback.style.transform = 'translate(-50%, -50%)'; audioFeedback.style.opacity = '0'; audioFeedback.style.animation = 'pulse 0.5s 1'; document.body.appendChild(audioFeedback); // Position at cursor and animate document.addEventListener('mousemove', positionElement); function positionElement(e) { audioFeedback.style.left = `${e.clientX}px`; audioFeedback.style.top = `${e.clientY}px`; audioFeedback.style.opacity = '1'; // Remove listener after positioning once document.removeEventListener('mousemove', positionElement); // Remove element after animation setTimeout(() => { audioFeedback.remove(); }, 500); } } // Function to add temporary glitch effect function addGlitchEffect(element) { element.classList.add('glitch-effect'); element.setAttribute('data-text', element.textContent); setTimeout(() => { element.classList.remove('glitch-effect'); element.removeAttribute('data-text'); }, 1000); } // Add click events to game cards const gameCards = document.querySelectorAll('.game-card'); gameCards.forEach(card => { card.addEventListener('click', function() { const title = this.querySelector('.game-title').textContent; // Create a popup notification const notification = document.createElement('div'); notification.style.position = 'fixed'; notification.style.bottom = '20px'; notification.style.left = '50%'; notification.style.transform = 'translateX(-50%)'; notification.style
