j1225d's picture
Role: You are an expert Python backend developer specializing in building AI-powered services.
3f46192 verified
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
footer {
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
color: white;
padding: 2rem;
text-align: center;
margin-top: auto;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
}
.footer-links a {
color: #9ca3af;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: white;
}
.footer-text {
color: #9ca3af;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.footer-links {
gap: 1rem;
font-size: 0.875rem;
}
}
</style>
<footer>
<div class="footer-content">
<div class="footer-logo">
<i data-feather="zap" style="width: 24px; height: 24px;"></i>
NutriBot
</div>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Contact</a>
</div>
<p class="footer-text">&copy; 2024 IronCore Fitness. All rights reserved.</p>
</div>
</footer>
`;
}
}
customElements.define('custom-footer', CustomFooter);