| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| footer { |
| background: #f9fafb; |
| padding: 2rem; |
| text-align: center; |
| margin-top: 2rem; |
| border-top: 1px solid #e5e7eb; |
| } |
| .dark footer { |
| background: #111827; |
| border-top: 1px solid #374151; |
| } |
| .footer-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| .footer-links { |
| display: flex; |
| justify-content: center; |
| gap: 1.5rem; |
| margin-bottom: 1rem; |
| } |
| .footer-links a { |
| color: #4b5563; |
| text-decoration: none; |
| } |
| .dark .footer-links a { |
| color: #9ca3af; |
| } |
| .footer-links a:hover { |
| color: #6366f1; |
| } |
| .copyright { |
| color: #6b7280; |
| font-size: 0.875rem; |
| } |
| .dark .copyright { |
| color: #9ca3af; |
| } |
| </style> |
| <footer> |
| <div class="footer-content"> |
| <div class="footer-links"> |
| <a href="/privacy.html">Privacy</a> |
| <a href="/terms.html">Terms</a> |
| <a href="/contact.html">Contact</a> |
| </div> |
| <div class="copyright"> |
| © ${new Date().getFullYear()} RoboJacky's Ultimate Draft. All rights reserved. |
| </div> |
| </div> |
| </footer> |
| `; |
| } |
| } |
| customElements.define('custom-footer', CustomFooter); |
