Hugging Face's logo

Spaces:
kirillvk
/
anycoder-c74ff958
Running

App Files Community
kirillvk commited on
Commit
8c07aae
·
verified ·
1 Parent(s): 7e57480

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +986 -19
index.html CHANGED
@@ -1,19 +1,986 @@
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>Elena Solovyeva | Psychologist & Psychotherapist</title>
7
+ <!-- Fonts: Playfair Display for elegance, Lato for readability -->
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
11
+ <!-- Icons -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
+ <style>
15
+ /* --- CSS VARIABLES & RESET --- */
16
+ :root {
17
+ /* Palette: Calm Sage, Soft Cream, Muted Gold */
18
+ --primary-color: #6B8E78; /* Sage Green */
19
+ --primary-dark: #4A654C;
20
+ --accent-color: #D4AF37; /* Muted Gold */
21
+ --text-dark: #2C3E50;
22
+ --text-light: #7F8C8D;
23
+ --bg-cream: #FDFBF7;
24
+ --glass-bg: rgba(255, 255, 255, 0.65);
25
+ --glass-border: rgba(255, 255, 255, 0.8);
26
+ --shadow-subtle: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
27
+
28
+ --font-heading: 'Playfair Display', serif;
29
+ --font-body: 'Lato', sans-serif;
30
+
31
+ --container-width: 1200px;
32
+ --header-height: 80px;
33
+ --transition: all 0.3s ease;
34
+ }
35
+
36
+ * {
37
+ margin: 0;
38
+ padding: 0;
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ html {
43
+ scroll-behavior: smooth;
44
+ }
45
+
46
+ body {
47
+ font-family: var(--font-body);
48
+ color: var(--text-dark);
49
+ background-color: var(--bg-cream);
50
+ background-image:
51
+ radial-gradient(at 0% 0%, hsla(153,30%,92%,1) 0, transparent 50%),
52
+ radial-gradient(at 100% 0%, hsla(40,20%,92%,1) 0, transparent 50%);
53
+ line-height: 1.7;
54
+ overflow-x: hidden;
55
+ }
56
+
57
+ /* --- UTILITIES --- */
58
+ .container {
59
+ max-width: var(--container-width);
60
+ margin: 0 auto;
61
+ padding: 0 20px;
62
+ }
63
+
64
+ .section-title {
65
+ font-family: var(--font-heading);
66
+ font-size: 2.5rem;
67
+ text-align: center;
68
+ margin-bottom: 1rem;
69
+ color: var(--primary-dark);
70
+ position: relative;
71
+ display: inline-block;
72
+ left: 50%;
73
+ transform: translateX(-50%);
74
+ }
75
+
76
+ .section-subtitle {
77
+ text-align: center;
78
+ color: var(--text-light);
79
+ margin-bottom: 4rem;
80
+ max-width: 600px;
81
+ margin-left: auto;
82
+ margin-right: auto;
83
+ }
84
+
85
+ .btn {
86
+ display: inline-block;
87
+ padding: 12px 30px;
88
+ border-radius: 50px;
89
+ text-decoration: none;
90
+ font-weight: 700;
91
+ transition: var(--transition);
92
+ cursor: pointer;
93
+ border: none;
94
+ font-size: 0.95rem;
95
+ }
96
+
97
+ .btn-primary {
98
+ background-color: var(--primary-color);
99
+ color: white;
100
+ box-shadow: 0 4px 15px rgba(107, 142, 120, 0.4);
101
+ }
102
+
103
+ .btn-primary:hover {
104
+ background-color: var(--primary-dark);
105
+ transform: translateY(-2px);
106
+ }
107
+
108
+ .btn-outline {
109
+ border: 2px solid var(--primary-color);
110
+ color: var(--primary-color);
111
+ background: transparent;
112
+ }
113
+
114
+ .btn-outline:hover {
115
+ background-color: var(--primary-color);
116
+ color: white;
117
+ }
118
+
119
+ /* --- GLASSMORPHISM COMPONENT --- */
120
+ .glass-panel {
121
+ background: var(--glass-bg);
122
+ backdrop-filter: blur(12px);
123
+ -webkit-backdrop-filter: blur(12px);
124
+ border: 1px solid var(--glass-border);
125
+ box-shadow: var(--shadow-subtle);
126
+ border-radius: 20px;
127
+ }
128
+
129
+ /* --- HEADER --- */
130
+ header {
131
+ position: fixed;
132
+ top: 0;
133
+ width: 100%;
134
+ height: var(--header-height);
135
+ z-index: 1000;
136
+ transition: var(--transition);
137
+ display: flex;
138
+ align-items: center;
139
+ }
140
+
141
+ header.scrolled {
142
+ background: rgba(253, 251, 247, 0.85);
143
+ backdrop-filter: blur(15px);
144
+ box-shadow: 0 2px 20px rgba(0,0,0,0.05);
145
+ }
146
+
147
+ .nav-container {
148
+ display: flex;
149
+ justify-content: space-between;
150
+ align-items: center;
151
+ width: 100%;
152
+ }
153
+
154
+ .logo {
155
+ font-family: var(--font-heading);
156
+ font-size: 1.5rem;
157
+ font-weight: 700;
158
+ color: var(--primary-dark);
159
+ text-decoration: none;
160
+ }
161
+
162
+ .logo span {
163
+ color: var(--accent-color);
164
+ }
165
+
166
+ .nav-links {
167
+ display: flex;
168
+ gap: 30px;
169
+ list-style: none;
170
+ }
171
+
172
+ .nav-links a {
173
+ text-decoration: none;
174
+ color: var(--text-dark);
175
+ font-weight: 500;
176
+ position: relative;
177
+ transition: var(--transition);
178
+ }
179
+
180
+ .nav-links a::after {
181
+ content: '';
182
+ position: absolute;
183
+ width: 0;
184
+ height: 2px;
185
+ bottom: -5px;
186
+ left: 0;
187
+ background-color: var(--accent-color);
188
+ transition: var(--transition);
189
+ }
190
+
191
+ .nav-links a:hover {
192
+ color: var(--primary-color);
193
+ }
194
+
195
+ .nav-links a:hover::after {
196
+ width: 100%;
197
+ }
198
+
199
+ .cta-header {
200
+ display: none;
201
+ }
202
+
203
+ .hamburger {
204
+ display: none;
205
+ cursor: pointer;
206
+ font-size: 1.5rem;
207
+ color: var(--primary-dark);
208
+ }
209
+
210
+ /* --- HERO SECTION --- */
211
+ .hero {
212
+ height: 100vh;
213
+ display: flex;
214
+ align-items: center;
215
+ position: relative;
216
+ padding-top: var(--header-height);
217
+ overflow: hidden;
218
+ }
219
+
220
+ .hero-bg {
221
+ position: absolute;
222
+ top: 0;
223
+ left: 0;
224
+ width: 100%;
225
+ height: 100%;
226
+ /* Nature/Peaceful image */
227
+ background: url('https://picsum.photos/seed/naturepeace/1920/1080') no-repeat center center/cover;
228
+ z-index: -2;
229
+ }
230
+
231
+ .hero-overlay {
232
+ position: absolute;
233
+ top: 0;
234
+ left: 0;
235
+ width: 100%;
236
+ height: 100%;
237
+ background: linear-gradient(135deg, rgba(107, 142, 120, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
238
+ z-index: -1;
239
+ }
240
+
241
+ .hero-content {
242
+ max-width: 800px;
243
+ padding: 20px;
244
+ }
245
+
246
+ .hero h1 {
247
+ font-family: var(--font-heading);
248
+ font-size: 4rem;
249
+ line-height: 1.1;
250
+ margin-bottom: 20px;
251
+ color: var(--primary-dark);
252
+ text-shadow: 0 2px 10px rgba(255,255,255,0.5);
253
+ }
254
+
255
+ .hero p {
256
+ font-size: 1.2rem;
257
+ margin-bottom: 30px;
258
+ color: var(--text-dark);
259
+ max-width: 600px;
260
+ }
261
+
262
+ /* --- ABOUT SECTION --- */
263
+ .about {
264
+ padding: 100px 0;
265
+ }
266
+
267
+ .about-grid {
268
+ display: grid;
269
+ grid-template-columns: 1fr 1fr;
270
+ gap: 60px;
271
+ align-items: center;
272
+ }
273
+
274
+ .about-img-wrapper {
275
+ position: relative;
276
+ border-radius: 30px;
277
+ overflow: hidden;
278
+ box-shadow: var(--shadow-subtle);
279
+ }
280
+
281
+ .about-img-wrapper img {
282
+ width: 100%;
283
+ height: auto;
284
+ display: block;
285
+ transition: transform 0.5s ease;
286
+ }
287
+
288
+ .about-img-wrapper:hover img {
289
+ transform: scale(1.03);
290
+ }
291
+
292
+ .about-text h3 {
293
+ font-family: var(--font-heading);
294
+ font-size: 2rem;
295
+ margin-bottom: 20px;
296
+ color: var(--primary-dark);
297
+ }
298
+
299
+ .signature {
300
+ font-family: 'Brush Script MT', cursive;
301
+ font-size: 2rem;
302
+ color: var(--accent-color);
303
+ margin-top: 20px;
304
+ }
305
+
306
+ /* --- SERVICES SECTION --- */
307
+ .services {
308
+ padding: 100px 0;
309
+ background: linear-gradient(to bottom, var(--bg-cream), rgba(107, 142, 120, 0.05));
310
+ }
311
+
312
+ .services-grid {
313
+ display: grid;
314
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
315
+ gap: 30px;
316
+ }
317
+
318
+ .service-card {
319
+ padding: 40px 30px;
320
+ text-align: center;
321
+ transition: var(--transition);
322
+ position: relative;
323
+ overflow: hidden;
324
+ }
325
+
326
+ .service-card:hover {
327
+ transform: translateY(-10px);
328
+ background: rgba(255, 255, 255, 0.8);
329
+ }
330
+
331
+ .service-icon {
332
+ font-size: 3rem;
333
+ color: var(--accent-color);
334
+ margin-bottom: 20px;
335
+ }
336
+
337
+ .service-card h3 {
338
+ font-family: var(--font-heading);
339
+ font-size: 1.5rem;
340
+ margin-bottom: 15px;
341
+ color: var(--primary-dark);
342
+ }
343
+
344
+ .service-card p {
345
+ font-size: 0.95rem;
346
+ color: var(--text-light);
347
+ }
348
+
349
+ /* --- PHILOSOPHY SECTION --- */
350
+ .philosophy {
351
+ padding: 100px 0;
352
+ }
353
+
354
+ .philosophy-content {
355
+ display: flex;
356
+ flex-direction: column;
357
+ gap: 20px;
358
+ }
359
+
360
+ .quote-box {
361
+ font-family: var(--font-heading);
362
+ font-size: 1.8rem;
363
+ text-align: center;
364
+ font-style: italic;
365
+ color: var(--primary-dark);
366
+ padding: 40px;
367
+ position: relative;
368
+ }
369
+
370
+ .quote-box::before {
371
+ content: '\f10d';
372
+ font-family: "Font Awesome 6 Free";
373
+ font-weight: 900;
374
+ position: absolute;
375
+ top: 10px;
376
+ left: 50%;
377
+ transform: translateX(-50%);
378
+ font-size: 2rem;
379
+ color: var(--accent-color);
380
+ opacity: 0.3;
381
+ }
382
+
383
+ /* --- TESTIMONIALS --- */
384
+ .testimonials {
385
+ padding: 100px 0;
386
+ background-color: #F4F1EA;
387
+ }
388
+
389
+ .testimonial-grid {
390
+ display: grid;
391
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
392
+ gap: 30px;
393
+ }
394
+
395
+ .testimonial-card {
396
+ padding: 30px;
397
+ display: flex;
398
+ flex-direction: column;
399
+ justify-content: space-between;
400
+ }
401
+
402
+ .stars {
403
+ color: #FFD700;
404
+ margin-bottom: 15px;
405
+ }
406
+
407
+ .testimonial-text {
408
+ font-style: italic;
409
+ margin-bottom: 20px;
410
+ }
411
+
412
+ .client-info {
413
+ display: flex;
414
+ align-items: center;
415
+ gap: 15px;
416
+ }
417
+
418
+ .client-info img {
419
+ width: 50px;
420
+ height: 50px;
421
+ border-radius: 50%;
422
+ object-fit: cover;
423
+ }
424
+
425
+ .client-details h4 {
426
+ font-size: 1rem;
427
+ color: var(--primary-dark);
428
+ }
429
+
430
+ .client-details span {
431
+ font-size: 0.85rem;
432
+ color: var(--text-light);
433
+ }
434
+
435
+ /* --- CONTACT SECTION --- */
436
+ .contact {
437
+ padding: 100px 0;
438
+ }
439
+
440
+ .contact-wrapper {
441
+ display: grid;
442
+ grid-template-columns: 1fr 1.5fr;
443
+ gap: 50px;
444
+ }
445
+
446
+ .contact-info-item {
447
+ display: flex;
448
+ align-items: center;
449
+ gap: 15px;
450
+ margin-bottom: 25px;
451
+ }
452
+
453
+ .contact-info-item i {
454
+ width: 40px;
455
+ height: 40px;
456
+ background: rgba(107, 142, 120, 0.1);
457
+ border-radius: 50%;
458
+ display: flex;
459
+ align-items: center;
460
+ justify-content: center;
461
+ color: var(--primary-color);
462
+ }
463
+
464
+ .contact-form {
465
+ padding: 40px;
466
+ }
467
+
468
+ .form-group {
469
+ margin-bottom: 20px;
470
+ position: relative;
471
+ }
472
+
473
+ .form-control {
474
+ width: 100%;
475
+ padding: 15px;
476
+ border: 1px solid rgba(0,0,0,0.1);
477
+ border-radius: 10px;
478
+ background: rgba(255,255,255,0.8);
479
+ font-family: var(--font-body);
480
+ font-size: 1rem;
481
+ transition: var(--transition);
482
+ }
483
+
484
+ .form-control:focus {
485
+ outline: none;
486
+ border-color: var(--primary-color);
487
+ background: white;
488
+ box-shadow: 0 0 0 4px rgba(107, 142, 120, 0.1);
489
+ }
490
+
491
+ /* --- FOOTER --- */
492
+ footer {
493
+ background-color: var(--primary-dark);
494
+ color: white;
495
+ padding: 60px 0 20px;
496
+ }
497
+
498
+ .footer-grid {
499
+ display: grid;
500
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
501
+ gap: 40px;
502
+ margin-bottom: 40px;
503
+ }
504
+
505
+ .footer-col h4 {
506
+ font-family: var(--font-heading);
507
+ font-size: 1.2rem;
508
+ margin-bottom: 20px;
509
+ color: var(--accent-color);
510
+ }
511
+
512
+ .footer-links {
513
+ list-style: none;
514
+ }
515
+
516
+ .footer-links li {
517
+ margin-bottom: 10px;
518
+ }
519
+
520
+ .footer-links a {
521
+ color: rgba(255,255,255,0.8);
522
+ text-decoration: none;
523
+ transition: var(--transition);
524
+ }
525
+
526
+ .footer-links a:hover {
527
+ color: white;
528
+ padding-left: 5px;
529
+ }
530
+
531
+ .copyright {
532
+ text-align: center;
533
+ padding-top: 20px;
534
+ border-top: 1px solid rgba(255,255,255,0.1);
535
+ font-size: 0.9rem;
536
+ color: rgba(255,255,255,0.6);
537
+ }
538
+
539
+ .anycoder-link {
540
+ color: rgba(255,255,255,0.6);
541
+ text-decoration: none;
542
+ font-weight: bold;
543
+ border-bottom: 1px dotted rgba(255,255,255,0.6);
544
+ }
545
+
546
+ .anycoder-link:hover {
547
+ color: white;
548
+ border-bottom-color: white;
549
+ }
550
+
551
+ /* --- TOAST NOTIFICATION --- */
552
+ .toast {
553
+ position: fixed;
554
+ bottom: 30px;
555
+ right: 30px;
556
+ background: white;
557
+ padding: 20px 25px;
558
+ border-radius: 10px;
559
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
560
+ display: flex;
561
+ align-items: center;
562
+ gap: 15px;
563
+ transform: translateY(100px);
564
+ opacity: 0;
565
+ transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
566
+ z-index: 2000;
567
+ border-left: 5px solid var(--primary-color);
568
+ }
569
+
570
+ .toast.show {
571
+ transform: translateY(0);
572
+ opacity: 1;
573
+ }
574
+
575
+ .toast i {
576
+ color: var(--primary-color);
577
+ font-size: 1.5rem;
578
+ }
579
+
580
+ /* --- ANIMATIONS --- */
581
+ .fade-in-section {
582
+ opacity: 0;
583
+ transform: translateY(30px);
584
+ transition: opacity 0.8s ease-out, transform 0.8s ease-out;
585
+ will-change: opacity, visibility;
586
+ }
587
+
588
+ .fade-in-section.is-visible {
589
+ opacity: 1;
590
+ transform: none;
591
+ }
592
+
593
+ /* --- RESPONSIVE --- */
594
+ @media (max-width: 992px) {
595
+ .hero h1 { font-size: 3rem; }
596
+ .about-grid, .contact-wrapper { grid-template-columns: 1fr; }
597
+ .about-img-wrapper { order: -1; } /* Image on top on mobile */
598
+ }
599
+
600
+ @media (max-width: 768px) {
601
+ .nav-links {
602
+ position: fixed;
603
+ top: var(--header-height);
604
+ right: -100%;
605
+ width: 70%;
606
+ height: calc(100vh - var(--header-height));
607
+ background: white;
608
+ flex-direction: column;
609
+ padding: 40px;
610
+ transition: 0.4s ease;
611
+ box-shadow: -5px 0 15px rgba(0,0,0,0.1);
612
+ }
613
+
614
+ .nav-links.active {
615
+ right: 0;
616
+ }
617
+
618
+ .hamburger {
619
+ display: block;
620
+ }
621
+
622
+ .cta-header { display: block; margin-left: 20px; }
623
+
624
+ .hero h1 { font-size: 2.5rem; }
625
+ .section-title { font-size: 2rem; }
626
+ }
627
+ </style>
628
+ </head>
629
+ <body>
630
+
631
+ <!-- Header -->
632
+ <header id="header">
633
+ <div class="container nav-container">
634
+ <a href="#" class="logo">Elena <span>Solovyeva</span></a>
635
+
636
+ <ul class="nav-links" id="navLinks">
637
+ <li><a href="#about" onclick="toggleMenu()">About</a></li>
638
+ <li><a href="#services" onclick="toggleMenu()">Services</a></li>
639
+ <li><a href="#philosophy" onclick="toggleMenu()">Philosophy</a></li>
640
+ <li><a href="#reviews" onclick="toggleMenu()">Reviews</a></li>
641
+ <li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
642
+ </ul>
643
+
644
+ <div style="display: flex; align-items: center;">
645
+ <a href="#contact" class="btn btn-primary cta-header">Book Now</a>
646
+ <div class="hamburger" id="hamburger">
647
+ <i class="fas fa-bars"></i>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </header>
652
+
653
+ <!-- Hero Section -->
654
+ <section class="hero">
655
+ <div class="hero-bg"></div>
656
+ <div class="hero-overlay"></div>
657
+ <div class="container hero-content fade-in-section">
658
+ <h1>Find your inner peace<br>and strength.</h1>
659
+ <p>Professional psychological support tailored to your unique journey. Together, we will explore the depths of your mind and uncover the solutions hidden within.</p>
660
+ <a href="#contact" class="btn btn-primary">Start Your Journey</a>
661
+ <a href="#services" class="btn btn-outline" style="margin-left: 10px;">Learn More</a>
662
+ </div>
663
+ </section>
664
+
665
+ <!-- About Section -->
666
+ <section id="about" class="about">
667
+ <div class="container">
668
+ <div class="about-grid fade-in-section">
669
+ <div class="about-img-wrapper glass-panel">
670
+ <!-- Placeholder for Elena's photo -->
671
+ <img src="https://picsum.photos/seed/elena_psychologist/600/700" alt="Elena Solovyeva">
672
+ </div>
673
+ <div class="about-text">
674
+ <h3>Elena Solovyeva</h3>
675
+ <p style="color: var(--primary-color); font-weight: 700; margin-bottom: 10px;">Clinical Psychologist & Psychotherapist</p>
676
+ <p>Hello, I am Elena. With over 10 years of experience in the field of psychotherapy, my goal is to create a safe, non-judgmental space where you can freely express yourself.</p>
677
+ <br>
678
+ <p>I believe that every individual holds the key to their own healing. My approach combines evidence-based techniques with a deep humanistic understanding of emotions. Whether you are dealing with anxiety, relationship issues, or simply seeking personal growth, I am here to walk this path with you.</p>
679
+ <div class="signature">Elena Solovyeva</div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </section>
684
+
685
+ <!-- Services Section -->
686
+ <section id="services" class="services">
687
+ <div class="container">
688
+ <h2 class="section-title fade-in-section">My Services</h2>
689
+ <p class="section-subtitle fade-in-section">Comprehensive care designed to address your specific needs with sensitivity and professionalism.</p>
690
+
691
+ <div class="services-grid fade-in-section">
692
+ <!-- Service 1 -->
693
+ <div class="service-card glass-panel">
694
+ <div class="service-icon"><i class="fas fa-user-friends"></i></div>
695
+ <h3>Individual Therapy</h3>
696
+ <p>One-on-one sessions focusing on personal growth, anxiety management, and emotional regulation. A confidential space to heal.</p>
697
+ </div>
698
+ <!-- Service 2 -->
699
+ <div class="service-card glass-panel">
700
+ <div class="service-icon"><i class="fas fa-heart"></i></div>
701
+ <h3>Couples Counseling</h3>
702
+ <p>Rebuilding trust and improving communication. We work together to resolve conflicts and strengthen your bond.</p>
703
+ </div>
704
+ <!-- Service 3 -->
705
+ <div class="service-card glass-panel">
706
+ <div class="service-icon"><i class="fas fa-laptop-house"></i></div>
707
+ <h3>Online Consultations</h3>
708
+ <p>Professional therapy from the comfort of your home. Secure video sessions available in English and Russian.</p>
709
+ </div>
710
+ <!-- Service 4 -->
711
+ <div class="service-card glass-panel">
712
+ <div class="service-icon"><i class="fas fa-brain"></i></div>
713
+ <h3>Cognitive Behavioral</h3>
714
+ <p>Targeted CBT techniques to help you identify negative thought patterns and replace them with positive, constructive ones.</p>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </section>
719
+
720
+ <!-- Philosophy Section -->
721
+ <section id="philosophy" class="philosophy">
722
+ <div class="container">
723
+ <div class="quote-box glass-panel fade-in-section">
724
+ "You cannot control the waves, but you can learn how to surf."
725
+ </div>
726
+ <p class="section-subtitle fade-in-section">
727
+ My approach is integrative. I draw from psychodynamic, humanistic, and cognitive-behavioral traditions to create a personalized treatment plan. I believe in the resilience of the human spirit and the power of a trusting therapeutic alliance.
728
+ </p>
729
+ </div>
730
+ </section>
731
+
732
+ <!-- Reviews Section -->
733
+ <section id="reviews" class="testimonials">
734
+ <div class="container">
735
+ <h2 class="section-title fade-in-section">Client Stories</h2>
736
+ <div class="testimonial-grid fade-in-section">
737
+ <!-- Review 1 -->
738
+ <div class="testimonial-card glass-panel">
739
+ <div class="stars">
740
+ <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
741
+ </div>
742
+ <p class="testimonial-text">"Elena has a rare gift for making you feel heard. After just a few sessions, I felt a huge weight lifted off my shoulders. Highly recommended."</p>
743
+ <div class="client-info">
744
+ <img src="https://picsum.photos/seed/user1/100/100" alt="Client">
745
+ <div class="client-details">
746
+ <h4>Anna M.</h4>
747
+ <span>Individual Therapy</span>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ <!-- Review 2 -->
752
+ <div class="testimonial-card glass-panel">
753
+ <div class="stars">
754
+ <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
755
+ </div>
756
+ <p class="testimonial-text">"The online sessions are incredibly convenient and the quality of care is top-notch. Elena helped me navigate a difficult divorce with grace."</p>
757
+ <div class="client-info">
758
+ <img src="https://picsum.photos/seed/user2/100/100" alt="Client">
759
+ <div class="client-details">
760
+ <h4>Michael R.</h4>
761
+ <span>Couples Counseling</span>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ <!-- Review 3 -->
766
+ <div class="testimonial-card glass-panel">
767
+ <div class="stars">
768
+ <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
769
+ </div>
770
+ <p class="testimonial-text">"A calm and professional environment. Elena's insights into my behavior patterns were eye-opening. I am grateful for her guidance."</p>
771
+ <div class="client-info">
772
+ <img src="https://picsum.photos/seed/user3/100/100" alt="Client">
773
+ <div class="client-details">
774
+ <h4>Sarah Jenkins</h4>
775
+ <span>Online Consultations</span>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </section>
782
+
783
+ <!-- Contact Section -->
784
+ <section id="contact" class="contact">
785
+ <div class="container">
786
+ <h2 class="section-title fade-in-section">Get in Touch</h2>
787
+ <p class="section-subtitle fade-in-section">The first step towards change is the most important one. Send me a message to schedule your consultation.</p>
788
+
789
+ <div class="contact-wrapper fade-in-section">
790
+ <!-- Contact Info -->
791
+ <div class="contact-info glass-panel">
792
+ <div class="contact-info-item">
793
+ <i class="fas fa-map-marker-alt"></i>
794
+ <div>
795
+ <h4>Address</h4>
796
+ <p>St. Petersburg, Russia<br>Online Worldwide</p>
797
+ </div>
798
+ </div>
799
+ <div class="contact-info-item">
800
+ <i class="fas fa-phone-alt"></i>
801
+ <div>
802
+ <h4>Phone</h4>
803
+ <p>+7 (999) 000-00-00</p>
804
+ </div>
805
+ </div>
806
+ <div class="contact-info-item">
807
+ <i class="fas fa-envelope"></i>
808
+ <div>
809
+ <h4>Email</h4>
810
+ <p>elena.solovyeva@example.com</p>
811
+ </div>
812
+ </div>
813
+ <div class="contact-info-item">
814
+ <i class="fas fa-clock"></i>
815
+ <div>
816
+ <h4>Working Hours</h4>
817
+ <p>Mon - Fri: 10:00 - 20:00</p>
818
+ </div>
819
+ </div>
820
+ </div>
821
+
822
+ <!-- Contact Form -->
823
+ <form class="contact-form glass-panel" id="bookingForm">
824
+ <div class="form-group">
825
+ <label for="name">Your Name</label>
826
+ <input type="text" id="name" class="form-control" placeholder="John Doe" required>
827
+ </div>
828
+ <div class="form-group">
829
+ <label for="email">Email Address</label>
830
+ <input type="email" id="email" class="form-control" placeholder="john@example.com" required>
831
+ </div>
832
+ <div class="form-group">
833
+ <label for="service">Interested Service</label>
834
+ <select id="service" class="form-control">
835
+ <option>Individual Therapy</option>
836
+ <option>Couples Counseling</option>
837
+ <option>Online Consultations</option>
838
+ <option>Other</option>
839
+ </select>
840
+ </div>
841
+ <div class="form-group">
842
+ <label for="message">Message</label>
843
+ <textarea id="message" rows="4" class="form-control" placeholder="How can I help you?" required></textarea>
844
+ </div>
845
+ <button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
846
+ </form>
847
+ </div>
848
+ </div>
849
+ </section>
850
+
851
+ <!-- Footer -->
852
+ <footer>
853
+ <div class="container">
854
+ <div class="footer-grid">
855
+ <div class="footer-col">
856
+ <a href="#" class="logo" style="color: white; margin-bottom: 20px; display: block;">Elena <span>Solovyeva</span></a>
857
+ <p style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">
858
+ Providing professional psychological support with warmth and expertise.
859
+ </p>
860
+ </div>
861
+ <div class="footer-col">
862
+ <h4>Quick Links</h4>
863
+ <ul class="footer-links">
864
+ <li><a href="#about">About Me</a></li>
865
+ <li><a href="#services">Services</a></li>
866
+ <li><a href="#reviews">Testimonials</a></li>
867
+ <li><a href="#contact">Contact</a></li>
868
+ </ul>
869
+ </div>
870
+ <div class="footer-col">
871
+ <h4>Legal</h4>
872
+ <ul class="footer-links">
873
+ <li><a href="#">Privacy Policy</a></li>
874
+ <li><a href="#">Terms of Service</a></li>
875
+ <li><a href="#">Confidentiality</a></li>
876
+ </ul>
877
+ </div>
878
+ </div>
879
+ <div class="copyright">
880
+ &copy; 2023 Elena Solovyeva. All rights reserved.
881
+ <br>
882
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
883
+ </div>
884
+ </div>
885
+ </footer>
886
+
887
+ <!-- Toast Notification -->
888
+ <div class="toast" id="toast">
889
+ <i class="fas fa-check-circle"></i>
890
+ <div>
891
+ <h4 style="margin-bottom: 2px;">Message Sent!</h4>
892
+ <p style="font-size: 0.85rem; color: #777;">I will get back to you shortly.</p>
893
+ </div>
894
+ </div>
895
+
896
+ <!-- JavaScript -->
897
+ <script>
898
+ // --- Header Scroll Effect ---
899
+ const header = document.getElementById('header');
900
+ window.addEventListener('scroll', () => {
901
+ if (window.scrollY > 50) {
902
+ header.classList.add('scrolled');
903
+ } else {
904
+ header.classList.remove('scrolled');
905
+ }
906
+ });
907
+
908
+ // --- Mobile Menu Toggle ---
909
+ const hamburger = document.getElementById('hamburger');
910
+ const navLinks = document.getElementById('navLinks');
911
+ const hamburgerIcon = hamburger.querySelector('i');
912
+
913
+ hamburger.addEventListener('click', () => {
914
+ navLinks.classList.toggle('active');
915
+
916
+ // Toggle icon between bars and times (X)
917
+ if (navLinks.classList.contains('active')) {
918
+ hamburgerIcon.classList.remove('fa-bars');
919
+ hamburgerIcon.classList.add('fa-times');
920
+ } else {
921
+ hamburgerIcon.classList.remove('fa-times');
922
+ hamburgerIcon.classList.add('fa-bars');
923
+ }
924
+ });
925
+
926
+ function toggleMenu() {
927
+ if (window.innerWidth <= 768) {
928
+ navLinks.classList.remove('active');
929
+ hamburgerIcon.classList.remove('fa-times');
930
+ hamburgerIcon.classList.add('fa-bars');
931
+ }
932
+ }
933
+
934
+ // --- Scroll Animation Observer ---
935
+ const observerOptions = {
936
+ root: null,
937
+ rootMargin: '0px',
938
+ threshold: 0.1
939
+ };
940
+
941
+ const observer = new IntersectionObserver((entries, observer) => {
942
+ entries.forEach(entry => {
943
+ if (entry.isIntersecting) {
944
+ entry.target.classList.add('is-visible');
945
+ observer.unobserve(entry.target); // Only animate once
946
+ }
947
+ });
948
+ }, observerOptions);
949
+
950
+ document.querySelectorAll('.fade-in-section').forEach(section => {
951
+ observer.observe(section);
952
+ });
953
+
954
+ // --- Form Handling (No Alerts) ---
955
+ const form = document.getElementById('bookingForm');
956
+ const toast = document.getElementById('toast');
957
+ let toastTimeout;
958
+
959
+ form.addEventListener('submit', (e) => {
960
+ e.preventDefault();
961
+
962
+ // Simulate form submission
963
+ const btn = form.querySelector('button');
964
+ const originalText = btn.innerText;
965
+ btn.innerText = 'Sending...';
966
+ btn.disabled = true;
967
+
968
+ setTimeout(() => {
969
+ // Reset form
970
+ form.reset();
971
+ btn.innerText = originalText;
972
+ btn.disabled = false;
973
+
974
+ // Show Toast
975
+ toast.classList.add('show');
976
+
977
+ // Hide Toast after 4 seconds
978
+ clearTimeout(toastTimeout);
979
+ toastTimeout = setTimeout(() => {
980
+ toast.classList.remove('show');
981
+ }, 4000);
982
+ }, 1500);
983
+ });
984
+ </script>
985
+ </body>
986
+ </html>