Spaces:
Running
Running
File size: 6,395 Bytes
47b4206 |
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 |
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
footer {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: white;
padding: 3rem 2rem 2rem;
margin-top: auto;
border-top: 1px solid rgba(55, 65, 81, 0.3);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2rem;
}
.footer-brand h3 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-brand p {
color: #9ca3af;
line-height: 1.6;
}
.footer-section h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: #e5e7eb;
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #9ca3af;
text-decoration: none;
transition: color 0.2s;
}
.footer-section a:hover {
color: #a78bfa;
}
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid rgba(55, 65, 81, 0.3);
text-align: center;
color: #6b7280;
display: flex;
justify-content: space-between;
align-items: center;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
color: #6b7280;
transition: color 0.2s;
}
.social-links a:hover {
color: #a78bfa;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
</style>
<footer>
<div class="footer-content">
<div class="footer-brand">
<h3>VS Code AI Builder</h3>
<p>Agentic Codegen Extension for VS Code. Build complete applications from natural language prompts with AI assistance.</p>
</div>
<div class="footer-section">
<h4>Features</h4>
<ul>
<li><a href="#features">Build from Prompt</a></li>
<li><a href="#features">Project-Aware</a></li>
<li><a href="#features">Patch & Review</a></li>
<li><a href="#features">Safe Mode</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Commands</h4>
<ul>
<li><a href="#commands">Build From Prompt</a></li>
<li><a href="#commands">Edit Selection</a></li>
<li><a href="#commands">Refactor Project</a></li>
<li><a href="#commands">Run Task</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="#installation">Documentation</a></li>
<li><a href="https://github.com">GitHub</a></li>
<li><a href="#installation">Quick Start</a></li>
<li><a href="#installation">Configuration</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 VS Code AI Builder. All rights reserved.</p>
<div class="social-links">
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0m6 13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5m-6 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3m-6-1c-.8 0-1.5-.7-1.5-1.5S5.2 9 6 9s1.5.7 1.5 1.5S6.8 13.5 6 13.5z"/>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
</svg>
</a>
</div>
</div>
</footer>
`;
}
}
customElements.define('custom-footer', CustomFooter); |