Hugging Face's logo

Spaces:
kali33
/
droidcraft-studio
Running

App Files Community
kali33 commited on
Commit
b314f62
·
verified ·
1 Parent(s): 5caee9d

Convert to apk

Browse files
Files changed (2) hide show
  1. buildapk.html +212 -0
  2. index.html +2 -1
buildapk.html ADDED
@@ -0,0 +1,212 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Convert Website to APK | DroidCraft</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-50 font-sans">
12
+ <!-- Navigation -->
13
+ <nav class="bg-white shadow-sm">
14
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15
+ <div class="flex justify-between h-16">
16
+ <div class="flex">
17
+ <div class="flex-shrink-0 flex items-center">
18
+ <i data-feather="smartphone" class="h-8 w-8 text-green-500"></i>
19
+ <span class="ml-2 text-xl font-bold text-gray-900">DroidCraft</span>
20
+ </div>
21
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
22
+ <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>
23
+ <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>
24
+ <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>
25
+ </div>
26
+ </div>
27
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
28
+ <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>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </nav>
33
+
34
+ <!-- Main Content -->
35
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
36
+ <div class="text-center mb-12">
37
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
38
+ Convert Your Website to Android App
39
+ </h1>
40
+ <p class="mt-5 max-w-xl mx-auto text-xl text-gray-500">
41
+ Turn your existing website into a native Android application with our conversion service.
42
+ </p>
43
+ </div>
44
+
45
+ <div class="bg-white shadow rounded-lg overflow-hidden">
46
+ <div class="p-6 sm:p-10">
47
+ <div class="flex flex-col md:flex-row gap-8">
48
+ <!-- Conversion Form -->
49
+ <div class="md:w-1/2">
50
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">APK Conversion Form</h2>
51
+ <form class="space-y-6">
52
+ <div>
53
+ <label for="website-url" class="block text-sm font-medium text-gray-700">Website URL</label>
54
+ <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">
55
+ </div>
56
+
57
+ <div>
58
+ <label for="app-name" class="block text-sm font-medium text-gray-700">App Name</label>
59
+ <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">
60
+ </div>
61
+
62
+ <div>
63
+ <label for="package-name" class="block text-sm font-medium text-gray-700">Package Name (com.example.app)</label>
64
+ <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">
65
+ </div>
66
+
67
+ <div>
68
+ <label class="block text-sm font-medium text-gray-700">App Icon</label>
69
+ <div class="mt-1 flex items-center">
70
+ <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
71
+ <img id="icon-preview" src="http://static.photos/technology/200x200/10" class="h-full w-full">
72
+ </span>
73
+ <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">
74
+ <span>Upload</span>
75
+ <input id="app-icon" name="app-icon" type="file" class="sr-only" accept="image/*">
76
+ </label>
77
+ </div>
78
+ </div>
79
+
80
+ <div>
81
+ <label for="splash-screen" class="block text-sm font-medium text-gray-700">Splash Screen (optional)</label>
82
+ <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">
83
+ </div>
84
+
85
+ <div>
86
+ <label for="features" class="block text-sm font-medium text-gray-700">Additional Features</label>
87
+ <div class="mt-2 space-y-2">
88
+ <div class="flex items-center">
89
+ <input id="push-notifications" name="features" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
90
+ <label for="push-notifications" class="ml-2 block text-sm text-gray-700">Push Notifications</label>
91
+ </div>
92
+ <div class="flex items-center">
93
+ <input id="offline-support" name="features" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
94
+ <label for="offline-support" class="ml-2 block text-sm text-gray-700">Offline Support</label>
95
+ </div>
96
+ <div class="flex items-center">
97
+ <input id="hardware-access" name="features" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
98
+ <label for="hardware-access" class="ml-2 block text-sm text-gray-700">Hardware Access (Camera, GPS, etc.)</label>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="pt-4">
104
+ <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">
105
+ Generate APK
106
+ <i data-feather="arrow-right" class="ml-2"></i>
107
+ </button>
108
+ </div>
109
+ </form>
110
+ </div>
111
+
112
+ <!-- Information Panel -->
113
+ <div class="md:w-1/2 bg-gray-50 p-6 rounded-lg">
114
+ <div class="mb-6">
115
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Features Included</h3>
116
+ <ul class="space-y-2">
117
+ <li class="flex items-start">
118
+ <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
119
+ <span class="text-gray-600">WebView-based native Android app</span>
120
+ </li>
121
+ <li class="flex items-start">
122
+ <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
123
+ <span class="text-gray-600">Play Store compliant package</span>
124
+ </li>
125
+ <li class="flex items-start">
126
+ <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
127
+ <span class="text-gray-600">Customizable launcher icon</span>
128
+ </li>
129
+ <li class="flex items-start">
130
+ <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
131
+ <span class="text-gray-600">Splash screen integration</span>
132
+ </li>
133
+ <li class="flex items-start">
134
+ <i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
135
+ <span class="text-gray-600">Basic Android permissions</span>
136
+ </li>
137
+ </ul>
138
+ </div>
139
+
140
+ <div class="mb-6">
141
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Premium Options</h3>
142
+ <ul class="space-y-2">
143
+ <li class="flex items-start">
144
+ <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
145
+ <span class="text-gray-600">Advanced caching for offline use</span>
146
+ </li>
147
+ <li class="flex items-start">
148
+ <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
149
+ <span class="text-gray-600">Firebase push notifications</span>
150
+ </li>
151
+ <li class="flex items-start">
152
+ <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
153
+ <span class="text-gray-600">Native device features access</span>
154
+ </li>
155
+ <li class="flex items-start">
156
+ <i data-feather="plus" class="h-5 w-5 text-green-500 mt-0.5 mr-2"></i>
157
+ <span class="text-gray-600">Play Store deployment support</span>
158
+ </li>
159
+ </ul>
160
+ </div>
161
+
162
+ <div>
163
+ <h3 class="text-lg font-medium text-gray-900 mb-2">How It Works</h3>
164
+ <ol class="space-y-3 text-gray-600">
165
+ <li class="flex items-start">
166
+ <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>
167
+ <span>Submit your website details and requirements</span>
168
+ </li>
169
+ <li class="flex items-start">
170
+ <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>
171
+ <span>Our system generates an optimized APK package</span>
172
+ </li>
173
+ <li class="flex items-start">
174
+ <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>
175
+ <span>Download your APK or get professional deployment assistance</span>
176
+ </li>
177
+ </ol>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Footer -->
186
+ <footer class="bg-gray-800 mt-12">
187
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
188
+ <p class="text-center text-base text-gray-400">
189
+ &copy; 2023 DroidCraft Studio. All rights reserved.
190
+ </p>
191
+ </div>
192
+ </footer>
193
+
194
+ <script>
195
+ document.addEventListener('DOMContentLoaded', function() {
196
+ // Preview uploaded icon
197
+ document.getElementById('app-icon').addEventListener('change', function(e) {
198
+ if (e.target.files.length > 0) {
199
+ const reader = new FileReader();
200
+ reader.onload = function(event) {
201
+ document.getElementById('icon-preview').src = event.target.result;
202
+ };
203
+ reader.readAsDataURL(e.target.files[0]);
204
+ }
205
+ });
206
+
207
+ // Initialize feather icons
208
+ feather.replace();
209
+ });
210
+ </script>
211
+ </body>
212
+ </html>
index.html CHANGED
@@ -40,8 +40,9 @@
40
  </div>
41
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
42
  <a href="#" class="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
 
43
  <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>
44
- <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">Portfolio</a>
45
  <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">About</a>
46
  <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">Contact</a>
47
  </div>
 
40
  </div>
41
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
42
  <a href="#" class="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
43
+ <a href="buildapk.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">Convert to APK</a>
44
  <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>
45
+ <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">Portfolio</a>
46
  <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">About</a>
47
  <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">Contact</a>
48
  </div>