Spaces:
Running
Running
| class GalleryGrid extends HTMLElement { | |
| constructor() { | |
| super(); | |
| } | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| .gallery-section { | |
| margin-top: 2rem; | |
| } | |
| .gallery-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .gallery-title { | |
| color: #e2e8f0; | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .gallery-count { | |
| background: rgba(139, 92, 246, 0.2); | |
| color: #c4b5fd; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .gallery-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-btn { | |
| padding: 0.5rem; | |
| background: rgba(30, 41, 59, 0.6); | |
| border: 1px solid rgba(139, 92, 246, 0.2); | |
| border-radius: 0.375rem; | |
| color: #94a3b8; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .action-btn:hover { | |
| border-color: rgba(139, 92, 246, 0.4); | |
| color: #c4b5fd; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: 3rem; | |
| color: #475569; | |
| } | |
| @media (max-width: 640px) { | |
| .grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| <div class="gallery-section"> | |
| <div class="gallery-header"> | |
| <h2 class="gallery-title"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #8b5cf6;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> | |
| Generation History | |
| </h2> | |
| <div class="flex items-center gap-3"> | |
| <span class="gallery-count" id="gallery-count">0 items</span> | |
| <div class="gallery-actions"> | |
| <button class="action-btn" onclick="app.clearHistory()" title="Clear All"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> | |
| </button> | |
| <button class="action-btn" title="Grid View"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid" id="gallery-grid"> | |
| <div class="empty-state"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 1rem; opacity: 0.3;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> | |
| <p>No generations yet</p> | |
| <p style="font-size: 0.875rem; margin-top: 0.5rem; opacity: 0.7;">Your creations will be saved here automatically</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('gallery-grid', GalleryGrid); |