Hugging Face's logo

Spaces:
steake
/
RING-PULL-KHR
Running

App Files Community
steake commited on
Commit
aa5cfa0
·
verified ·
1 Parent(s): 13e8516

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1135 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Esl Buddy
3
- emoji: 🦀
4
- colorFrom: green
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: esl-buddy
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: blue
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,1135 @@
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>ESL Academic Hub - Assignment Marketplace</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, #4f46e5 0%, #7c3aed 100%);
12
+ }
13
+ .assignment-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .chat-bubble {
18
+ border-radius: 20px;
19
+ max-width: 80%;
20
+ }
21
+ .progress-bar {
22
+ transition: width 0.5s ease-in-out;
23
+ }
24
+ .citation-tool {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .citation-tool:hover {
28
+ transform: scale(1.02);
29
+ }
30
+ .floating-button {
31
+ animation: float 3s ease-in-out infinite;
32
+ }
33
+ @keyframes float {
34
+ 0% { transform: translateY(0px); }
35
+ 50% { transform: translateY(-10px); }
36
+ 100% { transform: translateY(0px); }
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50 font-sans">
41
+ <!-- Navigation -->
42
+ <nav class="gradient-bg text-white shadow-lg">
43
+ <div class="container mx-auto px-4 py-3">
44
+ <div class="flex justify-between items-center">
45
+ <div class="flex items-center space-x-2">
46
+ <i class="fas fa-graduation-cap text-2xl"></i>
47
+ <span class="text-xl font-bold">ESL Academic Hub</span>
48
+ </div>
49
+ <div class="hidden md:flex space-x-6">
50
+ <a href="#marketplace" class="hover:text-gray-200 transition">Marketplace</a>
51
+ <a href="#tools" class="hover:text-gray-200 transition">Tools</a>
52
+ <a href="#how-it-works" class="hover:text-gray-200 transition">How It Works</a>
53
+ <a href="#pricing" class="hover:text-gray-200 transition">Pricing</a>
54
+ </div>
55
+ <div class="flex items-center space-x-4">
56
+ <button id="loginBtn" class="px-4 py-2 rounded-full bg-white text-indigo-600 font-medium hover:bg-gray-100 transition">Login</button>
57
+ <button id="signupBtn" class="px-4 py-2 rounded-full border-2 border-white text-white font-medium hover:bg-white hover:text-indigo-600 transition">Sign Up</button>
58
+ <button class="md:hidden text-xl" id="mobileMenuBtn">
59
+ <i class="fas fa-bars"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+ <!-- Mobile menu -->
64
+ <div id="mobileMenu" class="hidden md:hidden mt-4 pb-2">
65
+ <a href="#marketplace" class="block py-2 hover:bg-indigo-700 px-2 rounded">Marketplace</a>
66
+ <a href="#tools" class="block py-2 hover:bg-indigo-700 px-2 rounded">Tools</a>
67
+ <a href="#how-it-works" class="block py-2 hover:bg-indigo-700 px-2 rounded">How It Works</a>
68
+ <a href="#pricing" class="block py-2 hover:bg-indigo-700 px-2 rounded">Pricing</a>
69
+ </div>
70
+ </div>
71
+ </nav>
72
+
73
+ <!-- Hero Section -->
74
+ <section class="gradient-bg text-white py-16 md:py-24">
75
+ <div class="container mx-auto px-4">
76
+ <div class="flex flex-col md:flex-row items-center">
77
+ <div class="md:w-1/2 mb-10 md:mb-0">
78
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Academic Success for ESL Students</h1>
79
+ <p class="text-xl mb-8">Connect with native English-speaking freelancers to help with your assignments while maintaining academic integrity.</p>
80
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
81
+ <button class="px-6 py-3 bg-white text-indigo-600 rounded-full font-bold hover:bg-gray-100 transition">Post an Assignment</button>
82
+ <button class="px-6 py-3 border-2 border-white rounded-full font-bold hover:bg-white hover:text-indigo-600 transition">Become a Freelancer</button>
83
+ </div>
84
+ </div>
85
+ <div class="md:w-1/2 flex justify-center">
86
+ <div class="relative w-full max-w-md">
87
+ <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full opacity-20"></div>
88
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-300 rounded-full opacity-20"></div>
89
+ <div class="relative bg-white rounded-xl shadow-xl p-6 text-gray-800">
90
+ <div class="flex items-center mb-4">
91
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
92
+ <i class="fas fa-user-graduate text-indigo-600"></i>
93
+ </div>
94
+ <div class="ml-3">
95
+ <p class="font-bold">Student Dashboard</p>
96
+ <p class="text-sm text-gray-500">Your current assignments</p>
97
+ </div>
98
+ </div>
99
+ <div class="space-y-4">
100
+ <div class="flex items-start">
101
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mt-1">
102
+ <i class="fas fa-book text-green-600 text-xs"></i>
103
+ </div>
104
+ <div class="ml-3">
105
+ <p class="font-medium">Research Paper - Psychology</p>
106
+ <p class="text-sm text-gray-500">Due in 5 days • 3 bids received</p>
107
+ </div>
108
+ </div>
109
+ <div class="flex items-start">
110
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mt-1">
111
+ <i class="fas fa-file-alt text-yellow-600 text-xs"></i>
112
+ </div>
113
+ <div class="ml-3">
114
+ <p class="font-medium">Essay - American History</p>
115
+ <p class="text-sm text-gray-500">In progress • Draft submitted</p>
116
+ </div>
117
+ </div>
118
+ <div class="flex items-start">
119
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-1">
120
+ <i class="fas fa-chart-bar text-blue-600 text-xs"></i>
121
+ </div>
122
+ <div class="ml-3">
123
+ <p class="font-medium">Statistics Report</p>
124
+ <p class="text-sm text-gray-500">Completed • Grade: A-</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <button class="mt-6 w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View All Assignments</button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- University Verification Badge -->
137
+ <div class="bg-indigo-50 py-6">
138
+ <div class="container mx-auto px-4">
139
+ <div class="flex flex-col md:flex-row items-center justify-center bg-white rounded-xl shadow-sm p-6">
140
+ <div class="mb-4 md:mb-0 md:mr-6">
141
+ <div class="flex items-center bg-indigo-100 rounded-full px-4 py-2">
142
+ <i class="fas fa-university text-indigo-600 mr-2"></i>
143
+ <span class="font-medium">University Verification</span>
144
+ </div>
145
+ </div>
146
+ <p class="text-center md:text-left text-gray-700 md:w-2/3">Verify your university email to gain access to exclusive features and increase trust with freelancers. We never share your academic information.</p>
147
+ <button class="mt-4 md:mt-0 md:ml-6 px-4 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">Verify Now</button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Marketplace Section -->
153
+ <section id="marketplace" class="py-16 bg-white">
154
+ <div class="container mx-auto px-4">
155
+ <div class="text-center mb-12">
156
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Assignment Marketplace</h2>
157
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Find the perfect freelancer for your academic needs or browse available assignments if you're a writer.</p>
158
+ </div>
159
+
160
+ <div class="flex flex-col md:flex-row mb-8">
161
+ <div class="md:w-1/4 mb-6 md:mb-0">
162
+ <div class="bg-gray-50 p-6 rounded-xl sticky top-4">
163
+ <h3 class="font-bold text-lg mb-4">Filters</h3>
164
+ <div class="space-y-4">
165
+ <div>
166
+ <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
167
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
168
+ <option>All Subjects</option>
169
+ <option>Humanities</option>
170
+ <option>Social Sciences</option>
171
+ <option>Natural Sciences</option>
172
+ <option>Business</option>
173
+ <option>Engineering</option>
174
+ </select>
175
+ </div>
176
+ <div>
177
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assignment Type</label>
178
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
179
+ <option>All Types</option>
180
+ <option>Essay</option>
181
+ <option>Research Paper</option>
182
+ <option>Report</option>
183
+ <option>Presentation</option>
184
+ <option>Case Study</option>
185
+ </select>
186
+ </div>
187
+ <div>
188
+ <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
189
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
190
+ <option>Any Time</option>
191
+ <option>Within 3 days</option>
192
+ <option>Within 1 week</option>
193
+ <option>Within 2 weeks</option>
194
+ <option>More than 2 weeks</option>
195
+ </select>
196
+ </div>
197
+ <div>
198
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Grade</label>
199
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
200
+ <option>Any Grade</option>
201
+ <option>A+</option>
202
+ <option>A</option>
203
+ <option>A-</option>
204
+ <option>B+</option>
205
+ <option>B</option>
206
+ </select>
207
+ </div>
208
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Apply Filters</button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ <div class="md:w-3/4 md:pl-8">
213
+ <div class="flex justify-between items-center mb-6">
214
+ <h3 class="text-xl font-bold">Available Assignments</h3>
215
+ <div class="flex items-center">
216
+ <span class="text-sm text-gray-600 mr-2">Sort by:</span>
217
+ <select class="p-2 border border-gray-300 rounded-lg">
218
+ <option>Newest First</option>
219
+ <option>Due Date</option>
220
+ <option>Highest Budget</option>
221
+ <option>Most Bids</option>
222
+ </select>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="space-y-6" id="assignmentList">
227
+ <!-- Assignment cards will be inserted here by JavaScript -->
228
+ </div>
229
+
230
+ <div class="mt-8 flex justify-center">
231
+ <button class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition">Load More</button>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Assignment Creation Modal -->
239
+ <div id="assignmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
240
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl max-h-screen overflow-y-auto">
241
+ <div class="p-6">
242
+ <div class="flex justify-between items-center mb-6">
243
+ <h3 class="text-2xl font-bold">Create New Assignment</h3>
244
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
245
+ <i class="fas fa-times text-2xl"></i>
246
+ </button>
247
+ </div>
248
+
249
+ <div class="space-y-6">
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assignment Title*</label>
252
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="e.g., Research Paper on Climate Change">
253
+ </div>
254
+
255
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
256
+ <div>
257
+ <label class="block text-sm font-medium text-gray-700 mb-1">Subject*</label>
258
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
259
+ <option value="">Select Subject</option>
260
+ <option>Humanities</option>
261
+ <option>Social Sciences</option>
262
+ <option>Natural Sciences</option>
263
+ <option>Business</option>
264
+ <option>Engineering</option>
265
+ <option>Other</option>
266
+ </select>
267
+ </div>
268
+ <div>
269
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assignment Type*</label>
270
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
271
+ <option value="">Select Type</option>
272
+ <option>Essay</option>
273
+ <option>Research Paper</option>
274
+ <option>Report</option>
275
+ <option>Presentation</option>
276
+ <option>Case Study</option>
277
+ <option>Other</option>
278
+ </select>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
283
+ <div>
284
+ <label class="block text-sm font-medium text-gray-700 mb-1">Due Date*</label>
285
+ <input type="date" class="w-full p-3 border border-gray-300 rounded-lg">
286
+ </div>
287
+ <div>
288
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Grade*</label>
289
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
290
+ <option value="">Select Grade</option>
291
+ <option>A+</option>
292
+ <option>A</option>
293
+ <option>A-</option>
294
+ <option>B+</option>
295
+ <option>B</option>
296
+ <option>B-</option>
297
+ <option>C+</option>
298
+ <option>C</option>
299
+ </select>
300
+ </div>
301
+ </div>
302
+
303
+ <div>
304
+ <label class="block text-sm font-medium text-gray-700 mb-1">Word Count</label>
305
+ <div class="flex items-center">
306
+ <input type="range" min="500" max="5000" step="100" value="1500" class="w-full mr-4">
307
+ <span id="wordCountDisplay" class="bg-gray-100 px-3 py-1 rounded-lg">1500 words</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div>
312
+ <label class="block text-sm font-medium text-gray-700 mb-1">Citation Style*</label>
313
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
314
+ <button class="citation-tool p-3 border border-gray-300 rounded-lg hover:bg-indigo-50 hover:border-indigo-300">
315
+ <i class="fas fa-quote-left text-indigo-600 mr-2"></i> APA
316
+ </button>
317
+ <button class="citation-tool p-3 border border-gray-300 rounded-lg hover:bg-indigo-50 hover:border-indigo-300">
318
+ <i class="fas fa-quote-left text-indigo-600 mr-2"></i> MLA
319
+ </button>
320
+ <button class="citation-tool p-3 border border-gray-300 rounded-lg hover:bg-indigo-50 hover:border-indigo-300">
321
+ <i class="fas fa-quote-left text-indigo-600 mr-2"></i> Chicago
322
+ </button>
323
+ <button class="citation-tool p-3 border border-gray-300 rounded-lg hover:bg-indigo-50 hover:border-indigo-300">
324
+ <i class="fas fa-quote-left text-indigo-600 mr-2"></i> Harvard
325
+ </button>
326
+ </div>
327
+ </div>
328
+
329
+ <div>
330
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assignment Details*</label>
331
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg h-32" placeholder="Provide detailed instructions, requirements, and any specific materials that should be referenced..."></textarea>
332
+ </div>
333
+
334
+ <div>
335
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload Files (Optional)</label>
336
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
337
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
338
+ <p class="text-gray-500">Drag & drop files here or click to browse</p>
339
+ <input type="file" class="hidden">
340
+ </div>
341
+ </div>
342
+
343
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
344
+ <div>
345
+ <label class="block text-sm font-medium text-gray-700 mb-1">Your Budget ($)</label>
346
+ <input type="number" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="e.g., 50">
347
+ </div>
348
+ <div>
349
+ <label class="block text-sm font-medium text-gray-700 mb-1">Estimated Grade Curve</label>
350
+ <div class="bg-indigo-50 p-3 rounded-lg">
351
+ <div class="flex justify-between mb-1">
352
+ <span class="text-sm font-medium">Based on similar assignments:</span>
353
+ <span class="text-sm font-bold">B+ to A-</span>
354
+ </div>
355
+ <div class="w-full bg-gray-200 rounded-full h-2">
356
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 70%"></div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="pt-4 border-t border-gray-200">
363
+ <div class="flex items-center">
364
+ <input type="checkbox" id="aiCheck" class="mr-3">
365
+ <label for="aiCheck" class="text-sm text-gray-700">Run through AI detection before submission (additional $5)</label>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="flex justify-end space-x-4">
370
+ <button class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition">Save Draft</button>
371
+ <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Post Assignment</button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Tools Section -->
379
+ <section id="tools" class="py-16 bg-gray-50">
380
+ <div class="container mx-auto px-4">
381
+ <div class="text-center mb-12">
382
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Academic Support Tools</h2>
383
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Enhance your academic work with our specialized tools designed for ESL students.</p>
384
+ </div>
385
+
386
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
387
+ <!-- Planner Tool -->
388
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
389
+ <div class="gradient-bg p-6 text-white">
390
+ <i class="fas fa-tasks text-3xl mb-4"></i>
391
+ <h3 class="text-xl font-bold mb-2">Assignment Planner</h3>
392
+ <p>Break down your assignment into manageable steps with deadlines.</p>
393
+ </div>
394
+ <div class="p-6">
395
+ <div class="mb-4">
396
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assignment Type</label>
397
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
398
+ <option>Select Type</option>
399
+ <option>Essay</option>
400
+ <option>Research Paper</option>
401
+ <option>Report</option>
402
+ </select>
403
+ </div>
404
+ <div class="mb-4">
405
+ <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
406
+ <input type="date" class="w-full p-2 border border-gray-300 rounded-lg">
407
+ </div>
408
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Generate Plan</button>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Citation Tool -->
413
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
414
+ <div class="gradient-bg p-6 text-white">
415
+ <i class="fas fa-quote-right text-3xl mb-4"></i>
416
+ <h3 class="text-xl font-bold mb-2">Citation Generator</h3>
417
+ <p>Automatically format references in APA, MLA, Chicago, or Harvard style.</p>
418
+ </div>
419
+ <div class="p-6">
420
+ <div class="mb-4">
421
+ <label class="block text-sm font-medium text-gray-700 mb-1">Citation Style</label>
422
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
423
+ <option>APA</option>
424
+ <option>MLA</option>
425
+ <option>Chicago</option>
426
+ <option>Harvard</option>
427
+ </select>
428
+ </div>
429
+ <div class="mb-4">
430
+ <label class="block text-sm font-medium text-gray-700 mb-1">Source Type</label>
431
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
432
+ <option>Book</option>
433
+ <option>Journal Article</option>
434
+ <option>Website</option>
435
+ <option>Newspaper</option>
436
+ </select>
437
+ </div>
438
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Generate Citation</button>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- AI Detection Tool -->
443
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
444
+ <div class="gradient-bg p-6 text-white">
445
+ <i class="fas fa-robot text-3xl mb-4"></i>
446
+ <h3 class="text-xl font-bold mb-2">AI Detection Check</h3>
447
+ <p>Analyze your text for AI-generated content that might trigger plagiarism detectors.</p>
448
+ </div>
449
+ <div class="p-6">
450
+ <div class="mb-4">
451
+ <textarea class="w-full p-2 border border-gray-300 rounded-lg h-24" placeholder="Paste your text here..."></textarea>
452
+ </div>
453
+ <div class="mb-4 bg-gray-100 p-3 rounded-lg">
454
+ <div class="flex justify-between mb-1">
455
+ <span class="text-sm font-medium">AI Detection Score:</span>
456
+ <span class="text-sm font-bold">Not analyzed</span>
457
+ </div>
458
+ <div class="w-full bg-gray-200 rounded-full h-2">
459
+ <div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
460
+ </div>
461
+ </div>
462
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Analyze Text</button>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Research Tools -->
468
+ <div class="mt-16">
469
+ <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Research Assistance</h3>
470
+ <div class="bg-white rounded-xl shadow-md p-6">
471
+ <div class="flex flex-col md:flex-row items-center">
472
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6">
473
+ <h4 class="text-xl font-bold mb-4">Find Academic Sources</h4>
474
+ <p class="mb-4 text-gray-600">Search across Google Scholar, Semantic Scholar, and university libraries to find credible sources for your assignment.</p>
475
+ <div class="relative">
476
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg pr-10" placeholder="Search for academic sources...">
477
+ <button class="absolute right-3 top-3 text-gray-500 hover:text-indigo-600">
478
+ <i class="fas fa-search"></i>
479
+ </button>
480
+ </div>
481
+ </div>
482
+ <div class="md:w-1/2">
483
+ <div class="bg-gray-50 p-4 rounded-lg">
484
+ <div class="flex items-center mb-3">
485
+ <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
486
+ <span class="font-medium">Research Tips</span>
487
+ </div>
488
+ <ul class="space-y-2 text-sm">
489
+ <li class="flex items-start">
490
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
491
+ <span>Use Boolean operators (AND, OR, NOT) to refine searches</span>
492
+ </li>
493
+ <li class="flex items-start">
494
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
495
+ <span>Look for peer-reviewed journal articles for credibility</span>
496
+ </li>
497
+ <li class="flex items-start">
498
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
499
+ <span>Check reference lists of good papers for more sources</span>
500
+ </li>
501
+ </ul>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </section>
509
+
510
+ <!-- How It Works Section -->
511
+ <section id="how-it-works" class="py-16 bg-white">
512
+ <div class="container mx-auto px-4">
513
+ <div class="text-center mb-12">
514
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">How It Works</h2>
515
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Simple steps to get academic help from native English-speaking experts.</p>
516
+ </div>
517
+
518
+ <div class="flex flex-col md:flex-row justify-center mb-12">
519
+ <div class="relative">
520
+ <div class="hidden md:block absolute top-0 left-0 right-0 h-full">
521
+ <div class="h-full border-l-2 border-dashed border-gray-300 mx-auto" style="width: 2px; left: 50%;"></div>
522
+ </div>
523
+
524
+ <div class="flex flex-col md:flex-row items-center md:items-start space-y-8 md:space-y-0">
525
+ <!-- Step 1 -->
526
+ <div class="flex flex-col items-center md:w-1/4 px-4">
527
+ <div class="w-16 h-16 rounded-full gradient-bg text-white flex items-center justify-center text-2xl font-bold mb-4 z-10">1</div>
528
+ <div class="text-center">
529
+ <h3 class="font-bold text-lg mb-2">Post Your Assignment</h3>
530
+ <p class="text-gray-600">Provide details about your assignment, requirements, and deadline.</p>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- Step 2 -->
535
+ <div class="flex flex-col items-center md:w-1/4 px-4">
536
+ <div class="w-16 h-16 rounded-full gradient-bg text-white flex items-center justify-center text-2xl font-bold mb-4 z-10">2</div>
537
+ <div class="text-center">
538
+ <h3 class="font-bold text-lg mb-2">Receive Bids</h3>
539
+ <p class="text-gray-600">Freelancers review your assignment and submit proposals.</p>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Step 3 -->
544
+ <div class="flex flex-col items-center md:w-1/4 px-4">
545
+ <div class="w-16 h-16 rounded-full gradient-bg text-white flex items-center justify-center text-2xl font-bold mb-4 z-10">3</div>
546
+ <div class="text-center">
547
+ <h3 class="font-bold text-lg mb-2">Choose a Freelancer</h3>
548
+ <p class="text-gray-600">Review profiles, ratings, and samples to select the best match.</p>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Step 4 -->
553
+ <div class="flex flex-col items-center md:w-1/4 px-4">
554
+ <div class="w-16 h-16 rounded-full gradient-bg text-white flex items-center justify-center text-2xl font-bold mb-4 z-10">4</div>
555
+ <div class="text-center">
556
+ <h3 class="font-bold text-lg mb-2">Get Your Work</h3>
557
+ <p class="text-gray-600">Receive your completed assignment with options for revisions.</p>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- Video Demo -->
565
+ <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl overflow-hidden shadow-xl">
566
+ <div class="aspect-w-16 aspect-h-9 bg-gray-700 flex items-center justify-center">
567
+ <i class="fas fa-play text-5xl text-white opacity-75"></i>
568
+ </div>
569
+ <div class="p-6">
570
+ <h3 class="text-xl font-bold text-white mb-2">Platform Walkthrough</h3>
571
+ <p class="text-gray-300">Watch a 3-minute demo of how to post an assignment and work with freelancers.</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </section>
576
+
577
+ <!-- Testimonials -->
578
+ <section class="py-16 bg-indigo-50">
579
+ <div class="container mx-auto px-4">
580
+ <div class="text-center mb-12">
581
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">What Students Say</h2>
582
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from ESL students who improved their grades with our help.</p>
583
+ </div>
584
+
585
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
586
+ <!-- Testimonial 1 -->
587
+ <div class="bg-white p-6 rounded-xl shadow-sm">
588
+ <div class="flex items-center mb-4">
589
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
590
+ <i class="fas fa-user text-indigo-600"></i>
591
+ </div>
592
+ <div class="ml-4">
593
+ <p class="font-bold">Maria K.</p>
594
+ <p class="text-sm text-gray-500">Psychology Student, NYU</p>
595
+ </div>
596
+ </div>
597
+ <div class="flex mb-2">
598
+ <i class="fas fa-star text-yellow-400"></i>
599
+ <i class="fas fa-star text-yellow-400"></i>
600
+ <i class="fas fa-star text-yellow-400"></i>
601
+ <i class="fas fa-star text-yellow-400"></i>
602
+ <i class="fas fa-star text-yellow-400"></i>
603
+ </div>
604
+ <p class="text-gray-700">"As an international student, I struggled with academic writing. The freelancer I worked with not only improved my paper but taught me how to structure arguments better. My grade went from B- to A!"</p>
605
+ </div>
606
+
607
+ <!-- Testimonial 2 -->
608
+ <div class="bg-white p-6 rounded-xl shadow-sm">
609
+ <div class="flex items-center mb-4">
610
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
611
+ <i class="fas fa-user text-indigo-600"></i>
612
+ </div>
613
+ <div class="ml-4">
614
+ <p class="font-bold">Ahmed S.</p>
615
+ <p class="text-sm text-gray-500">Engineering Student, UT Austin</p>
616
+ </div>
617
+ </div>
618
+ <div class="flex mb-2">
619
+ <i class="fas fa-star text-yellow-400"></i>
620
+ <i class="fas fa-star text-yellow-400"></i>
621
+ <i class="fas fa-star text-yellow-400"></i>
622
+ <i class="fas fa-star text-yellow-400"></i>
623
+ <i class="fas fa-star text-yellow-400"></i>
624
+ </div>
625
+ <p class="text-gray-700">"The technical report writing service saved me so much time. The writer understood exactly what my professor wanted and formatted everything perfectly. I'll definitely use this again for my capstone project."</p>
626
+ </div>
627
+
628
+ <!-- Testimonial 3 -->
629
+ <div class="bg-white p-6 rounded-xl shadow-sm">
630
+ <div class="flex items-center mb-4">
631
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
632
+ <i class="fas fa-user text-indigo-600"></i>
633
+ </div>
634
+ <div class="ml-4">
635
+ <p class="font-bold">Wei L.</p>
636
+ <p class="text-sm text-gray-500">Business Student, UC Berkeley</p>
637
+ </div>
638
+ </div>
639
+ <div class="flex mb-2">
640
+ <i class="fas fa-star text-yellow-400"></i>
641
+ <i class="fas fa-star text-yellow-400"></i>
642
+ <i class="fas fa-star text-yellow-400"></i>
643
+ <i class="fas fa-star text-yellow-400"></i>
644
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
645
+ </div>
646
+ <p class="text-gray-700">"I was nervous about using a service like this, but the quality of work and attention to detail was impressive. The AI detection check gave me confidence to submit my paper without worry."</p>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </section>
651
+
652
+ <!-- Pricing Section -->
653
+ <section id="pricing" class="py-16 bg-white">
654
+ <div class="container mx-auto px-4">
655
+ <div class="text-center mb-12">
656
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Transparent Pricing</h2>
657
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Fair prices based on assignment complexity and urgency.</p>
658
+ </div>
659
+
660
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
661
+ <!-- Basic Plan -->
662
+ <div class="border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition">
663
+ <div class="p-6 border-b border-gray-200">
664
+ <h3 class="text-xl font-bold text-center">Standard</h3>
665
+ <div class="mt-4 text-center">
666
+ <span class="text-4xl font-bold">$15</span>
667
+ <span class="text-gray-500">/page</span>
668
+ </div>
669
+ <p class="mt-4 text-gray-600 text-center">For assignments with 2+ weeks deadline</p>
670
+ </div>
671
+ <div class="p-6">
672
+ <ul class="space-y-3">
673
+ <li class="flex items-start">
674
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
675
+ <span>Native English writer</span>
676
+ </li>
677
+ <li class="flex items-start">
678
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
679
+ <span>Basic research included</span>
680
+ </li>
681
+ <li class="flex items-start">
682
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
683
+ <span>1 revision round</span>
684
+ </li>
685
+ <li class="flex items-start">
686
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
687
+ <span>Standard formatting</span>
688
+ </li>
689
+ <li class="flex items-start text-gray-400">
690
+ <i class="fas fa-times mt-1 mr-2"></i>
691
+ <span>AI detection check</span>
692
+ </li>
693
+ </ul>
694
+ <button class="mt-8 w-full py-3 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition">Choose Plan</button>
695
+ </div>
696
+ </div>
697
+
698
+ <!-- Popular Plan -->
699
+ <div class="border-2 border-indigo-500 rounded-xl shadow-md transform scale-105 z-10">
700
+ <div class="gradient-bg p-6 rounded-t-lg text-white">
701
+ <div class="flex justify-between items-start">
702
+ <h3 class="text-xl font-bold">Premium</h3>
703
+ <span class="bg-white text-indigo-600 text-xs font-bold px-2 py-1 rounded-full">MOST POPULAR</span>
704
+ </div>
705
+ <div class="mt-4 text-center">
706
+ <span class="text-4xl font-bold">$25</span>
707
+ <span class="text-indigo-200">/page</span>
708
+ </div>
709
+ <p class="mt-4 text-indigo-100 text-center">For assignments with 1 week deadline</p>
710
+ </div>
711
+ <div class="p-6 bg-white rounded-b-lg">
712
+ <ul class="space-y-3">
713
+ <li class="flex items-start">
714
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
715
+ <span>Top-rated native writer</span>
716
+ </li>
717
+ <li class="flex items-start">
718
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
719
+ <span>In-depth research</span>
720
+ </li>
721
+ <li class="flex items-start">
722
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
723
+ <span>2 revision rounds</span>
724
+ </li>
725
+ <li class="flex items-start">
726
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
727
+ <span>Professional formatting</span>
728
+ </li>
729
+ <li class="flex items-start">
730
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
731
+ <span>AI detection check</span>
732
+ </li>
733
+ </ul>
734
+ <button class="mt-8 w-full py-3 gradient-bg text-white rounded-lg hover:opacity-90 transition">Choose Plan</button>
735
+ </div>
736
+ </div>
737
+
738
+ <!-- Urgent Plan -->
739
+ <div class="border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition">
740
+ <div class="p-6 border-b border-gray-200">
741
+ <h3 class="text-xl font-bold text-center">Urgent</h3>
742
+ <div class="mt-4 text-center">
743
+ <span class="text-4xl font-bold">$40</span>
744
+ <span class="text-gray-500">/page</span>
745
+ </div>
746
+ <p class="mt-4 text-gray-600 text-center">For assignments with 3 days deadline</p>
747
+ </div>
748
+ <div class="p-6">
749
+ <ul class="space-y-3">
750
+ <li class="flex items-start">
751
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
752
+ <span>Expert native writer</span>
753
+ </li>
754
+ <li class="flex items-start">
755
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
756
+ <span>Priority research</span>
757
+ </li>
758
+ <li class="flex items-start">
759
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
760
+ <span>3 revision rounds</span>
761
+ </li>
762
+ <li class="flex items-start">
763
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
764
+ <span>Perfect formatting</span>
765
+ </li>
766
+ <li class="flex items-start">
767
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
768
+ <span>AI detection + rewrite</span>
769
+ </li>
770
+ </ul>
771
+ <button class="mt-8 w-full py-3 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition">Choose Plan</button>
772
+ </div>
773
+ </div>
774
+ </div>
775
+
776
+ <div class="mt-12 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto">
777
+ <h3 class="text-xl font-bold text-center mb-6">Price Calculator</h3>
778
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
779
+ <div>
780
+ <div class="mb-4">
781
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assignment Type</label>
782
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
783
+ <option>Essay</option>
784
+ <option>Research Paper</option>
785
+ <option>Report</option>
786
+ <option>Case Study</option>
787
+ </select>
788
+ </div>
789
+ <div class="mb-4">
790
+ <label class="block text-sm font-medium text-gray-700 mb-1">Pages</label>
791
+ <input type="number" min="1" value="5" class="w-full p-3 border border-gray-300 rounded-lg">
792
+ </div>
793
+ </div>
794
+ <div>
795
+ <div class="mb-4">
796
+ <label class="block text-sm font-medium text-gray-700 mb-1">Urgency</label>
797
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
798
+ <option>Standard (2+ weeks)</option>
799
+ <option>Priority (1 week)</option>
800
+ <option>Urgent (3 days)</option>
801
+ <option>Emergency (24 hours)</option>
802
+ </select>
803
+ </div>
804
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
805
+ <div class="flex justify-between mb-2">
806
+ <span class="font-medium">Estimated Cost:</span>
807
+ <span class="font-bold">$125.00</span>
808
+ </div>
809
+ <div class="text-sm text-gray-500">Includes all fees and basic services</div>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ </div>
814
+ </div>
815
+ </section>
816
+
817
+ <!-- FAQ Section -->
818
+ <section class="py-16 bg-gray-50">
819
+ <div class="container mx-auto px-4">
820
+ <div class="text-center mb-12">
821
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Frequently Asked Questions</h2>
822
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Answers to common questions about our service.</p>
823
+ </div>
824
+
825
+ <div class="max-w-3xl mx-auto">
826
+ <div class="space-y-4">
827
+ <!-- FAQ Item 1 -->
828
+ <div class="bg-white p-6 rounded-xl shadow-sm">
829
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
830
+ <span class="font-bold text-lg">Is this service considered cheating?</span>
831
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
832
+ </button>
833
+ <div class="faq-content mt-3 hidden">
834
+ <p class="text-gray-600">Our service is designed as a tutoring and editing assistance platform. We provide guidance, editing, and model papers to help ESL students improve their academic writing skills. However, it is ultimately the student's responsibility to ensure their use of our services complies with their institution's academic integrity policies.</p>
835
+ <p class="text-gray-600 mt-2">We strongly recommend using our materials as learning aids and references rather than submitting them as your own work.</p>
836
+ </div>
837
+ </div>
838
+
839
+ <!-- FAQ Item 2 -->
840
+ <div class="bg-white p-6 rounded-xl shadow-sm">
841
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
842
+ <span class="font-bold text-lg">How do you ensure the quality of freelancers?</span>
843
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
844
+ </button>
845
+ <div class="faq-content mt-3 hidden">
846
+ <p class="text-gray-600">All freelancers go through a rigorous screening process that includes:</p>
847
+ <ul class="list-disc list-inside mt-2 space-y-1 text-gray-600">
848
+ <li>Native English proficiency verification</li>
849
+ <li>Academic credential verification</li>
850
+ <li>Writing sample evaluation</li>
851
+ <li>Subject matter expertise assessment</li>
852
+ </ul>
853
+ <p class="text-gray-600 mt-2">Additionally, we maintain a robust rating system where students can review freelancers after each assignment.</p>
854
+ </div>
855
+ </div>
856
+
857
+ <!-- FAQ Item 3 -->
858
+ <div class="bg-white p-6 rounded-xl shadow-sm">
859
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
860
+ <span class="font-bold text-lg">What if I'm not satisfied with the work?</span>
861
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
862
+ </button>
863
+ <div class="faq-content mt-3 hidden">
864
+ <p class="text-gray-600">We offer a satisfaction guarantee with free revisions included in all our plans. If you're not happy with the initial submission:</p>
865
+ <ol class="list-decimal list-inside mt-2 space-y-1 text-gray-600">
866
+ <li>Request specific changes through our messaging system</li>
867
+ <li>The freelancer will make the requested revisions</li>
868
+ <li>If still unsatisfied after revisions, you may request a different writer</li>
869
+ <li>As a last resort, we offer partial refunds based on the work completed</li>
870
+ </ol>
871
+ </div>
872
+ </div>
873
+
874
+ <!-- FAQ Item 4 -->
875
+ <div class="bg-white p-6 rounded-xl shadow-sm">
876
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
877
+ <span class="font-bold text-lg">How does the AI detection check work?</span>
878
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
879
+ </button>
880
+ <div class="faq-content mt-3 hidden">
881
+ <p class="text-gray-600">Our AI detection system analyzes your text using multiple indicators that plagiarism detection software like Turnitin looks for, including:</p>
882
+ <ul class="list-disc list-inside mt-2 space-y-1 text-gray-600">
883
+ <li>Patterns in word choice and sentence structure</li>
884
+ <li>Consistency of writing style</li>
885
+ <li>Common AI-generated phrasing</li>
886
+ <li>Originality of ideas and arguments</li>
887
+ </ul>
888
+ <p class="text-gray-600 mt-2">The system provides a score (Low/Medium/High risk) and suggestions for making the text appear more human-written if needed.</p>
889
+ </div>
890
+ </div>
891
+
892
+ <!-- FAQ Item 5 -->
893
+ <div class="bg-white p-6 rounded-xl shadow-sm">
894
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
895
+ <span class="font-bold text-lg">Can I communicate directly with the freelancer?</span>
896
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
897
+ </button>
898
+ <div class="faq-content mt-3 hidden">
899
+ <p class="text-gray-600">Yes, our platform includes a secure messaging system that allows direct communication between students and freelancers. Features include:</p>
900
+ <ul class="list-disc list-inside mt-2 space-y-1 text-gray-600">
901
+ <li>Real-time chat with message history</li>
902
+ <li>File sharing for drafts and materials</li>
903
+ <li>Optional translation support for ESL students</li>
904
+ <li>Scheduled video calls (premium feature)</li>
905
+ </ul>
906
+ <p class="text-gray-600 mt-2">All communication is monitored for quality assurance and remains confidential.</p>
907
+ </div>
908
+ </div>
909
+ </div>
910
+
911
+ <div class="mt-8 text-center">
912
+ <button class="px-6 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition">View All FAQs</button>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </section>
917
+
918
+ <!-- CTA Section -->
919
+ <section class="gradient-bg text-white py-16">
920
+ <div class="container mx-auto px-4 text-center">
921
+ <h2 class="text-3xl font-bold mb-6">Ready to Improve Your Academic Performance?</h2>
922
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of ESL students who achieve better grades with our help.</p>
923
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
924
+ <button class="px-8 py-3 bg-white text-indigo-600 rounded-full font-bold hover:bg-gray-100 transition">Get Started Now</button>
925
+ <button class="px-8 py-3 border-2 border-white rounded-full font-bold hover:bg-white hover:text-indigo-600 transition">Schedule a Demo</button>
926
+ </div>
927
+ </div>
928
+ </section>
929
+
930
+ <!-- Footer -->
931
+ <footer class="bg-gray-900 text-gray-400 py-12">
932
+ <div class="container mx-auto px-4">
933
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
934
+ <div>
935
+ <div class="flex items-center mb-4">
936
+ <i class="fas fa-graduation-cap text-2xl text-white mr-2"></i>
937
+ <span class="text-xl font-bold text-white">ESL Academic Hub</span>
938
+ </div>
939
+ <p class="mb-4">Helping ESL students achieve academic success through ethical writing assistance and learning support.</p>
940
+ <div class="flex space-x-4">
941
+ <a href="#" class="text-white hover:text-indigo-400"><i class="fab fa-facebook-f"></i></a>
942
+ <a href="#" class="text-white hover:text-indigo-400"><i class="fab fa-twitter"></i></a>
943
+ <a href="#" class="text-white hover:text-indigo-400"><i class="fab fa-linkedin-in"></i></a>
944
+ <a href="#" class="text-white hover:text-indigo-400"><i class="fab fa-instagram"></i></a>
945
+ </div>
946
+ </div>
947
+
948
+ <div>
949
+ <h3 class="text-white font-bold mb-4">Services</h3>
950
+ <ul class="space-y-2">
951
+ <li><a href="#" class="hover:text-white transition">Assignment Help</a></li>
952
+ <li><a href="#" class="hover:text-white transition">Editing & Proofreading</a></li>
953
+ <li><a href="#" class="hover:text-white transition">Research Assistance</a></li>
954
+ <li><a href="#" class="hover:text-white transition">Citation Tools</a></li>
955
+ <li><a href="#" class="hover:text-white transition">AI Detection Check</a></li>
956
+ </ul>
957
+ </div>
958
+
959
+ <div>
960
+ <h3 class="text-white font-bold mb-4">Resources</h3>
961
+ <ul class="space-y-2">
962
+ <li><a href="#" class="hover:text-white transition">Academic Writing Guide</a></li>
963
+ <li><a href="#" class="hover:text-white transition">Sample Papers</a></li>
964
+ <li><a href="#" class="hover:text-white transition">University Writing Centers</a></li>
965
+ <li><a href="#" class="hover:text-white transition">ESL Learning Tools</a></li>
966
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
967
+ </ul>
968
+ </div>
969
+
970
+ <div>
971
+ <h3 class="text-white font-bold mb-4">Legal</h3>
972
+ <ul class="space-y-2">
973
+ <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
974
+ <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
975
+ <li><a href="#" class="hover:text-white transition">Academic Integrity</a></li>
976
+ <li><a href="#" class="hover:text-white transition">Refund Policy</a></li>
977
+ <li><a href="#" class="hover:text-white transition">Contact Us</a></li>
978
+ </ul>
979
+ </div>
980
+ </div>
981
+
982
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
983
+ <p>© 2023 ESL Academic Hub. All rights reserved.</p>
984
+ <div class="flex space-x-6 mt-4 md:mt-0">
985
+ <a href="#" class="hover:text-white transition">English</a>
986
+ <a href="#" class="hover:text-white transition">中文</a>
987
+ <a href="#" class="hover:text-white transition">Español</a>
988
+ <a href="#" class="hover:text-white transition">العربية</a>
989
+ </div>
990
+ </div>
991
+ </div>
992
+ </footer>
993
+
994
+ <!-- Floating Action Button -->
995
+ <div class="fixed bottom-6 right-6 z-50">
996
+ <button class="floating-button w-14 h-14 rounded-full gradient-bg text-white shadow-xl flex items-center justify-center">
997
+ <i class="fas fa-comment-dots text-xl"></i>
998
+ </button>
999
+ </div>
1000
+
1001
+ <script>
1002
+ // Mobile menu toggle
1003
+ document.getElementById('mobileMenuBtn').addEventListener('click', function() {
1004
+ document.getElementById('mobileMenu').classList.toggle('hidden');
1005
+ });
1006
+
1007
+ // FAQ toggle
1008
+ document.querySelectorAll('.faq-toggle').forEach(button => {
1009
+ button.addEventListener('click', function() {
1010
+ const content = this.nextElementSibling;
1011
+ const icon = this.querySelector('i');
1012
+
1013
+ content.classList.toggle('hidden');
1014
+ icon.classList.toggle('rotate-180');
1015
+ });
1016
+ });
1017
+
1018
+ // Word count display
1019
+ const wordCountSlider = document.querySelector('input[type="range"]');
1020
+ const wordCountDisplay = document.getElementById('wordCountDisplay');
1021
+
1022
+ wordCountSlider.addEventListener('input', function() {
1023
+ wordCountDisplay.textContent = `${this.value} words`;
1024
+ });
1025
+
1026
+ // Assignment modal
1027
+ const assignmentModal = document.getElementById('assignmentModal');
1028
+ const closeModalBtn = document.getElementById('closeModalBtn');
1029
+
1030
+ // Show modal when "Post an Assignment" is clicked (simplified for demo)
1031
+ document.querySelectorAll('button').forEach(btn => {
1032
+ if (btn.textContent.includes('Post an Assignment')) {
1033
+ btn.addEventListener('click', function() {
1034
+ assignmentModal.classList.remove('hidden');
1035
+ });
1036
+ }
1037
+ });
1038
+
1039
+ closeModalBtn.addEventListener('click', function() {
1040
+ assignmentModal.classList.add('hidden');
1041
+ });
1042
+
1043
+ // Sample assignment data
1044
+ const assignments = [
1045
+ {
1046
+ title: "Research Paper on Behavioral Psychology",
1047
+ subject: "Psychology",
1048
+ type: "Research Paper",
1049
+ due: "2023-12-15",
1050
+ grade: "A",
1051
+ words: 2500,
1052
+ bids: 8,
1053
+ budget: "$200",
1054
+ description: "Need a comprehensive research paper on the effects of social media on adolescent behavior. Must use at least 10 academic sources and follow APA formatting."
1055
+ },
1056
+ {
1057
+ title: "Comparative Analysis of Economic Systems",
1058
+ subject: "Economics",
1059
+ type: "Essay",
1060
+ due: "2023-11-30",
1061
+ grade: "B+",
1062
+ words: 1500,
1063
+ bids: 5,
1064
+ budget: "$120",
1065
+ description: "Compare and contrast capitalist, socialist, and mixed economic systems with real-world examples. Harvard citation style required."
1066
+ },
1067
+ {
1068
+ title: "Case Study: Tesla's Market Strategy",
1069
+ subject: "Business",
1070
+ type: "Case Study",
1071
+ due: "2023-12-05",
1072
+ grade: "A-",
1073
+ words: 2000,
1074
+ bids: 12,
1075
+ budget: "$180",
1076
+ description: "Analyze Tesla's market positioning and competitive advantages. Include recent financial data and use Chicago citation style."
1077
+ },
1078
+ {
1079
+ title: "Literary Analysis of 'The Great Gatsby'",
1080
+ subject: "Literature",
1081
+ type: "Essay",
1082
+ due: "2023-11-25",
1083
+ grade: "A",
1084
+ words: 1800,
1085
+ bids: 7,
1086
+ budget: "$150",
1087
+ description: "Focus on the theme of the American Dream in Fitzgerald's novel. MLA formatting required with close reading of selected passages."
1088
+ }
1089
+ ];
1090
+
1091
+ // Render assignment cards
1092
+ const assignmentList = document.getElementById('assignmentList');
1093
+
1094
+ assignments.forEach(assignment => {
1095
+ const card = document.createElement('div');
1096
+ card.className = 'assignment-card bg-white rounded-xl shadow-md p-6 transition cursor-pointer hover:border-indigo-300 border border-transparent';
1097
+ card.innerHTML = `
1098
+ <div class="flex flex-col md:flex-row md:justify-between">
1099
+ <div class="mb-4 md:mb-0">
1100
+ <h3 class="text-xl font-bold mb-2">${assignment.title}</h3>
1101
+ <div class="flex flex-wrap gap-2 mb-3">
1102
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">${assignment.subject}</span>
1103
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">${assignment.type}</span>
1104
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Due: ${new Date(assignment.due).toLocaleDateString()}</span>
1105
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Target: ${assignment.grade}</span>
1106
+ </div>
1107
+ <p class="text-gray-600">${assignment.description}</p>
1108
+ </div>
1109
+ <div class="md:pl-4 md:border-l md:border-gray-200 flex-shrink-0">
1110
+ <div class="mb-3">
1111
+ <span class="block text-2xl font-bold text-indigo-600">${assignment.budget}</span>
1112
+ <span class="text-sm text-gray-500">${assignment.words} words</span>
1113
+ </div>
1114
+ <div class="flex items-center mb-3">
1115
+ <i class="fas fa-user-edit text-indigo-500 mr-2"></i>
1116
+ <span class="text-sm">${assignment.bids} bids received</span>
1117
+ </div>
1118
+ <button class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View Details</button>
1119
+ </div>
1120
+ </div>
1121
+ `;
1122
+ assignmentList.appendChild(card);
1123
+ });
1124
+
1125
+ // Login/Signup buttons (simplified for demo)
1126
+ document.getElementById('loginBtn').addEventListener('click', function() {
1127
+ alert('Login functionality would be implemented here with proper authentication.');
1128
+ });
1129
+
1130
+ document.getElementById('signupBtn').addEventListener('click', function() {
1131
+ alert('Signup form would appear here with student/freelancer options.');
1132
+ });
1133
+ </script>
1134
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=steake/esl-buddy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1135
+ </html>