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:
parent
02b85cf835
commit
b7146f0ae9
@ -309,7 +309,57 @@
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
<style>video { max-width: 100% !important; }</style>
|
||||
<style>
|
||||
video { max-width: 100% !important; }
|
||||
|
||||
/* Embed button styling */
|
||||
.modal-embed-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.modal-embed-button:hover {
|
||||
background-color: var(--accent-color-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal-embed-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for modal buttons */
|
||||
@media (max-width: 640px) {
|
||||
.modal-footer-right {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-embed-button {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-chat-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
|
||||
<script>
|
||||
|
@ -76,12 +76,12 @@
|
||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
|
||||
<select id="designer-model" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
|
||||
<option value="o3">o3</option>
|
||||
<option value="GPT-4.1">GPT 4.1</option>
|
||||
<option value="GPT 4o" selected>GPT 4o</option>
|
||||
<option value="Claude 3.7 Sonnet">Claude 3.7 Sonnet</option>
|
||||
<option value="Claude 4 Sonnet">Claude 4 Sonnet</option>
|
||||
<option value="Claude 4 Opus">Claude 4 Opus</option>
|
||||
<option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
|
||||
<option value="gpt-4.1">GPT 4.1</option>
|
||||
<option value="gpt-4o" selected>GPT 4o</option>
|
||||
<option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
|
||||
<option value="claude-4-sonnet">Claude 4 Sonnet</option>
|
||||
<option value="claude-4-opus">Claude 4 Opus</option>
|
||||
<option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
|
||||
<option value="custom">[Custom]</option>
|
||||
</select>
|
||||
<input type="text" id="designer-custom-model"
|
||||
|
@ -99,6 +99,29 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Fixed height for prompt container to enable scrolling */
|
||||
#prompt-container {
|
||||
height: calc(100vh - 140px); /* Fixed height minus header and footer space */
|
||||
min-height: 100px;
|
||||
max-height: calc(100vh - 120px);
|
||||
/* max-height: 100vh; */
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#prompt-container {
|
||||
height: calc(100vh - 120px); /* Smaller on mobile */
|
||||
max-height: calc(100vh - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure prompt text scrolls within container */
|
||||
#prompt-text {
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
flex: 1;
|
||||
white-space: wrap;
|
||||
}
|
||||
|
||||
/* Responsive improvements */
|
||||
@media (max-width: 640px) {
|
||||
/* Ensure context pills don't wrap and scroll horizontally */
|
||||
|
@ -15,24 +15,45 @@ class EmbedDesigner {
|
||||
}
|
||||
|
||||
getInitialConfig() {
|
||||
// Try to load from localStorage first
|
||||
// Check if we have URL parameters
|
||||
const hasUrlParams = Object.keys(this.params).length > 0;
|
||||
|
||||
// If URL params exist, prioritize them over saved config
|
||||
if (hasUrlParams) {
|
||||
// Start with defaults, then apply saved config, then override with URL params
|
||||
const savedConfig = this.loadFromLocalStorage() || {};
|
||||
return {
|
||||
prompt: this.params.prompt || savedConfig.prompt || '',
|
||||
context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : (savedConfig.context || []),
|
||||
model: this.params.model || savedConfig.model || 'gpt-4o',
|
||||
mode: this.params.agentMode || savedConfig.mode || 'chat',
|
||||
thinking: this.params.thinking === 'true' ? true : (this.params.thinking === 'false' ? false : (savedConfig.thinking || false)),
|
||||
max: this.params.max === 'true' ? true : (this.params.max === 'false' ? false : (savedConfig.max || false)),
|
||||
lightColor: this.params.lightColor || savedConfig.lightColor || '#3b82f6',
|
||||
darkColor: this.params.darkColor || savedConfig.darkColor || '#60a5fa',
|
||||
height: this.params.height || savedConfig.height || '400',
|
||||
themeMode: this.params.themeMode || savedConfig.themeMode || 'auto'
|
||||
};
|
||||
}
|
||||
|
||||
// Otherwise, try to load from localStorage
|
||||
const savedConfig = this.loadFromLocalStorage();
|
||||
if (savedConfig) {
|
||||
return savedConfig;
|
||||
}
|
||||
|
||||
// Otherwise, use URL params or defaults
|
||||
// Fall back to defaults
|
||||
return {
|
||||
prompt: this.params.prompt || '',
|
||||
context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [],
|
||||
model: this.params.model || 'gpt-4o',
|
||||
mode: this.params.agentMode || 'chat',
|
||||
thinking: this.params.thinking === 'true',
|
||||
max: this.params.max === 'true',
|
||||
lightColor: this.params.lightColor || '#3b82f6',
|
||||
darkColor: this.params.darkColor || '#60a5fa',
|
||||
height: this.params.height || '400',
|
||||
themeMode: this.params.themeMode || 'auto'
|
||||
prompt: '',
|
||||
context: [],
|
||||
model: 'gpt-4o',
|
||||
mode: 'chat',
|
||||
thinking: false,
|
||||
max: false,
|
||||
lightColor: '#3b82f6',
|
||||
darkColor: '#60a5fa',
|
||||
height: '400',
|
||||
themeMode: 'auto'
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -76,12 +76,12 @@
|
||||
<label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
|
||||
<select id="designer-model" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
|
||||
<option value="o3">o3</option>
|
||||
<option value="GPT-4.1">GPT 4.1</option>
|
||||
<option value="GPT 4o" selected>GPT 4o</option>
|
||||
<option value="Claude 3.7 Sonnet">Claude 3.7 Sonnet</option>
|
||||
<option value="Claude 4 Sonnet">Claude 4 Sonnet</option>
|
||||
<option value="Claude 4 Opus">Claude 4 Opus</option>
|
||||
<option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
|
||||
<option value="gpt-4.1">GPT 4.1</option>
|
||||
<option value="gpt-4o" selected>GPT 4o</option>
|
||||
<option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
|
||||
<option value="claude-4-sonnet">Claude 4 Sonnet</option>
|
||||
<option value="claude-4-opus">Claude 4 Opus</option>
|
||||
<option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
|
||||
<option value="custom">[Custom]</option>
|
||||
</select>
|
||||
<input type="text" id="designer-custom-model"
|
||||
|
@ -25,7 +25,7 @@
|
||||
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
|
||||
<link rel="stylesheet" href="/style.css?v=02b85cf83506c024ac20fde0b38f51f24ed21336">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="layout-wrapper">
|
||||
@ -3567,7 +3567,57 @@ comments and ensure scripts are compatible across common Linux distributions.</p
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>video { max-width: 100% !important; }</style>
|
||||
<style>
|
||||
video { max-width: 100% !important; }
|
||||
|
||||
/* Embed button styling */
|
||||
.modal-embed-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.modal-embed-button:hover {
|
||||
background-color: var(--accent-color-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal-embed-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for modal buttons */
|
||||
@media (max-width: 640px) {
|
||||
.modal-footer-right {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-embed-button {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-chat-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
|
||||
<script>
|
||||
|
@ -719,6 +719,21 @@ function createModal() {
|
||||
<a class="modal-contributor" target="_blank" rel="noopener"></a>
|
||||
</div>
|
||||
<div class="modal-footer-right">
|
||||
<button class="modal-embed-button" onclick="openEmbedDesigner()">
|
||||
<svg 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">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||||
<rect x="9" y="9" width="6" height="6"></rect>
|
||||
<path d="M15 2v2"></path>
|
||||
<path d="M15 20v2"></path>
|
||||
<path d="M2 15h2"></path>
|
||||
<path d="M20 15h2"></path>
|
||||
<path d="M2 9h2"></path>
|
||||
<path d="M20 9h2"></path>
|
||||
<path d="M9 2v2"></path>
|
||||
<path d="M9 20v2"></path>
|
||||
</svg>
|
||||
Embed
|
||||
</button>
|
||||
<button class="modal-chat-button" onclick="openModalChat()">
|
||||
<svg class="chat-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">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
@ -1045,6 +1060,28 @@ function openModalChat() {
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle embed button click in modal
|
||||
function openEmbedDesigner() {
|
||||
const modalContent = document.querySelector(".modal-content");
|
||||
if (modalContent) {
|
||||
let content = modalContent.textContent || modalContent.innerText;
|
||||
|
||||
// If there's a variable form, get the processed content with variables
|
||||
const form = document.querySelector(".variable-form");
|
||||
if (form) {
|
||||
content = buildPrompt(encodeURIComponent(content.trim()));
|
||||
// Remove the added language/tone preferences for embed
|
||||
content = content.replace(/\s*Reply in .+ using .+ tone for .+\.$/, '').trim();
|
||||
}
|
||||
|
||||
// Build the embed URL
|
||||
const embedUrl = `/embed/?prompt=${encodeURIComponent(content)}&context=https://prompts.chat&model=gpt-4o&agentMode=chat&thinking=false&max=false&height=400`;
|
||||
|
||||
// Open in new tab
|
||||
window.open(embedUrl, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
// Add these functions before the closing script tag
|
||||
function showCopilotSuggestion() {
|
||||
const modal = document.getElementById("copilotSuggestionModal");
|
||||
|
@ -25,7 +25,7 @@
|
||||
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
|
||||
<link rel="stylesheet" href="/style.css?v=02b85cf83506c024ac20fde0b38f51f24ed21336">
|
||||
</head>
|
||||
<body class="vibe">
|
||||
<div class="layout-wrapper">
|
||||
@ -176,7 +176,57 @@
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
|
||||
<style>video { max-width: 100% !important; }</style>
|
||||
<style>
|
||||
video { max-width: 100% !important; }
|
||||
|
||||
/* Embed button styling */
|
||||
.modal-embed-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.modal-embed-button:hover {
|
||||
background-color: var(--accent-color-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal-embed-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for modal buttons */
|
||||
@media (max-width: 640px) {
|
||||
.modal-footer-right {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-embed-button {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-chat-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
|
||||
<script>
|
||||
|
@ -99,6 +99,29 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Fixed height for prompt container to enable scrolling */
|
||||
#prompt-container {
|
||||
height: calc(100vh - 140px); /* Fixed height minus header and footer space */
|
||||
min-height: 100px;
|
||||
max-height: calc(100vh - 120px);
|
||||
/* max-height: 100vh; */
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#prompt-container {
|
||||
height: calc(100vh - 120px); /* Smaller on mobile */
|
||||
max-height: calc(100vh - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure prompt text scrolls within container */
|
||||
#prompt-text {
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
flex: 1;
|
||||
white-space: wrap;
|
||||
}
|
||||
|
||||
/* Responsive improvements */
|
||||
@media (max-width: 640px) {
|
||||
/* Ensure context pills don't wrap and scroll horizontally */
|
||||
|
@ -15,24 +15,45 @@ class EmbedDesigner {
|
||||
}
|
||||
|
||||
getInitialConfig() {
|
||||
// Try to load from localStorage first
|
||||
// Check if we have URL parameters
|
||||
const hasUrlParams = Object.keys(this.params).length > 0;
|
||||
|
||||
// If URL params exist, prioritize them over saved config
|
||||
if (hasUrlParams) {
|
||||
// Start with defaults, then apply saved config, then override with URL params
|
||||
const savedConfig = this.loadFromLocalStorage() || {};
|
||||
return {
|
||||
prompt: this.params.prompt || savedConfig.prompt || '',
|
||||
context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : (savedConfig.context || []),
|
||||
model: this.params.model || savedConfig.model || 'gpt-4o',
|
||||
mode: this.params.agentMode || savedConfig.mode || 'chat',
|
||||
thinking: this.params.thinking === 'true' ? true : (this.params.thinking === 'false' ? false : (savedConfig.thinking || false)),
|
||||
max: this.params.max === 'true' ? true : (this.params.max === 'false' ? false : (savedConfig.max || false)),
|
||||
lightColor: this.params.lightColor || savedConfig.lightColor || '#3b82f6',
|
||||
darkColor: this.params.darkColor || savedConfig.darkColor || '#60a5fa',
|
||||
height: this.params.height || savedConfig.height || '400',
|
||||
themeMode: this.params.themeMode || savedConfig.themeMode || 'auto'
|
||||
};
|
||||
}
|
||||
|
||||
// Otherwise, try to load from localStorage
|
||||
const savedConfig = this.loadFromLocalStorage();
|
||||
if (savedConfig) {
|
||||
return savedConfig;
|
||||
}
|
||||
|
||||
// Otherwise, use URL params or defaults
|
||||
// Fall back to defaults
|
||||
return {
|
||||
prompt: this.params.prompt || '',
|
||||
context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [],
|
||||
model: this.params.model || 'gpt-4o',
|
||||
mode: this.params.agentMode || 'chat',
|
||||
thinking: this.params.thinking === 'true',
|
||||
max: this.params.max === 'true',
|
||||
lightColor: this.params.lightColor || '#3b82f6',
|
||||
darkColor: this.params.darkColor || '#60a5fa',
|
||||
height: this.params.height || '400',
|
||||
themeMode: this.params.themeMode || 'auto'
|
||||
prompt: '',
|
||||
context: [],
|
||||
model: 'gpt-4o',
|
||||
mode: 'chat',
|
||||
thinking: false,
|
||||
max: false,
|
||||
lightColor: '#3b82f6',
|
||||
darkColor: '#60a5fa',
|
||||
height: '400',
|
||||
themeMode: 'auto'
|
||||
};
|
||||
}
|
||||
|
||||
|
37
script.js
37
script.js
@ -719,6 +719,21 @@ function createModal() {
|
||||
<a class="modal-contributor" target="_blank" rel="noopener"></a>
|
||||
</div>
|
||||
<div class="modal-footer-right">
|
||||
<button class="modal-embed-button" onclick="openEmbedDesigner()">
|
||||
<svg 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">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||||
<rect x="9" y="9" width="6" height="6"></rect>
|
||||
<path d="M15 2v2"></path>
|
||||
<path d="M15 20v2"></path>
|
||||
<path d="M2 15h2"></path>
|
||||
<path d="M20 15h2"></path>
|
||||
<path d="M2 9h2"></path>
|
||||
<path d="M20 9h2"></path>
|
||||
<path d="M9 2v2"></path>
|
||||
<path d="M9 20v2"></path>
|
||||
</svg>
|
||||
Embed
|
||||
</button>
|
||||
<button class="modal-chat-button" onclick="openModalChat()">
|
||||
<svg class="chat-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">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
@ -1045,6 +1060,28 @@ function openModalChat() {
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle embed button click in modal
|
||||
function openEmbedDesigner() {
|
||||
const modalContent = document.querySelector(".modal-content");
|
||||
if (modalContent) {
|
||||
let content = modalContent.textContent || modalContent.innerText;
|
||||
|
||||
// If there's a variable form, get the processed content with variables
|
||||
const form = document.querySelector(".variable-form");
|
||||
if (form) {
|
||||
content = buildPrompt(encodeURIComponent(content.trim()));
|
||||
// Remove the added language/tone preferences for embed
|
||||
content = content.replace(/\s*Reply in .+ using .+ tone for .+\.$/, '').trim();
|
||||
}
|
||||
|
||||
// Build the embed URL
|
||||
const embedUrl = `/embed/?prompt=${encodeURIComponent(content)}&context=https://prompts.chat&model=gpt-4o&agentMode=chat&thinking=false&max=false&height=400`;
|
||||
|
||||
// Open in new tab
|
||||
window.open(embedUrl, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
// Add these functions before the closing script tag
|
||||
function showCopilotSuggestion() {
|
||||
const modal = document.getElementById("copilotSuggestionModal");
|
||||
|
Loading…
x
Reference in New Issue
Block a user