Hugging Face's logo

Spaces:
azizayed
/
test
Running

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

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +11 -132
index.html CHANGED
@@ -97,6 +97,16 @@
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">
@@ -267,136 +277,5 @@
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>
 
97
  .input-highlight:focus {
98
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.8);
99
  }
100
+
101
+ @keyframes float {
102
+ 0% { transform: translateY(0px); }
103
+ 50% { transform: translateY(-10px); }
104
+ 100% { transform: translateY(0px); }
105
+ }
106
+
107
+ .floating {
108
+ animation: float 3s ease-in-out infinite;
109
+ }
110
  </style>
111
  </head>
112
  <body class="font-sans antialiased text-gray-900">
 
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="
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  </html>