| class CustomHeader extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| } |
| |
| header { |
| background-color: white; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 16px; |
| } |
| |
| nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 16px 0; |
| } |
| |
| .logo { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: #3b82f6; |
| text-decoration: none; |
| display: flex; |
| align-items: center; |
| } |
| |
| .logo i { |
| margin-right: 8px; |
| } |
| |
| .nav-links { |
| display: flex; |
| list-style: none; |
| } |
| |
| .nav-links li { |
| margin-left: 24px; |
| } |
| |
| .nav-links a { |
| text-decoration: none; |
| color: #4b5563; |
| font-weight: 500; |
| transition: color 0.3s ease; |
| } |
| |
| .nav-links a:hover { |
| color: #3b82f6; |
| } |
| |
| .nav-buttons { |
| display: flex; |
| gap: 12px; |
| } |
| |
| .btn-outline { |
| padding: 8px 16px; |
| border-radius: 6px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: 1px solid #d1d5db; |
| background: white; |
| } |
| |
| .btn-outline:hover { |
| background-color: #f9fafb; |
| } |
| |
| .btn-primary { |
| padding: 8px 16px; |
| border-radius: 6px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| background-color: #3b82f6; |
| color: white; |
| border: none; |
| } |
| |
| .btn-primary:hover { |
| background-color: #2563eb; |
| } |
| |
| @media (max-width: 768px) { |
| .nav-links { |
| display: none; |
| } |
| } |
| </style> |
| |
| <header> |
| <div class="container"> |
| <nav> |
| <a href="/" class="logo"> |
| <i data-feather="aperture"></i> |
| <span>PromptCraft</span> |
| </a> |
| |
| <ul class="nav-links"> |
| <li><a href="/">Home</a></li> |
| <li><a href="#">Gallery</a></li> |
| <li><a href="#">Resources</a></li> |
| <li><a href="#">About</a></li> |
| </ul> |
| |
| <div class="nav-buttons"> |
| <button class="btn-outline"> |
| <i data-feather="log-in"></i> |
| <span>Login</span> |
| </button> |
| <button class="btn-primary"> |
| <i data-feather="user-plus"></i> |
| <span>Sign Up</span> |
| </button> |
| </div> |
| </nav> |
| </div> |
| </header> |
| `; |
| |
| |
| const script = document.createElement('script'); |
| script.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"; |
| script.onload = () => { |
| if (this.shadowRoot) { |
| feather.replace(); |
| } |
| }; |
| this.shadowRoot.appendChild(script); |
| } |
| } |
|
|
| customElements.define('custom-header', CustomHeader); |
