hyprcrd/public/plugins/slideshow/slideshow.html

<!-- Slideshow Plugin: Viewer + Hotspot-Editor -->

<!-- Fullscreen presentation viewer -->
<div id="slideshow-viewer" class="hidden fixed inset-0" style="z-index:120;background:#000;">
    <div id="slideshow-slide" class="absolute inset-0 flex items-center justify-center overflow-hidden"></div>

    <!-- HUD -->
    <div id="slideshow-hud" class="absolute flex items-center justify-between px-4 py-2 text-t-muted" style="left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(0,0,0,0.6),transparent);pointer-events:none;">
        <div class="font-pixel text-[10px]" id="slideshow-title"></div>
        <div class="flex items-center gap-3 font-pixel text-[10px]" style="pointer-events:auto;">
            <button id="slideshow-prev" class="hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-base"></i></button>
            <span id="slideshow-counter">1 / 1</span>
            <button id="slideshow-next" class="hover:text-t-accent transition-colors"><i class="ph ph-caret-right text-base"></i></button>
            <div class="w-px h-4 bg-t-border mx-1"></div>
            <button id="slideshow-close" class="hover:text-t-danger transition-colors"><i class="ph ph-x text-base"></i></button>
        </div>
    </div>
</div>

<!-- Hotspot editor -->
<div id="slideshow-editor" class="hidden fixed inset-0" style="z-index:90;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);">
    <div class="bg-t-surface border border-t-border shadow-xl flex flex-col" style="width:92vw;max-width:1100px;height:88vh;max-height:820px;margin:auto;position:absolute;inset:0;border-radius:6px;">
        <!-- Toolbar -->
        <div class="flex items-center gap-2 px-3 py-2 border-b border-t-border shrink-0 flex-wrap">
            <span class="font-pixel text-[10px] text-t-accent">slide hotspots</span>
            <div class="w-px h-4 bg-t-border mx-1"></div>
            <label class="flex items-center gap-2 text-t-muted text-xs">
                <span class="font-pixel text-[10px]">image:</span>
                <input id="slideshow-ed-src" type="text" placeholder="/uploads/foo.png" class="bg-t-bg border border-t-border text-t-text text-xs font-mono" style="width:300px;padding:2px 8px;border-radius:3px;">
            </label>
            <button id="slideshow-ed-gallery" class="toolbar-btn text-xs" data-tip="pick from gallery"><i class="ph ph-images text-sm"></i></button>
            <button id="slideshow-ed-pick" class="toolbar-btn text-xs" data-tip="upload new image"><i class="ph ph-upload-simple text-sm"></i></button>
            <input type="file" id="slideshow-ed-file" accept="image/*" class="hidden">
            <div class="w-px h-4 bg-t-border mx-1"></div>
            <button id="slideshow-ed-delete" class="toolbar-btn text-xs" data-tip="delete selected hotspot" disabled><i class="ph ph-trash text-sm"></i></button>
            <div class="flex-1"></div>
            <span id="slideshow-ed-hint" class="font-pixel text-[9px] text-t-dim">drag on image to draw · click rect to select</span>
        </div>
        <!-- Stage -->
        <div class="flex-1 min-h-0 flex items-center justify-center bg-t-bg p-4" style="overflow:auto;">
            <div id="slideshow-ed-stage" style="position:relative;display:inline-block;user-select:none;max-width:100%;max-height:100%;">
                <img id="slideshow-ed-img" alt="" style="display:block;max-width:100%;max-height:70vh;pointer-events:none;">
                <div id="slideshow-ed-layer" class="absolute inset-0"></div>
            </div>
        </div>
        <!-- Footer -->
        <div class="flex items-center justify-end gap-2 px-3 py-2 border-t border-t-border shrink-0">
            <button id="slideshow-ed-cancel" class="toolbar-btn text-xs px-3 py-1">Cancel</button>
            <button id="slideshow-ed-ok" class="bg-t-accent text-t-bg text-xs font-bold px-4 py-1 cursor-pointer" style="border-radius:3px;">Insert</button>
        </div>
    </div>
</div>

<!-- Gallery picker for hotspot editor -->
<div id="slideshow-gallery-picker" class="hidden fixed inset-0" style="z-index:95;background:rgba(0,0,0,0.55);">
    <div class="bg-t-surface border border-t-border shadow-xl flex flex-col" style="width:80vw;max-width:900px;height:80vh;max-height:720px;margin:auto;position:absolute;inset:0;border-radius:6px;">
        <div class="flex items-center gap-3 px-4 py-3 border-b border-t-border shrink-0">
            <i class="ph ph-images text-t-accent text-base"></i>
            <span class="font-pixel text-xs text-t-accent">pick image</span>
            <span id="slideshow-gp-count" class="font-pixel text-[9px] text-t-dim"></span>
            <div class="flex-1"></div>
            <button id="slideshow-gp-upload" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
                <i class="ph ph-upload-simple text-sm"></i><span class="font-pixel text-[10px]">Upload</span>
            </button>
            <input type="file" id="slideshow-gp-file" accept="image/*" multiple class="hidden">
            <button id="slideshow-gp-cancel" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Cancel</span>
            </button>
        </div>
        <div id="slideshow-gp-grid" class="flex-1 min-h-0 p-4 grid gap-3 content-start select-none" style="overflow:auto;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));"></div>
    </div>
</div>

<!-- Target-Picker (second overlay on top of editor) -->
<div id="slideshow-picker" class="hidden fixed inset-0" style="z-index:95;background:rgba(0,0,0,0.5);">
    <div class="bg-t-surface border border-t-border shadow-xl flex flex-col" style="width:420px;max-height:70vh;margin:auto;position:absolute;inset:0;border-radius:6px;">
        <div class="flex items-center gap-2 px-3 py-2 border-b border-t-border shrink-0">
            <i class="ph ph-arrow-elbow-down-right text-sm text-t-accent"></i>
            <span class="font-pixel text-[10px] text-t-accent">hotspot target</span>
        </div>
        <div class="flex flex-col gap-1 p-3 border-b border-t-border shrink-0">
            <button data-pick-target="slide:next" class="slideshow-pick-row"><i class="ph ph-caret-right text-sm"></i><span>Next slide</span></button>
            <button data-pick-target="slide:prev" class="slideshow-pick-row"><i class="ph ph-caret-left text-sm"></i><span>Previous slide</span></button>
            <button data-pick-target="slide:first" class="slideshow-pick-row"><i class="ph ph-skip-back text-sm"></i><span>First slide</span></button>
        </div>
        <div class="px-3 py-2 shrink-0 border-b border-t-border">
            <input id="slideshow-pick-search" type="text" placeholder="search cards…" class="w-full bg-t-bg border border-t-border text-t-text text-xs" style="padding:4px 8px;border-radius:3px;">
        </div>
        <div id="slideshow-pick-list" class="flex-1 min-h-0 p-2 flex flex-col gap-1" style="overflow:auto;"></div>
        <div class="flex items-center justify-end gap-2 px-3 py-2 border-t border-t-border shrink-0">
            <button id="slideshow-pick-cancel" class="toolbar-btn text-xs px-3 py-1">Cancel</button>
        </div>
    </div>
</div>