Hugging Face's logo

Spaces:
RyeCatcher
/
focus_guardian
Running

App Files Community
RyeCatcher commited on
Commit
3db8a97
·
verified ·
1 Parent(s): 728fe53

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +582 -17
style.css CHANGED
@@ -1,28 +1,593 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ :root {
2
+ --bg-primary: #0d0d0f;
3
+ --bg-secondary: #16161a;
4
+ --bg-tertiary: #1e1e24;
5
+ --text-primary: #f0f0f0;
6
+ --text-secondary: #a0a0a5;
7
+ --text-muted: #6b6b70;
8
+ --accent-cyan: #00ffd5;
9
+ --accent-amber: #ffaa00;
10
+ --accent-purple: #667eea;
11
+ --accent-green: #4ade80;
12
+ --border-subtle: rgba(255, 255, 255, 0.08);
13
+ }
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
  body {
22
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
23
+ background: var(--bg-primary);
24
+ color: var(--text-primary);
25
+ line-height: 1.6;
26
+ min-height: 100vh;
27
+ }
28
+
29
+ .container {
30
+ max-width: 1000px;
31
+ margin: 0 auto;
32
+ padding: 3rem 2rem;
33
+ }
34
+
35
+ /* Header */
36
+ header {
37
+ text-align: center;
38
+ padding: 2rem 0 1rem;
39
+ }
40
+
41
+ .logo-link {
42
+ display: inline-block;
43
+ margin-bottom: 1.5rem;
44
+ transition: transform 0.2s;
45
+ }
46
+
47
+ .logo-link:hover {
48
+ transform: scale(1.05);
49
+ }
50
+
51
+ .logo {
52
+ width: 80px;
53
+ height: 80px;
54
+ border-radius: 1rem;
55
+ }
56
+
57
+ .badge-wrapper {
58
+ display: block;
59
+ text-align: center;
60
+ margin-bottom: 1.5rem;
61
+ }
62
+
63
+ .badge {
64
+ display: inline-block;
65
+ background: transparent;
66
+ color: var(--accent-cyan);
67
+ border: 1px solid var(--accent-cyan);
68
+ padding: 0.5rem 1.25rem;
69
+ border-radius: 24px;
70
+ font-size: 0.8rem;
71
+ font-weight: 500;
72
+ font-family: 'JetBrains Mono', monospace;
73
+ letter-spacing: 0.02em;
74
  }
75
 
