From dd44f655941e4663806f4db64808a564f15968b3 Mon Sep 17 00:00:00 2001 From: f Date: Sun, 16 Mar 2025 00:32:10 +0000 Subject: [PATCH] deploy: 12e15893aa3a5df324dd8b8f8e0e35c908815a16 --- README.md | 3 +- index.html | 1906 +---------------------------------------- script.js | 6 +- style.css | 1988 +++++++++++++++++++++++++++++++++++++++++++ vibe/index.html | 188 ++++ vibe/script.js | 413 +++++++++ vibe/vibecoding.csv | 11 - vibeprompts.csv | 33 + 8 files changed, 2651 insertions(+), 1897 deletions(-) create mode 100644 style.css create mode 100644 vibe/index.html create mode 100644 vibe/script.js delete mode 100644 vibe/vibecoding.csv create mode 100644 vibeprompts.csv diff --git a/README.md b/README.md index 2a7234b..c7f4b8f 100644 --- a/README.md +++ b/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 diff --git a/index.html b/index.html index 3822ea2..bea6b6f 100644 --- a/index.html +++ b/index.html @@ -6,1887 +6,24 @@ prompts.chat — awesome AI prompts - -Awesome ChatGPT Prompts | This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better. + +prompts.chat | This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better. - + - + - + +{"@context":"https://schema.org","@type":"WebSite","description":"This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.","headline":"prompts.chat","name":"prompts.chat","url":"/"} - - + +
@@ -1911,7 +48,14 @@

prompts.chat

-

World's First & Most Famous Prompts Directory

+

World's First & Most Famous Prompts Directory + + + New: Try Vibe Coding Mode! + + +

+

Choose your AI platform

@@ -1932,6 +76,7 @@
+
@@ -1979,6 +124,7 @@
+
@@ -2023,8 +169,10 @@
+
-

+

+

prompts.chat

@@ -4624,8 +2772,7 @@ awesome-chatgpt-prompts repository and push it back”

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 .”

+to python code with the comment to understand it. Consider it’s a code when I use “code here”

Act as Virtual Fitness Coach

@@ -5138,12 +3285,7 @@ scaling solutions.

CC-0

- - -
- Awesome ChatGPT Prompts is open source. Improve this page.
-
@@ -5212,6 +3354,7 @@ scaling solutions.

