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" >
2025-06-18 20:26:44 +03:00
< style >
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.flash-animation {
animation: flash 1.5s ease-in-out infinite;
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
}
.diff-enter {
animation: slideUp 0.3s ease-out;
}
.diff-exit {
animation: slideDown 0.3s ease-out;
}
< / style >
2025-06-16 16:07:02 +03:00
< / head >
< body class = "bg-dynamic-background text-dynamic-foreground overflow-hidden" >
<!-- Viewer Mode -->
2025-06-17 19:41:56 +03:00
< div id = "viewer-mode" class = "viewer-mode h-screen flex" >
<!-- Sidebar - File Tree -->
2025-06-17 20:32:06 +03:00
< div id = "file-sidebar" class = "hidden w-40 sm:w-44 border-r border-dynamic-border bg-dynamic-muted/30 flex-shrink-0 overflow-y-auto custom-scrollbar" >
< div class = "p-2 border-b border-dynamic-border" >
< h3 class = "text-[10px] font-semibold text-dynamic-muted-foreground uppercase tracking-wider" > Files< / h3 >
2025-06-16 16:07:02 +03:00
< / div >
2025-06-17 20:32:06 +03:00
< div id = "file-tree" class = "p-1" > < / div >
2025-06-16 16:07:02 +03:00
< / div >
2025-06-17 19:41:56 +03:00
<!-- Main Content -->
2025-06-18 20:26:44 +03:00
< div class = "flex-1 flex flex-col p-2 sm:p-4 h-full overflow-hidden" >
2025-06-17 19:41:56 +03:00
<!-- Top Bar with Context Pills and Edit Button -->
2025-06-18 20:26:44 +03:00
< div class = "flex justify-between items-start gap-2 mb-1 sm:mb-2 flex-shrink-0" >
2025-06-17 19:41:56 +03:00
<!-- Context Pills -->
2025-06-18 16:21:53 +03:00
< div id = "context-pills" class = "flex flex-wrap gap-1.5 empty:hidden flex-1 min-w-0 pr-2" > < / div >
2025-06-17 19:41:56 +03:00
<!-- Edit Button -->
2025-06-18 16:21:53 +03:00
< button id = "edit-button" class = "p-1 text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors flex-shrink-0" title = "Edit in designer" >
2025-06-17 19:41:56 +03:00
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" / >
< path d = "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" / >
< / svg >
< / button >
< / div >
2025-06-16 16:07:02 +03:00
2025-06-18 20:26:44 +03:00
<!-- Main Prompt Interface with Floating Diff - Flex - 1 to take remaining space -->
< div class = "flex-1 relative min-h-0 overflow-hidden" >
<!-- Floating Diff View (when enabled and viewport is compact) -->
< div id = "diff-view" class = "hidden absolute top-2 left-2 right-2 z-10 diff-floating" >
< div class = "bg-dynamic-background/95 backdrop-blur-sm border border-dynamic-border shadow-lg rounded-lg p-3" >
< div class = "flex items-center justify-between" >
< div class = "flex items-center gap-1.5" >
< svg class = "w-3 h-3 text-dynamic-primary flex-shrink-0" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule = "evenodd" / >
2025-06-18 17:28:14 +03:00
< / svg >
2025-06-18 20:26:44 +03:00
< span id = "diff-filename" class = "text-xs font-medium text-dynamic-foreground truncate" > < / span >
< / div >
< div class = "flex gap-1 items-center" >
< div class = "flex rounded-md overflow-hidden" >
< button id = "diff-accept-diff" class = "px-2 py-0.5 bg-green-500 hover:bg-green-600 text-white text-[10px] font-medium transition-colors flex items-center gap-0.5" >
< svg class = "w-2.5 h-2.5" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule = "evenodd" / >
< / svg >
< span class = "hidden sm:inline" > Accept< / span >
< / button >
< button id = "diff-reject-diff" class = "px-2 py-0.5 bg-red-500 hover:bg-red-600 text-white text-[10px] font-medium transition-colors flex items-center gap-0.5" >
< svg class = "w-2.5 h-2.5" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule = "evenodd" / >
< / svg >
< span class = "hidden sm:inline" > Reject< / span >
< / button >
< / div >
<!-- Collapse/Expand button -->
< button id = "toggle-diff" class = "p-0.5 text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors" title = "Toggle diff view" >
< svg class = "w-3 h-3 transform transition-transform" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule = "evenodd" / >
< / svg >
< / button >
< / div >
< / div >
< div id = "diff-content" class = "space-y-1 transition-all duration-300 overflow-hidden" >
< div id = "diff-old-content" class = "bg-red-50/70 dark:bg-red-950/20 p-2 rounded text-[10px] font-mono whitespace-pre-wrap text-red-700 dark:text-red-400 overflow-x-auto border border-red-200/50 dark:border-red-900/30 max-h-20 overflow-y-auto custom-scrollbar" > < / div >
< div id = "diff-new-content" class = "bg-green-50/70 dark:bg-green-950/20 p-2 rounded text-[10px] font-mono whitespace-pre-wrap text-green-700 dark:text-green-400 overflow-x-auto border border-green-200/50 dark:border-green-900/30 max-h-20 overflow-y-auto custom-scrollbar" > < / div >
2025-06-18 17:28:14 +03:00
< / div >
< / div >
< / div >
2025-06-18 20:26:44 +03:00
<!-- Container for inline diff and prompt -->
< div class = "h-full flex flex-col" >
<!-- Inline Diff View (when enabled and viewport has space) -->
< div id = "diff-view-inline" class = "hidden mb-2 flex-shrink-0" >
< div class = "bg-dynamic-muted border border-dynamic-border rounded-lg p-2" >
< div class = "flex items-center justify-between mb-1.5" >
< div class = "flex items-center gap-1.5" >
< svg class = "w-3 h-3 text-dynamic-primary flex-shrink-0" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule = "evenodd" / >
< / svg >
< span id = "inline-diff-filename" class = "text-xs font-medium text-dynamic-foreground truncate" > < / span >
< / div >
< div class = "flex rounded-md overflow-hidden" >
< button id = "inline-accept-diff" class = "px-2 py-0.5 bg-green-500 hover:bg-green-600 text-white text-[10px] font-medium transition-colors flex items-center gap-0.5" >
< svg class = "w-2.5 h-2.5" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule = "evenodd" / >
< / svg >
< span class = "hidden sm:inline" > Accept< / span >
< / button >
< button id = "inline-reject-diff" class = "px-2 py-0.5 bg-red-500 hover:bg-red-600 text-white text-[10px] font-medium transition-colors flex items-center gap-0.5" >
< svg class = "w-2.5 h-2.5" viewBox = "0 0 20 20" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule = "evenodd" / >
< / svg >
< span class = "hidden sm:inline" > Reject< / span >
< / button >
< / div >
< / div >
< div class = "space-y-0.5" >
< div id = "inline-old-content" class = "bg-red-50/70 dark:bg-red-950/20 p-1 rounded text-[10px] font-mono whitespace-pre-wrap text-red-700 dark:text-red-400 overflow-x-auto border border-red-200/50 dark:border-red-900/30 max-h-20 overflow-y-auto custom-scrollbar" > < / div >
< div id = "inline-new-content" class = "bg-green-50/70 dark:bg-green-950/20 p-1 rounded text-[10px] font-mono whitespace-pre-wrap text-green-700 dark:text-green-400 overflow-x-auto border border-green-200/50 dark:border-green-900/30 max-h-20 overflow-y-auto custom-scrollbar" > < / div >
< / div >
< / div >
< / div >
<!-- Prompt Container - Full height of parent -->
< div id = "prompt-container" class = "flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 relative focus-within:border-dynamic-primary transition-colors flex flex-col min-h-0" >
2025-06-18 20:41:57 +03:00
< div id = "prompt-text" class = "flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar text-sm sm:text-base duration-300" > < / div >
2025-06-18 20:26:44 +03:00
< div id = "prompt-placeholder" class = "text-dynamic-muted-foreground italic absolute top-3 left-3 pointer-events-none text-sm sm:text-base" > ← Enter your prompt on designer...< / div >
< / div >
2025-06-17 19:41:56 +03:00
< / div >
< / div >
2025-06-18 20:26:44 +03:00
<!-- Bottom Bar - Always visible with reduced height -->
< div class = "flex justify-between items-center gap-2 mt-1 pt-1 flex-shrink-0" >
<!-- Settings Pills - Smaller -->
< div id = "settings-pills" class = "flex gap-1 flex-wrap flex-1 min-w-0" > < / div >
2025-06-17 19:41:56 +03:00
2025-06-18 20:26:44 +03:00
<!-- Send Button - Smaller -->
< button id = "copy-button" class = "w-7 h-7 sm:w-8 sm:h-8 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity flex-shrink-0 shadow-md" title = "Send prompt" >
< svg width = "14" height = "14" class = "sm:w-4 sm:h-4" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
2025-06-17 19:41:56 +03:00
< path d = "M12 19V5M5 12l7-7 7 7" / >
< / svg >
< / button >
< / div >
2025-06-16 16:07:02 +03:00
< / 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 >
