ah, i also want text to voice narration and the slides be automatic slides more like a vidoe way on loop. keep like 10 slides on average
59ce6b3 verified | class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| footer { | |
| background: linear-gradient(135deg, #db2777, #ec4899); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-3px) scale(1.1); | |
| } | |
| </style> | |
| <footer class="text-white py-8 px-6 mt-12"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="play-circle" class="text-2xl"></i> | |
| <span class="text-xl font-bold">Pinky Slides</span> | |
| </div> | |
| <p class="mt-2 opacity-80">Automated slideshows with voice narration</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="social-icon"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="social-icon"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="social-icon"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="social-icon"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-pink-300 border-opacity-30 mt-8 pt-6 text-center opacity-80 text-sm"> | |
| <p>© ${new Date().getFullYear()} Pinky Slideshow Spectacle. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |