File size: 4,281 Bytes
509f3c2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
.footer-container {
background: rgba(17, 24, 39, 0.95);
border-top: 1px solid rgba(55, 65, 81, 0.3);
}
.footer-link {
color: #9ca3af;
transition: color 0.3s ease;
}
.footer-link:hover {
color: #22c55e;
}
</style>
<footer class="footer-container">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Brand -->
<div>
<div class="flex items-center space-x-3 mb-4">
<div class="w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
<i data-feather="cpu" class="w-6 h-6 text-gray-900"></i>
</div>
<span class="text-xl font-bold">PySQL Labs</span>
</div>
<p class="text-gray-400 text-sm">
Interactive platform for mastering Python and SQL through hands-on labs and interview simulations.
</p>
</div>
<!-- Quick Links -->
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#docs" class="footer-link">Documentation</a></li>
<li><a href="#cheatsheets" class="footer-link">Cheat Sheets</a></li>
<li><a href="#api" class="footer-link">API Reference</a></li>
<li><a href="#tutorials" class="footer-link">Video Tutorials</a></li>
</ul>
</div>
<!-- Resources -->
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-3">
<li><a href="#blog" class="footer-link">Developer Blog</a></li>
<li><a href="#community" class="footer-link">Community Forum</a></li>
<li><a href="#webinars" class="footer-link">Live Webinars</a></li>
<li><a href="#github" class="footer-link">GitHub Repo</a></li>
<li><a href="#roadmap" class="footer-link">Product Roadmap</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-3">
<li><a href="#privacy" class="footer-link">Privacy Policy</a></li>
<li><a href="#terms" class="footer-link">Terms of Service</a></li>
<li><a href="#cookies" class="footer-link">Cookie Policy</a></li>
<li><a href="#security" class="footer-link">Security</a></li>
<li><a href="#contact" class="footer-link">Contact Us</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-500 text-sm mb-4 md:mb-0">
© ${new Date().getFullYear()} PySQL Labs. For educational use only.
</div>
<div class="flex space-x-6">
<a href="#twitter" aria-label="Twitter">
<i data-feather="twitter" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
</a>
<a href="#github" aria-label="GitHub">
<i data-feather="github" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
</a>
<a href="#linkedin" aria-label="LinkedIn">
<i data-feather="linkedin" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
</a>
<a href="#discord" aria-label="Discord">
<i data-feather="message-circle" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
</a>
</div>
</div>
</div>
</footer>
`;
setTimeout(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
}, 100);
}
}
customElements.define('custom-footer', CustomFooter); |