create a website called "algorithmic garden" that uses webxr or xr.js plus three.js to display a list of .glb models that can overlayed over whatever a cellphone camera sees (AR). There should be pinch to zoom and rotate commands on the phone interface.
e34da73 verified | class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| width: 100%; | |
| } | |
| footer { | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.1) 100%); | |
| } | |
| .footer-link { | |
| transition: all 0.2s ease; | |
| } | |
| .footer-link:hover { | |
| transform: translateY(-2px); | |
| color: #10b981; | |
| } | |
| </style> | |
| <footer class="py-8 px-6 border-t border-emerald-200 dark:border-gray-700 mt-12"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-sm text-gray-600 dark:text-gray-300"> | |
| © ${new Date().getFullYear()} Algorithmic ARboretum. All rights reserved. | |
| </p> | |
| </div> | |
| <div class="flex gap-4"> | |
| <a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-emerald-500"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-emerald-500"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-emerald-500"> | |
| <i data-feather="mail"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |