add vibes

.windsurfrules

@@ -0,0 +1 @@
+.cursorrules

README.md

@@ -2234,8 +2234,7 @@ Contributed by: [@khushaljethava](https://github.com/khushaljethava)
 
 > I want you to act as a any programming language to python code converter. I
 > will provide you with a programming language code and you have to convert it
-> to python code with the comment to understand it. Consider it's a code when I
-> use {{code here}}."
+> to python code with the comment to understand it. Consider it's a code when I use "code here"
 
 ## Act as Virtual Fitness Coach
 

_config.yml

@@ -1,10 +1,7 @@
-name: Awesome ChatGPT Prompts
-title: null
+name: prompts.chat
+title: prompts.chat
+subtitle: World's First & Most Famous Prompts Directory
 
-# Dark mode configuration
-dark_mode: true
-
-# GitHub Pages configuration
 github_pages:
-  url: "https://<your-github-username>.github.io/<your-repo-name>"
-  branch: "gh-pages"
+  url: "https://prompts.chat"
+  branch: "main"

script.js

@@ -144,7 +144,7 @@ document.addEventListener("DOMContentLoaded", () => {
     })
     .catch((error) => {
       console.error("Error fetching star count:", error);
-      document.getElementById("starCount").textContent = "50k+";
+      document.getElementById("starCount").textContent = "122k+";
     });
 
   // Create prompt cards
@@ -353,7 +353,7 @@ function displaySearchResults(results) {
           // On mobile, scroll the window
           const cardRect = targetCard.getBoundingClientRect();
           const scrollTop =
-            window.pageYOffset + cardRect.top - headerHeight - 20;
+            window.pageYOffset + cardRect.top - headerHeight - 50;
 
           window.scrollTo({
             top: scrollTop,
@@ -364,7 +364,7 @@ function displaySearchResults(results) {
           const mainContent = document.querySelector(".main-content");
           const cardRect = targetCard.getBoundingClientRect();
           const scrollTop =
-            mainContent.scrollTop + cardRect.top - headerHeight - 20;
+            mainContent.scrollTop + cardRect.top - headerHeight - 50;
 
           mainContent.scrollTo({
             top: scrollTop,

vibe/index.md

@@ -0,0 +1,8 @@
+---
+title: prompts.chat/vibe
+subtitle: awesome vibe coding prompts to help you build simple apps
+hide_platform_selector: true
+hide_extension_link: true
+hide_tone_selector: true
+subpage: true
+---

vibe/script.js

@@ -0,0 +1,413 @@
+function parseCSV(csv) {
+  const lines = csv.split("\n");
+  const headers = lines[0]
+    .split(",")
+    .map((header) => header.replace(/"/g, "").trim());
+
+  return lines
+    .slice(1)
+    .map((line) => {
+      const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
+      const entry = {};
+
+      headers.forEach((header, index) => {
+        let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
+        // Remove backticks from the act/title
+        if (header === "app") {
+          value = value.replace(/`/g, "");
+        }
+        entry[header] = value;
+      });
+
+      return entry;
+    })
+    .filter((entry) => entry.app && entry.prompt);
+}
+
+// Load prompts from CSV
+async function loadPrompts() {
+  const response = await fetch('/vibeprompts.csv');
+  const text = await response.text();
+  return parseCSV(text);
+}
+
+// Update prompt count
+function updatePromptCount(filteredCount, totalCount) {
+  const countElement = document.getElementById('promptCount');
+  const countNumber = countElement.getElementsByClassName('count-number')[0];
+  if (countElement) {
+    countNumber.textContent = `${filteredCount}`;
+  }
+}
+
+// Render prompts in the main content area
+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>
+          </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');
+    cards.forEach((card, index) => {
+      card.addEventListener('click', (e) => {
+        // Don't open modal if clicking on buttons or links
+        if (!e.target.closest('.copy-button') && !e.target.closest('.contributor-badge')) {
+          const promptData = prompts[index];
+          showModal(promptData.app, promptData.prompt, promptData.contributor);
+        }
+      });
+    });
+  }
+  updatePromptCount(prompts.length, prompts.length);
+}
+
+// Render prompts in the sidebar
+async function renderSidebarPrompts() {
+  const prompts = await loadPrompts();
+  const searchResults = document.getElementById('searchResults');
+  if (searchResults) {
+    searchResults.innerHTML = prompts.map(({ app }) => `
+      <li class="search-result-item" onclick="scrollToPrompt('${app}')">${app}</li>
+    `).join('');
+  }
+}
+
+// Scroll to prompt card function
+function scrollToPrompt(title, prompt) {
+  // Find the prompt card with matching title
+  const cards = document.querySelectorAll('.prompt-card');
+  const targetCard = Array.from(cards).find(card => {
+    const cardTitle = card.querySelector('.prompt-title').textContent
+      .replace(/\s+/g, ' ') // Normalize whitespace
+      .replace(/[\n\r]/g, '') // Remove newlines
+      .trim();
+
+    const searchTitle = title
+      .replace(/\s+/g, ' ') // Normalize whitespace
+      .replace(/[\n\r]/g, '') // Remove newlines
+      .trim();
+
+    return cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
+           searchTitle.toLowerCase().includes(cardTitle.toLowerCase());
+  });
+
+  if (targetCard) {
+    // Remove highlight from all cards
+    cards.forEach(card => {
+      card.style.transition = 'all 0.3s ease';
+      card.style.transform = 'none';
+      card.style.boxShadow = 'none';
+      card.style.borderColor = '';
+    });
+
+    // Different scroll behavior for mobile and desktop
+    const isMobile = window.innerWidth <= 768;
+    const headerHeight = document.querySelector('.site-header').offsetHeight;
+
+    if (isMobile) {
+      // On mobile, scroll the window
+      const cardRect = targetCard.getBoundingClientRect();
+      const scrollTop = window.pageYOffset + cardRect.top - headerHeight - 20;
+
+      window.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      });
+    } else {
+      // On desktop, scroll the main-content container
+      const mainContent = document.querySelector('.main-content');
+      const cardRect = targetCard.getBoundingClientRect();
+      const scrollTop = mainContent.scrollTop + cardRect.top - headerHeight - 20;
+
+      mainContent.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      });
+    }
+
+    // Add highlight effect after scrolling completes
+    setTimeout(() => {
+      targetCard.style.transform = 'scale(1.02)';
+      targetCard.style.boxShadow = '0 0 0 2px var(--accent-color)';
+      targetCard.style.borderColor = 'var(--accent-color)';
+
+      // Remove highlight after animation
+      setTimeout(() => {
+        targetCard.style.transform = 'none';
+        targetCard.style.boxShadow = 'none';
+        targetCard.style.borderColor = '';
+      }, 2000);
+    }, 500); // Wait for scroll to complete
+  }
+}
+
+// Search functionality
+function setupSearch() {
+  const searchInput = document.getElementById('searchInput');
+  const searchResults = document.getElementById('searchResults');
+
+  if (searchInput && searchResults) {
+    searchInput.addEventListener('input', async (e) => {
+      const query = e.target.value.toLowerCase();
+      const prompts = await loadPrompts();
+      const filtered = prompts.filter(({ act, prompt }) => 
+        act.toLowerCase().includes(query) || prompt.toLowerCase().includes(query)
+      );
+
+      // Update prompt count
+      updatePromptCount(filtered.length, prompts.length);
+
+      // Show filtered results
+      if (window.innerWidth <= 768 && !query.trim()) {
+        searchResults.innerHTML = ''; // Clear results on mobile if no search query
+      } else {
+        searchResults.innerHTML = filtered.length === 0 
+          ? `<div class="search-result-item add-prompt">
+              <a href="https://github.com/f/awesome-chatgpt-prompts/pulls" target="_blank" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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 this prompt
+              </a>
+            </div>`
+          : filtered.map(({ act, prompt }) => `
+              <li class="search-result-item" onclick="scrollToPrompt('${act}', '${prompt}')">
+                ${act}
+              </li>
+            `).join('');
+      }
+    });
+  }
+}
+
+// Fetch GitHub stars
+async function fetchGitHubStars() {
+  try {
+    const response = await fetch("https://api.github.com/repos/f/awesome-chatgpt-prompts");
+    const data = await response.json();
+    const stars = data.stargazers_count;
+    const starCount = document.getElementById("starCount");
+    if (starCount) {
+      starCount.textContent = stars.toLocaleString();
+    }
+  } catch (error) {
+    console.error("Error fetching star count:", error);
+    const starCount = document.getElementById("starCount");
+    if (starCount) {
+      starCount.textContent = "122k+";
+    }
+  }
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+  renderMainPrompts();
+  renderSidebarPrompts();
+  setupSearch();
+  fetchGitHubStars();
+});
+
+// Dark mode toggle
+function toggleDarkMode() {
+  document.body.classList.toggle('dark-mode');
+  const isDark = document.body.classList.contains('dark-mode');
+  localStorage.setItem('darkMode', isDark);
+}
+
+// Initialize dark mode from localStorage
+const savedDarkMode = localStorage.getItem('darkMode') === 'true';
+if (savedDarkMode) {
+  document.body.classList.add('dark-mode');
+}
+
+// Copy prompt to clipboard
+async function copyPrompt(button, encodedPrompt) {
+  try {
+    const promptText = decodeURIComponent(encodedPrompt);
+    await navigator.clipboard.writeText(promptText);
+    const originalHTML = button.innerHTML;
+    button.innerHTML = `
+      <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">
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    `;
+    setTimeout(() => {
+      button.innerHTML = originalHTML;
+    }, 2000);
+  } catch (err) {
+    console.error("Failed to copy text: ", err);
+  }
+}
+
+// Open prompt in AI chat
+function openInChat(button, encodedPrompt) {
+  const promptText = decodeURIComponent(encodedPrompt);
+  const platform = document.querySelector(".platform-tag.active");
+
+  if (!platform) return;
+
+  const baseUrl = platform.dataset.url;
+  let url;
+
+  switch (platform.dataset.platform) {
+    case "github-copilot":
+      url = `${baseUrl}?prompt=${encodeURIComponent(promptText)}`;
+      break;
+    case "chatgpt":
+      url = `${baseUrl}?prompt=${encodeURIComponent(promptText)}`;
+      break;
+    case "grok":
+      url = `${baseUrl}&q=${encodeURIComponent(promptText)}`;
+      break;
+    case "claude":
+      url = `${baseUrl}?q=${encodeURIComponent(promptText)}`;
+      break;
+    case "perplexity":
+      url = `${baseUrl}/search?q=${encodeURIComponent(promptText)}`;
+      break;
+    case "mistral":
+      url = `${baseUrl}?q=${encodeURIComponent(promptText)}`;
+      break;
+    default:
+      url = `${baseUrl}?q=${encodeURIComponent(promptText)}`;
+  }
+
+  window.open(url, "_blank");
+}
+
+// Add modal functionality
+function showModal(app, prompt, contributor) {
+  let modalOverlay = document.getElementById('modalOverlay');
+  if (!modalOverlay) {
+    // Create modal if it doesn't exist
+    const modalHTML = `
+      <div class="modal-overlay" id="modalOverlay">
+        <div class="modal">
+          <div class="modal-header">
+            <h2 class="modal-title"></h2>
+            <div class="modal-actions">
+              <button class="modal-copy-button" title="Copy 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">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              </button>
+              <button class="modal-close" title="Close">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="modal-content">
+            <div class="modal-hint">
+              Copy and paste this onto <a href="https://code.visualstudio.com/docs/copilot/overview" target="_blank">VSCode Copilot</a>, 
+              <a href="https://codeium.com/windsurf" target="_blank">Windsurf</a> or 
+              <a href="https://cursor.com" target="_blank">Cursor</a>
+            </div>
+            <div class="content-well">
+              <pre><code></code></pre>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <div class="modal-footer-left">
+              <a class="modal-contributor" target="_blank" rel="noopener"></a>
+            </div>
+            <div class="modal-footer-right">
+              <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>
+                </svg>
+                <svg class="terminal-icon" style="display: none;" 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">
+                  <polyline points="4 17 10 11 4 5"></polyline>
+                  <line x1="12" y1="19" x2="20" y2="19"></line>
+                </svg>
+                Start Chat
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+    modalOverlay = document.getElementById('modalOverlay');
+
+    // Add event listeners
+    const modalClose = modalOverlay.querySelector('.modal-close');
+    modalClose.addEventListener('click', hideModal);
+    modalOverlay.addEventListener('click', (e) => {
+      if (e.target === modalOverlay) {
+        hideModal();
+      }
+    });
+
+    // Add copy functionality
+    const modalCopyButton = modalOverlay.querySelector('.modal-copy-button');
+    modalCopyButton.addEventListener('click', () => {
+      copyPrompt(modalCopyButton, encodeURIComponent(prompt));
+    });
+  }
+
+  const modalTitle = modalOverlay.querySelector('.modal-title');
+  const modalCode = modalOverlay.querySelector('.modal-content code');
+  const modalContributor = modalOverlay.querySelector('.modal-contributor');
+
+  modalTitle.textContent = app;
+  modalCode.innerHTML = prompt.replace(/\\n/g, '<br>');
+  if (contributor) {
+    modalContributor.href = `https://github.com/${contributor.replace('@', '')}`;
+    modalContributor.textContent = `Contributed by ${contributor}`;
+  }
+
+  modalOverlay.style.display = 'block';
+  document.body.style.overflow = 'hidden';
+}
+
+function hideModal() {
+  const modalOverlay = document.getElementById('modalOverlay');
+  if (!modalOverlay) return;
+
+  modalOverlay.style.display = 'none';
+  document.body.style.overflow = '';
+}
+
+// Add global event listener for Escape key
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    hideModal();
+  }
+});
+
+// Function to handle chat button click in modal
+function openModalChat() {
+  const modalContent = document.querySelector('.modal-content code');
+  if (modalContent) {
+    const content = modalContent.textContent;
+    openInChat(null, encodeURIComponent(content.trim()));
+  }
+}

vibe/vibecoding.csv

@@ -1,11 +0,0 @@
-act,prompt
-TodoApp,"Create a simple todo app with HTML, CSS, and JavaScript that allows users to add, complete, and delete tasks. Include local storage functionality."
-WeatherApp,"Build a weather app that fetches data from a weather API. Show current temperature, conditions, and a 5-day forecast. Use modern CSS for styling."
-CalculatorApp,"Create a calculator web app with basic arithmetic operations (+, -, *, /). Include a clean, modern interface with proper error handling."
-NotesApp,"Develop a notes application that lets users create, edit, and delete notes. Include markdown support and local storage persistence."
-TimerApp,"Build a countdown timer app with start, pause, and reset functionality. Add sound notifications when timer completes."
-QuizApp,"Create a simple quiz app that presents multiple-choice questions, tracks score, and shows results at the end."
-ColorPicker,"Build a color picker tool that shows RGB, HEX values and generates complementary colors."
-PasswordGenerator,"Create a password generator that creates strong passwords with customizable length and character types."
-BMICalculator,"Build a BMI calculator that takes height and weight inputs and shows the BMI category with health recommendations."
-CurrencyConverter,"Create a currency converter that fetches real-time exchange rates and converts between different currencies."

vibeprompts.csv

@@ -0,0 +1,11 @@
+app,prompt,contributor,techstack
+"Todo List","Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript.\nRequirements:\n1) Clean UI with CSS Grid/Flexbox\n2) Add/edit/delete/complete tasks\n3) Categories and priority levels\n4) Due dates with date-picker\n5) Local storage for persistence\n6) Search and filter tasks\n7) Drag and drop reordering\n8) Responsive design with media queries\n9) Dark/light theme toggle\n10) Basic animations",@f,"HTML,CSS,JavaScript"
+"Weather Dashboard","Build a modern weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API.\nInclude:\n1) Current weather with icons\n2) 5-day forecast\n3) Hourly breakdown\n4) Search by city/coordinates\n5) Geolocation support\n6) Temperature unit toggle\n7) Weather alerts\n8) Wind/humidity/pressure stats\n9) Sunrise/sunset times\n10) Responsive grid layout with CSS Grid",@f,"HTML,CSS,JavaScript,API"
+"Scientific Calculator","Create a scientific calculator with HTML5, CSS3 and JavaScript.\nFeatures:\n1) Basic arithmetic\n2) Scientific functions (sin,cos,log etc)\n3) Memory operations\n4) History log\n5) Keyboard support\n6) Error handling\n7) Responsive design\n8) Theme switcher\n9) Sound feedback\n10) Copy results",@f,"HTML,CSS,JavaScript" 
+"Markdown Notes","Build a markdown notes app with HTML5, CSS3 and JavaScript.\nInclude:\n1) Rich text editor\n2) Live markdown preview\n3) Categories/tags\n4) Search notes\n5) Local storage sync\n6) Export to PDF/MD\n7) Dark mode\n8) Responsive layout\n9) Keyboard shortcuts\n10) Auto-save",@f,"HTML,CSS,JavaScript"
+"Pomodoro Timer","Create a pomodoro timer app using HTML5, CSS3 and JavaScript.\nFeatures:\n1) Work/break timers\n2) Custom intervals\n3) Progress circle\n4) Sound notifications\n5) Task tracking\n6) Statistics dashboard\n7) Local storage\n8) PWA support\n9) Keyboard shortcuts\n10) Multiple themes",@f,"HTML,CSS,JavaScript"
+"Interactive Quiz","Develop an interactive quiz app with HTML5, CSS3 and JavaScript.\nInclude:\n1) Multiple choice questions\n2) Timer per question\n3) Score tracking\n4) Progress bar\n5) Review answers\n6) Leaderboard\n7) Different categories\n8) Difficulty levels\n9) Results summary\n10) Share results",@f,"HTML,CSS,JavaScript"
+"Advanced Color Picker Tool","Build an advanced color tool with HTML5, CSS3 and JavaScript.\nFeatures:\n1) Color picker\n2) RGB/HSL/HEX conversion\n3) Color palettes\n4) Save favorites\n5) Color harmony\n6) Gradient generator\n7) Contrast checker\n8) Copy values\n9) Color naming\n10) Export options",@f,"HTML,CSS,JavaScript"
+"Secure Password Generator Tool","Create a secure password generator using HTML5, CSS3 and JavaScript.\nInclude:\n1) Custom length\n2) Character types\n3) Password strength meter\n4) Copy button\n5) Save passwords\n6) Generate multiple\n7) Password history\n8) Entropy calculator\n9) Memorable options\n10) Export list",@f,"HTML,CSS,JavaScript"
+"Health Metrics Calculator","Build a health metrics calculator with HTML5, CSS3 and JavaScript.\nFeatures:\n1) BMI calculator\n2) Body fat %\n3) Ideal weight\n4) Calorie needs\n5) Health tips\n6) Metric/Imperial\n7) Results history\n8) Progress charts\n9) Print report\n10) Save profile",@f,"HTML,CSS,JavaScript"
+"Currency Exchange Calculator","Develop a currency converter using HTML5, CSS3, JavaScript and Exchange Rate API.\nInclude:\n1) Live rates\n2) Multiple currencies\n3) Conversion history\n4) Favorite pairs\n5) Charts/graphs\n6) Offline support\n7) Calculator\n8) Rate alerts\n9) Compare rates\n10) Print/export",@f,"HTML,CSS,JavaScript,API"