DoubleD31/binary-whisperer-code-matrix

1class CustomHeader extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                :host {7                    display: block;8                    width: 100%;9                }10                header {11                    background: var(--bg-secondary, #f3f4f6);12                    border-bottom: 1px solid var(--border-color, #d1d5db);13                    position: sticky;14                    top: 0;15                    z-index: 100;16                    backdrop-filter: blur(10px);17                    background: rgba(249, 250, 251, 0.95);18                }19                .theme-dark header {20                    background: rgba(17, 24, 39, 0.95);21                }22                .header-content {23                    max-width: 1200px;24                    margin: 0 auto;25                    padding: 1rem 1.5rem;26                    display: flex;27                    justify-content: space-between;28                    align-items: center;29                }30                .brand {31                    display: flex;32                    align-items: center;33                    gap: 0.75rem;34                }35                .logo {36                    font-size: 1.75rem;37                    animation: bounce 2s infinite;38                }39                .brand h1 {40                    font-size: 1.5rem;41                    background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #8b5cf6));42                    -webkit-background-clip: text;43                    -webkit-text-fill-color: transparent;44                    background-clip: text;45                    margin: 0;46                }47                .pocket-badge {48                    background: var(--success-color, #10b981);49                    color: white;50                    padding: 0.25rem 0.75rem;51                    border-radius: 0.5rem;52                    font-size: 0.75rem;53                    font-weight: 600;54                    text-transform: uppercase;55                    letter-spacing: 0.05em;56                }57                .header-nav {58                    display: flex;59                    align-items: center;60                    gap: 1rem;61                }62                .built-with {63                    color: var(--text-secondary, #6b7280);64                    text-decoration: none;65                    font-size: 0.875rem;66                    transition: color 0.2s;67                }68                .built-with:hover {69                    color: var(--primary-color, #6366f1);70                }71                .theme-btn {72                    background: var(--bg-tertiary, #e5e7eb);73                    border: 1px solid var(--border-color, #d1d5db);74                    border-radius: 0.5rem;75                    padding: 0.5rem;76                    cursor: pointer;77                    transition: all 0.2s;78                    font-size: 1.25rem;79                }80                .theme-btn:hover {81                    transform: scale(1.05);82                    background: var(--primary-color, #6366f1);83                    color: white;84                }85                @keyframes bounce {86                    0%, 100% { transform: translateY(0); }87                    50% { transform: translateY(-5px); }88                }89            </style>90            <header>91                <div class="header-content">92                    <div class="brand">93                        <span class="logo">👨‍💻</span>94                        <h1>theMan</h1>95                        <span class="pocket-badge">pocket-edition</span>96                    </div>97                    <nav class="header-nav">98                        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>99                        <button class="theme-btn" id="themeToggle" aria-label="Toggle theme">100                            <span class="theme-icon">🌙</span>101                        </button>102                    </nav>103                </div>104            </header>105        `;106        107        this.themeToggle = this.shadowRoot.getElementById('themeToggle');108        this.themeToggle.addEventListener('click', () => {109            this.toggleTheme();110        });111    }112 113    toggleTheme() {114        const isDark = document.body.classList.toggle('theme-dark');115        document.body.classList.toggle('theme-light', !isDark);116        this.themeToggle.querySelector('.theme-icon').textContent = isDark ? '☀️' : '🌙';117        118        // Dispatch event for other components119        window.dispatchEvent(new CustomEvent('themeChanged', { 120            detail: { isDark } 121        }));122        123        // Save preference124        localStorage.setItem('theme', isDark ? 'dark' : 'light');125    }126}127 128customElements.define('custom-header', CustomHeader);