76
  h1 {
77
+ font-family: 'JetBrains Mono', monospace;
78
+ font-size: 3.5rem;
79
+ font-weight: 600;
80
+ margin-bottom: 0.75rem;
81
+ background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
82
+ -webkit-background-clip: text;
83
+ -webkit-text-fill-color: transparent;
84
+ background-clip: text;
85
+ }
86
+
87
+ .tagline {
88
+ font-size: 1.2rem;
89
+ color: var(--text-secondary);
90
+ max-width: 500px;
91
+ margin: 0 auto;
92
+ }
93
+
94
+ /* Animated Demo Section */
95
+ .demo-section {
96
+ display: flex;
97
+ justify-content: center;
98
+ padding: 1.5rem 0 2.5rem;
99
+ }
100
+
101
+ .demo-box {
102
+ background: var(--bg-secondary);
103
+ border-radius: 16px;
104
+ padding: 2.5rem 4rem;
105
+ text-align: center;
106
+ border: 1px solid var(--border-subtle);
107
+ }
108
+
109
+ .robot-icon {
110
+ font-size: 64px;
111
+ margin-bottom: 1.25rem;
112
+ animation: focus-bounce 2s ease-in-out infinite;
113
+ }
114
+
115
+ @keyframes focus-bounce {
116
+ 0%, 100% { transform: translateY(0); }
117
+ 50% { transform: translateY(-6px); }
118
+ }
119
+
120
+ /* Pomodoro Timer Animation */
121
+ .timer-display {
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ gap: 0.5rem;
126
+ margin-bottom: 1rem;
127
+ }
128
+
129
+ .timer-ring {
130
+ width: 80px;
131
+ height: 80px;
132
+ position: relative;
133
+ }
134
+
135
+ .timer-ring svg {
136
+ transform: rotate(-90deg);
137
+ width: 100%;
138
+ height: 100%;
139
+ }
140
+
141
+ .timer-ring circle {
142
+ fill: none;
143
+ stroke-width: 4;
144
+ }
145
+
146
+ .timer-ring .bg {
147
+ stroke: var(--bg-tertiary);
148
+ }
149
+
150
+ .timer-ring .progress {
151
+ stroke: url(#timer-gradient);
152
+ stroke-linecap: round;
153
+ stroke-dasharray: 226;
154
+ stroke-dashoffset: 0;
155
+ animation: timer-progress 25s linear infinite;
156
+ }
157
+
158
+ @keyframes timer-progress {
159
+ 0% { stroke-dashoffset: 0; }
160
+ 100% { stroke-dashoffset: 226; }
161
+ }
162
+
163
+ .timer-text {
164
+ position: absolute;
165
+ top: 50%;
166
+ left: 50%;
167
+ transform: translate(-50%, -50%);
168
+ font-family: 'JetBrains Mono', monospace;
169
+ font-size: 1.1rem;
170
+ font-weight: 600;
171
+ color: var(--accent-cyan);
172
+ }
173
+
174
+ /* Focus Dots Animation */
175
+ .focus-dots {
176
+ display: flex;
177
+ justify-content: center;
178
+ gap: 8px;
179
+ height: 20px;
180
+ align-items: center;
181
+ }
182
+
183
+ .focus-dots span {
184
+ width: 8px;
185
+ height: 8px;
186
+ background: var(--accent-cyan);
187
+ border-radius: 50%;
188
+ animation: pulse-dot 1.5s ease-in-out infinite;
189
+ }
190
+
191
+ .focus-dots span:nth-child(1) { animation-delay: 0s; }
192
+ .focus-dots span:nth-child(2) { animation-delay: 0.2s; }
193
+ .focus-dots span:nth-child(3) { animation-delay: 0.4s; }
194
+ .focus-dots span:nth-child(4) { animation-delay: 0.2s; }
195
+ .focus-dots span:nth-child(5) { animation-delay: 0s; }
196
+
197
+ @keyframes pulse-dot {
198
+ 0%, 100% {
199
+ transform: scale(1);
200
+ opacity: 0.4;
201
+ }
202
+ 50% {
203
+ transform: scale(1.3);
204
+ opacity: 1;
205
+ }
206
+ }
207
+
208
+ /* Feature Grid - 6 cards, 3x2 on desktop */
209
+ .hero {
210
+ padding: 1rem 0 2rem;
211
+ }
212
+
213
+ .feature-grid {
214
+ display: grid;
215
+ grid-template-columns: repeat(3, 1fr);
216
+ gap: 1.25rem;
217
+ }
218
+
219
+ .feature {
220
+ background: var(--bg-secondary);
221
+ padding: 1.5rem;
222
+ border-radius: 12px;
223
+ border: 1px solid var(--border-subtle);
224
+ transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
225
+ }
226
+
227
+ .feature:hover {
228
+ transform: translateY(-4px);
229
+ border-color: rgba(102, 126, 234, 0.3);
230
+ box-shadow: 0 12px 40px rgba(102, 126, 234, 0.08);
231
+ }
232
+
233
+ .icon-box {
234
+ width: 48px;
235
+ height: 48px;
236
+ border-radius: 10px;
237
+ display: flex;
238
+ align-items: center;
239
+ justify-content: center;
240
+ margin-bottom: 1rem;
241
+ }
242
+
243
+ .icon-box.cyan {
244
+ background: rgba(0, 255, 213, 0.12);
245
+ color: var(--accent-cyan);
246
+ }
247
+
248
+ .icon-box.amber {
249
+ background: rgba(255, 170, 0, 0.12);
250
+ color: var(--accent-amber);
251
+ }
252
+
253
+ .icon-box.purple {
254
+ background: rgba(102, 126, 234, 0.12);
255
+ color: var(--accent-purple);
256
+ }
257
+
258
+ .icon-box.green {
259
+ background: rgba(74, 222, 128, 0.12);
260
+ color: var(--accent-green);
261
+ }
262
+
263
+ .feature h3 {
264
+ font-family: 'JetBrains Mono', monospace;
265
+ font-size: 1rem;
266
+ font-weight: 500;
267
+ margin-bottom: 0.5rem;
268
+ color: var(--text-primary);
269
+ }
270
+
271
+ .feature p {
272
+ font-size: 0.875rem;
273
+ color: var(--text-secondary);
274
+ line-height: 1.5;
275
+ }
276
+
277
+ /* Install Section */
278
+ .install {
279
+ background: var(--bg-secondary);
280
+ padding: 2.5rem;
281
+ border-radius: 16px;
282
+ margin: 2.5rem 0;
283
+ border: 1px solid var(--border-subtle);
284
+ }
285
+
286
+ .install h2 {
287
+ font-family: 'JetBrains Mono', monospace;
288
+ font-size: 1.25rem;
289
+ margin-bottom: 1.5rem;
290
+ color: var(--accent-purple);
291
+ text-align: center;
292
+ }
293
+
294
+ .install-steps {
295
+ display: flex;
296
+ flex-direction: column;
297
+ gap: 1.25rem;
298
  }
299
 
300
+ .step {
301
+ display: flex;
302
+ align-items: flex-start;
303
+ gap: 1rem;
 
304
  }
305
 
306
+ .step-num {
307
+ width: 32px;
308
+ height: 32px;
309
+ background: var(--bg-tertiary);
310
+ border-radius: 8px;
311
+ display: flex;
312
+ align-items: center;
313
+ justify-content: center;
314
+ font-family: 'JetBrains Mono', monospace;
315
+ font-size: 0.875rem;
316
+ font-weight: 600;
317
+ color: var(--accent-purple);
318
+ flex-shrink: 0;
319
  }
320
 
321
+ .step-content {
322
+ flex: 1;
323
+ }
324
+
325
+ .step-content h4 {
326
+ font-size: 0.95rem;
327
+ font-weight: 500;
328
+ margin-bottom: 0.5rem;
329
+ color: var(--text-primary);
330
+ }
331
+
332
+ .code-block {
333
+ position: relative;
334
+ }
335
+
336
+ .step-content code {
337
+ display: block;
338
+ background: var(--bg-primary);
339
+ padding: 0.75rem 1rem;
340
+ padding-right: 4rem;
341
+ border-radius: 8px;
342
+ font-family: 'JetBrains Mono', monospace;
343
+ font-size: 0.8rem;
344
+ overflow-x: auto;
345
+ border: 1px solid var(--border-subtle);
346
+ color: var(--accent-cyan);
347
+ }
348
+
349
+ .copy-btn {
350
+ position: absolute;
351
+ right: 0.5rem;
352
+ top: 50%;
353
+ transform: translateY(-50%);
354
+ background: var(--bg-tertiary);
355
+ border: 1px solid var(--border-subtle);
356
+ color: var(--text-secondary);
357
+ padding: 0.25rem 0.5rem;
358
+ border-radius: 4px;
359
+ font-family: 'JetBrains Mono', monospace;
360
+ font-size: 0.75rem;
361
+ cursor: pointer;
362
+ transition: all 0.2s;
363
+ }
364
+
365
+ .copy-btn:hover {
366
+ background: var(--accent-cyan);
367
+ color: var(--bg-primary);
368
+ border-color: var(--accent-cyan);
369
+ }
370
+
371
+ .copy-btn.copied {
372
+ background: var(--accent-cyan);
373
+ color: var(--bg-primary);
374
+ border-color: var(--accent-cyan);
375
+ }
376
+
377
+ .step-content p {
378
+ font-size: 0.9rem;
379
+ color: var(--text-secondary);
380
+ }
381
+
382
+ .step-content strong {
383
+ color: var(--accent-cyan);
384
+ font-weight: 500;
385
+ }
386
+
387
+ /* How it works */
388
+ .how-it-works {
389
+ padding: 2rem 0;
390
+ }
391
+
392
+ .how-it-works h2 {
393
+ font-family: 'JetBrains Mono', monospace;
394
+ font-size: 1.25rem;
395
+ margin-bottom: 2rem;
396
+ color: var(--text-primary);
397
+ text-align: center;
398
+ }
399
+
400
+ .workflow {
401
+ display: flex;
402
+ align-items: center;
403
+ justify-content: center;
404
+ gap: 1rem;
405
+ flex-wrap: wrap;
406
+ }
407
+
408
+ .workflow-step {
409
+ text-align: center;
410
+ padding: 1rem;
411
+ }
412
+
413
+ .workflow-icon {
414
+ width: 64px;
415
+ height: 64px;
416
+ background: var(--bg-secondary);
417
+ border-radius: 12px;
418
+ display: flex;
419
+ align-items: center;
420
+ justify-content: center;
421
+ margin: 0 auto 0.75rem;
422
+ color: var(--accent-purple);
423
+ border: 1px solid var(--border-subtle);
424
+ }
425
+
426
+ .workflow-step p {
427
+ font-size: 0.875rem;
428
+ color: var(--text-secondary);
429
+ max-width: 120px;
430
+ }
431
+
432
+ .workflow-arrow {
433
+ color: var(--text-muted);
434
+ font-size: 1.5rem;
435
+ }
436
+
437
+ /* About */
438
+ .about {
439
+ padding: 2rem 0;
440
+ text-align: center;
441
+ max-width: 700px;
442
+ margin: 0 auto;
443
+ }
444
+
445
+ .about h2 {
446
+ font-family: 'JetBrains Mono', monospace;
447
+ font-size: 1.25rem;
448
+ margin-bottom: 1.25rem;
449
+ color: var(--text-primary);
450
+ }
451
+
452
+ .about p {
453
+ color: var(--text-secondary);
454
+ margin-bottom: 1rem;
455
+ font-size: 1rem;
456
+ line-height: 1.7;
457
+ }
458
+
459
+ .about a {
460
+ color: var(--accent-cyan);
461
+ text-decoration: none;
462
+ }
463
+
464
+ .about a:hover {
465
+ text-decoration: underline;
466
+ }
467
+
468
+ .about strong {
469
+ color: var(--accent-cyan);
470
+ font-weight: 500;
471
+ }
472
+
473
+ .about-links {
474
+ display: flex;
475
+ gap: 2rem;
476
+ justify-content: center;
477
+ margin-top: 1.5rem;
478
+ flex-wrap: wrap;
479
+ }
480
+
481
+ .about-links a {
482
+ color: var(--accent-purple);
483
+ text-decoration: none;
484
+ font-weight: 500;
485
+ transition: color 0.2s;
486
+ }
487
+
488
+ .about-links a:hover {
489
+ color: var(--accent-cyan);
490
+ }
491
+
492
+ /* Footer */
493
+ footer {
494
+ text-align: center;
495
+ padding: 2.5rem 0 1rem;
496
+ border-top: 1px solid var(--border-subtle);
497
+ margin-top: 2rem;
498
+ }
499
+
500
+ .footer-logo-link {
501
+ display: inline-flex;
502
+ align-items: center;
503
+ gap: 0.75rem;
504
+ text-decoration: none;
505
+ margin-bottom: 1.5rem;
506
+ transition: transform 0.2s;
507
+ }
508
+
509
+ .footer-logo-link:hover {
510
+ transform: scale(1.02);
511
+ }
512
+
513
+ .footer-logo {
514
+ width: 48px;
515
+ height: 48px;
516
+ border-radius: 0.5rem;
517
+ }
518
+
519
+ .footer-site-name {
520
+ font-family: 'JetBrains Mono', monospace;
521
+ font-size: 1.25rem;
522
+ color: var(--accent-cyan);
523
+ }
524
+
525
+ .footer-links {
526
+ display: flex;
527
+ flex-wrap: wrap;
528
+ justify-content: center;
529
+ gap: 1.5rem;
530
+ margin-bottom: 1.5rem;
531
+ }
532
+
533
+ .footer-links a {
534
+ display: inline-flex;
535
+ align-items: center;
536
+ gap: 0.5rem;
537
+ color: var(--text-secondary);
538
+ text-decoration: none;
539
+ font-size: 0.875rem;
540
+ transition: color 0.2s;
541
+ }
542
+
543
+ .footer-links a:hover {
544
+ color: var(--accent-cyan);
545
+ }
546
+
547
+ .social-icon {
548
+ width: 1.25rem;
549
+ height: 1.25rem;
550
+ }
551
+
552
+ .copyright {
553
+ font-size: 0.8rem;
554
+ color: var(--text-muted);
555
+ font-family: 'JetBrains Mono', monospace;
556
+ }
557
+
558
+ /* Responsive */
559
+ @media (max-width: 900px) {
560
+ .feature-grid {
561
+ grid-template-columns: repeat(2, 1fr);
562
+ }
563
+ }
564
+
565
+ @media (max-width: 600px) {
566
+ h1 {
567
+ font-size: 2.5rem;
568
+ }
569
+
570
+ .container {
571
+ padding: 2rem 1.25rem;
572
+ }
573
+
574
+ .feature-grid {
575
+ grid-template-columns: 1fr;
576
+ }
577
+
578
+ .workflow {
579
+ flex-direction: column;
580
+ }
581
+
582
+ .workflow-arrow {
583
+ transform: rotate(90deg);
584
+ }
585
+
586
+ .install {
587
+ padding: 1.5rem;
588
+ }
589
+
590
+ .demo-box {
591
+ padding: 2rem;
592
+ }
593
  }