Ezequield commited on
Commit
2a77993
·
verified ·
1 Parent(s): 32be61e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +613 -560
index.html CHANGED
@@ -3,496 +3,391 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Assemblaje Duelxe | TheLogoCollection</title>
7
-
8
- <!-- Import RemixIcon for Icons -->
9
- <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
10
-
11
- <!-- Import Google Fonts -->
12
  <link rel="preconnect" href="https://fonts.googleapis.com">
13
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
- <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400;600&family=Syncopate:wght@400;700&display=swap" rel="stylesheet">
 
 
15
 
16
  <style>
17
- /* --- CSS VARIABLES & RESET --- */
18
  :root {
19
- /* Palette: Luxury Industrial (Dark Steel & Gold/Bronze) */
20
- --bg-color: #0b0c10;
21
- --surface-color: #1f2833;
22
- --surface-hover: #2b3644;
23
- --primary-accent: #c5a059; /* Metallic Gold */
24
- --secondary-accent: #66fcf1; /* Cyan Tech highlight */
25
- --text-main: #ffffff;
26
- --text-muted: #8c92a0;
27
-
28
- --font-display: 'Cinzel', serif;
29
- --font-tech: 'Syncopate', sans-serif;
30
- --font-body: 'Montserrat', sans-serif;
31
-
32
- --border-radius: 12px;
33
- --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
34
-
35
- /* Dynamic Logo Variables (Controlled by JS) */
36
- --logo-color: #c5a059;
37
- --logo-scale: 1;
38
- --logo-rotation: 0deg;
39
  }
40
 
41
  * {
 
42
  margin: 0;
43
  padding: 0;
44
- box-sizing: border-box;
45
- }
46
-
47
- html {
48
- scroll-behavior: smooth;
49
  }
50
 
51
  body {
52
- background-color: var(--bg-color);
 
53
  color: var(--text-main);
54
- font-family: var(--font-body);
55
- line-height: 1.6;
56
- overflow-x: hidden;
57
- }
58
-
59
- a {
60
- text-decoration: none;
61
- color: inherit;
62
- }
63
-
64
- ul {
65
- list-style: none;
66
  }
67
 
68
- /* --- HEADER & NAV --- */
69
  header {
70
- position: fixed;
71
- top: 0;
72
- width: 100%;
73
- padding: 1.5rem 5%;
74
  display: flex;
75
- justify-content: space-between;
76
  align-items: center;
77
- z-index: 1000;
78
- background: rgba(11, 12, 16, 0.8);
79
- backdrop-filter: blur(10px);
80
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
81
  }
82
 
83
- .brand {
84
- font-family: var(--font-tech);
85
- font-size: 1.2rem;
86
- letter-spacing: 2px;
87
- color: var(--text-main);
88
  display: flex;
89
  align-items: center;
90
  gap: 10px;
 
 
 
91
  }
92
 
93
- .brand i {
94
- color: var(--primary-accent);
95
  }
96
 
97
  .anycoder-link {
98
  font-size: 0.85rem;
99
  color: var(--text-muted);
100
- border: 1px solid var(--text-muted);
101
- padding: 0.5rem 1rem;
102
- border-radius: 50px;
103
- transition: var(--transition);
104
- display: flex;
105
- align-items: center;
106
- gap: 8px;
107
  }
108
 
109
  .anycoder-link:hover {
110
- color: var(--bg-color);
111
- background-color: var(--primary-accent);
112
- border-color: var(--primary-accent);
113
- transform: translateY(-2px);
114
  }
115
 
116
- /* --- HERO SECTION --- */
117
- .hero {
118
- min-height: 100vh;
119
  display: flex;
120
- flex-direction: column;
121
- justify-content: center;
122
- align-items: center;
123
- position: relative;
124
  overflow: hidden;
125
- padding: 6rem 2rem 2rem;
126
- }
127
-
128
- /* Background Grid Effect */
129
- .hero::before {
130
- content: '';
131
- position: absolute;
132
- top: 0;
133
- left: 0;
134
- width: 100%;
135
- height: 100%;
136
- background-image:
137
- linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
138
- linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
139
- background-size: 50px 50px;
140
- z-index: -1;
141
- mask-image: radial-gradient(circle, black 40%, transparent 80%);
142
- }
143
-
144
- .hero-content {
145
- text-align: center;
146
- max-width: 800px;
147
- z-index: 10;
148
- }
149
-
150
- .hero-tag {
151
- font-family: var(--font-tech);
152
- color: var(--primary-accent);
153
- letter-spacing: 4px;
154
- font-size: 0.9rem;
155
- margin-bottom: 1rem;
156
- opacity: 0;
157
- animation: fadeUp 0.8s ease forwards 0.2s;
158
- }
159
-
160
- /* THE LOGO SVG STYLING */
161
- .logo-container {
162
- width: 300px;
163
- height: 300px;
164
- margin: 0 auto 2rem;
165
- position: relative;
166
- opacity: 0;
167
- animation: fadeUp 1s ease forwards 0.4s;
168
- transition: transform 0.5s ease;
169
  }
170
 
171
- /* Interactive hover effect on the logo */
172
- .logo-container:hover {
173
- transform: scale(1.05);
174
- }
175
-
176
- .main-logo-svg {
177
- width: 100%;
178
- height: 100%;
179
- filter: drop-shadow(0 0 20px rgba(197, 160, 89, 0.2));
180
- }
181
-
182
- .logo-path-outer {
183
- fill: none;
184
- stroke: var(--logo-color);
185
- stroke-width: 2;
186
- stroke-dasharray: 1000;
187
- stroke-dashoffset: 1000;
188
- animation: drawLine 2.5s ease forwards 0.8s;
189
- }
190
-
191
- .logo-path-inner {
192
- fill: var(--logo-color);
193
- opacity: 0.1;
194
  }
195
 
196
- .logo-text {
197
- font-family: var(--font-display);
198
- font-weight: 700;
199
- font-size: 3.5rem;
200
- fill: var(--text-main);
201
- letter-spacing: 5px;
202
- text-transform: uppercase;
203
  }
204
 