+ + diff --git a/script.js b/script.js index 399ffbd..c5a0813 100644 --- a/script.js +++ b/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, diff --git a/style.css b/style.css new file mode 100644 index 0000000..42938ea --- /dev/null +++ b/style.css @@ -0,0 +1,1988 @@ +:root { + --bg-color-light: #ffffff; + --bg-color-dark: #1a1a1a; + --text-color-light: #000000; + --text-color-dark: #ffffff; + --header-height: 145px; + --footer-height: 145px; + --sidebar-width: 300px; + --accent-color: #10b981; + --accent-color-hover: #059669; + --tech-badge-bg: #f3f4f6; + --tech-badge-text: #4b5563; + --tech-badge-bg-dark: #374151; + --tech-badge-text-dark: #d1d5db; + --background-color: var(--bg-color-light); + --background-color-dark: var(--bg-color-dark); + --border-color: #e1e4e8; + --border-color-dark: #2d2d2d; +} + +body { + background-color: var(--bg-color-light); + color: var(--text-color-light); + margin: 0; + padding: 0; + overflow-y: hidden; +} + +@media (max-width: 768px) { + body { + overflow-y: auto !important; + } +} + +body.dark-mode { + background-color: var(--bg-color-dark); + color: var(--text-color-dark); +} + +.dark-mode-toggle { + background-color: transparent; + border: none; + color: var(--accent-color); + cursor: pointer; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.dark-mode-toggle:hover { + opacity: 1; +} + +.mode-icon { + width: 20px; + height: 20px; + stroke: currentColor; +} + +.site-header { + padding: 1rem 2rem; + text-align: left; + border-bottom: 1px solid #e1e4e8; + background-color: var(--bg-color-light); + position: sticky; + top: 0; + z-index: 100; + display: flex; + justify-content: space-between; + align-items: center; + height: var(--header-height); +} + +.dark-mode .site-header { + background-color: var(--bg-color-dark); + border-bottom-color: #2d2d2d; +} + +.header-left { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0; +} + +.header-right { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +.star-count { + display: flex; + align-items: center; + gap: 4px; + color: var(--accent-color); + font-size: 0.9rem; + opacity: 0.8; + text-decoration: none; + transition: opacity 0.2s ease; +} + +.star-count:hover { + opacity: 1; +} + +.star-count svg { + width: 16px; + height: 16px; +} + +.social-links { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + margin-right: 8px; +} + +.social-link { + color: var(--accent-color); + opacity: 0.8; + transition: opacity 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.social-link:hover { + opacity: 1; +} + +.social-link svg { + width: 24px; + height: 24px; +} + +.techstack-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-right: 0.5rem; +} + +.tech-badge { + background: var(--tech-badge-bg); + color: var(--tech-badge-text); + padding: 0.1rem 0.2rem; + border-radius: 0.25rem; + font-size: 0.7rem; + font-weight: 500; + white-space: nowrap; +} + +.dark-mode .tech-badge { + background: var(--tech-badge-bg-dark); + color: var(--tech-badge-text-dark); +} + +.card-footer { + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + bottom: 12px; + left: 12px; + right: 0; +} + +.card-footer .contributor-badge { + bottom: 0; +} + +.site-footer { + padding: 12px 20px; + text-align: center; + border-top: 1px solid #e1e4e8; + background: var(--bg-color-light); + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 100; + height: var(--footer-height); +} + +.dark-mode .site-footer { + background: var(--bg-color-dark); + border-color: #2d2d2d; +} + +.footer-content { + max-width: none; + margin: 0; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0 30px; + text-align: left; + font-size: 0.7rem; + padding: 0 1rem; +} + +.footer-section { + display: flex; + flex-direction: column; + gap: 6px; +} + +.footer-section h3 { + font-size: 0.8rem; + margin: 0; + opacity: 0.8; +} + +.dark-mode .footer-section h3 { + color: var(--text-color-dark); +} + +.footer-section p { + font-size: inherit; + margin: 0; + line-height: 1.3; + opacity: 0.6; + color: var(--text-color-light); +} + +.dark-mode .footer-section p { + color: var(--text-color-dark); +} + +.book-links { + display: flex; + flex-direction: column; + gap: 4px; +} + +.book-link svg { + width: 14px; + height: 14px; +} + +/* Add padding to main content to prevent overlap with fixed footer */ +.layout-wrapper { + padding-bottom: 100px; +} + +@media (max-width: 768px) { + .footer-content { + grid-template-columns: 1fr; + gap: 12px; + text-align: left; + padding: 0 1rem; + } + + .footer-section { + text-align: left; + } + + .footer-section p { + text-align: left; + } + + .book-links { + align-items: flex-start; + } + + .site-footer { + position: static; + text-align: left; + } + + .layout-wrapper { + padding-bottom: 0; + } + + .site-description { + display: none !important; + } + + .site-header { + padding: 0.75rem 1rem; + flex-direction: column; + align-items: stretch; + gap: 8px; + position: relative; + } + + .header-right { + position: absolute; + top: 1.3rem; + right: 0.75rem; + gap: 8px; + display: flex; + align-items: center; + } + + .star-count { + display: flex; + font-size: 0.8rem; + } + + .star-count svg { + width: 14px; + height: 14px; + } + + .dark-mode-toggle { + padding: 4px; + } + + .mode-icon { + width: 18px; + height: 18px; + } + + .site-slogan { + display: none; + } + + .site-description { + display: flex !important; + margin-top: 4px; + } + + .platform-hint { + font-size: 0.7rem; + } + + .platform-tag { + padding: 1px 6px; + font-size: 0.75rem; + } + + .github-link { + display: none; + } + + .github-link span { + display: none; + } + + .search-container { + padding-bottom: 0 !important; + margin-bottom: 0 !important; + } +} + +.site-title { + font-size: 1.8rem; + font-weight: 700; + margin: 0; + background: linear-gradient(45deg, var(--accent-color), #3b82f6); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + display: inline-block; + position: relative; + transition: transform 0.3s ease; +} + +/* Blinking cursor animation for development mode */ +@keyframes blink-cursor { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +.site-slogan { + font-size: 0.9rem; + opacity: 0.7; + margin: 0 0 0.8rem 0; + line-height: 1; +} + +@media (max-width: 768px) { + .site-slogan { + display: none; + } + + .site-description { + display: flex !important; + margin-top: 4px; + } + + .platform-hint { + font-size: 0.7rem; + } + + .platform-tag { + padding: 1px 6px; + font-size: 0.75rem; + } + + .header-right { + gap: 8px; + } + + .mode-text { + display: none; + } + + .dark-mode-toggle { + padding: 6px; + } + + .github-link { + padding: 6px; + } + + .github-link span { + display: none; + } +} + +.site-title:hover { + transform: translateY(-2px); +} + +.site-title::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(45deg, var(--accent-color), #3b82f6); + filter: blur(20px); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.site-title:hover::before { + opacity: 0.15; +} + +.site-description { + color: var(--text-color-light); + margin: 0; + font-size: 0.95rem; + opacity: 0.8; + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.platform-hint { + font-size: 0.75rem; + opacity: 0.6; + margin: 0; +} + +.platform-pills { + display: flex; + gap: 0.5rem; + align-items: center; + flex-wrap: wrap; +} + +.platform-tag { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: 12px; + font-size: 0.85rem; + background: rgba(16, 185, 129, 0.1); + color: var(--accent-color); + border: 1px solid var(--accent-color); + text-decoration: none; + cursor: pointer; + transition: all 0.2s ease; +} + +.platform-tag:hover { + background: rgba(16, 185, 129, 0.2); + transform: translateY(-1px); +} + +.platform-tag.active { + background: var(--accent-color); + color: white; + transform: translateY(-1px); +} + +.dark-mode .platform-tag { + background: rgba(16, 185, 129, 0.2); +} + +.dark-mode .platform-tag:hover { + background: rgba(16, 185, 129, 0.25); +} + +.dark-mode .platform-tag.active { + background: var(--accent-color); +} + +.dark-mode .site-description { + color: var(--text-color-dark); +} + +.action-buttons { + display: flex; + gap: 8px; + align-items: center; +} + +.chat-button { + background: transparent; + border: none; + cursor: pointer; + padding: 2px; + color: var(--accent-color); + opacity: 0.8; + transition: opacity 0.2s ease; + z-index: 2; + flex-shrink: 0; +} + +.chat-button:hover { + opacity: 1; +} + +.chat-button svg { + width: 16px; + height: 16px; +} + +.layout-wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.content-wrapper { + display: flex; + flex: 1; +} + +.sidebar { + width: var(--sidebar-width); + padding: 20px; + border-right: 1px solid #e1e4e8; + height: calc(100vh - var(--header-height) - var(--footer-height)); + overflow-y: auto; + background-color: var(--bg-color-light); +} + +.dark-mode .sidebar { + background-color: var(--bg-color-dark); + border-right-color: #2d2d2d; + scrollbar-color: #2d2d2d transparent; +} + +.main-content { + flex: 1; + height: calc(100vh - var(--header-height) - var(--footer-height)); + overflow-y: auto; + padding: 20px; + padding-top: 0; + position: relative; +} + +.dark-mode .main-content { + scrollbar-color: #2d2d2d transparent; +} + +.main-content-header { + position: sticky; + top: 0; + background-color: var(--bg-color-light); + padding: 6px 38px; + border-bottom: 1px solid #e1e4e8; + z-index: 10; + margin: -20px -20px 20px -20px; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +.dark-mode .main-content-header { + background-color: var(--bg-color-dark); + border-color: #2d2d2d; +} + +.main-content-header .header-content { + display: flex; + align-items: center; + justify-content: end; + margin: 0 auto; + gap: 16px; +} + +.main-content-header .header-description { + font-size: 0.85rem; + color: var(--text-color-light); + opacity: 0.8; + white-space: nowrap; +} + +.dark-mode .main-content-header .header-description { + color: var(--text-color-dark); +} + +.main-content-header .platform-selectors { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + color: var(--text-color-light); + opacity: 0.9; + flex-wrap: wrap; + margin-right: 0 !important; +} + +.dark-mode .main-content-header .platform-selectors { + color: var(--text-color-dark); +} + +.main-content-header .dev-mode-toggle { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 8px; + border: 1px solid #e1e4e8; + border-radius: 6px; + background-color: var(--bg-color-light); + min-width: 120px; + margin-left: auto; +} + +.dark-mode .main-content-header .dev-mode-toggle { + background-color: var(--bg-color-dark); + border-color: #2d2d2d; +} + +.main-content-header .dev-mode-toggle:hover { + border-color: var(--accent-color); +} + +.main-content-header .dev-mode-label { + font-size: 13px; + color: var(--text-color-light); + white-space: nowrap; + order: 1; +} + +.dark-mode .main-content-header .dev-mode-label { + color: var(--text-color-dark); +} + +.main-content-header .switch { + order: 2; +} + +@media (max-width: 768px) { + .main-content-header { + padding: 12px 40px; + margin: -16px -16px 16px -16px; + } + + .main-content-header .header-content { + flex-direction: column; + align-items: stretch; + gap: 12px; + } + + .main-content-header .header-description { + text-align: left; + white-space: normal; + } + + .main-content-header .platform-selectors { + flex-direction: row; + flex-wrap: wrap; + width: 100%; + align-items: center; + text-align: left; + gap: 4px; + } + + .main-content-header .custom-select, + .main-content-header .custom-input { + width: auto; + min-width: 0; + flex: 0 1 auto; + } + + .main-content-header .custom-input { + width: 100%; + } + + /* Show custom inputs on new line when visible */ + .main-content-header .custom-input:not([style*="display: none"]) { + margin-top: 4px; + margin-bottom: 4px; + } +} + +.main-content-header .custom-select { + padding: 2px 20px 2px 4px; + font-size: inherit; + border: none; + border-radius: 4px; + background-color: transparent; + color: var(--accent-color); + cursor: pointer; + min-width: 0; + font-weight: 500; + background-position: right 4px center; + background-size: 12px; + text-decoration: underline; + text-underline-offset: 2px; +} + +.main-content-header .custom-select:hover { + opacity: 0.8; +} + +.main-content-header .custom-input { + padding: 2px 4px; + font-size: inherit; + border: none; + border-bottom: 1px dashed var(--accent-color); + border-radius: 0; + background-color: transparent; + color: var(--accent-color); + min-width: 100px; + font-weight: 500; +} + +.main-content-header .custom-input:focus { + outline: none; + box-shadow: none; + border-bottom-style: solid; +} + +.prompts-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + max-width: 100%; + margin: 0; + padding: 16px; +} + +.container-lg.markdown-body { + padding: 0; + max-width: none; +} + +@media (max-width: 1600px) { + .prompts-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 1200px) { + .prompts-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .prompts-grid { + grid-template-columns: 1fr; + gap: 15px; + } + + .card-footer { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .contributor-badge { + margin-left: 0; + } +} + +.prompt-card { + background: var(--bg-color-light); + border: 1px solid #e1e4e8; + border-radius: 12px; + padding: 16px; + position: relative; + transition: transform 0.2s ease; + display: flex; + flex-direction: column; + min-height: 200px; +} + +.dark-mode .prompt-card { + background: var(--bg-color-dark); + border-color: #2d2d2d; +} + +.prompt-card:hover { + transform: translateY(-2px); +} + +.prompt-title { + font-size: 1rem; + font-weight: 600; + margin: 0 0 12px 0; + color: var(--text-color-light); + line-height: 1.4; + display: flex; + justify-content: space-between; + align-items: center; +} + +.dark-mode .prompt-title { + color: var(--text-color-dark); +} + +.prompt-content { + font-size: 0.9rem; + line-height: 1.5; + color: var(--text-color-light); + opacity: 0.8; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 40px; +} + +.dark-mode .prompt-content { + color: var(--text-color-dark); +} + +.copy-button { + position: static; + background: transparent; + border: none; + cursor: pointer; + padding: 2px; + color: var(--accent-color); + opacity: 0.8; + transition: opacity 0.2s ease; + z-index: 2; + margin-left: 8px; + flex-shrink: 0; +} + +.copy-button:hover { + opacity: 1; +} + +.copy-button svg { + width: 16px; + height: 16px; +} + +.search-container { + margin-bottom: 20px; +} + +.prompt-count { + margin-bottom: 12px; + padding: 6px 10px; + border-radius: 6px; + background: rgba(16, 185, 129, 0.1); + color: var(--accent-color); + font-size: 0.8rem; + font-weight: 500; + display: flex; + align-items: center; + justify-content: space-between; +} + +.dark-mode .prompt-count { + background: rgba(16, 185, 129, 0.15); +} + +.prompt-count .count-number { + font-weight: 600; + font-size: 0.9rem; +} + +.prompt-count.filtered { + background: rgba(59, 130, 246, 0.1); + color: #3b82f6; +} + +.dark-mode .prompt-count.filtered { + background: rgba(59, 130, 246, 0.15); +} + +#searchInput { + width: 100%; + padding: 8px; + border: 1px solid #e1e4e8; + border-radius: 4px; + margin-bottom: 10px; + background-color: var(--bg-color-light); + color: var(--text-color-light); +} + +.dark-mode #searchInput { + background-color: var(--bg-color-dark); + color: var(--text-color-dark); + border-color: #2d2d2d; +} + +#searchResults { + list-style: none; + padding: 0; + margin: 0; +} + +.search-result-item { + padding: 8px 12px; + cursor: pointer; + transition: all 0.2s ease; + border-radius: 6px; +} + +.search-result-item:hover { + background-color: rgba(16, 185, 129, 0.1); + border-radius: 6px; + transform: translateX(4px); +} + +.dark-mode .search-result-item:hover { + background-color: rgba(16, 185, 129, 0.2); +} + +.search-result-item.active { + background-color: var(--accent-color); + color: white; +} + +@media (max-width: 768px) { + .content-wrapper { + flex-direction: column; + } + + .sidebar { + width: 100%; + height: auto; + border-right: none; + border-bottom: 1px solid #e1e4e8; + } + + .dark-mode .sidebar { + border-bottom-color: #2d2d2d; + } + + .main-content { + height: auto; + } + + .header-right { + gap: 8px; + } + + .mode-text { + display: none; + } + + .dark-mode-toggle { + padding: 6px; + } + + .github-link { + padding: 6px; + } + + .github-link span { + display: none; + } +} + +/* Add modal styles */ +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 1000; + backdrop-filter: blur(4px); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--bg-color-light); + border-radius: 12px; + padding: 24px; + width: 90%; + max-width: 800px; + max-height: 90vh; + overflow-y: auto; + z-index: 1001; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); +} + +.dark-mode .modal { + background: var(--bg-color-dark); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 16px; +} + +.modal-title { + font-size: 1.4rem; + font-weight: 600; + margin: 0; + padding-right: 80px; + color: var(--text-color-light); + flex: 1; +} + +.modal-copy-button { + background: transparent; + border: none; + cursor: pointer; + padding: 4px; + color: var(--accent-color); + opacity: 0.8; + transition: opacity 0.2s ease; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +.modal-close { + position: static; + background: transparent; + border: none; + cursor: pointer; + color: var(--text-color-light); + padding: 4px; + opacity: 0.7; + transition: opacity 0.2s ease; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +.dark-mode .modal-close { + color: var(--text-color-dark); +} + +.modal-close:hover { + opacity: 1; +} + +.prompt-card { + cursor: pointer; +} + +/* Add contributor badge styles */ +.contributor-badge { + position: absolute; + bottom: 8px; + right: 12px; + font-size: 0.65rem; + color: var(--accent-color); + text-decoration: none; + opacity: 0.7; + transition: all 0.2s ease; + background: rgba(16, 185, 129, 0.1); + padding: 1px 6px; + border-radius: 8px; +} + +.dark-mode .contributor-badge { + background: rgba(16, 185, 129, 0.15); +} + +.contributor-badge:hover { + opacity: 1; + transform: translateY(-1px); + background: var(--accent-color); + color: white; +} + +.dark-mode .contributor-badge:hover { + color: var(--bg-color-dark); +} + +.prompt-content { + font-size: 0.9rem; + line-height: 1.5; + color: var(--text-color-light); + opacity: 0.8; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 40px; +} + +/* Add modal header and footer styles */ +.modal-footer { + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid #e1e4e8; + display: flex; + justify-content: space-between; + align-items: center; +} + +.dark-mode .modal-footer { + border-color: #2d2d2d; +} + +.modal-footer-left { + display: flex; + align-items: center; + gap: 8px; +} + +.modal-footer-right { + display: flex; + align-items: center; + gap: 12px; +} + +.modal-chat-button { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + border-radius: 6px; + font-size: 0.9rem; + background: var(--accent-color); + color: white; + border: none; + cursor: pointer; + transition: all 0.2s ease; +} + +.modal-chat-button:hover { + background: var(--accent-color-hover); +} + +.modal-chat-button svg { + width: 16px; + height: 16px; +} + +.modal-contributor { + font-size: 0.8rem; + color: var(--accent-color); + text-decoration: none; + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.modal-contributor:hover { + opacity: 1; +} + +.dark-mode .modal-title { + color: var(--text-color-dark); +} + +.modal-content { + font-size: 1rem; + line-height: 1.6; + color: var(--text-color-light); +} + +.dark-mode .modal-content { + color: var(--text-color-dark); +} + +.modal-copy-button:hover { + opacity: 1; +} + +.modal-copy-button svg { + width: 20px; + height: 20px; +} + +.modal-close svg { + width: 20px; + height: 20px; +} + +.dark-mode .modal-close { + color: var(--text-color-dark); +} + +.footer-section a { + color: var(--accent-color); + text-decoration: none; +} + +.footer-section a:hover { + opacity: 1; +} + +.book-link { + color: var(--accent-color) !important; + padding: 1px 0; + display: flex; + align-items: center; + gap: 8px; + opacity: 0.7; + transition: opacity 0.2s ease; +} + +.dark-mode .book-link { + color: var(--accent-color) !important; +} + +.book-link:hover { + opacity: 1; +} + +.social-footer-link { + color: var(--accent-color); + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.dark-mode .social-footer-link { + color: var(--accent-color); +} + +.contribute-card { + border: 2px dashed var(--accent-color); + background: rgba(16, 185, 129, 0.05); + transition: all 0.2s ease; +} + +.contribute-card:hover { + background: rgba(16, 185, 129, 0.1); + transform: translateY(-2px); +} + +.dark-mode .contribute-card { + background: rgba(16, 185, 129, 0.1); +} + +.dark-mode .contribute-card:hover { + background: rgba(16, 185, 129, 0.15); +} + +.search-result-item.add-prompt { + color: var(--accent-color); + border: 1px dashed var(--accent-color); + background: rgba(16, 185, 129, 0.05); + transition: all 0.2s ease; +} + +.search-result-item.add-prompt:hover { + background: rgba(16, 185, 129, 0.1); + transform: translateY(-1px); +} + +.dark-mode .search-result-item.add-prompt { + background: rgba(16, 185, 129, 0.1); +} + +.dark-mode .search-result-item.add-prompt:hover { + background: rgba(16, 185, 129, 0.15); +} + +.star-count { + display: flex; + align-items: center; + gap: 4px; + color: var(--accent-color); + font-size: 0.9rem; + opacity: 0.8; + text-decoration: none; + transition: opacity 0.2s ease; +} + +.star-count:hover { + opacity: 1; +} + +.star-count svg { + width: 16px; + height: 16px; +} + +@media (max-width: 768px) { + .star-count { + display: flex; + font-size: 0.8rem; + } + + .star-count svg { + width: 14px; + height: 14px; + } +} + +/* Dev Mode Toggle Switch Styles */ +.dev-mode-toggle { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + border: 1px solid #e1e4e8; + border-radius: 6px; + background-color: var(--bg-color-light); + min-width: 120px; + flex: 1; +} + +.dev-mode-label { + font-size: 14px; + color: var(--text-color-light); + white-space: nowrap; + order: 1; +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; +} + +.dark-mode .slider { + background-color: #555; +} + +.slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 2px; + bottom: 2px; + background-color: white; + transition: .4s; +} + +.dark-mode .slider:before { + background-color: #e1e1e1; +} + +input:checked + .slider { + background-color: var(--accent-color); +} + +.dark-mode input:checked + .slider { + background-color: var(--accent-color); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--accent-color); +} + +.dark-mode input:focus + .slider { + box-shadow: 0 0 1px var(--accent-color); +} + +input:checked + .slider:before { + transform: translateX(20px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.main-content-header .dev-mode-toggle { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + border: 1px solid #e1e4e8; + border-radius: 6px; + background-color: var(--bg-color-light); + min-width: 160px; + flex: 1; +} + +.dark-mode .main-content-header .dev-mode-toggle { + background-color: var(--bg-color-dark); + border-color: #2d2d2d; +} + +.main-content-header .dev-mode-toggle:hover { + border-color: var(--accent-color); +} + +.main-content-header .dev-mode-label { + font-size: 14px; + color: var(--text-color-light); + white-space: nowrap; + order: 1; +} + +.dark-mode .main-content-header .dev-mode-label { + color: var(--text-color-dark); +} + +.main-content-header .switch { + order: 2; +} + +@media (max-width: 768px) { + .main-content-header .dev-mode-toggle { + width: 100%; + order: -1; + } + + .main-content-header .dev-mode-label { + display: inline-block; + } + + .main-content-header .platform-selectors { + flex-direction: column; + width: 100%; + } +} + +/* Copilot Suggestion Modal Styles */ +.copilot-suggestion-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + z-index: 1001; + display: none; +} + +.dark-mode .copilot-suggestion-backdrop { + background: rgba(0, 0, 0, 0.7); +} + +.copilot-suggestion-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--bg-color-light); + border-radius: 12px; + padding: 32px; + width: 90%; + max-width: 520px; + z-index: 1002; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); + display: none; +} + +.dark-mode .copilot-suggestion-modal { + background: var(--bg-color-dark); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); +} + +.prompts-count-label { + display: none; +} + +.dev-mode .count-label { + display: none; +} + +.dev-mode .prompts-count-label { + display: block; +} + +.copilot-suggestion-content { + margin-bottom: 24px; + color: var(--text-color-light); + font-size: 1.1rem; + line-height: 1.5; +} + +.dark-mode .copilot-suggestion-content { + color: var(--text-color-dark); +} + +.copilot-suggestion-actions { + display: flex; + flex-direction: column; + gap: 16px; +} + +.copilot-suggestion-checkbox { + display: flex; + align-items: center; + gap: 8px; + color: var(--text-color-light); + font-size: 0.9rem; + opacity: 0.8; + order: 2; + margin-top: 8px; +} + +.dark-mode .copilot-suggestion-checkbox { + color: var(--text-color-dark); +} + +.copilot-suggestion-checkbox input[type="checkbox"] { + width: 16px; + height: 16px; + accent-color: var(--accent-color); + cursor: pointer; + margin: 0; +} + +.copilot-suggestion-checkbox:hover { + opacity: 1; +} + +.copilot-suggestion-buttons { + display: flex; + flex-direction: column; + gap: 12px; + order: 1; +} + +.copilot-suggestion-button { + padding: 12px 16px; + border-radius: 8px; + font-size: 0.95rem; + border: none; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; + width: 100%; +} + +.copilot-suggestion-button.primary { + background: var(--accent-color); + color: white; +} + +.copilot-suggestion-button.primary:hover { + background: var(--accent-color-hover); + transform: translateY(-1px); +} + +.copilot-suggestion-button.secondary { + background: transparent; + color: var(--text-color-light); + border: 1px solid #e1e4e8; +} + +.dark-mode .copilot-suggestion-button.secondary { + color: var(--text-color-dark); + border-color: #2d2d2d; +} + +.copilot-suggestion-button.secondary:hover { + background: rgba(0, 0, 0, 0.05); + transform: translateY(-1px); +} + +.dark-mode .copilot-suggestion-button.secondary:hover { + background: rgba(255, 255, 255, 0.05); +} + +@media (max-width: 480px) { + .copilot-suggestion-modal { + padding: 24px; + max-width: 100%; + margin: 0 16px; + } + + .copilot-suggestion-content { + font-size: 1rem; + margin-bottom: 20px; + } + + .copilot-suggestion-button { + padding: 10px 16px; + font-size: 0.9rem; + } +} + +/* Variable Input Field Styles */ +.variable-container { + margin-bottom: 24px; + padding: 16px; + background: rgba(16, 185, 129, 0.05); + border-radius: 8px; + border: 1px solid var(--accent-color); +} + +.variable-form { + display: grid; + gap: 12px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.variable-input-wrapper { + display: flex; + flex-direction: column; + gap: 4px; +} + +.variable-input-wrapper label { + font-size: 0.8rem; + color: var(--accent-color); + font-weight: 500; +} + +.variable-input { + padding: 8px; + border: 1px solid #e1e4e8; + border-radius: 4px; + font-size: 0.9rem; + background: var(--bg-color-light); + color: var(--text-color-light); + transition: all 0.2s ease; +} + +.dark-mode .variable-input { + background: var(--bg-color-dark); + color: var(--text-color-dark); + border-color: #2d2d2d; +} + +.variable-input:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1); +} + +.modal-content { + /* white-space: pre-wrap; */ +} + +.chrome-ext-link { + display: flex; + align-items: center; + gap: 4px; + color: var(--accent-color); + font-size: 0.9rem; + opacity: 0.8; + text-decoration: none; + transition: opacity 0.2s ease; +} + +.chrome-ext-link:hover { + opacity: 1; +} + +.chrome-ext-link svg { + width: 20px; + height: 20px; +} + +.platform-selectors { + display: flex; + align-items: center; + gap: 8px; + margin-right: 16px; +} + +.custom-select { + padding: 6px 12px; + font-size: 14px; + border: 1px solid #e1e4e8; + border-radius: 6px; + background-color: var(--bg-color-light); + color: var(--text-color-light); + cursor: pointer; + transition: all 0.2s ease; + min-width: 120px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 8px center; + background-size: 16px; + padding-right: 32px; +} + +.dark-mode .custom-select { + background-color: var(--bg-color-dark); + color: var(--text-color-dark); + border-color: #2d2d2d; +} + +.custom-select:hover { + border-color: var(--accent-color); +} + +.custom-select:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); +} + +.custom-input { + padding: 6px 12px; + font-size: 14px; + border: 1px solid #e1e4e8; + border-radius: 6px; + background-color: var(--bg-color-light); + color: var(--text-color-light); + transition: all 0.2s ease; + min-width: 150px; +} + +.dark-mode .custom-input { + background-color: var(--bg-color-dark); + color: var(--text-color-dark); + border-color: #2d2d2d; +} + +.custom-input:hover { + border-color: var(--accent-color); +} + +.custom-input:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); +} + +.custom-input::placeholder { + color: #6a737d; + opacity: 0.8; +} + +.dark-mode .custom-input::placeholder { + color: #8b949e; +} + +@media (max-width: 768px) { + .platform-selectors { + flex-direction: column; + align-items: stretch; + gap: 8px; + margin-bottom: 12px; + width: 100%; + } + + .custom-select, + .custom-input { + width: 100%; + } +} + +.main-content-header .custom-select { + min-width: 0; +} + +.main-content-header .custom-input { + flex: 1; + min-width: 0; +} + +@media (max-width: 768px) { + .main-content-header { + padding: 12px 40px; + margin: -16px -16px 16px -16px; + } + + .main-content-header .header-content { + flex-direction: column; + align-items: stretch; + gap: 12px; + } + + .main-content-header .header-description { + text-align: left; + white-space: normal; + } + + .main-content-header .platform-selectors { + flex-direction: row; + flex-wrap: wrap; + width: 100%; + align-items: center; + text-align: left; + gap: 4px; + } + + .main-content-header .custom-select, + .main-content-header .custom-input { + width: auto; + min-width: 0; + flex: 0 1 auto; + } + + .main-content-header .custom-input { + width: 100%; + } + + /* Show custom inputs on new line when visible */ + .main-content-header .custom-input:not([style*="display: none"]) { + margin-top: 4px; + margin-bottom: 4px; + } +} + +.platform-tag-container { + position: relative; + display: inline-block; +} + +.grok-mode-dropdown { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + min-width: 160px; + margin-top: 4px; + background: var(--bg-color-light); + border: 1px solid var(--accent-color); + border-radius: 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + font-size: 0.8rem; + overflow: hidden; + padding: 4px; +} + +.dark-mode .grok-mode-dropdown { + background: var(--bg-color-dark); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.grok-mode-option { + padding: 4px 8px; + cursor: pointer; + color: var(--text-color-light); + transition: all 0.2s ease; + border-radius: 4px; + white-space: nowrap; +} + +.dark-mode .grok-mode-option { + color: var(--text-color-dark); +} + +.grok-mode-option:hover { + background: rgba(16, 185, 129, 0.1); + color: var(--accent-color); +} + +.dark-mode .grok-mode-option:hover { + background: rgba(16, 185, 129, 0.2); +} + +.cursor-logo { + display: flex; + align-items: center; + gap: 6px; + color: var(--accent-color); + opacity: 0.8; + text-decoration: none; + transition: all 0.2s ease; + font-size: 0.85rem; + margin-right: 8px; +} + +.cursor-logo:hover { + opacity: 1; + transform: translateY(-1px); +} + +.cursor-logo svg { + width: 16px; + height: 16px; +} + +/* Style for the Cursor AI logo paths in dark mode */ +.cursor-logo path[fill="#fff"] { + transition: fill 0.2s ease; +} + +.dark-mode .cursor-logo path[fill="#fff"] { + fill: #2d2d2d; +} + +@media (max-width: 768px) { + .cursor-logo span { + display: none; + } +} + +.modal-actions { + display: flex; + gap: 0.5rem; +} + +.modal-hint { + margin-bottom: 1rem; + background-color: var(--hover-color); + border-radius: 6px; + font-size: 0.9rem; + color: var(--text-color); + line-height: 1.4; +} + +.modal-hint a { + color: var(--accent-color); + text-decoration: none; + font-weight: 500; +} + +.modal-hint a:hover { + text-decoration: underline; +} + +.content-well { + background-color: var(--background-color); + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; +} + +.dark-mode .content-well { + background-color: var(--background-color-dark); + border-color: var(--border-color-dark) !important; +} + +.modal-content pre { + margin: 0; + padding: 1rem; + background-color: var(--code-background); + border-radius: 0; + overflow-x: auto; +} + +.modal-content code { + font-family: 'Fira Code', monospace; + font-size: 0.9rem; + line-height: 1.5; + color: var(--code-text); + white-space: pre-wrap; + word-break: break-word; +} + +/* Dark mode adjustments */ + +.dark-mode .modal-content pre { + background-color: var(--dark-code-background); +} + +.dark-mode .modal-content code { + color: var(--dark-code-text); +} + +.dark-mode .modal-hint { + background-color: var(--dark-hover-color); +} + +.dark-mode .content-well { + border-color: var(--dark-border-color); + background-color: var(--dark-background); +} \ No newline at end of file diff --git a/vibe/index.html b/vibe/index.html new file mode 100644 index 0000000..fedf847 --- /dev/null +++ b/vibe/index.html @@ -0,0 +1,188 @@ + + + + + + + + prompts.chat/vibe — awesome AI prompts + +prompts.chat/vibe | prompts.chat + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ GitHub Copilot may work better with developer mode. Would you like to switch to GitHub Copilot? +
+
+
+ + +
+ +
+
+
+
+

prompts.chat/vibe

+

awesome vibe coding prompts to help you build simple apps + +

+ +
+
+ + + + + + ... + + + + + + + + + + + +
+
+ +
+
+
+
+ All Prompts + Developer Prompts + 0 +
+ +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    +
    + +
    + + + + + + + + diff --git a/vibe/script.js b/vibe/script.js new file mode 100644 index 0000000..4b3bf3f --- /dev/null +++ b/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 = `
    ${prompts.map(({ app, prompt, contributor, techstack }) => ` +
    +
    + ${app} +
    + +
    +
    +

    ${prompt.replace(/\\n/g, '
    ')}

    +
    +
    + ${techstack.split(',').map(tech => `${tech.trim()}`).join('')} +
    + ${contributor} +
    +
    + `).join('')}
    `; + + // 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 }) => ` +
  • ${app}
    • + `).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 + ? `
    + + + + + + + Add this prompt + +
    ` + : filtered.map(({ act, prompt }) => ` +
  • + ${act} +
    • + `).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 = ` + + + + `; + 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 = ` + + `; + 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, '
    '); + 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())); + } +} \ No newline at end of file diff --git a/vibe/vibecoding.csv b/vibe/vibecoding.csv deleted file mode 100644 index 4873681..0000000 --- a/vibe/vibecoding.csv +++ /dev/null @@ -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." \ No newline at end of file diff --git a/vibeprompts.csv b/vibeprompts.csv new file mode 100644 index 0000000..f7c40c7 --- /dev/null +++ b/vibeprompts.csv @@ -0,0 +1,33 @@ +app,prompt,contributor,techstack +"Todo List","Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.",@f,"HTML,CSS,JavaScript" +"Weather Dashboard","Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.",@f,"HTML,CSS,JavaScript,API" +"Scientific Calculator","Create a comprehensive scientific calculator with HTML5, CSS3 and JavaScript that mimics professional calculators. Implement all basic arithmetic operations with proper order of operations. Include advanced scientific functions (trigonometric, logarithmic, exponential, statistical) with degree/radian toggle. Add memory operations (M+, M-, MR, MC) with visual indicators. Maintain a scrollable calculation history log that can be cleared or saved. Implement full keyboard support with appropriate key mappings and shortcuts. Add robust error handling for division by zero, invalid operations, and overflow conditions with helpful error messages. Create a responsive design that transforms between standard and scientific layouts based on screen size or orientation. Include multiple theme options (classic, modern, high contrast). Add optional sound feedback for button presses with volume control. Implement copy/paste functionality for results and expressions.",@f,"HTML,CSS,JavaScript" +"Markdown Notes","Build a feature-rich markdown notes application with HTML5, CSS3 and JavaScript. Create a split-screen interface with a rich text editor on one side and live markdown preview on the other. Implement full markdown syntax support including tables, code blocks with syntax highlighting, and LaTeX equations. Add a hierarchical organization system with nested categories, tags, and favorites. Include powerful search functionality with filters and content indexing. Use localStorage with optional export/import for data backup. Support exporting notes to PDF, HTML, and markdown formats. Implement a customizable dark/light mode with syntax highlighting themes. Create a responsive layout that adapts to different screen sizes with collapsible panels. Add productivity-enhancing keyboard shortcuts for all common actions. Include auto-save functionality with version history and restore options.",@f,"HTML,CSS,JavaScript" +"Pomodoro Timer","Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default 25min), short breaks (default 5min), and long breaks (default 15min). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.",@f,"HTML,CSS,JavaScript" +"Interactive Quiz","Develop a comprehensive interactive quiz application with HTML5, CSS3 and JavaScript. Create an engaging UI with smooth transitions between questions. Support multiple question types including multiple choice, true/false, matching, and short answer with automatic grading. Implement configurable timers per question with visual countdown. Add detailed score tracking with points based on difficulty and response time. Show a dynamic progress bar indicating completion percentage. Include a review mode to see correct/incorrect answers with explanations after quiz completion. Implement a persistent leaderboard using localStorage. Organize questions into categories with custom icons and descriptions. Support multiple difficulty levels affecting scoring and time limits. Generate a detailed results summary with performance analytics and improvement suggestions. Add social sharing functionality for results with customizable messages.",@f,"HTML,CSS,JavaScript" +"Advanced Color Picker Tool","Build a professional-grade color tool with HTML5, CSS3 and JavaScript for designers and developers. Create an intuitive interface with multiple selection methods including eyedropper, color wheel, sliders, and input fields. Implement real-time conversion between color formats (RGB, RGBA, HSL, HSLA, HEX, CMYK) with copy functionality. Add a color palette generator with options for complementary, analogous, triadic, tetradic, and monochromatic schemes. Include a favorites system with named collections and export options. Implement color harmony rules visualization with interactive adjustment. Create a gradient generator supporting linear, radial, and conic gradients with multiple color stops. Add an accessibility checker for WCAG compliance with contrast ratios and colorblindness simulation. Implement one-click copy for CSS, SCSS, and SVG code snippets. Include a color naming algorithm to suggest names for selected colors. Support exporting palettes to various formats (Adobe ASE, JSON, CSS variables, SCSS).",@f,"HTML,CSS,JavaScript" +"Secure Password Generator Tool","Create a comprehensive secure password generator using HTML5, CSS3 and JavaScript with cryptographically strong randomness. Build an intuitive interface with real-time password preview. Allow customization of password length with presets for different security levels. Include toggles for character types (uppercase, lowercase, numbers, symbols) with visual indicators. Implement an advanced strength meter showing entropy bits and estimated crack time. Add a one-click copy button with confirmation and automatic clipboard clearing. Create a password vault feature with encrypted localStorage storage. Generate multiple passwords simultaneously with batch options. Maintain a password history with generation timestamps. Calculate and display entropy using standard formulas. Offer memorable password generation options (phrase-based, pattern-based). Include export functionality with encryption options for password lists.",@f,"HTML,CSS,JavaScript" +"Health Metrics Calculator","Build a comprehensive health metrics calculator with HTML5, CSS3 and JavaScript based on medical standards. Create a clean, accessible interface with step-by-step input forms. Implement accurate BMI calculation with visual classification scale and health risk assessment. Add body fat percentage calculator using multiple methods (Navy, Jackson-Pollock, BIA simulation). Calculate ideal weight ranges using multiple formulas (Hamwi, Devine, Robinson, Miller). Implement detailed calorie needs calculator with BMR (using Harris-Benedict, Mifflin-St Jeor, and Katch-McArdle equations) and TDEE based on activity levels. Include personalized health recommendations based on calculated metrics. Support both metric and imperial units with seamless conversion. Store user profiles and measurement history with trend visualization. Generate interactive progress charts showing changes over time. Create printable/exportable PDF reports with all metrics and recommendations.",@f,"HTML,CSS,JavaScript" +"Currency Exchange Calculator","Develop a comprehensive currency converter using HTML5, CSS3, JavaScript and a reliable Exchange Rate API. Create a clean, intuitive interface with prominent input fields and currency selectors. Implement real-time exchange rates with timestamp indicators showing data freshness. Support 170+ global currencies including crypto with appropriate symbols and formatting. Maintain a conversion history log with timestamps and rate information. Allow users to bookmark favorite currency pairs for quick access. Generate interactive historical rate charts with customizable date ranges. Implement offline functionality using cached exchange rates with clear staleness indicators. Add a built-in calculator for complex conversions and arithmetic operations. Create rate alerts for target exchange rates with optional notifications. Include side-by-side comparison of different provider rates when available. Support printing and exporting conversion results in multiple formats (PDF, CSV, JSON).",@f,"HTML,CSS,JavaScript,API" +"File Encryption Tool","Create a client-side file encryption tool using HTML5, CSS3, and JavaScript with the Web Crypto API. Build a drag-and-drop interface for file selection with progress indicators. Implement AES-256-GCM encryption with secure key derivation from passwords (PBKDF2). Add support for encrypting multiple files simultaneously with batch processing. Include password strength enforcement with entropy calculation. Generate downloadable encrypted files with custom file extension. Create a decryption interface with password verification. Implement secure memory handling with automatic clearing of sensitive data. Add detailed logs of encryption operations without storing sensitive information. Include export/import of encryption keys with proper security warnings. Support for large files using streaming encryption and chunked processing.",@f,"HTML,CSS,JavaScript" +"Code Snippet Manager","Build a developer-focused code snippet manager using HTML5, CSS3, and JavaScript. Create a clean IDE-like interface with syntax highlighting for 30+ programming languages. Implement a tagging and categorization system for organizing snippets. Add a powerful search function with support for regex and filtering by language/tags. Include code editing with line numbers, indentation guides, and bracket matching. Support public/private visibility settings for each snippet. Implement export/import functionality in JSON and Gist formats. Add keyboard shortcuts for common operations. Create a responsive design that works well on all devices. Include automatic saving with version history. Add copy-to-clipboard functionality with syntax formatting preservation.",@f,"HTML,CSS,JavaScript" +"Budget Tracker","Develop a comprehensive budget tracking application using HTML5, CSS3, and JavaScript. Create an intuitive dashboard showing income, expenses, savings, and budget status. Implement transaction management with categories, tags, and recurring transactions. Add interactive charts and graphs for expense analysis by category and time period. Include budget goal setting with progress tracking and alerts. Support multiple accounts and transfer between accounts. Implement receipt scanning and storage using the device camera. Add export functionality for reports in CSV and PDF formats. Create a responsive design with mobile-first approach. Include data backup and restore functionality. Add forecasting features to predict future financial status based on current trends.",@f,"HTML,CSS,JavaScript" +"Recipe Finder","Create a recipe finder application using HTML5, CSS3, JavaScript and a food API. Build a visually appealing interface with food photography and intuitive navigation. Implement advanced search with filtering by ingredients, cuisine, diet restrictions, and preparation time. Add user ratings and reviews with star system. Include detailed nutritional information with visual indicators for calories, macros, and allergens. Support recipe saving and categorization into collections. Implement a meal planning calendar with drag-and-drop functionality. Add automatic serving size adjustment with quantity recalculation. Include cooking mode with step-by-step instructions and timers. Support offline access to saved recipes. Add social sharing functionality for favorite recipes.",@f,"HTML,CSS,JavaScript,API" +"Kanban Board","Build a Kanban project management board using HTML5, CSS3, and JavaScript. Create a flexible board layout with customizable columns (To Do, In Progress, Done, etc.). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.",@f,"HTML,CSS,JavaScript" +"Music Player","Develop a web-based music player using HTML5, CSS3, and JavaScript with the Web Audio API. Create a modern interface with album art display and visualizations. Implement playlist management with drag-and-drop reordering. Add audio controls including play/pause, skip, seek, volume, and playback speed. Include shuffle and repeat modes with visual indicators. Support multiple audio formats with fallbacks. Implement a 10-band equalizer with presets. Add metadata extraction and display from audio files. Create a responsive design that works on all devices. Include keyboard shortcuts for playback control. Support background playback with media session API integration.",@f,"HTML,CSS,JavaScript" +"Drawing App","Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript. Build a clean interface with intuitive tool selection. Implement multiple drawing tools including brush, pencil, shapes, text, and eraser. Add color selection with recent colors, color picker, and palettes. Include layer support with opacity and blend mode options. Implement undo/redo functionality with history states. Add image import and export in multiple formats (PNG, JPG, SVG). Support canvas resizing and rotation. Implement zoom and pan navigation. Add selection tools with move, resize, and transform capabilities. Include keyboard shortcuts for common actions.",@f,"HTML,CSS,JavaScript" +"Meditation Timer","Build a mindfulness meditation timer using HTML5, CSS3, and JavaScript. Create a serene, distraction-free interface with nature-inspired design. Implement customizable meditation sessions with preparation, meditation, and rest intervals. Add ambient sound options including nature sounds, binaural beats, and white noise. Include guided meditation with customizable voice prompts. Implement interval bells with volume control and sound selection. Add session history and statistics tracking. Create visual breathing guides with animations. Support offline usage as a PWA. Include dark mode and multiple themes. Add session scheduling with reminders.",@f,"HTML,CSS,JavaScript" +"Flashcard Study System","Develop a comprehensive flashcard study system using HTML5, CSS3, and JavaScript. Create an intuitive interface for card creation and review. Implement spaced repetition algorithm for optimized learning. Add support for text, images, and audio on cards. Include card categorization with decks and tags. Implement study sessions with performance tracking. Add self-assessment with confidence levels. Create statistics dashboard showing learning progress. Support import/export of card decks in standard formats. Implement keyboard shortcuts for efficient review. Add dark mode and customizable themes.",@f,"HTML,CSS,JavaScript" +"Habit Tracker","Create a habit tracking application using HTML5, CSS3, and JavaScript. Build a clean interface showing daily, weekly, and monthly views. Implement habit creation with frequency, reminders, and goals. Add streak tracking with visual indicators and milestone celebrations. Include detailed statistics and progress graphs. Support habit categories and tags for organization. Implement calendar integration for scheduling. Add data visualization showing patterns and trends. Create a responsive design for all devices. Include data export and backup functionality. Add gamification elements with achievements and rewards.",@f,"HTML,CSS,JavaScript" +"Text Analyzer Tool","Build a comprehensive text analysis tool using HTML5, CSS3, and JavaScript. Create a clean interface with text input area and results dashboard. Implement word count, character count, and reading time estimation. Add readability scoring using multiple algorithms (Flesch-Kincaid, SMOG, Coleman-Liau). Include keyword density analysis with visualization. Implement sentiment analysis with emotional tone detection. Add grammar and spelling checking with suggestions. Include text comparison functionality for similarity detection. Support multiple languages with automatic detection. Add export functionality for analysis reports. Implement text formatting and cleaning tools.",@f,"HTML,CSS,JavaScript" +"Image Editor","Develop a web-based image editor using HTML5 Canvas, CSS3, and JavaScript. Create a professional interface with tool panels and preview area. Implement basic adjustments including brightness, contrast, saturation, and sharpness. Add filters with customizable parameters and previews. Include cropping and resizing with aspect ratio controls. Implement text overlay with font selection and styling. Add shape drawing tools with fill and stroke options. Include layer management with blending modes. Support image export in multiple formats and qualities. Create a responsive design that adapts to screen size. Add undo/redo functionality with history states.",@f,"HTML,CSS,JavaScript" +"Sudoku Game","Create an interactive Sudoku game using HTML5, CSS3, and JavaScript. Build a clean, accessible game board with intuitive controls. Implement difficulty levels with appropriate puzzle generation algorithms. Add hint system with multiple levels of assistance. Include note-taking functionality for candidate numbers. Implement timer with pause and resume. Add error checking with optional immediate feedback. Include game saving and loading with multiple slots. Create statistics tracking for wins, times, and difficulty levels. Add printable puzzle generation. Implement keyboard controls and accessibility features.",@f,"HTML,CSS,JavaScript" +"URL Shortener","Build a URL shortening service frontend using HTML5, CSS3, JavaScript and a backend API. Create a clean interface with prominent input field. Implement URL validation and sanitization. Add QR code generation for shortened URLs. Include click tracking and analytics dashboard. Support custom alias creation for URLs. Implement expiration date setting for links. Add password protection option for sensitive URLs. Include copy-to-clipboard functionality with confirmation. Create a responsive design for all devices. Add history of shortened URLs with search and filtering.",@f,"HTML,CSS,JavaScript,API" +"Chess Game","Develop a feature-rich chess game using HTML5, CSS3, and JavaScript. Create a realistic chessboard with proper piece rendering. Implement standard chess rules with move validation. Add move highlighting and piece movement animation. Include game clock with multiple time control options. Implement notation recording with PGN export. Add game analysis with move evaluation. Include AI opponent with adjustable difficulty levels. Support online play with WebRTC or WebSocket. Add opening book and common patterns recognition. Implement tournament mode with brackets and scoring.",@f,"HTML,CSS,JavaScript" +"PDF Viewer","Create a web-based PDF viewer using HTML5, CSS3, JavaScript and PDF.js. Build a clean interface with intuitive navigation controls. Implement page navigation with thumbnails and outline view. Add text search with result highlighting. Include zoom and fit-to-width/height controls. Implement text selection and copying. Add annotation tools including highlights, notes, and drawing. Support document rotation and presentation mode. Include print functionality with options. Create a responsive design that works on all devices. Add document properties and metadata display.",@f,"HTML,CSS,JavaScript" +"Typing Speed Test","Build an interactive typing speed test using HTML5, CSS3, and JavaScript. Create a clean interface with text display and input area. Implement WPM and accuracy calculation in real-time. Add difficulty levels with appropriate text selection. Include error highlighting and correction tracking. Implement test history with performance graphs. Add custom test creation with text import. Include virtual keyboard display showing keypresses. Support multiple languages and keyboard layouts. Create a responsive design for all devices. Add competition mode with leaderboards.",@f,"HTML,CSS,JavaScript" +"Memory Card Game","Develop a memory matching card game using HTML5, CSS3, and JavaScript. Create visually appealing card designs with flip animations. Implement difficulty levels with varying grid sizes and card counts. Add timer and move counter for scoring. Include sound effects for card flips and matches. Implement leaderboard with score persistence. Add theme selection with different card designs. Include multiplayer mode for competitive play. Create responsive layout that adapts to screen size. Add accessibility features for keyboard navigation. Implement progressive difficulty increase during gameplay.",@f,"HTML,CSS,JavaScript" +"Network Packet Analyzer CLI","Create a command-line network packet analyzer in C using libpcap. Implement packet capture from network interfaces with filtering options. Add protocol analysis for common protocols (TCP, UDP, HTTP, DNS, etc.). Include traffic statistics with bandwidth usage and connection counts. Implement packet decoding with detailed header information. Add export functionality in PCAP and CSV formats. Include alert system for suspicious traffic patterns. Implement connection tracking with state information. Add geolocation lookup for IP addresses. Include command-line arguments for all options with sensible defaults. Implement color-coded output for better readability.",@f,"C,libpcap" +"File System Indexer CLI","Build a high-performance file system indexer and search tool in Go. Implement recursive directory traversal with configurable depth. Add file metadata extraction including size, dates, and permissions. Include content indexing with optional full-text search. Implement advanced query syntax with boolean operators and wildcards. Add incremental indexing for performance. Include export functionality in JSON and CSV formats. Implement search result highlighting. Add duplicate file detection using checksums. Include performance statistics and progress reporting. Implement concurrent processing for multi-core utilization.",@f,"Go" +"Memory Profiler CLI","Develop a memory profiling tool in C for analyzing process memory usage. Implement process attachment with minimal performance impact. Add heap analysis with allocation tracking. Include memory leak detection with stack traces. Implement memory usage visualization with detailed statistics. Add custom allocator hooking for detailed tracking. Include report generation in multiple formats. Implement filtering options for noise reduction. Add comparison functionality between snapshots. Include command-line interface with interactive mode. Implement signal handling for clean detachment.",@f,"C" +"HTTP Benchmarking Tool CLI","Create a high-performance HTTP benchmarking tool in Go. Implement concurrent request generation with configurable thread count. Add detailed statistics including latency, throughput, and error rates. Include support for HTTP/1.1, HTTP/2, and HTTP/3. Implement custom header and cookie management. Add request templating for dynamic content. Include response validation with regex and status code checking. Implement TLS configuration with certificate validation options. Add load profile configuration with ramp-up and steady-state phases. Include detailed reporting with percentiles and histograms. Implement distributed testing mode for high-load scenarios.",@f,"Go" \ No newline at end of file