Create a clean, modern mobile app screen visualizing a four-step analytics lifecycle. Use soft gradients, rounded cards, simple line icons, and a minimal professional color palette (blues, greys, and soft oranges). Arrange each step vertically as elegant cards with small icons on the left and text on the right. Include subtle shadows, smooth spacing, and a dashboard-style aesthetic.
172cff4 verified | class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| nav { | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link:hover { | |
| color: #0284c7; | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| </style> | |
| <nav class="bg-white shadow-sm py-4"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="box" class="text-primary-500 w-6 h-6"></i> | |
| <a href="#" class="text-xl font-bold text-primary-900">PromptCraft</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Library</a> | |
| <a href="analytics-lifecycle.html" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Analytics</a> | |
| <a href="#" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Categories</a> | |
| <a href="#" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Resources</a> | |
| <a href="#" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">Sign Up</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <div id="mobile-menu" class="mobile-menu md:hidden mt-2"> | |
| <div class="flex flex-col space-y-3 py-4"> | |
| <a href="index.html" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Library</a> | |
| <a href="analytics-lifecycle.html" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Analytics</a> | |
| <a href="#" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Categories</a> | |
| <a href="#" class="nav-link text-gray-600 hover:text-primary-500 transition-colors">Resources</a> | |
| <a href="#" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors text-center">Sign Up</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| `; | |
| // Mobile menu toggle | |
| const menuButton = this.shadowRoot.getElementById('mobile-menu-button'); | |
| const mobileMenu = this.shadowRoot.getElementById('mobile-menu'); | |
| menuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| const icon = menuButton.querySelector('i'); | |
| if (mobileMenu.classList.contains('open')) { | |
| feather.replace(icon, 'x'); | |
| } else { | |
| feather.replace(icon, 'menu'); | |
| } | |
| }); | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |