| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| width: 100%; | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| background-color: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(8px); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| nav { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1.5rem 2rem; | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-weight: 600; | |
| font-size: 1.25rem; | |
| color: #1A1A1A; | |
| } | |
| .logo-icon { | |
| width: 28px; | |
| height: 28px; | |
| background: linear-gradient(to right, #5A5BEA, #8A3FFC); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .logo-icon svg { | |
| width: 16px; | |
| height: 16px; | |
| color: white; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: #6B6B6B; | |
| font-weight: 500; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { | |
| color: #1A1A1A; | |
| } | |
| </style> | |
| <nav> | |
| <a href="/" class="logo"> | |
| <div class="logo-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M3 12c0 1.654 1.346 3 3 3 .794 0 1.512-.315 2.049-.82l10.128-6.067c.526.367 1.18.577 1.875.577 2.028 0 3.682-1.569 3.682-3.5S21.028 3 19 3c-1.927 0-3.5 1.573-3.5 3.5 0 .341.056.669.146.981L6.293 12.82c-.41.44-.993.693-1.601.693C3.019 13.513 2 12.495 2 11.244V7.513C2 5.564 3.564 4 5.513 4h2.03c.027.161.053.322.053.5 0 2.481-2.019 4.5-4.5 4.5-.386 0-.759-.055-1.106-.147v3.147z"/> | |
| </svg> | |
| </div> | |
| <span>AIPHY</span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="/upload">Upload</a> | |
| <a href="/login">Login</a> | |
| </div> | |
| </nav> | |