saulteafarmer/awesome-chatgpt-prompts
1
0
Fork 0
mirror of https://github.com/f/awesome-chatgpt-prompts.git synced 2025-06-22 15:35:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Fatih Kadir Akın 2025-06-18 20:41:57 +03:00
parent e3b9457a46
commit fd8782ae62
5 changed files with 216 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/embed-preview.html
View File

@ -172,7 +172,7 @@
<!-- Prompt Container - Full height of parent --> <!-- 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"> <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">
<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 transition-all duration-300"></div> <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>
<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 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> </div>
</div> </div>

408
_layouts/embed.html
View File

@ -27,8 +27,30 @@
<link rel="stylesheet" href="{{ '/embed-style.css' | relative_url }}"> <link rel="stylesheet" href="{{ '/embed-style.css' | relative_url }}">
<link rel="icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}"> <link rel="icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
<meta name="description" content="Design and customize embeddable AI prompts"> <meta name="description" content="Design and customize embeddable AI prompts">
<style>
.checkerboard-bg {
background-image:
linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.06) 75%),
linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.06) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.dark .checkerboard-bg {
background-color: #1e1e1e;
background-image:
linear-gradient(45deg, #353535 25%, transparent 25%),
linear-gradient(-45deg, #353535 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #353535 75%),
linear-gradient(-45deg, transparent 75%, #353535 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
</head> </head>
<body class="bg-dynamic-background text-dynamic-foreground overflow-hidden"> <body class="bg-dynamic-background text-dynamic-foreground overflow-hidden checkerboard-bg">
<!-- Site Header --> <!-- Site Header -->
<header class="site-header"> <header class="site-header">
<div class="header-left"> <div class="header-left">
@ -49,12 +71,16 @@
<!-- Left Panel - Customization --> <!-- Left Panel - Customization -->
<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"> <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">
<div class="flex-1 overflow-y-auto custom-scrollbar"> <div class="flex-1 overflow-y-auto custom-scrollbar">
<div class="p-4 lg:p-6 lg:pt-0 space-y-4"> <div class="p-3 lg:p-4 space-y-3">
<!-- Example Selector - Separated at top -->
<div class="pb-4 border-b border-dynamic-border"> <!-- CONTENT SECTION -->
<div class="space-y-2"> <div class="space-y-2">
<label class="text-sm font-medium text-dynamic-muted-foreground">Load Example</label> <h3 class="text-xs font-semibold text-dynamic-foreground uppercase tracking-wider border-b border-dynamic-border pb-1">Prompt</h3>
<select id="example-select" class="w-full p-3 lg:p-2 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
<!-- Example Selector -->
<div class="space-y-1">
<label class="text-xs font-medium text-dynamic-muted-foreground">Load Example</label>
<select id="example-select" class="w-full p-2 bg-dynamic-muted border border-dynamic-border rounded text-xs focus-ring touch-target">
<option value="">Choose an example...</option> <option value="">Choose an example...</option>
<option value="vibe-coding">Vibe coding (no diff)</option> <option value="vibe-coding">Vibe coding (no diff)</option>
<option value="vibe-coding-diff">Vibe coding with diff</option> <option value="vibe-coding-diff">Vibe coding with diff</option>
@ -64,120 +90,125 @@
<option value="api-design">API design</option> <option value="api-design">API design</option>
</select> </select>
</div> </div>
</div>
<!-- Context -->
<!-- Context --> <div class="space-y-1">
<div class="space-y-2"> <label class="text-xs font-medium text-dynamic-muted-foreground">Context</label>
<label class="text-sm font-medium text-dynamic-muted-foreground">Context</label> <input type="text" id="designer-context"
<input type="text" id="designer-context" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring touch-target"
class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target" placeholder="file.py, @web, @codebase, #image">
placeholder="file.py, @web, @codebase, #image">
</div>
<!-- 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 touch-target"
rows="8"
placeholder="Enter your prompt..."></textarea>
</div>
<!-- Model & Mode -->
<div class="grid grid-cols-1 sm: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-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
<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="DeepSeek R1">DeepSeek R1</option>
<option value="custom">[Custom]</option>
</select>
<input type="text" id="designer-custom-model"
class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden touch-target"
placeholder="Enter custom model name">
</div> </div>
<div class="space-y-2">
<label class="text-sm font-medium text-dynamic-muted-foreground">Mode</label> <!-- Prompt Text -->
<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"> <div class="space-y-1">
<option value="chat">Chat</option> <label class="text-xs font-medium text-dynamic-muted-foreground">Prompt Text</label>
<option value="agent">Agent</option> <textarea id="designer-prompt"
<option value="manual">Manual</option> class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded text-xs resize-none focus-ring custom-scrollbar touch-target"
<option value="cloud">Cloud</option> rows="6"
</select> placeholder="Enter your prompt..."></textarea>
</div> </div>
</div> </div>
<!-- Options --> <!-- AI SETTINGS SECTION -->
<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">
<span class="text-sm text-dynamic-muted-foreground">Thinking</span>
</label>
<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">
<span class="text-sm text-dynamic-muted-foreground">MAX mode</span>
</label>
</div>
<!-- Theme Mode Selector -->
<div class="space-y-2"> <div class="space-y-2">
<label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label> <h3 class="text-xs font-semibold text-dynamic-foreground uppercase tracking-wider border-b border-dynamic-border pb-1">AI Settings</h3>
<div class="grid grid-cols-3 gap-2">
<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"> <!-- Model & Mode Grid -->
Light <div class="grid grid-cols-2 gap-2">
</button> <div class="space-y-1">
<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"> <label class="text-xs font-medium text-dynamic-muted-foreground">Model</label>
Dark <select id="designer-model" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring touch-target">
</button> <option value="o3">o3</option>
<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"> <option value="GPT 4.1">GPT 4.1</option>
Auto <option value="GPT 4o" selected>GPT 4o</option>
</button> <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>
<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 text-xs focus-ring hidden touch-target"
placeholder="Custom model">
</div>
<div class="space-y-1">
<label class="text-xs 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 text-xs focus-ring touch-target">
<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="flex gap-4">
<label class="flex items-center space-x-1.5 touch-target">
<input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border w-3.5 h-3.5">
<span class="text-xs text-dynamic-muted-foreground">Thinking</span>
</label>
<label class="flex items-center space-x-1.5 touch-target">
<input type="checkbox" id="designer-max" class="rounded border-dynamic-border w-3.5 h-3.5">
<span class="text-xs text-dynamic-muted-foreground">MAX mode</span>
</label>
</div> </div>
</div> </div>
<!-- Color Scheme --> <!-- APPEARANCE SECTION -->
<div class="space-y-3"> <div class="space-y-2">
<label class="text-sm font-medium text-dynamic-muted-foreground">Color Scheme</label> <h3 class="text-xs font-semibold text-dynamic-foreground uppercase tracking-wider border-b border-dynamic-border pb-1">Appearance</h3>
<!-- Theme Mode -->
<div class="space-y-1">
<label class="text-xs font-medium text-dynamic-muted-foreground">Theme</label>
<div class="grid grid-cols-3 gap-1">
<button type="button" id="theme-light" class="theme-mode-btn px-2 py-1.5 text-xs font-medium rounded border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target">
Light
</button>
<button type="button" id="theme-dark" class="theme-mode-btn px-2 py-1.5 text-xs font-medium rounded border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target">
Dark
</button>
<button type="button" id="theme-auto" class="theme-mode-btn px-2 py-1.5 text-xs font-medium rounded border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center touch-target">
Auto
</button>
</div>
</div>
<!-- Color Presets --> <!-- Color Presets -->
<div class="space-y-2"> <div class="space-y-1">
<label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label> <label class="text-xs font-medium text-dynamic-muted-foreground">Colors</label>
<div class="grid grid-cols-4 gap-2"> <div class="grid grid-cols-8 gap-1">
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#6b7280" data-dark="#e5e7eb" data-light="#6b7280" data-dark="#e5e7eb"
style="background: linear-gradient(135deg, #6b7280 50%, #e5e7eb 50%)" style="background: linear-gradient(135deg, #6b7280 50%, #e5e7eb 50%)"
title="Minimal"></button> title="Minimal"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#1f2937" data-dark="#9ca3af" data-light="#1f2937" data-dark="#9ca3af"
style="background: linear-gradient(135deg, #1f2937 50%, #9ca3af 50%)" style="background: linear-gradient(135deg, #1f2937 50%, #9ca3af 50%)"
title="Dark Gray"></button> title="Dark Gray"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#64748b" data-dark="#94a3b8" data-light="#64748b" data-dark="#94a3b8"
style="background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%)" style="background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%)"
title="Dimmed"></button> title="Dimmed"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#3b82f6" data-dark="#60a5fa" data-light="#3b82f6" data-dark="#60a5fa"
style="background: linear-gradient(135deg, #3b82f6 50%, #60a5fa 50%)" style="background: linear-gradient(135deg, #3b82f6 50%, #60a5fa 50%)"
title="Blue"></button> title="Blue"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#10b981" data-dark="#34d399" data-light="#10b981" data-dark="#34d399"
style="background: linear-gradient(135deg, #10b981 50%, #34d399 50%)" style="background: linear-gradient(135deg, #10b981 50%, #34d399 50%)"
title="Green"></button> title="Green"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#8b5cf6" data-dark="#a78bfa" data-light="#8b5cf6" data-dark="#a78bfa"
style="background: linear-gradient(135deg, #8b5cf6 50%, #a78bfa 50%)" style="background: linear-gradient(135deg, #8b5cf6 50%, #a78bfa 50%)"
title="Purple"></button> title="Purple"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#f97316" data-dark="#fb923c" data-light="#f97316" data-dark="#fb923c"
style="background: linear-gradient(135deg, #f97316 50%, #fb923c 50%)" style="background: linear-gradient(135deg, #f97316 50%, #fb923c 50%)"
title="Orange"></button> title="Orange"></button>
<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" <button type="button" class="color-preset w-full h-6 rounded border border-dynamic-border hover:border-dynamic-primary transition-colors touch-target"
data-light="#ec4899" data-dark="#f472b6" data-light="#ec4899" data-dark="#f472b6"
style="background: linear-gradient(135deg, #ec4899 50%, #f472b6 50%)" style="background: linear-gradient(135deg, #ec4899 50%, #f472b6 50%)"
title="Pink"></button> title="Pink"></button>
@ -185,132 +216,115 @@
</div> </div>
<!-- Custom Colors --> <!-- Custom Colors -->
<div class="space-y-2"> <div class="grid grid-cols-2 gap-2">
<label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Custom Colors</label> <div class="space-y-1">
<div class="space-y-3"> <label class="text-[10px] text-dynamic-muted-foreground">Light</label>
<div class="flex items-center gap-3"> <div class="flex gap-1">
<div class="flex items-center gap-2 flex-1"> <input type="color" id="designer-light-color" value="#3b82f6" class="w-6 h-6 rounded border border-dynamic-border cursor-pointer touch-target">
<div class="relative"> <input type="text" id="designer-light-color-text" value="#3b82f6" class="flex-1 px-1 py-1 bg-dynamic-background border border-dynamic-border rounded text-[10px] focus-ring font-mono touch-target" pattern="^#[0-9A-Fa-f]{6}$">
<input type="color" id="designer-light-color"
value="#3b82f6"
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">
<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-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"
pattern="^#[0-9A-Fa-f]{6}$">
</div>
</div>
</div> </div>
<div class="flex items-center gap-3"> </div>
<div class="flex items-center gap-2 flex-1"> <div class="space-y-1">
<div class="relative"> <label class="text-[10px] text-dynamic-muted-foreground">Dark</label>
<input type="color" id="designer-dark-color" <div class="flex gap-1">
value="#60a5fa" <input type="color" id="designer-dark-color" value="#60a5fa" class="w-6 h-6 rounded border border-dynamic-border cursor-pointer touch-target">
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"> <input type="text" id="designer-dark-color-text" value="#60a5fa" class="flex-1 px-1 py-1 bg-dynamic-background border border-dynamic-border rounded text-[10px] focus-ring font-mono touch-target" pattern="^#[0-9A-Fa-f]{6}$">
<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-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"
pattern="^#[0-9A-Fa-f]{6}$">
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Height -->
<!-- Height --> <div class="space-y-1">
<div class="space-y-2"> <label class="text-xs font-medium text-dynamic-muted-foreground">
<label class="text-sm font-medium text-dynamic-muted-foreground"> Height: <span id="height-value" class="text-dynamic-foreground">400</span>px
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>
<!-- File Tree -->
<div class="space-y-2">
<div class="flex items-center justify-between">
<label class="text-sm font-medium text-dynamic-muted-foreground">File Tree</label>
<label class="flex items-center space-x-1.5 text-xs">
<input type="checkbox" id="designer-show-filetree" class="rounded border-dynamic-border w-3.5 h-3.5" checked>
<span class="text-dynamic-muted-foreground">Show in preview</span>
</label> </label>
<input type="range" id="designer-height"
class="w-full h-1.5 bg-dynamic-muted rounded-lg appearance-none cursor-pointer slider"
min="200" max="800" value="400" step="50">
<div class="flex justify-between text-[10px] text-dynamic-muted-foreground opacity-60">
<span>200px</span>
<span>800px</span>
</div>
</div> </div>
<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):&#10;index.html&#10;styles/main.css&#10;scripts/app.js&#10;components/header.vue"></textarea>
<p class="text-xs text-dynamic-muted-foreground">
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*)
</p>
</div> </div>
<!-- Diff View --> <!-- FEATURES SECTION -->
<div class="space-y-2"> <div class="space-y-2">
<div class="flex items-center justify-between"> <h3 class="text-xs font-semibold text-dynamic-foreground uppercase tracking-wider border-b border-dynamic-border pb-1">Features</h3>
<label class="text-sm font-medium text-dynamic-muted-foreground">Diff View</label>
<label class="flex items-center space-x-1.5 text-xs"> <!-- File Tree -->
<input type="checkbox" id="designer-show-diff" class="rounded border-dynamic-border w-3.5 h-3.5"> <div class="space-y-1">
<span class="text-dynamic-muted-foreground">Show diff</span> <div class="flex items-center justify-between">
</label> <label class="text-xs font-medium text-dynamic-muted-foreground">File Tree</label>
</div> <label class="flex items-center space-x-1 text-[10px]">
<div id="diff-fields" class="space-y-3 hidden"> <input type="checkbox" id="designer-show-filetree" class="rounded border-dynamic-border w-3 h-3" checked>
<div> <span class="text-dynamic-muted-foreground">Show</span>
<label class="text-xs text-dynamic-muted-foreground">File Name</label> </label>
<input type="text" id="designer-diff-filename"
class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target font-mono"
placeholder="components/ProductList.tsx">
</div> </div>
<div> <textarea id="designer-filetree"
<label class="text-xs text-dynamic-muted-foreground">Flash Button</label> class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded text-[10px] resize-none focus-ring custom-scrollbar touch-target font-mono"
<select id="designer-flash-button" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target"> rows="4"
<option value="none">None</option> placeholder="index.html&#10;styles/main.css&#10;scripts/app.js&#10;components/header.vue"></textarea>
<option value="accept">Flash Accept Button</option> <p class="text-[9px] text-dynamic-muted-foreground opacity-60">
<option value="reject">Flash Reject Button</option> One per line. Use / for folders. Add * to highlight.
</select>
</div>
<div>
<label class="text-xs text-dynamic-muted-foreground">Old Text</label>
<textarea id="designer-diff-old"
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="4"
placeholder="// Original code..."></textarea>
</div>
<div>
<label class="text-xs text-dynamic-muted-foreground">New Text</label>
<textarea id="designer-diff-new"
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="4"
placeholder="// Updated code..."></textarea>
</div>
<p class="text-[10px] text-dynamic-muted-foreground mt-2 opacity-70">
Note: Large diffs may exceed URL length limits. Keep diff text short for sharing.
</p> </p>
</div> </div>
<!-- Diff View -->
<div class="space-y-1">
<div class="flex items-center justify-between">
<label class="text-xs font-medium text-dynamic-muted-foreground">Diff View</label>
<label class="flex items-center space-x-1 text-[10px]">
<input type="checkbox" id="designer-show-diff" class="rounded border-dynamic-border w-3 h-3">
<span class="text-dynamic-muted-foreground">Show</span>
</label>
</div>
<div id="diff-fields" class="space-y-2 hidden">
<div class="grid grid-cols-2 gap-2">
<div>
<label class="text-[10px] text-dynamic-muted-foreground">Filename</label>
<input type="text" id="designer-diff-filename"
class="w-full p-1.5 bg-dynamic-background border border-dynamic-border rounded text-[10px] focus-ring touch-target font-mono"
placeholder="file.tsx">
</div>
<div>
<label class="text-[10px] text-dynamic-muted-foreground">Flash</label>
<select id="designer-flash-button" class="w-full p-1.5 bg-dynamic-background border border-dynamic-border rounded text-[10px] focus-ring touch-target">
<option value="none">None</option>
<option value="accept">Accept</option>
<option value="reject">Reject</option>
</select>
</div>
</div>
<div>
<label class="text-[10px] text-dynamic-muted-foreground">Old Text</label>
<textarea id="designer-diff-old"
class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded text-[10px] resize-none focus-ring custom-scrollbar touch-target font-mono"
rows="3"
placeholder="// Original code..."></textarea>
</div>
<div>
<label class="text-[10px] text-dynamic-muted-foreground">New Text</label>
<textarea id="designer-diff-new"
class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded text-[10px] resize-none focus-ring custom-scrollbar touch-target font-mono"
rows="3"
placeholder="// Updated code..."></textarea>
</div>
<p class="text-[9px] text-dynamic-muted-foreground opacity-50">
Keep short for URL sharing.
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Generate Buttons - Fixed at bottom --> <!-- Generate Buttons - Fixed at bottom -->
<div class="p-4 lg:p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted lg:pb-0"> <div class="p-3 lg:p-4 space-y-2 border-t border-dynamic-border bg-dynamic-muted">
<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"> <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-2.5 rounded text-xs font-medium hover:opacity-90 transition-opacity touch-target">
Generate Embed Code Generate Embed Code
</button> </button>
<button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100 touch-target"> <button id="reset-settings" class="text-[10px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-50 hover:opacity-100 touch-target">
Reset settings Reset settings
</button> </button>
</div> </div>

4
embed-preview-script.js
View File

@ -439,7 +439,7 @@ class EmbedPreview {
const filenameElement = container.querySelector('[id$="-filename"]'); const filenameElement = container.querySelector('[id$="-filename"]');
if (filenameElement) { if (filenameElement) {
const filename = this.config.diffFilename || 'untitled'; const filename = this.config.diffFilename || 'untitled';
filenameElement.innerHTML = ` filenameElement.innerHTML = `
<span>${filename}</span> <span>${filename}</span>
<span class="ml-2 text-[10px] font-mono"> <span class="ml-2 text-[10px] font-mono">
<span class="text-green-600 dark:text-green-400">+${newLines}</span> <span class="text-green-600 dark:text-green-400">+${newLines}</span>
@ -517,7 +517,7 @@ class EmbedPreview {
// Function to update prompt margin based on diff view height // Function to update prompt margin based on diff view height
const updatePromptMargin = () => { const updatePromptMargin = () => {
const diffHeight = container.offsetHeight; const diffHeight = container.offsetHeight;
promptText.style.marginTop = `${diffHeight + 16}px`; // 16px for some breathing room promptText.parentElement.style.paddingTop = `${diffHeight + 16}px`; // 16px for some breathing room
}; };
// Set initial margin // Set initial margin

2
embed-script.js
View File

@ -948,7 +948,7 @@ Keep it warm but professional, around 150-200 words.`;
Include endpoint definitions, request/response schemas, and error handling patterns.`; Include endpoint definitions, request/response schemas, and error handling patterns.`;
document.getElementById('designer-context').value = '@web REST best practices, openapi.yaml'; document.getElementById('designer-context').value = '@Web, openapi.yaml';
document.getElementById('designer-filetree').value = document.getElementById('designer-filetree').value =
`api/ `api/
api/v1/ api/v1/

2
embed-style.css
View File

@ -249,7 +249,7 @@ body.dark-mode .designer-panel {
/* Adjust the scrollable content area */ /* Adjust the scrollable content area */
.designer-panel > .flex-1 { .designer-panel > .flex-1 {
padding-top: calc(var(--header-height) + 1rem); padding-top: calc(var(--header-height));
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;