Spaces:
Running
Running
redesign and make this website modern and interactive with nice beautiful modern layout, make sure the calculator works as expected, and also we have the images from the original website, and the hero image as well. make it mobile friendly and awesome modern design. Also add dark mode as well, and let's keep the made in America logo in there as well. let's make it magical
0d536fe verified | class IndustrialHeader extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| } | |
| connectedCallback() { | |
| this.render(); | |
| this.setupMobileMenu(); | |
| } | |
| render() { | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 50; | |
| transition: all 0.3s ease; | |
| } | |
| header { | |
| background: var(--header-bg, #ffffff); | |
| border-bottom: 1px solid var(--header-border, #e2e8f0); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 80px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--logo-color, #1e293b); | |
| text-decoration: none; | |
| } | |
| .logo svg { | |
| width: 2rem; | |
| height: 2rem; | |
| color: #3b82f6; | |
| } | |
| nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .nav-links a { | |
| color: var(--link-color, #475569); | |
| text-decoration: none; | |
| font-weight: 500; | |
| position: relative; | |
| transition: color 0.3s ease; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-links a:hover { | |
| color: #3b82f6; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, #3b82f6, #f59e0b); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .dark-mode-toggle { | |
| width: 60px; | |
| height: 30px; | |
| background: #e2e8f0; | |
| border-radius: 15px; | |
| cursor: pointer; | |
| position: relative; | |
| transition: background 0.3s ease; | |
| } | |
| .dark-mode-toggle.active { | |
| background: #3b82f6; | |
| } | |
| .dark-mode-toggle::after { | |
| content: ''; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 24px; | |
| height: 24px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: transform 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .dark-mode-toggle.active::after { | |
| transform: translateX(30px); | |
| } | |
| .mobile-menu-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| } | |
| .mobile-menu-toggle svg { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| color: var(--icon-color, #475569); | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: var(--mobile-menu-bg, #ffffff); | |
| flex-direction: column; | |
| padding: 1.5rem; | |
| gap: 1.5rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-links.open { | |
| display: flex; | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .mobile-menu-toggle { | |
| display: block; | |
| } | |
| .header-actions { | |
| display: none; | |
| } | |
| } | |
| :host(.dark) header { | |
| --header-bg: #0f172a; | |
| --header-border: #1e293b; | |
| --logo-color: #f1f5f9; | |
| --link-color: #cbd5e1; | |
| --icon-color: #94a3b8; | |
| --mobile-menu-bg: #1e293b; | |
| } | |
| :host(:not(.dark)) header { | |
| --header-bg: #ffffff; | |
| --header-border: #e2e8f0; | |
| --logo-color: #1e293b; | |
| --link-color: #475569; | |
| --icon-color: #64748b; | |
| --mobile-menu-bg: #ffffff; | |
| } | |
| </style> | |
| <header> | |
| <div class="container"> | |
| <a href="#" class="logo"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| Industrial Magic | |
| </a> | |
| <nav> | |
| <ul class="nav-links"> | |
| <li><a href="#hero">Home</a></li> | |
| <li><a href="#products">Products</a></li> | |
| <li><a href="#calculator">Calculator</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <div class="header-actions"> | |
| <div class="dark-mode-toggle" role="button" aria-label="Toggle dark mode"></div> | |
| </div> | |
| <button class="mobile-menu-toggle" aria-label="Toggle mobile menu"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| setupMobileMenu() { | |
| const toggle = this.shadowRoot.querySelector('.mobile-menu-toggle'); | |
| const navLinks = this.shadowRoot.querySelector('.nav-links'); | |
| toggle.addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| }); | |
| // Close menu when clicking a link | |
| navLinks.addEventListener('click', (e) => { | |
| if (e.target.tagName === 'A') { | |
| navLinks.classList.remove('open'); | |
| } | |
| }); | |
| } | |
| } | |
| customElements.define('industrial-header', IndustrialHeader); |