Spaces:
Running
Running
I want you to make a copy of https://rgg.land/live it's a multi-stream site for viewing twitch streams, but it is made for specific event, without an ability to change streamers. I just want to be able to change streamers, number of 'windows' and that's basically it. Do not add any pictures or additional info, minimalistic is how I like it.
1ec46cb
verified
| class CustomHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| header { | |
| background-color: #111827; | |
| padding: 1rem; | |
| border-bottom: 1px solid #1f2937; | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo-icon { | |
| width: 24px; | |
| height: 24px; | |
| stroke: currentColor; | |
| } | |
| </style> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect> | |
| <line x1="2" y1="10" x2="22" y2="10"></line> | |
| <line x1="8" y1="4" x2="8" y2="8"></line> | |
| <line x1="16" y1="4" x2="16" y2="8"></line> | |
| </svg> | |
| MultiStream Magic | |
| </div> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-header', CustomHeader); |