Hugging Face's logo

Spaces:
CLASHWEEK
/
clashweek-site
Running

App Files Community
CLASHWEEK commited on
Commit
d15d4ae
·
verified ·
1 Parent(s): 7c91d90

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1563 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Clashweek Site
3
- emoji: 🏢
4
  colorFrom: blue
5
- colorTo: purple
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: clashweek-site
3
+ emoji: 🐳
4
  colorFrom: blue
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,1563 @@
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>Учебник - Школьные материалы онлайн</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* Базовые стили и переменные */
10
+ :root {
11
+ --primary: #4f46e5;
12
+ --secondary: #10b981;
13
+ --math: #ef4444;
14
+ --science: #3b82f6;
15
+ --literature: #8b5cf6;
16
+ --history: #f59e0b;
17
+ --foreign: #ec4899;
18
+ --art: #f472b6;
19
+ --music: #c084fc;
20
+ --tech: #22d3ee;
21
+ --sport: #84cc16;
22
+ --light: #f8fafc;
23
+ --dark: #1e293b;
24
+ --gray: #64748b;
25
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
26
+ --transition: all 0.3s ease;
27
+ --border-radius: 14px;
28
+ }
29
+
30
+ [data-theme="dark"] {
31
+ --primary: #6366f1;
32
+ --secondary: #10b981;
33
+ --light: #1e293b;
34
+ --dark: #f8fafc;
35
+ --gray: #94a3b8;
36
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
37
+ }
38
+
39
+ * {
40
+ margin: 0;
41
+ padding: 0;
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ html {
46
+ scroll-behavior: smooth;
47
+ }
48
+
49
+ body {
50
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
51
+ color: var(--dark);
52
+ background-color: var(--light);
53
+ transition: var(--transition);
54
+ line-height: 1.6;
55
+ }
56
+
57
+ /* Утилиты */
58
+ .container {
59
+ max-width: 1300px;
60
+ margin: 0 auto;
61
+ padding: 0 2rem;
62
+ }
63
+
64
+ .btn {
65
+ display: inline-block;
66
+ padding: 0.8rem 1.8rem;
67
+ border-radius: var(--border-radius);
68
+ font-weight: 600;
69
+ text-decoration: none;
70
+ transition: var(--transition);
71
+ border: none;
72
+ cursor: pointer;
73
+ font-size: 1rem;
74
+ }
75
+
76
+ .btn-primary {
77
+ background-color: var(--primary);
78
+ color: white;
79
+ box-shadow: var(--shadow);
80
+ }
81
+
82
+ .btn-primary:hover {
83
+ transform: translateY(-2px);
84
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
85
+ background: linear-gradient(135deg, var(--primary), #6d28d9);
86
+ }
87
+
88
+ .section-title {
89
+ font-size: 2.5rem;
90
+ margin-bottom: 1.2rem;
91
+ color: var(--dark);
92
+ position: relative;
93
+ display: inline-block;
94
+ font-weight: 700;
95
+ }
96
+
97
+ .section-title::after {
98
+ content: '';
99
+ position: absolute;
100
+ bottom: -8px;
101
+ left: 0;
102
+ width: 70px;
103
+ height: 5px;
104
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
105
+ border-radius: 3px;
106
+ }
107
+
108
+ .section-subtitle {
109
+ color: var(--gray);
110
+ max-width: 700px;
111
+ margin-bottom: 2.5rem;
112
+ font-size: 1.1rem;
113
+ }
114
+
115
+ .text-center {
116
+ text-align: center;
117
+ }
118
+
119
+ /* Шапка */
120
+ header {
121
+ background-color: var(--light);
122
+ box-shadow: var(--shadow);
123
+ position: sticky;
124
+ top: 0;
125
+ z-index: 100;
126
+ }
127
+
128
+ .navbar {
129
+ display: flex;
130
+ justify-content: space-between;
131
+ align-items: center;
132
+ padding: 1.2rem 0;
133
+ }
134
+
135
+ .logo {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 0.8rem;
139
+ text-decoration: none;
140
+ }
141
+
142
+ .logo-icon {
143
+ font-size: 2rem;
144
+ color: var(--primary);
145
+ transition: var(--transition);
146
+ }
147
+
148
+ .logo:hover .logo-icon {
149
+ transform: rotate(15deg);
150
+ }
151
+
152
+ .logo-text {
153
+ font-size: 1.7rem;
154
+ font-weight: 700;
155
+ color: var(--dark);
156
+ letter-spacing: -0.5px;
157
+ }
158
+
159
+ .nav-links {
160
+ display: flex;
161
+ gap: 2rem;
162
+ }
163
+
164
+ .nav-links a {
165
+ text-decoration: none;
166
+ color: var(--dark);
167
+ font-weight: 500;
168
+ transition: var(--transition);
169
+ font-size: 1.05rem;
170
+ position: relative;
171
+ padding: 0.5rem 0;
172
+ }
173
+
174
+ .nav-links a::after {
175
+ content: '';
176
+ position: absolute;
177
+ bottom: 0;
178
+ left: 0;
179
+ width: 0;
180
+ height: 2px;
181
+ background-color: var(--primary);
182
+ transition: var(--transition);
183
+ }
184
+
185
+ .nav-links a:hover::after {
186
+ width: 100%;
187
+ }
188
+
189
+ .nav-links a:hover {
190
+ color: var(--primary);
191
+ }
192
+
193
+ .user-actions {
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 1.2rem;
197
+ }
198
+
199
+ .theme-toggle {
200
+ background: none;
201
+ border: none;
202
+ font-size: 1.3rem;
203
+ color: var(--dark);
204
+ cursor: pointer;
205
+ transition: var(--transition);
206
+ padding: 0.5rem;
207
+ border-radius: 50%;
208
+ }
209
+
210
+ .theme-toggle:hover {
211
+ background-color: rgba(79, 70, 229, 0.1);
212
+ transform: rotate(30deg);
213
+ }
214
+
215
+ .auth-btn {
216
+ padding: 0.7rem 1.5rem;
217
+ border-radius: var(--border-radius);
218
+ font-weight: 500;
219
+ transition: var(--transition);
220
+ }
221
+
222
+ .auth-btn.login {
223
+ background: none;
224
+ color: var(--primary);
225
+ border: 1px solid var(--primary);
226
+ }
227
+
228
+ .auth-btn.login:hover {
229
+ background-color: rgba(79, 70, 229, 0.1);
230
+ }
231
+
232
+ .auth-btn.register {
233
+ background-color: var(--primary);
234
+ color: white;
235
+ }
236
+
237
+ .auth-btn.register:hover {
238
+ background-color: #4338ca;
239
+ transform: translateY(-2px);
240
+ }
241
+
242
+ /* Герой-секция */
243
+ .hero {
244
+ padding: 6rem 0 5rem;
245
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.08));
246
+ margin-bottom: 4rem;
247
+ position: relative;
248
+ overflow: hidden;
249
+ }
250
+
251
+ .hero::before {
252
+ content: '';
253
+ position: absolute;
254
+ top: -20px;
255
+ right: -20px;
256
+ width: 300px;
257
+ height: 300px;
258
+ background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 70%);
259
+ z-index: 0;
260
+ }
261
+
262
+ .hero::after {
263
+ content: '';
264
+ position: absolute;
265
+ bottom: -30px;
266
+ left: -30px;
267
+ width: 400px;
268
+ height: 400px;
269
+ background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
270
+ z-index: 0;
271
+ }
272
+
273
+ .hero-content {
274
+ display: flex;
275
+ flex-direction: column;
276
+ align-items: center;
277
+ text-align: center;
278
+ max-width: 850px;
279
+ margin: 0 auto;
280
+ position: relative;
281
+ z-index: 1;
282
+ }
283
+
284
+ .hero h1 {
285
+ font-size: 3.2rem;
286
+ margin-bottom: 1.5rem;
287
+ line-height: 1.2;
288
+ font-weight: 800;
289
+ }
290
+
291
+ .hero p {
292
+ font-size: 1.3rem;
293
+ color: var(--gray);
294
+ margin-bottom: 2.5rem;
295
+ max-width: 700px;
296
+ }
297
+
298
+ .search-bar {
299
+ width: 100%;
300
+ max-width: 700px;
301
+ position: relative;
302
+ margin-bottom: 2.5rem;
303
+ }
304
+
305
+ .search-input {
306
+ width: 100%;
307
+ padding: 1.2rem 1.8rem;
308
+ border-radius: var(--border-radius);
309
+ border: none;
310
+ box-shadow: var(--shadow);
311
+ font-size: 1.1rem;
312
+ transition: var(--transition);
313
+ background-color: white;
314
+ }
315
+
316
+ .search-input:focus {
317
+ outline: none;
318
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
319
+ }
320
+
321
+ .search-btn {
322
+ position: absolute;
323
+ right: 5px;
324
+ top: 5px;
325
+ padding: 0.8rem 1.8rem;
326
+ border-radius: var(--border-radius);
327
+ background: linear-gradient(135deg, var(--primary), #6d28d9);
328
+ color: white;
329
+ border: none;
330
+ cursor: pointer;
331
+ transition: var(--transition);
332
+ font-weight: 500;
333
+ display: flex;
334
+ align-items: center;
335
+ gap: 0.5rem;
336
+ }
337
+
338
+ .search-btn:hover {
339
+ transform: translateY(-2px);
340
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
341
+ }
342
+
343
+ .hero-actions {
344
+ display: flex;
345
+ gap: 1.5rem;
346
+ }
347
+
348
+ /* Секция предметов */
349
+ .subjects {
350
+ padding: 5rem 0;
351
+ }
352
+
353
+ .subject-grid {
354
+ display: grid;
355
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
356
+ gap: 2rem;
357
+ }
358
+
359
+ .subject-card {
360
+ background-color: white;
361
+ border-radius: var(--border-radius);
362
+ overflow: hidden;
363
+ box-shadow: var(--shadow);
364
+ transition: var(--transition);
365
+ cursor: pointer;
366
+ display: flex;
367
+ flex-direction: column;
368
+ height: 100%;
369
+ }
370
+
371
+ .subject-card:hover {
372
+ transform: translateY(-8px);
373
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
374
+ }
375
+
376
+ /* Цвета предметов */
377
+ .subject-card.math {
378
+ border-top: 6px solid var(--math);
379
+ }
380
+ .subject-card.science {
381
+ border-top: 6px solid var(--science);
382
+ }
383
+ .subject-card.literature {
384
+ border-top: 6px solid var(--literature);
385
+ }
386
+ .subject-card.history {
387
+ border-top: 6px solid var(--history);
388
+ }
389
+ .subject-card.foreign {
390
+ border-top: 6px solid var(--foreign);
391
+ }
392
+ .subject-card.art {
393
+ border-top: 6px solid var(--art);
394
+ }
395
+ .subject-card.music {
396
+ border-top: 6px solid var(--music);
397
+ }
398
+ .subject-card.tech {
399
+ border-top: 6px solid var(--tech);
400
+ }
401
+ .subject-card.sport {
402
+ border-top: 6px solid var(--sport);
403
+ }
404
+
405
+ .subject-icon {
406
+ padding: 2rem;
407
+ font-size: 3rem;
408
+ color: white;
409
+ display: flex;
410
+ justify-content: center;
411
+ align-items: center;
412
+ flex-grow: 1;
413
+ }
414
+
415
+ /* Цвета иконок */
416
+ .math .subject-icon {
417
+ background: linear-gradient(135deg, var(--math), #ef4444);
418
+ }
419
+ .science .subject-icon {
420
+ background: linear-gradient(135deg, var(--science), #2563eb);
421
+ }
422
+ .literature .subject-icon {
423
+ background: linear-gradient(135deg, var(--literature), #7c3aed);
424
+ }
425
+ .history .subject-icon {
426
+ background: linear-gradient(135deg, var(--history), #d97706);
427
+ }
428
+ .foreign .subject-icon {
429
+ background: linear-gradient(135deg, var(--foreign), #db2777);
430
+ }
431
+ .art .subject-icon {
432
+ background: linear-gradient(135deg, var(--art), #e879f9);
433
+ }
434
+ .music .subject-icon {
435
+ background: linear-gradient(135deg, var(--music), #a855f7);
436
+ }
437
+ .tech .subject-icon {
438
+ background: linear-gradient(135deg, var(--tech), #0ea5e9);
439
+ }
440
+ .sport .subject-icon {
441
+ background: linear-gradient(135deg, var(--sport), #65a30d);
442
+ }
443
+
444
+ .subject-info {
445
+ padding: 2rem;
446
+ }
447
+
448
+ .subject-info h3 {
449
+ margin-bottom: 0.8rem;
450
+ font-size: 1.4rem;
451
+ }
452
+
453
+ .subject-info p {
454
+ color: var(--gray);
455
+ margin-bottom: 1.5rem;
456
+ font-size: 1rem;
457
+ line-height: 1.5;
458
+ }
459
+
460
+ /* Секция материалов */
461
+ .resources {
462
+ padding: 5rem 0;
463
+ background-color: rgba(239, 246, 255, 0.3);
464
+ position: relative;
465
+ overflow: hidden;
466
+ }
467
+
468
+ .resources::before {
469
+ content: '';
470
+ position: absolute;
471
+ top: -100px;
472
+ right: -100px;
473
+ width: 400px;
474
+ height: 400px;
475
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
476
+ z-index: 0;
477
+ }
478
+
479
+ .resources-content {
480
+ position: relative;
481
+ z-index: 1;
482
+ }
483
+
484
+ .resource-tabs {
485
+ display: flex;
486
+ gap: 1rem;
487
+ margin-bottom: 3rem;
488
+ overflow-x: auto;
489
+ padding-bottom: 0.8rem;
490
+ scrollbar-width: thin;
491
+ }
492
+
493
+ .tab-btn {
494
+ padding: 0.8rem 1.6rem;
495
+ background-color: white;
496
+ border: 1px solid #e2e8f0;
497
+ border-radius: 30px;
498
+ cursor: pointer;
499
+ transition: var(--transition);
500
+ white-space: nowrap;
501
+ font-weight: 500;
502
+ font-size: 0.95rem;
503
+ }
504
+
505
+ .tab-btn.active {
506
+ background: linear-gradient(135deg, var(--primary), #6d28d9);
507
+ color: white;
508
+ border-color: var(--primary);
509
+ }
510
+
511
+ .tab-btn:hover:not(.active) {
512
+ background-color: #f1f5f9;
513
+ }
514
+
515
+ .resource-list {
516
+ display: grid;
517
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
518
+ gap: 2rem;
519
+ }
520
+
521
+ .resource-card {
522
+ background-color: white;
523
+ border-radius: var(--border-radius);
524
+ overflow: hidden;
525
+ box-shadow: var(--shadow);
526
+ transition: var(--transition);
527
+ }
528
+
529
+ .resource-card:hover {
530
+ transform: translateY(-5px);
531
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
532
+ }
533
+
534
+ .resource-img {
535
+ height: 200px;
536
+ background-color: #e2e8f0;
537
+ background-size: cover;
538
+ background-position: center;
539
+ display: flex;
540
+ align-items: center;
541
+ justify-content: center;
542
+ color: var(--gray);
543
+ position: relative;
544
+ overflow: hidden;
545
+ }
546
+
547
+ .resource-img::before {
548
+ content: '';
549
+ position: absolute;
550
+ top: 0;
551
+ left: 0;
552
+ width: 100%;
553
+ height: 100%;
554
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1));
555
+ }
556
+
557
+ .resource-img i {
558
+ font-size: 3rem;
559
+ z-index: 1;
560
+ }
561
+
562
+ .resource-img.math {
563
+ background-color: #fee2e2;
564
+ }
565
+
566
+ .resource-img.science {
567
+ background-color: #dbeafe;
568
+ }
569
+
570
+ .resource-img.literature {
571
+ background-color: #ede9fe;
572
+ }
573
+
574
+ .resource-img.history {
575
+ background-color: #fef3c7;
576
+ }
577
+
578
+ .resource-details {
579
+ padding: 2rem;
580
+ }
581
+
582
+ .resource-meta {
583
+ display: flex;
584
+ gap: 1.5rem;
585
+ margin-bottom: 0.8rem;
586
+ font-size: 0.85rem;
587
+ color: var(--gray);
588
+ flex-wrap: wrap;
589
+ }
590
+
591
+ .resource-details h3 {
592
+ margin-bottom: 0.8rem;
593
+ font-size: 1.3rem;
594
+ line-height: 1.4;
595
+ }
596
+
597
+ .resource-details p {
598
+ color: var(--gray);
599
+ margin-bottom: 1.5rem;
600
+ font-size: 0.95rem;
601
+ line-height: 1.6;
602
+ }
603
+
604
+ .resource-actions {
605
+ display: flex;
606
+ justify-content: space-between;
607
+ align-items: center;
608
+ }
609
+
610
+ .download-btn {
611
+ display: flex;
612
+ align-items: center;
613
+ gap: 0.5rem;
614
+ color: var(--primary);
615
+ font-size: 0.95rem;
616
+ font-weight: 500;
617
+ text-decoration: none;
618
+ transition: var(--transition);
619
+ }
620
+
621
+ .download-btn:hover {
622
+ color: #4338ca;
623
+ }
624
+
625
+ .rating {
626
+ display: flex;
627
+ align-items: center;
628
+ gap: 0.3rem;
629
+ color: #f59e0b;
630
+ font-weight: 500;
631
+ font-size: 0.95rem;
632
+ }
633
+
634
+ /* Секция возможностей */
635
+ .features {
636
+ padding: 5rem 0;
637
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(79, 70, 229, 0.05));
638
+ }
639
+
640
+ .feature-grid {
641
+ display: grid;
642
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
643
+ gap: 2.5rem;
644
+ }
645
+
646
+ .feature-card {
647
+ display: flex;
648
+ flex-direction: column;
649
+ padding: 2.5rem;
650
+ background-color: white;
651
+ border-radius: var(--border-radius);
652
+ box-shadow: var(--shadow);
653
+ transition: var(--transition);
654
+ height: 100%;
655
+ }
656
+
657
+ .feature-card:hover {
658
+ transform: translateY(-5px);
659
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
660
+ }
661
+
662
+ .feature-icon {
663
+ font-size: 2.2rem;
664
+ color: var(--primary);
665
+ margin-bottom: 1.5rem;
666
+ width: 60px;
667
+ height: 60px;
668
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1));
669
+ border-radius: 50%;
670
+ display: flex;
671
+ align-items: center;
672
+ justify-content: center;
673
+ transition: var(--transition);
674
+ }
675
+
676
+ .feature-card:hover .feature-icon {
677
+ transform: scale(1.1);
678
+ }
679
+
680
+ .feature-text h3 {
681
+ margin-bottom: 1rem;
682
+ font-size: 1.3rem;
683
+ }
684
+
685
+ .feature-text p {
686
+ color: var(--gray);
687
+ font-size: 1rem;
688
+ line-height: 1.6;
689
+ }
690
+
691
+ /* Секция загрузки */
692
+ .upload {
693
+ padding: 6rem 0;
694
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(236, 72, 153, 0.05));
695
+ text-align: center;
696
+ position: relative;
697
+ overflow: hidden;
698
+ }
699
+
700
+ .upload::before {
701
+ content: '';
702
+ position: absolute;
703
+ bottom: -100px;
704
+ left: -100px;
705
+ width: 400px;
706
+ height: 400px;
707
+ background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
708
+ z-index: 0;
709
+ }
710
+
711
+ .upload-content {
712
+ max-width: 700px;
713
+ margin: 0 auto;
714
+ position: relative;
715
+ z-index: 1;
716
+ }
717
+
718
+ .upload-steps {
719
+ display: flex;
720
+ justify-content: center;
721
+ gap: 2rem;
722
+ margin: 3rem 0;
723
+ }
724
+
725
+ .step {
726
+ display: flex;
727
+ flex-direction: column;
728
+ align-items: center;
729
+ width: 120px;
730
+ position: relative;
731
+ }
732
+
733
+ .step:not(:last-child)::after {
734
+ content: '';
735
+ position: absolute;
736
+ top: 20px;
737
+ right: -35px;
738
+ width: 30px;
739
+ height: 2px;
740
+ background-color: var(--primary);
741
+ opacity: 0.3;
742
+ }
743
+
744
+ .step-number {
745
+ width: 40px;
746
+ height: 40px;
747
+ border-radius: 50%;
748
+ background-color: var(--primary);
749
+ color: white;
750
+ display: flex;
751
+ align-items: center;
752
+ justify-content: center;
753
+ font-weight: 600;
754
+ margin-bottom: 1rem;
755
+ }
756
+
757
+ .step-text {
758
+ font-size: 0.9rem;
759
+ color: var(--gray);
760
+ }
761
+
762
+ .upload-form {
763
+ background-color: white;
764
+ padding: 2.5rem;
765
+ border-radius: var(--border-radius);
766
+ box-shadow: var(--shadow);
767
+ margin-top: 2rem;
768
+ }
769
+
770
+ .upload-btn {
771
+ padding: 1.2rem 2.5rem;
772
+ border-radius: var(--border-radius);
773
+ background: linear-gradient(135deg, var(--primary), #6d28d9);
774
+ color: white;
775
+ font-weight: 600;
776
+ font-size: 1.1rem;
777
+ border: none;
778
+ cursor: pointer;
779
+ transition: var(--transition);
780
+ display: inline-flex;
781
+ align-items: center;
782
+ gap: 1rem;
783
+ }
784
+
785
+ .upload-btn:hover {
786
+ transform: translateY(-2px);
787
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
788
+ }
789
+
790
+ /* Подвал */
791
+ footer {
792
+ background-color: var(--dark);
793
+ color: white;
794
+ padding: 5rem 0 2rem;
795
+ position: relative;
796
+ }
797
+
798
+ .footer-grid {
799
+ display: grid;
800
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
801
+ gap: 3rem;
802
+ margin-bottom: 3rem;
803
+ }
804
+
805
+ .footer-logo {
806
+ display: flex;
807
+ flex-direction: column;
808
+ gap: 1.5rem;
809
+ }
810
+
811
+ .footer-logo-content {
812
+ display: flex;
813
+ align-items: center;
814
+ gap: 0.8rem;
815
+ }
816
+
817
+ .footer-logo-icon {
818
+ font-size: 2rem;
819
+ color: var(--primary);
820
+ }
821
+
822
+ .footer-logo-text {
823
+ font-size: 1.5rem;
824
+ font-weight: 700;
825
+ }
826
+
827
+ .footer-desc {
828
+ color: #94a3b8;
829
+ line-height: 1.6;
830
+ }
831
+
832
+ .social-links {
833
+ display: flex;
834
+ gap: 1rem;
835
+ margin-top: 1.5rem;
836
+ }
837
+
838
+ .social-links a {
839
+ display: flex;
840
+ align-items: center;
841
+ justify-content: center;
842
+ width: 42px;
843
+ height: 42px;
844
+ border-radius: 50%;
845
+ background-color: rgba(255, 255, 255, 0.1);
846
+ color: white;
847
+ transition: var(--transition);
848
+ font-size: 1.1rem;
849
+ }
850
+
851
+ .social-links a:hover {
852
+ background: linear-gradient(135deg, var(--primary), #6d28d9);
853
+ transform: translateY(-3px);
854
+ }
855
+
856
+ .footer-links h3 {
857
+ margin-bottom: 1.5rem;
858
+ font-size: 1.2rem;
859
+ position: relative;
860
+ display: inline-block;
861
+ }
862
+
863
+ .footer-links h3::after {
864
+ content: '';
865
+ position: absolute;
866
+ bottom: -8px;
867
+ left: 0;
868
+ width: 40px;
869
+ height: 3px;
870
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
871
+ }
872
+
873
+ .footer-links ul {
874
+ list-style: none;
875
+ }
876
+
877
+ .footer-links li {
878
+ margin-bottom: 1rem;
879
+ }
880
+
881
+ .footer-links a {
882
+ color: #94a3b8;
883
+ text-decoration: none;
884
+ transition: var(--transition);
885
+ display: inline-block;
886
+ }
887
+
888
+ .footer-links a:hover {
889
+ color: white;
890
+ transform: translateX(5px);
891
+ }
892
+
893
+ .newsletter {
894
+ display: flex;
895
+ flex-direction: column;
896
+ gap: 1.2rem;
897
+ }
898
+
899
+ .newsletter p {
900
+ color: #94a3b8;
901
+ line-height: 1.6;
902
+ }
903
+
904
+ .newsletter-input {
905
+ padding: 0.9rem 1.2rem;
906
+ border-radius: var(--border-radius);
907
+ border: none;
908
+ background-color: rgba(255, 255, 255, 0.1);
909
+ color: white;
910
+ font-size: 1rem;
911
+ }
912
+
913
+ .newsletter-input:focus {
914
+ outline: none;
915
+ background-color: rgba(255, 255, 255, 0.15);
916
+ }
917
+
918
+ .newsletter-btn {
919
+ padding: 0.9rem 1.5rem;
920
+ border-radius: var(--border-radius);
921
+ background: linear-gradient(135deg, var(--primary), #6d28d9);
922
+ color: white;
923
+ border: none;
924
+ font-weight: 500;
925
+ cursor: pointer;
926
+ transition: var(--transition);
927
+ }
928
+
929
+ .copyright {
930
+ text-align: center;
931
+ padding-top: 2.5rem;
932
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
933
+ color: #94a3b8;
934
+ font-size: 0.95rem;
935
+ }
936
+
937
+ /* Адаптивность */
938
+ @media (max-width: 1024px) {
939
+ .hero h1 {
940
+ font-size: 2.8rem;
941
+ }
942
+
943
+ .section-title {
944
+ font-size: 2.2rem;
945
+ }
946
+
947
+ .feature-grid {
948
+ gap: 2rem;
949
+ }
950
+ }
951
+
952
+ @media (max-width: 768px) {
953
+ .nav-links {
954
+ display: none;
955
+ }
956
+
957
+ .hero h1 {
958
+ font-size: 2.4rem;
959
+ }
960
+
961
+ .section-title {
962
+ font-size: 2rem;
963
+ }
964
+
965
+ .subject-grid {
966
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
967
+ }
968
+
969
+ .hero-actions {
970
+ flex-direction: column;
971
+ width: 100%;
972
+ gap: 1rem;
973
+ }
974
+
975
+ .hero-actions .btn {
976
+ width: 100%;
977
+ text-align: center;
978
+ }
979
+ }
980
+
981
+ @media (max-width: 576px) {
982
+ .container {
983
+ padding: 0 1.5rem;
984
+ }
985
+
986
+ .hero h1 {
987
+ font-size: 2rem;
988
+ }
989
+
990
+ .hero p {
991
+ font-size: 1.15rem;
992
+ }
993
+
994
+ .section-title {
995
+ font-size: 1.8rem;
996
+ }
997
+
998
+ .upload-steps {
999
+ flex-wrap: wrap;
1000
+ }
1001
+
1002
+ .step:not(:last-child)::after {
1003
+ display: none;
1004
+ }
1005
+ }
1006
+ </style>
1007
+ </head>
1008
+ <body>
1009
+ <!-- Шапка -->
1010
+ <header>
1011
+ <div class="container">
1012
+ <nav class="navbar">
1013
+ <a href="#" class="logo">
1014
+ <i class="fas fa-book-open logo-icon"></i>
1015
+ <span class="logo-text">Учебник</span>
1016
+ </a>
1017
+
1018
+ <div class="nav-links">
1019
+ <a href="#subjects">Предметы</a>
1020
+ <a href="#resources">Материалы</a>
1021
+ <a href="#features">Преимущества</a>
1022
+ <a href="#upload">Поделиться</a>
1023
+ </div>
1024
+
1025
+ <div class="user-actions">
1026
+ <button class="auth-btn login">Войти</button>
1027
+ <button class="auth-btn register">Регистрация</button>
1028
+ <button class="theme-toggle" id="themeToggle">
1029
+ <i class="fas fa-moon"></i>
1030
+ </button>
1031
+ </div>
1032
+ </nav>
1033
+ </div>
1034
+ </header>
1035
+
1036
+ <!-- Герой-секция -->
1037
+ <section class="hero">
1038
+ <div class="container">
1039
+ <div class="hero-content">
1040
+ <h1>Школьные учебные материалы онлайн</h1>
1041
+ <p>Найдите, изучите и поделитесь конспектами, презентациями и другими учебными материалами с учениками со всей страны.</p>
1042
+ <div class="search-bar">
1043
+ <input type="text" class="search-input" placeholder="Искать конспекты, тесты, презентации...">
1044
+ <button class="search-btn">
1045
+ <i class="fas fa-search"></i> Найти
1046
+ </button>
1047
+ </div>
1048
+ <div class="hero-actions">
1049
+ <a href="#upload" class="btn btn-primary">
1050
+ <i class="fas fa-cloud-upload-alt"></i> Поделиться материалами
1051
+ </a>
1052
+ <a href="#resources" class="btn btn-primary">
1053
+ <i class="fas fa-eye"></i> Просмотреть материалы
1054
+ </a>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ </section>
1059
+
1060
+ <!-- Секция предметов -->
1061
+ <section class="subjects" id="subjects">
1062
+ <div class="container">
1063
+ <h2 class="section-title text-center">Школьные предметы</h2>
1064
+ <p class="section-subtitle text-center">Выберите предмет, чтобы найти нужные учебные материалы</p>
1065
+ <div class="subject-grid">
1066
+ <div class="subject-card math">
1067
+ <div class="subject-icon">
1068
+ <i class="fas fa-square-root-alt"></i>
1069
+ </div>
1070
+ <div class="subject-info">
1071
+ <h3>Математика</h3>
1072
+ <p>Алгебра, геометрия, тригонометрия, математический анализ и теория вероятностей</p>
1073
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="subject-card science">
1078
+ <div class="subject-icon">
1079
+ <i class="fas fa-atom"></i>
1080
+ </div>
1081
+ <div class="subject-info">
1082
+ <h3>Наука</h3>
1083
+ <p>Физика, химия, биология, астрономия и экология для всех классов</p>
1084
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1085
+ </div>
1086
+ </div>
1087
+
1088
+ <div class="subject-card literature">
1089
+ <div class="subject-icon">
1090
+ <i class="fas fa-book-open"></i>
1091
+ </div>
1092
+ <div class="subject-info">
1093
+ <h3>Литература</h3>
1094
+ <p>Русская и зарубежная литература, анализ произведений, сочинения</p>
1095
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1096
+ </div>
1097
+ </div>
1098
+
1099
+ <div class="subject-card foreign">
1100
+ <div class="subject-icon">
1101
+ <i class="fas fa-language"></i>
1102
+ </div>
1103
+ <div class="subject-info">
1104
+ <h3>Иностранные языки</h3>
1105
+ <p>Английский, немецкий, французский и другие языки с материалами для изучения</p>
1106
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1107
+ </div>
1108
+ </div>
1109
+
1110
+ <div class="subject-card history">
1111
+ <div class="subject-icon">
1112
+ <i class="fas fa-landmark"></i>
1113
+ </div>
1114
+ <div class="subject-info">
1115
+ <h3>История</h3>
1116
+ <p>Отечественная и всемирная история, обществознание, право и экономика</p>
1117
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ <div class="subject-card art">
1122
+ <div class="subject-icon">
1123
+ <i class="fas fa-palette"></i>
1124
+ </div>
1125
+ <div class="subject-info">
1126
+ <h3>Искусство</h3>
1127
+ <p>Мировая художественная культура, изобразительное искусство, черчение</p>
1128
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1129
+ </div>
1130
+ </div>
1131
+
1132
+ <div class="subject-card music">
1133
+ <div class="subject-icon">
1134
+ <i class="fas fa-music"></i>
1135
+ </div>
1136
+ <div class="subject-info">
1137
+ <h3>Музыка</h3>
1138
+ <p>Теория музыки, история музыки, нотная грамота и полезные материалы</p>
1139
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1140
+ </div>
1141
+ </div>
1142
+
1143
+ <div class="subject-card tech">
1144
+ <div class="subject-icon">
1145
+ <i class="fas fa-laptop-code"></i>
1146
+ </div>
1147
+ <div class="subject-info">
1148
+ <h3>Информатика</h3>
1149
+ <p>Программирование, алгоритмы, компьютерная графика и веб-дизайн</p>
1150
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1151
+ </div>
1152
+ </div>
1153
+
1154
+ <div class="subject-card sport">
1155
+ <div class="subject-icon">
1156
+ <i class="fas fa-running"></i>
1157
+ </div>
1158
+ <div class="subject-info">
1159
+ <h3>Физкультура</h3>
1160
+ <p>Теория спорта, здоровый образ жизни, комплексы упражнений и разминки</p>
1161
+ <a href="#" class="btn btn-primary">Смотреть материалы</a>
1162
+ </div>
1163
+ </div>
1164
+ </div>
1165
+ </div>
1166
+ </section>
1167
+
1168
+ <!-- Секция материалов -->
1169
+ <section class="resources" id="resources">
1170
+ <div class="container">
1171
+ <div class="resources-content">
1172
+ <h2 class="section-title text-center">Популярные материалы</h2>
1173
+ <p class="section-subtitle text-center">Самые скачиваемые учебные материалы на этой неделе</p>
1174
+
1175
+ <div class="resource-tabs">
1176
+ <button class="tab-btn active">Все предметы</button>
1177
+ <button class="tab-btn">Математика</button>
1178
+ <button class="tab-btn">Физика</button>
1179
+ <button class="tab-btn">Химия</button>
1180
+ <button class="tab-btn">Биология</button>
1181
+ <button class="tab-btn">Литература</button>
1182
+ <button class="tab-btn">История</button>
1183
+ <button class="tab-btn">Иностранные языки</button>
1184
+ </div>
1185
+
1186
+ <div class="resource-list">
1187
+ <div class="resource-card">
1188
+ <div class="resource-img math">
1189
+ <i class="fas fa-file-alt"></i>
1190
+ </div>
1191
+ <div class="resource-details">
1192
+ <div class="resource-meta">
1193
+ <span><i class="fas fa-user-graduate"></i> 10 класс</span>
1194
+ <span><i class="fas fa-calendar-alt"></i> 2 дня назад</span>
1195
+ </div>
1196
+ <h3>Геометрия. Все формулы 7-9 класс</h3>
1197
+ <p>Полный сборник формул по геометрии с пояснениями и примерами применения для 7-9 классов.</p>
1198
+ <div class="resource-actions">
1199
+ <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a>
1200
+ <div class="rating">
1201
+ <i class="fas fa-star"></i>
1202
+ 4.9 (87)
1203
+ </div>
1204
+ </div>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="resource-card">
1209
+ <div class="resource-img science">
1210
+ <i class="fas fa-file-pdf"></i>
1211
+ </div>
1212
+ <div class="resource-details">
1213
+ <div class="resource-meta">
1214
+ <span><i class="fas fa-user-graduate"></i> 11 класс</span>
1215
+ <span><i class="fas fa-calendar-alt"></i> 5 дней назад</span>
1216
+ </div>
1217
+ <h3>Краткий курс органической химии</h3>
1218
+ <p>Сжатое изложение основных тем органической химии с таблицами и реакциями.</p>
1219
+ <div class="resource-actions">
1220
+ <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a>
1221
+ <div class="rating">
1222
+ <i class="fas fa-star"></i>
1223
+ 4.7 (64)
1224
+ </div>
1225
+ </div>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="resource-card">
1230
+ <div class="resource-img literature">
1231
+ <i class="fas fa-file-word"></i>
1232
+ </div>
1233
+ <div class="resource-details">
1234
+ <div class="resource-meta">
1235
+ <span><i class="fas fa-user-graduate"></i> 9 класс</span>
1236
+ <span><i class="fas fa-calendar-alt"></i> 1 неделя назад</span>
1237
+ </div>
1238
+ <h3>Анализ "Героя нашего времени"</h3>
1239
+ <p>Подробный разбор романа М.Ю. Лермонтова с характеристиками героев и основными темами.</p>
1240
+ <div class="resource-actions">
1241
+ <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a>
1242
+ <div class="rating">
1243
+ <i class="fas fa-star"></i>
1244
+ 4.8 (92)
1245
+ </div>
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <div class="resource-card">
1251
+ <div class="resource-img foreign">
1252
+ <i class="fas fa-file-powerpoint"></i>
1253
+ </div>
1254
+ <div class="resource-details">
1255
+ <div class="resource-meta">
1256
+ <span><i class="fas fa-user-graduate"></i> 8 класс</span>
1257
+ <span><i class="fas fa-calendar-alt"></i> 3 дня назад</span>
1258
+ </div>
1259
+ <h3>Английские времена (презентация)</h3>
1260
+ <p>Наглядная презентация с объяснением всех времен английского языка и примерами.</p>
1261
+ <div class="resource-actions">
1262
+ <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a>
1263
+ <div class="rating">
1264
+ <i class="fas fa-star"></i>
1265
+ 4.6 (45)
1266
+ </div>
1267
+ </div>
1268
+ </div>
1269
+ </div>
1270
+
1271
+ <div class="resource-card">
1272
+ <div class="resource-img history">
1273
+ <i class="fas fa-file-archive"></i>
1274
+ </div>
1275
+ <div class="resource-details">
1276
+ <div class="resource-meta">
1277
+ <span><i class="fas fa-user-graduate"></i> 10 класс</span>
1278
+ <span><i class="fas fa-calendar-alt"></i> 4 дня назад</span>
1279
+ </div>
1280
+ <h3>Даты по Второй мировой войне</h3>
1281
+ <p>Все важные даты и события Второй мировой войны в хронологической таблице.</p>
1282
+ <div class="resource-actions">
1283
+ <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a>
1284
+ <div class="rating">
1285
+ <i class="fas fa-star"></i>
1286
+ 4.5 (38)
1287
+ </div>
1288
+ </div>
1289
+ </div>
1290
+ </div>
1291
+
1292
+ <div class="resource-card">
1293
+ <div class="resource-img tech">
1294
+ <i class="fas fa-file-code"></i>
1295
+ </div>
1296
+ <div class="resource-details">
1297
+ <div class="resource-meta">
1298
+ <span><i class="fas fa-user-graduate"></i> 11 класс</span>
1299
+ <span><i class="fas fa-calendar-alt"></i> 6 дней назад</span>
1300
+ </div>
1301
+ <h3>Основы Python для начинающих</h3>
1302
+ <p>Конспект по основам программирования на Python с примерами и мини-задачами.</p>
1303
+ <div class="resource-actions">
1304
+ <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a>
1305
+ <div class="rating">
1306
+ <i class="fas fa-star"></i>
1307
+ 4.9 (56)
1308
+ </div>
1309
+ </div>
1310
+ </div>
1311
+ </div>
1312
+ </div>
1313
+ </div>
1314
+ </div>
1315
+ </section>
1316
+
1317
+ <!-- Секция возможностей -->
1318
+ <section class="features" id="features">
1319
+ <div class="container">
1320
+ <h2 class="section-title text-center">Почему выбирают нас?</h2>
1321
+ <p class="section-subtitle text-center">Преимущества нашей образовательной платформы</p>
1322
+
1323
+ <div class="feature-grid">
1324
+ <div class="feature-card">
1325
+ <div class="feature-icon">
1326
+ <i class="fas fa-chalkboard-teacher"></i>
1327
+ </div>
1328
+ <div class="feature-text">
1329
+ <h3>Учебные материалы</h3>
1330
+ <p>Тысячи проверенных конспектов, презентаций, тестов и других учебных материалов по всем предметам.</p>
1331
+ </div>
1332
+ </div>
1333
+
1334
+ <div class="feature-card">
1335
+ <div class="feature-icon">
1336
+ <i class="fas fa-search"></i>
1337
+ </div>
1338
+ <div class="feature-text">
1339
+ <h3>Умный поиск</h3>
1340
+ <p>Мощная система поиска позволяет быстро находить нужные материалы по классу, предмету и теме.</p>
1341
+ </div>
1342
+ </div>
1343
+
1344
+ <div class="feature-card">
1345
+ <div class="feature-icon">
1346
+ <i class="fas fa-users"></i>
1347
+ </div>
1348
+ <div class="feature-text">
1349
+ <h3>Сообщество учащихся</h3>
1350
+ <p>Общайтесь с другими учениками, задавайте вопросы и получайте помощь в освоении сложных тем.</p>
1351
+ </div>
1352
+ </div>
1353
+
1354
+ <div class="feature-card">
1355
+ <div class="feature-icon">
1356
+ <i class="fas fa-star"></i>
1357
+ </div>
1358
+ <div class="feature-text">
1359
+ <h3>Рейтинги и отзывы</h3>
1360
+ <p>Система рейтингов помогает находить самые полезные и качественные учебные материалы.</p>
1361
+ </div>
1362
+ </div>
1363
+
1364
+ <div class="feature-card">
1365
+ <div class="feature-icon">
1366
+ <i class="fas fa-mobile-alt"></i>
1367
+ </div>
1368
+ <div class="feature-text">
1369
+ <h3>Доступ на всех устройствах</h3>
1370
+ <p>Полный доступ к материалам с компьютера, планшета или смартфона в любое время.</p>
1371
+ </div>
1372
+ </div>
1373
+
1374
+ <div class="feature-card">
1375
+ <div class="feature-icon">
1376
+ <i class="fas fa-shield-alt"></i>
1377
+ </div>
1378
+ <div class="feature-text">
1379
+ <h3>Безопасность</h3>
1380
+ <p>Все материалы проверяются модераторами на соответствие образовательным стандартам.</p>
1381
+ </div>
1382
+ </div>
1383
+
1384
+ <div class="feature-card">
1385
+ <div class="feature-icon">
1386
+ <i class="fas fa-graduation-cap"></i>
1387
+ </div>
1388
+ <div class="feature-text">
1389
+ <h3>Подготовка к экзаменам</h3>
1390
+ <p>Специальные разделы с материалами для подготовки к ОГЭ, ЕГЭ и другим экзаменам.</p>
1391
+ </div>
1392
+ </div>
1393
+
1394
+ <div class="feature-card">
1395
+ <div class="feature-icon">
1396
+ <i class="fas fa-award"></i>
1397
+ </div>
1398
+ <div class="feature-text">
1399
+ <h3>Репутационная система</h3>
1400
+ <p>Зарабатывайте очки репутации, помогая другим, и получайте доступ к эксклюзивным материалам.</p>
1401
+ </div>
1402
+ </div>
1403
+ </div>
1404
+ </div>
1405
+ </section>
1406
+
1407
+ <!-- Секция загрузки -->
1408
+ <section class="upload" id="upload">
1409
+ <div class="container">
1410
+ <div class="upload-content">
1411
+ <h2 class="section-title">Поделитесь своими знаниями</h2>
1412
+ <p class="section-subtitle">Загрузите свои конспекты, презентации или другие учебные материалы и помогите другим ученикам в обучении.</p>
1413
+
1414
+ <div class="upload-steps">
1415
+ <div class="step">
1416
+ <div class="step-number">1</div>
1417
+ <div class="step-text">Выберите файл</div>
1418
+ </div>
1419
+
1420
+ <div class="step">
1421
+ <div class="step-number">2</div>
1422
+ <div class="step-text">Добавьте описание</div>
1423
+ </div>
1424
+
1425
+ <div class="step">
1426
+ <div class="step-number">3</div>
1427
+ <div class="step-text">Загрузите</div>
1428
+ </div>
1429
+ </div>
1430
+
1431
+ <div class="upload-form">
1432
+ <button class="btn btn-primary upload-btn">
1433
+ <i class="fas fa-cloud-upload-alt"></i> Загрузить материалы
1434
+ </button>
1435
+ </div>
1436
+ </div>
1437
+ </div>
1438
+ </section>
1439
+
1440
+ <!-- Подвал -->
1441
+ <footer>
1442
+ <div class="container">
1443
+ <div class="footer-grid">
1444
+ <div class="footer-logo">
1445
+ <div class="footer-logo-content">
1446
+ <i class="fas fa-book-open footer-logo-icon"></i>
1447
+ <span class="footer-logo-text">Учебник</span>
1448
+ </div>
1449
+ <p class="footer-desc">Образовательная платформа для обмена учебными материалами между школьниками, студентами и преподавателями.</p>
1450
+ <div class="social-links">
1451
+ <a href="#"><i class="fab fa-vk"></i></a>
1452
+ <a href="#"><i class="fab fa-telegram"></i></a>
1453
+ <a href="#"><i class="fab fa-youtube"></i></a>
1454
+ <a href="#"><i class="fab fa-odnoklassniki"></i></a>
1455
+ </div>
1456
+ </div>
1457
+
1458
+ <div class="footer-links">
1459
+ <h3>Предметы</h3>
1460
+ <ul>
1461
+ <li><a href="#">Математика</a></li>
1462
+ <li><a href="#">Физика</a></li>
1463
+ <li><a href="#">Химия</a></li>
1464
+ <li><a href="#">Биология</a></li>
1465
+ <li><a href="#">Информатика</a></li>
1466
+ </ul>
1467
+ </div>
1468
+
1469
+ <div class="footer-links">
1470
+ <h3>Материалы</h3>
1471
+ <ul>
1472
+ <li><a href="#">Конспекты</a></li>
1473
+ <li><a href="#">Презентации</a></li>
1474
+ <li><a href="#">Тесты</a></li>
1475
+ <li><a href="#">ГДЗ</a></li>
1476
+ <li><a href="#">КИМы</a></li>
1477
+ </ul>
1478
+ </div>
1479
+
1480
+ <div class="footer-links">
1481
+ <h3>Помощь</h3>
1482
+ <ul>
1483
+ <li><a href="#">FAQ</a></li>
1484
+ <li><a href="#">Правила</a></li>
1485
+ <li><a href="#">Модерация</a></li>
1486
+ <li><a href="#">Контакты</a></li>
1487
+ </ul>
1488
+ </div>
1489
+
1490
+ <div class="newsletter">
1491
+ <h3>Подписаться</h3>
1492
+ <p>Получайте уведомления о новых материалах и обновлениях платформы.</p>
1493
+ <input type="email" class="newsletter-input" placeholder="Ваш email">
1494
+ <button class="newsletter-btn">Подписаться</button>
1495
+ </div>
1496
+ </div>
1497
+
1498
+ <div class="copyright">
1499
+ &copy; 2023 Учебник. Все права защищены.
1500
+ </div>
1501
+ </div>
1502
+ </footer>
1503
+
1504
+ <script>
1505
+ // Переключение темы
1506
+ const themeToggle = document.getElementById('themeToggle');
1507
+ const icon = themeToggle.querySelector('i');
1508
+
1509
+ themeToggle.addEventListener('click', () => {
1510
+ document.body.setAttribute('data-theme',
1511
+ document.body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
1512
+
1513
+ if (document.body.getAttribute('data-theme') === 'dark') {
1514
+ icon.classList.remove('fa-moon');
1515
+ icon.classList.add('fa-sun');
1516
+ } else {
1517
+ icon.classList.remove('fa-sun');
1518
+ icon.classList.add('fa-moon');
1519
+ }
1520
+ });
1521
+
1522
+ // Функционал вкладок
1523
+ const tabButtons = document.querySelectorAll('.tab-btn');
1524
+
1525
+ tabButtons.forEach(button => {
1526
+ button.addEventListener('click', () => {
1527
+ tabButtons.forEach(btn => btn.classList.remove('active'));
1528
+ button.classList.add('active');
1529
+ // Здесь должна быть логика фильтрации материалов
1530
+ });
1531
+ });
1532
+
1533
+ // Плавная прокрутка
1534
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1535
+ anchor.addEventListener('click', function(e) {
1536
+ e.preventDefault();
1537
+
1538
+ const targetId = this.getAttribute('href');
1539
+ const targetElement = document.querySelector(targetId);
1540
+
1541
+ if (targetElement) {
1542
+ window.scrollTo({
1543
+ top: targetElement.offsetTop - 90,
1544
+ behavior: 'smooth'
1545
+ });
1546
+ }
1547
+ });
1548
+ });
1549
+
1550
+ // Анимация при загрузке
1551
+ document.addEventListener('DOMContentLoaded', () => {
1552
+ const elements = document.querySelectorAll('.subject-card, .feature-card, .resource-card');
1553
+
1554
+ elements.forEach((el, index) => {
1555
+ setTimeout(() => {
1556
+ el.style.opacity = '1';
1557
+ el.style.transform = 'translateY(0)';
1558
+ }, index * 100);
1559
+ });
1560
+ });
1561
+ </script>
1562
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1563
+ </html>