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="{{ page.mode | default: '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' | relative_url }}">
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
|
|
|
|
|
<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 16:24:18 +03:00
|
|
|
<p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
|
2025-06-16 16:07:02 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
<button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
|
|
|
|
|
<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 -->
|
|
|
|
|
<div id="designer-mode" class="designer-content flex">
|
|
|
|
|
<!-- Left Panel - Customization -->
|
|
|
|
|
<div class="designer-panel w-80 flex flex-col h-full overflow-hidden">
|
|
|
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
|
|
|
|
<div class="p-6 space-y-4">
|
|
|
|
|
<!-- Prompt Text -->
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
|
|
|
|
|
<textarea id="designer-prompt"
|
|
|
|
|
class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
|
|
|
|
|
rows="8"
|
|
|
|
|
placeholder="Enter your prompt..."></textarea>
|
2025-06-16 16:24:18 +03:00
|
|
|
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
|
|
|
|
|
Load example →
|
|
|
|
|
</button>
|
2025-06-16 16:07:02 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Model & Mode -->
|
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
|
|
|
|
|
<select id="designer-model" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring">
|
|
|
|
|
<option value="o3">o3</option>
|
|
|
|
|
<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="custom">[Custom]</option>
|
|
|
|
|
</select>
|
|
|
|
|
<input type="text" id="designer-custom-model"
|
|
|
|
|
class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden"
|
|
|
|
|
placeholder="Enter custom model name">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Mode</label>
|
|
|
|
|
<select id="designer-mode-select" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring">
|
|
|
|
|
<option value="chat">Chat</option>
|
|
|
|
|
<option value="agent">Agent</option>
|
|
|
|
|
<option value="manual">Manual</option>
|
|
|
|
|
<option value="cloud">Cloud</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Options -->
|
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
|
|
|
<label class="flex items-center space-x-2">
|
|
|
|
|
<input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border">
|
|
|
|
|
<span class="text-sm text-dynamic-muted-foreground">Thinking</span>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="flex items-center space-x-2">
|
|
|
|
|
<input type="checkbox" id="designer-max" class="rounded border-dynamic-border">
|
|
|
|
|
<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">
|
|
|
|
|
<button type="button" id="theme-light" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center">
|
|
|
|
|
Light
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" id="theme-dark" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center">
|
|
|
|
|
Dark
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" id="theme-auto" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center">
|
|
|
|
|
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">
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#6b7280" data-dark="#e5e7eb"
|
|
|
|
|
style="background: linear-gradient(135deg, #6b7280 50%, #e5e7eb 50%)"
|
|
|
|
|
title="Minimal"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#1f2937" data-dark="#9ca3af"
|
|
|
|
|
style="background: linear-gradient(135deg, #1f2937 50%, #9ca3af 50%)"
|
|
|
|
|
title="Dark Gray"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#64748b" data-dark="#94a3b8"
|
|
|
|
|
style="background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%)"
|
|
|
|
|
title="Dimmed"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#3b82f6" data-dark="#60a5fa"
|
|
|
|
|
style="background: linear-gradient(135deg, #3b82f6 50%, #60a5fa 50%)"
|
|
|
|
|
title="Blue"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#10b981" data-dark="#34d399"
|
|
|
|
|
style="background: linear-gradient(135deg, #10b981 50%, #34d399 50%)"
|
|
|
|
|
title="Green"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#8b5cf6" data-dark="#a78bfa"
|
|
|
|
|
style="background: linear-gradient(135deg, #8b5cf6 50%, #a78bfa 50%)"
|
|
|
|
|
title="Purple"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
data-light="#f97316" data-dark="#fb923c"
|
|
|
|
|
style="background: linear-gradient(135deg, #f97316 50%, #fb923c 50%)"
|
|
|
|
|
title="Orange"></button>
|
|
|
|
|
<button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
|
|
|
|
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"
|
|
|
|
|
class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
|
|
|
|
|
<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"
|
|
|
|
|
class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
|
|
|
|
|
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"
|
|
|
|
|
class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
|
|
|
|
|
<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"
|
|
|
|
|
class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
|
|
|
|
|
pattern="^#[0-9A-Fa-f]{6}$">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Context -->
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Context</label>
|
|
|
|
|
<input type="text" id="designer-context"
|
|
|
|
|
class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring"
|
|
|
|
|
placeholder="file.py, @web, @codebase, #image">
|
|
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Generate Buttons - Fixed at bottom -->
|
|
|
|
|
<div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
|
2025-06-16 16:24:18 +03:00
|
|
|
<button id="generate-embed" class="w-full bg-dynamic-primary text-white p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
|
2025-06-16 16:07:02 +03:00
|
|
|
Generate Embed Code
|
|
|
|
|
</button>
|
|
|
|
|
<div class="pt-3 border-t border-dynamic-border">
|
|
|
|
|
<button id="reset-settings" class="w-full text-dynamic-muted-foreground p-2 text-sm hover:text-dynamic-foreground transition-colors">
|
|
|
|
|
Reset All Settings
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Right Panel - Preview -->
|
|
|
|
|
<div class="flex-1 flex items-center justify-center p-8 bg-dynamic-muted/20">
|
|
|
|
|
<div class="w-full max-w-3xl">
|
|
|
|
|
<h3 class="text-center text-sm font-medium text-dynamic-muted-foreground mb-4">Preview of the embed. You can change the settings on the left.</h3>
|
|
|
|
|
<div id="preview-wrapper" class="bg-dynamic-background border border-dynamic-border rounded-xl overflow-hidden shadow-lg" style="height: 400px;">
|
|
|
|
|
<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>
|
|
|
|
|
<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">
|
|
|
|
|
<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">
|
|
|
|
|
<div class="bg-dynamic-background rounded-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
|
|
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
|
|
<h3 class="text-lg font-semibold text-dynamic-foreground">Embed Code</h3>
|
|
|
|
|
<button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground">
|
|
|
|
|
<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>
|
|
|
|
|
<textarea id="embed-code" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2" rows="4" readonly></textarea>
|
|
|
|
|
<button id="copy-embed-code" class="mt-2 px-4 py-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90">Copy Code</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Share URL</label>
|
|
|
|
|
<textarea id="share-url" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2" rows="2" readonly></textarea>
|
|
|
|
|
<button id="copy-share-url" class="mt-2 px-4 py-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80">Copy URL</button>
|
|
|
|
|
</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' | relative_url }}"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
