File size: 1,862 Bytes
257af98 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
class CustomHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
width: 100%;
}
header {
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
}
.nav-link {
transition: all 0.3s ease;
position: relative;
}
.nav-link:hover {
transform: translateY(-2px);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: white;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
@media (max-width: 768px) {
.mobile-hidden {
display: none;
}
}
</style>
<header class="text-white">
<nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<i data-feather="search" class="w-8 h-8"></i>
<h1 class="text-2xl font-bold">CodeFingerprint Detective</h1>
</div>
</nav>
</header>
`;
}
}
customElements.define('custom-header', CustomHeader); |