Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Convert Website to APK | DroidCraft</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> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="smartphone" class="h-8 w-8 text-green-500"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">DroidCraft</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="buildapk.html" class="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Convert to APK</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl"> | |
| Convert Your Website to Android App | |
| </h1> | |
| <p class="mt-5 max-w-xl mx-auto text-xl text-gray-500"> | |
| Turn your existing website into a native Android application with our conversion service. | |
| </p> | |
| </div> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="p-6 sm:p-10"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Conversion Form --> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">APK Conversion Form</h2> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="website-url" class="block text-sm font-medium text-gray-700">Website URL</label> | |
| <input type="url" id="website-url" name="website-url" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="app-name" class="block text-sm font-medium text-gray-700">App Name</label> | |
| <input type="text" id="app-name" name="app-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="package-name" class="block text-sm font-medium text-gray-700">Package Name (com.example.app)</label> | |
| <input type="text" id="package-name" name="package-name" required pattern="^[a-z][a-z0-9_]*(\.[a-z0-9_]+)+[0-9a-z_]$" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">App Icon</label> | |
| <div class="mt-1 flex items-center"> | |
| <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"> | |
| <img id="icon-preview" src="http://static.photos/technology/200x200/10" class="h-full w-full"> | |
| </span> | |
| <label for="app-icon" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 cursor-pointer"> | |
| <span>Upload</span> | |
| <input id="app-icon" name="app-icon" type="file" class="sr-only" accept="image/*"> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="splash-screen" class="block text-sm font-medium text-gray-700">Splash Screen (optional)</label> | |
| <input type="file" id="splash-screen" name="splash-screen" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100"> | |
| </div> | |
| <div> | |
| <label for="features" class="block text-sm font-medium text-gray-700">Additional Features</label> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex items-center"> | |
| <input id="push-notifications" name="features" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="push-notifications" class="ml-2 block text-sm text-gray-700">Push Notifications</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="offline-support" name="features" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="offline-support" class="ml-2 block text-sm text-gray-700">Offline Support</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="hardware-access" name="features" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="hardware-access" class="ml-2 block text-sm text-gray-700">Hardware Access (Camera, GPS, etc.)</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Generate APK | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Information Panel --> | |
| <div class="md:w-1/2 bg-gray-50 p-6 rounded-lg"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Features Included</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">WebView-based native Android app</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Play Store compliant package</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Customizable launcher icon</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Splash screen integration</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Basic Android permissions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Premium Options</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Advanced caching for offline use</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Firebase push notifications</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Native device features access</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-gray-600">Play Store deployment support</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">How It Works</h3> | |
| <ol class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <span class="bg-green-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0 text-sm">1</span> | |
| <span>Submit your website details and requirements</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-green-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0 text-sm">2</span> | |
| <span>Our system generates an optimized APK package</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-green-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0 text-sm">3</span> | |
| <span>Download your APK or get professional deployment assistance</span> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 mt-12"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-base text-gray-400"> | |
| © 2023 DroidCraft Studio. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Preview uploaded icon | |
| document.getElementById('app-icon').addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| document.getElementById('icon-preview').src = event.target.result; | |
| }; | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |