Spaces:
Running
Running
File size: 5,362 Bytes
06469d6 c544ac4 06469d6 c544ac4 06469d6 | 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
footer {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
color: white;
padding: 3rem 2rem 1rem;
margin-top: auto;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #a0aec0;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section a:hover {
color: #667eea;
}
.social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-icon {
width: 40px;
height: 40px;
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-icon:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid #4a5568;
padding-top: 2rem;
text-align: center;
color: #a0aec0;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.social-icons {
justify-content: center;
}
}
</style>
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>CodeCollab Pro</h3>
<p style="color: #a0aec0; line-height: 1.6;">
The ultimate collaborative coding platform for teams who build amazing things together.
</p>
<div class="social-icons">
<a href="#" class="social-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</a>
<a href="#" class="social-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a href="#" class="social-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
</div>
</div>
<div class="footer-section">
<h3>Product</h3>
<ul>
<li><a href="/features.html">Features</a></li>
<li><a href="/pricing.html">Pricing</a></li>
<li><a href="/editor.html">Live Editor</a></li>
<li><a href="/agent-builder.html">AI Agent Builder</a></li>
<li><a href="/templates.html">Templates</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Resources</h3>
<ul>
<li><a href="/docs.html">Documentation</a></li>
<li><a href="/tutorials.html">Tutorials</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/support.html">Support</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Company</h3>
<ul>
<li><a href="/about.html">About</a></li>
<li><a href="/careers.html">Careers</a></li>
<li><a href="/privacy.html">Privacy</a></li>
<li><a href="/terms.html">Terms</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 CodeCollab Pro. All rights reserved. Built with ❤️ for developers.</p>
</div>
</footer>
`;
}
}
customElements.define('custom-footer', CustomFooter); |