Spaces:
Running
Running
| class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .footer-link:hover { | |
| color: #4f46e5; | |
| } | |
| </style> | |
| <footer class="bg-gray-50 border-t border-gray-200"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/docs" class="footer-link text-gray-600 hover:text-indigo-600">Documentation</a></li> | |
| <li><a href="/tutorials" class="footer-link text-gray-600 hover:text-indigo-600">Tutorials</a></li> | |
| <li><a href="/api" class="footer-link text-gray-600 hover:text-indigo-600">API Reference</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Community</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/discord" class="footer-link text-gray-600 hover:text-indigo-600">Discord</a></li> | |
| <li><a href="/twitter" class="footer-link text-gray-600 hover:text-indigo-600">Twitter</a></li> | |
| <li><a href="/blog" class="footer-link text-gray-600 hover:text-indigo-600">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/privacy" class="footer-link text-gray-600 hover:text-indigo-600">Privacy Policy</a></li> | |
| <li><a href="/terms" class="footer-link text-gray-600 hover:text-indigo-600">Terms of Service</a></li> | |
| <li><a href="/license" class="footer-link text-gray-600 hover:text-indigo-600">License</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-200 text-center"> | |
| <p class="text-gray-500 text-sm">© ${new Date().getFullYear()} LocalAI. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |