Spaces:
Running
Running
| class PumpHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| width: 100%; | |
| } | |
| header { | |
| background-color: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(8px); | |
| padding: 1rem 2rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| color: #ef4444; | |
| text-decoration: none; | |
| } | |
| .logo:hover { | |
| color: #f87171; | |
| } | |
| nav ul { | |
| display: flex; | |
| gap: 1.5rem; | |
| list-style: none; | |
| } | |
| nav a { | |
| color: #e2e8f0; | |
| text-decoration: none; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: color 0.2s; | |
| } | |
| nav a:hover { | |
| color: #ef4444; | |
| } | |
| .mobile-menu-button { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: #e2e8f0; | |
| cursor: pointer; | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-menu-button { | |
| display: block; | |
| } | |
| nav { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background-color: #0f172a; | |
| padding: 1rem; | |
| display: none; | |
| flex-direction: column; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| nav.active { | |
| display: flex; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| } | |
| </style> | |
| <header> | |
| <div class="container"> | |
| <a href="index.html" class="logo"> | |
| <i data-feather="activity"></i> | |
| <span>Pump Doctor Pro</span> | |
| </a> | |
| <button class="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <nav> | |
| <ul> | |
| <li><a href="calculator.html"><i data-feather="calculator"></i> Calculator</a></li> | |
| <li><a href="diagnosis.html"><i data-feather="alert-triangle"></i> Diagnosis</a></li> | |
| <li><a href="database.html"><i data-feather="database"></i> Database</a></li> | |
| <li> | |
| <button id="themeToggle" class="flex items-center gap-2 text-current"> | |
| <i data-feather="moon"></i> | |
| <span>Dark Mode</span> | |
| </button> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| `; | |
| const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu-button'); | |
| const nav = this.shadowRoot.querySelector('nav'); | |
| const themeToggle = this.shadowRoot.getElementById('themeToggle'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| nav.classList.toggle('active'); | |
| }); | |
| themeToggle.addEventListener('click', () => { | |
| const html = document.documentElement; | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', html.classList.contains('dark')); | |
| const icon = themeToggle.querySelector('i'); | |
| if (html.classList.contains('dark')) { | |
| icon.setAttribute('data-feather', 'moon'); | |
| themeToggle.querySelector('span').textContent = 'Dark Mode'; | |
| } else { | |
| icon.setAttribute('data-feather', 'sun'); | |
| themeToggle.querySelector('span').textContent = 'Light Mode'; | |
| } | |
| feather.replace(); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('pump-header', PumpHeader); |