add vibes

vibe/script.js

@@ -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('')}
+          <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}
+            <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>
-          <a href="https://github.com/${contributor.replace('@', '')}" class="contributor-badge" target="_blank" rel="noopener">${contributor}</a>
         </div>
-      </div>
-    `).join('')}</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

vibe/style.css

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