Threshawk/tinycheck-pediatric-forms

1class CustomHeader extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        header {7          background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);8          color: white;9          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);10        }11        12        .logo {13          display: flex;14          align-items: center;15          gap: 0.75rem;16          font-weight: 700;17          text-decoration: none;18          color: white;19        }20        .logo img {21          height: 2.5rem;22        }23nav a {24          color: white;25          text-decoration: none;26          font-weight: 500;27          padding: 0.5rem 1rem;28          border-radius: 0.375rem;29          transition: background-color 0.2s;30        }31        32        nav a:hover {33          background-color: rgba(255, 255, 255, 0.2);34        }35      </style>36      <header class="py-4 px-6 md:px-8">37        <div class="container mx-auto flex justify-between items-center">38            <a href="/" class="logo">39              <img src="logo.png" alt="Sunshine Pediatrics Logo" class="h-10">40              <span class="text-xl">Sunshine Pediatrics</span>41</a>42          <nav class="hidden md:flex items-center space-x-2">43            <a href="/">Home</a>44            <a href="/services">Services</a>45            <a href="/contact">Contact</a>46          </nav>47          <button class="md:hidden text-white">48            <i data-feather="menu"></i>49          </button>50        </div>51      </header>52    `;53  }54}55 56customElements.define('custom-header', CustomHeader);