diff --git a/_layouts/default.html b/_layouts/default.html index 6fd3691..6a24ce5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -340,6 +340,18 @@ 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; @@ -356,6 +368,7 @@ color: var(--accent-color); border: 1px solid var(--accent-color); text-decoration: none; + cursor: pointer; transition: all 0.2s ease; } @@ -364,14 +377,55 @@ 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; @@ -777,12 +831,50 @@ 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); @@ -913,11 +1005,15 @@

prompts.chat

World's First & Most Famous Prompts Directory

- ChatGPT - Claude - Gemini - Llama - Mistral +

Choose your AI platform

+
+ + + + + + +
@@ -1286,8 +1382,8 @@ const promptElements = document.querySelectorAll('h2[id^=act] + p + blockquote'); promptElements.forEach((blockquote) => { - const title = blockquote.previousElementSibling.previousElementSibling.textContent; - const content = blockquote.textContent; + const title = blockquote.previousElementSibling.previousElementSibling.textContent.trim(); + const content = blockquote.textContent.trim(); // Extract contributor from the paragraph element const contributorParagraph = blockquote.previousElementSibling; @@ -1325,12 +1421,19 @@ card.innerHTML = `
${title} - +
+ + +

${content}

@${contributor} @@ -1420,7 +1523,17 @@
- +
+ +
+
+ +
@@ -1440,11 +1553,31 @@ 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 = ` + + + + 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 => @@ -1495,6 +1628,90 @@ // Optional: Remove modal from DOM when hidden modalOverlay.remove(); } + + let selectedPlatform = localStorage.getItem('selected-platform') || 'chatgpt'; // Get from localStorage or default to chatgpt + + // 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="chatgpt"]'); + 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 '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 = ''; + 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())); + } + }