Hugging Face's logo

Spaces:
CLASHWEEK
/
clwtre
Running

App Files Community
CLASHWEEK commited on
Commit
bba0130
·
verified ·
1 Parent(s): 7315b09

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +747 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Clwtre
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: clwtre
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: green
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,747 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EduSphere - Комфортное обучение</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#7C3AED',
16
+ accent: '#A78BFA',
17
+ dark: '#1E1B4B',
18
+ light: '#F5F3FF',
19
+ teal: '#2DD4BF',
20
+ rose: '#F43F5E',
21
+ amber: '#F59E0B',
22
+ emerald: '#10B981',
23
+ sky: '#0EA5E9',
24
+ indigo: '#6366F1',
25
+ purple: '#8B5CF6',
26
+ pink: '#EC4899',
27
+ orange: '#F97316',
28
+ cyan: '#06B6D4',
29
+ lime: '#84CC16'
30
+ },
31
+ animation: {
32
+ 'bounce-slow': 'bounce 3s infinite',
33
+ 'pulse-slow': 'pulse 4s infinite',
34
+ 'float': 'float 6s ease-in-out infinite',
35
+ 'wave': 'wave 8s ease-in-out infinite',
36
+ },
37
+ keyframes: {
38
+ float: {
39
+ '0%, 100%': { transform: 'translateY(0)' },
40
+ '50%': { transform: 'translateY(-20px)' },
41
+ },
42
+ wave: {
43
+ '0%, 100%': { transform: 'rotate(-3deg)' },
44
+ '50%': { transform: 'rotate(3deg)' },
45
+ }
46
+ }
47
+ }
48
+ }
49
+ }
50
+ </script>
51
+ <style>
52
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
53
+
54
+ body {
55
+ font-family: 'Poppins', sans-serif;
56
+ background-color: #F5F3FF;
57
+ overflow-x: hidden;
58
+ }
59
+
60
+ .btn-hover {
61
+ transition: all 0.3s ease;
62
+ transform: translateY(0);
63
+ }
64
+
65
+ .btn-hover:hover {
66
+ transform: translateY(-3px);
67
+ box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4);
68
+ }
69
+
70
+ .card-hover {
71
+ transition: all 0.3s ease;
72
+ }
73
+
74
+ .card-hover:hover {
75
+ transform: translateY(-5px);
76
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
77
+ }
78
+
79
+ .subject-icon {
80
+ transition: all 0.5s ease;
81
+ }
82
+
83
+ .subject-icon:hover {
84
+ transform: scale(1.1) rotate(10deg);
85
+ }
86
+
87
+ .modal {
88
+ transition: all 0.3s ease;
89
+ opacity: 0;
90
+ visibility: hidden;
91
+ }
92
+
93
+ .modal.active {
94
+ opacity: 1;
95
+ visibility: visible;
96
+ }
97
+
98
+ .post-card {
99
+ transition: all 0.3s ease;
100
+ }
101
+
102
+ .post-card:hover {
103
+ transform: scale(1.02);
104
+ }
105
+
106
+ .blob {
107
+ position: absolute;
108
+ z-index: -1;
109
+ filter: blur(60px);
110
+ opacity: 0.3;
111
+ border-radius: 50%;
112
+ }
113
+
114
+ .blob-1 {
115
+ width: 400px;
116
+ height: 400px;
117
+ background: #4F46E5;
118
+ top: 10%;
119
+ left: 5%;
120
+ animation: float 8s ease-in-out infinite;
121
+ }
122
+
123
+ .blob-2 {
124
+ width: 500px;
125
+ height: 500px;
126
+ background: #7C3AED;
127
+ bottom: 5%;
128
+ right: 5%;
129
+ animation: float 10s ease-in-out infinite reverse;
130
+ }
131
+
132
+ .blob-3 {
133
+ width: 300px;
134
+ height: 300px;
135
+ background: #2DD4BF;
136
+ top: 60%;
137
+ left: 40%;
138
+ animation: float 12s ease-in-out infinite;
139
+ }
140
+
141
+ .nav-link {
142
+ position: relative;
143
+ }
144
+
145
+ .nav-link::after {
146
+ content: '';
147
+ position: absolute;
148
+ width: 0;
149
+ height: 3px;
150
+ bottom: -5px;
151
+ left: 0;
152
+ background-color: #4F46E5;
153
+ transition: width 0.3s ease;
154
+ border-radius: 3px;
155
+ }
156
+
157
+ .nav-link:hover::after {
158
+ width: 100%;
159
+ }
160
+
161
+ .input-field {
162
+ transition: all 0.3s ease;
163
+ }
164
+
165
+ .input-field:focus {
166
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
167
+ }
168
+
169
+ .file-upload:hover {
170
+ background-color: #6D28D9;
171
+ }
172
+
173
+ .file-upload input[type="file"] {
174
+ display: none;
175
+ }
176
+
177
+ .logo {
178
+ display: flex;
179
+ align-items: center;
180
+ animation: wave 8s ease-in-out infinite;
181
+ }
182
+
183
+ .logo-icon {
184
+ font-size: 2rem;
185
+ background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
186
+ -webkit-background-clip: text;
187
+ -webkit-text-fill-color: transparent;
188
+ }
189
+
190
+ .logo-text {
191
+ font-weight: 700;
192
+ background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%);
193
+ -webkit-background-clip: text;
194
+ -webkit-text-fill-color: transparent;
195
+ }
196
+
197
+ .gradient-text {
198
+ background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
199
+ -webkit-background-clip: text;
200
+ -webkit-text-fill-color: transparent;
201
+ }
202
+
203
+ .scrollbar-hide::-webkit-scrollbar {
204
+ display: none;
205
+ }
206
+
207
+ .scrollbar-hide {
208
+ -ms-overflow-style: none;
209
+ scrollbar-width: none;
210
+ }
211
+
212
+ .footer-link {
213
+ @apply text-gray-300 hover:text-white transition-colors duration-200;
214
+ }
215
+
216
+ .class-tab {
217
+ @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 whitespace-nowrap;
218
+ }
219
+
220
+ .active-tab {
221
+ @apply bg-primary text-white shadow-md;
222
+ }
223
+
224
+ .inactive-tab {
225
+ @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
226
+ }
227
+
228
+ .glass-effect {
229
+ background: rgba(255, 255, 255, 0.8);
230
+ backdrop-filter: blur(10px);
231
+ -webkit-backdrop-filter: blur(10px);
232
+ }
233
+
234
+ .floating-btn {
235
+ box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
236
+ animation: pulse-slow 2.5s infinite;
237
+ }
238
+
239
+ .progress-bar {
240
+ height: 6px;
241
+ border-radius: 3px;
242
+ background-color: #E5E7EB;
243
+ }
244
+
245
+ .progress-fill {
246
+ height: 100%;
247
+ border-radius: 3px;
248
+ background: linear-gradient(90deg, #4F46E5, #7C3AED);
249
+ transition: width 0.5s ease;
250
+ }
251
+ </style>
252
+ </head>
253
+ <body>
254
+ <!-- Blob backgrounds -->
255
+ <div class="blob blob-1"></div>
256
+ <div class="blob blob-2"></div>
257
+ <div class="blob blob-3"></div>
258
+
259
+ <!-- Navigation -->
260
+ <nav class="glass-effect shadow-sm sticky top-0 z-50">
261
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
262
+ <div class="flex justify-between h-16">
263
+ <div class="flex items-center">
264
+ <a href="#" class="logo">
265
+ <i class="fas fa-graduation-cap logo-icon mr-2"></i>
266
+ <span class="logo-text text-xl">EduSphere</span>
267
+ </a>
268
+ </div>
269
+ <div class="hidden md:flex items-center space-x-8">
270
+ <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Главная</a>
271
+ <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Предметы</a>
272
+ <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Расписание</a>
273
+ <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Задания</a>
274
+ <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Оценки</a>
275
+ </div>
276
+ <div class="flex items-center">
277
+ <div class="relative">
278
+ <button class="p-1 rounded-full text-gray-400 hover:text-primary focus:outline-none">
279
+ <i class="fas fa-bell text-lg"></i>
280
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
281
+ </button>
282
+ </div>
283
+ <div class="ml-4 relative">
284
+ <button class="flex items-center text-sm rounded-full focus:outline-none">
285
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </nav>
292
+
293
+ <!-- Main content -->
294
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
295
+ <!-- Class tabs -->
296
+ <div class="flex space-x-2 overflow-x-auto pb-4 scrollbar-hide">
297
+ <button class="class-tab active-tab">1 класс</button>
298
+ <button class="class-tab inactive-tab">2 класс</button>
299
+ <button class="class-tab inactive-tab">3 класс</button>
300
+ <button class="class-tab inactive-tab">4 класс</button>
301
+ <button class="class-tab inactive-tab">5 класс</button>
302
+ <button class="class-tab inactive-tab">6 класс</button>
303
+ <button class="class-tab inactive-tab">7 класс</button>
304
+ <button class="class-tab inactive-tab">8 класс</button>
305
+ <button class="class-tab inactive-tab">9 класс</button>
306
+ <button class="class-tab inactive-tab">10 класс</button>
307
+ <button class="class-tab inactive-tab">11 класс</button>
308
+ </div>
309
+
310
+ <!-- Hero section -->
311
+ <section class="mt-8 glass-effect rounded-xl shadow-sm p-8">
312
+ <div class="flex flex-col md:flex-row items-center">
313
+ <div class="md:w-1/2 mb-6 md:mb-0">
314
+ <h1 class="text-4xl font-bold text-gray-900 mb-4">Добро пожаловать в <span class="gradient-text">EduSphere</span></h1>
315
+ <p class="text-gray-600 mb-6 text-lg">Инновационная образовательная платформа для всех классов школы с 1 по 11.</p>
316
+ <div class="flex space-x-4">
317
+ <button class="btn-hover bg-primary text-white px-6 py-3 rounded-lg font-medium flex items-center">
318
+ <i class="fas fa-rocket mr-2"></i> Начать обучение
319
+ </button>
320
+ <button class="btn-hover border border-primary text-primary px-6 py-3 rounded-lg font-medium flex items-center">
321
+ <i class="fas fa-info-circle mr-2"></i> Узнать больше
322
+ </button>
323
+ </div>
324
+ </div>
325
+ <div class="md:w-1/2 flex justify-center">
326
+ <img src="https://cdn-icons-png.flaticon.com/512/3132/3132693.png" alt="Learning illustration" class="w-72 h-72 object-contain">
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Stats section -->
332
+ <section class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
333
+ <div class="glass-effect rounded-xl p-6 shadow-sm">
334
+ <div class="flex items-center">
335
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
336
+ <i class="fas fa-book-open text-xl"></i>
337
+ </div>
338
+ <div>
339
+ <p class="text-gray-500 text-sm">Предметов</p>
340
+ <p class="text-2xl font-bold text-gray-900">12</p>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="glass-effect rounded-xl p-6 shadow-sm">
346
+ <div class="flex items-center">
347
+ <div class="p-3 rounded-full bg-emerald-100 text-emerald-600 mr-4">
348
+ <i class="fas fa-tasks text-xl"></i>
349
+ </div>
350
+ <div>
351
+ <p class="text-gray-500 text-sm">Заданий</p>
352
+ <p class="text-2xl font-bold text-gray-900">47</p>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="glass-effect rounded-xl p-6 shadow-sm">
358
+ <div class="flex items-center">
359
+ <div class="p-3 rounded-full bg-amber-100 text-amber-600 mr-4">
360
+ <i class="fas fa-star text-xl"></i>
361
+ </div>
362
+ <div>
363
+ <p class="text-gray-500 text-sm">Средний балл</p>
364
+ <p class="text-2xl font-bold text-gray-900">4.6</p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="glass-effect rounded-xl p-6 shadow-sm">
370
+ <div class="flex items-center">
371
+ <div class="p-3 rounded-full bg-sky-100 text-sky-600 mr-4">
372
+ <i class="fas fa-calendar-alt text-xl"></i>
373
+ </div>
374
+ <div>
375
+ <p class="text-gray-500 text-sm">Дней до ЕГЭ</p>
376
+ <p class="text-2xl font-bold text-gray-900">254</p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Subjects section -->
383
+ <section class="mt-12">
384
+ <div class="flex justify-between items-center mb-6">
385
+ <h2 class="text-2xl font-bold text-gray-900">Предметы</h2>
386
+ <button class="text-primary font-medium flex items-center">
387
+ Смотреть все <i class="fas fa-chevron-right ml-1 text-sm"></i>
388
+ </button>
389
+ </div>
390
+
391
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
392
+ <!-- Subject card 1 -->
393
+ <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center">
394
+ <div class="subject-icon w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-3">
395
+ <i class="fas fa-square-root-alt text-indigo-600 text-2xl"></i>
396
+ </div>
397
+ <h3 class="font-medium text-gray-900 mb-1">Математика</h3>
398
+ <p class="text-xs text-gray-500">12 заданий</p>
399
+ <div class="w-full mt-3 progress-bar">
400
+ <div class="progress-fill" style="width: 85%"></div>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Subject card 2 -->
405
+ <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center">
406
+ <div class="subject-icon w-16 h-16 rounded-full bg-rose-100 flex items-center justify-center mb-3">
407
+ <i class="fas fa-language text-rose-600 text-2xl"></i>
408
+ </div>
409
+ <h3 class="font-medium text-gray-900 mb-1">Русский язык</h3>
410
+ <p class="text-xs text-gray-500">8 заданий</p>
411
+ <div class="w-full mt-3 progress-bar">
412
+ <div class="progress-fill" style="width: 70%"></div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Subject card 3 -->
417
+ <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center">
418
+ <div class="subject-icon w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mb-3">
419
+ <i class="fas fa-book text-emerald-600 text-2xl"></i>
420
+ </div>
421
+ <h3 class="font-medium text-gray-900 mb-1">Литература</h3>
422
+ <p class="text-xs text-gray-500">5 заданий</p>
423
+ <div class="w-full mt-3 progress-bar">
424
+ <div class="progress-fill" style="width: 60%"></div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Subject card 4 -->
429
+ <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center">
430
+ <div class="subject-icon w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3">
431
+ <i class="fas fa-globe-europe text-sky-600 text-2xl"></i>
432
+ </div>
433
+ <h3 class="font-medium text-gray-900 mb-1">География</h3>
434
+ <p class="text-xs text-gray-500">3 задания</p>
435
+ <div class="w-full mt-3 progress-bar">
436
+ <div class="progress-fill" style="width: 40%"></div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Subject card 5 -->
441
+ <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center">
442
+ <div class="subject-icon w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mb-3">
443
+ <i class="fas fa-atom text-amber-600 text-2xl"></i>
444
+ </div>
445
+ <h3 class="font-medium text-gray-900 mb-1">Физика</h3>
446
+ <p class="text-xs text-gray-500">6 заданий</p>
447
+ <div class="w-full mt-3 progress-bar">
448
+ <div class="progress-fill" style="width: 75%"></div>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Subject card 6 -->
453
+ <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center">
454
+ <div class="subject-icon w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-3">
455
+ <i class="fas fa-dna text-purple-600 text-2xl"></i>
456
+ </div>
457
+ <h3 class="font-medium text-gray-900 mb-1">Биология</h3>
458
+ <p class="text-xs text-gray-500">4 задания</p>
459
+ <div class="w-full mt-3 progress-bar">
460
+ <div class="progress-fill" style="width: 50%"></div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </section>
465
+
466
+ <!-- Recent assignments -->
467
+ <section class="mt-12">
468
+ <div class="flex justify-between items-center mb-6">
469
+ <h2 class="text-2xl font-bold text-gray-900">Последние задания</h2>
470
+ <button class="text-primary font-medium flex items-center">
471
+ Смотреть все <i class="fas fa-chevron-right ml-1 text-sm"></i>
472
+ </button>
473
+ </div>
474
+
475
+ <div class="glass-effect rounded-xl shadow-sm overflow-hidden">
476
+ <!-- Assignment 1 -->
477
+ <div class="post-card p-6 border-b border-gray-100 hover:bg-gray-50/50">
478
+ <div class="flex items-start">
479
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
480
+ <i class="fas fa-square-root-alt text-indigo-600 text-xl"></i>
481
+ </div>
482
+ <div class="flex-1 min-w-0">
483
+ <div class="flex justify-between items-start">
484
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Домашнее задание по математике</h3>
485
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
486
+ Срочно
487
+ </span>
488
+ </div>
489
+ <p class="text-sm text-gray-500 mb-2">Решить задачи №15-25 из учебника, страница 45</p>
490
+ <div class="flex items-center text-xs text-gray-500">
491
+ <span class="mr-4 flex items-center"><i class="fas fa-calendar-day mr-1"></i> Срок сдачи: завтра</span>
492
+ <span class="flex items-center"><i class="fas fa-clock mr-1"></i> Осталось: 1 день</span>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Assignment 2 -->
499
+ <div class="post-card p-6 border-b border-gray-100 hover:bg-gray-50/50">
500
+ <div class="flex items-start">
501
+ <div class="flex-shrink-0 bg-rose-100 rounded-lg p-3 mr-4">
502
+ <i class="fas fa-language text-rose-600 text-xl"></i>
503
+ </div>
504
+ <div class="flex-1 min-w-0">
505
+ <div class="flex justify-between items-start">
506
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Сочинение по русскому языку</h3>
507
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
508
+ Средний приоритет
509
+ </span>
510
+ </div>
511
+ <p class="text-sm text-gray-500 mb-2">Тема: "Как я провел лето", объем 2 страницы</p>
512
+ <div class="flex items-center text-xs text-gray-500">
513
+ <span class="mr-4 flex items-center"><i class="fas fa-calendar-day mr-1"></i> Срок сдачи: 15.09.2023</span>
514
+ <span class="flex items-center"><i class="fas fa-clock mr-1"></i> Осталось: 3 дня</span>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Assignment 3 -->
521
+ <div class="post-card p-6 hover:bg-gray-50/50">
522
+ <div class="flex items-start">
523
+ <div class="flex-shrink-0 bg-sky-100 rounded-lg p-3 mr-4">
524
+ <i class="fas fa-globe-europe text-sky-600 text-xl"></i>
525
+ </div>
526
+ <div class="flex-1 min-w-0">
527
+ <div class="flex justify-between items-start">
528
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Проект по географии</h3>
529
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
530
+ Низкий приоритет
531
+ </span>
532
+ </div>
533
+ <p class="text-sm text-gray-500 mb-2">Подготовить презентацию о климатических поясах Земли</p>
534
+ <div class="flex items-center text-xs text-gray-500">
535
+ <span class="mr-4 flex items-center"><i class="fas fa-calendar-day mr-1"></i> Срок сдачи: 20.09.2023</span>
536
+ <span class="flex items-center"><i class="fas fa-clock mr-1"></i> Осталось: 8 дней</span>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </section>
543
+
544
+ <!-- Grades section -->
545
+ <section class="mt-12">
546
+ <div class="flex justify-between items-center mb-6">
547
+ <h2 class="text-2xl font-bold text-gray-900">Последние оценки</h2>
548
+ <button class="text-primary font-medium flex items-center">
549
+ Смотреть все <i class="fas fa-chevron-right ml-1 text-sm"></i>
550
+ </button>
551
+ </div>
552
+
553
+ <div class="glass-effect rounded-xl shadow-sm overflow-hidden">
554
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
555
+ <!-- Grade card 1 -->
556
+ <div class="card-hover bg-white border border-gray-100 rounded-lg p-5 shadow-xs">
557
+ <div class="flex items-center mb-4">
558
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-3">
559
+ <i class="fas fa-square-root-alt text-indigo-600 text-lg"></i>
560
+ </div>
561
+ <div>
562
+ <h3 class="text-lg font-medium text-gray-900">Математика</h3>
563
+ <p class="text-sm text-gray-500">Алгебра и геометрия</p>
564
+ </div>
565
+ </div>
566
+ <div class="flex justify-between items-center">
567
+ <div>
568
+ <p class="text-sm text-gray-500">Последняя оценка</p>
569
+ <p class="text-2xl font-bold text-primary">5</p>
570
+ </div>
571
+ <div class="text-right">
572
+ <p class="text-sm text-gray-500">Средний балл</p>
573
+ <p class="text-xl font-bold text-gray-900">4.7</p>
574
+ </div>
575
+ </div>
576
+ <div class="mt-4">
577
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
578
+ <span>Прогресс</span>
579
+ <span>85%</span>
580
+ </div>
581
+ <div class="w-full progress-bar">
582
+ <div class="progress-fill" style="width: 85%"></div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <!-- Grade card 2 -->
588
+ <div class="card-hover bg-white border border-gray-100 rounded-lg p-5 shadow-xs">
589
+ <div class="flex items-center mb-4">
590
+ <div class="flex-shrink-0 bg-rose-100 rounded-lg p-3 mr-3">
591
+ <i class="fas fa-language text-rose-600 text-lg"></i>
592
+ </div>
593
+ <div>
594
+ <h3 class="text-lg font-medium text-gray-900">Русский язык</h3>
595
+ <p class="text-sm text-gray-500">Грамматика и орфография</p>
596
+ </div>
597
+ </div>
598
+ <div class="flex justify-between items-center">
599
+ <div>
600
+ <p class="text-sm text-gray-500">Последняя оценка</p>
601
+ <p class="text-2xl font-bold text-primary">4</p>
602
+ </div>
603
+ <div class="text-right">
604
+ <p class="text-sm text-gray-500">Средний балл</p>
605
+ <p class="text-xl font-bold text-gray-900">4.3</p>
606
+ </div>
607
+ </div>
608
+ <div class="mt-4">
609
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
610
+ <span>Прогресс</span>
611
+ <span>70%</span>
612
+ </div>
613
+ <div class="w-full progress-bar">
614
+ <div class="progress-fill" style="width: 70%"></div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Grade card 3 -->
620
+ <div class="card-hover bg-white border border-gray-100 rounded-lg p-5 shadow-xs">
621
+ <div class="flex items-center mb-4">
622
+ <div class="flex-shrink-0 bg-emerald-100 rounded-lg p-3 mr-3">
623
+ <i class="fas fa-book text-emerald-600 text-lg"></i>
624
+ </div>
625
+ <div>
626
+ <h3 class="text-lg font-medium text-gray-900">Литература</h3>
627
+ <p class="text-sm text-gray-500">Русская классика</p>
628
+ </div>
629
+ </div>
630
+ <div class="flex justify-between items-center">
631
+ <div>
632
+ <p class="text-sm text-gray-500">Последняя оценка</p>
633
+ <p class="text-2xl font-bold text-primary">5</p>
634
+ </div>
635
+ <div class="text-right">
636
+ <p class="text-sm text-gray-500">Средний балл</p>
637
+ <p class="text-xl font-bold text-gray-900">4.8</p>
638
+ </div>
639
+ </div>
640
+ <div class="mt-4">
641
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
642
+ <span>Прогресс</span>
643
+ <span>60%</span>
644
+ </div>
645
+ <div class="w-full progress-bar">
646
+ <div class="progress-fill" style="width: 60%"></div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </section>
653
+ </main>
654
+
655
+ <!-- Floating action button -->
656
+ <button class="fixed bottom-8 right-8 bg-primary text-white rounded-full p-4 shadow-lg floating-btn">
657
+ <i class="fas fa-plus text-xl"></i>
658
+ </button>
659
+
660
+ <!-- Footer -->
661
+ <footer class="bg-gradient-to-r from-primary to-secondary mt-16 py-12">
662
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
663
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
664
+ <div>
665
+ <a href="#" class="logo">
666
+ <i class="fas fa-graduation-cap logo-icon mr-2"></i>
667
+ <span class="logo-text text-xl text-white">EduSphere</span>
668
+ </a>
669
+ <p class="mt-4 text-gray-300 text-sm">Инновационная образовательная платформа для всех классов школы с 1 по 11.</p>
670
+ </div>
671
+ <div>
672
+ <h3 class="text-white font-medium mb-4">Навигация</h3>
673
+ <ul class="space-y-2">
674
+ <li><a href="#" class="footer-link">Главная</a></li>
675
+ <li><a href="#" class="footer-link">Предметы</a></li>
676
+ <li><a href="#" class="footer-link">Расписание</a></li>
677
+ <li><a href="#" class="footer-link">Задания</a></li>
678
+ <li><a href="#" class="footer-link">Оценки</a></li>
679
+ </ul>
680
+ </div>
681
+ <div>
682
+ <h3 class="text-white font-medium mb-4">Контакты</h3>
683
+ <ul class="space-y-2">
684
+ <li class="flex items-center">
685
+ <i class="fas fa-envelope text-gray-300 mr-2"></i>
686
+ <a href="mailto:info@edusphere.com" class="footer-link">info@edusphere.com</a>
687
+ </li>
688
+ <li class="flex items-center">
689
+ <i class="fas fa-phone-alt text-gray-300 mr-2"></i>
690
+ <a href="tel:+78005553535" class="footer-link">+7 (800) 555-35-35</a>
691
+ </li>
692
+ <li class="flex items-center">
693
+ <i class="fas fa-map-marker-alt text-gray-300 mr-2"></i>
694
+ <span class="text-gray-300">Москва, ул. Образования, 1</span>
695
+ </li>
696
+ </ul>
697
+ </div>
698
+ <div>
699
+ <h3 class="text-white font-medium mb-4">Социальные сети</h3>
700
+ <div class="flex space-x-4">
701
+ <a href="#" class="footer-link text-xl"><i class="fab fa-vk"></i></a>
702
+ <a href="#" class="footer-link text-xl"><i class="fab fa-telegram"></i></a>
703
+ <a href="#" class="footer-link text-xl"><i class="fab fa-youtube"></i></a>
704
+ <a href="#" class="footer-link text-xl"><i class="fab fa-instagram"></i></a>
705
+ </div>
706
+ <div class="mt-6">
707
+ <button class="bg-white text-primary px-4 py-2 rounded-lg font-medium flex items-center">
708
+ <i class="fas fa-paper-plane mr-2"></i> Связаться с нами
709
+ </button>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
714
+ <p class="text-gray-300 text-sm">© 2023 EduSphere. Все права защищены.</p>
715
+ <div class="flex space-x-6 mt-4 md:mt-0">
716
+ <a href="#" class="footer-link text-sm">Политика конфиденциальности</a>
717
+ <a href="#" class="footer-link text-sm">Условия использования</a>
718
+ <a href="#" class="footer-link text-sm">Помощь</a>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </footer>
723
+
724
+ <script>
725
+ // Class tabs functionality
726
+ document.querySelectorAll('.class-tab').forEach(tab => {
727
+ tab.addEventListener('click', function() {
728
+ document.querySelectorAll('.class-tab').forEach(t => {
729
+ t.classList.remove('active-tab');
730
+ t.classList.add('inactive-tab');
731
+ });
732
+ this.classList.remove('inactive-tab');
733
+ this.classList.add('active-tab');
734
+ });
735
+ });
736
+
737
+ // Floating button animation
738
+ const floatingBtn = document.querySelector('.floating-btn');
739
+ setInterval(() => {
740
+ floatingBtn.style.transform = 'translateY(-5px)';
741
+ setTimeout(() => {
742
+ floatingBtn.style.transform = 'translateY(0)';
743
+ }, 500);
744
+ }, 2500);
745
+ </script>
746
+ <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=CLASHWEEK/clwtre" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
747
+ </html>