roxopastel commited on
Commit
2a31f5a
·
verified ·
1 Parent(s): 5c8bbfc
Files changed (1) hide show
  1. index.html +1593 -19
index.html CHANGED
@@ -1,19 +1,1593 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
6
+ <title> DOODLES AI — Biblioteca de Prompts</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --pink: #FFB3E6;
11
+ --yellow: #FFE780;
12
+ --orange: #FFC897;
13
+ --green: #B3FFC7;
14
+ --blue: #A1E9FF;
15
+ --purple: #C5C5FF;
16
+ --ink: #1A1014;
17
+ --bg: #F5F0F8;
18
+ --white: #FFFFFF;
19
+ --shadow: 3px 3px 0 var(--ink);
20
+ --shadow-lg: 5px 5px 0 var(--ink);
21
+ --r-sm: 12px; --r-md: 18px; --r-lg: 26px;
22
+ --grad: linear-gradient(90deg,#FFB3E6,#FFC897,#FFE780,#B3FFC7,#A1E9FF,#C5C5FF);
23
+ }
24
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
25
+ html{scroll-behavior:smooth;}
26
+ body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;}
27
+
28
+ body::before{content:'';position:fixed;inset:0;background-image:
29
+ radial-gradient(circle at 10% 15%,var(--pink) 0%,transparent 40%),
30
+ radial-gradient(circle at 90% 10%,var(--blue) 0%,transparent 35%),
31
+ radial-gradient(circle at 85% 88%,var(--purple) 0%,transparent 40%),
32
+ radial-gradient(circle at 5% 85%,var(--green) 0%,transparent 35%);
33
+ opacity:.16;pointer-events:none;z-index:0;}
34
+
35
+ /* ── RAINBOW BAR ── */
36
+ .rb{height:5px;background:linear-gradient(90deg,#FFB3E6,#FFC897,#FFE780,#B3FFC7,#A1E9FF,#C5C5FF,#FFB3E6);background-size:200%;animation:rslide 3s linear infinite;position:relative;z-index:10;}
37
+ @keyframes rslide{0%{background-position:0%}100%{background-position:200%}}
38
+
39
+ /* ── HEADER ── */
40
+ header{background:var(--ink);padding:2.2rem 1rem 2rem;text-align:center;position:relative;z-index:2;overflow:hidden;}
41
+ header::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 14px,rgba(255,255,255,0.03) 14px,rgba(255,255,255,0.03) 28px);pointer-events:none;}
42
+ .eyebrow{display:inline-block;background:var(--yellow);color:var(--ink);font-size:.7rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;padding:4px 14px;border-radius:50px;border:3px solid var(--ink);box-shadow:var(--shadow);margin-bottom:1rem;animation:bob 4s ease-in-out infinite;}
43
+ @keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-5px) rotate(1deg);}}
44
+ h1{font-size:clamp(2.4rem,8vw,5rem);font-weight:900;color:#fff;line-height:1;letter-spacing:-1px;position:relative;z-index:1;}
45
+ h1 .a1{color:var(--pink);}
46
+ h1 .a2{color:var(--yellow);animation:glow 2s ease-in-out infinite;}
47
+ @keyframes glow{0%,100%{text-shadow:0 0 10px rgba(255,231,128,.3);}50%{text-shadow:0 0 25px rgba(255,231,128,.8),0 0 50px rgba(255,231,128,.4);}}
48
+ .sub{font-size:clamp(.82rem,2.2vw,1rem);font-weight:800;background:var(--grad);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rslide 3s linear infinite;margin-top:.6rem;position:relative;z-index:1;}
49
+ .htags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:1.1rem;position:relative;z-index:1;}
50
+ .htag{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:3px 12px;border-radius:50px;font-size:.73rem;font-weight:800;}
51
+
52
+ /* ── STATS ── */
53
+ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:1.1rem;}
54
+ .stat{background:var(--ink);border-radius:var(--r-md);border:3px solid var(--ink);box-shadow:var(--shadow);padding:.85rem .7rem;text-align:center;}
55
+ .stat-icon{font-size:1.3rem;display:block;margin-bottom:2px;}
56
+ .stat-val{font-size:1.3rem;font-weight:900;color:var(--yellow);display:block;line-height:1;}
57
+ .stat-lbl{font-size:.6rem;font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1.5px;display:block;margin-top:2px;}
58
+ .stat-val.pop{animation:cpop .3s ease;}
59
+ @keyframes cpop{0%{transform:scale(1.5);color:var(--pink);}100%{transform:scale(1);color:var(--yellow);}}
60
+
61
+ /* ── TICKER ── */
62
+ .ticker{background:var(--ink);border:3px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;margin-bottom:1.1rem;box-shadow:var(--shadow);position:relative;}
63
+ .tlbl{position:absolute;left:0;top:0;bottom:0;background:var(--yellow);color:var(--ink);font-size:.62rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;padding:0 10px;z-index:2;border-right:3px solid var(--ink);white-space:nowrap;}
64
+ .ttrack{display:flex;padding:.45rem 0;padding-left:80px;overflow:hidden;}
65
+ .tinner{display:flex;gap:0;animation:tick 60s linear infinite;white-space:nowrap;}
66
+ .titem{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.75);font-size:.73rem;font-weight:700;padding:0 18px;border-right:1px solid rgba(255,255,255,.1);}
67
+ .titem span{color:var(--green);}
68
+ @keyframes tick{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
69
+
70
+ /* ── WRAPPER ── */
71
+ .wrap{max-width:860px;margin:0 auto;padding:1.5rem 1rem 5rem;position:relative;z-index:1;}
72
+
73
+ /* ── FILTER TABS ── */
74
+ .filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.1rem;}
75
+ .ftab{background:var(--white);border:3px solid var(--ink);border-radius:var(--r-sm);font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:800;padding:6px 13px;cursor:pointer;box-shadow:var(--shadow);transition:all .12s;color:var(--ink);touch-action:manipulation;}
76
+ .ftab:hover{transform:translateY(-2px);box-shadow:4px 6px 0 var(--ink);}
77
+ .ftab:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink);}
78
+ .ftab.active{background:var(--ink);color:var(--yellow);}
79
+ .ftab.pink{background:var(--pink);}
80
+ .ftab.yellow{background:var(--yellow);}
81
+ .ftab.green{background:var(--green);}
82
+ .ftab.blue{background:var(--blue);}
83
+ .ftab.purple{background:var(--purple);}
84
+ .ftab.orange{background:var(--orange);}
85
+
86
+ /* ── SEARCH ── */
87
+ .search-wrap{position:relative;margin-bottom:1.1rem;}
88
+ .search-wrap input{width:100%;padding:.7rem 1rem .7rem 2.4rem;border:3px solid var(--ink);border-radius:var(--r-md);font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;background:var(--white);box-shadow:var(--shadow);outline:none;color:var(--ink);}
89
+ .search-wrap input:focus{border-color:var(--purple);box-shadow:4px 4px 0 var(--ink);}
90
+ .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none;}
91
+ .search-clear{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1rem;cursor:pointer;opacity:.5;}
92
+ .search-clear:hover{opacity:1;}
93
+
94
+ /* ── SECTION ── */
95
+ .section{background:var(--white);border:3px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-lg);margin-bottom:.9rem;overflow:hidden;transition:box-shadow .15s,transform .15s;}
96
+ .section:hover{transform:translateY(-2px);box-shadow:6px 8px 0 var(--ink);}
97
+ .s1 .sh{background:var(--pink);} .s2 .sh{background:var(--yellow);}
98
+ .s3 .sh{background:var(--orange);} .s4 .sh{background:var(--green);}
99
+ .s5 .sh{background:var(--blue);} .s6 .sh{background:var(--purple);}
100
+ .s7 .sh{background:var(--pink);} .s8 .sh{background:var(--yellow);}
101
+ .s9 .sh{background:var(--orange);} .s10 .sh{background:var(--green);}
102
+ .s11 .sh{background:var(--blue);} .s12 .sh{background:var(--purple);}
103
+
104
+ .sh{padding:.85rem 1rem;display:flex;align-items:center;gap:9px;cursor:pointer;border-bottom:3px solid transparent;user-select:none;-webkit-tap-highlight-color:transparent;transition:filter .1s;}
105
+ .sh:active{filter:brightness(.92);}
106
+ .snum{font-size:.95rem;font-weight:900;width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:2px 2px 0 var(--ink);background:var(--ink);color:var(--yellow);position:relative;}
107
+ .stitle{font-size:.95rem;font-weight:900;flex:1;color:var(--ink);line-height:1.25;}
108
+ .stoggle{font-size:.95rem;color:var(--ink);opacity:.5;transition:transform .25s;flex-shrink:0;}
109
+ .sbadge{font-size:.58rem;font-weight:900;padding:2px 8px;border-radius:50px;border:2px solid var(--ink);background:var(--ink);color:rgba(255,255,255,.35);letter-spacing:.5px;flex-shrink:0;transition:all .3s;}
110
+ .section.open .sbadge{background:var(--yellow);color:var(--ink);}
111
+ .section.open .sh{border-bottom:3px solid var(--ink);}
112
+ .section.open .stoggle{transform:rotate(180deg);opacity:.9;}
113
+
114
+ .sbody{display:none;animation:sdown .22s ease;}
115
+ @keyframes sdown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
116
+ .section.open .sbody{display:block;}
117
+
118
+ /* ── PROMPT GRID ── */
119
+ .pgrid{display:grid;gap:8px;padding:1rem 1rem .5rem;}
120
+ .pgrid.cols2{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
121
+
122
+ .pcard{background:var(--ink);border-radius:var(--r-sm);border:2px solid var(--ink);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:all .15s;position:relative;}
123
+ .pcard:hover{transform:translateY(-2px);box-shadow:4px 6px 0 var(--ink);}
124
+ .pcard:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--ink);}
125
+
126
+ .pcard-label{font-size:.6rem;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:.5rem .75rem .2rem;color:rgba(255,255,255,.45);}
127
+ .pcard pre{color:var(--green);font-family:'Space Mono',monospace;font-size:.72rem;line-height:1.55;padding:.25rem .75rem .7rem;white-space:pre-wrap;word-break:break-word;margin:0;border:none;box-shadow:none;background:transparent;}
128
+ .pcard-copy{position:absolute;top:.4rem;right:.6rem;font-size:.58rem;font-family:'Nunito',sans-serif;font-weight:900;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.5px;transition:color .2s;pointer-events:none;}
129
+ .pcard:hover .pcard-copy{color:var(--yellow);}
130
+ .pcard.copied{border-color:var(--green) !important;}
131
+ .pcard.copied .pcard-copy{content:'✓ copiado!';color:var(--green) !important;}
132
+ .pcard.copied pre{color:#7fff9a;}
133
+
134
+ /* tag chips inside section */
135
+ .ptag{display:inline-block;font-size:.65rem;font-weight:900;padding:2px 9px;border-radius:50px;border:2px solid var(--ink);margin:2px;box-shadow:1px 1px 0 var(--ink);cursor:default;}
136
+ .ptag:hover{transform:scale(1.08) rotate(-2deg);}
137
+ .ptag-pink{background:var(--pink);}
138
+ .ptag-yellow{background:var(--yellow);}
139
+ .ptag-green{background:var(--green);}
140
+ .ptag-blue{background:var(--blue);}
141
+ .ptag-purple{background:var(--purple);}
142
+ .ptag-orange{background:var(--orange);}
143
+
144
+ /* section body base styles */
145
+ .sbody h3{font-size:.9rem;font-weight:900;margin:1rem 1rem .35rem;color:var(--ink);display:flex;align-items:center;gap:5px;}
146
+ .sbody h3:first-child{margin-top:.75rem;}
147
+ .sbody p{font-size:.85rem;line-height:1.6;color:#2a2028;margin:.4rem 1rem .5rem;}
148
+ .sbody .info{background:rgba(161,233,255,.3);border-left:4px solid var(--blue);padding:.65rem .9rem;margin:.5rem 1rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.83rem;line-height:1.55;}
149
+ .sbody .warn{background:rgba(255,200,151,.3);border-left:4px solid var(--orange);padding:.65rem .9rem;margin:.5rem 1rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.83rem;line-height:1.55;}
150
+ .sbody .tip{background:rgba(179,255,199,.3);border-left:4px solid var(--green);padding:.65rem .9rem;margin:.5rem 1rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.83rem;line-height:1.55;}
151
+ .sbody strong{font-weight:900;}
152
+ .pbottom{height:.75rem;}
153
+
154
+ /* count badge on section header */
155
+ .cnt{background:var(--ink);color:var(--yellow);font-size:.6rem;font-weight:900;padding:1px 7px;border-radius:50px;flex-shrink:0;}
156
+ .section.s1 .cnt{background:var(--pink);color:var(--ink);}
157
+ .section.s2 .cnt{background:var(--yellow);color:var(--ink);}
158
+ .section.s3 .cnt{background:var(--orange);color:var(--ink);}
159
+ .section.s4 .cnt{background:var(--green);color:var(--ink);}
160
+ .section.s5 .cnt{background:var(--blue);color:var(--ink);}
161
+ .section.s6 .cnt{background:var(--purple);color:var(--ink);}
162
+ .section.s7 .cnt{background:var(--pink);color:var(--ink);}
163
+ .section.s8 .cnt{background:var(--yellow);color:var(--ink);}
164
+ .section.s9 .cnt{background:var(--orange);color:var(--ink);}
165
+ .section.s10 .cnt{background:var(--green);color:var(--ink);}
166
+ .section.s11 .cnt{background:var(--blue);color:var(--ink);}
167
+ .section.s12 .cnt{background:var(--purple);color:var(--ink);}
168
+
169
+ /* ── EMPTY STATE ── */
170
+ .empty{text-align:center;padding:2.5rem 1rem;color:rgba(26,16,20,.35);font-size:.9rem;font-weight:800;}
171
+ .empty .emoji{font-size:2.5rem;display:block;margin-bottom:.5rem;}
172
+
173
+ /* ── TOAST ── */
174
+ .toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--yellow);font-size:.8rem;font-weight:800;padding:7px 18px;border-radius:50px;border:3px solid var(--yellow);box-shadow:var(--shadow-lg);z-index:300;transition:transform .3s cubic-bezier(.36,.07,.19,.97),opacity .3s;opacity:0;white-space:nowrap;}
175
+ .toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
176
+
177
+ /* ── SCROLL TOP ── */
178
+ #scrolltop{position:fixed;bottom:1.3rem;right:1.1rem;width:42px;height:42px;background:var(--ink);color:var(--yellow);border:3px solid var(--ink);border-radius:50%;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);z-index:100;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;touch-action:manipulation;}
179
+ #scrolltop.visible{opacity:1;transform:translateY(0);}
180
+
181
+ /* ── CONFETTI ── */
182
+ .cf{position:fixed;pointer-events:none;z-index:500;border-radius:2px;animation:cfall linear forwards;}
183
+ @keyframes cfall{0%{transform:translateY(-20px) rotate(0);opacity:1;}100%{transform:translateY(100vh) rotate(720deg);opacity:0;}}
184
+
185
+ /* ── RESPONSIVE ── */
186
+ @media(max-width:480px){
187
+ .pgrid.cols2{grid-template-columns:1fr;}
188
+ .filter-bar{gap:5px;}
189
+ .ftab{font-size:.7rem;padding:5px 10px;}
190
+ .stats{grid-template-columns:repeat(2,1fr);}
191
+ }
192
+ </style>
193
+ </head>
194
+ <body>
195
+
196
+ <div class="toast" id="toast"></div>
197
+ <div class="rb"></div>
198
+
199
+ <header>
200
+ <div class="eyebrow">✦ PROMPT LIBRARY v.02 · 2025/2026</div>
201
+ <h1>DOODLES<span class="a1">.</span><span class="a2">AI</span></h1>
202
+ <div class="sub">Biblioteca de Prompts — Copie e Cole 📋</div>
203
+ <div class="htags">
204
+ <span class="htag">🎨 Personagens</span>
205
+ <span class="htag">🌆 Cenários</span>
206
+ <span class="htag">📦 Produtos</span>
207
+ <span class="htag">🔥 <span id="totalCount">0</span> prompts</span>
208
+ </div>
209
+ </header>
210
+
211
+ <div class="rb"></div>
212
+
213
+ <div class="wrap">
214
+
215
+ <!-- STATS -->
216
+ <div class="stats">
217
+ <div class="stat">
218
+ <span class="stat-icon">📋</span>
219
+ <span class="stat-val" id="statCopied">0</span>
220
+ <span class="stat-lbl">Prompts copiados</span>
221
+ </div>
222
+ <div class="stat">
223
+ <span class="stat-icon">⚡</span>
224
+ <span class="stat-val" id="statXP">0</span>
225
+ <span class="stat-lbl">XP Total</span>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- TICKER -->
230
+ <div class="ticker">
231
+ <div class="tlbl">💡 DICA</div>
232
+ <div class="ttrack"><div class="tinner" id="tinner">
233
+ <span class="titem">Clique em qualquer card para <span>copiar o prompt</span></span>
234
+ <span class="titem">Roupa SEMPRE com cor no prompt</span>
235
+ <span class="titem">Use <span>chubby doodle</span> ou <span>slim doodle</span></span>
236
+ <span class="titem">Fundo <span>sempre no FINAL</span> da cena</span>
237
+ <span class="titem">Máximo <span>2 objetos</span> por cena</span>
238
+ <span class="titem">Fixe a <span>seed</span> para série de personagens</span>
239
+ <span class="titem">Efeito X <span>OFF</span> para product shots e stickers</span>
240
+ <span class="titem">Base do Personagem = <span>ancora fixa</span> da série</span>
241
+ <span class="titem">Clique em qualquer card para <span>copiar o prompt</span></span>
242
+ <span class="titem">Roupa SEMPRE com cor no prompt</span>
243
+ <span class="titem">Use <span>chubby doodle</span> ou <span>slim doodle</span></span>
244
+ <span class="titem">Fundo <span>sempre no FINAL</span> da cena</span>
245
+ <span class="titem">Máximo <span>2 objetos</span> por cena</span>
246
+ <span class="titem">Fixe a <span>seed</span> para série de personagens</span>
247
+ <span class="titem">Efeito X <span>OFF</span> para product shots e stickers</span>
248
+ <span class="titem">Base do Personagem = <span>ancora fixa</span> da série</span>
249
+ </div></div>
250
+ </div>
251
+
252
+ <!-- SEARCH -->
253
+ <div class="search-wrap">
254
+ <span class="search-icon">🔍</span>
255
+ <input type="text" id="searchInput" placeholder="Buscar prompts... ex: coffee, pixel art, meme..." autocomplete="off">
256
+ <button class="search-clear" id="searchClear" onclick="clearSearch()" style="display:none">✕</button>
257
+ </div>
258
+
259
+ <!-- FILTER TABS -->
260
+ <div class="filter-bar" id="filterBar">
261
+ <button class="ftab active" data-cat="all" onclick="filterCat(this,'all')">✦ Todos</button>
262
+ <button class="ftab pink" data-cat="personagens" onclick="filterCat(this,'personagens')">👤 Personagens</button>
263
+ <button class="ftab orange" data-cat="animais" onclick="filterCat(this,'animais')">🐾 Animais</button>
264
+ <button class="ftab green" data-cat="cenarios" onclick="filterCat(this,'cenarios')">🌄 Cenários</button>
265
+ <button class="ftab blue" data-cat="produtos" onclick="filterCat(this,'produtos')">📦 Produtos</button>
266
+ <button class="ftab purple" data-cat="meme" onclick="filterCat(this,'meme')">🎭 Meme/GC</button>
267
+ <button class="ftab yellow" data-cat="lettering" onclick="filterCat(this,'lettering')">✏️ Lettering</button>
268
+ <button class="ftab pink" data-cat="pixel" onclick="filterCat(this,'pixel')">🎮 Pixel ART</button>
269
+ <button class="ftab orange" data-cat="dark" onclick="filterCat(this,'dark')">🌌 Dark Mode</button>
270
+ <button class="ftab green" data-cat="sticker" onclick="filterCat(this,'sticker')">🖼️ Stickers</button>
271
+ </div>
272
+
273
+ <!-- ═══════════════════════════════════════
274
+ SECTION 1 — PERSONAGENS FEMININOS
275
+ ═══════════════════════════════════════ -->
276
+ <div class="section s1 open" id="s-pf" data-cat="personagens">
277
+ <div class="sh" onclick="toggle(this)">
278
+ <div class="snum">1</div>
279
+ <div class="stitle">👩 Personagens Femininos</div>
280
+ <div class="sbadge">LIDO ✓</div>
281
+ <div class="cnt" id="cnt-pf"></div>
282
+ <div class="stoggle">▼</div>
283
+ </div>
284
+ <div class="sbody">
285
+ <div class="pgrid cols2">
286
+
287
+ <div class="pcard" data-cat="personagens" data-tags="mulher café coffee sentada hoodie">
288
+ <div class="pcard-label">Café / Cotidiano</div>
289
+ <pre>a slim doodle woman with pink curly hair,
290
+ wearing a mint green oversized hoodie and white wide-leg pants,
291
+ sitting cross-legged holding a coffee cup,
292
+ medium shot, soft lavender pastel background</pre>
293
+ <div class="pcard-copy">📋 copiar</div>
294
+ </div>
295
+
296
+ <div class="pcard" data-cat="personagens" data-tags="mulher música fone headphones dançando">
297
+ <div class="pcard-label">Música / Dança</div>
298
+ <pre>a slim doodle woman with long pastel blue hair,
299
+ wearing a yellow crop top and sky blue wide-leg pants,
300
+ dancing with headphones on, arms raised joyfully,
301
+ full body shot, mint green background</pre>
302
+ <div class="pcard-copy">📋 copiar</div>
303
+ </div>
304
+
305
+ <div class="pcard" data-cat="personagens" data-tags="mulher lendo livro biblioteca sentada">
306
+ <div class="pcard-label">Leitura / Estudo</div>
307
+ <pre>a chubby doodle woman with short orange hair,
308
+ wearing a soft pink turtleneck sweater and beige wide-leg pants,
309
+ sitting reading a book with a cozy expression,
310
+ medium shot, peach pastel background with simple bookshelf shapes</pre>
311
+ <div class="pcard-copy">📋 copiar</div>
312
+ </div>
313
+
314
+ <div class="pcard" data-cat="personagens" data-tags="mulher moda streetwear pose cool">
315
+ <div class="pcard-label">Streetwear / Moda</div>
316
+ <pre>a slim doodle woman with bleached blonde space buns,
317
+ wearing a dark navy oversized track jacket and lavender baggy jeans,
318
+ chunky white sneakers, standing relaxed arms crossed,
319
+ full body shot, clear skies blue background</pre>
320
+ <div class="pcard-copy">📋 copiar</div>
321
+ </div>
322
+
323
+ <div class="pcard" data-cat="personagens" data-tags="mulher yoga meditação bem estar">
324
+ <div class="pcard-label">Yoga / Meditação</div>
325
+ <pre>a slim doodle woman with dark curly hair,
326
+ wearing a mint green sports bra and peach yoga leggings,
327
+ sitting in lotus pose eyes closed, peaceful expression,
328
+ medium shot, soft gradient pastel background</pre>
329
+ <div class="pcard-copy">📋 copiar</div>
330
+ </div>
331
+
332
+ <div class="pcard" data-cat="personagens" data-tags="mulher artista pintando criatividade">
333
+ <div class="pcard-label">Arte / Criatividade</div>
334
+ <pre>a chubby doodle woman with rainbow streaked hair,
335
+ wearing a pastel yellow oversized overalls and orange t-shirt,
336
+ holding a paint palette and brush, splattered with colorful paint,
337
+ full body shot, white background with colorful paint splashes</pre>
338
+ <div class="pcard-copy">📋 copiar</div>
339
+ </div>
340
+
341
+ <div class="pcard" data-cat="personagens" data-tags="mulher gaming gamer controle">
342
+ <div class="pcard-label">Gaming</div>
343
+ <pre>a slim doodle woman with short mint green hair,
344
+ wearing a dark teal hoodie and black wide-leg pants,
345
+ sitting cross-legged holding a game controller, focused expression,
346
+ medium shot, dark purple background with pixel stars</pre>
347
+ <div class="pcard-copy">📋 copiar</div>
348
+ </div>
349
+
350
+ <div class="pcard" data-cat="personagens" data-tags="mulher festa balão aniversário celebração">
351
+ <div class="pcard-label">Festa / Celebração</div>
352
+ <pre>a chubby doodle woman with long pink hair and party hat,
353
+ wearing a pastel purple mini dress and chunky white platform shoes,
354
+ holding colorful balloons, jumping mid-air with confetti,
355
+ full body shot, lemon yellow background with confetti shapes</pre>
356
+ <div class="pcard-copy">📋 copiar</div>
357
+ </div>
358
+
359
+ <div class="pcard" data-cat="personagens" data-tags="mulher praia verão biquini sol">
360
+ <div class="pcard-label">Praia / Verão</div>
361
+ <pre>a slim doodle woman with long wavy orange hair,
362
+ wearing a mint green bikini top and sky blue swim shorts,
363
+ sunglasses on head, holding a tropical drink,
364
+ full body shot, warm sand pastel beach background with palm tree silhouettes</pre>
365
+ <div class="pcard-copy">📋 copiar</div>
366
+ </div>
367
+
368
+ <div class="pcard" data-cat="personagens" data-tags="mulher chef cozinha avental">
369
+ <div class="pcard-label">Chef / Cozinha</div>
370
+ <pre>a chubby doodle woman with black hair in a bun,
371
+ wearing a white chef apron over a pastel pink shirt,
372
+ holding a wooden spoon and mixing bowl, cheerful expression,
373
+ medium shot, warm orange kitchen background with simple cabinet shapes</pre>
374
+ <div class="pcard-copy">📋 copiar</div>
375
+ </div>
376
+
377
+ <div class="pcard" data-cat="personagens" data-tags="mulher corrida esporte fitness">
378
+ <div class="pcard-label">Esporte / Corrida</div>
379
+ <pre>a slim doodle woman with high ponytail lavender hair,
380
+ wearing a sky blue sports jacket and mint green running shorts,
381
+ running mid-stride energetically, motion lines,
382
+ full body shot, gradient pastel sky background</pre>
383
+ <div class="pcard-copy">📋 copiar</div>
384
+ </div>
385
+
386
+ <div class="pcard" data-cat="personagens" data-tags="mulher trabalho laptop home office">
387
+ <div class="pcard-label">Home Office</div>
388
+ <pre>a slim doodle woman with shoulder-length pastel pink hair,
389
+ wearing a soft lavender turtleneck and beige wide-leg pants,
390
+ sitting at a desk typing on laptop, focused expression,
391
+ medium shot, mint green background with simple desk and plant shapes</pre>
392
+ <div class="pcard-copy">📋 copiar</div>
393
+ </div>
394
+
395
+ </div>
396
+ <div class="pbottom"></div>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- ═══════════════════════════════════════
401
+ SECTION 2 — PERSONAGENS MASCULINOS
402
+ ═══════════════════════════════════════ -->
403
+ <div class="section s2" id="s-pm" data-cat="personagens">
404
+ <div class="sh" onclick="toggle(this)">
405
+ <div class="snum">2</div>
406
+ <div class="stitle">👨 Personagens Masculinos</div>
407
+ <div class="sbadge">LOCKED</div>
408
+ <div class="cnt" id="cnt-pm"></div>
409
+ <div class="stoggle">▼</div>
410
+ </div>
411
+ <div class="sbody">
412
+ <div class="pgrid cols2">
413
+
414
+ <div class="pcard" data-cat="personagens" data-tags="homem café café cotidiano mochila">
415
+ <div class="pcard-label">Cotidiano / Café</div>
416
+ <pre>a slim doodle man with short teal hair,
417
+ wearing a dark navy hoodie and black wide-leg pants,
418
+ holding a coffee cup with steam rising, relaxed expression,
419
+ medium shot, soft peach pastel background</pre>
420
+ <div class="pcard-copy">📋 copiar</div>
421
+ </div>
422
+
423
+ <div class="pcard" data-cat="personagens" data-tags="homem streetwear skate cap boné">
424
+ <div class="pcard-label">Streetwear / Skate</div>
425
+ <pre>a slim doodle man with bleached hair under a dark navy cap,
426
+ wearing a pastel yellow oversized track jacket and baggy dark jeans,
427
+ chunky colorful sneakers, standing relaxed one hand in pocket,
428
+ full body shot, grape jelly purple background</pre>
429
+ <div class="pcard-copy">📋 copiar</div>
430
+ </div>
431
+
432
+ <div class="pcard" data-cat="personagens" data-tags="homem músico guitarra banda">
433
+ <div class="pcard-label">Músico / Guitarra</div>
434
+ <pre>a slim doodle man with long black wavy hair,
435
+ wearing a dark teal band tee and black ripped wide-leg jeans,
436
+ holding an electric guitar in cool pose,
437
+ full body shot, neon-tinted dark background with star shapes</pre>
438
+ <div class="pcard-copy">📋 copiar</div>
439
+ </div>
440
+
441
+ <div class="pcard" data-cat="personagens" data-tags="homem chef cozinha avental cozinhando">
442
+ <div class="pcard-label">Chef / Cozinha</div>
443
+ <pre>a chubby doodle man with short curly orange hair,
444
+ wearing a white chef apron over a sky blue shirt,
445
+ tossing food in a pan with a big smile,
446
+ medium shot, warm peach kitchen background</pre>
447
+ <div class="pcard-copy">📋 copiar</div>
448
+ </div>
449
+
450
+ <div class="pcard" data-cat="personagens" data-tags="homem academia treino halteres fitness">
451
+ <div class="pcard-label">Academia / Treino</div>
452
+ <pre>a chubby doodle man with dark buzz cut,
453
+ wearing a mint green tank top and dark navy gym shorts,
454
+ holding dumbbells flexing, determined expression,
455
+ full body shot, orange sorbet background</pre>
456
+ <div class="pcard-copy">📋 copiar</div>
457
+ </div>
458
+
459
+ <div class="pcard" data-cat="personagens" data-tags="homem trabalho laptop escritório negócios">
460
+ <div class="pcard-label">Trabalho / Negócios</div>
461
+ <pre>a slim doodle man with short pastel blue hair,
462
+ wearing a soft lavender button-up shirt and dark navy pants,
463
+ sitting at desk with laptop open, coffee cup nearby, focused,
464
+ medium shot, clear skies blue background with simple window shapes</pre>
465
+ <div class="pcard-copy">📋 copiar</div>
466
+ </div>
467
+
468
+ <div class="pcard" data-cat="personagens" data-tags="homem delivery motoboy mochila capacete">
469
+ <div class="pcard-label">Delivery / Motoboy</div>
470
+ <pre>a slim doodle man with short dark hair under a bright orange helmet,
471
+ wearing an orange delivery jacket and dark navy pants,
472
+ holding a delivery bag, giving thumbs up,
473
+ full body shot, lemon yellow background with simple city outline</pre>
474
+ <div class="pcard-copy">📋 copiar</div>
475
+ </div>
476
+
477
+ <div class="pcard" data-cat="personagens" data-tags="homem festa dj música boate">
478
+ <div class="pcard-label">DJ / Festa</div>
479
+ <pre>a slim doodle man with neon green hair,
480
+ wearing a dark teal hoodie and black baggy pants,
481
+ standing behind a DJ setup hands on mixer, energetic pose,
482
+ medium shot, neon-lit dark purple background with light beam shapes</pre>
483
+ <div class="pcard-copy">📋 copiar</div>
484
+ </div>
485
+
486
+ <div class="pcard" data-cat="personagens" data-tags="homem artista grafite spray wall">
487
+ <div class="pcard-label">Grafite / Arte Urbana</div>
488
+ <pre>a slim doodle man with colorful paint-stained dark hair,
489
+ wearing a mint green hoodie and dark baggy cargo pants,
490
+ holding a spray can in front of a colorful wall, smiling,
491
+ full body shot, vivid graffiti-style background</pre>
492
+ <div class="pcard-copy">📋 copiar</div>
493
+ </div>
494
+
495
+ <div class="pcard" data-cat="personagens" data-tags="homem aventura mochileiro viagem mochila">
496
+ <div class="pcard-label">Aventura / Mochileiro</div>
497
+ <pre>a slim doodle man with messy light brown hair,
498
+ wearing a pastel yellow hiking jacket and dark olive wide-leg pants,
499
+ with a big colorful backpack, looking at a map excitedly,
500
+ full body shot, colorful mountain landscape background</pre>
501
+ <div class="pcard-copy">📋 copiar</div>
502
+ </div>
503
+
504
+ </div>
505
+ <div class="pbottom"></div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- ══════════════════════════════���════════
510
+ SECTION 3 — ANIMAIS ANTROPOMÓRFICOS
511
+ ═══════════════════════════════════════ -->
512
+ <div class="section s3" id="s-ani" data-cat="animais">
513
+ <div class="sh" onclick="toggle(this)">
514
+ <div class="snum">3</div>
515
+ <div class="stitle">🐾 Animais Antropomórficos</div>
516
+ <div class="sbadge">LOCKED</div>
517
+ <div class="cnt" id="cnt-ani"></div>
518
+ <div class="stoggle">▼</div>
519
+ </div>
520
+ <div class="sbody">
521
+ <div class="sbody tip" style="margin:0.75rem 1rem 0;"><strong>Fórmula:</strong> <code>a [chubby/slim] anthropomorphic [animal] doodle wearing [roupa]...</code></div>
522
+ <div class="pgrid cols2">
523
+
524
+ <div class="pcard" data-cat="animais" data-tags="gato cat café coffee latte barista">
525
+ <div class="pcard-label">Gato Barista</div>
526
+ <pre>a chubby anthropomorphic cat doodle with orange tabby fur,
527
+ wearing a mint green barista apron over a white t-shirt,
528
+ holding a latte cup with art foam, happy expression,
529
+ medium shot, warm pastel coffee shop background</pre>
530
+ <div class="pcard-copy">📋 copiar</div>
531
+ </div>
532
+
533
+ <div class="pcard" data-cat="animais" data-tags="coelho rabbit streetwear moda">
534
+ <div class="pcard-label">Coelho Streetwear</div>
535
+ <pre>a slim anthropomorphic rabbit doodle with white fur and floppy ears,
536
+ wearing a pastel yellow oversized hoodie and sky blue baggy pants,
537
+ white chunky sneakers, standing cool pose,
538
+ full body shot, grape jelly purple background</pre>
539
+ <div class="pcard-copy">📋 copiar</div>
540
+ </div>
541
+
542
+ <div class="pcard" data-cat="animais" data-tags="urso bear chef cozinha">
543
+ <div class="pcard-label">Urso Chef</div>
544
+ <pre>a chubby anthropomorphic bear doodle with brown fur,
545
+ wearing a white chef hat and orange apron over a pastel blue shirt,
546
+ holding a large pan and wooden spoon, joyful expression,
547
+ medium shot, warm kitchen orange background</pre>
548
+ <div class="pcard-copy">📋 copiar</div>
549
+ </div>
550
+
551
+ <div class="pcard" data-cat="animais" data-tags="pato duck músico headphone fone">
552
+ <div class="pcard-label">Pato DJ</div>
553
+ <pre>a chubby anthropomorphic duck doodle with yellow feathers,
554
+ wearing a dark navy oversized hoodie and pastel blue wide-leg pants,
555
+ headphones around neck, holding a vinyl record,
556
+ full body shot, mint green background</pre>
557
+ <div class="pcard-copy">📋 copiar</div>
558
+ </div>
559
+
560
+ <div class="pcard" data-cat="animais" data-tags="raposa fox artista pintura criativa">
561
+ <div class="pcard-label">Raposa Artista</div>
562
+ <pre>a slim anthropomorphic fox doodle with orange fur and white chest,
563
+ wearing pastel purple overalls and a mint green t-shirt,
564
+ holding a paintbrush and palette, focused artistic expression,
565
+ full body shot, soft cream background with paint splatter shapes</pre>
566
+ <div class="pcard-copy">📋 copiar</div>
567
+ </div>
568
+
569
+ <div class="pcard" data-cat="animais" data-tags="panda gaming gamer controle videogame">
570
+ <div class="pcard-label">Panda Gamer</div>
571
+ <pre>a chubby anthropomorphic panda doodle with black and white fur,
572
+ wearing a dark teal hoodie and black baggy pants,
573
+ sitting cross-legged with a game controller, intense focus,
574
+ medium shot, purple gaming setup background with neon accents</pre>
575
+ <div class="pcard-copy">📋 copiar</div>
576
+ </div>
577
+
578
+ <div class="pcard" data-cat="animais" data-tags="cachorro dog surf praia verão">
579
+ <div class="pcard-label">Cachorro Surfista</div>
580
+ <pre>a slim anthropomorphic dog doodle with golden fur,
581
+ wearing a mint green rashguard and orange board shorts,
582
+ carrying a surfboard under one arm, shaka gesture with other hand,
583
+ full body shot, tropical beach pastel background with wave shapes</pre>
584
+ <div class="pcard-copy">📋 copiar</div>
585
+ </div>
586
+
587
+ <div class="pcard" data-cat="animais" data-tags="elefante elephant yoga meditação zen">
588
+ <div class="pcard-label">Elefante Zen</div>
589
+ <pre>a chubby anthropomorphic elephant doodle with grey skin,
590
+ wearing a pastel purple yoga set with gold accents,
591
+ sitting in lotus meditation pose, eyes closed peacefully,
592
+ medium shot, soft lavender gradient background</pre>
593
+ <div class="pcard-copy">📋 copiar</div>
594
+ </div>
595
+
596
+ <div class="pcard" data-cat="animais" data-tags="leão lion rei king pose real">
597
+ <div class="pcard-label">Leão Rei</div>
598
+ <pre>a chubby anthropomorphic lion doodle with golden mane,
599
+ wearing a pastel yellow royal cape over a dark navy suit,
600
+ arms crossed, powerful proud expression,
601
+ full body shot, lemon yellow background with simple crown shapes</pre>
602
+ <div class="pcard-copy">📋 copiar</div>
603
+ </div>
604
+
605
+ <div class="pcard" data-cat="animais" data-tags="coruja owl estudante escola livro nerd">
606
+ <div class="pcard-label">Coruja Estudiosa</div>
607
+ <pre>a slim anthropomorphic owl doodle with brown feathers and big round glasses,
608
+ wearing a mint green cardigan over a pastel yellow shirt,
609
+ holding a stack of books, curious smart expression,
610
+ medium shot, soft blue background with simple star and moon shapes</pre>
611
+ <div class="pcard-copy">📋 copiar</div>
612
+ </div>
613
+
614
+ </div>
615
+ <div class="pbottom"></div>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- ═══════════════════════════════════════
620
+ SECTION 4 — CENÁRIOS & FUNDOS
621
+ ═══════════════════════════════════════ -->
622
+ <div class="section s4" id="s-cen" data-cat="cenarios">
623
+ <div class="sh" onclick="toggle(this)">
624
+ <div class="snum">4</div>
625
+ <div class="stitle">🌆 Cenários & Fundos</div>
626
+ <div class="sbadge">LOCKED</div>
627
+ <div class="cnt" id="cnt-cen"></div>
628
+ <div class="stoggle">▼</div>
629
+ </div>
630
+ <div class="sbody">
631
+ <div class="pgrid cols2">
632
+
633
+ <div class="pcard" data-cat="cenarios" data-tags="quarto bedroom quarto cozy aconchegante">
634
+ <div class="pcard-label">Quarto Aconchegante</div>
635
+ <pre>cozy doodle bedroom interior,
636
+ pastel pink walls with fairy lights,
637
+ a fluffy bed with mint green blanket, pastel rug,
638
+ small desk with books and plants, warm lamp light,
639
+ wide establishing shot, no people</pre>
640
+ <div class="pcard-copy">📋 copiar</div>
641
+ </div>
642
+
643
+ <div class="pcard" data-cat="cenarios" data-tags="café shop coffee shop loja interior">
644
+ <div class="pcard-label">Café / Coffee Shop</div>
645
+ <pre>a cozy doodle coffee shop interior,
646
+ warm orange walls, wooden counter with baked goods display,
647
+ hanging lamps and potted plants,
648
+ chalkboard menu on the wall, soft warm lighting,
649
+ wide establishing shot, no people</pre>
650
+ <div class="pcard-copy">📋 copiar</div>
651
+ </div>
652
+
653
+ <div class="pcard" data-cat="cenarios" data-tags="espaço space cosmos planetas estrelas galáxia">
654
+ <div class="pcard-label">Espaço / Cosmos</div>
655
+ <pre>outer space doodle scene,
656
+ deep dark blue background with colorful planets,
657
+ pink and purple nebula clouds, bright stars and comets,
658
+ saturn-like ringed planet on left side, distant galaxies,
659
+ wide shot, no people</pre>
660
+ <div class="pcard-copy">📋 copiar</div>
661
+ </div>
662
+
663
+ <div class="pcard" data-cat="cenarios" data-tags="floresta forest magical fantasia natureza">
664
+ <div class="pcard-label">Floresta Mágica</div>
665
+ <pre>a magical doodle forest scene,
666
+ tall colorful trees with pastel trunks,
667
+ glowing mushrooms on the ground,
668
+ fireflies floating in the air, soft mint green fog,
669
+ wide establishing shot, golden hour lighting, no people</pre>
670
+ <div class="pcard-copy">📋 copiar</div>
671
+ </div>
672
+
673
+ <div class="pcard" data-cat="cenarios" data-tags="cidade city noite night urbano cityscape">
674
+ <div class="pcard-label">Cidade à Noite</div>
675
+ <pre>a retro doodle cityscape at night,
676
+ buildings with lit windows in pastel colors,
677
+ neon signs glowing orange and purple,
678
+ crescent moon and stars in dark sky,
679
+ wide establishing shot, no people</pre>
680
+ <div class="pcard-copy">📋 copiar</div>
681
+ </div>
682
+
683
+ <div class="pcard" data-cat="cenarios" data-tags="praia beach tropical sunset pôr do sol">
684
+ <div class="pcard-label">Praia Tropical</div>
685
+ <pre>a tropical doodle beach at sunset,
686
+ orange and pink sky reflecting on calm water,
687
+ two palm trees with coconuts,
688
+ colorful beach umbrella and lounge chair,
689
+ wide establishing shot, no people</pre>
690
+ <div class="pcard-copy">📋 copiar</div>
691
+ </div>
692
+
693
+ <div class="pcard" data-cat="cenarios" data-tags="parque park jardim garden flores flowers">
694
+ <div class="pcard-label">Parque com Flores</div>
695
+ <pre>a cheerful doodle park scene,
696
+ green hills with colorful flowers,
697
+ a winding path with lampposts,
698
+ rainbow in the sky, fluffy white clouds,
699
+ wide establishing shot, daytime, no people</pre>
700
+ <div class="pcard-copy">📋 copiar</div>
701
+ </div>
702
+
703
+ <div class="pcard" data-cat="cenarios" data-tags="cozinha kitchen interior colorida">
704
+ <div class="pcard-label">Cozinha Colorida</div>
705
+ <pre>a vibrant doodle kitchen interior,
706
+ mint green cabinets with yellow countertop,
707
+ hanging pots and pans, bowl of fruit,
708
+ window with curtains, potted herbs on windowsill,
709
+ wide establishing shot, warm soft lighting, no people</pre>
710
+ <div class="pcard-copy">📋 copiar</div>
711
+ </div>
712
+
713
+ <div class="pcard" data-cat="cenarios" data-tags="biblioteca library livros books reading leitura">
714
+ <div class="pcard-label">Biblioteca / Livraria</div>
715
+ <pre>a cozy doodle library scene,
716
+ tall bookshelves filled with colorful books,
717
+ a reading nook with a comfortable armchair and lamp,
718
+ warm wood tones with pastel blue and pink accents,
719
+ wide establishing shot, no people</pre>
720
+ <div class="pcard-copy">📋 copiar</div>
721
+ </div>
722
+
723
+ <div class="pcard" data-cat="cenarios" data-tags="academia gym fitness musculação treino">
724
+ <div class="pcard-label">Academia / Gym</div>
725
+ <pre>a doodle gym interior scene,
726
+ colorful weight racks and fitness equipment,
727
+ motivational posters on bright orange walls,
728
+ floor mirrors, treadmills in background,
729
+ wide establishing shot, energetic vibe, no people</pre>
730
+ <div class="pcard-copy">📋 copiar</div>
731
+ </div>
732
+
733
+ </div>
734
+ <div class="pbottom"></div>
735
+ </div>
736
+ </div>
737
+
738
+ <!-- ═══════════════════════════════════════
739
+ SECTION 5 — PRODUCT SHOTS
740
+ ═══════════════════════════════════════ -->
741
+ <div class="section s5" id="s-pro" data-cat="produtos">
742
+ <div class="sh" onclick="toggle(this)">
743
+ <div class="snum">5</div>
744
+ <div class="stitle">📦 Product Shots</div>
745
+ <div class="sbadge">LOCKED</div>
746
+ <div class="cnt" id="cnt-pro"></div>
747
+ <div class="stoggle">▼</div>
748
+ </div>
749
+ <div class="sbody">
750
+ <div class="sbody info" style="margin:.75rem 1rem 0;"><strong>Dica:</strong> Use Modo <strong>Objetos</strong> + Efeito X <strong>OFF</strong> para product shots limpos.</div>
751
+ <div class="pgrid cols2">
752
+
753
+ <div class="pcard" data-cat="produtos" data-tags="garrafinha garrafa água água bottle beber">
754
+ <div class="pcard-label">Garrafa / Caneca</div>
755
+ <pre>a colorful pastel doodle water bottle with stickers,
756
+ floating on mint green background,
757
+ product shot, centered, soft shadow below, no people</pre>
758
+ <div class="pcard-copy">📋 copiar</div>
759
+ </div>
760
+
761
+ <div class="pcard" data-cat="produtos" data-tags="tênis sneaker sapato shoe moda">
762
+ <div class="pcard-label">Tênis / Sneaker</div>
763
+ <pre>a chunky doodle sneaker in pastel pink and white,
764
+ bold outline, floating on lemon yellow background,
765
+ product shot, slight 3/4 angle, soft drop shadow, no people</pre>
766
+ <div class="pcard-copy">📋 copiar</div>
767
+ </div>
768
+
769
+ <div class="pcard" data-cat="produtos" data-tags="bolsa bag mochila backpack acessório">
770
+ <div class="pcard-label">Mochila / Bolsa</div>
771
+ <pre>a cute doodle mini backpack in pastel lavender with embroidered patches,
772
+ floating on clear skies blue background,
773
+ product shot, front view, soft shadow, no people</pre>
774
+ <div class="pcard-copy">📋 copiar</div>
775
+ </div>
776
+
777
+ <div class="pcard" data-cat="produtos" data-tags="perfume frasco beauty cosméticos">
778
+ <div class="pcard-label">Perfume / Cosmético</div>
779
+ <pre>a elegant doodle perfume bottle with pastel pink liquid,
780
+ gold cap and delicate floral label,
781
+ floating on soft peach background,
782
+ product shot, slight rotation, sparkling detail, no people</pre>
783
+ <div class="pcard-copy">📋 copiar</div>
784
+ </div>
785
+
786
+ <div class="pcard" data-cat="produtos" data-tags="pizza food comida lanche delivery">
787
+ <div class="pcard-label">Pizza / Comida</div>
788
+ <pre>a doodle pizza slice with colorful toppings,
789
+ melting cheese strings, steam rising,
790
+ floating on orange sorbet background,
791
+ product shot, top-down view with slight angle, no people</pre>
792
+ <div class="pcard-copy">📋 copiar</div>
793
+ </div>
794
+
795
+ <div class="pcard" data-cat="produtos" data-tags="sorvete ice cream sobremesa doce">
796
+ <div class="pcard-label">Sorvete / Sobremesa</div>
797
+ <pre>a doodle ice cream cone with 3 colorful scoops,
798
+ pastel pink, mint green and lavender,
799
+ sprinkles falling, happy face on cone,
800
+ floating on lemon yellow background,
801
+ product shot, centered, no people</pre>
802
+ <div class="pcard-copy">📋 copiar</div>
803
+ </div>
804
+
805
+ <div class="pcard" data-cat="produtos" data-tags="fone headphone fone bluetooth música tech">
806
+ <div class="pcard-label">Fone / Tech</div>
807
+ <pre>a cute doodle over-ear headphones in mint green and white,
808
+ pastel cord coiled below, subtle shine on cups,
809
+ floating on grape jelly purple background,
810
+ product shot, 3/4 angle, soft shadow, no people</pre>
811
+ <div class="pcard-copy">📋 copiar</div>
812
+ </div>
813
+
814
+ <div class="pcard" data-cat="produtos" data-tags="planta vaso plantas flowers flower decoração">
815
+ <div class="pcard-label">Planta / Vaso</div>
816
+ <pre>a cute doodle potted succulent in a pastel pink ceramic pot,
817
+ with small colorful pebbles on top,
818
+ floating on clear skies blue background,
819
+ product shot, centered, soft shadow, no people</pre>
820
+ <div class="pcard-copy">📋 copiar</div>
821
+ </div>
822
+
823
+ <div class="pcard" data-cat="produtos" data-tags="livro book notebook caderno escola">
824
+ <div class="pcard-label">Livro / Notebook</div>
825
+ <pre>a doodle hardcover book with colorful illustrated cover,
826
+ golden bookmark sticking out, small star stickers,
827
+ floating on peach pastel background,
828
+ product shot, slight 3/4 angle, no people</pre>
829
+ <div class="pcard-copy">📋 copiar</div>
830
+ </div>
831
+
832
+ <div class="pcard" data-cat="produtos" data-tags="personagem segurando produto holding brand">
833
+ <div class="pcard-label">Personagem Segurando Produto</div>
834
+ <pre>a slim doodle woman with pastel pink hair,
835
+ wearing a mint green hoodie and white wide-leg pants,
836
+ holding [PRODUTO] with both hands at chest level, smiling at camera,
837
+ medium shot, lemon yellow background</pre>
838
+ <div class="pcard-copy">📋 copiar</div>
839
+ </div>
840
+
841
+ </div>
842
+ <div class="pbottom"></div>
843
+ </div>
844
+ </div>
845
+
846
+ <!-- ═══════════════════════════════════════
847
+ SECTION 6 — MEME / GC / PLACA
848
+ ═══════════════════════════════════════ -->
849
+ <div class="section s6" id="s-meme" data-cat="meme">
850
+ <div class="sh" onclick="toggle(this)">
851
+ <div class="snum">6</div>
852
+ <div class="stitle">🎭 Meme / GC / Placa</div>
853
+ <div class="sbadge">LOCKED</div>
854
+ <div class="cnt" id="cnt-meme"></div>
855
+ <div class="stoggle">▼</div>
856
+ </div>
857
+ <div class="sbody">
858
+ <div class="sbody warn" style="margin:.75rem 1rem 0;"><strong>Regra GC/Placa:</strong> Sem branco na roupa ou fundo. Fundo escuro + roupa colorida escura.</div>
859
+ <div class="pgrid cols2">
860
+
861
+ <div class="pcard" data-cat="meme" data-tags="placa sign homem segurando branco">
862
+ <div class="pcard-label">Placa em Branco — Homem</div>
863
+ <pre>a slim doodle man with blue hair,
864
+ wearing a dark teal hoodie and black pants,
865
+ holding a blank white sign with both hands at chest level,
866
+ direct front view, colorful pastel background</pre>
867
+ <div class="pcard-copy">📋 copiar</div>
868
+ </div>
869
+
870
+ <div class="pcard" data-cat="meme" data-tags="placa sign mulher segurando branco">
871
+ <div class="pcard-label">Placa em Branco — Mulher</div>
872
+ <pre>a slim doodle woman with pink curly hair,
873
+ wearing a dark navy crop jacket and black wide-leg pants,
874
+ holding a blank white sign with both hands, direct front view,
875
+ mint green background</pre>
876
+ <div class="pcard-copy">📋 copiar</div>
877
+ </div>
878
+
879
+ <div class="pcard" data-cat="meme" data-tags="gc tarja telejornal breaking news notícia">
880
+ <div class="pcard-label">GC / Tarja Telejornal</div>
881
+ <pre>a slim doodle man with dark short hair,
882
+ wearing a dark teal blazer over a black shirt,
883
+ serious expression looking at camera, dark slate background,
884
+ white horizontal banner bar at the bottom of the image, no white in scene</pre>
885
+ <div class="pcard-copy">📋 copiar</div>
886
+ </div>
887
+
888
+ <div class="pcard" data-cat="meme" data-tags="gc tarja mulher notícia breaking news">
889
+ <div class="pcard-label">GC / Tarja — Mulher</div>
890
+ <pre>a slim doodle woman with dark brown hair,
891
+ wearing a dark purple blazer over a dark blue shirt,
892
+ raised eyebrow expression at camera, dark charcoal background,
893
+ white horizontal banner bar at the bottom of the image, no white in scene</pre>
894
+ <div class="pcard-copy">📋 copiar</div>
895
+ </div>
896
+
897
+ <div class="pcard" data-cat="meme" data-tags="surpresa choque shocked shock meme react">
898
+ <div class="pcard-label">Reação Surpresa</div>
899
+ <pre>a chubby doodle man with messy orange hair,
900
+ wearing a dark navy t-shirt,
901
+ hands on cheeks, jaw dropped, wide eyes shocked expression,
902
+ close-up portrait, vivid lemon yellow background</pre>
903
+ <div class="pcard-copy">📋 copiar</div>
904
+ </div>
905
+
906
+ <div class="pcard" data-cat="meme" data-tags="apontando pointing meme sticker reação">
907
+ <div class="pcard-label">Apontando / Indicando</div>
908
+ <pre>a slim doodle woman with short mint green hair,
909
+ wearing a dark teal jacket and black pants,
910
+ pointing at camera with both hands and a big grin,
911
+ medium shot, grape jelly purple background</pre>
912
+ <div class="pcard-copy">📋 copiar</div>
913
+ </div>
914
+
915
+ <div class="pcard" data-cat="meme" data-tags="placa animal coelho segurando sign">
916
+ <div class="pcard-label">Placa — Animal</div>
917
+ <pre>a chubby anthropomorphic bunny doodle with white fur,
918
+ wearing a mint green hoodie and dark navy pants,
919
+ holding a blank white sign with both hands at chest level,
920
+ direct front view, orange sorbet background</pre>
921
+ <div class="pcard-copy">📋 copiar</div>
922
+ </div>
923
+
924
+ <div class="pcard" data-cat="meme" data-tags="pensando thinking hmm dúvida meme reação">
925
+ <div class="pcard-label">Pensando / Duvidando</div>
926
+ <pre>a slim doodle man with dark hair,
927
+ wearing a dark navy hoodie and black pants,
928
+ hand on chin in thinking pose, one eyebrow raised skeptically,
929
+ medium shot, clear skies blue background</pre>
930
+ <div class="pcard-copy">📋 copiar</div>
931
+ </div>
932
+
933
+ </div>
934
+ <div class="pbottom"></div>
935
+ </div>
936
+ </div>
937
+
938
+ <!-- ═══════════════════════════════════════
939
+ SECTION 7 — LETTERING
940
+ ═══════════════════════════════════════ -->
941
+ <div class="section s7" id="s-let" data-cat="lettering">
942
+ <div class="sh" onclick="toggle(this)">
943
+ <div class="snum">7</div>
944
+ <div class="stitle">✏️ Lettering & Texto</div>
945
+ <div class="sbadge">LOCKED</div>
946
+ <div class="cnt" id="cnt-let"></div>
947
+ <div class="stoggle">▼</div>
948
+ </div>
949
+ <div class="sbody">
950
+ <div class="sbody warn" style="margin:.75rem 1rem 0;"><strong>Regra:</strong> Palavras curtas (1–2), sem acentos, CAPS. Negative: <code>blurry text, deformed letters, misspelled</code></div>
951
+ <div class="pgrid cols2">
952
+
953
+ <div class="pcard" data-cat="lettering" data-tags="good vibes lettering texto positivo">
954
+ <div class="pcard-label">Good Vibes</div>
955
+ <pre>bold bubble lettering that says GOOD VIBES,
956
+ pastel rainbow colors, outlined in black,
957
+ surrounded by small stars and heart shapes,
958
+ isolated on dark navy background</pre>
959
+ <div class="pcard-copy">📋 copiar</div>
960
+ </div>
961
+
962
+ <div class="pcard" data-cat="lettering" data-tags="love lettering coração amor">
963
+ <div class="pcard-label">LOVE — Neon</div>
964
+ <pre>retro neon sign lettering that says LOVE,
965
+ glowing pink neon tubes with soft bloom effect,
966
+ dark night background with subtle stars,
967
+ product shot centered</pre>
968
+ <div class="pcard-copy">📋 copiar</div>
969
+ </div>
970
+
971
+ <div class="pcard" data-cat="lettering" data-tags="wow lettering exclamação surpresa">
972
+ <div class="pcard-label">WOW — Comic</div>
973
+ <pre>comic book style bold lettering that says WOW,
974
+ bright yellow with red outline and white shine,
975
+ starburst background in orange and yellow,
976
+ isolated, product shot</pre>
977
+ <div class="pcard-copy">📋 copiar</div>
978
+ </div>
979
+
980
+ <div class="pcard" data-cat="lettering" data-tags="graffiti lettering urbano spray wall">
981
+ <div class="pcard-label">Graffiti Style</div>
982
+ <pre>colorful graffiti style lettering,
983
+ bubble letters with bright pink mint and yellow,
984
+ black outlines, drip effect,
985
+ isolated on clean white background</pre>
986
+ <div class="pcard-copy">📋 copiar</div>
987
+ </div>
988
+
989
+ <div class="pcard" data-cat="lettering" data-tags="cute kawaii cute lettering fofinho">
990
+ <div class="pcard-label">Kawaii / Cute</div>
991
+ <pre>cute kawaii rounded lettering that says CUTE,
992
+ pastel pink and lavender colors with tiny hearts and stars around,
993
+ soft glow effect, bold black outline,
994
+ isolated on soft peach background</pre>
995
+ <div class="pcard-copy">📋 copiar</div>
996
+ </div>
997
+
998
+ <div class="pcard" data-cat="lettering" data-tags="fire hot lettering chama fogo energia">
999
+ <div class="pcard-label">Fire / Energy</div>
1000
+ <pre>dynamic fire-style lettering that says FIRE,
1001
+ orange yellow and red gradient with flame tips,
1002
+ black outline with smoke wisps,
1003
+ isolated on dark teal background</pre>
1004
+ <div class="pcard-copy">📋 copiar</div>
1005
+ </div>
1006
+
1007
+ </div>
1008
+ <div class="pbottom"></div>
1009
+ </div>
1010
+ </div>
1011
+
1012
+ <!-- ═══════════════════════════════════════
1013
+ SECTION 8 — PIXEL ART
1014
+ ═══════════════════════════════════════ -->
1015
+ <div class="section s8" id="s-pix" data-cat="pixel">
1016
+ <div class="sh" onclick="toggle(this)">
1017
+ <div class="snum">8</div>
1018
+ <div class="stitle">🎮 Pixel ART</div>
1019
+ <div class="sbadge">LOCKED</div>
1020
+ <div class="cnt" id="cnt-pix"></div>
1021
+ <div class="stoggle">▼</div>
1022
+ </div>
1023
+ <div class="sbody">
1024
+ <div class="pgrid cols2">
1025
+
1026
+ <div class="pcard" data-cat="pixel" data-tags="pixel city cidade cityscape noite night retrô">
1027
+ <div class="pcard-label">Cidade Retrô à Noite</div>
1028
+ <pre>retro pixel art city skyline at night,
1029
+ orange and purple pixelated sky,
1030
+ tall buildings with lit windows in pastel colors,
1031
+ moon and pixel stars above,
1032
+ wide establishing shot, no people</pre>
1033
+ <div class="pcard-copy">📋 copiar</div>
1034
+ </div>
1035
+
1036
+ <div class="pcard" data-cat="pixel" data-tags="pixel personagem herói hero adventure">
1037
+ <div class="pcard-label">Herói Pixel</div>
1038
+ <pre>a slim pixel art doodle hero character,
1039
+ wearing mint green armor with yellow highlights,
1040
+ sword raised, determined expression,
1041
+ full body shot, blue pixelated dungeon background</pre>
1042
+ <div class="pcard-copy">📋 copiar</div>
1043
+ </div>
1044
+
1045
+ <div class="pcard" data-cat="pixel" data-tags="pixel praia beach sunset pôr do sol">
1046
+ <div class="pcard-label">Pôr do Sol Pixel</div>
1047
+ <pre>retro pixel art tropical beach at sunset,
1048
+ orange and pink pixelated sky with large sun,
1049
+ palm tree silhouettes, pastel ocean waves,
1050
+ wide shot, 16-bit retro game style, no people</pre>
1051
+ <div class="pcard-copy">📋 copiar</div>
1052
+ </div>
1053
+
1054
+ <div class="pcard" data-cat="pixel" data-tags="pixel espaço space cosmos planetas">
1055
+ <div class="pcard-label">Espaço Pixel</div>
1056
+ <pre>retro 8-bit pixel art space scene,
1057
+ dark starfield with colorful pixel planets,
1058
+ asteroid belt and distant galaxies,
1059
+ vibrant pastel color scheme in pixel blocks,
1060
+ wide shot, no people</pre>
1061
+ <div class="pcard-copy">📋 copiar</div>
1062
+ </div>
1063
+
1064
+ <div class="pcard" data-cat="pixel" data-tags="pixel personagem gamer playing videogame">
1065
+ <div class="pcard-label">Gamer Pixel</div>
1066
+ <pre>a chubby pixel art doodle gamer,
1067
+ sitting cross-legged with oversized controller,
1068
+ surrounded by floating pixel power-ups and hearts,
1069
+ full body shot, dark purple arcade background</pre>
1070
+ <div class="pcard-copy">📋 copiar</div>
1071
+ </div>
1072
+
1073
+ <div class="pcard" data-cat="pixel" data-tags="pixel dungeon masmorras fantasma ghost">
1074
+ <div class="pcard-label">Masmorra / Dungeon</div>
1075
+ <pre>retro pixel art dungeon scene,
1076
+ stone brick walls with torch flames,
1077
+ treasure chest and pixel gold coins,
1078
+ mysterious dark atmosphere with pastel color accents,
1079
+ wide shot, no people</pre>
1080
+ <div class="pcard-copy">📋 copiar</div>
1081
+ </div>
1082
+
1083
+ </div>
1084
+ <div class="pbottom"></div>
1085
+ </div>
1086
+ </div>
1087
+
1088
+ <!-- ═══════════════════════════════════════
1089
+ SECTION 9 — DARK MODE
1090
+ ═══════════════════════════════════════ -->
1091
+ <div class="section s9" id="s-dark" data-cat="dark">
1092
+ <div class="sh" onclick="toggle(this)">
1093
+ <div class="snum">9</div>
1094
+ <div class="stitle">🌌 Dark Mode</div>
1095
+ <div class="sbadge">LOCKED</div>
1096
+ <div class="cnt" id="cnt-dark"></div>
1097
+ <div class="stoggle">▼</div>
1098
+ </div>
1099
+ <div class="sbody">
1100
+ <div class="pgrid cols2">
1101
+
1102
+ <div class="pcard" data-cat="dark" data-tags="dark noite night neon personagem mulher">
1103
+ <div class="pcard-label">Dark Lady — Neon</div>
1104
+ <pre>a slim doodle woman with long silver white hair,
1105
+ wearing a dark purple holographic jacket and black wide-leg pants,
1106
+ neon pink and blue lighting on face, mysterious expression,
1107
+ medium shot, dark charcoal background with neon bloom</pre>
1108
+ <div class="pcard-copy">📋 copiar</div>
1109
+ </div>
1110
+
1111
+ <div class="pcard" data-cat="dark" data-tags="dark espaço space astronauta astronaut cosmos">
1112
+ <div class="pcard-label">Astronauta Dark</div>
1113
+ <pre>a slim doodle astronaut in dark navy space suit,
1114
+ floating in deep space among colorful stars and nebulas,
1115
+ visor reflecting neon pink galaxy,
1116
+ full body shot, deep space dark background</pre>
1117
+ <div class="pcard-copy">📋 copiar</div>
1118
+ </div>
1119
+
1120
+ <div class="pcard" data-cat="dark" data-tags="dark cidade city neon noite night rain chuva">
1121
+ <div class="pcard-label">Cidade Neon Chuva</div>
1122
+ <pre>dark neon-lit doodle city street at night,
1123
+ rain puddles reflecting neon signs,
1124
+ purple and pink glowing storefronts,
1125
+ atmospheric fog, wet pavement,
1126
+ wide establishing shot, no people</pre>
1127
+ <div class="pcard-copy">📋 copiar</div>
1128
+ </div>
1129
+
1130
+ <div class="pcard" data-cat="dark" data-tags="dark lobo wolf floresta lua noite moon">
1131
+ <div class="pcard-label">Lobo & Lua Cheia</div>
1132
+ <pre>a slim anthropomorphic wolf doodle with dark grey fur,
1133
+ wearing a dark teal long coat,
1134
+ howling at a large full moon, dramatic pose,
1135
+ full body shot, deep indigo night sky with clouds</pre>
1136
+ <div class="pcard-copy">📋 copiar</div>
1137
+ </div>
1138
+
1139
+ <div class="pcard" data-cat="dark" data-tags="dark witch bruxa halloween magia magic">
1140
+ <div class="pcard-label">Bruxa Mágica</div>
1141
+ <pre>a slim doodle witch with long dark purple hair,
1142
+ wearing a dark navy pointed hat and dark teal cape,
1143
+ casting a glowing purple spell with both hands,
1144
+ full body shot, dark misty moonlit forest background</pre>
1145
+ <div class="pcard-copy">📋 copiar</div>
1146
+ </div>
1147
+
1148
+ <div class="pcard" data-cat="dark" data-tags="dark robô robot cyborg futurismo tech">
1149
+ <div class="pcard-label">Robô Futurista</div>
1150
+ <pre>a slim doodle robot character with sleek dark navy body,
1151
+ glowing mint green eyes and chest panel,
1152
+ neon circuit patterns on arms and legs,
1153
+ full body shot, dark sci-fi background with grid lines</pre>
1154
+ <div class="pcard-copy">📋 copiar</div>
1155
+ </div>
1156
+
1157
+ </div>
1158
+ <div class="pbottom"></div>
1159
+ </div>
1160
+ </div>
1161
+
1162
+ <!-- ═══════════════════════════════════════
1163
+ SECTION 10 — STICKERS & PACK
1164
+ ═══════════════════════════════════════ -->
1165
+ <div class="section s10" id="s-stk" data-cat="sticker">
1166
+ <div class="sh" onclick="toggle(this)">
1167
+ <div class="snum">10</div>
1168
+ <div class="stitle">🖼️ Stickers & Pack</div>
1169
+ <div class="sbadge">LOCKED</div>
1170
+ <div class="cnt" id="cnt-stk"></div>
1171
+ <div class="stoggle">▼</div>
1172
+ </div>
1173
+ <div class="sbody">
1174
+ <div class="sbody tip" style="margin:.75rem 1rem 0;"><strong>Estilo Sticker Pack</strong> + Efeito X OFF + fundo <code>clean white background</code>.</div>
1175
+ <div class="pgrid cols2">
1176
+
1177
+ <div class="pcard" data-cat="sticker" data-tags="sticker star estrela foguete rocket space">
1178
+ <div class="pcard-label">Foguete Sticker</div>
1179
+ <pre>a cute doodle rocket sticker,
1180
+ pastel yellow body with pink fins and mint green porthole,
1181
+ small stars around it, happy face on the rocket,
1182
+ clean white background, sticker style, thick black outline</pre>
1183
+ <div class="pcard-copy">📋 copiar</div>
1184
+ </div>
1185
+
1186
+ <div class="pcard" data-cat="sticker" data-tags="sticker coração heart amor love emoji">
1187
+ <div class="pcard-label">Coração Sparkle</div>
1188
+ <pre>a cute doodle heart sticker,
1189
+ pink gradient with sparkle shine details,
1190
+ small stars and lightning bolts around it,
1191
+ clean white background, sticker pack style, bold outline</pre>
1192
+ <div class="pcard-copy">📋 copiar</div>
1193
+ </div>
1194
+
1195
+ <div class="pcard" data-cat="sticker" data-tags="sticker pizza comida food emoji">
1196
+ <div class="pcard-label">Pizza Sticker</div>
1197
+ <pre>a kawaii doodle pizza sticker with a cute face,
1198
+ colorful toppings on each slice, melting cheese,
1199
+ small steam lines rising,
1200
+ clean white background, sticker style, thick outline</pre>
1201
+ <div class="pcard-copy">📋 copiar</div>
1202
+ </div>
1203
+
1204
+ <div class="pcard" data-cat="sticker" data-tags="sticker gato cat emoji cute kawaii">
1205
+ <div class="pcard-label">Gato Kawaii</div>
1206
+ <pre>a cute doodle cat sticker with round body,
1207
+ orange tabby with big sparkly eyes,
1208
+ tiny paws raised in a wave gesture,
1209
+ clean white background, sticker pack style, bold black outline</pre>
1210
+ <div class="pcard-copy">📋 copiar</div>
1211
+ </div>
1212
+
1213
+ <div class="pcard" data-cat="sticker" data-tags="sticker arco-iris rainbow nuvem cloud sun">
1214
+ <div class="pcard-label">Arco-Íris & Nuvem</div>
1215
+ <pre>a cute doodle rainbow emerging from a smiling cloud,
1216
+ pastel rainbow colors, small stars at the ends,
1217
+ clean white background, sticker style, thick black outline</pre>
1218
+ <div class="pcard-copy">📋 copiar</div>
1219
+ </div>
1220
+
1221
+ <div class="pcard" data-cat="sticker" data-tags="sticker planta cactus cato succulent verde">
1222
+ <div class="pcard-label">Cacto Sorridente</div>
1223
+ <pre>a cute doodle cactus sticker with a happy face,
1224
+ green body with pastel pink flower on top,
1225
+ small heart shapes around it,
1226
+ clean white background, sticker pack style, bold outline</pre>
1227
+ <div class="pcard-copy">📋 copiar</div>
1228
+ </div>
1229
+
1230
+ <div class="pcard" data-cat="sticker" data-tags="sticker troféu trophy winner campeão">
1231
+ <div class="pcard-label">Troféu Campeão</div>
1232
+ <pre>a cute doodle trophy sticker,
1233
+ gold body with pastel yellow glow and star on front,
1234
+ small confetti pieces exploding around it,
1235
+ clean white background, sticker style, thick outline</pre>
1236
+ <div class="pcard-copy">📋 copiar</div>
1237
+ </div>
1238
+
1239
+ <div class="pcard" data-cat="sticker" data-tags="sticker headphone music fone música">
1240
+ <div class="pcard-label">Fone de Ouvido</div>
1241
+ <pre>a cute doodle headphones sticker,
1242
+ mint green and white over-ear style,
1243
+ small music notes floating around,
1244
+ clean white background, sticker pack style, bold black outline</pre>
1245
+ <div class="pcard-copy">📋 copiar</div>
1246
+ </div>
1247
+
1248
+ </div>
1249
+ <div class="pbottom"></div>
1250
+ </div>
1251
+ </div>
1252
+
1253
+ <!-- ═══════════════════════════════════════
1254
+ SECTION 11 — BASES DE PERSONAGEM
1255
+ ═══════════════════════════════════════ -->
1256
+ <div class="section s11" id="s-base" data-cat="personagens">
1257
+ <div class="sh" onclick="toggle(this)">
1258
+ <div class="snum">11</div>
1259
+ <div class="stitle">🪪 Bases de Personagem Prontas</div>
1260
+ <div class="sbadge">LOCKED</div>
1261
+ <div class="cnt" id="cnt-base"></div>
1262
+ <div class="stoggle">▼</div>
1263
+ </div>
1264
+ <div class="sbody">
1265
+ <div class="sbody info" style="margin:.75rem 1rem 0;">Cole no campo <strong>Base do Personagem</strong> e mantenha fixo. Varie apenas a <strong>Sua Cena</strong>.</div>
1266
+ <div class="pgrid">
1267
+
1268
+ <div class="pcard" data-cat="personagens" data-tags="hap mello chibi official base personagem">
1269
+ <div class="pcard-label">HAP + MELLO (oficial)</div>
1270
+ <pre>HAP chibi boy short lavender hair blue turtleneck sweater pink wide-leg pants blue sneakers,
1271
+ and MELLO small white fluffy cat big round eyes long curly tail</pre>
1272
+ <div class="pcard-copy">📋 copiar</div>
1273
+ </div>
1274
+
1275
+ <div class="pcard" data-cat="personagens" data-tags="captain stoke skeleton caveira pirata base">
1276
+ <div class="pcard-label">Captain Stoke (oficial)</div>
1277
+ <pre>Captain Stoke cute chibi skeleton purple eye sockets white captain hat blue band
1278
+ yellow button blue round shoes yellow accent bones on ribcage and one leg</pre>
1279
+ <div class="pcard-copy">📋 copiar</div>
1280
+ </div>
1281
+
1282
+ <div class="pcard" data-cat="personagens" data-tags="hue alien extraterrestre verde base personagem">
1283
+ <div class="pcard-label">Hue — Alien (oficial)</div>
1284
+ <pre>Hue chibi alien large round mint green head two small round antennae big black oval eyes
1285
+ mint green skin white turtleneck blue diamond on chest dark gray wide-leg pants
1286
+ white sneakers purple wristwatch left wrist</pre>
1287
+ <div class="pcard-copy">📋 copiar</div>
1288
+ </div>
1289
+
1290
+ <div class="pcard" data-cat="personagens" data-tags="personagem feminino base customizável">
1291
+ <div class="pcard-label">Base Feminina (customizável)</div>
1292
+ <pre>a slim doodle woman with [COR] [ESTILO] hair,
1293
+ wearing a [COR] [PEÇA] and [COR] [PEÇA],
1294
+ [ACESSÓRIO opcional]</pre>
1295
+ <div class="pcard-copy">📋 copiar</div>
1296
+ </div>
1297
+
1298
+ <div class="pcard" data-cat="personagens" data-tags="personagem masculino base customizável">
1299
+ <div class="pcard-label">Base Masculina (customizável)</div>
1300
+ <pre>a slim doodle man with [COR] [ESTILO] hair,
1301
+ wearing a [COR] [PEÇA] and [COR] wide-leg pants,
1302
+ [ACESSÓRIO opcional]</pre>
1303
+ <div class="pcard-copy">📋 copiar</div>
1304
+ </div>
1305
+
1306
+ <div class="pcard" data-cat="personagens" data-tags="chibi gordo chubby base fofinho kawaii">
1307
+ <div class="pcard-label">Chibi Fofinho (base)</div>
1308
+ <pre>a very chubby round-bodied chibi doodle character,
1309
+ big round head large expressive eyes,
1310
+ [COR] hair, wearing [ROUPA COLORIDA]</pre>
1311
+ <div class="pcard-copy">📋 copiar</div>
1312
+ </div>
1313
+
1314
+ </div>
1315
+ <div class="pbottom"></div>
1316
+ </div>
1317
+ </div>
1318
+
1319
+ <!-- ═══════════════════════════════════════
1320
+ SECTION 12 — PROMPT NEGATIVO
1321
+ ═══════════════════════════════════════ -->
1322
+ <div class="section s12" id="s-neg" data-cat="personagens">
1323
+ <div class="sh" onclick="toggle(this)">
1324
+ <div class="snum">12</div>
1325
+ <div class="stitle">🚫 Prompts Negativos Prontos</div>
1326
+ <div class="sbadge">LOCKED</div>
1327
+ <div class="cnt" id="cnt-neg"></div>
1328
+ <div class="stoggle">▼</div>
1329
+ </div>
1330
+ <div class="sbody">
1331
+ <div class="pgrid">
1332
+
1333
+ <div class="pcard" data-cat="personagens" data-tags="negativo geral padrão default">
1334
+ <div class="pcard-label">Negativo Padrão Universal</div>
1335
+ <pre>ugly, deformed, blurry, low quality, watermark, text, signature,
1336
+ extra limbs, missing limbs, bad anatomy, bad proportions,
1337
+ realistic, photorealistic, 3d render, hyper-detailed</pre>
1338
+ <div class="pcard-copy">📋 copiar</div>
1339
+ </div>
1340
+
1341
+ <div class="pcard" data-cat="personagens" data-tags="negativo personagem corpo mãos">
1342
+ <div class="pcard-label">Negativo — Personagens</div>
1343
+ <pre>ugly face, crossed eyes, bad hands, extra fingers, missing fingers,
1344
+ deformed body, flat design, simple shapes only,
1345
+ realistic skin, photorealistic</pre>
1346
+ <div class="pcard-copy">📋 copiar</div>
1347
+ </div>
1348
+
1349
+ <div class="pcard" data-cat="produtos" data-tags="negativo produto product shot limpo">
1350
+ <div class="pcard-label">Negativo — Product Shot</div>
1351
+ <pre>people, characters, busy background, noise, grain, blur, artifacts,
1352
+ text overlay, watermark, extra objects</pre>
1353
+ <div class="pcard-copy">📋 copiar</div>
1354
+ </div>
1355
+
1356
+ <div class="pcard" data-cat="meme" data-tags="negativo gc placa tarja banner">
1357
+ <div class="pcard-label">Negativo — GC / Placa</div>
1358
+ <pre>white clothing, white background, bright elements, high-key lighting,
1359
+ extra text, blurry text, deformed letters, multiple banners</pre>
1360
+ <div class="pcard-copy">📋 copiar</div>
1361
+ </div>
1362
+
1363
+ <div class="pcard" data-cat="lettering" data-tags="negativo lettering texto tipografia">
1364
+ <div class="pcard-label">Negativo — Lettering</div>
1365
+ <pre>blurry text, deformed letters, misspelled, extra characters,
1366
+ unclear text, distorted font, illegible writing</pre>
1367
+ <div class="pcard-copy">📋 copiar</div>
1368
+ </div>
1369
+
1370
+ <div class="pcard" data-cat="sticker" data-tags="negativo sticker figurinha fundo">
1371
+ <div class="pcard-label">Negativo — Sticker</div>
1372
+ <pre>colored background, grey background, shadow on background,
1373
+ busy background, extra characters, ugly outline, blurry edges</pre>
1374
+ <div class="pcard-copy">📋 copiar</div>
1375
+ </div>
1376
+
1377
+ </div>
1378
+ <div class="pbottom"></div>
1379
+ </div>
1380
+ </div>
1381
+
1382
+ <!-- EMPTY STATE -->
1383
+ <div class="empty" id="emptyState" style="display:none">
1384
+ <span class="emoji">🔍</span>
1385
+ Nenhum prompt encontrado.<br>Tente outros termos!
1386
+ </div>
1387
+
1388
+ </div><!-- /wrap -->
1389
+
1390
+ <div class="rb"></div>
1391
+ <footer style="text-align:center;padding:1.2rem 1rem;font-size:.78rem;font-weight:700;color:rgba(26,16,20,.4);position:relative;z-index:1;">
1392
+ DOODLES AI Prompt Library · Autor: <strong>Silas G.</strong> · 2025/2026
1393
+ </footer>
1394
+
1395
+ <div id="scrolltop" onclick="scrollToTop()">↑</div>
1396
+
1397
+ <script>
1398
+ // ══════════════════════════════
1399
+ // STATE
1400
+ // ══════════════════════════════
1401
+ let xp = 0, copied = 0;
1402
+ const COLORS = ['#FFB3E6','#FFE780','#FFC897','#B3FFC7','#A1E9FF','#C5C5FF'];
1403
+
1404
+ // ══════════════════════════════
1405
+ // INIT — count cards
1406
+ // ══════════════════════════════
1407
+ function initCounts() {
1408
+ const sections = [
1409
+ {id:'cnt-pf', sec:'s-pf'}, {id:'cnt-pm', sec:'s-pm'},
1410
+ {id:'cnt-ani', sec:'s-ani'}, {id:'cnt-cen', sec:'s-cen'},
1411
+ {id:'cnt-pro', sec:'s-pro'}, {id:'cnt-meme', sec:'s-meme'},
1412
+ {id:'cnt-let', sec:'s-let'}, {id:'cnt-pix', sec:'s-pix'},
1413
+ {id:'cnt-dark', sec:'s-dark'}, {id:'cnt-stk', sec:'s-stk'},
1414
+ {id:'cnt-base', sec:'s-base'}, {id:'cnt-neg', sec:'s-neg'},
1415
+ ];
1416
+ let total = 0;
1417
+ sections.forEach(({id, sec}) => {
1418
+ const s = document.getElementById(sec);
1419
+ if (!s) return;
1420
+ const n = s.querySelectorAll('.pcard').length;
1421
+ const el = document.getElementById(id);
1422
+ if (el) el.textContent = n + ' prompts';
1423
+ total += n;
1424
+ });
1425
+ document.getElementById('totalCount').textContent = total;
1426
+ }
1427
+
1428
+ // ══════════════════════════════
1429
+ // COPY ON CARD CLICK
1430
+ // ══════════════════════════════
1431
+ document.addEventListener('click', e => {
1432
+ const card = e.target.closest('.pcard');
1433
+ if (!card) return;
1434
+ const pre = card.querySelector('pre');
1435
+ if (!pre) return;
1436
+ const text = pre.textContent.trim();
1437
+ if (navigator.clipboard) {
1438
+ navigator.clipboard.writeText(text).then(() => {
1439
+ card.classList.add('copied');
1440
+ const btn = card.querySelector('.pcard-copy');
1441
+ if (btn) btn.textContent = '✓ copiado!';
1442
+ setTimeout(() => {
1443
+ card.classList.remove('copied');
1444
+ if (btn) btn.textContent = '📋 copiar';
1445
+ }, 1400);
1446
+ copied++;
1447
+ xp += 25;
1448
+ document.getElementById('statCopied').textContent = copied;
1449
+ document.getElementById('statCopied').classList.add('pop');
1450
+ setTimeout(() => document.getElementById('statCopied').classList.remove('pop'), 300);
1451
+ document.getElementById('statXP').textContent = xp;
1452
+ document.getElementById('statXP').classList.add('pop');
1453
+ setTimeout(() => document.getElementById('statXP').classList.remove('pop'), 300);
1454
+ showToast('+25 XP 📋 Prompt copiado!');
1455
+ burst(card.getBoundingClientRect().left + card.offsetWidth / 2,
1456
+ card.getBoundingClientRect().top + card.offsetHeight / 2);
1457
+ });
1458
+ }
1459
+ });
1460
+
1461
+ // ══════════════════════════════
1462
+ // TOGGLE SECTION
1463
+ // ══════════════════════════════
1464
+ function toggle(header) {
1465
+ const section = header.parentElement;
1466
+ const wasOpen = section.classList.contains('open');
1467
+ section.classList.toggle('open');
1468
+ if (!wasOpen) {
1469
+ xp += 5;
1470
+ document.getElementById('statXP').textContent = xp;
1471
+ const badge = header.querySelector('.sbadge');
1472
+ if (badge && badge.textContent === 'LOCKED') badge.textContent = 'LIDO ✓';
1473
+ }
1474
+ }
1475
+
1476
+ // ══════════════════════════════
1477
+ // FILTER BY CATEGORY
1478
+ // ══════════════════════════════
1479
+ let activeCat = 'all';
1480
+
1481
+ function filterCat(btn, cat) {
1482
+ activeCat = cat;
1483
+ document.querySelectorAll('.ftab').forEach(b => b.classList.remove('active'));
1484
+ btn.classList.add('active');
1485
+ applyFilters();
1486
+ }
1487
+
1488
+ // ══════════════════════════════
1489
+ // SEARCH
1490
+ // ══════════════════════════════
1491
+ const searchInput = document.getElementById('searchInput');
1492
+ const searchClear = document.getElementById('searchClear');
1493
+
1494
+ searchInput.addEventListener('input', () => {
1495
+ searchClear.style.display = searchInput.value ? 'block' : 'none';
1496
+ applyFilters();
1497
+ });
1498
+
1499
+ function clearSearch() {
1500
+ searchInput.value = '';
1501
+ searchClear.style.display = 'none';
1502
+ applyFilters();
1503
+ }
1504
+
1505
+ function applyFilters() {
1506
+ const q = searchInput.value.toLowerCase().trim();
1507
+ let anyVisible = false;
1508
+
1509
+ document.querySelectorAll('.section').forEach(section => {
1510
+ const secCat = section.dataset.cat || 'all';
1511
+ const catMatch = activeCat === 'all' || secCat === activeCat;
1512
+
1513
+ if (!catMatch && q === '') {
1514
+ section.style.display = 'none';
1515
+ return;
1516
+ }
1517
+
1518
+ const cards = section.querySelectorAll('.pcard');
1519
+ let visCount = 0;
1520
+
1521
+ cards.forEach(card => {
1522
+ const cardCat = card.dataset.cat || '';
1523
+ const tags = (card.dataset.tags || '').toLowerCase();
1524
+ const preText = (card.querySelector('pre')?.textContent || '').toLowerCase();
1525
+ const labelText = (card.querySelector('.pcard-label')?.textContent || '').toLowerCase();
1526
+ const combined = tags + ' ' + preText + ' ' + labelText;
1527
+
1528
+ const catOk = activeCat === 'all' || cardCat === activeCat;
1529
+ const searchOk = q === '' || combined.includes(q);
1530
+
1531
+ if (catOk && searchOk) {
1532
+ card.style.display = '';
1533
+ visCount++;
1534
+ } else {
1535
+ card.style.display = 'none';
1536
+ }
1537
+ });
1538
+
1539
+ const shouldShow = visCount > 0 || (catMatch && q === '');
1540
+ section.style.display = shouldShow ? '' : 'none';
1541
+ if (shouldShow) anyVisible = true;
1542
+ });
1543
+
1544
+ document.getElementById('emptyState').style.display = anyVisible ? 'none' : 'block';
1545
+ }
1546
+
1547
+ // ══════════════════════════════
1548
+ // TOAST
1549
+ // ══════════════════════════════
1550
+ let toastTimer;
1551
+ function showToast(msg) {
1552
+ const t = document.getElementById('toast');
1553
+ t.textContent = msg;
1554
+ t.classList.add('show');
1555
+ clearTimeout(toastTimer);
1556
+ toastTimer = setTimeout(() => t.classList.remove('show'), 2000);
1557
+ }
1558
+
1559
+ // ══════════════════════════════
1560
+ // CONFETTI BURST
1561
+ // ══════════════════════════════
1562
+ function burst(cx, cy) {
1563
+ for (let i = 0; i < 14; i++) {
1564
+ const el = document.createElement('div');
1565
+ el.className = 'cf';
1566
+ el.style.cssText = `
1567
+ left:${cx + (Math.random()-0.5)*50}px;
1568
+ top:${cy}px;
1569
+ background:${COLORS[Math.floor(Math.random()*COLORS.length)]};
1570
+ border-radius:${Math.random()>.5?'50%':'2px'};
1571
+ animation-duration:${0.7+Math.random()*0.9}s;
1572
+ width:${5+Math.random()*7}px;height:${5+Math.random()*7}px;
1573
+ `;
1574
+ document.body.appendChild(el);
1575
+ setTimeout(() => el.remove(), 1800);
1576
+ }
1577
+ }
1578
+
1579
+ // ══════════════════════════════
1580
+ // SCROLL TOP
1581
+ // ══════════════════════════════
1582
+ function scrollToTop() { window.scrollTo({top:0,behavior:'smooth'}); }
1583
+ window.addEventListener('scroll', () => {
1584
+ document.getElementById('scrolltop').classList.toggle('visible', window.scrollY > 300);
1585
+ }, {passive:true});
1586
+
1587
+ // ══════════════════════════════
1588
+ // INIT
1589
+ // ══════════════════════════════
1590
+ initCounts();
1591
+ </script>
1592
+ </body>
1593
+ </html>