Hugging Face's logo

Spaces:
xeroxwill
/
bio
Running

App Files Community
xeroxwill commited on
Commit
affccd8
·
verified ·
1 Parent(s): 65c4e32

Updated index.html - Static bio

Browse files
Files changed (1) hide show
  1. index.html +574 -19
index.html CHANGED
@@ -1,19 +1,574 @@
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>Xerox Will — Bio</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ /* MD3 Токены (тёмная тема) */
12
+ --md-sys-color-primary: #FFB786;
13
+ --md-sys-color-on-primary: #4F2500;
14
+ --md-sys-color-primary-container: #6F3B0A;
15
+ --md-sys-color-on-primary-container: #FFDCC7;
16
+
17
+ --md-sys-color-surface: #141218;
18
+ --md-sys-color-surface-container: #211F26;
19
+ --md-sys-color-surface-container-high: #2B2930;
20
+ --md-sys-color-surface-container-highest: #36343B;
21
+
22
+ --md-sys-color-on-surface: #E6E0E9;
23
+ --md-sys-color-on-surface-variant: #CAC4D0;
24
+ --md-sys-color-outline: #938F99;
25
+ --md-sys-color-outline-variant: #49454F;
26
+
27
+ --md-sys-color-error: #F2B8B5;
28
+ --md-sys-color-error-container: #93000A;
29
+ --md-sys-color-on-error-container: #FFDAD6;
30
+
31
+ --md-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
32
+ --md-elevation-2: 0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1);
33
+ --md-elevation-3: 0 10px 15px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1);
34
+
35
+ --radius-sm: 8px;
36
+ --radius-md: 12px;
37
+ --radius-lg: 16px;
38
+ --radius-xl: 28px;
39
+ }
40
+
41
+ * {
42
+ margin: 0;
43
+ padding: 0;
44
+ box-sizing: border-box;
45
+ }
46
+
47
+ body {
48
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
49
+ background-color: var(--md-sys-color-surface);
50
+ color: var(--md-sys-color-on-surface);
51
+ min-height: 100vh;
52
+ overflow-x: hidden;
53
+ position: relative;
54
+ line-height: 1.5;
55
+ }
56
+
57
+ /* ============================================
58
+ ОРАНЖЕВЫЕ ЛЕПЕСТКИ (zero-performance-impact)
59
+ ============================================ */
60
+ .petals-bg {
61
+ position: fixed;
62
+ inset: 0;
63
+ z-index: 0;
64
+ pointer-events: none;
65
+ overflow: hidden;
66
+ }
67
+
68
+ .petal {
69
+ position: absolute;
70
+ border-radius: 50% 0 50% 50%;
71
+ background: radial-gradient(
72
+ circle at 30% 30%,
73
+ rgba(255, 140, 0, 0.35),
74
+ rgba(255, 87, 34, 0.08) 70%
75
+ );
76
+ will-change: transform;
77
+ backface-visibility: hidden;
78
+ transform: translateZ(0);
79
+ filter: blur(1px);
80
+ }
81
+
82
+ .petal:nth-child(1) { width: 140px; height: 140px; top: -20px; left: 10%; animation: float 18s ease-in-out infinite; }
83
+ .petal:nth-child(2) { width: 100px; height: 100px; top: 15%; right: 5%; animation: float 22s ease-in-out infinite 1s; border-radius: 0 50% 50% 50%; }
84
+ .petal:nth-child(3) { width: 180px; height: 180px; bottom: 20%; left: -5%; animation: float 25s ease-in-out infinite 2s; opacity: 0.6; }
85
+ .petal:nth-child(4) { width: 90px; height: 90px; top: 50%; right: 15%; animation: float 20s ease-in-out infinite 0.5s; border-radius: 50% 50% 0 50%; }
86
+ .petal:nth-child(5) { width: 160px; height: 160px; bottom: -30px; right: 25%; animation: float 24s ease-in-out infinite 3s; opacity: 0.5; }
87
+ .petal:nth-child(6) { width: 70px; height: 70px; top: 8%; left: 45%; animation: float 19s ease-in-out infinite 1.5s; border-radius: 50% 0 50% 50%; opacity: 0.4; }
88
+ .petal:nth-child(7) { width: 120px; height: 120px; bottom: 35%; right: -10px; animation: float 21s ease-in-out infinite 2.5s; opacity: 0.45; }
89
+
90
+ @keyframes float {
91
+ 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(0); }
92
+ 33% { transform: translateY(-15px) rotate(8deg) translateZ(0); }
93
+ 66% { transform: translateY(8px) rotate(-5deg) translateZ(0); }
94
+ }
95
+
96
+ /* ============================================
97
+ MAIN LAYOUT
98
+ ============================================ */
99
+ .container {
100
+ position: relative;
101
+ z-index: 1;
102
+ max-width: 680px;
103
+ margin: 0 auto;
104
+ padding: 48px 24px;
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: 24px;
108
+ }
109
+
110
+ /* ============================================
111
+ PROFILE HEADER
112
+ ============================================ */
113
+ .profile-header {
114
+ display: flex;
115
+ flex-direction: column;
116
+ align-items: center;
117
+ text-align: center;
118
+ gap: 16px;
119
+ margin-bottom: 8px;
120
+ }
121
+
122
+ .avatar {
123
+ width: 120px;
124
+ height: 120px;
125
+ border-radius: 50%;
126
+ background: linear-gradient(135deg, #FF8C00 0%, #FF5722 100%);
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ font-size: 48px;
131
+ font-weight: 700;
132
+ color: var(--md-sys-color-surface);
133
+ box-shadow: 0 8px 24px rgba(255, 87, 34, 0.3);
134
+ position: relative;
135
+ overflow: hidden;
136
+ }
137
+
138
+ .avatar::after {
139
+ content: '';
140
+ position: absolute;
141
+ inset: 0;
142
+ border-radius: 50%;
143
+ border: 3px solid rgba(255, 255, 255, 0.15);
144
+ }
145
+
146
+ .display-name {
147
+ font-size: 32px;
148
+ font-weight: 700;
149
+ letter-spacing: -0.5px;
150
+ color: var(--md-sys-color-on-surface);
151
+ }
152
+
153
+ .username {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ gap: 6px;
157
+ background: var(--md-sys-color-surface-container);
158
+ color: var(--md-sys-color-on-surface-variant);
159
+ padding: 8px 16px;
160
+ border-radius: 100px;
161
+ font-size: 14px;
162
+ font-weight: 500;
163
+ border: 1px solid var(--md-sys-color-outline-variant);
164
+ font-family: 'Courier New', monospace;
165
+ }
166
+
167
+ .username::before {
168
+ content: '@';
169
+ color: var(--md-sys-color-primary);
170
+ font-weight: 700;
171
+ }
172
+
173
+ .bio-text {
174
+ color: var(--md-sys-color-on-surface-variant);
175
+ font-size: 16px;
176
+ line-height: 1.6;
177
+ max-width: 480px;
178
+ text-align: center;
179
+ }
180
+
181
+ .chip-row {
182
+ display: flex;
183
+ flex-wrap: wrap;
184
+ gap: 8px;
185
+ justify-content: center;
186
+ margin-top: 4px;
187
+ }
188
+
189
+ .chip {
190
+ background: var(--md-sys-color-primary-container);
191
+ color: var(--md-sys-color-on-primary-container);
192
+ padding: 6px 14px;
193
+ border-radius: 100px;
194
+ font-size: 12px;
195
+ font-weight: 600;
196
+ letter-spacing: 0.3px;
197
+ text-transform: uppercase;
198
+ }
199
+
200
+ /* ============================================
201
+ CARDS
202
+ ============================================ */
203
+ .section-title {
204
+ font-size: 14px;
205
+ font-weight: 600;
206
+ color: var(--md-sys-color-on-surface-variant);
207
+ text-transform: uppercase;
208
+ letter-spacing: 1px;
209
+ margin: 8px 0 4px 16px;
210
+ }
211
+
212
+ .card {
213
+ background: rgba(33, 31, 38, 0.7);
214
+ backdrop-filter: blur(20px);
215
+ -webkit-backdrop-filter: blur(20px);
216
+ border: 1px solid var(--md-sys-color-outline-variant);
217
+ border-radius: var(--radius-lg);
218
+ padding: 20px;
219
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
220
+ cursor: pointer;
221
+ position: relative;
222
+ overflow: hidden;
223
+ text-decoration: none;
224
+ color: inherit;
225
+ display: flex;
226
+ align-items: center;
227
+ gap: 16px;
228
+ }
229
+
230
+ .card::before {
231
+ content: '';
232
+ position: absolute;
233
+ inset: 0;
234
+ background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 140, 0, 0.06), transparent 40%);
235
+ opacity: 0;
236
+ transition: opacity 0.3s;
237
+ pointer-events: none;
238
+ }
239
+
240
+ .card:hover::before {
241
+ opacity: 1;
242
+ }
243
+
244
+ .card:hover {
245
+ transform: translateY(-2px);
246
+ box-shadow: var(--md-elevation-3);
247
+ border-color: var(--md-sys-color-outline);
248
+ }
249
+
250
+ .card:active {
251
+ transform: scale(0.98);
252
+ }
253
+
254
+ .card-icon {
255
+ width: 48px;
256
+ height: 48px;
257
+ border-radius: var(--radius-md);
258
+ display: flex;
259
+ align-items: center;
260
+ justify-content: center;
261
+ font-size: 24px;
262
+ flex-shrink: 0;
263
+ }
264
+
265
+ .card-content {
266
+ flex: 1;
267
+ min-width: 0;
268
+ }
269
+
270
+ .card-title {
271
+ font-size: 16px;
272
+ font-weight: 600;
273
+ color: var(--md-sys-color-on-surface);
274
+ margin-bottom: 2px;
275
+ }
276
+
277
+ .card-desc {
278
+ font-size: 13px;
279
+ color: var(--md-sys-color-on-surface-variant);
280
+ white-space: nowrap;
281
+ overflow: hidden;
282
+ text-overflow: ellipsis;
283
+ }
284
+
285
+ .card-arrow {
286
+ color: var(--md-sys-color-outline);
287
+ font-size: 20px;
288
+ transition: transform 0.2s;
289
+ }
290
+
291
+ .card:hover .card-arrow {
292
+ transform: translateX(4px);
293
+ color: var(--md-sys-color-primary);
294
+ }
295
+
296
+ /* Обычная карточка Telegram */
297
+ .tg-card .card-icon {
298
+ background: linear-gradient(135deg, #2AABEE, #229ED9);
299
+ color: white;
300
+ box-shadow: 0 4px 12px rgba(42, 171, 238, 0.25);
301
+ }
302
+
303
+ /* ============================================
304
+ КРАСНАЯ КАРТОЧКА (MetroProjectile)
305
+ ============================================ */
306
+ .red-card {
307
+ background: linear-gradient(135deg, rgba(147, 0, 10, 0.85), rgba(179, 20, 18, 0.9));
308
+ backdrop-filter: blur(24px);
309
+ -webkit-backdrop-filter: blur(24px);
310
+ border: 1px solid rgba(255, 100, 100, 0.3);
311
+ box-shadow: 0 8px 32px rgba(211, 47, 47, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
312
+ }
313
+
314
+ .red-card::before {
315
+ background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 80, 80, 0.15), transparent 40%);
316
+ }
317
+
318
+ .red-card .card-icon {
319
+ background: rgba(255, 255, 255, 0.15);
320
+ color: #FFDAD6;
321
+ border: 1px solid rgba(255, 255, 255, 0.2);
322
+ }
323
+
324
+ .red-card .card-title {
325
+ color: #FFDAD6;
326
+ }
327
+
328
+ .red-card .card-desc {
329
+ color: rgba(255, 218, 214, 0.8);
330
+ }
331
+
332
+ .red-card .card-arrow {
333
+ color: rgba(255, 218, 214, 0.7);
334
+ }
335
+
336
+ .red-card:hover .card-arrow {
337
+ color: #FFDAD6;
338
+ }
339
+
340
+ .red-badge {
341
+ position: absolute;
342
+ top: 12px;
343
+ right: 12px;
344
+ background: rgba(255, 255, 255, 0.15);
345
+ color: #FFDAD6;
346
+ font-size: 10px;
347
+ font-weight: 700;
348
+ text-transform: uppercase;
349
+ letter-spacing: 0.5px;
350
+ padding: 4px 10px;
351
+ border-radius: 100px;
352
+ border: 1px solid rgba(255, 255, 255, 0.2);
353
+ }
354
+
355
+ /* ============================================
356
+ DETAILS SECTION
357
+ ============================================ */
358
+ .details-card {
359
+ background: rgba(33, 31, 38, 0.6);
360
+ backdrop-filter: blur(16px);
361
+ border: 1px solid var(--md-sys-color-outline-variant);
362
+ border-radius: var(--radius-lg);
363
+ padding: 24px;
364
+ }
365
+
366
+ .details-grid {
367
+ display: grid;
368
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
369
+ gap: 16px;
370
+ margin-top: 16px;
371
+ }
372
+
373
+ .detail-item {
374
+ display: flex;
375
+ flex-direction: column;
376
+ gap: 4px;
377
+ }
378
+
379
+ .detail-label {
380
+ font-size: 11px;
381
+ text-transform: uppercase;
382
+ letter-spacing: 0.8px;
383
+ color: var(--md-sys-color-on-surface-variant);
384
+ font-weight: 600;
385
+ }
386
+
387
+ .detail-value {
388
+ font-size: 14px;
389
+ color: var(--md-sys-color-on-surface);
390
+ font-weight: 500;
391
+ }
392
+
393
+ .divider {
394
+ height: 1px;
395
+ background: var(--md-sys-color-outline-variant);
396
+ margin: 20px 0;
397
+ }
398
+
399
+ /* ============================================
400
+ FOOTER
401
+ ============================================ */
402
+ .footer {
403
+ text-align: center;
404
+ padding: 24px;
405
+ color: var(--md-sys-color-outline);
406
+ font-size: 12px;
407
+ font-weight: 500;
408
+ }
409
+
410
+ /* ============================================
411
+ ANIMATIONS
412
+ ============================================ */
413
+ @keyframes fadeInUp {
414
+ from { opacity: 0; transform: translateY(20px); }
415
+ to { opacity: 1; transform: translateY(0); }
416
+ }
417
+
418
+ .animate-in {
419
+ animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
420
+ opacity: 0;
421
+ }
422
+
423
+ .delay-1 { animation-delay: 0.1s; }
424
+ .delay-2 { animation-delay: 0.2s; }
425
+ .delay-3 { animation-delay: 0.3s; }
426
+ .delay-4 { animation-delay: 0.4s; }
427
+
428
+ /* Ripple */
429
+ .ripple {
430
+ position: absolute;
431
+ border-radius: 50%;
432
+ background: rgba(255, 255, 255, 0.15);
433
+ transform: scale(0);
434
+ animation: ripple-anim 0.6s linear;
435
+ pointer-events: none;
436
+ }
437
+
438
+ @keyframes ripple-anim {
439
+ to { transform: scale(4); opacity: 0; }
440
+ }
441
+
442
+ /* Responsive */
443
+ @media (max-width: 480px) {
444
+ .container { padding: 32px 16px; }
445
+ .display-name { font-size: 26px; }
446
+ .avatar { width: 100px; height: 100px; font-size: 40px; }
447
+ }
448
+ </style>
449
+ </head>
450
+ <body>
451
+
452
+ <!-- Фоновые лепестки -->
453
+ <div class="petals-bg" aria-hidden="true">
454
+ <div class="petal"></div>
455
+ <div class="petal"></div>
456
+ <div class="petal"></div>
457
+ <div class="petal"></div>
458
+ <div class="petal"></div>
459
+ <div class="petal"></div>
460
+ <div class="petal"></div>
461
+ </div>
462
+
463
+ <main class="container">
464
+ <!-- Профиль -->
465
+ <header class="profile-header animate-in">
466
+ <div class="avatar">XW</div>
467
+ <h1 class="display-name">Xerox Will</h1>
468
+ <div class="username">dev_dolbaeb</div>
469
+ <p class="bio-text">
470
+ Разработчик, энтузиаст ретро-технологий и создатель экспериментальных проектов.
471
+ Люблю чистый код, стабильные системы и эстетичные интерфейсы.
472
+ </p>
473
+ <div class="chip-row">
474
+ <span class="chip">Dev</span>
475
+ <span class="chip">Design</span>
476
+ <span class="chip">Retro</span>
477
+ <span class="chip">Android</span>
478
+ </div>
479
+ </header>
480
+
481
+ <!-- Каналы -->
482
+ <div class="animate-in delay-1">
483
+ <h2 class="section-title">Каналы</h2>
484
+
485
+ <a href="https://t.me/xeroxwill" target="_blank" class="card tg-card" style="margin-bottom: 12px;">
486
+ <div class="card-icon">
487
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
488
+ <path d="M21.198 2.433a2.242 2.242 0 0 0-1.022.215l-16.5 6.498a2.25 2.25 0 0 0-.106 4.03l3.697 1.197 1.443 4.695a1.125 1.125 0 0 0 1.96.456l3.08-3.727 4.797 3.727a2.25 2.25 0 0 0 3.598-1.8V4.68a2.25 2.25 0 0 0-2.052-2.247z"/>
489
+ </svg>
490
+ </div>
491
+ <div class="card-content">
492
+ <div class="card-title">@xeroxwill</div>
493
+ <div class="card-desc">Основной канал — проекты, код, мысли</div>
494
+ </div>
495
+ <div class="card-arrow">→</div>
496
+ </a>
497
+
498
+ <a href="https://t.me/MetroProjectile" target="_blank" class="card red-card">
499
+ <span class="red-badge">Приватный</span>
500
+ <div class="card-icon">🔒</div>
501
+ <div class="card-content">
502
+ <div class="card-title">@MetroProjectile</div>
503
+ <div class="card-desc">Закрытый канал для своих</div>
504
+ </div>
505
+ <div class="card-arrow">→</div>
506
+ </a>
507
+ </div>
508
+
509
+ <!-- Детали -->
510
+ <div class="details-card animate-in delay-2">
511
+ <h2 class="section-title" style="margin: 0 0 4px 0;">Детали</h2>
512
+ <div class="divider"></div>
513
+ <div class="details-grid">
514
+ <div class="detail-item">
515
+ <span class="detail-label">Никнейм</span>
516
+ <span class="detail-value">Xerox Will</span>
517
+ </div>
518
+ <div class="detail-item">
519
+ <span class="detail-label">Username</span>
520
+ <span class="detail-value" style="font-family: monospace; font-size: 13px;">@dev_dolbaeb</span>
521
+ </div>
522
+ <div class="detail-item">
523
+ <span class="detail-label">Платформа</span>
524
+ <span class="detail-value">Android / Web / Linux</span>
525
+ </div>
526
+ <div class="detail-item">
527
+ <span class="detail-label">Статус</span>
528
+ <span class="detail-value" style="color: var(--md-sys-color-primary);">● Онлайн</span>
529
+ </div>
530
+ <div class="detail-item">
531
+ <span class="detail-label">Стек</span>
532
+ <span class="detail-value">Processing, HTML/CSS, Bash</span>
533
+ </div>
534
+ <div class="detail-item">
535
+ <span class="detail-label">Локация</span>
536
+ <span class="detail-value">Termux / APDE / Code-Server</span>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <footer class="footer animate-in delay-3">
542
+ Сделано в стиле Material Design 3 · Xerox Will
543
+ </footer>
544
+ </main>
545
+
546
+ <script>
547
+ // Эффект свечения от курсора на карточ��ах (лёгкий, без просадок)
548
+ document.querySelectorAll('.card').forEach(card => {
549
+ card.addEventListener('mousemove', (e) => {
550
+ const rect = card.getBoundingClientRect();
551
+ const x = e.clientX - rect.left;
552
+ const y = e.clientY - rect.top;
553
+ card.style.setProperty('--mouse-x', `${x}px`);
554
+ card.style.setProperty('--mouse-y', `${y}px`);
555
+ });
556
+ });
557
+
558
+ // Ripple эффект при клике
559
+ document.querySelectorAll('.card').forEach(card => {
560
+ card.addEventListener('click', function(e) {
561
+ const ripple = document.createElement('span');
562
+ ripple.classList.add('ripple');
563
+ const rect = this.getBoundingClientRect();
564
+ const size = Math.max(rect.width, rect.height);
565
+ ripple.style.width = ripple.style.height = size + 'px';
566
+ ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
567
+ ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
568
+ this.appendChild(ripple);
569
+ setTimeout(() => ripple.remove(), 600);
570
+ });
571
+ });
572
+ </script>
573
+ </body>
574
+ </html>