Hugging Face's logo

Spaces:
azizayed
/
test
Running

App Files Community
azizayed commited on
Commit
427b085
·
verified ·
1 Parent(s): 67bf3fb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +402 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: red
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: test
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,402 @@
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>Studee - AI-Powered Personalized Learning Platform</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
12
+ }
13
+
14
+ .feature-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
+ }
18
+
19
+ .testimonial-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+
23
+ .testimonial-card:hover {
24
+ transform: scale(1.03);
25
+ }
26
+
27
+ .flowchart-step {
28
+ position: relative;
29
+ z-index: 1;
30
+ transition: all 0.3s ease;
31
+ }
32
+
33
+ .flowchart-step:hover {
34
+ transform: translateY(-5px);
35
+ }
36
+
37
+ .flowchart-step:not(:last-child):after {
38
+ content: "";
39
+ position: absolute;
40
+ bottom: -30px;
41
+ left: 50%;
42
+ transform: translateX(-50%);
43
+ width: 2px;
44
+ height: 30px;
45
+ background: linear-gradient(to bottom, #818cf8, #a5b4fc);
46
+ }
47
+
48
+ .flowchart-arrow {
49
+ position: absolute;
50
+ bottom: -15px;
51
+ left: 50%;
52
+ transform: translateX(-50%);
53
+ color: #818cf8;
54
+ }
55
+
56
+ @media (min-width: 768px) {
57
+ .flowchart-step:not(:last-child):after {
58
+ bottom: 50%;
59
+ left: 100%;
60
+ transform: translateY(50%);
61
+ width: 30px;
62
+ height: 2px;
63
+ }
64
+
65
+ .flowchart-arrow {
66
+ bottom: 50%;
67
+ left: calc(100% + 10px);
68
+ transform: translateY(50%) rotate(90deg);
69
+ }
70
+ }
71
+
72
+ .step-icon {
73
+ width: 60px;
74
+ height: 60px;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ border-radius: 50%;
79
+ margin: 0 auto 15px;
80
+ font-size: 24px;
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .flowchart-step:hover .step-icon {
85
+ transform: scale(1.1);
86
+ }
87
+
88
+ .pricing-card:hover {
89
+ transform: translateY(-10px);
90
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
91
+ }
92
+
93
+ .input-highlight {
94
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
95
+ }
96
+
97
+ .input-highlight:focus {
98
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.8);
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="font-sans antialiased text-gray-900">
103
+ <!-- Navigation -->
104
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
105
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
+ <div class="flex justify-between h-16">
107
+ <div class="flex items-center">
108
+ <div class="flex-shrink-0 flex items-center">
109
+ <i class="fas fa-graduation-cap text-indigo-600 text-2xl mr-2"></i>
110
+ <span class="text-xl font-bold text-gray-900">Studee</span>
111
+ </div>
112
+ </div>
113
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
114
+ <a href="#features" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Features</a>
115
+ <a href="#how-it-works" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">How it works</a>
116
+ <a href="#testimonials" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Testimonials</a>
117
+ <a href="#pricing" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Pricing</a>
118
+ </div>
119
+ <div class="flex items-center">
120
+ <a href="#" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">Get Started</a>
121
+ </div>
122
+ <div class="-mr-2 flex items-center md:hidden">
123
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
124
+ <span class="sr-only">Open main menu</span>
125
+ <i class="fas fa-bars"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </nav>
131
+
132
+ <!-- Hero Section -->
133
+ <div class="hero-gradient">
134
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
135
+ <div class="md:flex md:items-center md:justify-between">
136
+ <div class="md:w-1/2 text-center md:text-left">
137
+ <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight">
138
+ AI-Powered Personalized Learning
139
+ </h1>
140
+ <p class="mt-4 text-xl text-indigo-100 max-w-lg">
141
+ Transform any educational content into tailored study materials optimized for each student's learning style.
142
+ </p>
143
+ <div class="mt-8 flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
144
+ <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 shadow-sm">
145
+ Try for free
146
+ </a>
147
+ <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 shadow-sm">
148
+ Watch demo
149
+ </a>
150
+ </div>
151
+ </div>
152
+ <div class="mt-12 md:mt-0 md:w-1/2 flex justify-center">
153
+ <div class="relative w-full max-w-md">
154
+ <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
155
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
156
+ <div class="absolute top-0 left-20 w-24 h-24 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
157
+ <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
158
+ <div class="p-4 bg-gray-50 border-b border-gray-200">
159
+ <div class="flex space-x-2">
160
+ <div class="w-3 h-3 rounded-full bg-red-400"></div>
161
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
162
+ <div class="w-3 h-3 rounded-full bg-green-400"></div>
163
+ </div>
164
+ </div>
165
+ <div class="p-6">
166
+ <div class="flex items-center mb-4">
167
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3">
168
+ <i class="fas fa-book"></i>
169
+ </div>
170
+ <div>
171
+ <h3 class="font-medium text-gray-900">Biology 101</h3>
172
+ <p class="text-sm text-gray-500">Uploaded 2 hours ago</p>
173
+ </div>
174
+ </div>
175
+ <div class="space-y-4">
176
+ <div class="bg-indigo-50 p-4 rounded-lg">
177
+ <h4 class="font-medium text-indigo-800 mb-2">Key Concepts Identified</h4>
178
+ <div class="flex flex-wrap gap-2">
179
+ <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">Cell Structure</span>
180
+ <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">DNA Replication</span>
181
+ <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">Mitosis</span>
182
+ </div>
183
+ </div>
184
+ <div class="bg-white border border-gray-200 p-4 rounded-lg">
185
+ <h4 class="font-medium text-gray-900 mb-2">Recommended Materials</h4>
186
+ <div class="space-y-2">
187
+ <div class="flex items-center">
188
+ <i class="fas fa-file-alt text-indigo-500 mr-2"></i>
189
+ <span class="text-sm">Condensed Notes (3 pages)</span>
190
+ </div>
191
+ <div class="flex items-center">
192
+ <i class="fas fa-project-diagram text-purple-500 mr-2"></i>
193
+ <span class="text-sm">Mind Map: Cell Division</span>
194
+ </div>
195
+ <div class="flex items-center">
196
+ <i class="fas fa-layer-group text-blue-500 mr-2"></i>
197
+ <span class="text-sm">15 Flashcards</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Trusted By Section -->
211
+ <div class="bg-gray-50 py-12">
212
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
213
+ <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">
214
+ Trusted by educators at
215
+ </p>
216
+ <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
217
+ <div class="col-span-1 flex justify-center items-center">
218
+ <img class="h-12" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Harvard_University_logo.svg" alt="Harvard">
219
+ </div>
220
+ <div class="col-span-1 flex justify-center items-center">
221
+ <img class="h-8" src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Stanford_University_wordmark_2003.svg" alt="Stanford">
222
+ </div>
223
+ <div class="col-span-1 flex justify-center items-center">
224
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/7/7b/MIT_Logo.svg" alt="MIT">
225
+ </div>
226
+ <div class="col-span-1 flex justify-center items-center">
227
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/4/44/University_of_California%2C_Berkeley_logo.svg" alt="UC Berkeley">
228
+ </div>
229
+ <div class="col-span-1 flex justify-center items-center">
230
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/9/93/University_of_Toronto_Logo.svg" alt="University of Toronto">
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Features Section -->
237
+ <section id="features" class="py-20 bg-white">
238
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
239
+ <div class="text-center mb-16">
240
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
241
+ Designed for modern education
242
+ </h2>
243
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
244
+ Harness the power of AI to create personalized learning experiences at scale
245
+ </p>
246
+ </div>
247
+
248
+ <div class="grid md:grid-cols-3 gap-8">
249
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out">
250
+ <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center text-indigo-600 mb-6">
251
+ <i class="fas fa-brain text-2xl"></i>
252
+ </div>
253
+ <h3 class="text-xl font-medium text-gray-900 mb-3">AI-Powered Analysis</h3>
254
+ <p class="text-gray-600">
255
+ Our advanced algorithms identify key concepts, relationships, and knowledge gaps in any educational material.
256
+ </p>
257
+ </div>
258
+
259
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out">
260
+ <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mb-6">
261
+ <i class="fas fa-user-graduate text-2xl"></i>
262
+ </div>
263
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Personalized Learning</h3>
264
+ <p class="text-gray-600">
265
+ Adapts to each student's learning style, pace, and prior knowledge for optimal knowledge retention.
266
+ </p>
267
+ </div>
268
+
269
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out">
270
+ <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6">
271
+ <i class="fas fa-chart-line text-2xl"></i>
272
+ </div>
273
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Progress Tracking</h3>
274
+ <p class="text-gray-600">
275
+ Detailed analytics help educators monitor student progress and identify areas needing attention.
276
+ </p>
277
+ </div>
278
+
279
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out">
280
+ <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mb-6">
281
+ <i class="fas fa-file-upload text-2xl"></i>
282
+ </div>
283
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Multi-Format Support</h3>
284
+ <p class="text-gray-600">
285
+ Works with PDFs, PowerPoints, Word docs, videos, audio recordings, and even handwritten notes.
286
+ </p>
287
+ </div>
288
+
289
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out">
290
+ <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600 mb-6">
291
+ <i class="fas fa-users text-2xl"></i>
292
+ </div>
293
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Collaborative Features</h3>
294
+ <p class="text-gray-600">
295
+ Share materials with colleagues, create group study sessions, and collaborate in real-time.
296
+ </p>
297
+ </div>
298
+
299
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out">
300
+ <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center text-red-600 mb-6">
301
+ <i class="fas fa-mobile-alt text-2xl"></i>
302
+ </div>
303
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Mobile Friendly</h3>
304
+ <p class="text-gray-600">
305
+ Study on the go with our fully responsive platform that works seamlessly across all devices.
306
+ </p>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <!-- How It Works Section - Updated with Flowchart -->
313
+ <section id="how-it-works" class="py-20 bg-gray-50">
314
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
315
+ <div class="text-center mb-16">
316
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
317
+ How Studee works
318
+ </h2>
319
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
320
+ Transforming educational content in just 3 simple steps
321
+ </p>
322
+ </div>
323
+
324
+ <!-- Flowchart -->
325
+ <div class="relative">
326
+ <div class="grid md:grid-cols-3 gap-8 md:gap-4">
327
+ <!-- Step 1 -->
328
+ <div class="flowchart-step bg-white p-8 rounded-xl shadow-md border border-gray-100 text-center">
329
+ <div class="step-icon bg-indigo-100 text-indigo-600">
330
+ <i class="fas fa-cloud-upload-alt"></i>
331
+ </div>
332
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Upload Materials</h3>
333
+ <p class="text-gray-600">
334
+ Drag and drop your lecture notes, PDFs, videos, or audio files. We accept any format.
335
+ </p>
336
+ <i class="fas fa-arrow-down flowchart-arrow"></i>
337
+ </div>
338
+
339
+ <!-- Step 2 -->
340
+ <div class="flowchart-step bg-white p-8 rounded-xl shadow-md border border-gray-100 text-center">
341
+ <div class="step-icon bg-purple-100 text-purple-600">
342
+ <i class="fas fa-cogs"></i>
343
+ </div>
344
+ <h3 class="text-xl font-medium text-gray-900 mb-3">AI Processing</h3>
345
+ <p class="text-gray-600">
346
+ Our AI analyzes content, identifies key concepts, and structures information optimally.
347
+ </p>
348
+ <i class="fas fa-arrow-down flowchart-arrow"></i>
349
+ </div>
350
+
351
+ <!-- Step 3 -->
352
+ <div class="flowchart-step bg-white p-8 rounded-xl shadow-md border border-gray-100 text-center">
353
+ <div class="step-icon bg-blue-100 text-blue-600">
354
+ <i class="fas fa-graduation-cap"></i>
355
+ </div>
356
+ <h3 class="text-xl font-medium text-gray-900 mb-3">Personalized Output</h3>
357
+ <p class="text-gray-600">
358
+ Get tailored study materials adapted to each student's learning style and progress.
359
+ </p>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Connecting lines background (for mobile) -->
364
+ <div class="md:hidden absolute left-1/2 top-0 h-full w-px bg-gradient-to-b from-indigo-300 to-blue-300 -ml-px -z-10"></div>
365
+ </div>
366
+
367
+ <!-- Output Types Visualization -->
368
+ <div class="mt-16">
369
+ <h3 class="text-center text-2xl font-bold text-gray-900 mb-8">What you'll get</h3>
370
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
371
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center">
372
+ <div class="text-indigo-500 mb-2">
373
+ <i class="fas fa-file-alt text-2xl"></i>
374
+ </div>
375
+ <p class="text-sm font-medium">Condensed Notes</p>
376
+ </div>
377
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center">
378
+ <div class="text-purple-500 mb-2">
379
+ <i class="fas fa-project-diagram text-2xl"></i>
380
+ </div>
381
+ <p class="text-sm font-medium">Mind Maps</p>
382
+ </div>
383
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center">
384
+ <div class="text-blue-500 mb-2">
385
+ <i class="fas fa-layer-group text-2xl"></i>
386
+ </div>
387
+ <p class="text-sm font-medium">Flashcards</p>
388
+ </div>
389
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center">
390
+ <div class="text-green-500 mb-2">
391
+ <i class="fas fa-question-circle text-2xl"></i>
392
+ </div>
393
+ <p class="text-sm font-medium">MCQs</p>
394
+ </div>
395
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center">
396
+ <div class="text-yellow-500 mb-2">
397
+ <i class="fas fa-pen-fancy text-2xl"></i>
398
+ </div>
399
+ <p class="text-sm font-medium">Open Questions</p>
400
+ </div>
401
+ <div class
402
+ </html>