create a fully functional ppt editing canvas where i put my html code and think it of like so i have created a presentation agent that will generate ppt using html css js example generated ppt
19e5d94
verified
| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| nav { | |
| background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%); | |
| color: white; | |
| padding: 1rem 0; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-link { | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 6px; | |
| transition: background-color 0.2s ease; | |
| } | |
| .nav-link:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| gap: 1rem; | |
| } | |
| .logo { | |
| font-size: 1.25rem; | |
| } | |
| } | |
| </style> | |
| <nav> | |
| <div class="nav-container"> | |
| <div class="logo"> | |
| <i data-feather="layout"></i> | |
| <span class="ml-2">SlideCraft Studio</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#" class="nav-link">Home</a> | |
| <a href="#" class="nav-link">Templates</a> | |
| <a href="#" class="nav-link">Help</a> | |
| </div> | |
| </div> | |
| </nav> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |