Hugging Face's logo

Spaces:
ZenTec
/
deliverypal
Running

App Files Community
ZenTec commited on
Commit
820fd96
·
verified ·
1 Parent(s): 458db72

Please no functions working at all and you didn't do a pro site it looks so bad poorly organised I don't want any mockup data since this is going to go live after making it so fix - Initial Deployment

Browse files
Files changed (8) hide show
  1. README.md +7 -5
  2. admin.html +297 -0
  3. business-register.html +198 -0
  4. index.html +295 -18
  5. login.html +119 -0
  6. prompts.txt +2 -0
  7. register.html +150 -0
  8. rider-register.html +198 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deliverypal
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: blue
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: deliverypal
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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
admin.html ADDED
@@ -0,0 +1,297 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Admin Dashboard - DeliveryPal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF6B35',
15
+ secondary: '#6E0D88',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
22
+ <script src="https://unpkg.com/feather-icons"></script>
23
+ <style>
24
+ .sidebar {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .sidebar-item:hover {
28
+ background-color: rgba(255, 107, 53, 0.1);
29
+ }
30
+ .sidebar-item.active {
31
+ background-color: rgba(255, 107, 53, 0.2);
32
+ border-left: 3px solid #FF6B35;
33
+ }
34
+ .badge {
35
+ font-size: 0.75rem;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="font-sans bg-gray-100">
40
+ <div class="flex h-screen overflow-hidden">
41
+ <!-- Sidebar -->
42
+ <div class="sidebar bg-white w-64 flex-shrink-0 shadow-md">
43
+ <div class="p-4 border-b border-gray-200">
44
+ <div class="flex items-center">
45
+ <i data-feather="truck" class="text-primary h-8 w-8"></i>
46
+ <span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
47
+ <span class="ml-2 px-2 py-1 bg-secondary text-white text-xs rounded-full">Admin</span>
48
+ </div>
49
+ </div>
50
+ <div class="p-4">
51
+ <div class="mb-8">
52
+ <div class="flex items-center mb-4">
53
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center">
54
+ <i data-feather="user" class="text-primary"></i>
55
+ </div>
56
+ <div class="ml-3">
57
+ <p class="text-sm font-medium text-gray-900">Admin User</p>
58
+ <p class="text-xs text-gray-500">Super Admin</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <nav class="space-y-1">
63
+ <a href="#" class="sidebar-item active flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-900">
64
+ <i data-feather="home" class="mr-3 h-5 w-5"></i>
65
+ Dashboard
66
+ </a>
67
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900">
68
+ <i data-feather="users" class="mr-3 h-5 w-5"></i>
69
+ Users
70
+ </a>
71
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900">
72
+ <i data-feather="truck" class="mr-3 h-5 w-5"></i>
73
+ Riders
74
+ <span class="ml-auto bg-secondary text-white text-xs px-2 py-1 rounded-full">24</span>
75
+ </a>
76
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900">
77
+ <i data-feather="briefcase" class="mr-3 h-5 w-5"></i>
78
+ Businesses
79
+ <span class="ml-auto bg-secondary text-white text-xs px-2 py-1 rounded-full">15</span>
80
+ </a>
81
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900">
82
+ <i data-feather="package" class="mr-3 h-5 w-5"></i>
83
+ Deliveries
84
+ </a>
85
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900">
86
+ <i data-feather="file-text" class="mr-3 h-5 w-5"></i>
87
+ KYC Approvals
88
+ <span class="ml-auto bg-secondary text-white text-xs px-2 py-1 rounded-full">8</span>
89
+ </a>
90
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900">
91
+ <i data-feather="settings" class="mr-3 h-5 w-5"></i>
92
+ Settings
93
+ </a>
94
+ </nav>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Main Content -->
99
+ <div class="flex-1 overflow-auto">
100
+ <!-- Top Navigation -->
101
+ <header class="bg-white shadow-sm">
102
+ <div class="px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
103
+ <h1 class="text-2xl font-semibold text-gray-900">KYC Approvals</h1>
104
+ <div class="flex items-center space-x-4">
105
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
106
+ <i data-feather="bell"></i>
107
+ </button>
108
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
109
+ <i data-feather="help-circle"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </header>
114
+
115
+ <!-- Main Content Area -->
116
+ <main class="p-6">
117
+ <div class="bg-white shadow rounded-lg overflow-hidden">
118
+ <div class="px-6 py-4 border-b border-gray-200">
119
+ <div class="flex items-center justify-between">
120
+ <h2 class="text-lg font-medium text-gray-900">Pending KYC Verifications</h2>
121
+ <div class="flex space-x-3">
122
+ <div class="relative">
123
+ <input type="text" placeholder="Search applications..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
124
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
125
+ </div>
126
+ <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
127
+ <option>Filter by</option>
128
+ <option>Riders</option>
129
+ <option>Businesses</option>
130
+ <option>Newest</option>
131
+ <option>Oldest</option>
132
+ </select>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <div class="divide-y divide-gray-200">
137
+ <!-- KYC Application 1 -->
138
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
139
+ <div class="flex items-center space-x-4">
140
+ <div class="flex-shrink-0">
141
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Applicant photo">
142
+ </div>
143
+ <div>
144
+ <h3 class="text-sm font-medium text-gray-900">John Smith</h3>
145
+ <p class="text-sm text-gray-500">Rider Application</p>
146
+ <div class="flex space-x-2 mt-1">
147
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
148
+ <i data-feather="check-circle" class="mr-1 h-3 w-3"></i> ID Verified
149
+ </span>
150
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
151
+ <i data-feather="clock" class="mr-1 h-3 w-3"></i> Pending Review
152
+ </span>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <div class="flex space-x-3">
157
+ <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
158
+ <i data-feather="eye" class="mr-1 h-4 w-4"></i> View
159
+ </button>
160
+ <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-primary">
161
+ <i data-feather="check" class="mr-1 h-4 w-4"></i> Approve
162
+ </button>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- KYC Application 2 -->
167
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
168
+ <div class="flex items-center space-x-4">
169
+ <div class="flex-shrink-0">
170
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Applicant photo">
171
+ </div>
172
+ <div>
173
+ <h3 class="text-sm font-medium text-gray-900">Sarah Johnson</h3>
174
+ <p class="text-sm text-gray-500">Business Application</p>
175
+ <div class="flex space-x-2 mt-1">
176
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
177
+ <i data-feather="check-circle" class="mr-1 h-3 w-3"></i> ID Verified
178
+ </span>
179
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
180
+ <i data-feather="check-circle" class="mr-1 h-3 w-3"></i> Address Verified
181
+ </span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="flex space-x-3">
186
+ <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
187
+ <i data-feather="eye" class="mr-1 h-4 w-4"></i> View
188
+ </button>
189
+ <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-primary">
190
+ <i data-feather="check" class="mr-1 h-4 w-4"></i> Approve
191
+ </button>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- KYC Application 3 -->
196
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
197
+ <div class="flex items-center space-x-4">
198
+ <div class="flex-shrink-0">
199
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Applicant photo">
200
+ </div>
201
+ <div>
202
+ <h3 class="text-sm font-medium text-gray-900">Michael Brown</h3>
203
+ <p class="text-sm text-gray-500">Rider Application</p>
204
+ <div class="flex space-x-2 mt-1">
205
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
206
+ <i data-feather="alert-circle" class="mr-1 h-3 w-3"></i> ID Unclear
207
+ </span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ <div class="flex space-x-3">
212
+ <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
213
+ <i data-feather="eye" class="mr-1 h-4 w-4"></i> View
214
+ </button>
215
+ <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
216
+ <i data-feather="x" class="mr-1 h-4 w-4"></i> Reject
217
+ </button>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- KYC Application 4 -->
222
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
223
+ <div class="flex items-center space-x-4">
224
+ <div class="flex-shrink-0">
225
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/4" alt="Applicant photo">
226
+ </div>
227
+ <div>
228
+ <h3 class="text-sm font-medium text-gray-900">Quick Bites Restaurant</h3>
229
+ <p class="text-sm text-gray-500">Business Application</p>
230
+ <div class="flex space-x-2 mt-1">
231
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
232
+ <i data-feather="check-circle" class="mr-1 h-3 w-3"></i> Business Verified
233
+ </span>
234
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
235
+ <i data-feather="clock" class="mr-1 h-3 w-3"></i> Pending Review
236
+ </span>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ <div class="flex space-x-3">
241
+ <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
242
+ <i data-feather="eye" class="mr-1 h-4 w-4"></i> View
243
+ </button>
244
+ <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-primary">
245
+ <i data-feather="check" class="mr-1 h-4 w-4"></i> Approve
246
+ </button>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
251
+ <div class="flex-1 flex justify-between sm:hidden">
252
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
253
+ Previous
254
+ </a>
255
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
256
+ Next
257
+ </a>
258
+ </div>
259
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
260
+ <div>
261
+ <p class="text-sm text-gray-700">
262
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">8</span> results
263
+ </p>
264
+ </div>
265
+ <div>
266
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
267
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
268
+ <span class="sr-only">Previous</span>
269
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
270
+ </a>
271
+ <a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
272
+ 1
273
+ </a>
274
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
275
+ 2
276
+ </a>
277
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
278
+ 3
279
+ </a>
280
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
281
+ <span class="sr-only">Next</span>
282
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
283
+ </a>
284
+ </nav>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </main>
290
+ </div>
291
+ </div>
292
+
293
+ <script>
294
+ feather.replace();
295
+ </script>
296
+ </body>
297
+ </html>
business-register.html ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Business Registration - DeliveryPal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF6B35',
15
+ secondary: '#6E0D88',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
22
+ <script src="https://unpkg.com/feather-icons"></script>
23
+ <style>
24
+ .kyc-card {
25
+ border-left: 4px solid #6E0D88;
26
+ }
27
+ .file-upload {
28
+ border: 2px dashed #d1d5db;
29
+ transition: all 0.3s ease;
30
+ }
31
+ .file-upload:hover {
32
+ border-color: #FF6B35;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="font-sans bg-gray-50">
37
+ <!-- Navigation -->
38
+ <nav class="bg-white shadow-sm">
39
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
40
+ <div class="flex justify-between h-16">
41
+ <div class="flex items-center">
42
+ <div class="flex-shrink-0 flex items-center">
43
+ <i data-feather="truck" class="text-primary h-8 w-8"></i>
44
+ <span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
45
+ </div>
46
+ </div>
47
+ <div class="flex items-center">
48
+ <a href="index.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Back to Home</a>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Main Content -->
55
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
56
+ <div class="bg-white shadow-md rounded-lg overflow-hidden">
57
+ <div class="p-8">
58
+ <div class="text-center mb-8">
59
+ <h2 class="text-3xl font-bold text-gray-900">Business Registration</h2>
60
+ <p class="text-gray-600 mt-2">Register your business to start using our delivery services</p>
61
+ </div>
62
+
63
+ <div class="mb-8 bg-gray-50 p-6 rounded-lg kyc-card">
64
+ <h3 class="text-xl font-semibold mb-4 text-secondary">Business Verification Required</h3>
65
+ <p class="text-gray-600 mb-4">To ensure trust and reliability, all businesses must complete our verification process. Please have the following documents ready:</p>
66
+ <ul class="list-disc pl-5 space-y-2 text-gray-600">
67
+ <li>Business license or registration certificate</li>
68
+ <li>Proof of business address (Utility bill, Lease agreement, etc.)</li>
69
+ <li>Owner's government-issued ID</li>
70
+ <li>Recent business logo or storefront photo</li>
71
+ </ul>
72
+ </div>
73
+
74
+ <!-- Business Registration Form -->
75
+ <form class="space-y-6">
76
+ <div class="grid md:grid-cols-2 gap-6">
77
+ <div>
78
+ <label for="business-name" class="block text-sm font-medium text-gray-700 mb-1">Business Name</label>
79
+ <input type="text" id="business-name" name="business-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
80
+ </div>
81
+ <div>
82
+ <label for="owner-name" class="block text-sm font-medium text-gray-700 mb-1">Owner Full Name</label>
83
+ <input type="text" id="owner-name" name="owner-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
84
+ </div>
85
+ </div>
86
+
87
+ <div class="grid md:grid-cols-2 gap-6">
88
+ <div>
89
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Business Email</label>
90
+ <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
91
+ </div>
92
+ <div>
93
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Business Phone</label>
94
+ <input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
95
+ </div>
96
+ </div>
97
+
98
+ <div>
99
+ <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Business Address</label>
100
+ <input type="text" id="address" name="address" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
101
+ </div>
102
+
103
+ <div class="grid md:grid-cols-2 gap-6">
104
+ <div>
105
+ <label for="business-type" class="block text-sm font-medium text-gray-700 mb-1">Business Type</label>
106
+ <select id="business-type" name="business-type" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
107
+ <option value="">Select business type</option>
108
+ <option value="restaurant">Restaurant/Food Service</option>
109
+ <option value="retail">Retail Store</option>
110
+ <option value="pharmacy">Pharmacy</option>
111
+ <option value="grocery">Grocery Store</option>
112
+ <option value="other">Other</option>
113
+ </select>
114
+ </div>
115
+ <div>
116
+ <label for="website" class="block text-sm font-medium text-gray-700 mb-1">Website (Optional)</label>
117
+ <input type="url" id="website" name="website" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Document Upload Section -->
122
+ <div class="space-y-6">
123
+ <h3 class="text-lg font-medium text-gray-900">Required Documents</h3>
124
+
125
+ <div class="grid md:grid-cols-2 gap-6">
126
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
127
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
128
+ <p class="mt-2 text-sm text-gray-600">Upload Business License</p>
129
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG/PDF)</p>
130
+ <input type="file" id="license-upload" name="license-upload" class="hidden" accept="image/*,.pdf">
131
+ </div>
132
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
133
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
134
+ <p class="mt-2 text-sm text-gray-600">Proof of Business Address</p>
135
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG/PDF)</p>
136
+ <input type="file" id="address-upload" name="address-upload" class="hidden" accept="image/*,.pdf">
137
+ </div>
138
+ </div>
139
+
140
+ <div class="grid md:grid-cols-2 gap-6">
141
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
142
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
143
+ <p class="mt-2 text-sm text-gray-600">Owner's ID</p>
144
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG/PDF)</p>
145
+ <input type="file" id="id-upload" name="id-upload" class="hidden" accept="image/*,.pdf">
146
+ </div>
147
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
148
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
149
+ <p class="mt-2 text-sm text-gray-600">Business Logo/Photo</p>
150
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG)</p>
151
+ <input type="file" id="logo-upload" name="logo-upload" class="hidden" accept="image/*">
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="flex items-center">
157
+ <input type="checkbox" id="terms" name="terms" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
158
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
159
+ I certify that all information provided is accurate and I agree to the <a href="#" class="text-primary hover:underline">Terms of Service</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>
160
+ </label>
161
+ </div>
162
+
163
+ <div class="pt-4">
164
+ <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 font-medium">
165
+ Submit Registration
166
+ </button>
167
+ </div>
168
+ </form>
169
+
170
+ <div class="mt-6 text-center text-sm text-gray-500">
171
+ <p>Your registration will be reviewed within 2-3 business days. We'll contact you via email once approved.</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <script>
178
+ feather.replace();
179
+
180
+ // Handle file upload clicks
181
+ document.querySelectorAll('.file-upload').forEach(uploadDiv => {
182
+ const fileInput = uploadDiv.querySelector('input[type="file"]');
183
+ uploadDiv.addEventListener('click', () => fileInput.click());
184
+
185
+ fileInput.addEventListener('change', (e) => {
186
+ if (e.target.files.length > 0) {
187
+ uploadDiv.innerHTML = `
188
+ <i data-feather="check-circle" class="mx-auto h-8 w-8 text-green-500"></i>
189
+ <p class="mt-2 text-sm text-gray-600">${e.target.files[0].name}</p>
190
+ <p class="text-xs text-gray-500">${(e.target.files[0].size / 1024 / 1024).toFixed(2)} MB</p>
191
+ `;
192
+ feather.replace();
193
+ }
194
+ });
195
+ });
196
+ </script>
197
+ </body>
198
+ </html>
index.html CHANGED
@@ -1,19 +1,296 @@
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>DeliveryPal - Fast & Reliable Delivery Services</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF6B35',
15
+ secondary: '#6E0D88',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
22
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
23
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
24
+ <script src="https://unpkg.com/feather-icons"></script>
25
+ <script src="https://accounts.google.com/gsi/client" async defer></script>
26
+ <style>
27
+ .hero-bg {
28
+ background-image: linear-gradient(rgba(255, 107, 53, 0.9), rgba(255, 107, 53, 0.8)), url('http://static.photos/technology/1200x630/10');
29
+ }
30
+ .kyc-card {
31
+ border-left: 4px solid #6E0D88;
32
+ }
33
+ .google-btn {
34
+ transition: all 0.3s ease;
35
+ }
36
+ .google-btn:hover {
37
+ transform: translateY(-2px);
38
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="font-sans">
43
+ <!-- Navigation -->
44
+ <nav class="bg-white shadow-md">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i data-feather="truck" class="text-primary h-8 w-8"></i>
50
+ <span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
51
+ </div>
52
+ </div>
53
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
54
+ <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Home</a>
55
+ <a href="#services" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Services</a>
56
+ <a href="#how-it-works" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">How It Works</a>
57
+ <a href="#rider" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Become a Rider</a>
58
+ <a href="#business" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">For Businesses</a>
59
+ </div>
60
+ <div class="flex items-center">
61
+ <a href="login.html" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Login</a>
62
+ <a href="register.html" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 transition">Sign Up</a>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <div class="hero-bg bg-cover bg-center text-white">
70
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
71
+ <div class="md:w-1/2" data-aos="fade-right">
72
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Fast & Reliable Delivery Services</h1>
73
+ <p class="text-xl mb-8">Get anything delivered anywhere in the city within hours. Our riders are ready to serve you!</p>
74
+ <div class="flex flex-col sm:flex-row gap-4">
75
+ <a href="register.html" class="bg-white text-primary px-6 py-3 rounded-md text-lg font-semibold text-center hover:bg-opacity-90 transition">Get Started</a>
76
+ <a href="#how-it-works" class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold text-center hover:bg-white hover:text-primary transition">Learn More</a>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Services Section -->
83
+ <section id="services" class="py-16 bg-gray-50">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="text-center mb-12" data-aos="fade-up">
86
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Services</h2>
87
+ <p class="text-gray-600 max-w-2xl mx-auto">We offer a variety of delivery solutions to meet your needs</p>
88
+ </div>
89
+ <div class="grid md:grid-cols-3 gap-8">
90
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="100">
91
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
92
+ <i data-feather="package" class="text-primary"></i>
93
+ </div>
94
+ <h3 class="text-xl font-semibold mb-2">Parcel Delivery</h3>
95
+ <p class="text-gray-600">Send packages of any size across town with our reliable delivery network.</p>
96
+ </div>
97
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="200">
98
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
99
+ <i data-feather="shopping-bag" class="text-primary"></i>
100
+ </div>
101
+ <h3 class="text-xl font-semibold mb-2">Food Delivery</h3>
102
+ <p class="text-gray-600">Get your favorite meals delivered hot and fresh from local restaurants.</p>
103
+ </div>
104
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="300">
105
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
106
+ <i data-feather="clock" class="text-primary"></i>
107
+ </div>
108
+ <h3 class="text-xl font-semibold mb-2">Express Delivery</h3>
109
+ <p class="text-gray-600">Need it fast? Our express service delivers within 60 minutes or less.</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- How It Works Section -->
116
+ <section id="how-it-works" class="py-16">
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
118
+ <div class="text-center mb-12" data-aos="fade-up">
119
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">How It Works</h2>
120
+ <p class="text-gray-600 max-w-2xl mx-auto">Simple steps to get your items delivered</p>
121
+ </div>
122
+ <div class="grid md:grid-cols-3 gap-8">
123
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
124
+ <div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div>
125
+ <h3 class="text-xl font-semibold mb-2">Request Delivery</h3>
126
+ <p class="text-gray-600">Enter pickup and drop-off locations through our app or website.</p>
127
+ </div>
128
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
129
+ <div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div>
130
+ <h3 class="text-xl font-semibold mb-2">Match with Rider</h3>
131
+ <p class="text-gray-600">Our system instantly matches your request with the nearest available rider.</p>
132
+ </div>
133
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
134
+ <div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div>
135
+ <h3 class="text-xl font-semibold mb-2">Track & Receive</h3>
136
+ <p class="text-gray-600">Track your delivery in real-time and receive your items safely.</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Rider Section -->
143
+ <section id="rider" class="py-16 bg-gray-50">
144
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
145
+ <div class="grid md:grid-cols-2 gap-12 items-center">
146
+ <div data-aos="fade-right">
147
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Become a DeliveryPal Rider</h2>
148
+ <p class="text-gray-600 mb-6">Earn money on your own schedule by delivering with DeliveryPal. Join our network of trusted riders today.</p>
149
+ <ul class="space-y-3 mb-8">
150
+ <li class="flex items-start">
151
+ <i data-feather="check-circle" class="text-primary mr-2 mt-1"></i>
152
+ <span>Flexible working hours</span>
153
+ </li>
154
+ <li class="flex items-start">
155
+ <i data-feather="check-circle" class="text-primary mr-2 mt-1"></i>
156
+ <span>Competitive earnings</span>
157
+ </li>
158
+ <li class="flex items-start">
159
+ <i data-feather="check-circle" class="text-primary mr-2 mt-1"></i>
160
+ <span>Weekly payments</span>
161
+ </li>
162
+ </ul>
163
+ <a href="rider-register.html" class="bg-primary text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-opacity-90 transition">Apply Now</a>
164
+ </div>
165
+ <div data-aos="fade-left">
166
+ <div class="bg-white p-6 rounded-lg shadow-md kyc-card">
167
+ <h3 class="text-xl font-semibold mb-4 text-secondary">Rider Verification Process</h3>
168
+ <p class="text-gray-600 mb-4">To ensure safety and reliability, all riders must complete our KYC verification:</p>
169
+ <ol class="list-decimal pl-5 space-y-2 text-gray-600">
170
+ <li>Submit your application</li>
171
+ <li>Upload required documents (ID, vehicle registration, etc.)</li>
172
+ <li>Complete background check</li>
173
+ <li>Get approved by our team</li>
174
+ <li>Start delivering!</li>
175
+ </ol>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <!-- Business Section -->
183
+ <section id="business" class="py-16">
184
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
185
+ <div class="grid md:grid-cols-2 gap-12 items-center">
186
+ <div data-aos="fade-right">
187
+ <img src="http://static.photos/business/640x360/15" alt="Business Delivery" class="rounded-lg shadow-md">
188
+ </div>
189
+ <div data-aos="fade-left">
190
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Delivery Solutions for Businesses</h2>
191
+ <p class="text-gray-600 mb-6">Grow your business with our reliable delivery network. We handle the logistics so you can focus on what matters most.</p>
192
+ <ul class="space-y-3 mb-8">
193
+ <li class="flex items-start">
194
+ <i data-feather="check-circle" class="text-primary mr-2 mt-1"></i>
195
+ <span>Same-day delivery options</span>
196
+ </li>
197
+ <li class="flex items-start">
198
+ <i data-feather="check-circle" class="text-primary mr-2 mt-1"></i>
199
+ <span>Real-time tracking for you and your customers</span>
200
+ </li>
201
+ <li class="flex items-start">
202
+ <i data-feather="check-circle" class="text-primary mr-2 mt-1"></i>
203
+ <span>Dedicated account management</span>
204
+ </li>
205
+ </ul>
206
+ <a href="business-register.html" class="bg-primary text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-opacity-90 transition">Get Started</a>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </section>
211
+
212
+ <!-- CTA Section -->
213
+ <section class="py-16 bg-primary text-white">
214
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
215
+ <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Ready to experience fast, reliable delivery?</h2>
216
+ <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">Download our app now and get your first delivery at a discounted rate!</p>
217
+ <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
218
+ <a href="#" class="bg-white text-primary px-6 py-3 rounded-md text-lg font-semibold hover:bg-opacity-90 transition">
219
+ <div class="flex items-center justify-center">
220
+ <i data-feather="smartphone" class="mr-2"></i>
221
+ <span>App Store</span>
222
+ </div>
223
+ </a>
224
+ <a href="#" class="bg-white text-primary px-6 py-3 rounded-md text-lg font-semibold hover:bg-opacity-90 transition">
225
+ <div class="flex items-center justify-center">
226
+ <i data-feather="smartphone" class="mr-2"></i>
227
+ <span>Google Play</span>
228
+ </div>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Footer -->
235
+ <footer class="bg-gray-900 text-white py-12">
236
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
237
+ <div class="grid md:grid-cols-4 gap-8">
238
+ <div>
239
+ <div class="flex items-center mb-4">
240
+ <i data-feather="truck" class="text-primary h-6 w-6"></i>
241
+ <span class="ml-2 text-xl font-bold">DeliveryPal</span>
242
+ </div>
243
+ <p class="text-gray-400">Fast, reliable delivery services for individuals and businesses.</p>
244
+ </div>
245
+ <div>
246
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
247
+ <ul class="space-y-2">
248
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
249
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
250
+ <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition">How It Works</a></li>
251
+ <li><a href="#rider" class="text-gray-400 hover:text-white transition">Become a Rider</a></li>
252
+ <li><a href="#business" class="text-gray-400 hover:text-white transition">For Businesses</a></li>
253
+ </ul>
254
+ </div>
255
+ <div>
256
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
257
+ <ul class="space-y-2">
258
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
259
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
260
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
261
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
262
+ </ul>
263
+ </div>
264
+ <div>
265
+ <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
266
+ <div class="flex space-x-4">
267
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
268
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
269
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
270
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
271
+ </div>
272
+ <p class="text-gray-400 mt-4">Subscribe to our newsletter</p>
273
+ <div class="mt-2 flex">
274
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary w-full">
275
+ <button class="bg-primary px-4 py-2 rounded-r-md hover:bg-opacity-90 transition">
276
+ <i data-feather="send"></i>
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
282
+ <p>&copy; 2023 DeliveryPal. All rights reserved.</p>
283
+ </div>
284
+ </div>
285
+ </footer>
286
+
287
+ <script>
288
+ AOS.init({
289
+ duration: 800,
290
+ easing: 'ease-in-out',
291
+ once: true
292
+ });
293
+ feather.replace();
294
+ </script>
295
+ </body>
296
  </html>
login.html ADDED
@@ -0,0 +1,119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - DeliveryPal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF6B35',
15
+ secondary: '#6E0D88',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
22
+ <script src="https://unpkg.com/feather-icons"></script>
23
+ <script src="https://accounts.google.com/gsi/client" async defer></script>
24
+ <style>
25
+ .auth-bg {
26
+ background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('http://static.photos/technology/1200x630/12');
27
+ }
28
+ .google-btn {
29
+ transition: all 0.3s ease;
30
+ }
31
+ .google-btn:hover {
32
+ transform: translateY(-2px);
33
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="font-sans bg-gray-50">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-sm">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-16">
42
+ <div class="flex items-center">
43
+ <div class="flex-shrink-0 flex items-center">
44
+ <i data-feather="truck" class="text-primary h-8 w-8"></i>
45
+ <span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
46
+ </div>
47
+ </div>
48
+ <div class="flex items-center">
49
+ <a href="register.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Don't have an account? Register</a>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Main Content -->
56
+ <div class="min-h-screen flex items-center justify-center auth-bg bg-cover bg-center">
57
+ <div class="max-w-md w-full bg-white rounded-lg shadow-md overflow-hidden">
58
+ <div class="p-8">
59
+ <div class="text-center mb-8">
60
+ <h2 class="text-3xl font-bold text-gray-900">Welcome Back</h2>
61
+ <p class="text-gray-600 mt-2">Sign in to access your account</p>
62
+ </div>
63
+
64
+ <!-- Google Sign-In -->
65
+ <div class="mb-6">
66
+ <button class="google-btn w-full flex items-center justify-center border border-gray-300 rounded-md py-2 px-4 text-gray-700 hover:border-primary hover:text-primary transition">
67
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="h-5 w-5 mr-2">
68
+ <span>Continue with Google</span>
69
+ </button>
70
+ </div>
71
+
72
+ <div class="flex items-center my-6">
73
+ <div class="flex-grow border-t border-gray-300"></div>
74
+ <span class="mx-4 text-gray-500">or</span>
75
+ <div class="flex-grow border-t border-gray-300"></div>
76
+ </div>
77
+
78
+ <!-- Login Form -->
79
+ <form class="space-y-6">
80
+ <div>
81
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
82
+ <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
83
+ </div>
84
+ <div>
85
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
86
+ <input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
87
+ </div>
88
+ <div class="flex items-center justify-between">
89
+ <div class="flex items-center">
90
+ <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
91
+ <label for="remember" class="ml-2 block text-sm text-gray-700">
92
+ Remember me
93
+ </label>
94
+ </div>
95
+ <div>
96
+ <a href="#" class="text-sm text-primary hover:underline">Forgot password?</a>
97
+ </div>
98
+ </div>
99
+ <div>
100
+ <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
101
+ Sign In
102
+ </button>
103
+ </div>
104
+ </form>
105
+
106
+ <div class="mt-6 text-center">
107
+ <p class="text-sm text-gray-600">
108
+ Don't have an account? <a href="register.html" class="text-primary font-medium hover:underline">Register</a>
109
+ </p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+ feather.replace();
117
+ </script>
118
+ </body>
119
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Please do a delivery service site called deliverypal app with theme of orange color and very small purple those are our colors the site must have all feature of delivery system for riders approval put a verification protocol where they have to submit their kyc and we shall approve manually in admin data portal same to some businesses we are going to upload for customers it will be the same put google sign up. So
2
+ Please no functions working at all and you didn't do a pro site it looks so bad poorly organised I don't want any mockup data since this is going to go live after making it so fix
register.html ADDED
@@ -0,0 +1,150 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Register - DeliveryPal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF6B35',
15
+ secondary: '#6E0D88',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
22
+ <script src="https://unpkg.com/feather-icons"></script>
23
+ <script src="https://accounts.google.com/gsi/client" async defer></script>
24
+ <style>
25
+ .auth-bg {
26
+ background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('http://static.photos/technology/1200x630/12');
27
+ }
28
+ .google-btn {
29
+ transition: all 0.3s ease;
30
+ }
31
+ .google-btn:hover {
32
+ transform: translateY(-2px);
33
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="font-sans bg-gray-50">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-sm">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-16">
42
+ <div class="flex items-center">
43
+ <div class="flex-shrink-0 flex items-center">
44
+ <i data-feather="truck" class="text-primary h-8 w-8"></i>
45
+ <span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
46
+ </div>
47
+ </div>
48
+ <div class="flex items-center">
49
+ <a href="login.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Already have an account? Login</a>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Main Content -->
56
+ <div class="min-h-screen flex items-center justify-center auth-bg bg-cover bg-center">
57
+ <div class="max-w-md w-full bg-white rounded-lg shadow-md overflow-hidden">
58
+ <div class="p-8">
59
+ <div class="text-center mb-8">
60
+ <h2 class="text-3xl font-bold text-gray-900">Create an Account</h2>
61
+ <p class="text-gray-600 mt-2">Join DeliveryPal to start sending or delivering packages</p>
62
+ </div>
63
+
64
+ <!-- Google Sign-In -->
65
+ <div id="g_id_onload"
66
+ data-client_id="YOUR_GOOGLE_CLIENT_ID"
67
+ data-context="signup"
68
+ data-ux_mode="popup"
69
+ data-callback="handleGoogleSignIn"
70
+ data-auto_prompt="false">
71
+ </div>
72
+ <div class="mb-6">
73
+ <button class="google-btn w-full flex items-center justify-center border border-gray-300 rounded-md py-2 px-4 text-gray-700 hover:border-primary hover:text-primary transition">
74
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="h-5 w-5 mr-2">
75
+ <span>Continue with Google</span>
76
+ </button>
77
+ </div>
78
+
79
+ <div class="flex items-center my-6">
80
+ <div class="flex-grow border-t border-gray-300"></div>
81
+ <span class="mx-4 text-gray-500">or</span>
82
+ <div class="flex-grow border-t border-gray-300"></div>
83
+ </div>
84
+
85
+ <!-- Registration Form -->
86
+ <form class="space-y-6">
87
+ <div class="grid grid-cols-2 gap-4">
88
+ <div>
89
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
90
+ <input type="text" id="first-name" name="first-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
91
+ </div>
92
+ <div>
93
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
94
+ <input type="text" id="last-name" name="last-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
95
+ </div>
96
+ </div>
97
+ <div>
98
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
99
+ <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
100
+ </div>
101
+ <div>
102
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
103
+ <input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
104
+ </div>
105
+ <div>
106
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
107
+ <input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
108
+ </div>
109
+ <div>
110
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
111
+ <input type="password" id="confirm-password" name="confirm-password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
112
+ </div>
113
+ <div class="flex items-center">
114
+ <input type="checkbox" id="terms" name="terms" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
115
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
116
+ I agree to the <a href="#" class="text-primary hover:underline">Terms of Service</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>
117
+ </label>
118
+ </div>
119
+ <div>
120
+ <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
121
+ Create Account
122
+ </button>
123
+ </div>
124
+ </form>
125
+
126
+ <div class="mt-6 text-center">
127
+ <p class="text-sm text-gray-600">
128
+ Already have an account? <a href="login.html" class="text-primary font-medium hover:underline">Sign in</a>
129
+ </p>
130
+ </div>
131
+ </div>
132
+ <div class="bg-gray-50 px-8 py-4">
133
+ <div class="text-center text-sm text-gray-500">
134
+ <p>By continuing, you agree to our Terms of Service and Privacy Policy.</p>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <script>
141
+ feather.replace();
142
+
143
+ function handleGoogleSignIn(response) {
144
+ // Handle Google Sign-In response
145
+ console.log('Google sign-in response:', response);
146
+ // You would typically send this to your backend for verification
147
+ }
148
+ </script>
149
+ </body>
150
+ </html>
rider-register.html ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Become a Rider - DeliveryPal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF6B35',
15
+ secondary: '#6E0D88',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
22
+ <script src="https://unpkg.com/feather-icons"></script>
23
+ <style>
24
+ .kyc-card {
25
+ border-left: 4px solid #6E0D88;
26
+ }
27
+ .file-upload {
28
+ border: 2px dashed #d1d5db;
29
+ transition: all 0.3s ease;
30
+ }
31
+ .file-upload:hover {
32
+ border-color: #FF6B35;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="font-sans bg-gray-50">
37
+ <!-- Navigation -->
38
+ <nav class="bg-white shadow-sm">
39
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
40
+ <div class="flex justify-between h-16">
41
+ <div class="flex items-center">
42
+ <div class="flex-shrink-0 flex items-center">
43
+ <i data-feather="truck" class="text-primary h-8 w-8"></i>
44
+ <span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
45
+ </div>
46
+ </div>
47
+ <div class="flex items-center">
48
+ <a href="index.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Back to Home</a>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Main Content -->
55
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
56
+ <div class="bg-white shadow-md rounded-lg overflow-hidden">
57
+ <div class="p-8">
58
+ <div class="text-center mb-8">
59
+ <h2 class="text-3xl font-bold text-gray-900">Become a DeliveryPal Rider</h2>
60
+ <p class="text-gray-600 mt-2">Complete the application form to start earning with us</p>
61
+ </div>
62
+
63
+ <div class="mb-8 bg-gray-50 p-6 rounded-lg kyc-card">
64
+ <h3 class="text-xl font-semibold mb-4 text-secondary">KYC Verification Required</h3>
65
+ <p class="text-gray-600 mb-4">To ensure safety and reliability, all riders must complete our verification process. Please have the following documents ready:</p>
66
+ <ul class="list-disc pl-5 space-y-2 text-gray-600">
67
+ <li>Government-issued ID (Driver's License, Passport, etc.)</li>
68
+ <li>Vehicle registration (if applicable)</li>
69
+ <li>Proof of address (Utility bill, Bank statement, etc.)</li>
70
+ <li>Recent passport-style photo</li>
71
+ </ul>
72
+ </div>
73
+
74
+ <!-- Rider Application Form -->
75
+ <form class="space-y-6">
76
+ <div class="grid md:grid-cols-2 gap-6">
77
+ <div>
78
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
79
+ <input type="text" id="first-name" name="first-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
80
+ </div>
81
+ <div>
82
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
83
+ <input type="text" id="last-name" name="last-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
84
+ </div>
85
+ </div>
86
+
87
+ <div class="grid md:grid-cols-2 gap-6">
88
+ <div>
89
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
90
+ <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
91
+ </div>
92
+ <div>
93
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
94
+ <input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
95
+ </div>
96
+ </div>
97
+
98
+ <div>
99
+ <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Full Address</label>
100
+ <input type="text" id="address" name="address" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
101
+ </div>
102
+
103
+ <div class="grid md:grid-cols-2 gap-6">
104
+ <div>
105
+ <label for="vehicle-type" class="block text-sm font-medium text-gray-700 mb-1">Vehicle Type</label>
106
+ <select id="vehicle-type" name="vehicle-type" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
107
+ <option value="">Select vehicle type</option>
108
+ <option value="bicycle">Bicycle</option>
109
+ <option value="motorcycle">Motorcycle</option>
110
+ <option value="car">Car</option>
111
+ <option value="van">Van</option>
112
+ <option value="truck">Truck</option>
113
+ </select>
114
+ </div>
115
+ <div>
116
+ <label for="vehicle-number" class="block text-sm font-medium text-gray-700 mb-1">Vehicle Registration Number</label>
117
+ <input type="text" id="vehicle-number" name="vehicle-number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Document Upload Section -->
122
+ <div class="space-y-6">
123
+ <h3 class="text-lg font-medium text-gray-900">Document Upload</h3>
124
+
125
+ <div class="grid md:grid-cols-2 gap-6">
126
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
127
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
128
+ <p class="mt-2 text-sm text-gray-600">Upload Government ID</p>
129
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG/PDF)</p>
130
+ <input type="file" id="id-upload" name="id-upload" class="hidden" accept="image/*,.pdf">
131
+ </div>
132
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
133
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
134
+ <p class="mt-2 text-sm text-gray-600">Upload Vehicle Registration</p>
135
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG/PDF)</p>
136
+ <input type="file" id="vehicle-upload" name="vehicle-upload" class="hidden" accept="image/*,.pdf">
137
+ </div>
138
+ </div>
139
+
140
+ <div class="grid md:grid-cols-2 gap-6">
141
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
142
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
143
+ <p class="mt-2 text-sm text-gray-600">Proof of Address</p>
144
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG/PDF)</p>
145
+ <input type="file" id="address-upload" name="address-upload" class="hidden" accept="image/*,.pdf">
146
+ </div>
147
+ <div class="file-upload p-4 rounded-lg text-center cursor-pointer">
148
+ <i data-feather="upload" class="mx-auto h-8 w-8 text-gray-400"></i>
149
+ <p class="mt-2 text-sm text-gray-600">Passport Photo</p>
150
+ <p class="text-xs text-gray-500">(Max 5MB, JPG/PNG)</p>
151
+ <input type="file" id="photo-upload" name="photo-upload" class="hidden" accept="image/*">
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="flex items-center">
157
+ <input type="checkbox" id="terms" name="terms" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
158
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
159
+ I certify that all information provided is accurate and I agree to the <a href="#" class="text-primary hover:underline">Terms of Service</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>
160
+ </label>
161
+ </div>
162
+
163
+ <div class="pt-4">
164
+ <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 font-medium">
165
+ Submit Application
166
+ </button>
167
+ </div>
168
+ </form>
169
+
170
+ <div class="mt-6 text-center text-sm text-gray-500">
171
+ <p>Your application will be reviewed within 2-3 business days. We'll contact you via email once approved.</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <script>
178
+ feather.replace();
179
+
180
+ // Handle file upload clicks
181
+ document.querySelectorAll('.file-upload').forEach(uploadDiv => {
182
+ const fileInput = uploadDiv.querySelector('input[type="file"]');
183
+ uploadDiv.addEventListener('click', () => fileInput.click());
184
+
185
+ fileInput.addEventListener('change', (e) => {
186
+ if (e.target.files.length > 0) {
187
+ uploadDiv.innerHTML = `
188
+ <i data-feather="check-circle" class="mx-auto h-8 w-8 text-green-500"></i>
189
+ <p class="mt-2 text-sm text-gray-600">${e.target.files[0].name}</p>
190
+ <p class="text-xs text-gray-500">${(e.target.files[0].size / 1024 / 1024).toFixed(2)} MB</p>
191
+ `;
192
+ feather.replace();
193
+ }
194
+ });
195
+ });
196
+ </script>
197
+ </body>
198
+ </html>