<!DOCTYPE html> <html lang="{{ page.lang | default: site.lang | default: "en-US" }}"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>prompts.chat — awesome AI prompts</title> {% seo %} <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}"> <style> :root { --bg-color-light: #ffffff; --bg-color-dark: #1a1a1a; --text-color-light: #000000; --text-color-dark: #ffffff; --sidebar-width: 300px; --accent-color: #10b981; --accent-color-hover: #059669; } body { background-color: var(--bg-color-light); color: var(--text-color-light); margin: 0; padding: 0; } 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; } .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; } .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; } .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; } .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; } .star-count { 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 - 140px); overflow-y: auto; background-color: var(--bg-color-light); } .dark-mode .sidebar { background-color: var(--bg-color-dark); border-right-color: #2d2d2d; } .main-content { flex: 1; height: calc(100vh - 140px); overflow-y: auto; padding: 20px; } .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; } } .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-actions { display: flex; gap: 12px; flex-shrink: 0; } .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; gap: 8px; margin-right: 12px; } .dev-mode-label { font-size: 0.9rem; color: var(--accent-color); opacity: 0.8; } .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; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; } input:checked + .slider { background-color: var(--accent-color); } 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%; } @media (max-width: 768px) { .dev-mode-label { display: none; } } /* 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: 460px; 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); } .copilot-suggestion-content { margin-bottom: 24px; color: var(--text-color-light); font-size: 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; } .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); } .copilot-suggestion-buttons { display: flex; gap: 12px; order: 1; } .copilot-suggestion-button { padding: 10px 16px; border-radius: 8px; font-size: 0.95rem; border: none; cursor: pointer; transition: all 0.2s ease; flex: 1; font-weight: 500; } .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; } .copilot-suggestion-content { font-size: 0.95rem; margin-bottom: 20px; } .copilot-suggestion-button { padding: 8px 14px; font-size: 0.9rem; } } </style> {% include head-custom.html %} <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6945602608405209" crossorigin="anonymous"></script> </head> <body> <div class="layout-wrapper"> <!-- Copilot Suggestion Modal Backdrop --> <div class="copilot-suggestion-backdrop"></div> <!-- Copilot Suggestion Modal --> <div class="copilot-suggestion-modal" id="copilotSuggestionModal"> <div class="copilot-suggestion-content"> GitHub Copilot may work better with developer mode. Would you like to switch to GitHub Copilot? </div> <div class="copilot-suggestion-actions"> <div class="copilot-suggestion-buttons"> <button class="copilot-suggestion-button secondary" onclick="hideCopilotSuggestion(false)">No, thanks</button> <button class="copilot-suggestion-button primary" onclick="hideCopilotSuggestion(true)">Switch to Copilot</button> </div> <label class="copilot-suggestion-checkbox"> <input type="checkbox" id="doNotShowAgain"> Don't show again </label> </div> </div> <header class="site-header"> <div class="header-left"> <h1 class="site-title">prompts.chat</h1> <p class="site-slogan">World's First & Most Famous Prompts Directory</p> <div class="site-description"> <p class="platform-hint">Choose your AI platform</p> <div class="platform-pills"> <button class="platform-tag" data-platform="github-copilot" data-url="https://github.com/copilot">GitHub Copilot</button> <button class="platform-tag" data-platform="chatgpt" data-url="https://chat.openai.com">ChatGPT</button> <button class="platform-tag" data-platform="claude" data-url="https://claude.ai/new">Claude</button> <button class="platform-tag" data-platform="perplexity" data-url="https://perplexity.ai">Perplexity</button> <button class="platform-tag" data-platform="gemini" data-url="https://gemini.google.com">Gemini</button> <button class="platform-tag" data-platform="llama" data-url="https://meta.ai">Llama</button> <button class="platform-tag" data-platform="mistral" data-url="https://chat.mistral.ai/chat">Mistral</button> </div> </div> </div> <div class="header-right"> <div class="dev-mode-toggle"> <label class="switch"> <input type="checkbox" id="devModeToggle"> <span class="slider round"></span> </label> <span class="dev-mode-label">Dev Prompts</span> </div> <a href="https://github.com/f/awesome-chatgpt-prompts/stargazers" target="_blank" class="star-count"> <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"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> <span id="starCount">...</span> </a> <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode"> <svg class="mode-icon sun-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"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg> <svg class="mode-icon moon-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" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> </button> </div> </header> <div class="content-wrapper"> <div class="sidebar"> <div class="search-container"> <div class="prompt-count" id="promptCount"> <span class="count-label">All Prompts</span> <span class="count-number">0</span> </div> <input type="text" id="searchInput" placeholder="Search prompts..."> <ul id="searchResults"></ul> </div> </div> <div class="main-content"> <div class="container-lg markdown-body"> {{ content }} {% if site.github.private != true and site.github.license %} <div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray"> Awesome ChatGPT Prompts is open source. {% github_edit_link "Improve this page" %}. </div> {% endif %} </div> </div> </div> <footer class="site-footer"> <div class="footer-content"> <div class="footer-section"> <h3>About</h3> <p>A curated collection of effective prompts for ChatGPT and other AI assistants, curated by <a href="https://x.com/fkadev">Fatih Kadir Akın</a>. While designed for ChatGPT, these prompts can be adapted for Claude, Gemini, Llama, and other language models to help you get more out of AI interactions.</p> </div> <div class="footer-section"> <h3>Contributing</h3> <p>If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome. Please read the <a href="https://github.com/f/awesome-chatgpt-prompts/blob/main/CONTRIBUTING.md" style="color: var(--accent-color);">contribution guidelines</a> first.</p> </div> <div class="footer-section"> <h3>Links</h3> <div class="book-links"> <a href="https://www.forbes.com/sites/tjmccue/2023/01/19/chatgpt-success-completely-depends-on-your-prompt/?sh=497a92a21a16" target="_blank" class="book-link"> <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="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> Featured on Forbes </a> <a href="https://github.com/f/awesome-chatgpt-prompts" target="_blank" class="book-link"> <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="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> GitHub Repository </a> <a href="https://huggingface.co/datasets/fka/awesome-chatgpt-prompts" target="_blank" class="book-link"> <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="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="10" x2="21" y2="10"></line> <line x1="7" y1="15" x2="7" y2="19"></line> <line x1="11" y1="15" x2="11" y2="19"></line> <line x1="15" y1="15" x2="15" y2="19"></line> </svg> Hugging Face Dataset </a> <a href="https://github.com/f/awesome-chatgpt-prompts/pulls" target="_blank" class="book-link"> <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"> <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> View Unmerged Prompts </a> </div> </div> <div class="footer-section"> <h3>e-Books by @f</h3> <div class="book-links"> <a href="https://fka.gumroad.com/l/art-of-chatgpt-prompting" class="book-link" target="_blank"> <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="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> The Art of ChatGPT Prompting </a> <a href="https://fka.gumroad.com/l/how-to-make-money-with-chatgpt" class="book-link" target="_blank"> <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="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> How to Make Money with ChatGPT </a> <a href="https://fka.gumroad.com/l/the-art-of-midjourney-ai-guide-to-creating-images-from-text" class="book-link" target="_blank"> <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="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> The Art of Midjourney AI </a> </div> </div> </div> </footer> </div> <script> // Dark mode functionality function toggleDarkMode() { const body = document.body; const toggle = document.querySelector('.dark-mode-toggle'); const sunIcon = toggle.querySelector('.sun-icon'); const moonIcon = toggle.querySelector('.moon-icon'); body.classList.toggle('dark-mode'); const isDarkMode = body.classList.contains('dark-mode'); localStorage.setItem('dark-mode', isDarkMode); sunIcon.style.display = isDarkMode ? 'none' : 'block'; moonIcon.style.display = isDarkMode ? 'block' : 'none'; } // Initialize everything after DOM loads document.addEventListener('DOMContentLoaded', () => { // Initialize dev mode const devModeToggle = document.getElementById('devModeToggle'); const isDevMode = localStorage.getItem('dev-mode') === 'true'; devModeToggle.checked = isDevMode; // Handle dev mode toggle devModeToggle.addEventListener('change', (e) => { const isDevMode = e.target.checked; localStorage.setItem('dev-mode', isDevMode); // Check if we should show Copilot suggestion if (isDevMode) { const currentPlatform = document.querySelector('.platform-tag.active'); const shouldNotShow = localStorage.getItem('copilot-suggestion-hidden') === 'true'; if (currentPlatform && currentPlatform.dataset.platform !== 'github-copilot' && !shouldNotShow) { showCopilotSuggestion(); } } filterPrompts(); }); // Fetch GitHub stars fetch('https://api.github.com/repos/f/awesome-chatgpt-prompts') .then(response => response.json()) .then(data => { const stars = data.stargazers_count; document.getElementById('starCount').textContent = stars.toLocaleString(); }) .catch(error => { console.error('Error fetching star count:', error); document.getElementById('starCount').textContent = '50k+'; }); // Create prompt cards createPromptCards(); // Initialize dark mode const isDarkMode = localStorage.getItem('dark-mode'); const toggle = document.querySelector('.dark-mode-toggle'); const sunIcon = toggle.querySelector('.sun-icon'); const moonIcon = toggle.querySelector('.moon-icon'); // Set dark mode by default if not set if (isDarkMode === null) { localStorage.setItem('dark-mode', 'true'); document.body.classList.add('dark-mode'); sunIcon.style.display = 'none'; moonIcon.style.display = 'block'; } else if (isDarkMode === 'true') { document.body.classList.add('dark-mode'); sunIcon.style.display = 'none'; moonIcon.style.display = 'block'; } else { sunIcon.style.display = 'block'; moonIcon.style.display = 'none'; } // Initialize search functionality initializeSearch(); }); // Search functionality async function initializeSearch() { try { const response = await fetch('/prompts.csv'); const csvText = await response.text(); const prompts = parseCSV(csvText); // Sort prompts alphabetically by act prompts.sort((a, b) => a.act.localeCompare(b.act)); const searchInput = document.getElementById('searchInput'); const searchResults = document.getElementById('searchResults'); const promptCount = document.getElementById('promptCount'); const isDevMode = document.getElementById('devModeToggle').checked; // Update prompt count const totalPrompts = isDevMode ? prompts.filter(p => p.for_devs === true).length : prompts.length; updatePromptCount(totalPrompts, totalPrompts); // Show filtered prompts initially const filteredPrompts = isDevMode ? prompts.filter(p => p.for_devs === true) : prompts; displaySearchResults(filteredPrompts); searchInput.addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const filteredPrompts = prompts.filter(prompt => { const matchesSearch = prompt.act.toLowerCase().includes(searchTerm) || prompt.prompt.toLowerCase().includes(searchTerm); return isDevMode ? (matchesSearch && prompt.for_devs === true) : matchesSearch; }); // Update count with filtered results const totalPrompts = isDevMode ? prompts.filter(p => p.for_devs === true).length : prompts.length; updatePromptCount(filteredPrompts.length, totalPrompts); displaySearchResults(filteredPrompts); }); } catch (error) { console.error('Error loading prompts:', error); } } function updatePromptCount(filteredCount, totalCount) { const promptCount = document.getElementById('promptCount'); const countLabel = promptCount.querySelector('.count-label'); const countNumber = promptCount.querySelector('.count-number'); if (filteredCount === totalCount) { promptCount.classList.remove('filtered'); countLabel.textContent = 'All Prompts'; countNumber.textContent = totalCount; } else { promptCount.classList.add('filtered'); countLabel.textContent = `Found ${filteredCount} of ${totalCount}`; countNumber.textContent = filteredCount; } } 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 === 'act') { value = value.replace(/`/g, ''); } // Convert 'TRUE'/'FALSE' strings to boolean for for_devs if (header === 'for_devs') { value = value.toUpperCase() === 'TRUE'; } entry[header] = value; }); return entry; }).filter(entry => entry.act && entry.prompt); } function displaySearchResults(results) { const searchResults = document.getElementById('searchResults'); const searchInput = document.getElementById('searchInput'); const isDevMode = document.getElementById('devModeToggle').checked; // Filter results based on dev mode if (isDevMode) { results = results.filter(result => result.for_devs === true); } searchResults.innerHTML = ''; if (window.innerWidth <= 768 && !searchInput.value.trim()) { return; } if (results.length === 0) { const li = document.createElement('li'); li.className = 'search-result-item add-prompt'; li.innerHTML = ` <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> `; searchResults.appendChild(li); return; } results.forEach(result => { const li = document.createElement('li'); li.className = 'search-result-item'; li.textContent = result.act; li.addEventListener('click', () => { // 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 = result.act .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 } else { console.log('Card not found for:', result.act); } }); searchResults.appendChild(li); }); } // Function to filter prompts based on dev mode function filterPrompts() { const isDevMode = document.getElementById('devModeToggle').checked; const searchInput = document.getElementById('searchInput'); const searchTerm = searchInput.value.toLowerCase(); // Re-fetch and filter prompts fetch('/prompts.csv') .then(response => response.text()) .then(csvText => { const prompts = parseCSV(csvText); const filteredPrompts = prompts.filter(prompt => { const matchesSearch = !searchTerm || prompt.act.toLowerCase().includes(searchTerm) || prompt.prompt.toLowerCase().includes(searchTerm); return isDevMode ? (matchesSearch && prompt.for_devs === true) : matchesSearch; }); // Update count with filtered results updatePromptCount(filteredPrompts.length, isDevMode ? prompts.filter(p => p.for_devs === true).length : prompts.length); displaySearchResults(filteredPrompts); // Update prompt cards visibility const promptsGrid = document.querySelector('.prompts-grid'); if (promptsGrid) { const cards = promptsGrid.querySelectorAll('.prompt-card:not(.contribute-card)'); cards.forEach(card => { const title = card.querySelector('.prompt-title').textContent.trim(); const matchingPrompt = prompts.find(p => { const pTitle = p.act.replace(/\s+/g, ' ').replace(/[\n\r]/g, '').trim(); const cardTitle = title.replace(/\s+/g, ' ').replace(/[\n\r]/g, '').trim(); return pTitle.toLowerCase() === cardTitle.toLowerCase() || pTitle.toLowerCase().includes(cardTitle.toLowerCase()) || cardTitle.toLowerCase().includes(pTitle.toLowerCase()); }); // Show card if not in dev mode or if it's a dev prompt in dev mode card.style.display = (!isDevMode || (matchingPrompt && matchingPrompt.for_devs === true)) ? '' : 'none'; }); } }); } // Update the modal initialization and event listeners function createPromptCards() { const container = document.querySelector('.container-lg.markdown-body'); const promptsGrid = document.createElement('div'); promptsGrid.className = 'prompts-grid'; // Add contribute box const contributeCard = document.createElement('div'); contributeCard.className = 'prompt-card contribute-card'; contributeCard.innerHTML = ` <a href="https://github.com/f/awesome-chatgpt-prompts/pulls" target="_blank" style="text-decoration: none; color: inherit; height: 100%; display: flex; flex-direction: column;"> <div class="prompt-title" style="display: flex; align-items: center; gap: 8px;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> Add Your Prompt </div> <p class="prompt-content" style="flex-grow: 1;"> Share your creative prompts with the community! Submit a pull request to add your prompts to the collection. </p> <span class="contributor-badge">Contribute Now</span> </a> `; promptsGrid.appendChild(contributeCard); // Fetch prompts.csv to get for_devs information fetch('/prompts.csv') .then(response => response.text()) .then(csvText => { const prompts = parseCSV(csvText); const isDevMode = document.getElementById('devModeToggle').checked; const promptElements = document.querySelectorAll('h2[id^=act] + p + blockquote'); promptElements.forEach((blockquote) => { const title = blockquote.previousElementSibling.previousElementSibling.textContent.trim(); const content = blockquote.textContent.trim(); // Find matching prompt in CSV const matchingPrompt = prompts.find(p => { const csvTitle = p.act.replace(/\s+/g, ' ').replace(/[\n\r]/g, '').trim(); const elementTitle = title.replace(/\s+/g, ' ').replace(/[\n\r]/g, '').trim(); return csvTitle.toLowerCase() === elementTitle.toLowerCase() || csvTitle.toLowerCase().includes(elementTitle.toLowerCase()) || elementTitle.toLowerCase().includes(csvTitle.toLowerCase()); }); // Extract contributor from the paragraph element const contributorParagraph = blockquote.previousElementSibling; const contributorText = contributorParagraph.textContent; let contributor = null; // Try different contributor formats const formats = [ /Contributed by: \[([^\]]+)\]/i, /Contributed by \[([^\]]+)\]/i, /Contributed by: @([^\s]+)/i, /Contributed by @([^\s]+)/i, /Contributed by: \[@([^\]]+)\]/i, /Contributed by \[@([^\]]+)\]/i ]; for (const format of formats) { const match = contributorText.match(format); if (match) { contributor = match[1]; // Remove @ if it exists at the start contributor = contributor.replace(/^@/, ''); break; } } // Set default contributor to 'f' if none found if (!contributor) { contributor = 'f'; } const card = document.createElement('div'); card.className = 'prompt-card'; // Set initial visibility based on dev mode if (isDevMode && (!matchingPrompt || !matchingPrompt.for_devs)) { card.style.display = 'none'; } card.innerHTML = ` <div class="prompt-title"> ${title} <div class="action-buttons"> <button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(content.trim())}')"> <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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> </button> <button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(content.trim())}')"> <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">${content}</p> <a href="https://github.com/${contributor}" class="contributor-badge" target="_blank" rel="noopener">@${contributor}</a> `; // Add click event for showing modal card.addEventListener('click', (e) => { if (!e.target.closest('.copy-button') && !e.target.closest('.contributor-badge')) { showModal(title, content); } }); const copyButton = card.querySelector('.copy-button'); copyButton.addEventListener('click', async (e) => { e.stopPropagation(); try { await navigator.clipboard.writeText(content); copyButton.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(() => { copyButton.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"> <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> `; }, 2000); } catch (err) { alert('Failed to copy prompt to clipboard'); } }); promptsGrid.appendChild(card); }); container.innerHTML = ''; container.appendChild(promptsGrid); // Initialize modal event listeners initializeModalListeners(); }) .catch(error => { console.error('Error loading prompts:', error); }); } function initializeModalListeners() { const modalOverlay = document.getElementById('modalOverlay'); const modalClose = document.querySelector('.modal-close'); if (!modalOverlay || !modalClose) return; modalClose.addEventListener('click', hideModal); modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) { hideModal(); } }); } // Add global event listener for Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { hideModal(); } }); function createModal() { 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> <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 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> Start Chat </button> </div> </div> </div> </div> `; document.body.insertAdjacentHTML('beforeend', modalHTML); initializeModalListeners(); } function showModal(title, content) { let modalOverlay = document.getElementById('modalOverlay'); if (!modalOverlay) { createModal(); modalOverlay = document.getElementById('modalOverlay'); } const modalTitle = modalOverlay.querySelector('.modal-title'); const modalContent = modalOverlay.querySelector('.modal-content'); const modalCopyButton = modalOverlay.querySelector('.modal-copy-button'); const modalContributor = modalOverlay.querySelector('.modal-contributor'); const modalChatButton = modalOverlay.querySelector('.modal-chat-button'); if (!modalTitle || !modalContent) return; modalTitle.textContent = title; modalContent.textContent = content; // Update chat button text with platform name and handle visibility const platform = document.querySelector('.platform-tag.active'); if (platform) { const shouldHideChat = ['gemini', 'llama'].includes(platform.dataset.platform); modalChatButton.style.display = shouldHideChat ? 'none' : 'flex'; if (!shouldHideChat) { modalChatButton.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"> <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> Chat with ${platform.textContent} `; } } // Store content for chat button modalChatButton.dataset.content = content; // Find the contributor for this prompt const promptCard = Array.from(document.querySelectorAll('.prompt-card')).find(card => card.querySelector('.prompt-title').textContent.trim() === title.trim() ); if (promptCard) { const contributorBadge = promptCard.querySelector('.contributor-badge'); if (contributorBadge) { modalContributor.href = contributorBadge.href; modalContributor.textContent = `Contributed by ${contributorBadge.textContent}`; } } // Add copy functionality modalCopyButton.addEventListener('click', async () => { try { await navigator.clipboard.writeText(content); modalCopyButton.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(() => { modalCopyButton.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"> <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> `; }, 2000); } catch (err) { alert('Failed to copy prompt to clipboard'); } }); 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 = ''; // Optional: Remove modal from DOM when hidden modalOverlay.remove(); } let selectedPlatform = localStorage.getItem('selected-platform') || 'github-copilot'; // Get from localStorage or default to github // Platform toggle functionality document.querySelectorAll('.platform-tag').forEach(button => { button.addEventListener('click', () => { document.querySelectorAll('.platform-tag').forEach(btn => btn.classList.remove('active')); button.classList.add('active'); selectedPlatform = button.dataset.platform; localStorage.setItem('selected-platform', selectedPlatform); // Hide/show chat buttons based on platform const chatButtons = document.querySelectorAll('.chat-button, .modal-chat-button'); const shouldHideChat = ['gemini', 'llama'].includes(selectedPlatform); chatButtons.forEach(btn => { btn.style.display = shouldHideChat ? 'none' : 'flex'; }); }); }); // Set active platform from localStorage and handle initial button visibility const platformToActivate = document.querySelector(`[data-platform="${selectedPlatform}"]`) || document.querySelector('[data-platform="github-copilot"]'); platformToActivate.classList.add('active'); // Set initial chat button visibility const shouldHideChat = ['gemini', 'llama'].includes(selectedPlatform); document.querySelectorAll('.chat-button, .modal-chat-button').forEach(btn => { btn.style.display = shouldHideChat ? 'none' : 'flex'; }); // Function to open prompt in selected AI chat platform 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 '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'); } // Existing copy function async function copyPrompt(button, encodedPrompt) { const promptText = decodeURIComponent(encodedPrompt); try { 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"><path d="M20 6L9 17 4 12"/></svg>'; setTimeout(() => { button.innerHTML = originalHTML; }, 1000); } catch (err) { console.error('Failed to copy text: ', err); } } // Function to handle chat button click in modal function openModalChat() { const modalContent = document.querySelector('.modal-content'); if (modalContent) { const content = modalContent.textContent; openInChat(null, encodeURIComponent(content.trim())); } } // Add these functions before the closing script tag function showCopilotSuggestion() { const modal = document.getElementById('copilotSuggestionModal'); const backdrop = document.querySelector('.copilot-suggestion-backdrop'); if (modal) { if (!backdrop) { const backdropDiv = document.createElement('div'); backdropDiv.className = 'copilot-suggestion-backdrop'; document.body.appendChild(backdropDiv); } modal.style.display = 'block'; backdrop.style.display = 'block'; document.body.style.overflow = 'hidden'; } } function hideCopilotSuggestion(switchToCopilot) { const modal = document.getElementById('copilotSuggestionModal'); const backdrop = document.querySelector('.copilot-suggestion-backdrop'); const doNotShowCheckbox = document.getElementById('doNotShowAgain'); if (doNotShowCheckbox && doNotShowCheckbox.checked) { localStorage.setItem('copilot-suggestion-hidden', 'true'); } if (switchToCopilot) { const copilotButton = document.querySelector('[data-platform="github-copilot"]'); if (copilotButton) { copilotButton.click(); } } if (modal) { modal.style.display = 'none'; if (backdrop) { backdrop.style.display = 'none'; } document.body.style.overflow = ''; } } </script> <style>video { max-width: 100% !important; }</style> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-MSNHFWTE77'); </script> </body> </html>