a crypto market scanner that provides a visual representation of the crypto market, specifically which coins are pumping and which are dumping. We use a coins market cap as well as its current RSI to generate a visual collage of whats hot and whats not
27815f8
verified
| class CryptoHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .header-gradient { | |
| background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(16,185,129,0.2) 100%); | |
| } | |
| </style> | |
| <header class="header-gradient border-b border-gray-800"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-3 mb-4 md:mb-0"> | |
| <i data-feather="activity" class="text-primary-500"></i> | |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500"> | |
| Crypto Pulse Scanner | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search coins..." | |
| class="bg-gray-800 rounded-full py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 w-full md:w-64"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-full text-sm font-medium smooth-transition"> | |
| <i data-feather="refresh-cw" class="inline mr-1"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| } | |
| customElements.define('crypto-header', CryptoHeader); |