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" >
< meta name = "page-mode" content = "designer" >
2025-06-16 16:09:12 +03:00
< title > prompts.chat/embed — awesome AI prompts< / title >
2025-06-16 16:07:02 +03:00
<!-- 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-style.css" >
< link rel = "icon" type = "image/x-icon" href = "/favicon.ico" >
< meta name = "description" content = "Design and customize embeddable AI prompts" >
< / head >
< body class = "bg-dynamic-background text-dynamic-foreground overflow-hidden" >
<!-- Site Header -->
< header class = "site-header" >
< div class = "header-left" >
2025-06-16 16:09:12 +03:00
< h1 class = "site-title" > prompts.chat/embed< / h1 >
2025-06-16 23:07:09 +03:00
< p class = "site-slogan hidden sm:block" > Design and share beautiful AI prompts, for your website or blog.< / p >
< p class = "site-slogan sm:hidden" > Design and share AI prompts< / p >
2025-06-16 16:07:02 +03:00
< / div >
< div class = "header-right" >
2025-06-16 23:07:09 +03:00
< button class = "dark-mode-toggle touch-target" onclick = "toggleDarkMode()" title = "Toggle dark mode" >
2025-06-16 16:07:02 +03:00
< svg class = "mode-icon sun-icon" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "5" > < / circle > < line x1 = "12" y1 = "1" x2 = "12" y2 = "3" > < / line > < line x1 = "12" y1 = "21" x2 = "12" y2 = "23" > < / line > < line x1 = "4.22" y1 = "4.22" x2 = "5.64" y2 = "5.64" > < / line > < line x1 = "18.36" y1 = "18.36" x2 = "19.78" y2 = "19.78" > < / line > < line x1 = "1" y1 = "12" x2 = "3" y2 = "12" > < / line > < line x1 = "21" y1 = "12" x2 = "23" y2 = "12" > < / line > < line x1 = "4.22" y1 = "19.78" x2 = "5.64" y2 = "18.36" > < / line > < line x1 = "18.36" y1 = "5.64" x2 = "19.78" y2 = "4.22" > < / line > < / svg >
< svg class = "mode-icon moon-icon" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" style = "display: none;" > < path d = "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" > < / path > < / svg >
< / button >
< / div >
< / header >
<!-- Designer Mode -->
2025-06-16 23:07:09 +03:00
< div id = "designer-mode" class = "designer-content flex flex-col lg:flex-row min-h-0" >
2025-06-16 16:07:02 +03:00
<!-- Left Panel - Customization -->
2025-06-16 23:07:09 +03:00
< div class = "designer-panel w-full lg:w-80 flex flex-col h-auto lg:h-full overflow-hidden order-2 lg:order-1 flex-shrink-0" >
2025-06-16 16:07:02 +03:00
< div class = "flex-1 overflow-y-auto custom-scrollbar" >
2025-06-16 23:07:09 +03:00
< div class = "p-4 lg:p-6 lg:pt-0 space-y-4" >
2025-06-16 16:28:19 +03:00
<!-- Context -->
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Context< / label >
< input type = "text" id = "designer-context"
2025-06-16 23:07:09 +03:00
class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target"
2025-06-16 16:28:19 +03:00
placeholder="file.py, @web, @codebase, #image">
< / div >
2025-06-16 16:07:02 +03:00
<!-- Prompt Text -->
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Prompt Text< / label >
< textarea id = "designer-prompt"
2025-06-16 23:07:09 +03:00
class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target"
2025-06-16 16:07:02 +03:00
rows="8"
placeholder="Enter your prompt...">< / textarea >
2025-06-16 23:07:09 +03:00
< button type = "button" id = "load-example" class = "text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1" >
2025-06-16 16:24:18 +03:00
Load example →
< / button >
2025-06-16 16:07:02 +03:00
< / div >
<!-- Model & Mode -->
2025-06-16 23:07:09 +03:00
< div class = "grid grid-cols-1 sm:grid-cols-2 gap-3" >
2025-06-16 16:07:02 +03:00
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Model< / label >
2025-06-16 23:07:09 +03:00
< select id = "designer-model" class = "w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target" >
2025-06-16 16:07:02 +03:00
< option value = "o3" > o3< / option >
2025-06-17 00:00:45 +03:00
< option value = "GPT 4.1" > GPT 4.1< / option >
< option value = "GPT 4o" selected > GPT 4o< / option >
< option value = "Claude 3.7 Sonnet" > Claude 3.7 Sonnet< / option >
< option value = "Claude 4 Sonnet" > Claude 4 Sonnet< / option >
< option value = "Claude 4 Opus" > Claude 4 Opus< / option >
< option value = "Gemini 2.5 Pro" > Gemini 2.5 Pro< / option >
< option value = "DeepSeek R1" > DeepSeek R1< / option >
2025-06-16 16:07:02 +03:00
< option value = "custom" > [Custom]< / option >
< / select >
< input type = "text" id = "designer-custom-model"
2025-06-16 23:07:09 +03:00
class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden touch-target"
2025-06-16 16:07:02 +03:00
placeholder="Enter custom model name">
< / div >
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Mode< / label >
2025-06-16 23:07:09 +03:00
< select id = "designer-mode-select" class = "w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target" >
2025-06-16 16:07:02 +03:00
< option value = "chat" > Chat< / option >
< option value = "agent" > Agent< / option >
< option value = "manual" > Manual< / option >
< option value = "cloud" > Cloud< / option >
< / select >
< / div >
< / div >
<!-- Options -->
2025-06-16 23:07:09 +03:00
< div class = "grid grid-cols-1 sm:grid-cols-2 gap-2 justify-items-start" >
< label class = "flex items-center space-x-2 touch-target" >
< input type = "checkbox" id = "designer-thinking" class = "rounded border-dynamic-border w-4 h-4" >
2025-06-16 16:07:02 +03:00
< span class = "text-sm text-dynamic-muted-foreground" > Thinking< / span >
< / label >
2025-06-16 23:07:09 +03:00
< label class = "flex items-center space-x-2 touch-target" >
< input type = "checkbox" id = "designer-max" class = "rounded border-dynamic-border w-4 h-4" >
2025-06-16 16:07:02 +03:00
< span class = "text-sm text-dynamic-muted-foreground" > MAX mode< / span >
< / label >
< / div >
<!-- Theme Mode Selector -->
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Theme Mode< / label >
< div class = "grid grid-cols-3 gap-2" >
2025-06-16 23:07:09 +03:00
< button type = "button" id = "theme-light" class = "theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target" >
2025-06-16 16:07:02 +03:00
Light
< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" id = "theme-dark" class = "theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target" >
2025-06-16 16:07:02 +03:00
Dark
< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" id = "theme-auto" class = "theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center touch-target" >
2025-06-16 16:07:02 +03:00
Auto
< / button >
< / div >
< / div >
<!-- Color Scheme -->
< div class = "space-y-3" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Color Scheme< / label >
<!-- Color Presets -->
< div class = "space-y-2" >
< label class = "text-xs text-dynamic-muted-foreground uppercase tracking-wider" > Presets< / label >
< div class = "grid grid-cols-4 gap-2" >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#6b7280" data-dark="#e5e7eb"
style="background: linear-gradient(135deg, #6b7280 50%, #e5e7eb 50%)"
title="Minimal">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#1f2937" data-dark="#9ca3af"
style="background: linear-gradient(135deg, #1f2937 50%, #9ca3af 50%)"
title="Dark Gray">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#64748b" data-dark="#94a3b8"
style="background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%)"
title="Dimmed">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#3b82f6" data-dark="#60a5fa"
style="background: linear-gradient(135deg, #3b82f6 50%, #60a5fa 50%)"
title="Blue">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#10b981" data-dark="#34d399"
style="background: linear-gradient(135deg, #10b981 50%, #34d399 50%)"
title="Green">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#8b5cf6" data-dark="#a78bfa"
style="background: linear-gradient(135deg, #8b5cf6 50%, #a78bfa 50%)"
title="Purple">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#f97316" data-dark="#fb923c"
style="background: linear-gradient(135deg, #f97316 50%, #fb923c 50%)"
title="Orange">< / button >
2025-06-16 23:07:09 +03:00
< button type = "button" class = "color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target"
2025-06-16 16:07:02 +03:00
data-light="#ec4899" data-dark="#f472b6"
style="background: linear-gradient(135deg, #ec4899 50%, #f472b6 50%)"
title="Pink">< / button >
< / div >
< / div >
<!-- Custom Colors -->
< div class = "space-y-2" >
< label class = "text-xs text-dynamic-muted-foreground uppercase tracking-wider" > Custom Colors< / label >
< div class = "space-y-3" >
< div class = "flex items-center gap-3" >
< div class = "flex items-center gap-2 flex-1" >
< div class = "relative" >
< input type = "color" id = "designer-light-color"
value="#3b82f6"
2025-06-16 23:07:09 +03:00
class="w-12 h-12 lg:w-10 lg:h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors touch-target">
2025-06-16 16:07:02 +03:00
< div class = "absolute inset-0 rounded-lg pointer-events-none" style = "background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%)" > < / div >
< / div >
< div class = "flex-1" >
< label class = "text-xs text-dynamic-muted-foreground block mb-1" > Light Mode< / label >
< input type = "text" id = "designer-light-color-text"
value="#3b82f6"
2025-06-16 23:07:09 +03:00
class="w-full px-3 py-2 lg:px-2 lg:py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono touch-target"
2025-06-16 16:07:02 +03:00
pattern="^#[0-9A-Fa-f]{6}$">
< / div >
< / div >
< / div >
< div class = "flex items-center gap-3" >
< div class = "flex items-center gap-2 flex-1" >
< div class = "relative" >
< input type = "color" id = "designer-dark-color"
value="#60a5fa"
2025-06-16 23:07:09 +03:00
class="w-12 h-12 lg:w-10 lg:h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors touch-target">
2025-06-16 16:07:02 +03:00
< div class = "absolute inset-0 rounded-lg pointer-events-none" style = "background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.1) 50%)" > < / div >
< / div >
< div class = "flex-1" >
< label class = "text-xs text-dynamic-muted-foreground block mb-1" > Dark Mode< / label >
< input type = "text" id = "designer-dark-color-text"
value="#60a5fa"
2025-06-16 23:07:09 +03:00
class="w-full px-3 py-2 lg:px-2 lg:py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono touch-target"
2025-06-16 16:07:02 +03:00
pattern="^#[0-9A-Fa-f]{6}$">
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Height -->
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" >
Height: < span id = "height-value" class = "text-dynamic-foreground" > 400< / span > px
< / label >
< input type = "range" id = "designer-height"
class="w-full h-2 bg-dynamic-muted rounded-lg appearance-none cursor-pointer slider"
min="200" max="800" value="400" step="50">
< div class = "flex justify-between text-xs text-dynamic-muted-foreground" >
< span > 200px< / span >
< span > 800px< / span >
< / div >
< / div >
2025-06-17 19:41:56 +03:00
<!-- File Tree -->
< div class = "space-y-2" >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > File Tree< / label >
< textarea id = "designer-filetree"
class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target font-mono"
rows="6"
placeholder="Enter files (one per line): index.html styles/main.css scripts/app.js components/header.vue">< / textarea >
< p class = "text-xs text-dynamic-muted-foreground" >
2025-06-17 20:32:06 +03:00
Enter filenames one per line. Use forward slashes for folders (e.g., folder/file.js).
Add * at the end of a filename to highlight it (e.g., main.js*)
2025-06-17 19:41:56 +03:00
< / p >
< / div >
2025-06-16 16:07:02 +03:00
< / div >
< / div >
<!-- Generate Buttons - Fixed at bottom -->
2025-06-16 23:07:09 +03:00
< div class = "p-4 lg:p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted lg:pb-0" >
< button id = "generate-embed" class = "w-full bg-dynamic-primary text-white p-3 lg:p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity touch-target" >
2025-06-16 16:07:02 +03:00
Generate Embed Code
< / button >
2025-06-16 23:07:09 +03:00
< button id = "reset-settings" class = "text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100 touch-target" >
2025-06-16 16:28:19 +03:00
Reset settings
< / button >
2025-06-16 16:07:02 +03:00
< / div >
< / div >
<!-- Right Panel - Preview -->
2025-06-16 23:07:09 +03:00
< div class = "flex-none lg:flex-1 flex items-center justify-center px-4 pb-4 pt-0 lg:p-8 bg-dynamic-muted/20 order-1 lg:order-2 min-h-[300px] lg:min-h-0" >
2025-06-16 16:07:02 +03:00
< div class = "w-full max-w-3xl" >
2025-06-16 23:07:09 +03:00
< h3 class = "text-center text-sm font-medium text-dynamic-muted-foreground mb-4 hidden lg:block" > Preview of the embed. You can change the settings below.< / h3 >
< div id = "preview-wrapper" class = "bg-dynamic-background border border-dynamic-border rounded-xl overflow-hidden shadow-lg h-[250px] sm:h-[300px] lg:h-[400px] mt-4 lg:mt-0" >
2025-06-16 16:07:02 +03:00
< div class = "h-full" id = "preview-container" >
<!-- Preview iframe will be injected here -->
< / div >
< / div >
2025-06-16 16:24:18 +03:00
< div class = "mt-4 space-y-1" >
< label class = "text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40" > Click to copy iframe code:< / label >
2025-06-16 23:07:09 +03:00
< div id = "iframe-snippet" class = "px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden touch-target" >
2025-06-16 16:24:18 +03:00
< iframe src="..."> < /iframe>
< / div >
< / div >
2025-06-16 16:07:02 +03:00
< / div >
< / div >
< / div >
<!-- Embed Code Modal -->
< div id = "embed-modal" class = "hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" >
2025-06-16 23:07:09 +03:00
< div class = "bg-dynamic-background rounded-xl p-4 lg:p-6 max-w-2xl w-full max-h-[90vh] lg:max-h-[80vh] overflow-y-auto" >
2025-06-16 16:07:02 +03:00
< div class = "flex justify-between items-center mb-4" >
< h3 class = "text-lg font-semibold text-dynamic-foreground" > Embed Code< / h3 >
2025-06-16 23:07:09 +03:00
< button id = "close-modal" class = "text-dynamic-muted-foreground hover:text-dynamic-foreground touch-target p-1" >
2025-06-16 16:07:02 +03:00
< svg width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M18 6L6 18M6 6l12 12" / >
< / svg >
< / button >
< / div >
< div class = "space-y-4" >
< div >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > iframe Embed Code< / label >
2025-06-16 23:07:09 +03:00
< textarea id = "embed-code" class = "w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2 resize-none" rows = "4" readonly > < / textarea >
< button id = "copy-embed-code" class = "mt-2 px-4 py-3 lg:py-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90 touch-target" > Copy Code< / button >
2025-06-16 16:07:02 +03:00
< / div >
< div >
< label class = "text-sm font-medium text-dynamic-muted-foreground" > Share URL< / label >
2025-06-16 23:07:09 +03:00
< textarea id = "share-url" class = "w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2 resize-none" rows = "2" readonly > < / textarea >
< button id = "copy-share-url" class = "mt-2 px-4 py-3 lg:py-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80 touch-target" > Copy URL< / button >
2025-06-16 16:07:02 +03:00
< / div >
< / div >
< / 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-script.js" > < / script >
< / body >
< / html >
