| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| width: 100%; |
| background-color: #f8fafc; |
| border-top: 1px solid #e2e8f0; |
| } |
| |
| footer { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 3rem 2rem; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| } |
| |
| .footer-logo { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: #0ea5e9; |
| margin-bottom: 1.5rem; |
| text-decoration: none; |
| } |
| |
| .footer-links { |
| display: flex; |
| gap: 1.5rem; |
| margin-bottom: 2rem; |
| } |
| |
| .footer-link { |
| color: #475569; |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| |
| .footer-link:hover { |
| color: #0ea5e9; |
| } |
| |
| .social-links { |
| display: flex; |
| gap: 1.5rem; |
| margin-bottom: 2rem; |
| } |
| |
| .social-link { |
| color: #64748b; |
| transition: color 0.2s; |
| } |
| |
| .social-link:hover { |
| color: #0ea5e9; |
| } |
| |
| .copyright { |
| color: #94a3b8; |
| font-size: 0.875rem; |
| } |
| </style> |
| |
| <footer> |
| <a href="/" class="footer-logo">CodeCanvas</a> |
| |
| <div class="footer-links"> |
| <a href="#projects" class="footer-link">Projects</a> |
| <a href="#writing" class="footer-link">Writing</a> |
| <a href="#contact" class="footer-link">Contact</a> |
| </div> |
| |
| <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="linkedin"></i> |
| </a> |
| <a href="#" class="social-link"> |
| <i data-feather="mail"></i> |
| </a> |
| </div> |
| |
| <p class="copyright">© ${new Date().getFullYear()} CodeCanvas Chronicles. All rights reserved.</p> |
| </footer> |
| `; |
| |
| |
| const featherScript = document.createElement('script'); |
| featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js'; |
| this.shadowRoot.appendChild(featherScript); |
| |
| featherScript.onload = () => { |
| if (window.feather) { |
| window.feather.replace(); |
| } |
| }; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
