| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| footer { |
| background: #000000; |
| color: #a3a3a3; |
| padding: 2rem; |
| text-align: center; |
| margin-top: auto; |
| border-top: 1px solid #dc2626; |
| } |
| .footer-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| .social-links { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
| .social-link { |
| color: #a3a3a3; |
| transition: all 0.3s ease; |
| } |
| .social-link:hover { |
| color: #dc2626; |
| transform: translateY(-2px); |
| } |
| .copyright { |
| font-size: 0.875rem; |
| } |
| </style> |
| <footer> |
| <div class="footer-content"> |
| <div class="social-links"> |
| <a href="#" class="social-link"><i data-feather="github"></i></a> |
| <a href="#" class="social-link"><i data-feather="twitter"></i></a> |
| <a href="#" class="social-link"><i data-feather="mail"></i></a> |
| </div> |
| <p class="copyright">© 2024 Hanzi Hunter. All rights reserved.</p> |
| </div> |
| </footer> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
