saulteafarmer/awesome-chatgpt-prompts
1
0
Fork 0
mirror of https://github.com/f/awesome-chatgpt-prompts.git synced 2025-05-23 10:22:02 +00: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

21
vibe/script.js

@ -45,7 +45,24 @@ 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 }) => `
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>
<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>
${prompts.map(({ app, prompt, contributor, techstack }) => `
<div class="prompt-card">
<div class="prompt-title">
${app}
@ -69,7 +86,7 @@ async function renderMainPrompts() {
`).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

@ -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);
}