|
|
class DocFooter extends HTMLElement { |
|
|
connectedCallback() { |
|
|
this.attachShadow({ mode: 'open' }); |
|
|
this.shadowRoot.innerHTML = ` |
|
|
<style> |
|
|
footer { |
|
|
background: linear-gradient(to top, #111827, transparent); |
|
|
padding: 3rem 2rem 2rem; |
|
|
margin-top: 5rem; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.footer-wrapper { |
|
|
max-width: 7xl; |
|
|
margin: 0 auto; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(1, 1fr); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
@media (min-width: 768px) { |
|
|
.footer-wrapper { |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
} |
|
|
} |
|
|
|
|
|
.footer-section h3 { |
|
|
color: white; |
|
|
font-size: 1.25rem; |
|
|
font-weight: bold; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.footer-section a { |
|
|
display: block; |
|
|
color: #9ca3af; |
|
|
text-decoration: none; |
|
|
margin-bottom: 0.5rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-section a:hover { |
|
|
color: #06b6d4; |
|
|
transform: translateX(4px); |
|
|
} |
|
|
|
|
|
.newsletter { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
border-radius: 1rem; |
|
|
padding: 2rem; |
|
|
margin-top: -4rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.newsletter h3 { |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.newsletter p { |
|
|
color: #9ca3af; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.newsletter-form { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.newsletter-input { |
|
|
flex: 1; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
padding: 0.75rem 1rem; |
|
|
border-radius: 0.5rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.newsletter-input:focus { |
|
|
outline: none; |
|
|
border-color: #06b6d4; |
|
|
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1); |
|
|
} |
|
|
|
|
|
.newsletter-input::placeholder { |
|
|
color: rgba(255, 255, 255, 0.5); |
|
|
} |
|
|
|
|
|
.newsletter-button { |
|
|
background: linear-gradient(to right, #06b6d4, #8b5cf6); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: 0.5rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.newsletter-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3); |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.social-link { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 3rem; |
|
|
height: 3rem; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
border-radius: 0.5rem; |
|
|
color: #9ca3af; |
|
|
transition: all 0.3s ease; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.social-link:hover { |
|
|
background: linear-gradient(to right, #06b6d4, #8b5cf6); |
|
|
color: white; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
text-align: center; |
|
|
color: #6b7280; |
|
|
margin-top: 3rem; |
|
|
padding-top: 2rem; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.copyright a { |
|
|
color: #9ca3af; |
|
|
text-decoration: none; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
|
|
|
.copyright a:hover { |
|
|
color: #06b6d4; |
|
|
} |
|
|
|
|
|
.language-selector { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 0.5rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.language-selector:hover { |
|
|
border-color: #06b6d4; |
|
|
} |
|
|
|
|
|
.language-selector option { |
|
|
background: #111827; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<footer> |
|
|
<div class="footer-wrapper"> |
|
|
<div class="newsletter"> |
|
|
<h3>Stay in the Loop</h3> |
|
|
<p>Get the latest updates and exclusive content delivered to your inbox.</p> |
|
|
<form class="newsletter-form"> |
|
|
<input type="email" placeholder="[email protected]" class="newsletter-input" required> |
|
|
<button type="submit" class="newsletter-button"> |
|
|
<span class="relative z-10">Subscribe</span> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="footer-section"> |
|
|
<h3>Product</h3> |
|
|
<a href="#features">Features</a> |
|
|
<a href="#pricing">Pricing</a> |
|
|
<a href="#examples">Examples</a> |
|
|
<a href="#templates">Templates</a> |
|
|
<a href="#roadmap">Roadmap</a> |
|
|
</div> |
|
|
|
|
|
<div class="footer-section"> |
|
|
<h3>Resources</h3> |
|
|
<a href="#documentation">Documentation</a> |
|
|
<a href="#guides">Guides</a> |
|
|
<a href="#api">API Reference</a> |
|
|
<a href="#tutorials">Tutorials</a> |
|
|
<a href="#community">Community</a> |
|
|
</div> |
|
|
|
|
|
<div class="footer-section"> |
|
|
<h3>Support</h3> |
|
|
<a href="#help">Help Center</a> |
|
|
<a href="#contact">Contact Us</a> |
|
|
<a href="#status">Status</a> |
|
|
<a href="#github">GitHub</a> |
|
|
<a href="#twitter">Twitter</a> |
|
|
</div> |
|
|
|
|
|
<div class="footer-section"> |
|
|
<h3>Company</h3> |
|
|
<a href="#about">About</a> |
|
|
<a href="#blog">Blog</a> |
|
|
<a href="#careers">Careers</a> |
|
|
<a href="#press">Press</a> |
|
|
<a href="#legal">Legal</a> |
|
|
|
|
|
<div class="social-links"> |
|
|
<a href="#" class="social-link"> |
|
|
<i data-feather="github"></i> |
|
|
</a> |
|
|
<a href="#" class="social-link"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="social-link"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="social-link"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copyright"> |
|
|
<p>© 2024 DocVortex. All rights reserved. | |
|
|
<a href="#privacy">Privacy Policy</a> | |
|
|
<a href="#terms">Terms of Service</a> |
|
|
</p> |
|
|
</div> |
|
|
</footer> |
|
|
`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const form = this.shadowRoot.querySelector('.newsletter-form'); |
|
|
const button = form.querySelector('button'); |
|
|
|
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const input = form.querySelector('input[type="email"]'); |
|
|
|
|
|
if (input.value) { |
|
|
button.innerHTML = '<span class="relative z-10">✓ Subscribed!</span>'; |
|
|
button.style.background = 'linear-gradient(to right, #10b981, #059669)'; |
|
|
input.value = ''; |
|
|
|
|
|
setTimeout(() => { |
|
|
button.innerHTML = '<span class="relative z-10">Subscribe</span>'; |
|
|
button.style.background = 'linear-gradient(to right, #06b6d4, #8b5cf6)'; |
|
|
}, 3000); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (typeof feather !== 'undefined') { |
|
|
feather.replace({ |
|
|
'stroke-width': 2, |
|
|
'height': 20, |
|
|
'width': 20 |
|
|
}); |
|
|
} |
|
|
}, 100); |
|
|
} |
|
|
} |
|
|
|
|
|
customElements.define('doc-footer', DocFooter); |
