Hugging Face's logo

Spaces:
Juno360219
/
website-to-apk
Running

App Files Community
Juno360219 commited on
Commit
ec5364f
·
verified ·
1 Parent(s): e5a7752

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +145 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website To Apk
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: website-to-apk
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,145 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Website to APK Converter</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .card-shadow {
14
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
15
+ }
16
+ .input-focus:focus {
17
+ box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.3);
18
+ }
19
+ .switch {
20
+ position: relative;
21
+ display: inline-block;
22
+ width: 60px;
23
+ height: 34px;
24
+ }
25
+ .switch input {
26
+ opacity: 0;
27
+ width: 0;
28
+ height: 0;
29
+ }
30
+ .slider {
31
+ position: absolute;
32
+ cursor: pointer;
33
+ top: 0;
34
+ left: 0;
35
+ right: 0;
36
+ bottom: 0;
37
+ background-color: #ccc;
38
+ transition: .4s;
39
+ border-radius: 34px;
40
+ }
41
+ .slider:before {
42
+ position: absolute;
43
+ content: "";
44
+ height: 26px;
45
+ width: 26px;
46
+ left: 4px;
47
+ bottom: 4px;
48
+ background-color: white;
49
+ transition: .4s;
50
+ border-radius: 50%;
51
+ }
52
+ input:checked + .slider {
53
+ background-color: #6e8efb;
54
+ }
55
+ input:checked + .slider:before {
56
+ transform: translateX(26px);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="gradient-bg min-h-screen flex items-center justify-center p-4">
61
+ <div class="w-full max-w-3xl">
62
+ <div class="bg-white rounded-xl p-8 card-shadow">
63
+ <div class="text-center mb-8">
64
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">
65
+ <i class="fas fa-mobile-alt text-purple-500 mr-2"></i>
66
+ Website to APK Converter
67
+ </h1>
68
+ <p class="text-gray-600">Convert any website into an Android APK file in minutes</p>
69
+ </div>
70
+
71
+ <div class="space-y-6">
72
+ <!-- URL Input -->
73
+ <div>
74
+ <label for="websiteUrl" class="block text-sm font-medium text-gray-700 mb-1">
75
+ <i class="fas fa-globe text-purple-500 mr-2"></i>
76
+ Website URL
77
+ </label>
78
+ <div class="mt-1 relative rounded-md shadow-sm">
79
+ <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>
80
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
81
+ <span class="text-gray-500 sm:text-sm">
82
+ <i class="fas fa-link"></i>
83
+ </span>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- App Details -->
89
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
90
+ <div>
91
+ <label for="appName" class="block text-sm font-medium text-gray-700 mb-1">
92
+ <i class="fas fa-tag text-purple-500 mr-2"></i>
93
+ App Name
94
+ </label>
95
+ <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">
96
+ </div>
97
+ <div>
98
+ <label for="packageName" class="block text-sm font-medium text-gray-700 mb-1">
99
+ <i class="fas fa-box text-purple-500 mr-2"></i>
100
+ Package Name
101
+ </label>
102
+ <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">
103
+ </div>
104
+ </div>
105
+
106
+ <!-- App Icon -->
107
+ <div>
108
+ <label class="block text-sm font-medium text-gray-700 mb-1">
109
+ <i class="fas fa-image text-purple-500 mr-2"></i>
110
+ App Icon
111
+ </label>
112
+ <div class="mt-1 flex items-center">
113
+ <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100 mr-4">
114
+ <img id="iconPreview" src="https://via.placeholder.com/100" class="h-full w-full object-cover">
115
+ </span>
116
+ <label for="appIcon" class="cursor-pointer">
117
+ <span class="px-4 py-2 bg-purple-100 text-purple-700 rounded-md text-sm font-medium hover:bg-purple-200 transition">
118
+ <i class="fas fa-upload mr-2"></i>Upload Icon
119
+ </span>
120
+ <input type="file" id="appIcon" class="hidden" accept="image/*">
121
+ </label>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Advanced Options -->
126
+ <div class="border-t border-gray-200 pt-4">
127
+ <button id="toggleAdvanced" class="flex items-center text-purple-600 hover:text-purple-800 transition">
128
+ <i class="fas fa-cog mr-2"></i>
129
+ Advanced Options
130
+ <i id="advancedArrow" class="fas fa-chevron-down ml-2 transition-transform"></i>
131
+ </button>
132
+
133
+ <div id="advancedOptions" class="hidden mt-4 space-y-4">
134
+ <div class="flex items-center justify-between">
135
+ <div>
136
+ <label class="block text-sm font-medium text-gray-700 mb-1">
137
+ <i class="fas fa-lock text-purple-500 mr-2"></i>
138
+ Require Login
139
+ </label>
140
+ <p class="text-xs text-gray-500">Add authentication to your app</p>
141
+ </div>
142
+ <label class="switch">
143
+ <input type="checkbox" id="requireLogin">
144
+ <span
145
+ </html>