Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Website 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(135deg, #6e8efb, #a777e3); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.3); | |
| } | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 60px; | |
| height: 34px; | |
| } | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 26px; | |
| width: 26px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: #6e8efb; | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-3xl"> | |
| <div class="bg-white rounded-xl p-8 card-shadow"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2"> | |
| <i class="fas fa-mobile-alt text-purple-500 mr-2"></i> | |
| Website to APK Converter | |
| </h1> | |
| <p class="text-gray-600">Convert any website into an Android APK file in minutes</p> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- URL Input --> | |
| <div> | |
| <label for="websiteUrl" class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-globe text-purple-500 mr-2"></i> | |
| Website URL | |
| </label> | |
| <div class="mt-1 relative rounded-md shadow-sm"> | |
| <input type="url" id="websiteUrl" class="input-focus focus:ring-purple-500 focus:border-purple-500 block w-full pl-4 pr-12 py-3 border-gray-300 rounded-md border" placeholder="https://example.com" required> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm"> | |
| <i class="fas fa-link"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Details --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="appName" class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-tag text-purple-500 mr-2"></i> | |
| App Name | |
| </label> | |
| <input type="text" id="appName" class="input-focus focus:ring-purple-500 focus:border-purple-500 block w-full px-4 py-3 border-gray-300 rounded-md border" placeholder="My Awesome App"> | |
| </div> | |
| <div> | |
| <label for="packageName" class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-box text-purple-500 mr-2"></i> | |
| Package Name | |
| </label> | |
| <input type="text" id="packageName" class="input-focus focus:ring-purple-500 focus:border-purple-500 block w-full px-4 py-3 border-gray-300 rounded-md border" placeholder="com.example.myapp"> | |
| </div> | |
| </div> | |
| <!-- App Icon --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-image text-purple-500 mr-2"></i> | |
| 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 mr-4"> | |
| <img id="iconPreview" src="https://via.placeholder.com/100" class="h-full w-full object-cover"> | |
| </span> | |
| <label for="appIcon" class="cursor-pointer"> | |
| <span class="px-4 py-2 bg-purple-100 text-purple-700 rounded-md text-sm font-medium hover:bg-purple-200 transition"> | |
| <i class="fas fa-upload mr-2"></i>Upload Icon | |
| </span> | |
| <input type="file" id="appIcon" class="hidden" accept="image/*"> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Advanced Options --> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <button id="toggleAdvanced" class="flex items-center text-purple-600 hover:text-purple-800 transition"> | |
| <i class="fas fa-cog mr-2"></i> | |
| Advanced Options | |
| <i id="advancedArrow" class="fas fa-chevron-down ml-2 transition-transform"></i> | |
| </button> | |
| <div id="advancedOptions" class="hidden mt-4 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-lock text-purple-500 mr-2"></i> | |
| Require Login | |
| </label> | |
| <p class="text-xs text-gray-500">Add authentication to your app</p> | |
| </div> | |
| <label class="switch"> | |
| <input type="checkbox" id="requireLogin"> | |
| <span | |
| </html> |