mirror of
https://github.com/f/awesome-chatgpt-prompts.git
synced 2025-06-22 15:35:04 +00:00
update
This commit is contained in:
Fatih Kadir Akın
parent
6e5d28e52e
commit
a4eb7b001e
@ -33,7 +33,7 @@
|
||||
<header class="site-header">
|
||||
<div class="header-left">
|
||||
<h1 class="site-title">prompts.chat/embed</h1>
|
||||
<p class="site-slogan">Design and share beautiful AI prompts</p>
|
||||
<p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
|
||||
@ -56,6 +56,9 @@
|
||||
class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
|
||||
rows="8"
|
||||
placeholder="Enter your prompt..."></textarea>
|
||||
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
|
||||
Load example →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Model & Mode -->
|
||||
@ -226,12 +229,9 @@
|
||||
|
||||
<!-- Generate Buttons - Fixed at bottom -->
|
||||
<div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
|
||||
<button id="generate-embed" class="w-full bg-dynamic-primary text-white p-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
|
||||
<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">
|
||||
Generate Embed Code
|
||||
</button>
|
||||
<button id="copy-url" class="w-full bg-dynamic-muted text-dynamic-foreground p-3 rounded-lg font-medium hover:bg-opacity-80 transition-opacity border border-dynamic-border">
|
||||
Copy Share URL
|
||||
</button>
|
||||
<div class="pt-3 border-t border-dynamic-border">
|
||||
<button id="reset-settings" class="w-full text-dynamic-muted-foreground p-2 text-sm hover:text-dynamic-foreground transition-colors">
|
||||
Reset All Settings
|
||||
@ -249,6 +249,12 @@
|
||||
<!-- Preview iframe will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 space-y-1">
|
||||
<label class="text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40">Click to copy iframe code:</label>
|
||||
<div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden">
|
||||
<iframe src="..."></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -75,6 +75,7 @@ class EmbedDesigner {
|
||||
this.setupDesignerEvents();
|
||||
this.setupDesignerColors();
|
||||
this.updatePreview();
|
||||
this.updateIframeSnippet();
|
||||
}
|
||||
|
||||
setupDesignerElements() {
|
||||
@ -260,8 +261,8 @@ class EmbedDesigner {
|
||||
// Generate embed button
|
||||
document.getElementById('generate-embed').addEventListener('click', () => this.showEmbedModal());
|
||||
|
||||
// Copy URL button
|
||||
document.getElementById('copy-url').addEventListener('click', () => this.copyShareURL());
|
||||
// Iframe snippet click to copy
|
||||
document.getElementById('iframe-snippet').addEventListener('click', () => this.copyIframeCode());
|
||||
|
||||
// Reset settings button
|
||||
document.getElementById('reset-settings').addEventListener('click', () => {
|
||||
@ -283,9 +284,15 @@ class EmbedDesigner {
|
||||
// Update UI to reflect defaults
|
||||
this.setupDesignerElements();
|
||||
this.updatePreview();
|
||||
this.updateIframeSnippet();
|
||||
}
|
||||
});
|
||||
|
||||
// Load example button
|
||||
document.getElementById('load-example').addEventListener('click', () => {
|
||||
this.loadExample();
|
||||
});
|
||||
|
||||
// Modal events
|
||||
document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal());
|
||||
document.getElementById('copy-embed-code').addEventListener('click', () => this.copyEmbedCode());
|
||||
@ -325,6 +332,17 @@ class EmbedDesigner {
|
||||
|
||||
this.updatePreview();
|
||||
this.saveToLocalStorage();
|
||||
this.updateIframeSnippet();
|
||||
}
|
||||
|
||||
updateIframeSnippet() {
|
||||
const snippet = document.getElementById('iframe-snippet');
|
||||
if (!snippet) return;
|
||||
|
||||
const code = this.generateEmbedCode();
|
||||
// Show a shortened version in the snippet
|
||||
const shortCode = code.replace(/\n/g, ' ').replace(/\s+/g, ' ');
|
||||
snippet.textContent = shortCode;
|
||||
}
|
||||
|
||||
setupDesignerColors() {
|
||||
@ -440,6 +458,12 @@ class EmbedDesigner {
|
||||
this.showNotification('Share URL copied to clipboard!');
|
||||
}
|
||||
|
||||
async copyIframeCode() {
|
||||
const embedCode = this.generateEmbedCode();
|
||||
await this.copyToClipboard(embedCode);
|
||||
this.showNotification('Iframe code copied to clipboard!');
|
||||
}
|
||||
|
||||
async copyToClipboard(text) {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
@ -471,6 +495,31 @@ class EmbedDesigner {
|
||||
notification.classList.add('opacity-0');
|
||||
}, duration);
|
||||
}
|
||||
|
||||
loadExample() {
|
||||
// Set example data
|
||||
this.config = {
|
||||
prompt: 'Build an MCP server that works with Weather API. See @Web for cool weather APIs.',
|
||||
context: ['@Web', 'https://modelcontextprotocol.io/full-llms.txt'],
|
||||
model: 'claude-4-sonnet',
|
||||
mode: 'agent',
|
||||
thinking: true,
|
||||
max: true,
|
||||
lightColor: '#3b82f6',
|
||||
darkColor: '#60a5fa',
|
||||
height: '250',
|
||||
themeMode: 'auto'
|
||||
};
|
||||
|
||||
// Update all form elements
|
||||
this.setupDesignerElements();
|
||||
this.updatePreview();
|
||||
this.updateIframeSnippet();
|
||||
this.saveToLocalStorage();
|
||||
|
||||
// Show notification
|
||||
this.showNotification('Example loaded!');
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode toggle function
|
||||
|
||||
@ -374,4 +374,16 @@ input[type="color"]::-webkit-color-swatch {
|
||||
/* Better visual hierarchy for labels */
|
||||
label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Dark mode iframe snippet styling */
|
||||
body.dark-mode #iframe-snippet {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
body.dark-mode #iframe-snippet:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
<header class="site-header">
|
||||
<div class="header-left">
|
||||
<h1 class="site-title">prompts.chat/embed</h1>
|
||||
<p class="site-slogan">Design and share beautiful AI prompts</p>
|
||||
<p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
|
||||
@ -56,6 +56,9 @@
|
||||
class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
|
||||
rows="8"
|
||||
placeholder="Enter your prompt..."></textarea>
|
||||
<button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
|
||||
Load example →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Model & Mode -->
|
||||
@ -226,12 +229,9 @@
|
||||
|
||||
<!-- Generate Buttons - Fixed at bottom -->
|
||||
<div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
|
||||
<button id="generate-embed" class="w-full bg-dynamic-primary text-white p-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
|
||||
<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">
|
||||
Generate Embed Code
|
||||
</button>
|
||||
<button id="copy-url" class="w-full bg-dynamic-muted text-dynamic-foreground p-3 rounded-lg font-medium hover:bg-opacity-80 transition-opacity border border-dynamic-border">
|
||||
Copy Share URL
|
||||
</button>
|
||||
<div class="pt-3 border-t border-dynamic-border">
|
||||
<button id="reset-settings" class="w-full text-dynamic-muted-foreground p-2 text-sm hover:text-dynamic-foreground transition-colors">
|
||||
Reset All Settings
|
||||
@ -249,6 +249,12 @@
|
||||
<!-- Preview iframe will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 space-y-1">
|
||||
<label class="text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40">Click to copy iframe code:</label>
|
||||
<div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden">
|
||||
<iframe src="..."></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -75,6 +75,7 @@ class EmbedDesigner {
|
||||
this.setupDesignerEvents();
|
||||
this.setupDesignerColors();
|
||||
this.updatePreview();
|
||||
this.updateIframeSnippet();
|
||||
}
|
||||
|
||||
setupDesignerElements() {
|
||||
@ -260,8 +261,8 @@ class EmbedDesigner {
|
||||
// Generate embed button
|
||||
document.getElementById('generate-embed').addEventListener('click', () => this.showEmbedModal());
|
||||
|
||||
// Copy URL button
|
||||
document.getElementById('copy-url').addEventListener('click', () => this.copyShareURL());
|
||||
// Iframe snippet click to copy
|
||||
document.getElementById('iframe-snippet').addEventListener('click', () => this.copyIframeCode());
|
||||
|
||||
// Reset settings button
|
||||
document.getElementById('reset-settings').addEventListener('click', () => {
|
||||
@ -283,9 +284,15 @@ class EmbedDesigner {
|
||||
// Update UI to reflect defaults
|
||||
this.setupDesignerElements();
|
||||
this.updatePreview();
|
||||
this.updateIframeSnippet();
|
||||
}
|
||||
});
|
||||
|
||||
// Load example button
|
||||
document.getElementById('load-example').addEventListener('click', () => {
|
||||
this.loadExample();
|
||||
});
|
||||
|
||||
// Modal events
|
||||
document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal());
|
||||
document.getElementById('copy-embed-code').addEventListener('click', () => this.copyEmbedCode());
|
||||
@ -325,6 +332,17 @@ class EmbedDesigner {
|
||||
|
||||
this.updatePreview();
|
||||
this.saveToLocalStorage();
|
||||
this.updateIframeSnippet();
|
||||
}
|
||||
|
||||
updateIframeSnippet() {
|
||||
const snippet = document.getElementById('iframe-snippet');
|
||||
if (!snippet) return;
|
||||
|
||||
const code = this.generateEmbedCode();
|
||||
// Show a shortened version in the snippet
|
||||
const shortCode = code.replace(/\n/g, ' ').replace(/\s+/g, ' ');
|
||||
snippet.textContent = shortCode;
|
||||
}
|
||||
|
||||
setupDesignerColors() {
|
||||
@ -440,6 +458,12 @@ class EmbedDesigner {
|
||||
this.showNotification('Share URL copied to clipboard!');
|
||||
}
|
||||
|
||||
async copyIframeCode() {
|
||||
const embedCode = this.generateEmbedCode();
|
||||
await this.copyToClipboard(embedCode);
|
||||
this.showNotification('Iframe code copied to clipboard!');
|
||||
}
|
||||
|
||||
async copyToClipboard(text) {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
@ -471,6 +495,31 @@ class EmbedDesigner {
|
||||
notification.classList.add('opacity-0');
|
||||
}, duration);
|
||||
}
|
||||
|
||||
loadExample() {
|
||||
// Set example data
|
||||
this.config = {
|
||||
prompt: 'Build an MCP server that works with Weather API. See @Web for cool weather APIs.',
|
||||
context: ['@Web', 'https://modelcontextprotocol.io/full-llms.txt'],
|
||||
model: 'claude-4-sonnet',
|
||||
mode: 'agent',
|
||||
thinking: true,
|
||||
max: true,
|
||||
lightColor: '#3b82f6',
|
||||
darkColor: '#60a5fa',
|
||||
height: '250',
|
||||
themeMode: 'auto'
|
||||
};
|
||||
|
||||
// Update all form elements
|
||||
this.setupDesignerElements();
|
||||
this.updatePreview();
|
||||
this.updateIframeSnippet();
|
||||
this.saveToLocalStorage();
|
||||
|
||||
// Show notification
|
||||
this.showNotification('Example loaded!');
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode toggle function
|
||||
|
||||
@ -374,4 +374,16 @@ input[type="color"]::-webkit-color-swatch {
|
||||
/* Better visual hierarchy for labels */
|
||||
label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Dark mode iframe snippet styling */
|
||||
body.dark-mode #iframe-snippet {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
body.dark-mode #iframe-snippet:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user