Spaces:
Running
Running
The design is very intentional, with each section's layout tailored to its specific purpose.
45755db verified | class AppHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| header { | |
| background: linear-gradient(180deg, rgba(17, 24, 39, 1) 0%, rgba(17, 24, 39, 0.95) 100%); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .search-container { | |
| position: relative; | |
| max-width: 500px; | |
| width: 100%; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 10px 40px 10px 16px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| color: white; | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| background: rgba(255, 255, 255, 0.15); | |
| border-color: #8b5cf6; | |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); | |
| } | |
| .search-input::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .search-button { | |
| position: absolute; | |
| right: 4px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); | |
| border: none; | |
| padding: 6px 12px; | |
| border-radius: 8px; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .search-button:hover { | |
| transform: translateY(-50%) scale(1.05); | |
| } | |
| .nav-link { | |
| color: rgba(255, 255, 255, 0.8); | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 8px 16px; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-link:hover { | |
| color: white; | |
| background: rgba(139, 92, 246, 0.1); | |
| } | |
| .nav-link.active { | |
| color: #8b5cf6; | |
| background: rgba(139, 92, 246, 0.1); | |
| } | |
| .mobile-menu-button { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| padding: 8px; | |
| } | |
| @media (max-width: 768px) { | |
| .desktop-nav { | |
| display: none; | |
| } | |
| .mobile-menu-button { | |
| display: block; | |
| } | |
| .mobile-menu { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: rgba(17, 24, 39, 0.98); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 16px; | |
| } | |
| .mobile-menu.active { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| <header class="sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <!-- Logo --> | |
| <a href="#" class="flex items-center gap-2 text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"> | |
| <svg width="32" height="32" 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> | |
| MangaFlow | |
| </a> | |
| <!-- Search Bar --> | |
| <div class="search-container hidden md:block"> | |
| <input type="text" placeholder="Buscar manga, c贸mic o autor..." class="search-input"> | |
| <button class="search-button"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <path d="m21 21-4.35-4.35"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="desktop-nav flex items-center gap-6"> | |
| <a href="#trending" class="nav-link active">Inicio</a> | |
| <a href="#library" class="nav-link">Biblioteca</a> | |
| <a href="#lists" class="nav-link">Listas</a> | |
| <a href="#blog" class="nav-link">Blog</a> | |
| <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 py-2 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105"> | |
| Iniciar Sesi贸n | |
| </button> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <button class="mobile-menu-button" onclick="toggleMobileMenu()"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="3" y1="12" x2="21" y2="12"></line> | |
| <line x1="3" y1="6" x2="21" y2="6"></line> | |
| <line x1="3" y1="18" x2="21" y2="18"></line> | |
| </svg> | |
| </button> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <div class="flex flex-col gap-4"> | |
| <input type="text" placeholder="Buscar..." class="search-input"> | |
| <a href="#trending" class="nav-link">Inicio</a> | |
| <a href="#library" class="nav-link">Biblioteca</a> | |
| <a href="#lists" class="nav-link">Listas</a> | |
| <a href="#blog" class="nav-link">Blog</a> | |
| <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 py-2 rounded-lg font-semibold"> | |
| Iniciar Sesi贸n | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| } | |
| customElements.define('app-header', AppHeader); | |
| // Mobile menu toggle function | |
| function toggleMobileMenu() { | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| if (mobileMenu) { | |
| mobileMenu.classList.toggle('active'); | |
| } | |
| } |