| class HostingInfo extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .hosting-container { |
| background: rgba(255,255,255,0.1); |
| border-radius: 16px; |
| padding: 2rem; |
| margin: 2rem 0; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.2); |
| } |
| h3 { |
| color: white; |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| } |
| ol { |
| color: rgba(255,255,255,0.8); |
| padding-left: 1.5rem; |
| line-height: 1.6; |
| } |
| li { |
| margin-bottom: 0.8rem; |
| } |
| code { |
| background: rgba(0,0,0,0.3); |
| padding: 0.2rem 0.4rem; |
| border-radius: 4px; |
| font-family: monospace; |
| } |
| a { |
| color: #38bdf8; |
| text-decoration: none; |
| border-bottom: 1px dashed currentColor; |
| } |
| </style> |
| <div class="hosting-container"> |
| <h3>How to Host This Website</h3> |
| <ol> |
| <li><strong>GitHub Pages:</strong> Upload to a GitHub repository, go to Settings > Pages, and enable GitHub Pages for the main branch</li> |
| <li><strong>Netlify:</strong> Drag and drop your project folder into Netlify's dashboard or connect your GitHub repository</li> |
| <li><strong>Vercel:</strong> Import your Git repository and deploy with zero configuration</li> |
| <li><strong>Local Server:</strong> For testing, run <code>npx serve</code> or <code>python -m http.server 8000</code> in your project directory</li> |
| </ol> |
| <p>For production hosting, consider services like <a href="https://vercel.com" target="_blank">Vercel</a>, <a href="https://netlify.com" target="_blank">Netlify</a>, or <a href="https://pages.github.com" target="_blank">GitHub Pages</a>.</p> |
| </div> |
| `; |
| } |
| } |
| customElements.define('hosting-info', HostingInfo); |
