Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Promptastic - AI Text Prompt Generator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .prompt-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .text-shadow { | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 text-shadow">Promptastic Wizardry</h1> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto">Generate creative AI text prompts with a magical touch ✨</p> | |
| </header> | |
| <main class="max-w-4xl mx-auto"> | |
| <div class="prompt-card rounded-2xl p-8 mb-8 shadow-xl border border-white border-opacity-20"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="flex-1"> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Prompt Type</label> | |
| <select id="promptType" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-3 focus:ring-2 focus:ring-purple-300 focus:border-transparent"> | |
| <option value="creative">Creative Writing</option> | |
| <option value="technical">Technical Documentation</option> | |
| <option value="marketing">Marketing Copy</option> | |
| <option value="story">Short Story</option> | |
| <option value="poem">Poetry</option> | |
| <option value="code">Code Explanation</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Tone</label> | |
| <select id="tone" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-3 focus:ring-2 focus:ring-purple-300 focus:border-transparent"> | |
| <option value="professional">Professional</option> | |
| <option value="friendly">Friendly</option> | |
| <option value="humorous">Humorous</option> | |
| <option value="dramatic">Dramatic</option> | |
| <option value="academic">Academic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Keywords (comma separated)</label> | |
| <input id="keywords" type="text" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-3 focus:ring-2 focus:ring-purple-300 focus:border-transparent" placeholder="e.g. space, adventure, robot"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Length</label> | |
| <div class="flex items-center gap-4"> | |
| <input id="length" type="range" min="50" max="500" value="200" class="w-full accent-purple-300"> | |
| <span id="lengthValue" class="text-lg font-medium">200 words</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="w-full bg-white text-purple-700 hover:bg-purple-100 font-bold py-4 px-6 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2"> | |
| <i data-feather="zap"></i> Generate Prompt | |
| </button> | |
| </div> | |
| <div id="resultContainer" class="hidden"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-2xl font-bold">Your Prompt</h2> | |
| <button id="copyBtn" class="flex items-center gap-2 bg-white bg-opacity-10 hover:bg-opacity-20 px-4 py-2 rounded-lg transition-all"> | |
| <i data-feather="copy"></i> Copy | |
| </button> | |
| </div> | |
| <div id="promptResult" class="prompt-card rounded-2xl p-6 min-h-40 fade-in"></div> | |
| </div> | |
| <div id="savedPrompts" class="mt-12"> | |
| <h2 class="text-2xl font-bold mb-6">Your Saved Prompts</h2> | |
| <div id="savedPromptsContainer" class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Saved prompts will appear here --> | |
| <div class="text-center py-8 opacity-70"> | |
| <i data-feather="inbox" class="w-12 h-12 mx-auto mb-4"></i> | |
| <p>Your saved prompts will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| document.getElementById('length').addEventListener('input', function() { | |
| document.getElementById('lengthValue').textContent = this.value + ' words'; | |
| }); | |
| const promptExamples = { | |
| creative: [ | |
| "Write a story about {keywords} with a {tone} tone", | |
| "Create a {tone} scene where {keywords} play a central role", | |
| "Develop a {tone} narrative involving {keywords}" | |
| ], | |
| technical: [ | |
| "Explain {keywords} in a {tone} manner for a technical audience", | |
| "Describe the process of {keywords} using {tone} language", | |
| "Provide a {tone} overview of {keywords} for beginners" | |
| ], | |
| marketing: [ | |
| "Write {tone} marketing copy about {keywords} that converts", | |
| "Create a {tone} social media post promoting {keywords}", | |
| "Craft a {tone} email campaign about {keywords}" | |
| ], | |
| story: [ | |
| "Tell a {tone} short story featuring {keywords}", | |
| "Write a {tone} flash fiction piece about {keywords}", | |
| "Compose a {tone} narrative that includes {keywords}" | |
| ], | |
| poem: [ | |
| "Write a {tone} poem inspired by {keywords}", | |
| "Create a {tone} verse about {keywords}", | |
| "Compose a {tone} lyrical piece featuring {keywords}" | |
| ], | |
| code: [ | |
| "Explain {keywords} in code with a {tone} explanation", | |
| "Describe how to implement {keywords} in a {tone} way", | |
| "Provide a {tone} walkthrough of {keywords} for developers" | |
| ] | |
| }; | |
| document.getElementById('generateBtn').addEventListener('click', function() { | |
| const promptType = document.getElementById('promptType').value; | |
| const tone = document.getElementById('tone').value; | |
| const keywords = document.getElementById('keywords').value.split(',').map(k => k.trim()).filter(k => k); | |
| const length = document.getElementById('length').value; | |
| const examples = promptExamples[promptType]; | |
| const template = examples[Math.floor(Math.random() * examples.length)]; | |
| let prompt = template | |
| .replace('{tone}', tone) | |
| .replace('{keywords}', keywords.length ? keywords.join(', ') : '[your subject here]'); | |
| prompt += ` (approximately ${length} words)`; | |
| document.getElementById('promptResult').textContent = prompt; | |
| document.getElementById('resultContainer').classList.remove('hidden'); | |
| // Animation | |
| anime({ | |
| targets: '#promptResult', | |
| opacity: [0, 1], | |
| translateY: [20, 0], | |
| duration: 800, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| document.getElementById('copyBtn').addEventListener('click', function() { | |
| const prompt = document.getElementById('promptResult').textContent; | |
| navigator.clipboard.writeText(prompt).then(() => { | |
| const btn = document.getElementById('copyBtn'); | |
| btn.innerHTML = '<i data-feather="check"></i> Copied!'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| btn.innerHTML = '<i data-feather="copy"></i> Copy'; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |