@jjlmoya/utils-creative 1.15.0 → 1.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/package.json +6 -3
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/category/index.ts +1 -16
  4. package/src/entries.ts +14 -0
  5. package/src/index.ts +17 -1
  6. package/src/tool/bead-pattern-generator/bead-pattern-generator.css +507 -0
  7. package/src/tool/bead-pattern-generator/component.astro +0 -509
  8. package/src/tool/bead-pattern-generator/entry.ts +49 -0
  9. package/src/tool/bead-pattern-generator/index.ts +3 -51
  10. package/src/tool/dice-roller/component.astro +0 -477
  11. package/src/tool/dice-roller/dice-roller.css +475 -0
  12. package/src/tool/dice-roller/entry.ts +46 -0
  13. package/src/tool/dice-roller/index.ts +3 -48
  14. package/src/tool/excuse-generator/component.astro +0 -318
  15. package/src/tool/excuse-generator/entry.ts +42 -0
  16. package/src/tool/excuse-generator/excuse-generator.css +316 -0
  17. package/src/tool/excuse-generator/index.ts +3 -44
  18. package/src/tool/fortune-cookie/component.astro +0 -345
  19. package/src/tool/fortune-cookie/entry.ts +40 -0
  20. package/src/tool/fortune-cookie/fortune-cookie.css +343 -0
  21. package/src/tool/fortune-cookie/index.ts +3 -42
  22. package/src/tool/synesthesia-painter/component.astro +0 -229
  23. package/src/tool/synesthesia-painter/entry.ts +39 -0
  24. package/src/tool/synesthesia-painter/index.ts +3 -41
  25. package/src/tool/synesthesia-painter/synesthesia-painter.css +227 -0
  26. package/src/tool/zalgo-generator/component.astro +0 -552
  27. package/src/tool/zalgo-generator/entry.ts +49 -0
  28. package/src/tool/zalgo-generator/index.ts +3 -51
  29. package/src/tool/zalgo-generator/zalgo-generator.css +550 -0
