Hugging Face's logo

Spaces:
John2121
/
bistrobyte
Running

App Files Community
bistrobyte
File size: 1,882 Bytes 
72d324f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b750700
 
 
 
 
72d324f
b750700
72d324f
 
 
 
 
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
54
55
56
 
class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 1rem 1.5rem;
                    background: rgba(255,255,255,0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid #e5e7eb;
                }
                .dark header {
                    background: rgba(17,24,39,0.8);
                    border-color: #374151;
                }
                .logo {
                    font-weight: 800;
                    font-size: 1.25rem;
                    color: #ff6a00;
                    letter-spacing: -0.5px;
                }
                nav a {
                    margin-left: 1rem;
                    text-decoration: none;
                    color: #111827;
                    font-weight: 500;
                }
                .dark nav a {
                    color: #f3f4f6;
                }
                nav a:hover {
                    color: #ff6a00;
                }
                @media (max-width: 640px) {
                    nav {
                        display: none;
                    }
                }
            </style>
            <header>
                <div class="logo">BistroByte</div>
                <nav>
                    <a href="index.html">Home</a>
                    <a href="about.html">About</a>
                    <a href="hours.html">Hours</a>
                    <a href="gallery.html">Gallery</a>
                    <a href="contact.html">Contact</a>
                </nav>
</header>
        `;
    }
}
customElements.define('custom-header', CustomHeader);