2025-06-16 16:07:02 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > {{ page.title | default: 'Prompt Share' }} - {{ site.title }}< / title >
<!-- Tailwind CSS -->
< script src = "https://cdn.tailwindcss.com" > < / script >
< script >
tailwind.config = {
theme: {
extend: {
colors: {
'dynamic-background': 'rgb(var(--background) / < alpha-value > )',
'dynamic-foreground': 'rgb(var(--foreground) / < alpha-value > )',
'dynamic-muted': 'rgb(var(--muted) / < alpha-value > )',
'dynamic-muted-foreground': 'rgb(var(--muted-foreground) / < alpha-value > )',
'dynamic-primary': 'rgb(var(--primary) / < alpha-value > )',
'dynamic-accent': 'rgb(var(--accent) / < alpha-value > )',
'dynamic-border': 'rgb(var(--border) / < alpha-value > )',
}
}
}
}
< / script >
< link rel = "stylesheet" href = "{{ '/embed-preview-style.css' | relative_url }}" >
< link rel = "icon" type = "image/x-icon" href = "{{ '/favicon.ico' | relative_url }}" >
< meta name = "description" content = "AI prompt viewer" >
< / head >
< body class = "bg-dynamic-background text-dynamic-foreground overflow-hidden" >
<!-- Viewer Mode -->
2025-06-16 23:07:09 +03:00
< div id = "viewer-mode" class = "viewer-mode h-screen flex flex-col p-2 sm:p-4" >
2025-06-16 16:07:02 +03:00
<!-- Context Pills -->
2025-06-16 23:07:09 +03:00
< div id = "context-pills" class = "flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide" > < / div >
2025-06-16 16:07:02 +03:00
<!-- Main Prompt Interface - Full Height -->
< div class = "flex-1 flex flex-col" >
2025-06-16 23:07:09 +03:00
< div id = "prompt-container" class = "flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 sm:p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col" >
2025-06-16 23:36:46 +03:00
< div id = "prompt-text" class = "flex-1 text-dynamic-foreground leading-relaxed overflow-y-auto custom-scrollbar text-sm sm:text-base" > < / div >
2025-06-16 23:07:09 +03:00
< div id = "prompt-placeholder" class = "text-dynamic-muted-foreground italic absolute top-3 sm:top-6 left-3 sm:left-6 pointer-events-none text-sm sm:text-base" > ← Enter your prompt on designer...< / div >
2025-06-16 16:07:02 +03:00
< / div >
< / div >
<!-- Bottom Bar -->
2025-06-16 23:07:09 +03:00
< div class = "flex justify-between items-center gap-2 mt-0 sm:mt-2" >
2025-06-16 16:07:02 +03:00
<!-- Settings Pills -->
2025-06-16 23:07:09 +03:00
< div id = "settings-pills" class = "flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0" > < / div >
2025-06-16 16:07:02 +03:00
<!-- Send Button (circular with arrow up) -->
2025-06-16 23:07:09 +03:00
< button id = "copy-button" class = "w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg touch-target" title = "Send prompt" >
< svg width = "16" height = "16" class = "sm:w-5 sm:h-5" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
2025-06-16 16:07:02 +03:00
< path d = "M12 19V5M5 12l7-7 7 7" / >
< / svg >
< / button >
< / div >
< / div >
<!-- Notification -->
< div id = "notification" class = "fixed top-4 right-4 bg-dynamic-accent text-white px-4 py-2 rounded-lg font-medium opacity-0 transition-opacity z-50 pointer-events-none" > < / div >
< script src = "{{ '/embed-preview-script.js' | relative_url }}" > < / script >
< / body >
< / html >
