Spaces:
Running
Running
| class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .footer-link:hover { | |
| color: #6C5CE7; | |
| } | |
| </style> | |
| <footer class="bg-gray-800 dark:bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i data-feather="play-circle" class="mr-2"></i> Anime Oasis | |
| </h3> | |
| <p class="text-gray-400">Watch your favorite anime anytime, anywhere.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Popular Anime</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">New Releases</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Genres</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">DMCA</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Subscribe</h4> | |
| <p class="text-gray-400 mb-4">Get the latest anime updates straight to your inbox.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg text-gray-900 focus:outline-none"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-r-lg"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© ${new Date().getFullYear()} Anime Oasis. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |