Spaces:
Running
Running
| 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); |