205
- .logo-subtext {
206
- font-family: var(--font-body);
207
- font-weight: 300;
208
- font-size: 1rem;
209
- letter-spacing: 8px;
210
- fill: var(--text-muted);
211
  text-transform: uppercase;
212
- }
213
-
214
- .hero-title {
215
- font-family: var(--font-display);
216
- font-size: clamp(2.5rem, 5vw, 4rem);
217
- line-height: 1.2;
218
- margin-bottom: 1.5rem;
219
- background: linear-gradient(to right, #fff, #8c92a0);
220
- -webkit-background-clip: text;
221
- -webkit-text-fill-color: transparent;
222
- opacity: 0;
223
- animation: fadeUp 0.8s ease forwards 0.6s;
224
- }
225
-
226
- .hero-desc {
227
  color: var(--text-muted);
228
- font-size: 1.1rem;
229
- max-width: 600px;
230
- margin: 0 auto 3rem;
231
- opacity: 0;
232
- animation: fadeUp 0.8s ease forwards 0.8s;
233
  }
234
 
235
- .btn {
236
- display: inline-block;
237
- padding: 1rem 2.5rem;
238
- background: transparent;
239
- border: 1px solid var(--primary-accent);
240
- color: var(--primary-accent);
241
- font-family: var(--font-tech);
242
- font-size: 0.9rem;
243
- letter-spacing: 2px;
244
- transition: var(--transition);
245
- cursor: pointer;
246
- position: relative;
247
- overflow: hidden;
248
- opacity: 0;
249
- animation: fadeUp 0.8s ease forwards 1s;
250
  }
251
 
252
- .btn::before {
253
- content: '';
254
- position: absolute;
255
- top: 0;
256
- left: -100%;
257
  width: 100%;
258
- height: 100%;
259
- background: var(--primary-accent);
260
- transition: var(--transition);
261
- z-index: -1;
262
- }
263
-
264
- .btn:hover {
265
- color: var(--bg-color);
266
- }
267
-
268
- .btn:hover::before {
269
- left: 0;
270
- }
271
-
272
- /* --- INTERACTIVE CUSTOMIZER SECTION --- */
273
- .customizer-section {
274
- padding: 5rem 5%;
275
- background-color: var(--surface-color);
276
- border-top: 1px solid rgba(255,255,255,0.05);
277
- border-bottom: 1px solid rgba(255,255,255,0.05);
278
- }
279
-
280
- .section-header {
281
- text-align: center;
282
- margin-bottom: 3rem;
283
- }
284
-
285
- .section-header h2 {
286
- font-family: var(--font-tech);
287
- font-size: 1.5rem;
288
  color: var(--text-main);
289
- margin-bottom: 0.5rem;
290
- }
291
-
292
- .section-header p {
293
- color: var(--text-muted);
294
  font-size: 0.9rem;
 
295
  }
296
 
297
- .customizer-grid {
298
- display: grid;
299
- grid-template-columns: 1fr 1fr;
300
- gap: 4rem;
301
- align-items: center;
302
- }
303
-
304
- /* Controls Panel */
305
- .controls {
306
- background: rgba(0,0,0,0.2);
307
- padding: 2rem;
308
- border-radius: var(--border-radius);
309
- border: 1px solid rgba(255,255,255,0.05);
310
- }
311
-
312
- .control-group {
313
- margin-bottom: 1.5rem;
314
  }
315
 
316
- .control-group label {
317
- display: block;
318
- font-family: var(--font-tech);
319
- font-size: 0.8rem;
320
- margin-bottom: 0.8rem;
321
- color: var(--text-muted);
322
- }
323
-
324
- /* Custom Range Slider */
325
  input[type="range"] {
326
- width: 100%;
327
  -webkit-appearance: none;
328
- background: transparent;
 
 
 
 
329
  }
330
 
331
  input[type="range"]::-webkit-slider-thumb {
332
  -webkit-appearance: none;
333
- height: 16px;
334
  width: 16px;
 
335
  border-radius: 50%;
336
- background: var(--primary-accent);
337
  cursor: pointer;
338
- margin-top: -6px;
339
- box-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
 
 
 
340
  }
341
 
342
- input[type="range"]::-webkit-slider-runnable-track {
 
 
343
  width: 100%;
344
- height: 4px;
 
345
  cursor: pointer;
346
- background: rgba(255,255,255,0.1);
347
- border-radius: 2px;
348
  }
349
-
350
- /* Color Picker */
351
- .color-options {
352
- display: flex;
353
- gap: 1rem;
 
 
 
354
  }
355
 
356
- .color-swatch {
357
- width: 30px;
358
- height: 30px;
359
- border-radius: 50%;
360
- cursor: pointer;
361
- border: 2px solid transparent;
362
- transition: var(--transition);
363
  }
364
 
365
- .color-swatch.active {
366
- border-color: #fff;
367
- transform: scale(1.1);
368
  }
369
 
370
- /* Live Preview Area */
371
- .preview-area {
372
- background: radial-gradient(circle at center, #2b3644 0%, #1f2833 100%);
373
- height: 400px;
374
- border-radius: var(--border-radius);
 
 
 
375
  display: flex;
376
- justify-content: center;
377
  align-items: center;
 
378
  position: relative;
379
- box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
380
  overflow: hidden;
 
381
  }
382
 
383
- .preview-logo {
384
- width: 200px;
385
- transform: rotate(var(--logo-rotation)) scale(var(--logo-scale));
386
- transition: all 0.2s ease-out;
387
- }
388
-
389
- /* --- FEATURES SECTION --- */
390
- .features {
391
- padding: 5rem 5%;
392
- display: grid;
393
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
394
- gap: 2rem;
395
- }
396
-
397
- .feature-card {
398
- background: var(--surface-color);
399
- padding: 2rem;
400
- border-radius: var(--border-radius);
401
- border: 1px solid rgba(255,255,255,0.05);
402
- transition: var(--transition);
403
  position: relative;
404
- overflow: hidden;
405
- }
406
-
407
- .feature-card:hover {
408
- transform: translateY(-5px);
409
- border-color: var(--primary-accent);
410
- box-shadow: 0 10px 30px rgba(0,0,0,0.3);
 
 
 
 
 
 
 
 
 
411
  }
412
 
413
- .feature-icon {
414
- font-size: 2rem;
415
- color: var(--primary-accent);
416
- margin-bottom: 1.5rem;
 
 
 
 
 
 
417
  }
418
 
419
- .feature-card h3 {
420
- font-family: var(--font-display);
421
- margin-bottom: 1rem;
422
  color: var(--text-main);
423
- }
424
-
425
- .feature-card p {
426
- color: var(--text-muted);
427
  font-size: 0.9rem;
 
 
 
 
 
428
  }
429
 
430
- /* --- FOOTER --- */
431
- footer {
432
- padding: 3rem 5%;
433
- background: #000;
434
- text-align: center;
435
- border-top: 1px solid rgba(255,255,255,0.1);
436
  }
437
 
438
- .footer-logo {
439
- font-family: var(--font-tech);
440
- font-size: 1rem;
441
- color: var(--text-muted);
442
- margin-bottom: 1rem;
443
  }
444
 
445
- .socials {
446
- display: flex;
447
- justify-content: center;
448
- gap: 1.5rem;
449
- margin-bottom: 2rem;
450
  }
451
 
452
- .socials a {
453
- color: var(--text-muted);
454
- font-size: 1.2rem;
455
- transition: var(--transition);
456
  }
457
 
458
- .socials a:hover {
459
- color: var(--primary-accent);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
460
  }
461
-
462
- .copyright {
463
- font-size: 0.8rem;
464
- color: #444;
465
  }
466
 
467
- /* --- ANIMATIONS --- */
468
- @keyframes fadeUp {
469
- from {
470
- opacity: 0;
471
- transform: translateY(30px);
472
  }
473
- to {
474
- opacity: 1;
475
- transform: translateY(0);
 
 
476
  }
477
- }
478
-
479
- @keyframes drawLine {
480
- to {
481
- stroke-dashoffset: 0;
482
  }
483
- }
484
-
485
- /* --- RESPONSIVE --- */
486
- @media (max-width: 900px) {
487
- .customizer-grid {
488
- grid-template-columns: 1fr;
 
489
  }
490
- .hero-title {
491
- font-size: 2.5rem;
492
  }
493
- .logo-container {
494
- width: 200px;
495
- height: 200px;
496
  }
497
  }
498
  </style>
@@ -501,216 +396,374 @@
501
 
502
  <!-- Header -->
503
  <header>
504
- <div class="brand">
505
- <i class="ri-shape-2-fill"></i>
506
- TheLogoCollection
507
  </div>
508
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
509
- <i class="ri-code-s-slash-line"></i> Built with anycoder
510
  </a>
511
  </header>
512
 
513
- <!-- Main Content -->
514
  <main>
515
-
516
- <!-- Hero Section -->
517
- <section class="hero">
518
- <div class="hero-content">
519
- <div class="hero-tag">PREMIUM IDENTITY</div>
520
-
521
- <!-- Main Logo Display (SVG) -->
522
- <div class="logo-container">
523
- <svg class="main-logo-svg" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
524
- <!-- Defs for Gradients -->
525
- <defs>
526
- <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
527
- <stop offset="0%" style="stop-color:var(--logo-color);stop-opacity:1" />
528
- <stop offset="100%" style="stop-color:#fff;stop-opacity:0.5" />
529
- </linearGradient>
530
- </defs>
531
-
532
- <!-- Outer Technical Ring -->
533
- <circle cx="200" cy="200" r="180" stroke="rgba(255,255,255,0.1)" stroke-width="1" fill="none" />
534
- <circle cx="200" cy="200" r="160" class="logo-path-outer" stroke="url(#logoGradient)" />
535
-
536
- <!-- Inner Geometric Shape (Hexagon Abstract) -->
537
- <path d="M200 80 L280 130 L280 230 L200 280 L120 230 L120 130 Z"
538
- fill="none"
539
- stroke="var(--logo-color)"
540
- stroke-width="3"
541
- opacity="0.8" />
542
-
543
- <!-- The "D" / Assembly Symbol -->
544
- <path d="M170 130 V230 H190 V200 H230 A20 20 0 0 0 230 160 H190 V130 H170 Z M190 180 H220 A10 10 0 0 1 220 180 A10 10 0 0 1 220 180 V180 A10 10 0 0 1 220 180 H190"
545
- fill="var(--logo-color)" />
546
-
547
- <!-- Text Elements -->
548
- <text x="200" y="340" text-anchor="middle" class="logo-text">DUELXE</text>
549
- <text x="200" y="365" text-anchor="middle" class="logo-subtext">ASAMBLAJE</text>
550
- </svg>
551
  </div>
552
-
553
- <h1 class="hero-title">Precision Meets Luxury</h1>
554
- <p class="hero-desc">
555
- Assemblaje Duelxe represents the pinnacle of structural integrity and aesthetic elegance.
556
- A brand identity forged for the future of high-end engineering.
557
- </p>
558
-
559
- <button class="btn" onclick="scrollToCustomizer()">
560
- CUSTOMIZE IDENTITY
561
- </button>
562
  </div>
563
- </section>
564
 
565
- <!-- Logo Customizer Section -->
566
- <section class="customizer-section" id="customizer">
567
- <div class="section-header">
568
- <h2>IDENTITY STUDIO</h2>
569
- <p>Adjust parameters in real-time to see the logo's versatility.</p>
570
- </div>
 
 
571
 
572
- <div class="customizer-grid">
573
- <!-- Controls -->
574
- <div class="controls">
575
- <div class="control-group">
576
- <label>ACCENT COLOR</label>
577
- <div class="color-options">
578
- <div class="color-swatch active" style="background-color: #c5a059;" onclick="updateColor('#c5a059', this)"></div>
579
- <div class="color-swatch" style="background-color: #66fcf1;" onclick="updateColor('#66fcf1', this)"></div>
580
- <div class="color-swatch" style="background-color: #ff4b5c;" onclick="updateColor('#ff4b5c', this)"></div>
581
- <div class="color-swatch" style="background-color: #ffffff;" onclick="updateColor('#ffffff', this)"></div>
582
- </div>
583
- </div>
584
 
585
- <div class="control-group">
586
- <label>ROTATION <span id="rot-val">0°</span></label>
587
- <input type="range" min="-180" max="180" value="0" id="rotation-slider">
588
- </div>
589
 
590
- <div class="control-group">
591
- <label>SCALE <span id="scale-val">1.0</span></label>
592
- <input type="range" min="0.5" max="1.5" step="0.1" value="1" id="scale-slider">
593
- </div>
594
- </div>
 
 
 
 
 
 
 
595
 
596
- <!-- Preview -->
597
- <div class="preview-area">
598
- <!-- Duplicate SVG for isolated preview -->
599
- <svg class="preview-logo" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
600
- <defs>
601
- <linearGradient id="previewGradient" x1="0%" y1="0%" x2="100%" y2="100%">
602
- <stop offset="0%" style="stop-color:var(--logo-color);stop-opacity:1" />
603
- <stop offset="100%" style="stop-color:#fff;stop-opacity:0.5" />
604
- </linearGradient>
605
- </defs>
606
- <circle cx="200" cy="200" r="160" class="logo-path-outer" stroke="url(#previewGradient)" />
607
- <path d="M200 80 L280 130 L280 230 L200 280 L120 230 L120 130 Z"
608
- fill="none" stroke="var(--logo-color)" stroke-width="3" opacity="0.8" />
609
- <path d="M170 130 V230 H190 V200 H230 A20 20 0 0 0 230 160 H190 V130 H170 Z M190 180 H220 A10 10 0 0 1 220 180 A10 10 0 0 1 220 180 V180 A10 10 0 0 1 220 180 H190"
610
- fill="var(--logo-color)" />
611
- <text x="200" y="340" text-anchor="middle" class="logo-text">DUELXE</text>
612
- <text x="200" y="365" text-anchor="middle" class="logo-subtext">ASAMBLAJE</text>
613
- </svg>
614
  </div>
615
  </div>
616
- </section>
617
 
618
- <!-- Features Section -->
619
- <section class="features">
620
- <div class="feature-card">
621
- <i class="ri-hammer-line feature-icon"></i>
622
- <h3>Robust Engineering</h3>
623
- <p>Designed with modular geometry that reflects strength, durability, and precision manufacturing.</p>
624
- </div>
625
- <div class="feature-card">
626
- <i class="ri-palette-line feature-icon"></i>
627
- <h3>Adaptive Palette</h3>
628
- <p>Works seamlessly across premium materials, from brushed aluminum to matte carbon fiber.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
629
  </div>
630
- <div class="feature-card">
631
- <i class="ri-layout-masonry-line feature-icon"></i>
632
- <h3>Scalable Vector</h3>
633
- <p>Maintains clarity from small digital icons to massive architectural signage.</p>
 
 
 
634
  </div>
635
  </section>
636
-
637
  </main>
638
 
639
- <!-- Footer -->
640
- <footer>
641
- <div class="footer-logo">TheLogoCollection</div>
642
- <div class="socials">
643
- <a href="#"><i class="ri-twitter-x-line"></i></a>
644
- <a href="#"><i class="ri-instagram-line"></i></a>
645
- <a href="#"><i class="ri-dribbble-line"></i></a>
646
- <a href="#"><i class="ri-github-line"></i></a>
647
- </div>
648
- <p class="copyright">&copy; 2023 Assemblaje Duelxe. All rights reserved.</p>
649
- </footer>
 
650
 
651
- <!-- JavaScript Logic -->
652
  <script>
653
  // DOM Elements
654
- const root = document.documentElement;
655
- const rotSlider = document.getElementById('rotation-slider');
656
- const scaleSlider = document.getElementById('scale-slider');
657
- const rotValDisplay = document.getElementById('rot-val');
658
- const scaleValDisplay = document.getElementById('scale-val');
659
- const swatches = document.querySelectorAll('.color-swatch');
660
-
661
- // Function to update CSS variables based on inputs
662
- function updateLogoState() {
663
- const rotation = rotSlider.value;
664
- const scale = scaleSlider.value;
665
-
666
- // Update CSS Variables
667
- root.style.setProperty('--logo-rotation', `${rotation}deg`);
668
- root.style.setProperty('--logo-scale', scale);
669
-
670
- // Update Text Displays
671
- rotValDisplay.textContent = `${rotation}°`;
672
- scaleValDisplay.textContent = scale;
673
- }
674
-
675
- // Function to handle color switching
676
- function updateColor(color, element) {
677
- // Update CSS Variable
678
- root.style.setProperty('--logo-color', color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
679
 
680
- // Update active class on swatches
681
- swatches.forEach(swatch => swatch.classList.remove('active'));
682
- element.classList.add('active');
683
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
684
 
685
- // Function to smooth scroll to customizer
686
- function scrollToCustomizer() {
687
- document.getElementById('customizer').scrollIntoView({ behavior: 'smooth' });
688
- }
689
 
690
- // Event Listeners
691
- rotSlider.addEventListener('input', updateLogoState);
692
- scaleSlider.addEventListener('input', updateLogoState);
 
693
 
694
- // Intersection Observer for scroll animations (Fade in elements)
695
- const observerOptions = {
696
- threshold: 0.1
697
- };
698
 
699
- const observer = new IntersectionObserver((entries) => {
700
- entries.forEach(entry => {
701
- if (entry.isIntersecting) {
702
- entry.target.style.animation = 'fadeUp 0.8s ease forwards';
703
- observer.unobserve(entry.target);
704
- }
705
- });
706
- }, observerOptions);
 
707
 
708
- // Observe feature cards
709
- document.querySelectorAll('.feature-card').forEach(card => {
710
- card.style.opacity = '0'; // Hide initially
711
- observer.observe(card);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
712
  });
713
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
714
  </script>
715
  </body>
716
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AE Motion Logo Maker</title>
7
+ <!-- Import Fonts -->
 
 
 
 
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=Montserrat:wght@400;700;900&family=Orbitron:wght@400;700;900&family=Pacifico&family=Playfair+Display:wght@700&family=Roboto:wght@300;500&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
  :root {
16
+ --bg-dark: #121212;
17
+ --bg-panel: #1e1e1e;
18
+ --bg-input: #2c2c2c;
19
+ --accent: #5e6ad2;
20
+ --accent-hover: #4b56b3;
21
+ --text-main: #e0e0e0;
22
+ --text-muted: #a0a0a0;
23
+ --border: #333;
24
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
 
27
  * {
28
+ box-sizing: border-box;
29
  margin: 0;
30
  padding: 0;
31
+ outline: none;
 
 
 
 
32
  }
33
 
34
  body {
35
+ font-family: 'Roboto', sans-serif;
36
+ background-color: var(--bg-dark);
37
  color: var(--text-main);
38
+ height: 100vh;
39
+ display: flex;
40
+ flex-direction: column;
41
+ overflow: hidden;
 
 
 
 
 
 
 
 
42
  }
43
 
44
+ /* --- Header --- */
45
  header {
46
+ height: 60px;
47
+ background-color: var(--bg-panel);
48
+ border-bottom: 1px solid var(--border);
 
49
  display: flex;
 
50
  align-items: center;
51
+ justify-content: space-between;
52
+ padding: 0 20px;
53
+ z-index: 10;
 
54
  }
55
 
56
+ .logo-area {
 
 
 
 
57
  display: flex;
58
  align-items: center;
59
  gap: 10px;
60
+ font-weight: 700;
61
+ font-size: 1.2rem;
62
+ color: var(--accent);
63
  }
64
 
65
+ .logo-area i {
66
+ font-size: 1.4rem;
67
  }
68
 
69
  .anycoder-link {
70
  font-size: 0.85rem;
71
  color: var(--text-muted);
72
+ text-decoration: none;
73
+ transition: color 0.3s;
 
 
 
 
 
74
  }
75
 
76
  .anycoder-link:hover {
77
+ color: var(--accent);
 
 
 
78
  }
79
 
80
+ /* --- Main Layout --- */
81
+ main {
82
+ flex: 1;
83
  display: flex;
 
 
 
 
84
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  }
86
 
87
+ /* --- Sidebar Controls --- */
88
+ .controls {
89
+ width: 340px;
90
+ background-color: var(--bg-panel);
91
+ border-right: 1px solid var(--border);
92
+ overflow-y: auto;
93
+ display: flex;
94
+ flex-direction: column;
95
+ padding: 20px;
96
+ gap: 24px;
97
+ flex-shrink: 0;
 
 
 
 
 
 
 
 
 
 
 
 
98
  }
99
 
100
+ .control-group {
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: 12px;
 
 
 
104
  }
105
 
106
+ .group-title {
107
+ font-size: 0.75rem;
 
 
 
 
108
  text-transform: uppercase;
109
+ letter-spacing: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  color: var(--text-muted);
111
+ font-weight: 700;
112
+ border-bottom: 1px solid var(--border);
113
+ padding-bottom: 5px;
114
+ margin-bottom: 5px;
 
115
  }
116
 
117
+ /* Form Elements */
118
+ label {
119
+ font-size: 0.85rem;
120
+ display: flex;
121
+ justify-content: space-between;
122
+ align-items: center;
 
 
 
 
 
 
 
 
 
123
  }
124
 
125
+ input[type="text"], select {
 
 
 
 
126
  width: 100%;
127
+ background-color: var(--bg-input);
128
+ border: 1px solid var(--border);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  color: var(--text-main);
130
+ padding: 8px 12px;
131
+ border-radius: 4px;
 
 
 
132
  font-size: 0.9rem;
133
+ transition: border-color 0.2s;
134
  }
135
 
136
+ input[type="text"]:focus, select:focus {
137
+ border-color: var(--accent);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  }
139
 
 
 
 
 
 
 
 
 
 
140
  input[type="range"] {
 
141
  -webkit-appearance: none;
142
+ width: 100%;
143
+ height: 4px;
144
+ background: var(--bg-input);
145
+ border-radius: 2px;
146
+ outline: none;
147
  }
148
 
149
  input[type="range"]::-webkit-slider-thumb {
150
  -webkit-appearance: none;
 
151
  width: 16px;
152
+ height: 16px;
153
  border-radius: 50%;
154
+ background: var(--accent);
155
  cursor: pointer;
156
+ transition: background 0.2s;
157
+ }
158
+
159
+ input[type="range"]::-webkit-slider-thumb:hover {
160
+ background: var(--accent-hover);
161
  }
162
 
163
+ input[type="color"] {
164
+ -webkit-appearance: none;
165
+ border: none;
166
  width: 100%;
167
+ height: 35px;
168
+ background: transparent;
169
  cursor: pointer;
 
 
170
  }
171
+
172
+ input[type="color"]::-webkit-color-swatch-wrapper {
173
+ padding: 0;
174
+ }
175
+
176
+ input[type="color"]::-webkit-color-swatch {
177
+ border: 1px solid var(--border);
178
+ border-radius: 4px;
179
  }
180
 
181
+ .row {
182
+ display: flex;
183
+ gap: 10px;
 
 
 
 
184
  }
185
 
186
+ .col {
187
+ flex: 1;
 
188
  }
189
 
190
+ /* --- Canvas Area --- */
191
+ .canvas-area {
192
+ flex: 1;
193
+ background-color: #0e0e0e;
194
+ background-image:
195
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
196
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
197
+ background-size: 40px 40px;
198
  display: flex;
199
+ flex-direction: column;
200
  align-items: center;
201
+ justify-content: center;
202
  position: relative;
 
203
  overflow: hidden;
204
+ perspective: 1000px; /* Essential for 3D effects */
205
  }
206
 
207
+ .preview-stage {
208
+ width: 600px;
209
+ height: 400px;
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  position: relative;
214
+ /* Border for visual guide */
215
+ border: 1px dashed rgba(255,255,255,0.1);
216
+ border-radius: 8px;
217
+ }
218
+
219
+ /* The Actual Logo Element */
220
+ #logo-target {
221
+ font-size: 60px;
222
+ font-weight: 900;
223
+ white-space: nowrap;
224
+ cursor: default;
225
+ transform-style: preserve-3d;
226
+ /* Default Transition for smooth property updates, but overridden by animation classes */
227
+ transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
228
+ line-height: 1.2;
229
+ text-align: center;
230
  }
231
 
232
+ /* --- Timeline / Action Bar --- */
233
+ .timeline-bar {
234
+ height: 70px;
235
+ background-color: var(--bg-panel);
236
+ border-top: 1px solid var(--border);
237
+ display: flex;
238
+ align-items: center;
239
+ justify-content: center;
240
+ gap: 20px;
241
+ padding: 0 20px;
242
  }
243
 
244
+ .btn {
245
+ background-color: var(--bg-input);
 
246
  color: var(--text-main);
247
+ border: 1px solid var(--border);
248
+ padding: 10px 20px;
249
+ border-radius: 6px;
250
+ cursor: pointer;
251
  font-size: 0.9rem;
252
+ display: flex;
253
+ align-items: center;
254
+ gap: 8px;
255
+ transition: all 0.2s;
256
+ font-weight: 500;
257
  }
258
 
259
+ .btn:hover {
260
+ background-color: #383838;
261
+ border-color: #555;
 
 
 
262
  }
263
 
264
+ .btn-primary {
265
+ background-color: var(--accent);
266
+ border-color: var(--accent);
267
+ color: white;
 
268
  }
269
 
270
+ .btn-primary:hover {
271
+ background-color: var(--accent-hover);
 
 
 
272
  }
273
 
274
+ .btn i {
275
+ font-size: 1rem;
 
 
276
  }
277
 
278
+ /* --- Animations (The "After Effects" Magic) --- */
279
+
280
+ /* 1. Fade In Scale */
281
+ @keyframes anim-fade-scale {
282
+ 0% { opacity: 0; transform: scale(0.5) translateZ(-100px); filter: blur(10px); }
283
+ 100% { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0); }
284
+ }
285
+
286
+ /* 2. Cinematic Slide */
287
+ @keyframes anim-slide {
288
+ 0% { opacity: 0; transform: translateY(50px) translateX(-20px); }
289
+ 100% { opacity: 1; transform: translateY(0) translateX(0); }
290
+ }
291
+
292
+ /* 3. 3D Rotation */
293
+ @keyframes anim-3d-rotate {
294
+ 0% { opacity: 0; transform: rotateX(-90deg) scale(0.5); }
295
+ 100% { opacity: 1; transform: rotateX(0) scale(1); }
296
+ }
297
+
298
+ /* 4. Glitch Effect */
299
+ @keyframes anim-glitch {
300
+ 0% { transform: translate(0); }
301
+ 20% { transform: translate(-2px, 2px); }
302
+ 40% { transform: translate(-2px, -2px); }
303
+ 60% { transform: translate(2px, 2px); }
304
+ 80% { transform: translate(2px, -2px); }
305
+ 100% { transform: translate(0); }
306
+ }
307
+ @keyframes anim-glitch-fade {
308
+ 0% { opacity: 0; clip-path: inset(0 0 100% 0); }
309
+ 50% { opacity: 1; clip-path: inset(0 0 0 0); }
310
+ 55% { opacity: 1; clip-path: inset(20% 0 10% 0); transform: translate(-5px, 0); }
311
+ 60% { opacity: 1; clip-path: inset(50% 0 20% 0); transform: translate(5px, 0); }
312
+ 65% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(0, 0); }
313
+ 100% { opacity: 1; clip-path: inset(0 0 0 0); }
314
+ }
315
+
316
+ /* 5. Neon Pulse */
317
+ @keyframes anim-neon {
318
+ 0% { opacity: 0; text-shadow: 0 0 0px currentColor; }
319
+ 50% { opacity: 1; text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
320
+ 100% { opacity: 1; text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; }
321
+ }
322
+
323
+ /* 6. Bounce */
324
+ @keyframes anim-bounce {
325
+ 0% { transform: translateY(-500px); opacity: 0; }
326
+ 60% { transform: translateY(0); opacity: 1; }
327
+ 75% { transform: translateY(-30px); }
328
+ 100% { transform: translateY(0); }
329
+ }
330
+
331
+ /* Classes to apply animations */
332
+ .animate-fade-scale { animation: anim-fade-scale var(--anim-duration) var(--anim-easing) forwards; }
333
+ .animate-slide { animation: anim-slide var(--anim-duration) var(--anim-easing) forwards; }
334
+ .animate-3d-rotate { animation: anim-3d-rotate var(--anim-duration) var(--anim-easing) forwards; }
335
+ .animate-glitch { animation: anim-glitch-fade var(--anim-duration) steps(5) forwards; }
336
+ .animate-neon { animation: anim-neon var(--anim-duration) ease-out forwards; }
337
+ .animate-bounce { animation: anim-bounce var(--anim-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
338
+
339
+ /* Toast Notification */
340
+ .toast {
341
+ position: fixed;
342
+ bottom: 90px;
343
+ right: 20px;
344
+ background-color: var(--accent);
345
+ color: white;
346
+ padding: 12px 24px;
347
+ border-radius: 4px;
348
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
349
+ transform: translateY(100px);
350
+ opacity: 0;
351
+ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
352
+ z-index: 100;
353
+ font-size: 0.9rem;
354
+ display: flex;
355
+ align-items: center;
356
+ gap: 10px;
357
  }
358
+ .toast.show {
359
+ transform: translateY(0);
360
+ opacity: 1;
 
361
  }
362
 
363
+ /* Responsive */
364
+ @media (max-width: 900px) {
365
+ main {
366
+ flex-direction: column-reverse;
367
+ overflow-y: auto;
368
  }
369
+ .controls {
370
+ width: 100%;
371
+ height: 50%;
372
+ border-right: none;
373
+ border-top: 1px solid var(--border);
374
  }
375
+ .canvas-area {
376
+ height: 50%;
 
 
 
377
  }
378
+ .preview-stage {
379
+ width: 90%;
380
+ height: 80%;
381
+ }
382
+ .timeline-bar {
383
+ height: 60px;
384
+ padding: 0 10px;
385
  }
386
+ .btn span {
387
+ display: none; /* Hide text on small screens */
388
  }
389
+ .btn {
390
+ padding: 10px;
 
391
  }
392
  }
393
  </style>
 
396
 
397
  <!-- Header -->
398
  <header>
399
+ <div class="logo-area">
400
+ <i class="fa-solid fa-layer-group"></i>
401
+ <span>Motion Logo Maker</span>
402
  </div>
403
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
404
+ Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i>
405
  </a>
406
  </header>
407
 
 
408
  <main>
409
+ <!-- Sidebar Controls -->
410
+ <aside class="controls">
411
+
412
+ <!-- Text Settings -->
413
+ <div class="control-group">
414
+ <div class="group-title">Content</div>
415
+ <input type="text" id="inp-text" value="AESTHETIC" placeholder="Enter Logo Text">
416
+ <div class="row">
417
+ <div class="col">
418
+ <label>Font</label>
419
+ <select id="inp-font">
420
+ <option value="'Montserrat', sans-serif">Montserrat</option>
421
+ <option value="'Orbitron', sans-serif">Orbitron (Sci-Fi)</option>
422
+ <option value="'Pacifico', cursive">Pacifico (Script)</option>
423
+ <option value="'Playfair Display', serif">Playfair (Elegant)</option>
424
+ <option value="'Roboto', sans-serif">Roboto (Clean)</option>
425
+ </select>
426
+ </div>
427
+ <div class="col">
428
+ <label>Weight</label>
429
+ <select id="inp-weight">
430
+ <option value="300">Light</option>
431
+ <option value="500">Medium</option>
432
+ <option value="700">Bold</option>
433
+ <option value="900">Black</option>
434
+ </select>
435
+ </div>
 
 
 
 
 
 
 
 
 
436
  </div>
437
+ <label>Size <span id="val-size">60px</span></label>
438
+ <input type="range" id="inp-size" min="20" max="150" value="60">
 
 
 
 
 
 
 
 
439
  </div>
 
440
 
441
+ <!-- Colors & Effects -->
442
+ <div class="control-group">
443
+ <div class="group-title">Style</div>
444
+ <label>Fill Color</label>
445
+ <input type="color" id="inp-color" value="#ffffff">
446
+
447
+ <label>Background (Canvas)</label>
448
+ <input type="color" id="inp-bg-color" value="#0e0e0e">
449
 
450
+ <label>Opacity</label>
451
+ <input type="range" id="inp-opacity" min="0" max="100" value="100">
 
 
 
 
 
 
 
 
 
 
452
 
453
+ <label>Letter Spacing <span id="val-spacing">0px</span></label>
454
+ <input type="range" id="inp-spacing" min="-5" max="30" value="0">
455
+ </div>
 
456
 
457
+ <!-- 3D Transforms -->
458
+ <div class="control-group">
459
+ <div class="group-title">3D Transform</div>
460
+ <label>Rotate X <span id="val-rx">0deg</span></label>
461
+ <input type="range" id="inp-rx" min="-180" max="180" value="0">
462
+
463
+ <label>Rotate Y <span id="val-ry">0deg</span></label>
464
+ <input type="range" id="inp-ry" min="-180" max="180" value="0">
465
+
466
+ <label>Perspective Depth <span id="val-persp">1000px</span></label>
467
+ <input type="range" id="inp-persp" min="100" max="2000" value="1000">
468
+ </div>
469
 
470
+ <!-- Shadows & Glow -->
471
+ <div class="control-group">
472
+ <div class="group-title">Lighting</div>
473
+ <label>Shadow Blur (Glow)</label>
474
+ <input type="range" id="inp-shadow-blur" min="0" max="50" value="0">
475
+
476
+ <label>Shadow Color</label>
477
+ <input type="color" id="inp-shadow-color" value="#5e6ad2">
478
+
479
+ <label>Offset X / Y</label>
480
+ <div class="row">
481
+ <input type="range" id="inp-shadow-x" min="-20" max="20" value="0">
482
+ <input type="range" id="inp-shadow-y" min="-20" max="20" value="0">
 
 
 
 
 
483
  </div>
484
  </div>
 
485
 
486
+ <!-- Animation Settings -->
487
+ <div class="control-group">
488
+ <div class="group-title">Animation</div>
489
+ <label>Effect Type</label>
490
+ <select id="inp-anim-type">
491
+ <option value="none">None</option>
492
+ <option value="animate-fade-scale">Fade & Scale (Cinematic)</option>
493
+ <option value="animate-slide">Slide In</option>
494
+ <option value="animate-3d-rotate">3D Flip</option>
495
+ <option value="animate-glitch">Glitch (Cyberpunk)</option>
496
+ <option value="animate-neon">Neon Pulse</option>
497
+ <option value="animate-bounce">Heavy Bounce</option>
498
+ </select>
499
+
500
+ <label>Duration (ms) <span id="val-duration">1000ms</span></label>
501
+ <input type="range" id="inp-duration" min="200" max="3000" step="100" value="1000">
502
+
503
+ <label>Easing</label>
504
+ <select id="inp-easing">
505
+ <option value="ease">Ease</option>
506
+ <option value="ease-in">Ease In</option>
507
+ <option value="ease-out">Ease Out</option>
508
+ <option value="ease-in-out">Ease In Out</option>
509
+ <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">Bouncy</option>
510
+ <option value="steps(5)">Steps (Digital)</option>
511
+ </select>
512
  </div>
513
+
514
+ </aside>
515
+
516
+ <!-- Preview Area -->
517
+ <section class="canvas-area" id="canvas-bg">
518
+ <div class="preview-stage" id="stage">
519
+ <div id="logo-target">AESTHETIC</div>
520
  </div>
521
  </section>
 
522
  </main>
523
 
524
+ <!-- Timeline / Actions -->
525
+ <div class="timeline-bar">
526
+ <button class="btn" id="btn-reset"><i class="fa-solid fa-rotate-left"></i> <span>Reset</span></button>
527
+ <button class="btn btn-primary" id="btn-play"><i class="fa-solid fa-play"></i> <span>Play Animation</span></button>
528
+ <button class="btn" id="btn-export"><i class="fa-solid fa-code"></i> <span>Copy CSS</span></button>
529
+ </div>
530
+
531
+ <!-- Toast Notification -->
532
+ <div class="toast" id="toast">
533
+ <i class="fa-solid fa-check-circle"></i>
534
+ <span>CSS copied to clipboard!</span>
535
+ </div>
536
 
 
537
  <script>
538
  // DOM Elements
539
+ const logoTarget = document.getElementById('logo-target');
540
+ const canvasBg = document.getElementById('canvas-bg');
541
+ const stage = document.getElementById('stage');
542
+ const toast = document.getElementById('toast');
543
+
544
+ // Inputs
545
+ const inputs = {
546
+ text: document.getElementById('inp-text'),
547
+ font: document.getElementById('inp-font'),
548
+ weight: document.getElementById('inp-weight'),
549
+ size: document.getElementById('inp-size'),
550
+ color: document.getElementById('inp-color'),
551
+ bgColor: document.getElementById('inp-bg-color'),
552
+ opacity: document.getElementById('inp-opacity'),
553
+ spacing: document.getElementById('inp-spacing'),
554
+ rx: document.getElementById('inp-rx'),
555
+ ry: document.getElementById('inp-ry'),
556
+ persp: document.getElementById('inp-persp'),
557
+ shadowBlur: document.getElementById('inp-shadow-blur'),
558
+ shadowColor: document.getElementById('inp-shadow-color'),
559
+ shadowX: document.getElementById('inp-shadow-x'),
560
+ shadowY: document.getElementById('inp-shadow-y'),
561
+ animType: document.getElementById('inp-anim-type'),
562
+ duration: document.getElementById('inp-duration'),
563
+ easing: document.getElementById('inp-easing')
564
+ };
565
+
566
+ // Value Displays
567
+ const displays = {
568
+ size: document.getElementById('val-size'),
569
+ spacing: document.getElementById('val-spacing'),
570
+ rx: document.getElementById('val-rx'),
571
+ ry: document.getElementById('val-ry'),
572
+ persp: document.getElementById('val-persp'),
573
+ duration: document.getElementById('val-duration')
574
+ };
575
+
576
+ // State management
577
+ let state = {};
578
+
579
+ // Initialize state from inputs
580
+ function updateState() {
581
+ state = {
582
+ text: inputs.text.value,
583
+ font: inputs.font.value,
584
+ weight: inputs.weight.value,
585
+ size: inputs.size.value + 'px',
586
+ color: inputs.color.value,
587
+ bgColor: inputs.bgColor.value,
588
+ opacity: inputs.opacity.value / 100,
589
+ spacing: inputs.spacing.value + 'px',
590
+ rx: inputs.rx.value + 'deg',
591
+ ry: inputs.ry.value + 'deg',
592
+ persp: inputs.persp.value + 'px',
593
+ shadowBlur: inputs.shadowBlur.value + 'px',
594
+ shadowColor: inputs.shadowColor.value,
595
+ shadowX: inputs.shadowX.value + 'px',
596
+ shadowY: inputs.shadowY.value + 'px',
597
+ animType: inputs.animType.value,
598
+ duration: inputs.duration.value + 'ms',
599
+ easing: inputs.easing.value
600
+ };
601
+ updateUI();
602
+ }
603
+
604
+ // Apply styles to the preview
605
+ function updateUI() {
606
+ // Update Text
607
+ logoTarget.textContent = state.text;
608
 
609
+ // Update Font/Typography
610
+ logoTarget.style.fontFamily = state.font;
611
+ logoTarget.style.fontWeight = state.weight;
612
+ logoTarget.style.fontSize = state.size;
613
+ logoTarget.style.letterSpacing = state.spacing;
614
+ logoTarget.style.color = state.color;
615
+ logoTarget.style.opacity = state.opacity;
616
+
617
+ // Update Background
618
+ canvasBg.style.backgroundColor = state.bgColor;
619
+
620
+ // Update Transforms (3D)
621
+ stage.style.perspective = state.persp;
622
+ // We apply the static transforms here.
623
+ // Note: If animation is running, the animation might override this momentarily
624
+ // But we set the base transform state.
625
+ logoTarget.style.transform = `rotateX(${state.rx}) rotateY(${state.ry})`;
626
+
627
+ // Update Shadow/Glow
628
+ const shadowVal = `${state.shadowX} ${state.shadowY} ${state.shadowBlur} ${state.shadowColor}`;
629
+ logoTarget.style.textShadow = shadowVal;
630
+
631
+ // Update Displays
632
+ displays.size.textContent = state.size;
633
+ displays.spacing.textContent = state.spacing;
634
+ displays.rx.textContent = state.rx;
635
+ displays.ry.textContent = state.ry;
636
+ displays.persp.textContent = state.persp;
637
+ displays.duration.textContent = state.duration;
638
+ }
639
+
640
+ // Event Listeners for all inputs
641
+ Object.values(inputs).forEach(input => {
642
+ input.addEventListener('input', updateState);
643
+ });
644
 
645
+ // --- Animation Logic ---
 
 
 
646
 
647
+ function triggerAnimation() {
648
+ // Remove any existing animation classes to restart them
649
+ const classes = logoTarget.className.split(" ").filter(c => !c.startsWith('animate-'));
650
+ logoTarget.className = classes.join(" ");
651
 
652
+ // Force reflow/repaint
653
+ void logoTarget.offsetWidth;
 
 
654
 
655
+ if (state.animType !== 'none') {
656
+ // Set CSS variables for dynamic animation values
657
+ logoTarget.style.setProperty('--anim-duration', state.duration);
658
+ logoTarget.style.setProperty('--anim-easing', state.easing);
659
+
660
+ // Add the specific animation class
661
+ logoTarget.classList.add(state.animType);
662
+ }
663
+ }
664
 
665
+ document.getElementById('btn-play').addEventListener('click', triggerAnimation);
666
+
667
+ // --- Reset Logic ---
668
+ document.getElementById('btn-reset').addEventListener('click', () => {
669
+ inputs.text.value = "LOGO";
670
+ inputs.size.value = 80;
671
+ inputs.rx.value = 0;
672
+ inputs.ry.value = 0;
673
+ inputs.shadowBlur.value = 0;
674
+ inputs.animType.value = "none";
675
+ inputs.color.value = "#ffffff";
676
+ inputs.bgColor.value = "#0e0e0e";
677
+ updateState();
678
+ triggerAnimation(); // Re-trigger to clear stuck animations
679
+ });
680
+
681
+ // --- Export Logic ---
682
+ document.getElementById('btn-export').addEventListener('click', () => {
683
+ const cssCode = `
684
+ /* Generated by Motion Logo Maker */
685
+ .logo-container {
686
+ perspective: ${state.persp};
687
+ display: flex;
688
+ justify-content: center;
689
+ align-items: center;
690
+ background-color: ${state.bgColor};
691
+ }
692
+
693
+ .my-logo {
694
+ font-family: ${state.font};
695
+ font-weight: ${state.weight};
696
+ font-size: ${state.size};
697
+ color: ${state.color};
698
+ letter-spacing: ${state.spacing};
699
+ text-shadow: ${state.shadowX} ${state.shadowY} ${state.shadowBlur} ${state.shadowColor};
700
+ opacity: ${state.opacity};
701
+ transform: rotateX(${state.rx}) rotateY(${state.ry});
702
+
703
+ /* Animation Setup */
704
+ animation-name: ${state.animType === 'none' ? 'none' : state.animType.replace('animate-', 'anim-')};
705
+ animation-duration: ${state.duration};
706
+ animation-timing-function: ${state.easing};
707
+ animation-fill-mode: forwards;
708
+ }
709
+
710
+ /* Keyframes for the selected effect */
711
+ ${getAnimationKeyframes(state.animType)}
712
+ `.trim();
713
+
714
+ navigator.clipboard.writeText(cssCode).then(() => {
715
+ showToast();
716
+ });
717
  });
718
 
719
+ function getAnimationKeyframes(type) {
720
+ if(type === 'none') return '';
721
+
722
+ // Simplified mapping of JS class names to standard CSS keyframes for export
723
+ switch(type) {
724
+ case 'animate-fade-scale':
725
+ return `@keyframes anim-fade-scale {
726
+ 0% { opacity: 0; transform: scale(0.5); filter: blur(10px); }
727
+ 100% { opacity: 1; transform: scale(1); filter: blur(0); }
728
+ }`;
729
+ case 'animate-slide':
730
+ return `@keyframes anim-slide {
731
+ 0% { opacity: 0; transform: translateY(50px); }
732
+ 100% { opacity: 1; transform: translateY(0); }
733
+ }`;
734
+ case 'animate-3d-rotate':
735
+ return `@keyframes anim-3d-rotate {
736
+ 0% { opacity: 0; transform: rotateX(-90deg); }
737
+ 100% { opacity: 1; transform: rotateX(0); }
738
+ }`;
739
+ case 'animate-neon':
740
+ return `@keyframes anim-neon {
741
+ 0% { text-shadow: 0 0 0px currentColor; opacity: 0; }
742
+ 50% { text-shadow: 0 0 20px currentColor; opacity: 1; }
743
+ 100% { text-shadow: 0 0 10px currentColor; opacity: 1; }
744
+ }`;
745
+ case 'animate-bounce':
746
+ return `@keyframes anim-bounce {
747
+ 0% { transform: translateY(-500px); opacity: 0; }
748
+ 60% { transform: translateY(0); opacity: 1; }
749
+ 75% { transform: translateY(-30px); }
750
+ 100% { transform: translateY(0); }
751
+ }`;
752
+ default:
753
+ return `/* Please check the application page for specific keyframes */`;
754
+ }
755
+ }
756
+
757
+ function showToast() {
758
+ toast.classList.add('show');
759
+ setTimeout(() => {
760
+ toast.classList.remove('show');
761
+ }, 3000);
762
+ }
763
+
764
+ // Initial run
765
+ updateState();
766
+
767
  </script>
768
  </body>
769
  </html>