| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GeneratePrompt.ai to APK Converter</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .gradient-bg { |
| background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c); |
| background-size: 400% 400%; |
| animation: gradient 15s ease infinite; |
| } |
| |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| .float-animation { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .step-card { |
| transition: all 0.3s ease; |
| } |
| |
| .step-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .progress-ring { |
| transform: rotate(-90deg); |
| } |
| |
| .progress-ring-circle { |
| transition: stroke-dashoffset 0.35s; |
| transform-origin: 50% 50%; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen gradient-bg"> |
| |
| <header class="bg-white/10 backdrop-blur-md border-b border-white/20"> |
| <div class="container mx-auto px-4 py-4"> |
| <nav class="flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-rocket text-white text-2xl"></i> |
| <h1 class="text-white text-xl font-bold">Prompt2APK</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-white hover:text-gray-300 transition"> |
| <i class="fas fa-question-circle"></i> |
| </button> |
| <button class="text-white hover:text-gray-300 transition"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </nav> |
| </div> |
| </header> |
|
|
| |
| <section class="container mx-auto px-4 py-12"> |
| <div class="text-center"> |
| <h2 class="text-4xl md:text-6xl font-bold text-white mb-4 float-animation"> |
| Turn Your Prompts into APK |
| </h2> |
| <p class="text-xl text-white/80 mb-8">Convert your GeneratePrompt.ai workflows into native Android apps</p> |
| |
| |
| <div class="flex justify-center mb-8"> |
| <svg class="progress-ring w-24 h-24"> |
| <circle class="progress-ring-circle stroke-white/20" stroke-width="4" fill="transparent" r="42" cx="52" cy="52"/> |
| <circle class="progress-ring-circle stroke-white" stroke-width="4" fill="transparent" r="42" cx="52" cy="52" stroke-dasharray="264" stroke-dashoffset="264"/> |
| </svg> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="container mx-auto px-4 py-12"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="step-card bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20"> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-link text-white text-2xl"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Connect API</h3> |
| <p class="text-white/70 text-sm">Link your GeneratePrompt.ai API key</p> |
| </div> |
| </div> |
|
|
| |
| <div class="step-card bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20"> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-cogs text-white text-2xl"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Configure</h3> |
| <p class="text-white/70 text-sm">Customize your app settings and features</p> |
| </div> |
| </div> |
|
|
| |
| <div class="step-card bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20"> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-hammer text-white text-2xl"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Build APK</h3> |
| <p class="text-white/70 text-sm">Generate your Android APK file</p> |
| </div> |
| </div> |
|
|
| |
| <div class="step-card bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20"> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-download text-white text-2xl"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Download</h3> |
| <p class="text-white/70 text-sm">Get your ready-to-install APK</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="container mx-auto px-4 py-12"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20"> |
| <h3 class="text-2xl font-bold text-white mb-6 text-center">Start Conversion</h3> |
| |
| |
| <div class="border-2 border-dashed border-white/30 rounded-xl p-8 text-center mb-6"> |
| <i class="fas fa-cloud-upload-alt text-white text-4xl mb-4"></i> |
| <p class="text-white mb-2">Drop your prompt file here</p> |
| <p class="text-white/60 text-sm mb-4">or</p> |
| <button class="bg-white/20 hover:bg-white/30 text-white px-6 py-2 rounded-lg transition"> |
| Browse Files |
| </button> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-white mb-2">GeneratePrompt.ai API Key</label> |
| <div class="relative"> |
| <input type="password" id="apiKey" placeholder="Enter your API key" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:border-white/40"> |
| <button type="button" onclick="toggleApiKeyVisibility()" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/60 hover:text-white"> |
| <i class="fas fa-eye" id="eyeIcon"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label class="block text-white mb-2">App Name</label> |
| <input type="text" placeholder="My Prompt App" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-white/50"> |
| </div> |
| <div> |
| <label class="block text-white mb-2">Package Name</label> |
| <input type="text" placeholder="com.mycompany.promptapp" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-white/50"> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h4 class="text-white font-semibold mb-4">App Features</h4> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <label class="flex items-center"> |
| <input type="checkbox" checked class="mr-3"> |
| <span class="text-white">Offline Mode</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" checked class="mr-3"> |
| <span class="text-white">Push Notifications</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-3"> |
| <span class="text-white">Dark Theme</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" checked class="mr-3"> |
| <span class="text-white">Analytics</span> |
| </label> |
| </div> |
| </div> |
|
|
| |
| <button onclick="startBuild()" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-4 px-6 rounded-xl transition transform hover:scale-105"> |
| <i class="fas fa-rocket mr-2"></i> |
| Build APK Now |
| </button> |
|
|
| |
| <div class="mt-6 hidden" id="progressSection"> |
| <div class="bg-white/10 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-white">Building APK...</span> |
| <span class="text-white" id="progressText">0%</span> |
| </div> |
| <div class="w-full bg-white/20 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-purple-400 to-pink-400 h-2 rounded-full" id="progressBar" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-white/10 backdrop-blur-md border-t border-white/20 mt-12"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="text-center"> |
| <p class="text-white/60">Built with ❤️ for the GeneratePrompt.ai community</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function toggleApiKeyVisibility() { |
| const apiKeyInput = document.getElementById('apiKey'); |
| const eyeIcon = document.getElementById('eyeIcon'); |
| |
| if (apiKeyInput.type === 'password') { |
| apiKeyInput.type = 'text'; |
| eyeIcon.className = 'fas fa-eye-slash'; |
| } else { |
| apiKeyInput.type = 'password'; |
| eyeIcon.className = 'fas fa-eye'; |
| } |
| } |
| |
| |
| function startBuild() { |
| const progressSection = document.getElementById('progressSection'); |
| const progressBar = document.getElementById('progressBar'); |
| const progressText = document.getElementById('progressText'); |
| const progressRingCircle = document.querySelector('.progress-ring-circle'); |
| |
| progressSection.classList.remove('hidden'); |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 15; |
| if (progress > 100) progress = 100; |
| |
| progressBar.style.width = progress + '%'; |
| progressText.textContent = Math.round(progress) + '%'; |
| |
| |
| const offset = 264 - (progress / 100) * 264; |
| progressRingCircle.style.strokeDashoffset = offset; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| setTimeout(() => { |
| alert('APK built successfully! Download ready.'); |
| progressSection.classList.add('hidden'); |
| }, 500); |
| } |
| }, 200); |
| } |
| |
| |
| const dropZone = document.querySelector('.border-dashed'); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropZone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropZone.style.borderColor = '#ffffff'; |
| dropZone.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; |
| } |
| |
| function unhighlight() { |
| dropZone.style.borderColor = 'rgba(255, 255, 255, 0.3)'; |
| dropZone.style.backgroundColor = 'transparent'; |
| } |
| |
| dropZone.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const files = e.dataTransfer.files; |
| console.log('Files dropped:', files); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Malasanas/to-apk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
