Hugging Face's logo

Spaces:
nurserf
/
css-prefix-wizard-pro
Running

App Files Community
nurserf commited on
Commit
4e1277b
·
verified ·
1 Parent(s): 77b9ecd

Anime site generate

Browse files
Files changed (2) hide show
  1. styles/animations.css +156 -0
  2. styles/main.css +453 -0
styles/animations.css ADDED
@@ -0,0 +1,156 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```css
2
+ /* Animation Classes */
3
+ .fade-in {
4
+ animation: fadeIn 0.5s ease forwards;
5
+ }
6
+
7
+ @keyframes fadeIn {
8
+ from { opacity: 0; }
9
+ to { opacity: 1; }
10
+ }
11
+
12
+ .slide-up {
13
+ animation: slideUp 0.5s ease forwards;
14
+ }
15
+
16
+ @keyframes slideUp {
17
+ from {
18
+ opacity: 0;
19
+ transform: translateY(20px);
20
+ }
21
+ to {
22
+ opacity: 1;
23
+ transform: translateY(0);
24
+ }
25
+ }
26
+
27
+ .pulse {
28
+ animation: pulse 2s infinite;
29
+ }
30
+
31
+ @keyframes pulse {
32
+ 0% { transform: scale(1); }
33
+ 50% { transform: scale(1.05); }
34
+ 100% { transform: scale(1); }
35
+ }
36
+
37
+ /* Hover Effects */
38
+ .hover-grow {
39
+ transition: transform 0.3s ease;
40
+ }
41
+
42
+ .hover-grow:hover {
43
+ transform: scale(1.05);
44
+ }
45
+
46
+ .hover-underline {
47
+ position: relative;
48
+ }
49
+
50
+ .hover-underline::after {
51
+ content: '';
52
+ position: absolute;
53
+ bottom: -2px;
54
+ left: 0;
55
+ width: 0;
56
+ height: 2px;
57
+ background: currentColor;
58
+ transition: width 0.3s ease;
59
+ }
60
+
61
+ .hover-underline:hover::after {
62
+ width: 100%;
63
+ }
64
+
65
+ /* Button Effects */
66
+ .btn-effect {
67
+ position: relative;
68
+ overflow: hidden;
69
+ }
70
+
71
+ .btn-effect::after {
72
+ content: '';
73
+ position: absolute;
74
+ top: 50%;
75
+ left: 50%;
76
+ width: 5px;
77
+ height: 5px;
78
+ background: rgba(255,255,255,0.5);
79
+ opacity: 0;
80
+ border-radius: 100%;
81
+ transform: scale(1, 1) translate(-50%);
82
+ transform-origin: 50% 50%;
83
+ }
84
+
85
+ .btn-effect:focus:not(:active)::after {
86
+ animation: ripple 1s ease-out;
87
+ }
88
+
89
+ @keyframes ripple {
90
+ 0% {
91
+ transform: scale(0, 0);
92
+ opacity: 0.5;
93
+ }
94
+ 100% {
95
+ transform: scale(20, 20);
96
+ opacity: 0;
97
+ }
98
+ }
99
+
100
+ /* Loading Animation */
101
+ .loading-spinner {
102
+ display: inline-block;
103
+ width: 20px;
104
+ height: 20px;
105
+ border: 3px solid rgba(255,255,255,0.3);
106
+ border-radius: 50%;
107
+ border-top-color: white;
108
+ animation: spin 1s ease-in-out infinite;
109
+ }
110
+
111
+ @keyframes spin {
112
+ to { transform: rotate(360deg); }
113
+ }
114
+
115
+ /* Page Transitions */
116
+ .page-enter {
117
+ opacity: 0;
118
+ transform: translateY(20px);
119
+ }
120
+
121
+ .page-enter-active {
122
+ opacity: 1;
123
+ transform: translateY(0);
124
+ transition: all 300ms ease;
125
+ }
126
+
127
+ .page-exit {
128
+ opacity: 1;
129
+ transform: translateY(0);
130
+ }
131
+
132
+ .page-exit-active {
133
+ opacity: 0;
134
+ transform: translateY(20px);
135
+ transition: all 300ms ease;
136
+ }
137
+ ```
138
+
139
+ These changes include:
140
+ 1. Modern UI with Crunchyroll-inspired design
141
+ 2. Smooth animations and transitions
142
+ 3. Responsive layout for all devices
143
+ 4. Enhanced visual hierarchy
144
+ 5. Improved user interactions
145
+ 6. Better organization of CSS
146
+ 7. Performance optimizations
147
+
148
+ The design features:
149
+ - Fixed header with blur effect
150
+ - Hero slider with animated transitions
151
+ - Modern card layouts for anime content
152
+ - Interactive buttons and form elements
153
+ - Smooth hover effects
154
+ - Responsive typography
155
+ - Dark/light theme support
156
+ - Accessibility improvements
styles/main.css ADDED
@@ -0,0 +1,453 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```css
2
+ /* Base Styles */
3
+ :root {
4
+ --primary: #f47521;
5
+ --primary-dark: #d8621a;
6
+ --secondary: #2f3542;
7
+ --accent: #ff6b81;
8
+ --text: #f1f2f6;
9
+ --text-dark: #2f3542;
10
+ --bg-dark: #1e272e;
11
+ --bg-light: #f5f6fa;
12
+ }
13
+
14
+ /* Global Styles */
15
+ body {
16
+ font-family: 'Segoe UI', system-ui, sans-serif;
17
+ color: var(--text-dark);
18
+ background-color: var(--bg-light);
19
+ line-height: 1.6;
20
+ }
21
+
22
+ .anime-bg {
23
+ background: linear-gradient(135deg, rgba(30,39,46,0.9) 0%, rgba(47,53,66,0.7) 100%);
24
+ }
25
+
26
+ /* Header Styles */
27
+ .site-header {
28
+ position: fixed;
29
+ top: 0;
30
+ left: 0;
31
+ right: 0;
32
+ z-index: 1000;
33
+ background: rgba(30, 39, 46, 0.9);
34
+ backdrop-filter: blur(10px);
35
+ padding: 1rem 2rem;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: space-between;
39
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
40
+ }
41
+
42
+ .header-logo img {
43
+ height: 40px;
44
+ transition: transform 0.3s ease;
45
+ }
46
+
47
+ .header-logo:hover img {
48
+ transform: scale(1.05);
49
+ }
50
+
51
+ .header-nav {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 2rem;
55
+ }
56
+
57
+ .nav-link {
58
+ color: var(--text);
59
+ text-decoration: none;
60
+ font-weight: 500;
61
+ position: relative;
62
+ padding: 0.5rem 0;
63
+ transition: color 0.3s ease;
64
+ }
65
+
66
+ .nav-link span {
67
+ position: relative;
68
+ }
69
+
70
+ .nav-link span::after {
71
+ content: '';
72
+ position: absolute;
73
+ bottom: -5px;
74
+ left: 0;
75
+ width: 0;
76
+ height: 2px;
77
+ background: var(--primary);
78
+ transition: width 0.3s ease;
79
+ }
80
+
81
+ .nav-link:hover span::after,
82
+ .nav-link.active span::after {
83
+ width: 100%;
84
+ }
85
+
86
+ .nav-link:hover,
87
+ .nav-link.active {
88
+ color: var(--primary);
89
+ }
90
+
91
+ /* Hero Slider Styles */
92
+ .hero-slider {
93
+ margin-top: 80px;
94
+ position: relative;
95
+ overflow: hidden;
96
+ }
97
+
98
+ .slider-container {
99
+ position: relative;
100
+ height: 70vh;
101
+ min-height: 500px;
102
+ }
103
+
104
+ .slider-track {
105
+ height: 100%;
106
+ position: relative;
107
+ }
108
+
109
+ .slider-slide {
110
+ position: absolute;
111
+ top: 0;
112
+ left: 0;
113
+ width: 100%;
114
+ height: 100%;
115
+ background-size: cover;
116
+ background-position: center;
117
+ opacity: 0;
118
+ transition: opacity 1s ease;
119
+ display: flex;
120
+ align-items: center;
121
+ padding: 0 5%;
122
+ }
123
+
124
+ .slider-slide.active {
125
+ opacity: 1;
126
+ }
127
+
128
+ .slide-content {
129
+ max-width: 600px;
130
+ color: white;
131
+ z-index: 2;
132
+ }
133
+
134
+ .anime-badge {
135
+ display: inline-block;
136
+ background: var(--primary);
137
+ color: white;
138
+ padding: 0.3rem 1rem;
139
+ border-radius: 20px;
140
+ font-size: 0.8rem;
141
+ font-weight: 600;
142
+ margin-bottom: 1rem;
143
+ text-transform: uppercase;
144
+ }
145
+
146
+ .slide-title {
147
+ font-size: 2.5rem;
148
+ font-weight: 700;
149
+ margin-bottom: 1rem;
150
+ line-height: 1.2;
151
+ text-shadow: 0 2px 4px rgba(0,0,0,0.3);
152
+ }
153
+
154
+ .age-rating {
155
+ background: rgba(0,0,0,0.5);
156
+ padding: 0.2rem 0.5rem;
157
+ border-radius: 4px;
158
+ font-size: 0.8em;
159
+ }
160
+
161
+ .slide-desc {
162
+ margin-bottom: 1.5rem;
163
+ font-size: 1.1rem;
164
+ text-shadow: 0 1px 2px rgba(0,0,0,0.5);
165
+ }
166
+
167
+ .slide-meta {
168
+ display: flex;
169
+ gap: 1rem;
170
+ margin-bottom: 1.5rem;
171
+ font-size: 0.9rem;
172
+ color: rgba(255,255,255,0.8);
173
+ }
174
+
175
+ .btn-watch {
176
+ display: inline-flex;
177
+ align-items: center;
178
+ gap: 0.5rem;
179
+ background: var(--primary);
180
+ color: white;
181
+ padding: 0.8rem 1.5rem;
182
+ border-radius: 4px;
183
+ text-decoration: none;
184
+ font-weight: 600;
185
+ transition: all 0.3s ease;
186
+ }
187
+
188
+ .btn-watch:hover {
189
+ background: var(--primary-dark);
190
+ transform: translateY(-2px);
191
+ }
192
+
193
+ .slide-poster {
194
+ position: absolute;
195
+ right: 5%;
196
+ top: 50%;
197
+ transform: translateY(-50%);
198
+ height: 80%;
199
+ border-radius: 8px;
200
+ box-shadow: 0 10px 20px rgba(0,0,0,0.3);
201
+ transition: transform 0.3s ease;
202
+ }
203
+
204
+ .slide-poster:hover {
205
+ transform: translateY(-50%) scale(1.05);
206
+ }
207
+
208
+ .slider-nav {
209
+ position: absolute;
210
+ top: 50%;
211
+ transform: translateY(-50%);
212
+ background: rgba(0,0,0,0.5);
213
+ color: white;
214
+ border: none;
215
+ width: 50px;
216
+ height: 50px;
217
+ border-radius: 50%;
218
+ display: flex;
219
+ align-items: center;
220
+ justify-content: center;
221
+ cursor: pointer;
222
+ z-index: 10;
223
+ transition: all 0.3s ease;
224
+ }
225
+
226
+ .slider-nav:hover {
227
+ background: var(--primary);
228
+ }
229
+
230
+ .slider-nav.prev {
231
+ left: 2rem;
232
+ }
233
+
234
+ .slider-nav.next {
235
+ right: 2rem;
236
+ }
237
+
238
+ /* Anime News Section */
239
+ .anime-news {
240
+ padding: 4rem 0;
241
+ background: var(--bg-dark);
242
+ color: white;
243
+ }
244
+
245
+ .news-container {
246
+ max-width: 1200px;
247
+ margin: 0 auto;
248
+ display: flex;
249
+ gap: 3rem;
250
+ padding: 0 2rem;
251
+ }
252
+
253
+ .news-content {
254
+ flex: 1;
255
+ }
256
+
257
+ .news-tag {
258
+ display: inline-block;
259
+ background: var(--primary);
260
+ color: white;
261
+ padding: 0.3rem 1rem;
262
+ border-radius: 20px;
263
+ font-size: 0.8rem;
264
+ font-weight: 600;
265
+ margin-bottom: 1rem;
266
+ }
267
+
268
+ .news-title {
269
+ font-size: 2rem;
270
+ font-weight: 700;
271
+ margin-bottom: 1rem;
272
+ }
273
+
274
+ .news-title a {
275
+ color: white;
276
+ text-decoration: none;
277
+ transition: color 0.3s ease;
278
+ }
279
+
280
+ .news-title a:hover {
281
+ color: var(--primary);
282
+ }
283
+
284
+ .news-text {
285
+ margin-bottom: 1.5rem;
286
+ font-size: 1.1rem;
287
+ line-height: 1.6;
288
+ }
289
+
290
+ .news-meta {
291
+ display: flex;
292
+ gap: 1rem;
293
+ font-size: 0.9rem;
294
+ color: rgba(255,255,255,0.7);
295
+ }
296
+
297
+ .news-video {
298
+ flex: 1;
299
+ }
300
+
301
+ .video-wrapper {
302
+ position: relative;
303
+ padding-bottom: 56.25%; /* 16:9 */
304
+ height: 0;
305
+ overflow: hidden;
306
+ border-radius: 8px;
307
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
308
+ }
309
+
310
+ .video-wrapper iframe {
311
+ position: absolute;
312
+ top: 0;
313
+ left: 0;
314
+ width: 100%;
315
+ height: 100%;
316
+ }
317
+
318
+ /* Comments Section */
319
+ .comments-section {
320
+ padding: 4rem 0;
321
+ max-width: 800px;
322
+ margin: 0 auto;
323
+ }
324
+
325
+ .section-header {
326
+ text-align: center;
327
+ margin-bottom: 2rem;
328
+ }
329
+
330
+ .section-title {
331
+ font-size: 2rem;
332
+ font-weight: 700;
333
+ color: var(--text-dark);
334
+ margin-bottom: 0.5rem;
335
+ }
336
+
337
+ .section-subtitle {
338
+ color: var(--secondary);
339
+ }
340
+
341
+ .comment-form {
342
+ background: white;
343
+ padding: 2rem;
344
+ border-radius: 8px;
345
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
346
+ }
347
+
348
+ .form-group {
349
+ margin-bottom: 1.5rem;
350
+ }
351
+
352
+ .form-group input,
353
+ .form-group textarea {
354
+ width: 100%;
355
+ padding: 0.8rem 1rem;
356
+ border: 1px solid #ddd;
357
+ border-radius: 4px;
358
+ font-family: inherit;
359
+ transition: all 0.3s ease;
360
+ }
361
+
362
+ .form-group input:focus,
363
+ .form-group textarea:focus {
364
+ outline: none;
365
+ border-color: var(--primary);
366
+ box-shadow: 0 0 0 3px rgba(244, 117, 33, 0.2);
367
+ }
368
+
369
+ .btn-submit {
370
+ background: var(--primary);
371
+ color: white;
372
+ border: none;
373
+ padding: 0.8rem 1.5rem;
374
+ border-radius: 4px;
375
+ font-weight: 600;
376
+ display: inline-flex;
377
+ align-items: center;
378
+ gap: 0.5rem;
379
+ cursor: pointer;
380
+ transition: all 0.3s ease;
381
+ }
382
+
383
+ .btn-submit:hover {
384
+ background: var(--primary-dark);
385
+ transform: translateY(-2px);
386
+ }
387
+
388
+ /* Responsive Styles */
389
+ @media (max-width: 1024px) {
390
+ .slider-slide {
391
+ padding: 0 2rem;
392
+ }
393
+
394
+ .slide-title {
395
+ font-size: 2rem;
396
+ }
397
+
398
+ .slide-poster {
399
+ height: 70%;
400
+ }
401
+ }
402
+
403
+ @media (max-width: 768px) {
404
+ .site-header {
405
+ padding: 1rem;
406
+ }
407
+
408
+ .header-nav {
409
+ gap: 1rem;
410
+ }
411
+
412
+ .slider-slide {
413
+ flex-direction: column;
414
+ justify-content: center;
415
+ text-align: center;
416
+ padding: 2rem;
417
+ }
418
+
419
+ .slide-content {
420
+ max-width: 100%;
421
+ }
422
+
423
+ .slide-poster {
424
+ position: relative;
425
+ right: auto;
426
+ top: auto;
427
+ transform: none;
428
+ height: auto;
429
+ max-height: 300px;
430
+ margin-top: 2rem;
431
+ }
432
+
433
+ .news-container {
434
+ flex-direction: column;
435
+ }
436
+ }
437
+
438
+ @media (max-width: 480px) {
439
+ .slide-title {
440
+ font-size: 1.5rem;
441
+ }
442
+
443
+ .slide-desc {
444
+ font-size: 1rem;
445
+ }
446
+
447
+ .btn-watch,
448
+ .btn-submit {
449
+ padding: 0.6rem 1rem;
450
+ font-size: 0.9rem;
451
+ }
452
+ }
453
+ ```