Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PromptGenius Wizard - Your AI Prompt Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| animation: gradientShift 15s ease infinite; | |
| background-size: 200% 200%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .gradient-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%); | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .prompt-card { | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| transform: perspective(1000px) rotateX(0deg); | |
| backface-visibility: hidden; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .prompt-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, #667eea, #764ba2); | |
| } | |
| .prompt-card:hover { | |
| transform: perspective(1000px) rotateX(5deg) translateY(-10px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); | |
| } | |
| .typewriter { | |
| border-right: 3px solid; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| animation: | |
| typing 3s steps(40, end), | |
| blink-caret .75s step-end infinite, | |
| fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #6e8efb } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .btn-glow { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-glow::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); | |
| transform: translate(25%, 25%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .btn-glow:hover::after { | |
| opacity: 0.6; | |
| } | |
| .text-gradient { | |
| background: linear-gradient(90deg, #667eea, #764ba2, #667eea); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| display: inline; | |
| background-size: 200% auto; | |
| animation: shine 3s linear infinite; | |
| } | |
| @keyframes shine { | |
| to { | |
| background-position: 200% center; | |
| } | |
| } | |
| .result-appear { | |
| animation: appear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| @keyframes appear { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white py-24 px-4"> | |
| <div class="container mx-auto max-w-6xl text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> | |
| <span class="text-gradient floating inline-block">PromptGenius Wizard</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 typewriter font-light">The magical tool to craft perfect AI prompts ✨</p> | |
| <div class="flex justify-center"> | |
| <button id="startBtn" class="bg-white text-purple-600 font-bold py-3 px-8 rounded-full text-lg hover:bg-purple-100 transition duration-300 flex items-center btn-glow shadow-lg hover:shadow-xl"> | |
| <i data-feather="wand" class="mr-2"></i> Start the Magic | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Assistant Section --> | |
| <div id="assistantSection" class="hidden container mx-auto max-w-4xl px-4 py-16"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i data-feather="help-circle" class="mr-3 text-purple-600"></i> How can I help you today? | |
| </h2> | |
| <div class="mb-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button class="prompt-btn bg-purple-100 hover:bg-purple-200 text-purple-800 font-medium py-4 px-6 rounded-lg transition duration-300 flex items-center" data-type="content"> | |
| <i data-feather="edit-3" class="mr-3"></i> Content Creation | |
| </button> | |
| <button class="prompt-btn bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-4 px-6 rounded-lg transition duration-300 flex items-center" data-type="coding"> | |
| <i data-feather="code" class="mr-3"></i> Coding Assistance | |
| </button> | |
| <button class="prompt-btn bg-green-100 hover:bg-green-200 text-green-800 font-medium py-4 px-6 rounded-lg transition duration-300 flex items-center" data-type="learning"> | |
| <i data-feather="book" class="mr-3"></i> Learning & Research | |
| </button> | |
| <button class="prompt-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 font-medium py-4 px-6 rounded-lg transition duration-300 flex items-center" data-type="creative"> | |
| <i data-feather="sparkles" class="mr-3"></i> Creative Writing | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="customQuestion" class="block text-gray-700 font-medium mb-2">Or ask your specific need:</label> | |
| <div class="flex"> | |
| <input type="text" id="customQuestion" placeholder="Example: How to write a professional email..." class="flex-grow border border-gray-300 rounded-l-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button id="generatePromptBtn" class="bg-purple-600 text-white py-3 px-6 rounded-r-lg hover:bg-purple-700 transition duration-300 flex items-center"> | |
| <i data-feather="search" class="mr-2"></i> Generate | |
| </button> | |
| </div> | |
| </div> | |
| <div id="resultSection" class="hidden mt-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">✨ Your Perfect Prompt:</h3> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-6 border border-gray-100"> | |
| <div id="generatedPrompt" class="text-gray-700 font-medium text-lg leading-relaxed"></div> | |
| <button id="copyPromptBtn" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg transition duration-300 flex items-center"> | |
| <i data-feather="copy" class="mr-2"></i> Copy Prompt | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-blue-50 p-5 rounded-lg border border-blue-100"> | |
| <h4 class="font-bold text-blue-800 mb-3 flex items-center"> | |
| <i data-feather="settings" class="mr-2"></i> Recommended Settings | |
| </h4> | |
| <div id="recommendedSettings" class="text-gray-700"></div> | |
| </div> | |
| <div class="bg-green-50 p-5 rounded-lg border border-green-100"> | |
| <h4 class="font-bold text-green-800 mb-3 flex items-center"> | |
| <i data-feather="tool" class="mr-2"></i> Suggested Tools | |
| </h4> | |
| <div id="suggestedTools" class="text-gray-700"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Examples Section --> | |
| <div class="container mx-auto max-w-4xl px-4 py-20"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-12">Prompt Examples</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="prompt-card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3">Content Creation</h3> | |
| <p class="text-gray-600 mb-4">"Act as a professional copywriter. Create a 300-word blog post about [topic] targeting [audience]. Use an engaging tone, include 3 subheadings, and end with a call-to-action."</p> | |
| <div class="text-sm text-purple-600 font-medium">Best for: Bloggers, Marketers</div> | |
| </div> | |
| <div class="prompt-card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3">Coding Assistance</h3> | |
| <p class="text-gray-600 mb-4">"You are an expert [language] developer. Explain how [concept] works in simple terms, provide a practical code example with comments, and list common use cases."</p> | |
| <div class="text-sm text-blue-600 font-medium">Best for: Developers, Students</div> | |
| </div> | |
| <div class="prompt-card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3">Learning & Research</h3> | |
| <p class="text-gray-600 mb-4">"Summarize the key points about [topic] in bullet points. Include historical context, current applications, and future prospects. Use simple language suitable for beginners."</p> | |
| <div class="text-sm text-green-600 font-medium">Best for: Students, Researchers</div> | |
| </div> | |
| <div class="prompt-card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3">Creative Writing</h3> | |
| <p class="text-gray-600 mb-4">"You are a fantasy novelist. Create a detailed character profile including appearance, backstory, personality traits, motivations, and a secret they keep."</p> | |
| <div class="text-sm text-yellow-600 font-medium">Best for: Writers, Storytellers</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-16 px-4 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-10"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-purple-500 mix-blend-screen filter blur-3xl animate-pulse"></div> | |
| <div class="absolute top-3/4 right-1/4 w-64 h-64 rounded-full bg-blue-500 mix-blend-screen filter blur-3xl animate-pulse delay-500"></div> | |
| </div> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">PromptGenius Wizard</h3> | |
| <p class="text-gray-300">Crafting perfect AI prompts since 2023</p> | |
| </div> | |
| <div class="flex flex-col space-y-4 md:space-y-0 md:space-x-8"> | |
| <button onclick="saveSite()" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform flex items-center"> | |
| <i data-feather="download" class="w-5 h-5 mr-2"></i> Save Site | |
| </button> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform"> | |
| <i data-feather="github" class="w-6 h-6 hover:text-purple-400"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform"> | |
| <i data-feather="twitter" class="w-6 h-6 hover:text-blue-400"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform"> | |
| <i data-feather="mail" class="w-6 h-6 hover:text-pink-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 relative z-10"> | |
| <p class="text-sm">© 2023 PromptGenius Wizard. All prompts are free to use.</p> | |
| <div class="mt-2"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-purple-500 animate-pulse"></span> | |
| <span class="inline-block w-2 h-2 rounded-full bg-purple-500 animate-pulse delay-100 mx-1"></span> | |
| <span class="inline-block w-2 h-2 rounded-full bg-purple-500 animate-pulse delay-200"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Animate elements on page load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| gsap.from('.prompt-card', { | |
| duration: 0.8, | |
| y: 30, | |
| opacity: 0, | |
| stagger: 0.15, | |
| ease: 'back.out(1.2)' | |
| }); | |
| gsap.from('#startBtn', { | |
| duration: 1, | |
| y: 20, | |
| opacity: 0, | |
| delay: 0.5, | |
| ease: 'elastic.out(1, 0.5)' | |
| }); | |
| }); | |
| // Show assistant section when start button is clicked | |
| document.getElementById('startBtn').addEventListener('click', function() { | |
| gsap.to(this, { | |
| duration: 0.5, | |
| opacity: 0, | |
| y: -20, | |
| onComplete: () => this.classList.add('hidden') | |
| }); | |
| gsap.from('#assistantSection', { | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| ease: 'back.out(1.2)', | |
| onStart: () => document.getElementById('assistantSection').classList.remove('hidden') | |
| }); | |
| gsap.to(window, { | |
| duration: 1.2, | |
| scrollTo: '#assistantSection', | |
| ease: 'power3.inOut' | |
| }); | |
| }); | |
| // Prompt generation based on category | |
| const promptButtons = document.querySelectorAll('.prompt-btn'); | |
| promptButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const type = this.getAttribute('data-type'); | |
| generatePrompt(type); | |
| }); | |
| }); | |
| // Generate prompt for custom question | |
| document.getElementById('generatePromptBtn').addEventListener('click', function() { | |
| const question = document.getElementById('customQuestion').value.trim(); | |
| if (question) { | |
| generatePrompt('custom', question); | |
| } else { | |
| alert('Please enter your question first!'); | |
| } | |
| }); | |
| // Copy prompt to clipboard | |
| document.getElementById('copyPromptBtn').addEventListener('click', function() { | |
| const promptText = document.getElementById('generatedPrompt').textContent; | |
| navigator.clipboard.writeText(promptText).then(() => { | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i data-feather="check" class="mr-2"></i> Copied!'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| }); | |
| // Generate prompt function | |
| function generatePrompt(type, customQuestion = '') { | |
| let prompt = ''; | |
| let settings = ''; | |
| let tools = ''; | |
| switch(type) { | |
| case 'content': | |
| prompt = `Act as a professional content creator. Generate a comprehensive [content type: blog post/social media post/email] about [topic]. Target audience is [describe audience]. Use [tone: professional/casual/enthusiastic] tone. Include [specific elements: bullet points/call-to-action/statistics]. Keep it [length] words.`; | |
| settings = 'Temperature: 0.7\nMax Tokens: 300\nFrequency Penalty: 0.5'; | |
| tools = 'ChatGPT\nClaude\nBard\nGrammarly (for editing)'; | |
| break; | |
| case 'coding': | |
| prompt = `You are an expert [programming language] developer with 10+ years experience. Explain [concept/problem] clearly with code examples. Include:\n1. Brief explanation\n2. Practical code snippet with comments\n3. Common pitfalls\n4. Best practices\n5. Performance considerations`; | |
| settings = 'Temperature: 0.3\nMax Tokens: 500\nTop P: 0.9'; | |
| tools = 'GitHub Copilot\nVS Code\nReplit\nStack Overflow'; | |
| break; | |
| case 'learning': | |
| prompt = `Summarize [topic/subject] comprehensively but concisely. Include:\n- Key concepts\n- Historical context\n- Current applications\n- Future developments\n- Recommended resources\nFormat in clear sections with bullet points. Target audience: [beginner/intermediate/advanced].`; | |
| settings = 'Temperature: 0.5\nMax Tokens: 400\nPresence Penalty: 0.2'; | |
| tools = 'Anki (for flashcards)\nObsidian (for notes)\nWolfram Alpha (for facts)'; | |
| break; | |
| case 'creative': | |
| prompt = `You are a [genre: fantasy/sci-fi/romance] author. Create a [story/character/world] with these elements:\n1. [Main character details]\n2. [Setting description]\n3. [Central conflict]\n4. [Theme/tone]\nMake it vivid with sensory details and emotional depth. Include dialog where appropriate.`; | |
| settings = 'Temperature: 0.8\nMax Tokens: 600\nFrequency Penalty: 0.1'; | |
| tools = 'NovelAI\nScrivener\nHemingway Editor\nWorld Anvil'; | |
| break; | |
| case 'custom': | |
| prompt = `You are an expert assistant specialized in [identify domain from question]. Provide a detailed, structured response to: "${customQuestion}". Include:\n1. Clear explanation\n2. Step-by-step guidance\n3. Examples\n4. Common mistakes to avoid\n5. Additional resources\nUse professional yet approachable language suitable for [target audience].`; | |
| settings = 'Temperature: 0.6\nMax Tokens: 450\nTop P: 0.95'; | |
| tools = 'ChatGPT\nPerplexity AI\nElicit (for research)\nNotion (for organization)'; | |
| break; | |
| } | |
| const resultSection = document.getElementById('resultSection'); | |
| resultSection.classList.add('result-appear'); | |
| setTimeout(() => { | |
| document.getElementById('generatedPrompt').textContent = prompt; | |
| document.getElementById('recommendedSettings').innerHTML = settings.replace(/\n/g, '<br>'); | |
| document.getElementById('suggestedTools').innerHTML = tools.replace(/\n/g, '<br>'); | |
| resultSection.classList.remove('hidden'); | |
| gsap.from('.result-appear > *', { | |
| duration: 0.6, | |
| y: 20, | |
| opacity: 0, | |
| stagger: 0.1, | |
| ease: 'back.out(1.2)' | |
| }); | |
| gsap.to(window, { | |
| duration: 1, | |
| scrollTo: '#resultSection', | |
| ease: 'power2.inOut' | |
| }); | |
| }, 300); | |
| } | |
| // Save site functionality | |
| function saveSite() { | |
| const htmlContent = document.documentElement.outerHTML; | |
| const blob = new Blob([htmlContent], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'PromptGenius-Wizard.html'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| // Show feedback | |
| const originalBtn = event.target.closest('button'); | |
| const originalHTML = originalBtn.innerHTML; | |
| originalBtn.innerHTML = '<i data-feather="check" class="w-5 h-5 mr-2"></i> Saved!'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| originalBtn.innerHTML = originalHTML; | |
| feather.replace(); | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> | |