Awesome-Mirrors/awesome-chatgpt-prompts
1
0
Fork 0
mirror of https://github.com/f/awesome-chatgpt-prompts.git synced 2025-03-28 16:48:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

add vibes

Browse Source
This commit is contained in:
f 2025-03-16 03:35:11 +03:00
parent 12e15893aa
commit d5ae572fe5
2 changed files with 81 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
vibe/script.js
View File

@ -45,31 +45,48 @@ async function renderMainPrompts() {
const prompts = await loadPrompts();
const container = document.querySelector('#promptContent');
if (container) {
container.innerHTML = `<div class="prompts-grid">${prompts.map(({ app, prompt, contributor, techstack }) => `
<div class="prompt-card">
<div class="prompt-title">
${app}
<div class="action-buttons">
<button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(prompt)}')">
<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">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
</button>
container.innerHTML = `<div class="prompts-grid">
<div class="prompt-card contribute-card">
<a href="https://github.com/f/awesome-chatgpt-prompts/pulls" target="_blank" style="text-decoration: none; color: inherit; height: 100%; display: flex; flex-direction: column;">
<div class="prompt-title" style="display: flex; align-items: center; gap: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="16"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
Add Your Vibe Prompt
</div>
</div>
<p class="prompt-content">${prompt.replace(/\\n/g, '<br>')}</p>
<div class="card-footer">
<div class="techstack-badges">
${techstack.split(',').map(tech => `<span class="tech-badge">${tech.trim()}</span>`).join('')}
</div>
<a href="https://github.com/${contributor.replace('@', '')}" class="contributor-badge" target="_blank" rel="noopener">${contributor}</a>
</div>
<p class="prompt-content" style="flex-grow: 1;">
Share your vibe prompts with the community! Submit a pull request to add your prompts to the collection.
</p>
<span class="contributor-badge">Contribute Now</span>
</a>
</div>
`).join('')}</div>`;
${prompts.map(({ app, prompt, contributor, techstack }) => `
<div class="prompt-card">
<div class="prompt-title">
${app}
<div class="action-buttons">
<button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(prompt)}')">
<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">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
</button>
</div>
</div>
<p class="prompt-content">${prompt.replace(/\\n/g, '<br>')}</p>
<div class="card-footer">
<div class="techstack-badges">
${techstack.split(',').map(tech => `<span class="tech-badge">${tech.trim()}</span>`).join('')}
</div>
<a href="https://github.com/${contributor.replace('@', '')}" class="contributor-badge" target="_blank" rel="noopener">${contributor}</a>
</div>
</div>
`).join('')}</div>`;
// Add click handlers for modal
const cards = container.querySelectorAll('.prompt-card');
const cards = container.querySelectorAll('.prompt-card:not(.contribute-card)');
cards.forEach((card, index) => {
card.addEventListener('click', (e) => {
// Don't open modal if clicking on buttons or links

43
vibe/style.css Normal file
View File

@ -0,0 +1,43 @@
.contribute-card {
background: linear-gradient(45deg, var(--accent-color) 0%, var(--accent-color-light) 100%);
color: white !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contribute-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contribute-card .prompt-title {
color: white;
font-weight: 600;
}
.contribute-card .prompt-content {
color: rgba(255, 255, 255, 0.9);
margin: 1rem 0;
}
.contribute-card .contributor-badge {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border: none;
}
.contribute-card .contributor-badge:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.contribute-card svg {
stroke: white;
}
/* Dark mode adjustments */
.dark-mode .contribute-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark-mode .contribute-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}