Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <title>✦ DOODLES AI — Manual Completo</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --petal-pink: #FFB3E6; | |
| --lemon-yellow: #FFE780; | |
| --orange-sorbet:#FFC897; | |
| --touch-grass: #B3FFC7; | |
| --clear-skies: #A1E9FF; | |
| --grape-jelly: #C5C5FF; | |
| --peach-puff: #FFEAD2; | |
| --rosy-cheeks: #FFD0B8; | |
| --caramel: #E8A68B; | |
| --lavender: #A4A4F4; | |
| --white: #FFFFFF; | |
| --outline: #1A1014; | |
| --bg: #F5F0F8; | |
| --grad-rainbow: linear-gradient(90deg, #FFB3E6, #FFC897, #FFE780, #B3FFC7, #A1E9FF, #C5C5FF); | |
| --radius-sm: 12px; | |
| --radius-md: 20px; | |
| --radius-lg: 28px; | |
| --shadow: 3px 3px 0 var(--outline); | |
| --shadow-lg: 5px 5px 0 var(--outline); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } | |
| body { | |
| font-family: 'Nunito', sans-serif; | |
| background: var(--bg); | |
| color: var(--outline); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* ── ANIMATED BACKGROUND ── */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| radial-gradient(circle at 10% 10%, var(--petal-pink) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 5%, var(--clear-skies) 0%, transparent 35%), | |
| radial-gradient(circle at 85% 90%, var(--grape-jelly) 0%, transparent 40%), | |
| radial-gradient(circle at 5% 85%, var(--touch-grass) 0%, transparent 35%), | |
| radial-gradient(circle at 50% 50%, var(--lemon-yellow) 0%, transparent 50%); | |
| opacity: 0.18; | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: bgPulse 8s ease-in-out infinite; | |
| } | |
| @keyframes bgPulse { | |
| 0%,100% { opacity: 0.18; transform: scale(1); } | |
| 50% { opacity: 0.25; transform: scale(1.03); } | |
| } | |
| /* ── FLOATING PARTICLES (canvas) ── */ | |
| #particles-canvas { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* ── RAINBOW STRIP ── */ | |
| .rainbow-bar { | |
| height: 6px; | |
| background: linear-gradient(90deg, #FFB3E6, #FFC897, #FFE780, #B3FFC7, #A1E9FF, #C5C5FF, #FFB3E6); | |
| background-size: 200% 100%; | |
| animation: rainbowSlide 3s linear infinite; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| @keyframes rainbowSlide { | |
| 0% { background-position: 0% 50%; } | |
| 100% { background-position: 200% 50%; } | |
| } | |
| /* ════════════════════════ | |
| XP BAR (progress gamification) | |
| ════════════════════════ */ | |
| .xp-bar-wrap { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| z-index: 200; | |
| background: rgba(26,16,20,0.15); | |
| } | |
| .xp-bar-fill { | |
| height: 100%; | |
| background: var(--grad-rainbow); | |
| background-size: 200% 100%; | |
| animation: rainbowSlide 2s linear infinite; | |
| transition: width 0.4s ease; | |
| width: 0%; | |
| } | |
| /* ════════════════════════ | |
| HEADER | |
| ════════════════════════ */ | |
| header { | |
| background: var(--outline); | |
| padding: 2.5rem 1.25rem 2.2rem; | |
| text-align: center; | |
| position: relative; | |
| z-index: 2; | |
| overflow: hidden; | |
| } | |
| 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 | |
| ); | |
| animation: stripeMove 20s linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes stripeMove { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 100px 100px; } | |
| } | |
| /* Floating doodle emojis in header */ | |
| .header-floaters { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .header-floater { | |
| position: absolute; | |
| font-size: 1.4rem; | |
| opacity: 0.18; | |
| animation: headerFloat linear infinite; | |
| } | |
| @keyframes headerFloat { | |
| 0% { transform: translateY(100%) rotate(0deg); opacity: 0; } | |
| 10% { opacity: 0.18; } | |
| 90% { opacity: 0.18; } | |
| 100% { transform: translateY(-100%) rotate(360deg); opacity: 0; } | |
| } | |
| .header-eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--lemon-yellow); | |
| color: var(--outline); | |
| font-size: 0.72rem; | |
| font-weight: 900; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| padding: 5px 16px; | |
| border-radius: 50px; | |
| border: 3px solid var(--outline); | |
| box-shadow: var(--shadow); | |
| margin-bottom: 1.1rem; | |
| position: relative; | |
| z-index: 1; | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%,100% { transform: translateY(0) rotate(-1deg); } | |
| 50% { transform: translateY(-6px) rotate(1deg); } | |
| } | |
| header h1 { | |
| font-size: clamp(2.6rem, 9vw, 5.5rem); | |
| font-weight: 900; | |
| line-height: 1.0; | |
| color: var(--white); | |
| letter-spacing: -1px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| header h1 .accent { color: var(--petal-pink); } | |
| header h1 .accent2 { color: var(--lemon-yellow); animation: textGlow 2s ease-in-out infinite; } | |
| @keyframes textGlow { | |
| 0%,100% { text-shadow: 0 0 10px rgba(255,231,128,0.3); } | |
| 50% { text-shadow: 0 0 25px rgba(255,231,128,0.8), 0 0 50px rgba(255,231,128,0.4); } | |
| } | |
| .header-rainbow-text { | |
| font-size: clamp(0.85rem, 2.5vw, 1.05rem); | |
| font-weight: 800; | |
| background: var(--grad-rainbow); | |
| background-size: 200% 100%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: rainbowSlide 3s linear infinite; | |
| margin-top: 0.7rem; | |
| position: relative; | |
| z-index: 1; | |
| letter-spacing: 0.5px; | |
| } | |
| .header-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| justify-content: center; | |
| margin-top: 1.3rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .tag { | |
| background: rgba(255,255,255,0.1); | |
| border: 2px solid rgba(255,255,255,0.2); | |
| color: rgba(255,255,255,0.85); | |
| padding: 4px 13px; | |
| border-radius: 50px; | |
| font-size: 0.75rem; | |
| font-weight: 800; | |
| letter-spacing: 0.5px; | |
| animation: tagPop 0.5s ease backwards; | |
| } | |
| .tag:nth-child(1) { animation-delay: 0.1s; } | |
| .tag:nth-child(2) { animation-delay: 0.2s; } | |
| .tag:nth-child(3) { animation-delay: 0.3s; } | |
| .tag:nth-child(4) { animation-delay: 0.4s; } | |
| @keyframes tagPop { | |
| from { transform: scale(0.5); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| /* ── LEVEL BADGE ── */ | |
| .level-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .level-pill { | |
| background: var(--petal-pink); | |
| border: 3px solid var(--outline); | |
| border-radius: 50px; | |
| padding: 5px 14px; | |
| font-size: 0.75rem; | |
| font-weight: 900; | |
| box-shadow: var(--shadow); | |
| animation: float 3.5s ease-in-out infinite; | |
| animation-delay: 0.5s; | |
| } | |
| .stars-row { | |
| display: flex; | |
| gap: 2px; | |
| } | |
| .star { | |
| font-size: 1rem; | |
| animation: starSpin 4s linear infinite; | |
| } | |
| .star:nth-child(2) { animation-delay: 0.3s; } | |
| .star:nth-child(3) { animation-delay: 0.6s; } | |
| @keyframes starSpin { | |
| 0%,80%,100% { transform: scale(1) rotate(0deg); } | |
| 85% { transform: scale(1.4) rotate(20deg); color: #FFE780; } | |
| } | |
| /* ════════════════════════ | |
| WRAPPER | |
| ════════════════════════ */ | |
| .wrapper { | |
| max-width: 860px; | |
| margin: 0 auto; | |
| padding: 1.75rem 1rem 5rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ════════════════════════ | |
| STATS ROW (gamification) | |
| ════════════════════════ */ | |
| .stats-row { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 8px; | |
| margin-bottom: 1.25rem; | |
| } | |
| .stat-card { | |
| background: var(--outline); | |
| border-radius: var(--radius-md); | |
| border: 3px solid var(--outline); | |
| box-shadow: var(--shadow); | |
| padding: 0.9rem 0.75rem; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0.07; | |
| background: repeating-linear-gradient(45deg, #fff 0px, #fff 2px, transparent 2px, transparent 10px); | |
| } | |
| .stat-icon { font-size: 1.4rem; display: block; margin-bottom: 2px; } | |
| .stat-value { | |
| font-size: 1.4rem; | |
| font-weight: 900; | |
| color: var(--lemon-yellow); | |
| display: block; | |
| line-height: 1; | |
| } | |
| .stat-label { | |
| font-size: 0.6rem; | |
| font-weight: 800; | |
| color: rgba(255,255,255,0.5); | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| display: block; | |
| margin-top: 2px; | |
| } | |
| /* count-up animation */ | |
| .stat-value.counting { animation: countPop 0.3s ease; } | |
| @keyframes countPop { | |
| 0% { transform: scale(1.5); color: var(--petal-pink); } | |
| 100% { transform: scale(1); color: var(--lemon-yellow); } | |
| } | |
| /* ════════════════════════ | |
| TICKER TAPE | |
| ════════════════════════ */ | |
| .ticker-wrap { | |
| background: var(--outline); | |
| border: 3px solid var(--outline); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| margin-bottom: 1.25rem; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| } | |
| .ticker-label { | |
| position: absolute; | |
| left: 0; top: 0; bottom: 0; | |
| background: var(--lemon-yellow); | |
| color: var(--outline); | |
| font-size: 0.65rem; | |
| 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(--outline); | |
| white-space: nowrap; | |
| } | |
| .ticker-track { | |
| display: flex; | |
| padding: 0.5rem 0; | |
| padding-left: 90px; | |
| overflow: hidden; | |
| } | |
| .ticker-inner { | |
| display: flex; | |
| gap: 0; | |
| animation: tickerMove 70s linear infinite; | |
| white-space: nowrap; | |
| } | |
| .ticker-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: rgba(255,255,255,0.75); | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| padding: 0 20px; | |
| border-right: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .ticker-item span { color: var(--touch-grass); } | |
| @keyframes tickerMove { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* ════════════════════════ | |
| TOC CARD | |
| ════════════════════════ */ | |
| .toc-card { | |
| background: var(--outline); | |
| border-radius: var(--radius-lg); | |
| border: 3px solid var(--outline); | |
| box-shadow: var(--shadow-lg); | |
| padding: 1.6rem 1.5rem; | |
| margin: 0 0 1.25rem; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .toc-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #FFB3E6, #FFC897, #FFE780, #B3FFC7, #A1E9FF, #C5C5FF, #FFB3E6); | |
| background-size: 200%; | |
| animation: rainbowSlide 3s linear infinite; | |
| } | |
| .toc-title { | |
| font-size: 1.1rem; | |
| font-weight: 900; | |
| color: var(--lemon-yellow); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .toc-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| gap: 5px; | |
| } | |
| .toc-grid a { | |
| color: rgba(255,255,255,0.8); | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| padding: 7px 10px; | |
| border-radius: var(--radius-sm); | |
| border: 2px solid transparent; | |
| transition: all 0.15s; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| line-height: 1.3; | |
| } | |
| .toc-grid a:hover, | |
| .toc-grid a:active { | |
| background: rgba(255,255,255,0.1); | |
| border-color: var(--lemon-yellow); | |
| color: var(--lemon-yellow); | |
| transform: translateX(3px); | |
| } | |
| /* ════════════════════════ | |
| TOOLBAR | |
| ════════════════════════ */ | |
| .toolbar { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 1.25rem; | |
| flex-wrap: wrap; | |
| } | |
| .btn-tool { | |
| background: var(--white); | |
| border: 3px solid var(--outline); | |
| border-radius: var(--radius-sm); | |
| font-family: 'Nunito', sans-serif; | |
| font-size: 0.8rem; | |
| font-weight: 800; | |
| padding: 7px 14px; | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| transition: all 0.12s; | |
| color: var(--outline); | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| touch-action: manipulation; | |
| } | |
| .btn-tool:hover { transform: translateY(-2px); box-shadow: 4px 6px 0 var(--outline); } | |
| .btn-tool:active { transform: translateY(2px); box-shadow: 1px 1px 0 var(--outline); } | |
| .btn-tool.pink { background: var(--petal-pink); } | |
| .btn-tool.yellow { background: var(--lemon-yellow); } | |
| .btn-tool.purple { background: var(--grape-jelly); } | |
| .btn-tool.green { background: var(--touch-grass); } | |
| /* ════════════════════════ | |
| SECTION COLORS MAP | |
| ════════════════════════ */ | |
| .s1 .section-header { background: var(--petal-pink); } | |
| .s2 .section-header { background: var(--lemon-yellow); } | |
| .s3 .section-header { background: var(--orange-sorbet); } | |
| .s4 .section-header { background: var(--touch-grass); } | |
| .s5 .section-header { background: var(--clear-skies); } | |
| .s6 .section-header { background: var(--grape-jelly); } | |
| .s7 .section-header { background: var(--peach-puff); } | |
| .s8 .section-header { background: var(--rosy-cheeks); } | |
| .s9 .section-header { background: var(--caramel); } | |
| .s10 .section-header { background: var(--lavender); } | |
| .s11 .section-header { background: var(--petal-pink); } | |
| .s12 .section-header { background: var(--lemon-yellow); } | |
| .s13 .section-header { background: var(--touch-grass); } | |
| .s14 .section-header { background: var(--clear-skies); } | |
| .s15 .section-header { background: var(--grape-jelly); } | |
| .s16 .section-header { background: var(--orange-sorbet); } | |
| .s17 .section-header { background: var(--petal-pink); } | |
| .s18 .section-header { background: var(--lemon-yellow); } | |
| .s19 .section-header { background: var(--rosy-cheeks); } | |
| .s1 .section-num { background: var(--outline); color: var(--petal-pink); } | |
| .s2 .section-num { background: var(--outline); color: var(--lemon-yellow); } | |
| .s3 .section-num { background: var(--outline); color: var(--orange-sorbet); } | |
| .s4 .section-num { background: var(--outline); color: var(--touch-grass); } | |
| .s5 .section-num { background: var(--outline); color: var(--clear-skies); } | |
| .s6 .section-num { background: var(--outline); color: var(--grape-jelly); } | |
| .s7 .section-num { background: var(--outline); color: var(--peach-puff); } | |
| .s8 .section-num { background: var(--outline); color: var(--rosy-cheeks); } | |
| .s9 .section-num { background: var(--outline); color: var(--caramel); } | |
| .s10 .section-num { background: var(--outline); color: var(--lavender); } | |
| .s11 .section-num { background: var(--outline); color: var(--petal-pink); } | |
| .s12 .section-num { background: var(--outline); color: var(--lemon-yellow); } | |
| .s13 .section-num { background: var(--outline); color: var(--touch-grass); } | |
| .s14 .section-num { background: var(--outline); color: var(--clear-skies); } | |
| .s15 .section-num { background: var(--outline); color: var(--grape-jelly); } | |
| .s16 .section-num { background: var(--outline); color: var(--orange-sorbet); } | |
| .s17 .section-num { background: var(--outline); color: var(--petal-pink); } | |
| .s18 .section-num { background: var(--outline); color: var(--lemon-yellow); } | |
| .s19 .section-num { background: var(--outline); color: var(--rosy-cheeks); } | |
| /* ════════════════════════ | |
| SECTIONS | |
| ════════════════════════ */ | |
| .section { | |
| background: var(--white); | |
| border: 3px solid var(--outline); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-lg); | |
| margin-bottom: 1rem; | |
| overflow: hidden; | |
| transition: box-shadow 0.15s, transform 0.15s; | |
| } | |
| .section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 6px 8px 0 var(--outline); | |
| } | |
| .section-header { | |
| padding: 0.9rem 1.1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| user-select: none; | |
| -webkit-tap-highlight-color: transparent; | |
| transition: filter 0.1s; | |
| } | |
| .section-header:active { filter: brightness(0.94); } | |
| .section-num { | |
| font-size: 1rem; | |
| font-weight: 900; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border: 3px solid var(--outline); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: 2px 2px 0 var(--outline); | |
| } | |
| .section-title { | |
| font-size: 1rem; | |
| font-weight: 900; | |
| flex: 1; | |
| color: var(--outline); | |
| line-height: 1.25; | |
| } | |
| .section-toggle { | |
| font-size: 1rem; | |
| color: var(--outline); | |
| opacity: 0.55; | |
| transition: transform 0.25s; | |
| flex-shrink: 0; | |
| } | |
| /* ── SECTION BADGES (unlocked indicator) ── */ | |
| .section-badge { | |
| font-size: 0.6rem; | |
| font-weight: 900; | |
| padding: 2px 8px; | |
| border-radius: 50px; | |
| border: 2px solid var(--outline); | |
| background: var(--outline); | |
| color: rgba(255,255,255,0.4); | |
| letter-spacing: 0.5px; | |
| flex-shrink: 0; | |
| transition: all 0.3s; | |
| } | |
| .section.open .section-badge { | |
| background: var(--lemon-yellow); | |
| color: var(--outline); | |
| animation: badgePop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); | |
| } | |
| @keyframes badgePop { | |
| 0% { transform: scale(0.5) rotate(-15deg); } | |
| 60% { transform: scale(1.2) rotate(5deg); } | |
| 100% { transform: scale(1) rotate(0deg); } | |
| } | |
| .section.open .section-header { | |
| border-bottom: 3px solid var(--outline); | |
| } | |
| .section.open .section-toggle { | |
| transform: rotate(180deg); | |
| opacity: 0.85; | |
| } | |
| .section-body { | |
| display: none; | |
| padding: 1.25rem 1.1rem; | |
| animation: slideDown 0.25s ease; | |
| } | |
| @keyframes slideDown { | |
| from { opacity: 0; transform: translateY(-8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .section.open .section-body { display: block; } | |
| /* ── SECTION READ CHECKMARK ── */ | |
| .section.read .section-num::after { | |
| content: '✓'; | |
| position: absolute; | |
| font-size: 0.65rem; | |
| right: -4px; | |
| top: -4px; | |
| background: var(--touch-grass); | |
| border: 2px solid var(--outline); | |
| border-radius: 50%; | |
| width: 14px; | |
| height: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .section-num { position: relative; } | |
| /* ════════════════════════ | |
| BODY CONTENT STYLES | |
| ════════════════════════ */ | |
| .section-body h3 { | |
| font-size: 0.95rem; | |
| font-weight: 900; | |
| margin: 1.2rem 0 0.5rem; | |
| color: var(--outline); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .section-body h3:first-child { margin-top: 0; } | |
| .section-body p { | |
| font-size: 0.88rem; | |
| line-height: 1.65; | |
| color: #2a2028; | |
| margin-bottom: 0.6rem; | |
| } | |
| .section-body ul, | |
| .section-body ol { | |
| padding-left: 1.3rem; | |
| margin-bottom: 0.7rem; | |
| } | |
| .section-body li { | |
| font-size: 0.88rem; | |
| line-height: 1.7; | |
| color: #2a2028; | |
| margin-bottom: 0.15rem; | |
| } | |
| /* ── PRE COPY ── */ | |
| .section-body pre { | |
| background: var(--outline); | |
| color: var(--touch-grass); | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.78rem; | |
| line-height: 1.6; | |
| padding: 1rem 1rem; | |
| border-radius: var(--radius-sm); | |
| overflow-x: auto; | |
| margin: 0.7rem 0; | |
| border: 2px solid var(--outline); | |
| box-shadow: var(--shadow); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| cursor: pointer; | |
| position: relative; | |
| transition: border-color 0.2s; | |
| } | |
| .section-body pre::after { | |
| content: '📋 copiar'; | |
| position: absolute; | |
| top: 6px; | |
| right: 8px; | |
| font-size: 0.6rem; | |
| font-family: 'Nunito', sans-serif; | |
| font-weight: 800; | |
| color: rgba(255,255,255,0.3); | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| transition: color 0.2s; | |
| } | |
| .section-body pre:hover::after { color: var(--lemon-yellow); } | |
| .section-body pre:hover { border-color: var(--lemon-yellow); } | |
| .section-body pre.copied { border-color: var(--touch-grass) ; } | |
| .section-body pre.copied::after { content: '✓ copiado!'; color: var(--touch-grass) ; } | |
| .section-body code { | |
| background: var(--outline); | |
| color: var(--lemon-yellow); | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.78rem; | |
| padding: 2px 7px; | |
| border-radius: 6px; | |
| } | |
| .section-body blockquote { | |
| border-left: 4px solid var(--grape-jelly); | |
| background: rgba(197,197,255,0.15); | |
| padding: 0.75rem 1rem; | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| margin: 0.7rem 0; | |
| font-size: 0.85rem; | |
| font-style: italic; | |
| line-height: 1.6; | |
| } | |
| /* ════════════════════════ | |
| PILL BADGES | |
| ════════════════════════ */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 3px 10px; | |
| border-radius: 50px; | |
| border: 2px solid var(--outline); | |
| font-size: 0.75rem; | |
| font-weight: 800; | |
| box-shadow: 2px 2px 0 var(--outline); | |
| margin: 2px; | |
| transition: transform 0.1s; | |
| } | |
| .badge:hover { transform: scale(1.08) rotate(-2deg); } | |
| .badge-pink { background: var(--petal-pink); } | |
| .badge-yellow { background: var(--lemon-yellow); } | |
| .badge-green { background: var(--touch-grass); } | |
| .badge-blue { background: var(--clear-skies); } | |
| .badge-purple { background: var(--grape-jelly); } | |
| .badge-orange { background: var(--orange-sorbet); } | |
| /* ════════════════════════ | |
| COLOR SWATCHES | |
| ════════════════════════ */ | |
| .palette-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); | |
| gap: 8px; | |
| margin: 0.75rem 0; | |
| } | |
| .swatch { | |
| border: 3px solid var(--outline); | |
| border-radius: var(--radius-sm); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: transform 0.15s, box-shadow 0.15s; | |
| } | |
| .swatch:hover { | |
| transform: translateY(-3px) rotate(-1deg); | |
| box-shadow: 4px 6px 0 var(--outline); | |
| } | |
| .swatch-color { | |
| height: 52px; | |
| transition: height 0.2s; | |
| } | |
| .swatch:hover .swatch-color { height: 60px; } | |
| .swatch-info { | |
| padding: 5px 7px; | |
| background: var(--white); | |
| border-top: 2px solid var(--outline); | |
| } | |
| .swatch-name { | |
| font-size: 0.65rem; | |
| font-weight: 900; | |
| display: block; | |
| line-height: 1.3; | |
| color: var(--outline); | |
| } | |
| .swatch-hex { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| color: #555; | |
| font-family: 'Courier New', monospace; | |
| } | |
| /* ════════════════════════ | |
| TABLE | |
| ════════════════════════ */ | |
| .table-wrap { overflow-x: auto; margin: 0.7rem 0; -webkit-overflow-scrolling: touch; } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.82rem; | |
| min-width: 340px; | |
| } | |
| th { | |
| background: var(--outline); | |
| color: var(--lemon-yellow); | |
| font-weight: 900; | |
| font-size: 0.75rem; | |
| padding: 8px 10px; | |
| text-align: left; | |
| letter-spacing: 0.5px; | |
| } | |
| td { | |
| padding: 7px 10px; | |
| border-bottom: 2px solid rgba(0,0,0,0.07); | |
| line-height: 1.45; | |
| } | |
| tr:nth-child(even) td { background: rgba(0,0,0,0.025); } | |
| tr:hover td { background: rgba(197,197,255,0.2); transition: background 0.15s; } | |
| /* ════════════════════════ | |
| DIVIDER | |
| ════════════════════════ */ | |
| .divider { | |
| height: 3px; | |
| background: var(--grad-rainbow); | |
| background-size: 200%; | |
| animation: rainbowSlide 3s linear infinite; | |
| border-radius: 99px; | |
| margin: 1rem 0; | |
| } | |
| /* ════════════════════════ | |
| CALLOUT BOXES | |
| ════════════════════════ */ | |
| .callout { | |
| border: 3px solid var(--outline); | |
| border-radius: var(--radius-sm); | |
| padding: 0.85rem 1rem; | |
| margin: 0.7rem 0; | |
| font-size: 0.86rem; | |
| line-height: 1.6; | |
| box-shadow: var(--shadow); | |
| } | |
| .callout-tip { background: rgba(179,255,199,0.35); border-left: 5px solid var(--touch-grass); } | |
| .callout-warn { background: rgba(255,200,151,0.35); border-left: 5px solid var(--orange-sorbet); } | |
| .callout-info { background: rgba(161,233,255,0.35); border-left: 5px solid var(--clear-skies); } | |
| .callout-purple { background: rgba(197,197,255,0.35); border-left: 5px solid var(--grape-jelly); } | |
| .callout strong { font-weight: 900; } | |
| /* ════════════════════════ | |
| TOAST NOTIFICATION | |
| ════════════════════════ */ | |
| .toast { | |
| position: fixed; | |
| bottom: 5rem; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--outline); | |
| color: var(--lemon-yellow); | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| padding: 8px 20px; | |
| border-radius: 50px; | |
| border: 3px solid var(--lemon-yellow); | |
| box-shadow: var(--shadow-lg); | |
| z-index: 300; | |
| transition: transform 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97), opacity 0.3s; | |
| opacity: 0; | |
| white-space: nowrap; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } | |
| /* ════════════════════════ | |
| CONFETTI BURST (js-driven) | |
| ════════════════════════ */ | |
| .confetti-piece { | |
| position: fixed; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 2px; | |
| pointer-events: none; | |
| z-index: 500; | |
| animation: confettiFall linear forwards; | |
| } | |
| @keyframes confettiFall { | |
| 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } | |
| 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } | |
| } | |
| /* ════════════════════════ | |
| ACHIEVEMENT POPUP | |
| ════════════════════════ */ | |
| .achievement-pop { | |
| position: fixed; | |
| top: 1.5rem; | |
| right: 1rem; | |
| background: var(--outline); | |
| border: 3px solid var(--lemon-yellow); | |
| border-radius: var(--radius-md); | |
| box-shadow: 6px 6px 0 rgba(0,0,0,0.4); | |
| padding: 0.75rem 1rem; | |
| z-index: 400; | |
| transform: translateX(120%); | |
| transition: transform 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); | |
| min-width: 220px; | |
| max-width: 280px; | |
| } | |
| .achievement-pop.show { transform: translateX(0); } | |
| .achievement-title { | |
| font-size: 0.6rem; | |
| font-weight: 900; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: var(--lemon-yellow); | |
| margin-bottom: 3px; | |
| } | |
| .achievement-name { | |
| font-size: 0.95rem; | |
| font-weight: 900; | |
| color: var(--white); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .achievement-desc { | |
| font-size: 0.72rem; | |
| color: rgba(255,255,255,0.55); | |
| margin-top: 2px; | |
| } | |
| /* ════════════════════════ | |
| SCROLL TRACK | |
| ════════════════════════ */ | |
| .scroll-track { | |
| position: fixed; | |
| right: 6px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| z-index: 50; | |
| } | |
| .scroll-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: rgba(26,16,20,0.2); | |
| border: 2px solid rgba(26,16,20,0.3); | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| } | |
| .scroll-dot.active { | |
| background: var(--outline); | |
| transform: scale(1.6); | |
| } | |
| /* ════════════════════════ | |
| FOOTER | |
| ════════════════════════ */ | |
| footer { | |
| text-align: center; | |
| padding: 1.5rem 1rem; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| color: rgba(26,16,20,0.45); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ════════════════════════ | |
| RESPONSIVE | |
| ════════════════════════ */ | |
| @media (max-width: 480px) { | |
| .palette-grid { grid-template-columns: repeat(3, 1fr); } | |
| .toc-grid { grid-template-columns: 1fr 1fr; } | |
| .toolbar { gap: 6px; } | |
| .btn-tool { font-size: 0.75rem; padding: 6px 11px; } | |
| header h1 { letter-spacing: -2px; } | |
| .stats-row { grid-template-columns: repeat(3,1fr); } | |
| .scroll-track { display: none; } | |
| .achievement-pop { max-width: 240px; } | |
| } | |
| @media (max-width: 360px) { | |
| .toc-grid { grid-template-columns: 1fr; } | |
| .palette-grid { grid-template-columns: repeat(2, 1fr); } | |
| .stats-row { grid-template-columns: 1fr 1fr 1fr; gap: 5px; } | |
| } | |
| /* ════════════════════════ | |
| SCROLL TO TOP | |
| ════════════════════════ */ | |
| #scrolltop { | |
| position: fixed; | |
| bottom: 1.5rem; | |
| right: 1.25rem; | |
| width: 44px; | |
| height: 44px; | |
| background: var(--outline); | |
| color: var(--lemon-yellow); | |
| border: 3px solid var(--outline); | |
| border-radius: 50%; | |
| font-size: 1.2rem; | |
| 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 0.25s, transform 0.25s; | |
| touch-action: manipulation; | |
| animation: scrollBounce 2s ease-in-out infinite; | |
| } | |
| @keyframes scrollBounce { | |
| 0%,100% { box-shadow: 3px 3px 0 var(--outline); } | |
| 50% { box-shadow: 5px 5px 0 var(--outline), 0 0 15px rgba(255,231,128,0.3); } | |
| } | |
| #scrolltop.visible { opacity: 1; transform: translateY(0); } | |
| /* ─── PULSE on first open ── */ | |
| @keyframes sectionPulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255,231,128,0.6); } | |
| 70% { box-shadow: 0 0 0 12px rgba(255,231,128,0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255,231,128,0); } | |
| } | |
| .section.just-opened { | |
| animation: sectionPulse 0.6s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- XP PROGRESS BAR --> | |
| <div class="xp-bar-wrap"><div class="xp-bar-fill" id="xpBar"></div></div> | |
| <!-- PARTICLES CANVAS --> | |
| <canvas id="particles-canvas"></canvas> | |
| <!-- TOAST --> | |
| <div class="toast" id="toast"></div> | |
| <!-- ACHIEVEMENT POPUP --> | |
| <div class="achievement-pop" id="achievement"> | |
| <div class="achievement-title">🏆 Conquista desbloqueada!</div> | |
| <div class="achievement-name" id="achievementName">—</div> | |
| <div class="achievement-desc" id="achievementDesc">—</div> | |
| </div> | |
| <!-- SCROLL DOTS --> | |
| <div class="scroll-track" id="scrollTrack"></div> | |
| <!-- RAINBOW TOP BAR --> | |
| <div class="rainbow-bar"></div> | |
| <!-- HEADER --> | |
| <header> | |
| <div class="header-floaters" id="headerFloaters"></div> | |
| <div class="header-eyebrow">✦ FIELD GUIDE v.01 · 2025/2026</div> | |
| <h1>DOODLES<span class="accent">.</span><span class="accent2">AI</span></h1> | |
| <div class="header-rainbow-text">Manual Completo do Gerador de Imagens</div> | |
| <div class="header-tags"> | |
| <span class="tag">🎨 LoRA Doodles</span> | |
| <span class="tag">📱 Mobile First</span> | |
| <span class="tag">✦ 19 Seções</span> | |
| <span class="tag">🌈 Paleta Oficial</span> | |
| </div> | |
| <div class="level-badge"> | |
| <div class="level-pill">⚡ NÍVEL <span id="levelNum">1</span></div> | |
| <div class="stars-row"> | |
| <span class="star">⭐</span> | |
| <span class="star">⭐</span> | |
| <span class="star">⭐</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- RAINBOW BOTTOM BAR --> | |
| <div class="rainbow-bar"></div> | |
| <div class="wrapper"> | |
| <!-- STATS ROW --> | |
| <div class="stats-row"> | |
| <div class="stat-card"> | |
| <span class="stat-icon">📖</span> | |
| <span class="stat-value" id="statRead">0</span> | |
| <span class="stat-label">Seções lidas</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-icon">📋</span> | |
| <span class="stat-value" id="statCopied">0</span> | |
| <span class="stat-label">Prompts copiados</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-icon">⚡</span> | |
| <span class="stat-value" id="statXP">0</span> | |
| <span class="stat-label">XP Total</span> | |
| </div> | |
| </div> | |
| <!-- TICKER TAPE --> | |
| <div class="ticker-wrap"> | |
| <div class="ticker-label">💡 DICA</div> | |
| <div class="ticker-track"> | |
| <div class="ticker-inner" id="tickerInner"> | |
| <span class="ticker-item">Abra uma seção para ganhar <span>+10 XP</span></span> | |
| <span class="ticker-item">Copie um prompt e ganhe <span>+25 XP</span></span> | |
| <span class="ticker-item">Roupa SEMPRE com cor no prompt</span> | |
| <span class="ticker-item">Use <span>chubby doodle</span> ou <span>slim doodle</span> para definir o corpo</span> | |
| <span class="ticker-item">Fundo sempre no FINAL da descrição da cena</span> | |
| <span class="ticker-item">Máximo <span>2 objetos</span> de destaque por cena</span> | |
| <span class="ticker-item">Fixe a <span>seed</span> para consistência de personagens</span> | |
| <span class="ticker-item">Efeito X OFF para product shots e stickers</span> | |
| <span class="ticker-item">Use <span>Rápido (6 steps)</span> para testar e Máximo para arte final</span> | |
| <span class="ticker-item">Sombras: mova o seletor <span>horizontalmente</span>, não verticalmente</span> | |
| <!-- duplicate for seamless loop --> | |
| <span class="ticker-item">Abra uma seção para ganhar <span>+10 XP</span></span> | |
| <span class="ticker-item">Copie um prompt e ganhe <span>+25 XP</span></span> | |
| <span class="ticker-item">Roupa SEMPRE com cor no prompt</span> | |
| <span class="ticker-item">Use <span>chubby doodle</span> ou <span>slim doodle</span> para definir o corpo</span> | |
| <span class="ticker-item">Fundo sempre no FINAL da descrição da cena</span> | |
| <span class="ticker-item">Máximo <span>2 objetos</span> de destaque por cena</span> | |
| <span class="ticker-item">Fixe a <span>seed</span> para consistência de personagens</span> | |
| <span class="ticker-item">Efeito X OFF para product shots e stickers</span> | |
| <span class="ticker-item">Use <span>Rápido (6 steps)</span> para testar e Máximo para arte final</span> | |
| <span class="ticker-item">Sombras: mova o seletor <span>horizontalmente</span>, não verticalmente</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TABLE OF CONTENTS --> | |
| <div class="toc-card"> | |
| <div class="toc-title">📋 Índice</div> | |
| <div class="toc-grid"> | |
| <a href="#s1">1. O que é o Doodles AI</a> | |
| <a href="#s2">2. Interface do App</a> | |
| <a href="#s3">3. Estilos Base</a> | |
| <a href="#s4">4. Modos de Geração</a> | |
| <a href="#s5">5. Fórmula do Prompt</a> | |
| <a href="#s6">6. Paleta Oficial</a> | |
| <a href="#s7">7. Tokens de Personagem</a> | |
| <a href="#s8">8. Roupas & Acessórios</a> | |
| <a href="#s9">9. Poses & Enquadramentos</a> | |
| <a href="#s10">10. Fundos & Cenários</a> | |
| <a href="#s11">11. Texto Meme</a> | |
| <a href="#s12">12. Efeito X</a> | |
| <a href="#s13">13. Resoluções</a> | |
| <a href="#s14">14. Prompt Negativo</a> | |
| <a href="#s15">15. Consistência de Personagens</a> | |
| <a href="#s16">16. Sweet Spots por Conteúdo</a> | |
| <a href="#s17">17. Combinações Avançadas</a> | |
| <a href="#s18">18. Template para IA</a> | |
| <a href="#s19">19. Troubleshooting</a> | |
| </div> | |
| </div> | |
| <!-- TOOLBAR --> | |
| <div class="toolbar"> | |
| <button class="btn-tool yellow" onclick="toggleAll(true)">▼ Expandir tudo</button> | |
| <button class="btn-tool" onclick="toggleAll(false)">▲ Recolher tudo</button> | |
| <button class="btn-tool pink" onclick="scrollToTop()">↑ Topo</button> | |
| <button class="btn-tool green" onclick="resetProgress()">🔄 Reset XP</button> | |
| </div> | |
| <!-- SECTION 1 --> | |
| <div class="section s1" id="s1"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">1</div> | |
| <div class="section-title">O que é o Doodles AI</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <p>O <strong>Doodles AI</strong> é um gerador de imagens baseado em <strong>Stable Diffusion</strong> com uma LoRA customizada treinada no estilo visual oficial da Doodles — cartoon flat 2D com outline, paleta pastel vibrante e personagens expressivos.</p> | |
| <div class="callout callout-info"> | |
| <strong>LoRA</strong> (Low-Rank Adaptation) é uma técnica de fine-tuning que ensina o modelo a gerar imagens dentro de um estilo específico sem precisar retreinar tudo do zero. | |
| </div> | |
| <h3>✦ O que o app consegue gerar</h3> | |
| <ul> | |
| <li>Personagens humanos e animais no estilo Doodles</li> | |
| <li>Cenários e backgrounds pastéis</li> | |
| <li>Objetos e produtos estilizados</li> | |
| <li>Imagens com texto (lettering)</li> | |
| <li>Conteúdo com meme/texto sobreposto</li> | |
| <li>Material para redes sociais (feed, stories, reels)</li> | |
| </ul> | |
| <h3>✦ O que o app NÃO faz bem</h3> | |
| <ul> | |
| <li>Rostos hiper-realistas</li> | |
| <li>Textos longos ou com acentuação complexa</li> | |
| <li>Estilos que fogem muito do universo Doodles</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- SECTION 2 --> | |
| <div class="section s2" id="s2"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">2</div> | |
| <div class="section-title">Interface do App</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Campo</th><th>Função</th></tr></thead> | |
| <tbody> | |
| <tr><td><strong>Estilo Base</strong></td><td>Define o "sabor" visual geral da geração</td></tr> | |
| <tr><td><strong>Modo</strong></td><td>Orienta o modelo para tipo de conteúdo</td></tr> | |
| <tr><td><strong>Base do Personagem</strong></td><td>Descrição fixa do personagem (opcional)</td></tr> | |
| <tr><td><strong>Sua Cena</strong></td><td>A cena/ação principal — onde você controla mais</td></tr> | |
| <tr><td><strong>Prompt Negativo</strong></td><td>O que você quer evitar na geração</td></tr> | |
| <tr><td><strong>Seed</strong></td><td>Número para repetir/variar resultados</td></tr> | |
| <tr><td><strong>Qualidade</strong></td><td>Rápido (6 steps) / Equilibrado (12) / Máximo (16)</td></tr> | |
| <tr><td><strong>Resolução</strong></td><td>Formato da imagem final</td></tr> | |
| <tr><td><strong>Efeito X</strong></td><td>Adiciona ruído/distorção artística</td></tr> | |
| <tr><td><strong>Texto Meme</strong></td><td>Texto sobreposto à imagem gerada</td></tr> | |
| <tr><td><strong>Watermark</strong></td><td>Slots para marca d'água personalizável</td></tr> | |
| </tbody> | |
| </table></div> | |
| <div class="callout callout-tip"> | |
| <strong>Dica:</strong> O campo <strong>Sua Cena</strong> é onde você gasta mais atenção. A Base do Personagem serve como ancora — mude apenas a Cena entre gerações da mesma série. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 3 --> | |
| <div class="section s3" id="s3"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">3</div> | |
| <div class="section-title">Estilos Base</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Estilo</th><th>Característica</th><th>Melhor para</th></tr></thead> | |
| <tbody> | |
| <tr><td>🎨 <strong>Doodles Bruto</strong></td><td>Traço mais solto, cores vibrantes, outline bold</td><td>Personagens, cenas dinâmicas</td></tr> | |
| <tr><td>✦ <strong>DOOD</strong></td><td>Mais refinado, backgrounds elaborados, cinematográfico</td><td>Artes finais, cenários</td></tr> | |
| <tr><td>🎮 <strong>Pixel ART</strong></td><td>Estética retrô 8-bit/16-bit com paleta Doodles</td><td>Games, nostalgia, conteúdo temático</td></tr> | |
| <tr><td>🖼️ <strong>Sticker Pack</strong></td><td>Fundo branco/transparente, traço clean</td><td>Figurinhas, elementos isolados</td></tr> | |
| <tr><td>🌌 <strong>Dark Mode</strong></td><td>Fundo escuro, neons, contraste alto</td><td>Night vibes, eventos, misterioso</td></tr> | |
| </tbody> | |
| </table></div> | |
| <div class="callout callout-warn"> | |
| <strong>Atenção:</strong> O estilo DOOD tende a gerar fundos mais elaborados mesmo em cenas simples. Para fundos limpos, prefira <strong>Doodles Bruto</strong> + termos como <code>simple background</code>. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 4 --> | |
| <div class="section s4" id="s4"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">4</div> | |
| <div class="section-title">Modos de Geração</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Modo</th><th>Função</th><th>Dica de uso</th></tr></thead> | |
| <tbody> | |
| <tr><td>👤 <strong>Personagens</strong></td><td>Foco em figuras humanas/animais</td><td>Use tokens chubby/slim</td></tr> | |
| <tr><td>🌄 <strong>Cenários</strong></td><td>Paisagens, interiores, ambientes</td><td>Add <code>no people</code> se quiser vazio</td></tr> | |
| <tr><td>📦 <strong>Objetos</strong></td><td>Produtos, itens isolados</td><td>Use <code>product shot, isolated</code></td></tr> | |
| <tr><td>✏️ <strong>Lettering</strong></td><td>Foco em texto ilustrado</td><td>Palavras curtas, sem acentos</td></tr> | |
| <tr><td>🎭 <strong>Misto</strong></td><td>Personagem + cenário + objeto</td><td>Máximo 2 elementos destaque</td></tr> | |
| </tbody> | |
| </table></div> | |
| </div> | |
| </div> | |
| <!-- SECTION 5 --> | |
| <div class="section s5" id="s5"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">5</div> | |
| <div class="section-title">Fórmula do Prompt</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>🔑 Estrutura completa do prompt final</h3> | |
| <pre>[reinforce do estilo] + [modo] + [base do personagem] + [cena] + [estilo base]</pre> | |
| <h3>🎯 Fórmula da Cena (o que você escreve)</h3> | |
| <pre>[personagem] + [cabelo] + [roupa com cor] + [pose/ação] + [enquadramento] + [fundo]</pre> | |
| <h3>✅ Exemplo prático</h3> | |
| <pre>a slim doodle woman with pink curly hair, | |
| wearing a mint green oversized hoodie and white wide-leg pants, | |
| sitting cross-legged holding a coffee cup, | |
| medium shot, soft lavender pastel background</pre> | |
| <h3>📌 Regras de ouro</h3> | |
| <ul> | |
| <li><strong>Sempre em inglês</strong></li> | |
| <li>Roupa sempre com cor especificada (ex: <code>dark navy jacket</code>)</li> | |
| <li>Fundo sempre no final da cena</li> | |
| <li>Máximo 2 objetos de destaque por cena</li> | |
| <li>Evite frases negativas dentro da cena — use o campo Negativo</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- SECTION 6 --> | |
| <div class="section s6" id="s6"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">6</div> | |
| <div class="section-title">Paleta Oficial Doodles</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <p>Paleta exata extraída do <strong>Doodles Field Guide v.01</strong>. Clique em uma cor para copiar o HEX!</p> | |
| <h3>Core Palette</h3> | |
| <div class="palette-grid"> | |
| <div class="swatch" onclick="copySwatch('#FFB3E6','Petal Pink')"> | |
| <div class="swatch-color" style="background:#FFB3E6"></div> | |
| <div class="swatch-info"><span class="swatch-name">Petal Pink</span><span class="swatch-hex">#FFB3E6</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#FFE780','Lemon Yellow')"> | |
| <div class="swatch-color" style="background:#FFE780"></div> | |
| <div class="swatch-info"><span class="swatch-name">Lemon Yellow</span><span class="swatch-hex">#FFE780</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#FFC897','Orange Sorbet')"> | |
| <div class="swatch-color" style="background:#FFC897"></div> | |
| <div class="swatch-info"><span class="swatch-name">Orange Sorbet</span><span class="swatch-hex">#FFC897</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#B3FFC7','Touch Grass')"> | |
| <div class="swatch-color" style="background:#B3FFC7"></div> | |
| <div class="swatch-info"><span class="swatch-name">Touch Grass</span><span class="swatch-hex">#B3FFC7</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#A1E9FF','Clear Skies')"> | |
| <div class="swatch-color" style="background:#A1E9FF"></div> | |
| <div class="swatch-info"><span class="swatch-name">Clear Skies</span><span class="swatch-hex">#A1E9FF</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#C5C5FF','Grape Jelly')"> | |
| <div class="swatch-color" style="background:#C5C5FF"></div> | |
| <div class="swatch-info"><span class="swatch-name">Grape Jelly</span><span class="swatch-hex">#C5C5FF</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#FFEAD2','Peach Puff')"> | |
| <div class="swatch-color" style="background:#FFEAD2"></div> | |
| <div class="swatch-info"><span class="swatch-name">Peach Puff</span><span class="swatch-hex">#FFEAD2</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#FFD0B8','Rosy Cheeks')"> | |
| <div class="swatch-color" style="background:#FFD0B8"></div> | |
| <div class="swatch-info"><span class="swatch-name">Rosy Cheeks</span><span class="swatch-hex">#FFD0B8</span></div> | |
| </div> | |
| <div class="swatch" onclick="copySwatch('#E8A68B','Caramel Cream')"> | |
| <div class="swatch-color" style="background:#E8A68B"></div> | |
| <div class="swatch-info"><span class="swatch-name">Caramel Cream</span><span class="swatch-hex">#E8A68B</span></div> | |
| </div> | |
| </div> | |
| <h3>Background Colors</h3> | |
| <div class="palette-grid"> | |
| <div class="swatch" onclick="copySwatch('#FFB3E6','Petal Pink BG')"><div class="swatch-color" style="background:#FFB3E6"></div><div class="swatch-info"><span class="swatch-name">Petal Pink BG</span><span class="swatch-hex">#FFB3E6</span></div></div> | |
| <div class="swatch" onclick="copySwatch('#FFEA8F','Lemon Yellow BG')"><div class="swatch-color" style="background:#FFEA8F"></div><div class="swatch-info"><span class="swatch-name">Lemon Yellow BG</span><span class="swatch-hex">#FFEA8F</span></div></div> | |
| <div class="swatch" onclick="copySwatch('#FFC897','Orange Sorbet BG')"><div class="swatch-color" style="background:#FFC897"></div><div class="swatch-info"><span class="swatch-name">Orange Sorbet BG</span><span class="swatch-hex">#FFC897</span></div></div> | |
| <div class="swatch" onclick="copySwatch('#83FFC1','Touch Grass BG')"><div class="swatch-color" style="background:#83FFC1"></div><div class="swatch-info"><span class="swatch-name">Touch Grass BG</span><span class="swatch-hex">#83FFC1</span></div></div> | |
| <div class="swatch" onclick="copySwatch('#A1E9FF','Clear Skies BG')"><div class="swatch-color" style="background:#A1E9FF"></div><div class="swatch-info"><span class="swatch-name">Clear Skies BG</span><span class="swatch-hex">#A1E9FF</span></div></div> | |
| <div class="swatch" onclick="copySwatch('#C5C5FF','Grape Jelly BG')"><div class="swatch-color" style="background:#C5C5FF"></div><div class="swatch-info"><span class="swatch-name">Grape Jelly BG</span><span class="swatch-hex">#C5C5FF</span></div></div> | |
| </div> | |
| <div class="callout callout-purple"> | |
| <strong>Shadow Theory:</strong> Nunca use preto puro para sombras. As sombras devem ser versões <em>mais saturadas</em> da cor base. Ao ajustar sombras, mova o seletor de cor horizontalmente (saturação), nunca verticalmente (escurecimento). | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 7 --> | |
| <div class="section s7" id="s7"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">7</div> | |
| <div class="section-title">Tokens de Personagem</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Corpo</h3> | |
| <div style="margin-bottom:0.7rem"> | |
| <span class="badge badge-pink">chubby doodle</span> | |
| <span class="badge badge-blue">slim doodle</span> | |
| <span class="badge badge-green">medium doodle</span> | |
| </div> | |
| <h3>Animal antropomórfico</h3> | |
| <pre>chubby/slim anthropomorphic [animal] doodle</pre> | |
| <h3>Gênero</h3> | |
| <div style="margin-bottom:0.7rem"> | |
| <span class="badge badge-pink">doodle man</span> | |
| <span class="badge badge-purple">doodle woman</span> | |
| <span class="badge badge-yellow">doodle person</span> | |
| </div> | |
| <h3>Modificadores de força</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Token</th><th>Efeito</th></tr></thead> | |
| <tbody> | |
| <tr><td><code>very chubby round-bodied</code></td><td>Reforça corpo gordo quando o modelo dilui</td></tr> | |
| <tr><td><code>very slim thin-bodied</code></td><td>Reforça corpo magro</td></tr> | |
| <tr><td><code>chibi</code></td><td>Proporções infantis, cabeça grande</td></tr> | |
| <tr><td><code>cute</code></td><td>Amplifica traços fofinhos</td></tr> | |
| </tbody> | |
| </table></div> | |
| </div> | |
| </div> | |
| <!-- SECTION 8 --> | |
| <div class="section s8" id="s8"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">8</div> | |
| <div class="section-title">Roupas & Acessórios</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <div class="callout callout-warn"> | |
| <strong>Regra absoluta:</strong> Roupa SEMPRE com cor. Nunca escreva apenas "jacket" — escreva "dark navy jacket" ou "mint green oversized hoodie". | |
| </div> | |
| <h3>Paleta de cores para roupas nos prompts</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Nome no prompt</th><th>Corresponde a</th></tr></thead> | |
| <tbody> | |
| <tr><td><code>soft pink</code></td><td>Petal Pink #FFB3E6</td></tr> | |
| <tr><td><code>pastel yellow</code></td><td>Lemon Yellow #FFE780</td></tr> | |
| <tr><td><code>peach orange</code></td><td>Orange Sorbet #FFC897</td></tr> | |
| <tr><td><code>mint green</code></td><td>Touch Grass #B3FFC7</td></tr> | |
| <tr><td><code>sky blue / baby blue</code></td><td>Clear Skies #A1E9FF</td></tr> | |
| <tr><td><code>lavender purple</code></td><td>Grape Jelly #C5C5FF</td></tr> | |
| <tr><td><code>teal / dark teal</code></td><td>Verde escuro para contraste</td></tr> | |
| <tr><td><code>dark navy</code></td><td>Escuro sem ser preto puro</td></tr> | |
| </tbody> | |
| </table></div> | |
| <h3>Peças frequentes no estilo Doodles</h3> | |
| <ul> | |
| <li>Oversized hoodie / turtleneck sweater</li> | |
| <li>Wide-leg pants / baggy jeans</li> | |
| <li>Track jacket (estilo adidas)</li> | |
| <li>Crop top / sports bra</li> | |
| <li>Bucket hat / baseball cap</li> | |
| <li>Chunky sneakers / platform shoes</li> | |
| <li>Statement jewelry (correntes, brincos grandes)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- SECTION 9 --> | |
| <div class="section s9" id="s9"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">9</div> | |
| <div class="section-title">Poses & Enquadramentos</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Poses</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Token</th><th>Efeito visual</th></tr></thead> | |
| <tbody> | |
| <tr><td><code>standing relaxed</code></td><td>Em pé, pose cool</td></tr> | |
| <tr><td><code>sitting cross-legged</code></td><td>Sentado no chão</td></tr> | |
| <tr><td><code>jumping mid-air</code></td><td>No ar, dinâmico</td></tr> | |
| <tr><td><code>running</code></td><td>Correndo, membros esticados</td></tr> | |
| <tr><td><code>lying down</code></td><td>Deitado, relaxado</td></tr> | |
| <tr><td><code>waving</code></td><td>Acenando para câmera</td></tr> | |
| <tr><td><code>pointing at camera</code></td><td>Aponta para quem olha</td></tr> | |
| <tr><td><code>peace sign</code></td><td>V com os dedos</td></tr> | |
| <tr><td><code>arms crossed</code></td><td>Braços cruzados, atitude</td></tr> | |
| <tr><td><code>floating in mid-air</code></td><td>Flutuando com gravidade zero</td></tr> | |
| </tbody> | |
| </table></div> | |
| <h3>Enquadramentos</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Token</th><th>Câmera</th></tr></thead> | |
| <tbody> | |
| <tr><td><code>close-up portrait</code></td><td>Rosto/busto</td></tr> | |
| <tr><td><code>medium shot</code></td><td>Cintura para cima</td></tr> | |
| <tr><td><code>full body shot</code></td><td>Corpo inteiro</td></tr> | |
| <tr><td><code>wide establishing shot</code></td><td>Plano geral, ambiente</td></tr> | |
| <tr><td><code>from above / bird's eye view</code></td><td>Câmera de cima</td></tr> | |
| <tr><td><code>from below / worm's eye view</code></td><td>Câmera de baixo</td></tr> | |
| <tr><td><code>direct front view</code></td><td>Frontal direto (bom para placa)</td></tr> | |
| <tr><td><code>3/4 profile</code></td><td>Vista lateral em 3/4</td></tr> | |
| </tbody> | |
| </table></div> | |
| </div> | |
| </div> | |
| <!-- SECTION 10 --> | |
| <div class="section s10" id="s10"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">10</div> | |
| <div class="section-title">Fundos & Cenários</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Fundos simples (para personagens/produtos)</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Token</th><th>Visual</th></tr></thead> | |
| <tbody> | |
| <tr><td><code>soft pink pastel background</code></td><td>Petal Pink sólido/suave</td></tr> | |
| <tr><td><code>lavender purple background</code></td><td>Grape Jelly</td></tr> | |
| <tr><td><code>mint green background</code></td><td>Touch Grass</td></tr> | |
| <tr><td><code>sky blue background</code></td><td>Clear Skies</td></tr> | |
| <tr><td><code>clean white background</code></td><td>Para stickers</td></tr> | |
| <tr><td><code>gradient pastel background</code></td><td>Degradê suave entre cores</td></tr> | |
| <tr><td><code>simple pastel shapes background</code></td><td>Formas geométricas minimalistas</td></tr> | |
| </tbody> | |
| </table></div> | |
| <h3>Cenários elaborados (para modo DOOD)</h3> | |
| <ul> | |
| <li><code>colorful pastel landscape with rolling hills and rainbows</code></li> | |
| <li><code>retro cityscape at golden hour</code></li> | |
| <li><code>cozy bedroom with pastel furniture and fairy lights</code></li> | |
| <li><code>outer space with colorful planets and stars</code></li> | |
| <li><code>tropical beach at sunset with palm trees</code></li> | |
| <li><code>neon-lit city street at night</code></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- SECTION 11 --> | |
| <div class="section s11" id="s11"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">11</div> | |
| <div class="section-title">Texto Meme</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Posições disponíveis</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Posição</th><th>Onde aparece</th><th>Usar quando</th></tr></thead> | |
| <tbody> | |
| <tr><td><strong>Topo</strong></td><td>Borda superior</td><td>Contexto/setup</td></tr> | |
| <tr><td><strong>Base</strong></td><td>Borda inferior</td><td>Punch line, reação</td></tr> | |
| <tr><td><strong>Placa</strong></td><td>Dentro da placa branca na imagem</td><td>Quando gerar placa na cena</td></tr> | |
| <tr><td><strong>Tarja</strong></td><td>Faixa estilo GC/TV</td><td>Estética de noticiário</td></tr> | |
| <tr><td><strong>Flutuante</strong></td><td>Centralizado no meio</td><td>Arte/lettering</td></tr> | |
| </tbody> | |
| </table></div> | |
| <h3>Fontes disponíveis</h3> | |
| <div style="margin-bottom:0.7rem"> | |
| <span class="badge badge-yellow">Impact</span> | |
| <span class="badge badge-pink">Bebas Neue</span> | |
| <span class="badge badge-blue">Bangers</span> | |
| <span class="badge badge-green">Comic Sans</span> | |
| <span class="badge badge-purple">Arial Black</span> | |
| </div> | |
| <h3>Setup de cena para Placa</h3> | |
| <pre>a slim doodle man with blue hair, wearing a dark teal hoodie and black pants, | |
| holding a blank white sign with both hands at chest level, | |
| direct front view, colorful pastel background</pre> | |
| <h3>Setup de cena para GC/Tarja</h3> | |
| <pre>a [personagem] with [cabelo escuro], wearing [roupa ESCURA — sem branco], | |
| [expressão dramática] looking at camera, [fundo saturado escuro], | |
| white horizontal banner bar at the bottom of the image, no white in scene</pre> | |
| <div class="callout callout-warn"> | |
| <strong>Por quê sem branco na cena?</strong> O detector de placa procura regiões de alta luminância e baixa saturação. Branco na roupa ou fundo pode confundir o detector. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 12 --> | |
| <div class="section s12" id="s12"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">12</div> | |
| <div class="section-title">Efeito X</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <p>O <strong>Efeito X</strong> adiciona uma camada de ruído e distorção artística sobre a imagem gerada, criando uma estética mais suja, analógica ou glitchy.</p> | |
| <h3>Quando ativar</h3> | |
| <ul> | |
| <li>Conteúdo com vibe lo-fi, vintage ou underground</li> | |
| <li>Posts com tema de "erro", "glitch" ou tech-art</li> | |
| <li>Quando o resultado ficou bom mas parece limpo demais</li> | |
| </ul> | |
| <h3>Quando desativar</h3> | |
| <ul> | |
| <li>Product shots — o ruído interfere na leitura do produto</li> | |
| <li>GC/Tarja — o efeito pode atrapalhar a detecção do banner</li> | |
| <li>Stickers — precisa de bordas limpas</li> | |
| <li>Quando o texto meme é a prioridade visual</li> | |
| </ul> | |
| <div class="callout callout-info"> | |
| Combine Efeito X + Pixel ART para um resultado de jogo retro degradado — estética muito específica e marcante. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 13 --> | |
| <div class="section s13" id="s13"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">13</div> | |
| <div class="section-title">Resoluções</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Resolução</th><th>Formato</th><th>Uso ideal</th></tr></thead> | |
| <tbody> | |
| <tr><td>📷 <strong>Feed IG</strong></td><td>1080 × 1080</td><td>Posts quadrados</td></tr> | |
| <tr><td>📱 <strong>Stories/Reels</strong></td><td>1080 × 1920</td><td>Vertical 9:16</td></tr> | |
| <tr><td>🖥️ <strong>Wallpaper</strong></td><td>1920 × 1080</td><td>Desktop/YouTube</td></tr> | |
| <tr><td>🐦 <strong>Twitter/X</strong></td><td>1200 × 675</td><td>Post horizontal</td></tr> | |
| <tr><td>📌 <strong>Pinterest</strong></td><td>1000 × 1500</td><td>Pin vertical</td></tr> | |
| <tr><td>🎴 <strong>Card</strong></td><td>800 × 1200</td><td>Formato card geral</td></tr> | |
| </tbody> | |
| </table></div> | |
| <div class="callout callout-tip"> | |
| <strong>Performance:</strong> Resoluções maiores + qualidade Máximo = geração mais lenta. Use <strong>Rápido</strong> para testes de conceito e <strong>Máximo</strong> apenas na arte final. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 14 --> | |
| <div class="section s14" id="s14"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">14</div> | |
| <div class="section-title">Prompt Negativo</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Negativo padrão recomendado</h3> | |
| <pre>ugly, deformed, blurry, low quality, watermark, text, signature, | |
| extra limbs, missing limbs, bad anatomy, bad proportions, | |
| realistic, photorealistic, 3d render, hyper-detailed</pre> | |
| <h3>Para personagens</h3> | |
| <pre>ugly face, crossed eyes, bad hands, extra fingers, missing fingers, | |
| deformed body, flat design, simple shapes only</pre> | |
| <h3>Para product shots</h3> | |
| <pre>people, characters, busy background, noise, grain, blur, artifacts</pre> | |
| <h3>Para GC / Placa</h3> | |
| <pre>white clothing, white background, bright elements, high-key lighting, | |
| extra text, blurry text, deformed letters</pre> | |
| <h3>Para lettering</h3> | |
| <pre>blurry text, deformed letters, misspelled, extra characters, | |
| unclear text, distorted font</pre> | |
| </div> | |
| </div> | |
| <!-- SECTION 15 --> | |
| <div class="section s15" id="s15"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">15</div> | |
| <div class="section-title">Consistência de Personagens</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Estratégia recomendada</h3> | |
| <ol> | |
| <li>Cole a descrição completa do personagem no campo <strong>Base do Personagem</strong> — <strong>nunca mexa</strong></li> | |
| <li>Varie apenas o campo <strong>Sua Cena</strong> entre gerações</li> | |
| <li>Fixe a <strong>seed</strong> para máxima consistência visual</li> | |
| <li>Use sempre o mesmo <strong>Estilo Base</strong> na série</li> | |
| </ol> | |
| <h3>Bases prontas para uso</h3> | |
| <p><strong>HAP + MELLO:</strong></p> | |
| <pre>HAP chibi boy short lavender hair blue turtleneck sweater pink wide-leg pants blue sneakers, | |
| and MELLO small white fluffy cat big round eyes long curly tail</pre> | |
| <p><strong>Captain Stoke:</strong></p> | |
| <pre>Captain Stoke cute chibi skeleton purple eye sockets white captain hat blue band | |
| yellow button blue round shoes yellow accent bones on ribcage and one leg</pre> | |
| <p><strong>Hue:</strong></p> | |
| <pre>Hue chibi alien large round mint green head two small round antennae big black oval eyes | |
| mint green skin white turtleneck blue diamond on chest dark gray wide-leg pants | |
| white sneakers purple wristwatch left wrist</pre> | |
| <h3>Estilo recomendado por personagem</h3> | |
| <div class="table-wrap"><table> | |
| <thead><tr><th>Personagem</th><th>Estilo</th></tr></thead> | |
| <tbody> | |
| <tr><td>HAP</td><td>🎨 Doodles Bruto</td></tr> | |
| <tr><td>MELLO</td><td>🎨 Doodles Bruto</td></tr> | |
| <tr><td>Hue</td><td>🎨 Doodles Bruto</td></tr> | |
| <tr><td>Captain Stoke</td><td>✦ DOOD</td></tr> | |
| <tr><td>Deysi</td><td>✦ DOOD</td></tr> | |
| </tbody> | |
| </table></div> | |
| </div> | |
| </div> | |
| <!-- SECTION 16 --> | |
| <div class="section s16" id="s16"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">16</div> | |
| <div class="section-title">Sweet Spots por Tipo de Conteúdo</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Personagem segurando produto</h3> | |
| <pre>a [chubby/slim] doodle [man/woman] with [cabelo], | |
| wearing [roupa colorida], | |
| holding [descrição do produto] [posição], | |
| [enquadramento], [fundo pastel]</pre> | |
| <h3>Animal antropomórfico</h3> | |
| <pre>a [chubby/slim] anthropomorphic [animal] doodle | |
| wearing [roupa], [ação], [expressão], [fundo pastel]</pre> | |
| <h3>Produto isolado (product shot)</h3> | |
| <pre>[descrição detalhada do produto], | |
| floating on [fundo pastel], product shot, soft shadow below, no people</pre> | |
| <h3>Cenário sem personagem</h3> | |
| <pre>a [ambiente detalhado], [elementos específicos], | |
| [iluminação], no people, wide establishing shot</pre> | |
| <h3>Lettering</h3> | |
| <pre>bold [estilo] lettering that says [TEXTO EM CAPS], | |
| [efeito visual], isolated on [fundo escuro/branco]</pre> | |
| <h3>GC / Tarja estilo telejornal</h3> | |
| <pre>a [personagem] with [cabelo escuro], wearing [roupa ESCURA — sem branco], | |
| [expressão dramática] looking at camera, [fundo saturado escuro], | |
| white horizontal banner bar at the bottom of the image, no white in scene</pre> | |
| </div> | |
| </div> | |
| <!-- SECTION 17 --> | |
| <div class="section s17" id="s17"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">17</div> | |
| <div class="section-title">Combinações Avançadas</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>Modo Placa + Personagem</h3> | |
| <pre>Estilo: 🎨 Doodles Bruto | |
| Modo: 👤 Personagens | |
| Cena: a slim doodle man with blue hair, wearing a dark teal hoodie and black pants, | |
| holding a blank white sign with both hands at chest level, | |
| direct front view, colorful pastel background | |
| Texto Meme Posição: Placa</pre> | |
| <h3>Pixel ART + Cenário + Lettering</h3> | |
| <pre>Estilo: 🎮 Pixel ART | |
| Modo: 🌄 Cenários | |
| Cena: a retro pixel art city skyline at sunset, orange and purple sky, | |
| tall buildings with lit windows, no people, wide establishing shot | |
| Texto Meme Posição: Flutuante | |
| Fonte: Bangers</pre> | |
| <h3>Efeito X + Feed + Produto</h3> | |
| <pre>Resolução: 📷 Feed IG 1080×1080 | |
| Efeito X: ✅ Ativado | |
| Modo: 📦 Objetos | |
| WM: Slot 1 em Inf. Dir.</pre> | |
| <h3>GC / Tarja + Texto Meme Base</h3> | |
| <ol> | |
| <li>Gerar com fundo escuro + <code>white horizontal banner bar at the bottom of the image</code></li> | |
| <li>Texto Meme → <strong>Posição: Placa</strong></li> | |
| <li>Fonte: <strong>Impact</strong> ou <strong>Bebas Neue</strong></li> | |
| <li>O detector identifica a faixa branca e encaixa o texto dentro dela</li> | |
| </ol> | |
| <h3>Série de Personagem Consistente</h3> | |
| <pre>Base do Personagem: [descrição fixa do personagem] | |
| Seed: [fixar o mesmo número] | |
| Estilo: [mesmo estilo em todas as gerações] | |
| Sua Cena: [variar a pose/ação]</pre> | |
| </div> | |
| </div> | |
| <!-- SECTION 18 --> | |
| <div class="section s18" id="s18"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">18</div> | |
| <div class="section-title">Template para IA</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <p>Cole no <strong>ChatGPT</strong>, <strong>Claude</strong> ou qualquer IA para gerar prompts automaticamente no formato correto:</p> | |
| <pre>Você é um especialista em criar prompts para o DOODLES AI, gerador de imagens | |
| com LoRA customizada em estilo cartoon flat 2D, traço com outline, paleta pastel | |
| vibrante, personagens expressivos estilo Doodles NFT. | |
| SISTEMA DE PROMPT: | |
| O app tem dois campos: | |
| 1. "Base do Personagem" — descrição fixa do personagem (opcional) | |
| 2. "Sua Cena" — ação/pose/ambiente que varia | |
| O prompt final é montado assim: | |
| [reinforce do estilo] + [modo] + [base do personagem] + [cena] + [estilo base] | |
| FÓRMULA DA CENA: | |
| [personagem] + [cabelo] + [roupa com cor] + [pose/ação] + [enquadramento] + [fundo] | |
| TOKENS DE PERSONAGEM: | |
| - Gordo: "chubby doodle" | |
| - Magro: "slim doodle" | |
| - Animal: "chubby/slim anthropomorphic [animal] doodle" | |
| REGRAS OBRIGATÓRIAS: | |
| 1. Sempre em inglês | |
| 2. Roupa SEMPRE com cor (ex: "dark navy jacket") | |
| 3. Fundo SEMPRE no final | |
| 4. Máximo 2 objetos destacados por cena | |
| 5. Para GC/Tarja: fundo escuro + roupa colorida + SEM branco | |
| 6. Para Placa: placa branca + fundo colorido + roupa sem branco</pre> | |
| </div> | |
| </div> | |
| <!-- SECTION 19 --> | |
| <div class="section s19" id="s19"> | |
| <div class="section-header" onclick="toggle(this)"> | |
| <div class="section-num">19</div> | |
| <div class="section-title">Troubleshooting</div> | |
| <div class="section-badge">LOCKED</div> | |
| <div class="section-toggle">▼</div> | |
| </div> | |
| <div class="section-body"> | |
| <h3>❌ O texto meme não aparece na placa</h3> | |
| <div class="callout callout-warn"> | |
| <strong>Causa:</strong> A arte tem elementos brancos além da placa (roupa branca, fundo claro).<br> | |
| <strong>Solução:</strong> Regere com roupas coloridas/escuras e fundo saturado. Adicione <code>no white clothing</code> ao negativo. | |
| </div> | |
| <h3>❌ O personagem saiu diferente do esperado</h3> | |
| <div class="callout callout-warn"> | |
| <strong>Causa:</strong> O token foi diluído por outros tokens muito descritivos.<br> | |
| <strong>Solução:</strong> Reforce no início com <code>a very chubby round-bodied doodle man...</code> | |
| </div> | |
| <h3>❌ O lettering saiu errado</h3> | |
| <ul> | |
| <li>Use palavras curtas (1–2 palavras)</li> | |
| <li>Evite acentos: <code>ACAI</code> em vez de <code>AÇAÍ</code></li> | |
| <li>Adicione ao negativo: <code>blurry text, deformed letters, misspelled</code></li> | |
| <li>Gere múltiplas vezes com seeds diferentes</li> | |
| </ul> | |
| <h3>❌ A imagem ficou com fundo muito carregado</h3> | |
| <div class="callout callout-info"> | |
| Adicione ao prompt: <code>clean background, minimal background, simple pastel shapes</code> — ou use <strong>🎨 Doodles Bruto</strong>. | |
| </div> | |
| <h3>❌ O produto não apareceu ou saiu diferente</h3> | |
| <ul> | |
| <li>Use o modo 📦 Objetos para focar no produto</li> | |
| <li>Descreva o produto no <strong>início</strong> da cena</li> | |
| <li>Use <code>product shot, centered, isolated</code> para reforçar</li> | |
| </ul> | |
| <h3>❌ A geração está lenta</h3> | |
| <div class="callout callout-tip"> | |
| Use <strong>Rápido</strong> (6 steps) para testes e <strong>Equilibrado</strong> (12 steps) para uso geral. Reserve <strong>Máximo</strong> (16 steps) para artes finais. | |
| </div> | |
| <h3>❌ A consistência do personagem está quebrando</h3> | |
| <ul> | |
| <li>Use o campo <strong>Base do Personagem</strong> e mantenha-o fixo</li> | |
| <li>Fixe a <strong>seed</strong> entre gerações da mesma série</li> | |
| <li>Mantenha o mesmo <strong>Estilo Base</strong> em toda a série</li> | |
| <li>Não altere a ordem ou redação da Base do Personagem</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div><!-- /wrapper --> | |
| <!-- FOOTER --> | |
| <div class="rainbow-bar"></div> | |
| <footer> | |
| Manual DOODLES AI · Autor: <strong>Silas G.</strong> · Paleta oficial Field Guide v.01 · 2025 | |
| </footer> | |
| <!-- SCROLL TO TOP --> | |
| <div id="scrolltop" onclick="scrollToTop()">↑</div> | |
| <script> | |
| // ══════════════════════════════ | |
| // STATE | |
| // ══════════════════════════════ | |
| let xp = 0; | |
| let sectionsRead = 0; | |
| let promptsCopied = 0; | |
| const ACHIEVEMENTS = [ | |
| { id:'first_open', icon:'🔓', name:'Primeira Abertura', desc:'Abriu a primeira seção', xpNeeded: 0, condition: () => sectionsRead >= 1 }, | |
| { id:'explorer', icon:'🗺️', name:'Explorador', desc:'Abriu 5 seções', xpNeeded: 0, condition: () => sectionsRead >= 5 }, | |
| { id:'master', icon:'🧠', name:'Mestre do Manual', desc:'Abriu todas as 19 seções', xpNeeded: 0, condition: () => sectionsRead >= 19 }, | |
| { id:'copy_first', icon:'📋', name:'Primeiro Prompt', desc:'Copiou o primeiro prompt', xpNeeded: 0, condition: () => promptsCopied >= 1 }, | |
| { id:'copy_pro', icon:'🚀', name:'Prompt Pro', desc:'Copiou 5 prompts', xpNeeded: 0, condition: () => promptsCopied >= 5 }, | |
| { id:'xp_100', icon:'⚡', name:'Carregando...', desc:'Chegou a 100 XP', xpNeeded: 100, condition: () => xp >= 100 }, | |
| { id:'xp_500', icon:'💎', name:'Diamond Doodler', desc:'Chegou a 500 XP', xpNeeded: 500, condition: () => xp >= 500 }, | |
| ]; | |
| const earned = new Set(); | |
| function addXP(amount) { | |
| xp += amount; | |
| document.getElementById('statXP').textContent = xp; | |
| document.getElementById('statXP').classList.add('counting'); | |
| setTimeout(() => document.getElementById('statXP').classList.remove('counting'), 300); | |
| // Level = floor(xp/50)+1 | |
| const level = Math.floor(xp / 50) + 1; | |
| document.getElementById('levelNum').textContent = level; | |
| // XP bar (cap at 100% for visual) | |
| const pct = Math.min(100, (xp % 50) / 50 * 100); | |
| document.getElementById('xpBar').style.width = pct + '%'; | |
| checkAchievements(); | |
| } | |
| function checkAchievements() { | |
| ACHIEVEMENTS.forEach(a => { | |
| if (!earned.has(a.id) && a.condition()) { | |
| earned.add(a.id); | |
| showAchievement(a.icon + ' ' + a.name, a.desc); | |
| burst(window.innerWidth / 2, 80); | |
| } | |
| }); | |
| } | |
| // ══════════════════════════════ | |
| // SECTION TOGGLE | |
| // ══════════════════════════════ | |
| function toggle(header) { | |
| const section = header.parentElement; | |
| const wasOpen = section.classList.contains('open'); | |
| section.classList.toggle('open'); | |
| const badge = header.querySelector('.section-badge'); | |
| if (!wasOpen) { | |
| // Opening | |
| section.classList.add('just-opened'); | |
| setTimeout(() => section.classList.remove('just-opened'), 700); | |
| if (!section.classList.contains('read')) { | |
| section.classList.add('read'); | |
| badge.textContent = 'LIDO ✓'; | |
| sectionsRead++; | |
| document.getElementById('statRead').textContent = sectionsRead; | |
| document.getElementById('statRead').classList.add('counting'); | |
| setTimeout(() => document.getElementById('statRead').classList.remove('counting'), 300); | |
| addXP(10); | |
| showToast('+10 XP 🎉'); | |
| } | |
| } | |
| updateScrollDots(); | |
| } | |
| function toggleAll(open) { | |
| document.querySelectorAll('.section').forEach(s => { | |
| const badge = s.querySelector('.section-badge'); | |
| if (open) { | |
| s.classList.add('open'); | |
| if (!s.classList.contains('read')) { | |
| s.classList.add('read'); | |
| badge.textContent = 'LIDO ✓'; | |
| sectionsRead++; | |
| addXP(10); | |
| } | |
| } else { | |
| s.classList.remove('open'); | |
| } | |
| }); | |
| document.getElementById('statRead').textContent = sectionsRead; | |
| updateScrollDots(); | |
| } | |
| // ══════════════════════════════ | |
| // SCROLL | |
| // ══════════════════════════════ | |
| function scrollToTop() { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| window.addEventListener('scroll', () => { | |
| const btn = document.getElementById('scrolltop'); | |
| btn.classList.toggle('visible', window.scrollY > 300); | |
| updateScrollDots(); | |
| }, { passive: true }); | |
| // ══════════════════════════════ | |
| // SCROLL DOTS | |
| // ══════════════════════════════ | |
| function buildScrollDots() { | |
| const track = document.getElementById('scrollTrack'); | |
| const sections = document.querySelectorAll('.section'); | |
| sections.forEach((s, i) => { | |
| const dot = document.createElement('div'); | |
| dot.className = 'scroll-dot'; | |
| dot.title = 'Seção ' + (i+1); | |
| dot.onclick = () => s.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| track.appendChild(dot); | |
| }); | |
| } | |
| function updateScrollDots() { | |
| const dots = document.querySelectorAll('.scroll-dot'); | |
| const sections = document.querySelectorAll('.section'); | |
| const scrollY = window.scrollY + window.innerHeight / 2; | |
| sections.forEach((s, i) => { | |
| const rect = s.getBoundingClientRect(); | |
| const top = rect.top + window.scrollY; | |
| dots[i].classList.toggle('active', scrollY >= top && scrollY < top + s.offsetHeight); | |
| }); | |
| } | |
| // ══════════════════════════════ | |
| // COPY PRE BLOCKS | |
| // ══════════════════════════════ | |
| document.querySelectorAll('pre').forEach(pre => { | |
| pre.title = 'Toque para copiar'; | |
| pre.addEventListener('click', () => { | |
| if (navigator.clipboard) { | |
| navigator.clipboard.writeText(pre.textContent.trim()).then(() => { | |
| pre.classList.add('copied'); | |
| setTimeout(() => pre.classList.remove('copied'), 1200); | |
| promptsCopied++; | |
| document.getElementById('statCopied').textContent = promptsCopied; | |
| document.getElementById('statCopied').classList.add('counting'); | |
| setTimeout(() => document.getElementById('statCopied').classList.remove('counting'), 300); | |
| addXP(25); | |
| showToast('+25 XP 📋 Prompt copiado!'); | |
| burst(pre.getBoundingClientRect().left + pre.offsetWidth/2, | |
| pre.getBoundingClientRect().top + pre.offsetHeight/2); | |
| checkAchievements(); | |
| }); | |
| } | |
| }); | |
| }); | |
| // ══════════════════════════════ | |
| // SWATCH COPY | |
| // ══════════════════════════════ | |
| function copySwatch(hex, name) { | |
| if (navigator.clipboard) { | |
| navigator.clipboard.writeText(hex).then(() => { | |
| showToast('🎨 ' + name + ' copiado: ' + hex); | |
| addXP(5); | |
| }); | |
| } | |
| } | |
| // ══════════════════════════════ | |
| // TOAST | |
| // ══════════════════════════════ | |
| let toastTimer; | |
| function showToast(msg) { | |
| const t = document.getElementById('toast'); | |
| t.textContent = msg; | |
| t.classList.add('show'); | |
| clearTimeout(toastTimer); | |
| toastTimer = setTimeout(() => t.classList.remove('show'), 2000); | |
| } | |
| // ══════════════════════════════ | |
| // ACHIEVEMENT POPUP | |
| // ══════════════════════════════ | |
| let achTimer; | |
| function showAchievement(name, desc) { | |
| const pop = document.getElementById('achievement'); | |
| document.getElementById('achievementName').textContent = name; | |
| document.getElementById('achievementDesc').textContent = desc; | |
| pop.classList.add('show'); | |
| clearTimeout(achTimer); | |
| achTimer = setTimeout(() => pop.classList.remove('show'), 3500); | |
| } | |
| // ══════════════════════════════ | |
| // CONFETTI BURST | |
| // ══════════════════════════════ | |
| const colors = ['#FFB3E6','#FFE780','#FFC897','#B3FFC7','#A1E9FF','#C5C5FF']; | |
| function burst(cx, cy) { | |
| for (let i = 0; i < 18; i++) { | |
| const el = document.createElement('div'); | |
| el.className = 'confetti-piece'; | |
| el.style.cssText = ` | |
| left: ${cx + (Math.random()-0.5)*60}px; | |
| top: ${cy}px; | |
| background: ${colors[Math.floor(Math.random()*colors.length)]}; | |
| border-radius: ${Math.random() > 0.5 ? '50%' : '2px'}; | |
| animation-duration: ${0.8 + Math.random()*1}s; | |
| width: ${6+Math.random()*8}px; | |
| height: ${6+Math.random()*8}px; | |
| `; | |
| document.body.appendChild(el); | |
| setTimeout(() => el.remove(), 2000); | |
| } | |
| } | |
| // ══════════════════════════════ | |
| // PARTICLES CANVAS | |
| // ══════════════════════════════ | |
| (function() { | |
| const canvas = document.getElementById('particles-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let W, H; | |
| const particles = []; | |
| const EMOJIS = ['✦','🌈','⭐','🎨','✨','💫','🌸','🎮']; | |
| function resize() { | |
| W = canvas.width = window.innerWidth; | |
| H = canvas.height = window.innerHeight; | |
| } | |
| resize(); | |
| window.addEventListener('resize', resize); | |
| for (let i = 0; i < 22; i++) { | |
| particles.push({ | |
| x: Math.random() * window.innerWidth, | |
| y: Math.random() * window.innerHeight, | |
| vy: -0.3 - Math.random() * 0.5, | |
| vx: (Math.random()-0.5) * 0.3, | |
| size: 10 + Math.random() * 14, | |
| alpha: 0.04 + Math.random() * 0.08, | |
| emoji: EMOJIS[Math.floor(Math.random()*EMOJIS.length)], | |
| rot: Math.random() * Math.PI * 2, | |
| rotV: (Math.random()-0.5)*0.01 | |
| }); | |
| } | |
| function draw() { | |
| ctx.clearRect(0, 0, W, H); | |
| particles.forEach(p => { | |
| ctx.save(); | |
| ctx.globalAlpha = p.alpha; | |
| ctx.font = p.size + 'px serif'; | |
| ctx.translate(p.x, p.y); | |
| ctx.rotate(p.rot); | |
| ctx.fillText(p.emoji, -p.size/2, p.size/2); | |
| ctx.restore(); | |
| p.x += p.vx; | |
| p.y += p.vy; | |
| p.rot += p.rotV; | |
| if (p.y < -p.size*2) { | |
| p.y = H + p.size; | |
| p.x = Math.random() * W; | |
| } | |
| }); | |
| requestAnimationFrame(draw); | |
| } | |
| draw(); | |
| })(); | |
| // ══════════════════════════════ | |
| // HEADER FLOATERS | |
| // ══════════════════════════════ | |
| (function() { | |
| const container = document.getElementById('headerFloaters'); | |
| const emojis = ['🎨','✨','🌈','⭐','💫','🎮','🖌️','🌸']; | |
| for (let i = 0; i < 12; i++) { | |
| const el = document.createElement('div'); | |
| el.className = 'header-floater'; | |
| el.textContent = emojis[Math.floor(Math.random()*emojis.length)]; | |
| el.style.left = (Math.random()*100) + '%'; | |
| el.style.animationDuration = (4 + Math.random()*5) + 's'; | |
| el.style.animationDelay = (Math.random()*6) + 's'; | |
| el.style.fontSize = (1 + Math.random()*1.5) + 'rem'; | |
| container.appendChild(el); | |
| } | |
| })(); | |
| // ══════════════════════════════ | |
| // RESET | |
| // ══════════════════════════════ | |
| function resetProgress() { | |
| xp = 0; sectionsRead = 0; promptsCopied = 0; | |
| earned.clear(); | |
| document.getElementById('statXP').textContent = 0; | |
| document.getElementById('statRead').textContent = 0; | |
| document.getElementById('statCopied').textContent = 0; | |
| document.getElementById('xpBar').style.width = '0%'; | |
| document.getElementById('levelNum').textContent = 1; | |
| document.querySelectorAll('.section').forEach(s => { | |
| s.classList.remove('read','open'); | |
| s.querySelector('.section-badge').textContent = 'LOCKED'; | |
| }); | |
| showToast('🔄 Progresso resetado'); | |
| } | |
| // ══════════════════════════════ | |
| // INIT | |
| // ══════════════════════════════ | |
| buildScrollDots(); | |
| updateScrollDots(); | |
| </script> | |
| </body> | |
| </html> |