mirror of
https://github.com/f/awesome-chatgpt-prompts.git
synced 2025-06-22 15:35:04 +00:00
mobule responsove
This commit is contained in:
Fatih Kadir Akın
parent
30d68386cc
commit
02b85cf835
@ -29,26 +29,26 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="bg-dynamic-background text-dynamic-foreground overflow-hidden">
|
<body class="bg-dynamic-background text-dynamic-foreground overflow-hidden">
|
||||||
<!-- Viewer Mode -->
|
<!-- Viewer Mode -->
|
||||||
<div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-4">
|
<div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-2 sm:p-4">
|
||||||
<!-- Context Pills -->
|
<!-- Context Pills -->
|
||||||
<div id="context-pills" class="flex flex-wrap gap-2 empty:hidden mb-4"></div>
|
<div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide"></div>
|
||||||
|
|
||||||
<!-- Main Prompt Interface - Full Height -->
|
<!-- Main Prompt Interface - Full Height -->
|
||||||
<div class="flex-1 flex flex-col">
|
<div class="flex-1 flex flex-col">
|
||||||
<div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
|
<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">
|
||||||
<div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar"></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"></div>
|
||||||
<div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-6 left-6 pointer-events-none">← Enter your prompt on designer...</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom Bar -->
|
<!-- Bottom Bar -->
|
||||||
<div class="flex justify-between items-center mt-4">
|
<div class="flex justify-between items-center gap-2 mt-0 sm:mt-2">
|
||||||
<!-- Settings Pills -->
|
<!-- Settings Pills -->
|
||||||
<div id="settings-pills" class="flex gap-2 flex-wrap"></div>
|
<div id="settings-pills" class="flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0"></div>
|
||||||
|
|
||||||
<!-- Send Button (circular with arrow up) -->
|
<!-- Send Button (circular with arrow up) -->
|
||||||
<button id="copy-button" class="w-10 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" title="Send prompt">
|
<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="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
<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">
|
||||||
<path d="M12 19V5M5 12l7-7 7 7"/>
|
<path d="M12 19V5M5 12l7-7 7 7"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -33,10 +33,11 @@
|
|||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<h1 class="site-title">prompts.chat/embed</h1>
|
<h1 class="site-title">prompts.chat/embed</h1>
|
||||||
<p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
|
<button class="dark-mode-toggle touch-target" 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 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>
|
<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>
|
</button>
|
||||||
@ -44,16 +45,16 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Designer Mode -->
|
<!-- Designer Mode -->
|
||||||
<div id="designer-mode" class="designer-content flex">
|
<div id="designer-mode" class="designer-content flex flex-col lg:flex-row min-h-0">
|
||||||
<!-- Left Panel - Customization -->
|
<!-- Left Panel - Customization -->
|
||||||
<div class="designer-panel w-80 flex flex-col h-full overflow-hidden">
|
<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-6 space-y-4">
|
<div class="p-4 lg:p-6 lg:pt-0 space-y-4">
|
||||||
<!-- Context -->
|
<!-- Context -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm 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-lg text-sm focus-ring"
|
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>
|
</div>
|
||||||
|
|
||||||
@ -61,35 +62,35 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
|
||||||
<textarea id="designer-prompt"
|
<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"
|
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"
|
rows="8"
|
||||||
placeholder="Enter your prompt..."></textarea>
|
placeholder="Enter your prompt..."></textarea>
|
||||||
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
|
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1">
|
||||||
Load example →
|
Load example →
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Model & Mode -->
|
<!-- Model & Mode -->
|
||||||
<div class="grid grid-cols-2 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
|
<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">
|
<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="o3">o3</option>
|
||||||
<option value="gpt-4.1">GPT 4.1</option>
|
<option value="GPT-4.1">GPT 4.1</option>
|
||||||
<option value="gpt-4o" selected>GPT 4o</option>
|
<option value="GPT 4o" selected>GPT 4o</option>
|
||||||
<option value="claude-3.7-sonnet">Claude 3.7 Sonnet</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 Sonnet">Claude 4 Sonnet</option>
|
||||||
<option value="claude-4-opus">Claude 4 Opus</option>
|
<option value="Claude 4 Opus">Claude 4 Opus</option>
|
||||||
<option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
|
<option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
|
||||||
<option value="custom">[Custom]</option>
|
<option value="custom">[Custom]</option>
|
||||||
</select>
|
</select>
|
||||||
<input type="text" id="designer-custom-model"
|
<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"
|
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">
|
placeholder="Enter custom model name">
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Mode</label>
|
<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">
|
<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">
|
||||||
<option value="chat">Chat</option>
|
<option value="chat">Chat</option>
|
||||||
<option value="agent">Agent</option>
|
<option value="agent">Agent</option>
|
||||||
<option value="manual">Manual</option>
|
<option value="manual">Manual</option>
|
||||||
@ -99,13 +100,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Options -->
|
<!-- Options -->
|
||||||
<div class="grid grid-cols-2 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 justify-items-start">
|
||||||
<label class="flex items-center space-x-2">
|
<label class="flex items-center space-x-2 touch-target">
|
||||||
<input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border">
|
<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>
|
<span class="text-sm text-dynamic-muted-foreground">Thinking</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center space-x-2">
|
<label class="flex items-center space-x-2 touch-target">
|
||||||
<input type="checkbox" id="designer-max" class="rounded border-dynamic-border">
|
<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>
|
<span class="text-sm text-dynamic-muted-foreground">MAX mode</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -114,13 +115,13 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label>
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label>
|
||||||
<div class="grid grid-cols-3 gap-2">
|
<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">
|
<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">
|
||||||
Light
|
Light
|
||||||
</button>
|
</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">
|
<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">
|
||||||
Dark
|
Dark
|
||||||
</button>
|
</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">
|
<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">
|
||||||
Auto
|
Auto
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -134,35 +135,35 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label>
|
<label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label>
|
||||||
<div class="grid grid-cols-4 gap-2">
|
<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"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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>
|
||||||
@ -178,14 +179,14 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="color" id="designer-light-color"
|
<input type="color" id="designer-light-color"
|
||||||
value="#3b82f6"
|
value="#3b82f6"
|
||||||
class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
|
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 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>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<label class="text-xs text-dynamic-muted-foreground block mb-1">Light Mode</label>
|
<label class="text-xs text-dynamic-muted-foreground block mb-1">Light Mode</label>
|
||||||
<input type="text" id="designer-light-color-text"
|
<input type="text" id="designer-light-color-text"
|
||||||
value="#3b82f6"
|
value="#3b82f6"
|
||||||
class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
|
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}$">
|
pattern="^#[0-9A-Fa-f]{6}$">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -195,14 +196,14 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="color" id="designer-dark-color"
|
<input type="color" id="designer-dark-color"
|
||||||
value="#60a5fa"
|
value="#60a5fa"
|
||||||
class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
|
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(255,255,255,0.1) 50%)"></div>
|
<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>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<label class="text-xs text-dynamic-muted-foreground block mb-1">Dark Mode</label>
|
<label class="text-xs text-dynamic-muted-foreground block mb-1">Dark Mode</label>
|
||||||
<input type="text" id="designer-dark-color-text"
|
<input type="text" id="designer-dark-color-text"
|
||||||
value="#60a5fa"
|
value="#60a5fa"
|
||||||
class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
|
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}$">
|
pattern="^#[0-9A-Fa-f]{6}$">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -228,28 +229,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Generate Buttons - Fixed at bottom -->
|
<!-- Generate Buttons - Fixed at bottom -->
|
||||||
<div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
|
<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-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
|
<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">
|
||||||
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">
|
<button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100 touch-target">
|
||||||
Reset settings
|
Reset settings
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right Panel - Preview -->
|
<!-- Right Panel - Preview -->
|
||||||
<div class="flex-1 flex items-center justify-center p-8 bg-dynamic-muted/20">
|
<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">
|
||||||
<div class="w-full max-w-3xl">
|
<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>
|
<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" style="height: 400px;">
|
<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">
|
||||||
<div class="h-full" id="preview-container">
|
<div class="h-full" id="preview-container">
|
||||||
<!-- Preview iframe will be injected here -->
|
<!-- Preview iframe will be injected here -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 space-y-1">
|
<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>
|
<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">
|
<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">
|
||||||
<iframe src="..."></iframe>
|
<iframe src="..."></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -259,10 +260,10 @@
|
|||||||
|
|
||||||
<!-- Embed Code Modal -->
|
<!-- 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 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="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">
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h3 class="text-lg font-semibold text-dynamic-foreground">Embed Code</h3>
|
<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">
|
<button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground touch-target p-1">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path d="M18 6L6 18M6 6l12 12"/>
|
<path d="M18 6L6 18M6 6l12 12"/>
|
||||||
</svg>
|
</svg>
|
||||||
@ -271,13 +272,13 @@
|
|||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">iframe Embed Code</label>
|
<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>
|
<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-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90">Copy Code</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Share URL</label>
|
<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>
|
<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-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80">Copy URL</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -277,7 +277,7 @@ class EmbedPreview {
|
|||||||
|
|
||||||
createSettingPill(text, type) {
|
createSettingPill(text, type) {
|
||||||
const pill = document.createElement('div');
|
const pill = document.createElement('div');
|
||||||
pill.className = 'px-3 py-2 rounded-full text-xs font-medium flex items-center gap-1.5';
|
pill.className = 'rounded-full text-xs font-medium flex items-center gap-1.5';
|
||||||
|
|
||||||
let icon = '';
|
let icon = '';
|
||||||
|
|
||||||
@ -285,13 +285,13 @@ class EmbedPreview {
|
|||||||
if (type === 'mode') {
|
if (type === 'mode') {
|
||||||
// Mode pill keeps the background
|
// Mode pill keeps the background
|
||||||
if (this.isDarkMode) {
|
if (this.isDarkMode) {
|
||||||
pill.className += ' bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
|
pill.className += ' px-3 py-2 bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
|
||||||
} else {
|
} else {
|
||||||
pill.className += ' bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
|
pill.className += ' px-3 py-2 bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Model, thinking, and max pills only have text color
|
// Model, thinking, and max pills only have text color
|
||||||
pill.className += ' text-dynamic-primary';
|
pill.className += ' pl-1 text-dynamic-primary';
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
|
|||||||
@ -79,3 +79,107 @@
|
|||||||
.viewer-mode .prompt-input:focus {
|
.viewer-mode .prompt-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide scrollbar for horizontal scrolling pills */
|
||||||
|
.scrollbar-hide {
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none; /* Safari and Chrome */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch target improvements for mobile */
|
||||||
|
.touch-target {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive improvements */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
/* Ensure context pills don't wrap and scroll horizontally */
|
||||||
|
#context-pills {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* More compact pill spacing on mobile */
|
||||||
|
.pill,
|
||||||
|
#settings-pills .pill,
|
||||||
|
#settings-pills > * {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure button maintains minimum touch target */
|
||||||
|
#copy-button {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust text size in prompt area for better mobile readability */
|
||||||
|
#prompt-text {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure settings pills don't overflow */
|
||||||
|
#settings-pills {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact layout adjustments */
|
||||||
|
.viewer-mode {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Very small mobile devices */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
/* Even more compact spacing */
|
||||||
|
.pill,
|
||||||
|
#settings-pills .pill,
|
||||||
|
#settings-pills > * {
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smaller button on very small screens */
|
||||||
|
#copy-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
min-width: 36px;
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#copy-button svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure proper touch behavior */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
/* All interactive elements get proper touch targets */
|
||||||
|
button,
|
||||||
|
.pill,
|
||||||
|
#settings-pills > * {
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover effects on touch devices */
|
||||||
|
button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add active states for better feedback */
|
||||||
|
button:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -29,26 +29,26 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="bg-dynamic-background text-dynamic-foreground overflow-hidden">
|
<body class="bg-dynamic-background text-dynamic-foreground overflow-hidden">
|
||||||
<!-- Viewer Mode -->
|
<!-- Viewer Mode -->
|
||||||
<div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-4">
|
<div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-2 sm:p-4">
|
||||||
<!-- Context Pills -->
|
<!-- Context Pills -->
|
||||||
<div id="context-pills" class="flex flex-wrap gap-2 empty:hidden mb-4"></div>
|
<div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide"></div>
|
||||||
|
|
||||||
<!-- Main Prompt Interface - Full Height -->
|
<!-- Main Prompt Interface - Full Height -->
|
||||||
<div class="flex-1 flex flex-col">
|
<div class="flex-1 flex flex-col">
|
||||||
<div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
|
<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">
|
||||||
<div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar"></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"></div>
|
||||||
<div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-6 left-6 pointer-events-none">← Enter your prompt on designer...</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom Bar -->
|
<!-- Bottom Bar -->
|
||||||
<div class="flex justify-between items-center mt-4">
|
<div class="flex justify-between items-center gap-2 mt-0 sm:mt-2">
|
||||||
<!-- Settings Pills -->
|
<!-- Settings Pills -->
|
||||||
<div id="settings-pills" class="flex gap-2 flex-wrap"></div>
|
<div id="settings-pills" class="flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0"></div>
|
||||||
|
|
||||||
<!-- Send Button (circular with arrow up) -->
|
<!-- Send Button (circular with arrow up) -->
|
||||||
<button id="copy-button" class="w-10 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" title="Send prompt">
|
<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="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
<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">
|
||||||
<path d="M12 19V5M5 12l7-7 7 7"/>
|
<path d="M12 19V5M5 12l7-7 7 7"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -21,14 +21,33 @@
|
|||||||
--border-color-dark: #2d2d2d;
|
--border-color-dark: #2d2d2d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Reset body margin and ensure full height */
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Allow scrolling on mobile */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
overflow: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Site Header Styles */
|
/* Site Header Styles */
|
||||||
.site-header {
|
.site-header {
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
background-color: var(--bg-color-light);
|
background-color: var(--bg-color-light);
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -109,7 +128,18 @@ body.dark-mode .site-slogan {
|
|||||||
|
|
||||||
/* Adjust designer content to account for header */
|
/* Adjust designer content to account for header */
|
||||||
.designer-content {
|
.designer-content {
|
||||||
height: calc(100vh - var(--header-height));
|
height: 100vh;
|
||||||
|
padding-top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override height on mobile to allow scrolling */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.designer-content {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dynamic color classes */
|
/* Dynamic color classes */
|
||||||
@ -206,6 +236,10 @@ body.dark-mode .border-dynamic-border {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
width: 320px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark-mode .designer-panel {
|
body.dark-mode .designer-panel {
|
||||||
@ -213,6 +247,27 @@ body.dark-mode .designer-panel {
|
|||||||
border-right-color: var(--border-color-dark);
|
border-right-color: var(--border-color-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Adjust the scrollable content area */
|
||||||
|
.designer-panel > .flex-1 {
|
||||||
|
padding-top: calc(var(--header-height) + 1rem);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the bottom generate buttons section stays at bottom */
|
||||||
|
.designer-panel > .p-6:last-child {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgb(var(--muted));
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .designer-panel > .p-6:last-child {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
/* Ensure textarea can be full height */
|
/* Ensure textarea can be full height */
|
||||||
#designer-prompt {
|
#designer-prompt {
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
@ -249,10 +304,31 @@ body.dark-mode .designer-panel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive design improvements */
|
/* Responsive design improvements */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 1024px) {
|
||||||
|
.designer-content {
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.designer-panel {
|
.designer-panel {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: auto;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-bottom: 1px solid rgb(var(--border));
|
border-bottom: 1px solid rgb(var(--border));
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel > .flex-1 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the preview area doesn't take full height on mobile */
|
||||||
|
.designer-content > .flex-1 {
|
||||||
|
min-height: 300px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -387,3 +463,302 @@ body.dark-mode #iframe-snippet:hover {
|
|||||||
background-color: rgba(255, 255, 255, 0.08);
|
background-color: rgba(255, 255, 255, 0.08);
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================== */
|
||||||
|
/* Mobile Responsive Styles */
|
||||||
|
/* ============================== */
|
||||||
|
|
||||||
|
/* Touch target improvements for mobile */
|
||||||
|
.touch-target {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
.touch-target {
|
||||||
|
min-height: 48px;
|
||||||
|
min-width: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile menu toggle button */
|
||||||
|
.mobile-menu-toggle {
|
||||||
|
display: none;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--accent-color);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile close button - hidden by default */
|
||||||
|
.mobile-close-btn {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(var(--header-height) + 1rem);
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 10;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: rgb(var(--muted-foreground));
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-close-btn:hover {
|
||||||
|
background: rgb(var(--muted));
|
||||||
|
color: rgb(var(--foreground));
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-close-btn svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile overlay */
|
||||||
|
.mobile-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-overlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile devices */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* Header adjustments */
|
||||||
|
.site-header {
|
||||||
|
padding: 1rem;
|
||||||
|
height: 60px;
|
||||||
|
--header-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-slogan {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Simplified mobile layout - stack vertically */
|
||||||
|
.designer-content {
|
||||||
|
flex-direction: column !important;
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 60px; /* Account for fixed header */
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: auto;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid rgb(var(--border));
|
||||||
|
order: 2; /* Bottom on mobile */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel > .flex-1 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
height: auto;
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preview adjustments */
|
||||||
|
.designer-content > .flex-1 {
|
||||||
|
order: 1; /* Top on mobile */
|
||||||
|
padding: 1rem;
|
||||||
|
min-height: 300px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preview-wrapper {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 250px; /* Fixed height on mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form element adjustments */
|
||||||
|
.designer-panel .p-4 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="color"],
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font-size: 16px; /* Prevent zoom on iOS */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make buttons more touch-friendly */
|
||||||
|
button {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-preset {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal adjustments */
|
||||||
|
#embed-modal > div {
|
||||||
|
margin: 1rem;
|
||||||
|
max-height: calc(100vh - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Notification adjustments */
|
||||||
|
#notification {
|
||||||
|
top: auto;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small mobile devices */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.site-header {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stack color inputs vertically */
|
||||||
|
.flex.items-center.gap-3 {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stack grid columns on very small screens */
|
||||||
|
.grid.grid-cols-2,
|
||||||
|
.grid.grid-cols-3,
|
||||||
|
.grid.grid-cols-4 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust modal padding */
|
||||||
|
#embed-modal > div {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make range slider easier to use */
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landscape orientation adjustments */
|
||||||
|
@media (max-height: 600px) and (orientation: landscape) {
|
||||||
|
.site-header {
|
||||||
|
height: 50px;
|
||||||
|
--header-height: 50px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel {
|
||||||
|
max-height: calc(100vh - 50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel .flex-1 {
|
||||||
|
max-height: calc(100vh - 170px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#designer-prompt {
|
||||||
|
min-height: 100px;
|
||||||
|
rows: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch device optimizations */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
/* Increase tap targets */
|
||||||
|
button,
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"],
|
||||||
|
select {
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover effects on touch devices */
|
||||||
|
.theme-mode-btn:hover:not(.bg-dynamic-primary),
|
||||||
|
.color-preset:hover,
|
||||||
|
button:hover {
|
||||||
|
transform: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add active states for better feedback */
|
||||||
|
button:active,
|
||||||
|
.theme-mode-btn:active,
|
||||||
|
.color-preset:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode support */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.border-dynamic-border {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
outline-width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion support */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right Panel - Preview adjustments */
|
||||||
|
.designer-content > .flex-1 {
|
||||||
|
padding-top: var(--header-height);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -33,10 +33,11 @@
|
|||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<h1 class="site-title">prompts.chat/embed</h1>
|
<h1 class="site-title">prompts.chat/embed</h1>
|
||||||
<p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
|
<button class="dark-mode-toggle touch-target" 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 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>
|
<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>
|
</button>
|
||||||
@ -44,16 +45,16 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Designer Mode -->
|
<!-- Designer Mode -->
|
||||||
<div id="designer-mode" class="designer-content flex">
|
<div id="designer-mode" class="designer-content flex flex-col lg:flex-row min-h-0">
|
||||||
<!-- Left Panel - Customization -->
|
<!-- Left Panel - Customization -->
|
||||||
<div class="designer-panel w-80 flex flex-col h-full overflow-hidden">
|
<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-6 space-y-4">
|
<div class="p-4 lg:p-6 lg:pt-0 space-y-4">
|
||||||
<!-- Context -->
|
<!-- Context -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm 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-lg text-sm focus-ring"
|
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>
|
</div>
|
||||||
|
|
||||||
@ -61,35 +62,35 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
|
||||||
<textarea id="designer-prompt"
|
<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"
|
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"
|
rows="8"
|
||||||
placeholder="Enter your prompt..."></textarea>
|
placeholder="Enter your prompt..."></textarea>
|
||||||
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
|
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1">
|
||||||
Load example →
|
Load example →
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Model & Mode -->
|
<!-- Model & Mode -->
|
||||||
<div class="grid grid-cols-2 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
|
<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">
|
<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="o3">o3</option>
|
||||||
<option value="gpt-4.1">GPT 4.1</option>
|
<option value="GPT-4.1">GPT 4.1</option>
|
||||||
<option value="gpt-4o" selected>GPT 4o</option>
|
<option value="GPT 4o" selected>GPT 4o</option>
|
||||||
<option value="claude-3.7-sonnet">Claude 3.7 Sonnet</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 Sonnet">Claude 4 Sonnet</option>
|
||||||
<option value="claude-4-opus">Claude 4 Opus</option>
|
<option value="Claude 4 Opus">Claude 4 Opus</option>
|
||||||
<option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
|
<option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
|
||||||
<option value="custom">[Custom]</option>
|
<option value="custom">[Custom]</option>
|
||||||
</select>
|
</select>
|
||||||
<input type="text" id="designer-custom-model"
|
<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"
|
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">
|
placeholder="Enter custom model name">
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Mode</label>
|
<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">
|
<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">
|
||||||
<option value="chat">Chat</option>
|
<option value="chat">Chat</option>
|
||||||
<option value="agent">Agent</option>
|
<option value="agent">Agent</option>
|
||||||
<option value="manual">Manual</option>
|
<option value="manual">Manual</option>
|
||||||
@ -99,13 +100,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Options -->
|
<!-- Options -->
|
||||||
<div class="grid grid-cols-2 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 justify-items-start">
|
||||||
<label class="flex items-center space-x-2">
|
<label class="flex items-center space-x-2 touch-target">
|
||||||
<input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border">
|
<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>
|
<span class="text-sm text-dynamic-muted-foreground">Thinking</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center space-x-2">
|
<label class="flex items-center space-x-2 touch-target">
|
||||||
<input type="checkbox" id="designer-max" class="rounded border-dynamic-border">
|
<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>
|
<span class="text-sm text-dynamic-muted-foreground">MAX mode</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -114,13 +115,13 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label>
|
<label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label>
|
||||||
<div class="grid grid-cols-3 gap-2">
|
<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">
|
<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">
|
||||||
Light
|
Light
|
||||||
</button>
|
</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">
|
<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">
|
||||||
Dark
|
Dark
|
||||||
</button>
|
</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">
|
<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">
|
||||||
Auto
|
Auto
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -134,35 +135,35 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label>
|
<label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label>
|
||||||
<div class="grid grid-cols-4 gap-2">
|
<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"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors"
|
<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"
|
||||||
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>
|
||||||
@ -178,14 +179,14 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="color" id="designer-light-color"
|
<input type="color" id="designer-light-color"
|
||||||
value="#3b82f6"
|
value="#3b82f6"
|
||||||
class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
|
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 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>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<label class="text-xs text-dynamic-muted-foreground block mb-1">Light Mode</label>
|
<label class="text-xs text-dynamic-muted-foreground block mb-1">Light Mode</label>
|
||||||
<input type="text" id="designer-light-color-text"
|
<input type="text" id="designer-light-color-text"
|
||||||
value="#3b82f6"
|
value="#3b82f6"
|
||||||
class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
|
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}$">
|
pattern="^#[0-9A-Fa-f]{6}$">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -195,14 +196,14 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="color" id="designer-dark-color"
|
<input type="color" id="designer-dark-color"
|
||||||
value="#60a5fa"
|
value="#60a5fa"
|
||||||
class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
|
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(255,255,255,0.1) 50%)"></div>
|
<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>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<label class="text-xs text-dynamic-muted-foreground block mb-1">Dark Mode</label>
|
<label class="text-xs text-dynamic-muted-foreground block mb-1">Dark Mode</label>
|
||||||
<input type="text" id="designer-dark-color-text"
|
<input type="text" id="designer-dark-color-text"
|
||||||
value="#60a5fa"
|
value="#60a5fa"
|
||||||
class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
|
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}$">
|
pattern="^#[0-9A-Fa-f]{6}$">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -228,28 +229,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Generate Buttons - Fixed at bottom -->
|
<!-- Generate Buttons - Fixed at bottom -->
|
||||||
<div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
|
<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-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
|
<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">
|
||||||
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">
|
<button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100 touch-target">
|
||||||
Reset settings
|
Reset settings
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right Panel - Preview -->
|
<!-- Right Panel - Preview -->
|
||||||
<div class="flex-1 flex items-center justify-center p-8 bg-dynamic-muted/20">
|
<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">
|
||||||
<div class="w-full max-w-3xl">
|
<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>
|
<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" style="height: 400px;">
|
<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">
|
||||||
<div class="h-full" id="preview-container">
|
<div class="h-full" id="preview-container">
|
||||||
<!-- Preview iframe will be injected here -->
|
<!-- Preview iframe will be injected here -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 space-y-1">
|
<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>
|
<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">
|
<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">
|
||||||
<iframe src="..."></iframe>
|
<iframe src="..."></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -259,10 +260,10 @@
|
|||||||
|
|
||||||
<!-- Embed Code Modal -->
|
<!-- 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 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="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">
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h3 class="text-lg font-semibold text-dynamic-foreground">Embed Code</h3>
|
<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">
|
<button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground touch-target p-1">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path d="M18 6L6 18M6 6l12 12"/>
|
<path d="M18 6L6 18M6 6l12 12"/>
|
||||||
</svg>
|
</svg>
|
||||||
@ -271,13 +272,13 @@
|
|||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">iframe Embed Code</label>
|
<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>
|
<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-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90">Copy Code</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Share URL</label>
|
<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>
|
<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-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80">Copy URL</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="/style.css?v=7cf6e89aa75f7dc983ea6003b1c5904a7c7810ac">
|
<link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
|
||||||
</head>
|
</head>
|
||||||
<body class="">
|
<body class="">
|
||||||
<div class="layout-wrapper">
|
<div class="layout-wrapper">
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="/style.css?v=7cf6e89aa75f7dc983ea6003b1c5904a7c7810ac">
|
<link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
|
||||||
</head>
|
</head>
|
||||||
<body class="vibe">
|
<body class="vibe">
|
||||||
<div class="layout-wrapper">
|
<div class="layout-wrapper">
|
||||||
|
|||||||
@ -277,7 +277,7 @@ class EmbedPreview {
|
|||||||
|
|
||||||
createSettingPill(text, type) {
|
createSettingPill(text, type) {
|
||||||
const pill = document.createElement('div');
|
const pill = document.createElement('div');
|
||||||
pill.className = 'px-3 py-2 rounded-full text-xs font-medium flex items-center gap-1.5';
|
pill.className = 'rounded-full text-xs font-medium flex items-center gap-1.5';
|
||||||
|
|
||||||
let icon = '';
|
let icon = '';
|
||||||
|
|
||||||
@ -285,13 +285,13 @@ class EmbedPreview {
|
|||||||
if (type === 'mode') {
|
if (type === 'mode') {
|
||||||
// Mode pill keeps the background
|
// Mode pill keeps the background
|
||||||
if (this.isDarkMode) {
|
if (this.isDarkMode) {
|
||||||
pill.className += ' bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
|
pill.className += ' px-3 py-2 bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
|
||||||
} else {
|
} else {
|
||||||
pill.className += ' bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
|
pill.className += ' px-3 py-2 bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Model, thinking, and max pills only have text color
|
// Model, thinking, and max pills only have text color
|
||||||
pill.className += ' text-dynamic-primary';
|
pill.className += ' pl-1 text-dynamic-primary';
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
|
|||||||
@ -79,3 +79,107 @@
|
|||||||
.viewer-mode .prompt-input:focus {
|
.viewer-mode .prompt-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide scrollbar for horizontal scrolling pills */
|
||||||
|
.scrollbar-hide {
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none; /* Safari and Chrome */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch target improvements for mobile */
|
||||||
|
.touch-target {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive improvements */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
/* Ensure context pills don't wrap and scroll horizontally */
|
||||||
|
#context-pills {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* More compact pill spacing on mobile */
|
||||||
|
.pill,
|
||||||
|
#settings-pills .pill,
|
||||||
|
#settings-pills > * {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure button maintains minimum touch target */
|
||||||
|
#copy-button {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust text size in prompt area for better mobile readability */
|
||||||
|
#prompt-text {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure settings pills don't overflow */
|
||||||
|
#settings-pills {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact layout adjustments */
|
||||||
|
.viewer-mode {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Very small mobile devices */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
/* Even more compact spacing */
|
||||||
|
.pill,
|
||||||
|
#settings-pills .pill,
|
||||||
|
#settings-pills > * {
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smaller button on very small screens */
|
||||||
|
#copy-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
min-width: 36px;
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#copy-button svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure proper touch behavior */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
/* All interactive elements get proper touch targets */
|
||||||
|
button,
|
||||||
|
.pill,
|
||||||
|
#settings-pills > * {
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover effects on touch devices */
|
||||||
|
button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add active states for better feedback */
|
||||||
|
button:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
381
embed-style.css
381
embed-style.css
@ -21,14 +21,33 @@
|
|||||||
--border-color-dark: #2d2d2d;
|
--border-color-dark: #2d2d2d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Reset body margin and ensure full height */
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Allow scrolling on mobile */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
overflow: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Site Header Styles */
|
/* Site Header Styles */
|
||||||
.site-header {
|
.site-header {
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
background-color: var(--bg-color-light);
|
background-color: var(--bg-color-light);
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -109,7 +128,18 @@ body.dark-mode .site-slogan {
|
|||||||
|
|
||||||
/* Adjust designer content to account for header */
|
/* Adjust designer content to account for header */
|
||||||
.designer-content {
|
.designer-content {
|
||||||
height: calc(100vh - var(--header-height));
|
height: 100vh;
|
||||||
|
padding-top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override height on mobile to allow scrolling */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.designer-content {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dynamic color classes */
|
/* Dynamic color classes */
|
||||||
@ -206,6 +236,10 @@ body.dark-mode .border-dynamic-border {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
width: 320px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark-mode .designer-panel {
|
body.dark-mode .designer-panel {
|
||||||
@ -213,6 +247,27 @@ body.dark-mode .designer-panel {
|
|||||||
border-right-color: var(--border-color-dark);
|
border-right-color: var(--border-color-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Adjust the scrollable content area */
|
||||||
|
.designer-panel > .flex-1 {
|
||||||
|
padding-top: calc(var(--header-height) + 1rem);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the bottom generate buttons section stays at bottom */
|
||||||
|
.designer-panel > .p-6:last-child {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgb(var(--muted));
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .designer-panel > .p-6:last-child {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
/* Ensure textarea can be full height */
|
/* Ensure textarea can be full height */
|
||||||
#designer-prompt {
|
#designer-prompt {
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
@ -249,10 +304,31 @@ body.dark-mode .designer-panel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive design improvements */
|
/* Responsive design improvements */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 1024px) {
|
||||||
|
.designer-content {
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.designer-panel {
|
.designer-panel {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: auto;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-bottom: 1px solid rgb(var(--border));
|
border-bottom: 1px solid rgb(var(--border));
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel > .flex-1 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the preview area doesn't take full height on mobile */
|
||||||
|
.designer-content > .flex-1 {
|
||||||
|
min-height: 300px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -387,3 +463,302 @@ body.dark-mode #iframe-snippet:hover {
|
|||||||
background-color: rgba(255, 255, 255, 0.08);
|
background-color: rgba(255, 255, 255, 0.08);
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================== */
|
||||||
|
/* Mobile Responsive Styles */
|
||||||
|
/* ============================== */
|
||||||
|
|
||||||
|
/* Touch target improvements for mobile */
|
||||||
|
.touch-target {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
.touch-target {
|
||||||
|
min-height: 48px;
|
||||||
|
min-width: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile menu toggle button */
|
||||||
|
.mobile-menu-toggle {
|
||||||
|
display: none;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--accent-color);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile close button - hidden by default */
|
||||||
|
.mobile-close-btn {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(var(--header-height) + 1rem);
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 10;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: rgb(var(--muted-foreground));
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-close-btn:hover {
|
||||||
|
background: rgb(var(--muted));
|
||||||
|
color: rgb(var(--foreground));
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-close-btn svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile overlay */
|
||||||
|
.mobile-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-overlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile devices */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* Header adjustments */
|
||||||
|
.site-header {
|
||||||
|
padding: 1rem;
|
||||||
|
height: 60px;
|
||||||
|
--header-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-slogan {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Simplified mobile layout - stack vertically */
|
||||||
|
.designer-content {
|
||||||
|
flex-direction: column !important;
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 60px; /* Account for fixed header */
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: auto;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid rgb(var(--border));
|
||||||
|
order: 2; /* Bottom on mobile */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel > .flex-1 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
height: auto;
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preview adjustments */
|
||||||
|
.designer-content > .flex-1 {
|
||||||
|
order: 1; /* Top on mobile */
|
||||||
|
padding: 1rem;
|
||||||
|
min-height: 300px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preview-wrapper {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 250px; /* Fixed height on mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form element adjustments */
|
||||||
|
.designer-panel .p-4 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="color"],
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font-size: 16px; /* Prevent zoom on iOS */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make buttons more touch-friendly */
|
||||||
|
button {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-preset {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal adjustments */
|
||||||
|
#embed-modal > div {
|
||||||
|
margin: 1rem;
|
||||||
|
max-height: calc(100vh - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Notification adjustments */
|
||||||
|
#notification {
|
||||||
|
top: auto;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small mobile devices */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.site-header {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stack color inputs vertically */
|
||||||
|
.flex.items-center.gap-3 {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stack grid columns on very small screens */
|
||||||
|
.grid.grid-cols-2,
|
||||||
|
.grid.grid-cols-3,
|
||||||
|
.grid.grid-cols-4 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust modal padding */
|
||||||
|
#embed-modal > div {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make range slider easier to use */
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landscape orientation adjustments */
|
||||||
|
@media (max-height: 600px) and (orientation: landscape) {
|
||||||
|
.site-header {
|
||||||
|
height: 50px;
|
||||||
|
--header-height: 50px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel {
|
||||||
|
max-height: calc(100vh - 50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.designer-panel .flex-1 {
|
||||||
|
max-height: calc(100vh - 170px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#designer-prompt {
|
||||||
|
min-height: 100px;
|
||||||
|
rows: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch device optimizations */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
/* Increase tap targets */
|
||||||
|
button,
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"],
|
||||||
|
select {
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover effects on touch devices */
|
||||||
|
.theme-mode-btn:hover:not(.bg-dynamic-primary),
|
||||||
|
.color-preset:hover,
|
||||||
|
button:hover {
|
||||||
|
transform: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add active states for better feedback */
|
||||||
|
button:active,
|
||||||
|
.theme-mode-btn:active,
|
||||||
|
.color-preset:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode support */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.border-dynamic-border {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
outline-width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion support */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right Panel - Preview adjustments */
|
||||||
|
.designer-content > .flex-1 {
|
||||||
|
padding-top: var(--header-height);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user