@@ -1,47 +1,6 @@
1
- import type { CreativeToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
2
-
3
- export interface ExcuseGeneratorUI {
4
- [key: string]: string;
5
- title: string;
6
- description: string;
7
- subjectLabel: string;
8
- actionLabel: string;
9
- victimLabel: string;
10
- generateBtn: string;
11
- copyBtn: string;
12
- copied: string;
13
- starts: string;
14
- middles: string;
15
- ends: string;
16
- faqTitle: string;
17
- bibliographyTitle: string;
18
- }
19
-
20
- export type ExcuseGeneratorLocaleContent = ToolLocaleContent<ExcuseGeneratorUI>;
21
-
22
- export const excuseGenerator: CreativeToolEntry<ExcuseGeneratorUI> = {
23
- id: 'excuse-generator',
24
- icons: { bg: 'mdi:slot-machine', fg: 'mdi:emoticon-poop' },
25
- i18n: {
26
- es: () => import('./i18n/es').then((m) => m.content),
27
- en: () => import('./i18n/en').then((m) => m.content),
28
- fr: () => import('./i18n/fr').then((m) => m.content),
29
- de: () => import('./i18n/de').then((m) => m.content),
30
- id: () => import('./i18n/id').then((m) => m.content),
31
- it: () => import('./i18n/it').then((m) => m.content),
32
- ja: () => import('./i18n/ja').then((m) => m.content),
33
- ko: () => import('./i18n/ko').then((m) => m.content),
34
- nl: () => import('./i18n/nl').then((m) => m.content),
35
- pl: () => import('./i18n/pl').then((m) => m.content),
36
- pt: () => import('./i18n/pt').then((m) => m.content),
37
- ru: () => import('./i18n/ru').then((m) => m.content),
38
- sv: () => import('./i18n/sv').then((m) => m.content),
39
- tr: () => import('./i18n/tr').then((m) => m.content),
40
- zh: () => import('./i18n/zh').then((m) => m.content),
41
- },
42
- };
43
-
44
-
1
+ import type { ToolDefinition } from '../../types';
2
+ import { excuseGenerator } from './entry';
3
+ export * from './entry';
45
4
  export const EXCUSE_GENERATOR_TOOL: ToolDefinition = {
46
5
  entry: excuseGenerator,
47
6
  Component: () => import('./component.astro'),
@@ -297,348 +297,3 @@ const ASSETS = {
297
297
  new FortuneCookie();
298
298
  </script>
299
299
 
300
- <style>
301
- .fortune-cookie {
302
- --fortune-cookie-bg: #fff;
303
- --fortune-cookie-bg-muted: #fffbeb;
304
- --fortune-cookie-text: #0f172a;
305
- --fortune-cookie-text-muted: #475569;
306
- --fortune-cookie-text-dim: #64748b;
307
- --fortune-cookie-border: #fef3c7;
308
- --fortune-cookie-shadow: rgba(0, 0, 0, 0.05);
309
- --fortune-cookie-primary: #f59e0b;
310
- --fortune-cookie-primary-on: #fff;
311
- --fortune-cookie-accent: #fcd34d;
312
- --fortune-cookie-success: #10b981;
313
- --fortune-cookie-warning: #f59e0b;
314
- --fortune-cookie-error: #f43f5e;
315
- }
316
-
317
- :global(.theme-dark) .fortune-cookie {
318
- --fortune-cookie-bg: #0f172a;
319
- --fortune-cookie-bg-muted: #1e293b;
320
- --fortune-cookie-text: #f8fafc;
321
- --fortune-cookie-text-muted: #94a3b8;
322
- --fortune-cookie-text-dim: #64748b;
323
- --fortune-cookie-border: #334155;
324
- --fortune-cookie-shadow: rgba(0, 0, 0, 0.3);
325
- --fortune-cookie-primary: #fbbf24;
326
- --fortune-cookie-primary-on: #fff;
327
- --fortune-cookie-accent: #fcd34d;
328
- --fortune-cookie-success: #34d399;
329
- --fortune-cookie-warning: #fbbf24;
330
- --fortune-cookie-error: #fb7185;
331
- }
332
-
333
- .fortune-cookie-root {
334
- width: 100%;
335
- max-width: 64rem;
336
- margin-left: auto;
337
- margin-right: auto;
338
- }
339
-
340
- .fortune-cookie-card {
341
- position: relative;
342
- background-color: var(--fortune-cookie-bg);
343
- border-radius: 1.5rem;
344
- box-shadow: 0 25px 50px -12px var(--fortune-cookie-shadow);
345
- overflow: hidden;
346
- border: 1px solid var(--fortune-cookie-border);
347
- min-height: 600px;
348
- display: flex;
349
- flex-direction: column;
350
- align-items: center;
351
- justify-content: center;
352
- padding: 2rem;
353
- }
354
-
355
- .fortune-cookie-glow {
356
- position: absolute;
357
- inset: 0;
358
- opacity: 0.1;
359
- pointer-events: none;
360
- background-image: radial-gradient(circle at center, var(--fortune-cookie-primary), transparent, transparent);
361
- }
362
-
363
- .fortune-cookie-content {
364
- position: relative;
365
- z-index: 10;
366
- width: 100%;
367
- display: flex;
368
- flex-direction: column;
369
- align-items: center;
370
- }
371
-
372
- .fortune-cookie-instruction {
373
- font-size: 1.25rem;
374
- line-height: 1.75rem;
375
- font-weight: 700;
376
- color: #92400e;
377
- margin-bottom: 2rem;
378
- text-transform: uppercase;
379
- letter-spacing: 0.1em;
380
- animation: fortune-cookie-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
381
- }
382
-
383
- :global(.theme-dark) .fortune-cookie-instruction {
384
- color: #fbbf24;
385
- }
386
-
387
- @keyframes fortune-cookie-pulse {
388
- 0%, 100% { opacity: 1; }
389
- 50% { opacity: .5; }
390
- }
391
-
392
- .fortune-cookie-stage {
393
- position: relative;
394
- width: 20rem;
395
- height: 20rem;
396
- cursor: pointer;
397
- }
398
-
399
- @media (min-width: 768px) {
400
- .fortune-cookie-stage {
401
- width: 24rem;
402
- height: 24rem;
403
- }
404
- }
405
-
406
- .fortune-cookie-body {
407
- position: absolute;
408
- inset: 2rem;
409
- transition-property: transform;
410
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
411
- transition-duration: 100ms;
412
- }
413
-
414
- @media (min-width: 768px) {
415
- .fortune-cookie-body {
416
- inset: 3rem;
417
- }
418
- }
419
-
420
- .fortune-cookie-body:active {
421
- transform: scale(0.95);
422
- }
423
-
424
- .fortune-cookie-img {
425
- width: 100%;
426
- height: 100%;
427
- object-fit: contain;
428
- z-index: 10;
429
- position: relative;
430
- }
431
-
432
- .fortune-cookie-broken {
433
- position: absolute;
434
- inset: 2rem;
435
- pointer-events: none;
436
- }
437
-
438
- .fortune-cookie-broken.hidden {
439
- display: none;
440
- }
441
-
442
- @media (min-width: 768px) {
443
- .fortune-cookie-broken {
444
- inset: 3rem;
445
- }
446
- }
447
-
448
- .fortune-cookie-half {
449
- position: absolute;
450
- width: 50%;
451
- height: 100%;
452
- object-fit: contain;
453
- transition-property: all;
454
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
455
- transition-duration: 1000ms;
456
- }
457
-
458
- .fortune-cookie-half-left {
459
- left: 0;
460
- transform-origin: bottom left;
461
- }
462
-
463
- .fortune-cookie-half-right {
464
- right: 0;
465
- transform-origin: bottom right;
466
- }
467
-
468
- .fortune-cookie-paper {
469
- position: absolute;
470
- top: 50%;
471
- left: 50%;
472
- transform: translate(-50%, -50%) scale(0.5);
473
- width: 85%;
474
- max-width: 320px;
475
- background-color: #fff;
476
- border-radius: 2px;
477
- box-shadow:
478
- 0 10px 15px -3px rgba(0, 0, 0, 0.2),
479
- 0 4px 6px -2px rgba(0, 0, 0, 0.1),
480
- inset 0 0 20px rgba(0, 0, 0, 0.05);
481
- opacity: 0;
482
- transition-property: all;
483
- transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
484
- transition-duration: 800ms;
485
- z-index: 0;
486
- overflow: hidden;
487
- }
488
-
489
- .fortune-cookie-paper.visible {
490
- opacity: 1;
491
- transform: translate(-50%, -50%) scale(1) rotate(-1deg);
492
- z-index: 20;
493
- }
494
-
495
- .fortune-cookie-paper-img {
496
- width: 100%;
497
- height: auto;
498
- display: block;
499
- opacity: 0.15;
500
- pointer-events: none;
501
- mix-blend-mode: multiply;
502
- }
503
-
504
- .fortune-cookie-paper-content {
505
- position: absolute;
506
- inset: 0;
507
- display: flex;
508
- flex-direction: column;
509
- align-items: center;
510
- justify-content: center;
511
- padding: 1.5rem;
512
- text-align: center;
513
- z-index: 10;
514
- }
515
-
516
- .fortune-cookie-text {
517
- color: #1e293b;
518
- font-weight: 800;
519
- font-size: 1.125rem;
520
- line-height: 1.4;
521
- transform: rotate(-1deg);
522
- user-select: text;
523
- margin: 0;
524
- }
525
-
526
- @media (min-width: 768px) {
527
- .fortune-cookie-text {
528
- font-size: 1.25rem;
529
- }
530
- }
531
-
532
- .fortune-cookie-lucky-numbers {
533
- margin-top: 1rem;
534
- display: flex;
535
- flex-wrap: wrap;
536
- gap: 0.5rem;
537
- justify-content: center;
538
- transform: rotate(-1deg);
539
- }
540
-
541
- :global(.fortune-cookie-number) {
542
- font-size: 0.75rem;
543
- line-height: 1rem;
544
- font-weight: 700;
545
- background-color: #f1f5f9;
546
- color: #dc2626;
547
- padding-left: 0.5rem;
548
- padding-right: 0.5rem;
549
- padding-top: 0.125rem;
550
- padding-bottom: 0.125rem;
551
- border-radius: 0.25rem;
552
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
553
- border: 1px solid #fee2e2;
554
- }
555
-
556
- .fortune-cookie-particles {
557
- position: absolute;
558
- inset: 0;
559
- pointer-events: none;
560
- overflow: visible;
561
- z-index: 20;
562
- }
563
-
564
- .fortune-cookie-reset {
565
- display: none;
566
- margin-top: 3rem;
567
- flex-direction: column;
568
- align-items: center;
569
- gap: 1rem;
570
- }
571
-
572
- .fortune-cookie-reset.visible {
573
- display: flex;
574
- }
575
-
576
- .fortune-cookie-status {
577
- font-size: 0.875rem;
578
- line-height: 1.25rem;
579
- color: var(--fortune-cookie-text-dim);
580
- }
581
-
582
- .fortune-cookie-share-btn {
583
- padding-left: 1.5rem;
584
- padding-right: 1.5rem;
585
- padding-top: 0.5rem;
586
- padding-bottom: 0.5rem;
587
- background-color: #f1f5f9;
588
- color: #334155;
589
- border-radius: 9999px;
590
- font-size: 0.875rem;
591
- line-height: 1.25rem;
592
- font-weight: 700;
593
- border: none;
594
- cursor: pointer;
595
- display: flex;
596
- align-items: center;
597
- gap: 0.5rem;
598
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
599
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
600
- transition-duration: 150ms;
601
- }
602
-
603
- :global(.theme-dark) .fortune-cookie-share-btn {
604
- background-color: #1e293b;
605
- color: #cbd5e1;
606
- }
607
-
608
- .fortune-cookie-share-btn:hover {
609
- background-color: #e2e8f0;
610
- }
611
-
612
- :global(.theme-dark) .fortune-cookie-share-btn:hover {
613
- background-color: #334155;
614
- }
615
-
616
- .fortune-cookie-shake-1 {
617
- animation: fortune-cookie-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
618
- }
619
-
620
- .fortune-cookie-shake-2 {
621
- animation: fortune-cookie-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
622
- }
623
-
624
- .fortune-cookie-shake-3 {
625
- animation: fortune-cookie-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
626
- }
627
-
628
- @keyframes fortune-cookie-shake {
629
- 10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); }
630
- 20%, 80% { transform: translate3d(2px, 0, 0) rotate(2deg); }
631
- 30%, 50%, 70% { transform: translate3d(-4px, 0, 0) rotate(-4deg); }
632
- 40%, 60% { transform: translate3d(4px, 0, 0) rotate(4deg); }
633
- }
634
-
635
- :global(.fortune-cookie-crumb) {
636
- position: absolute;
637
- width: 20px;
638
- height: 20px;
639
- background-image: url("/images/utilities/fortune/fc-crumbs.webp");
640
- background-size: contain;
641
- background-repeat: no-repeat;
642
- pointer-events: none;
643
- }
644
- </style>
@@ -0,0 +1,40 @@
1
+ import type { CreativeToolEntry, ToolLocaleContent } from '../../types';
2
+
3
+ export interface FortuneCookieUI {
4
+ [key: string]: string;
5
+ instruction: string;
6
+ title: string;
7
+ description: string;
8
+ dailyStatus: string;
9
+ shareBtn: string;
10
+ shareTitle: string;
11
+ shareText: string;
12
+ copied: string;
13
+ fortunes: string;
14
+ faqTitle: string;
15
+ bibliographyTitle: string;
16
+ }
17
+
18
+ export type FortuneCookieLocaleContent = ToolLocaleContent<FortuneCookieUI>;
19
+
20
+ export const fortuneCookie: CreativeToolEntry<FortuneCookieUI> = {
21
+ id: 'fortune-cookie',
22
+ icons: { bg: 'mdi:cookie', fg: 'mdi:sparkles' },
23
+ i18n: {
24
+ es: () => import('./i18n/es').then((m) => m.content),
25
+ en: () => import('./i18n/en').then((m) => m.content),
26
+ fr: () => import('./i18n/fr').then((m) => m.content),
27
+ de: () => import('./i18n/de').then((m) => m.content),
28
+ id: () => import('./i18n/id').then((m) => m.content),
29
+ it: () => import('./i18n/it').then((m) => m.content),
30
+ ja: () => import('./i18n/ja').then((m) => m.content),
31
+ ko: () => import('./i18n/ko').then((m) => m.content),
32
+ nl: () => import('./i18n/nl').then((m) => m.content),
33
+ pl: () => import('./i18n/pl').then((m) => m.content),
34
+ pt: () => import('./i18n/pt').then((m) => m.content),
35
+ ru: () => import('./i18n/ru').then((m) => m.content),
36
+ sv: () => import('./i18n/sv').then((m) => m.content),
37
+ tr: () => import('./i18n/tr').then((m) => m.content),
38
+ zh: () => import('./i18n/zh').then((m) => m.content),
39
+ },
40
+ };