ZJ Prompt Studio
Poster Generate
Isi •••• Pilih opsi •••• Generate •••• Copy ke AI

Silahkan digunakan di atas kebaikan, semoga sama-sama mendapat pahala. Dilarang menggunakan untuk mempromosikan yang tidak baik.

Tools untuk membuat prompt poster yang lebih rapi, terarah, dan siap digunakan ke AI.

1 TOPIK / JUDUL
2 ISI / INFORMASI
✎ Preset Tersimpan
0 preset
Belum ada preset tersimpan
3 MODE TAMPILAN
4 GAYA VISUAL
5 TEMA WARNA
6 TIPOGRAFI
7 LAYOUT / KOMPOSISI
8 BACKGROUND
9 DEKORASI
10 IDENTITAS DIGITAL
11 ASPECT RATIO
12 SPECIAL INSTRUCTIONS

Anti Typo: Memastikan tidak ada typo pada teks hasil.

Anti Tasywir: Hindari gambar makhluk bernyawa sesuai hukum Islam.

Mudah Terbaca: Kontras warna dan ukuran font optimal.

13 INSTRUKSI TAMBAHAN

Hasil Prompt

Siap copy ke AI

Hasil prompt poster akan tampil di sini.
✦

Brainstorming Konten

Bangun arah ide, audiens, tujuan, dan struktur visual sebelum masuk ke prompt poster.

1 TEMA UTAMA
2 PROJECT SCOPE
3 TARGET AUDIENS
AI Suggestion berdasarkan audiens

Pilih target audiens untuk mendapatkan rekomendasi tone, angle, dan pendekatan visual.

4 TUJUAN PROJECT INI
5 DESKRIPSI / ISI

Hasil Brainstorm

Siap copy ke AI

Hasil brainstorm akan tampil di sini.
:root{ --bg:#f4f6f8; --bg-soft:#eef2f6; --card:#ffffff; --line:#d9e1ea; --text:#111111; --text-soft:#667085; --text-muted:#8b98a9; --gold:#d4af37; --gold-soft:#f4d35e; --gold-deep:#b88918; --cyan:#18b6f6; --cyan-soft:#7ed8fb; --cyan-deep:#0e99d2; --dark:#111111; --dark-soft:#1a1a1a; --dark-elev:#20232a; --red:#e53935; --red-dark:#c62828; --shadow-soft:0 10px 30px rgba(17,17,17,.05); --shadow-card:0 14px 34px rgba(15,23,42,.06); --shadow-gold:0 10px 24px rgba(212,175,55,.22); --shadow-cyan:0 10px 24px rgba(24,182,246,.18); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background: radial-gradient(circle at top center, rgba(212,175,55,.06), transparent 24%), linear-gradient(180deg,#f8fafc 0%, var(--bg) 100%); } .app-shell{min-height:100vh} .mobile-sticky-top{ position:relative; z-index:50; } .container{ width:min(900px,calc(100% - 32px)); margin:0 auto; padding:18px 0 40px; } .container-top{ padding-top:0; padding-bottom:0; } /* ========================= TOP LOGO ========================= */ .top-brand-logo{ display:flex; justify-content:center; align-items:center; margin:10px 0 26px; } .top-brand-logo img{ max-width:320px; width:100%; height:auto; display:block; filter:drop-shadow(0 14px 26px rgba(0,0,0,.12)); } /* ========================= TOP TABS ========================= */ .top-tabs{ display:grid; grid-template-columns:1fr 1fr; max-width:760px; margin:6px auto 34px; padding:7px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid #e1e8ef; backdrop-filter:blur(12px); box-shadow:var(--shadow-soft); } .top-tab{ border:0; background:transparent; color:#5f7188; border-radius:999px; padding:16px 22px; font-size:18px; font-weight:800; cursor:pointer; transition:.25s ease; } .top-tab:hover{ color:var(--dark); } .top-tab.active{ background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-soft)); color:#111111; box-shadow:var(--shadow-gold); } /* ========================= HERO ========================= */ .hero-center{ max-width:760px; margin:0 auto 28px; text-align:center; } .hero-badge-wrap{ position:relative; display:inline-block; animation:fadeUp .45s ease; } .spark{ position:absolute; width:9px; height:9px; background:var(--gold); border-radius:50%; opacity:.9; box-shadow:0 0 0 6px rgba(212,175,55,.08); } .spark-1{top:8px;left:18px} .spark-2{top:22px;right:14px} .spark-3{bottom:16px;left:42px} .spark-4{bottom:4px;right:34px} .hero-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:280px; padding:22px 42px; border-radius:999px; background:linear-gradient(90deg,#151515,#232323 38%, #2d2d2d 100%); color:#ffffff; font-size:28px; font-weight:900; border:1px solid rgba(212,175,55,.28); box-shadow: 0 14px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 24px rgba(212,175,55,.10); } .step-row{ margin-top:28px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; animation:fadeUp .55s ease; } .step-pill{ background:linear-gradient(90deg,var(--gold-deep),var(--gold)); color:#111111; border-radius:999px; padding:13px 20px; font-weight:900; font-size:15px; min-width:72px; box-shadow:var(--shadow-gold); } .step-pill.soft{ background:linear-gradient(90deg,#f7f7f7,#ffffff); color:#475467; border:1px solid #d7e1ea; box-shadow:none; } .step-pill.warn{ background:linear-gradient(90deg,var(--cyan),var(--cyan-soft)); color:#ffffff; box-shadow:var(--shadow-cyan); } .step-dots{ color:rgba(212,175,55,.8); font-size:22px; font-weight:900; letter-spacing:3px; } .hero-note, .hero-subtext{ max-width:760px; margin-left:auto; margin-right:auto; text-align:center; line-height:1.8; animation:fadeUp .65s ease; } .hero-note{ margin-top:18px; color:var(--text-soft); font-size:15px; } .hero-subtext{ margin-top:14px; color:#6f7f93; font-size:15px; } /* ========================= PANEL STATE ========================= */ .tool-panel{ display:none; opacity:0; transform:translateY(10px); } .tool-panel.active{ display:block; opacity:1; transform:translateY(0); animation:panelIn .28s ease; } .panel-stack{ display:flex; flex-direction:column; gap:16px; } /* ========================= CARDS ========================= */ .field-card, .result-card, .brain-hero-card{ background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow-card); backdrop-filter:blur(10px); } .field-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .field-number{ width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; color:#111111; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); box-shadow:0 8px 16px rgba(212,175,55,.18); flex:0 0 auto; } .field-title{ font-size:15px; letter-spacing:.08em; font-weight:900; color:var(--dark); } /* ========================= INPUTS ========================= */ .field-input{ width:100%; border:1px solid #dbe3ec; background:#fcfdff; color:var(--text); border-radius:14px; padding:14px 16px; font-size:16px; outline:none; transition:.2s ease; } .field-input::placeholder{ color:#94a3b8; } .field-input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.10); } .field-textarea-lg{ min-height:160px; resize:vertical; line-height:1.7; } .field-textarea-sm{ min-height:90px; resize:vertical; line-height:1.7; } /* ========================= BRAIN HERO ========================= */ .brain-hero-card{ display:flex; align-items:flex-start; gap:14px; border:1px solid #e5e7eb; background: linear-gradient(135deg, rgba(212,175,55,.06), rgba(24,182,246,.05)), #ffffff; } .brain-hero-icon{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#111111; font-weight:900; font-size:18px; flex:0 0 auto; box-shadow:var(--shadow-gold); } .brain-hero-card h3{ margin:0 0 6px; font-size:20px; color:var(--dark); } .brain-hero-card p{ margin:0; color:var(--text-soft); line-height:1.7; } /* ========================= OPTIONS ========================= */ .option-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .choice-card{ border:1px solid #d6e0ea; background:#ffffff; color:#31465d; border-radius:14px; padding:14px 12px; font-size:15px; text-align:center; cursor:pointer; transition:.2s ease; } .choice-card:hover{ border-color:var(--gold); color:var(--dark); background:#fffdf7; transform:translateY(-1px); } .choice-card.active{ border:2px solid var(--gold); background:linear-gradient(180deg,#fffdf6,#fff7dd); color:#111111; font-weight:800; box-shadow:0 8px 16px rgba(212,175,55,.10); } /* ========================= PRESET ========================= */ .preset-box{ margin-top:18px; background:linear-gradient(180deg,#fffdfa,#fff8e8); border:1.5px solid rgba(212,175,55,.35); border-radius:22px; padding:18px; } .preset-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .preset-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .preset-title{ font-size:15px; font-weight:800; color:#9a7410; } .preset-count{ background:#ffffff; color:#7b8da4; border-radius:999px; padding:4px 10px; font-size:13px; font-weight:700; border:1px solid #ece7d7; } .preset-actions{ display:flex; gap:8px; flex-wrap:wrap; } .preset-btn{ border:1px solid #e4dfd0; background:#ffffff; color:#3a4a5d; border-radius:10px; padding:9px 14px; font-size:14px; font-weight:700; cursor:pointer; transition:.2s ease; } .preset-btn:hover{ border-color:var(--gold); } .danger-outline{ color:#ef4444; border-color:#f0b3b3; } .preset-empty{ margin-top:14px; color:#8b98a9; font-style:italic; } .preset-list{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; } .preset-inline-actions{ margin-top:16px; } .ghost-preset-btn{ border:1px dashed #d9c88f; background:#ffffff; color:#8f7a35; border-radius:14px; padding:12px 16px; font-size:14px; font-weight:700; cursor:pointer; } .preset-panel{ margin-top:16px; } .preset-form-row{ display:flex; gap:10px; align-items:center; } .preset-form-row.left{ justify-content:flex-start; margin-top:12px; } /* ========================= ASPECT ========================= */ .aspect-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .aspect-card{ border:1px solid #d6e0ea; background:#ffffff; color:#31465d; border-radius:16px; min-height:108px; padding:16px 12px; text-align:center; cursor:pointer; transition:.2s ease; display:flex; align-items:center; justify-content:center; flex-direction:column; } .aspect-card:hover{ border-color:var(--gold); transform:translateY(-1px); } .aspect-card.active{ border:2px solid var(--gold); background:linear-gradient(180deg,#fffdf6,#fff7dd); color:#111111; font-weight:800; box-shadow:0 8px 16px rgba(212,175,55,.10); } .aspect-icon{ display:block; border:3px solid #22384e; border-radius:4px; margin-bottom:12px; } .aspect-icon.square{width:34px;height:34px} .aspect-icon.portrait{width:28px;height:38px} .aspect-icon.landscape{width:42px;height:24px} .aspect-icon.story{width:22px;height:40px} .aspect-card.active .aspect-icon{ border-color:var(--gold-deep); } .aspect-label{ font-size:15px; font-weight:700; } /* ========================= IDENTITY GRID ========================= */ .identity-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } /* ========================= SPECIAL CHIPS ========================= */ .special-chip-row{ display:flex; flex-wrap:wrap; gap:10px; } .special-chip{ border:1px solid #d6e0ea; background:#ffffff; color:#4a6988; border-radius:14px; padding:12px 16px; font-size:15px; cursor:pointer; transition:.2s ease; } .special-chip:hover{ border-color:var(--gold); } .special-chip.active{ border:2px solid var(--gold); background:linear-gradient(180deg,#fffdf6,#fff7dd); color:#111111; font-weight:800; } .special-desc{ margin-top:14px; color:#7e95af; line-height:1.8; font-size:14px; } .special-desc p{margin:0} /* ========================= BUTTONS ========================= */ .primary-btn, .mini-btn, .secondary-btn, .danger-btn{ border:0; cursor:pointer; transition:.2s ease; } .primary-btn{ background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-soft)); color:#111111; border-radius:16px; padding:16px 22px; font-size:18px; font-weight:900; box-shadow:var(--shadow-gold); } .primary-btn:hover{ transform:translateY(-1px); filter:brightness(1.02); } .secondary-btn{ background:#ffffff; color:#5f748f; border:1px solid #d7e5f1; border-radius:14px; padding:14px 18px; font-size:14px; font-weight:800; } .secondary-btn:hover{ border-color:var(--gold); color:#111111; } .danger-btn{ background:var(--red); color:#fff; border-radius:16px; padding:16px 22px; font-size:18px; font-weight:900; } .danger-btn:hover{ background:var(--red-dark); } .mini-btn{ background:linear-gradient(90deg,var(--dark),#2a2a2a); color:#fff; border-radius:12px; padding:10px 14px; font-size:14px; font-weight:800; } .mini-btn:hover{ filter:brightness(1.06); } .full-width{width:100%} .small-btn{ padding:12px 16px; font-size:14px; } .share-wa-btn{ min-width:240px; background:linear-gradient(90deg,var(--cyan-deep),var(--cyan),var(--cyan-soft)); color:#ffffff; box-shadow:var(--shadow-cyan); } /* ========================= RESULT ========================= */ .result-card{display:none} .result-card.show{display:block} .result-header{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; } .result-header h3{ margin:0; font-size:20px; color:var(--dark); } .result-header p{ margin:4px 0 0; color:#87a0ba; font-size:14px; } .result-box{ margin:0; background:linear-gradient(180deg,#fffefb,#fffdfa); border:1px solid #eadfb7; border-radius:14px; padding:18px; line-height:1.85; white-space:pre-wrap; font-size:15px; color:#26415d; } /* ========================= SHARE CONFIG ========================= */ .share-config-box{ margin-top:20px; padding:18px; border-radius:18px; background:linear-gradient(180deg,#ffffff,#fffcf2); border:1px solid #eadfb7; } .share-config-box.is-hidden{ display:none; } .share-header{ font-weight:800; margin-bottom:8px; color:#9a7410; } .share-desc{ font-size:14px; color:#6f85a0; margin-bottom:12px; } .share-textarea{ width:100%; min-height:160px; border-radius:12px; border:1px solid #e6ddc0; padding:12px; font-size:14px; line-height:1.7; background:#fffefb; } .share-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; } /* ========================= AUDIENCE SUGGESTION ========================= */ .audience-suggestion-box{ margin-top:14px; padding:14px 16px; border:1px solid rgba(212,175,55,.25); background:linear-gradient(180deg,#fffdf7,#fff9ea); border-radius:14px; } .audience-suggestion-title{ font-size:14px; font-weight:800; color:#9a7410; margin-bottom:6px; } #audienceSuggestionText{ margin:0; color:#6f85a0; line-height:1.7; font-size:14px; } /* ========================= MODAL ========================= */ .modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:999; } .modal-backdrop.is-hidden{ display:none; } .modal-card{ width:min(100%,450px); background:#fff; border-radius:22px; padding:26px; box-shadow:0 20px 50px rgba(0,0,0,.18); border-top:4px solid #ef4444; animation:modalIn .2s ease; } .modal-title{ font-size:18px; font-weight:900; color:#ef4444; margin-bottom:14px; } .modal-body{ color:#6c7c92; line-height:1.8; font-size:15px; } .modal-actions{ display:flex; gap:10px; margin-top:20px; } .modal-btn{flex:1} /* ========================= FOOTER ========================= */ .site-footer{ margin-top:42px; padding:28px 0 14px; text-align:center; border-top:1px solid #e6e9ee; } .footer-copy{ margin:0; color:#6f85a0; font-size:15px; line-height:1.8; } .footer-copy a{ color:var(--gold-deep); font-weight:800; text-decoration:none; } .footer-copy a:hover{ text-decoration:underline; } .love{color:#ff4d7d} /* ========================= ANIMATION ========================= */ @keyframes fadeUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } @keyframes panelIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } @keyframes modalIn{ from{opacity:0;transform:scale(.98)} to{opacity:1;transform:scale(1)} } /* ========================= RESPONSIVE ========================= */ @media (max-width:900px){ .aspect-grid, .option-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .identity-grid{ grid-template-columns:1fr; } .preset-form-row{ flex-direction:column; align-items:stretch; } } @media (max-width:640px){ .mobile-sticky-top{ position:sticky; top:0; z-index:999; background:rgba(248,250,252,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #e6e9ee; box-shadow:0 8px 20px rgba(15,23,42,.05); } .container{ width:min(100%,calc(100% - 20px)); padding:14px 0 28px; } .container-top{ width:min(100%,calc(100% - 20px)); margin:0 auto; padding:8px 0 12px; } .top-brand-logo{ margin:0 0 10px; } .top-brand-logo img{ max-width:210px; } .top-tabs{ grid-template-columns:1fr 1fr; max-width:100%; margin:0 auto; border-radius:20px; padding:6px; } .top-tab{ font-size:15px; padding:13px 10px; } .hero-center{ max-width:100%; margin:0 auto 20px; padding-top:6px; } .hero-badge{ width:auto; min-width:unset; max-width:100%; font-size:22px; padding:18px 26px; } .step-row{ gap:8px; } .step-pill{ font-size:14px; padding:11px 16px; min-width:auto; } .step-dots{ font-size:18px; letter-spacing:2px; } .hero-note, .hero-subtext{ font-size:14px; line-height:1.75; } .field-card, .result-card, .brain-hero-card{ padding:16px; border-radius:20px; } .field-header{ margin-bottom:14px; } .field-number{ width:36px; height:36px; font-size:16px; } .field-title{ font-size:14px; } .field-input{ font-size:15px; padding:13px 14px; } .field-textarea-lg{ min-height:140px; } .field-textarea-sm{ min-height:88px; } .option-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .choice-card{ min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px 10px; font-size:14px; line-height:1.35; } .aspect-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .aspect-card{ min-height:110px; padding:14px 10px; } .identity-grid{ grid-template-columns:1fr; gap:10px; } .special-chip-row{ gap:8px; } .special-chip{ padding:11px 14px; font-size:14px; } .result-header{ flex-direction:column; align-items:stretch; } .modal-actions{ flex-direction:column; } .share-actions{ flex-direction:column; } .share-wa-btn{ min-width:unset; width:100%; } } const $ = (selector, scope = document) => scope.querySelector(selector); const $$ = (selector, scope = document) => [...scope.querySelectorAll(selector)]; const refs = { heroBadge: $("#heroBadge"), heroSubtext: $("#heroSubtext"), step1: $("#step1"), step2: $("#step2"), step3: $("#step3"), step4: $("#step4"), presetModal: $("#presetResetModal") }; /* ========================= HERO / TAB ========================= */ function setHero(tabName) { if (tabName === "poster") { refs.heroBadge.textContent = "Poster Generate"; refs.heroSubtext.innerHTML = "Tools untuk membuat prompt poster yang lebih rapi, terarah, dan siap digunakan ke AI."; refs.step1.textContent = "Isi"; refs.step2.textContent = "Pilih opsi"; refs.step3.textContent = "Generate"; refs.step4.textContent = "Copy ke AI"; return; } refs.heroBadge.textContent = "Brainstormer"; refs.heroSubtext.innerHTML = "Peramu prompt generator untuk mendapatkan konsep konten yang lebih baik untuk ZJ Prompt Studio.
Isi form di bawah dan dapatkan rekomendasi lengkap untuk visual yang optimal."; refs.step1.textContent = "Tentukan Tema"; refs.step2.textContent = "Deskripsi singkat"; refs.step3.textContent = "Generated"; refs.step4.textContent = "Copy hasil ke AI"; } function activateTab(tabName) { $$(".top-tab").forEach((btn) => { btn.classList.toggle("active", btn.dataset.tab === tabName); }); $$(".tool-panel").forEach((panel) => { panel.classList.toggle("active", panel.id === `tab-${tabName}`); }); setHero(tabName); } function bindTabs() { $$(".top-tab").forEach((btn) => { btn.addEventListener("click", () => activateTab(btn.dataset.tab)); }); } /* ========================= HELPERS ========================= */ function showResult(wrapperId, resultId, text) { const wrap = document.getElementById(wrapperId); const box = document.getElementById(resultId); if (!wrap || !box) return; box.textContent = text; wrap.classList.add("show"); } function copyText(id, button) { const text = document.getElementById(id)?.textContent || ""; navigator.clipboard.writeText(text).then(() => { if (!button) return; const oldText = button.textContent; button.textContent = "Tersalin!"; setTimeout(() => { button.textContent = oldText; }, 1200); }); } function updateShareConfig(text, targetId) { const el = document.getElementById(targetId); if (el) el.value = text; } function shareToWhatsApp(textareaId) { const el = document.getElementById(textareaId); if (!el) return; const text = encodeURIComponent(el.value || ""); window.open(`https://wa.me/?text=${text}`, "_blank"); } function showShareBox(id) { const el = document.getElementById(id); if (el) el.classList.remove("is-hidden"); } /* ========================= CHOICE HELPERS ========================= */ function bindSingleChoice(containerId, selector = ".choice-card") { const container = document.getElementById(containerId); if (!container) return; $$(selector, container).forEach((btn) => { btn.addEventListener("click", () => { $$(selector, container).forEach((item) => item.classList.remove("active")); btn.classList.add("active"); }); }); } function getSingleChoice(containerId, selector = ".choice-card") { const container = document.getElementById(containerId); if (!container) return ""; const active = $(`${selector}.active`, container); return active ? active.dataset.value : ""; } function setSingleChoice(containerId, value, selector = ".choice-card") { const container = document.getElementById(containerId); if (!container) return; $$(selector, container).forEach((btn) => { btn.classList.toggle("active", btn.dataset.value === value); }); } function bindToggleGroup(containerId, selector) { const container = document.getElementById(containerId); if (!container) return; $$(selector, container).forEach((btn) => { btn.addEventListener("click", () => btn.classList.toggle("active")); }); } function getToggleValues(containerId, selector) { const container = document.getElementById(containerId); if (!container) return []; return $$(`${selector}.active`, container).map((el) => el.dataset.value); } function setToggleValues(containerId, values, selector) { const container = document.getElementById(containerId); if (!container) return; $$(selector, container).forEach((btn) => { btn.classList.toggle("active", values.includes(btn.dataset.value)); }); } /* ========================= POSTER OPTIONS ========================= */ [ "posterMode", "posterVisual", "posterColor", "posterTypography", "posterLayout", "posterBackground", "posterDecoration" ].forEach((id) => bindSingleChoice(id)); bindSingleChoice("posterRatio", ".aspect-card"); bindToggleGroup("posterSpecial", ".special-chip"); /* ========================= PRESET STORAGE ========================= */ const POSTER_PRESET_KEY = "zjpromptstudio_poster_presets_v2"; function getPresets() { try { return JSON.parse(localStorage.getItem(POSTER_PRESET_KEY) || "[]"); } catch { return []; } } function setPresets(data) { localStorage.setItem(POSTER_PRESET_KEY, JSON.stringify(data)); } function getPosterData() { return { title: $("#posterTitle")?.value.trim() || "", content: $("#posterContent")?.value.trim() || "", mode: getSingleChoice("posterMode"), visual: getSingleChoice("posterVisual"), color: getSingleChoice("posterColor"), typography: getSingleChoice("posterTypography"), layout: getSingleChoice("posterLayout"), background: getSingleChoice("posterBackground"), decoration: getSingleChoice("posterDecoration"), ratio: getSingleChoice("posterRatio", ".aspect-card"), special: getToggleValues("posterSpecial", ".special-chip"), instruction: $("#posterAdditionalInstruction")?.value.trim() || "", ig: $("#posterIG")?.value.trim() || "", wa: $("#posterWA")?.value.trim() || "", web: $("#posterWEB")?.value.trim() || "", tt: $("#posterTT")?.value.trim() || "", yt: $("#posterYT")?.value.trim() || "", fb: $("#posterFB")?.value.trim() || "" }; } function setPosterData(data) { if ($("#posterTitle")) $("#posterTitle").value = data.title || ""; if ($("#posterContent")) $("#posterContent").value = data.content || ""; if ($("#posterAdditionalInstruction")) $("#posterAdditionalInstruction").value = data.instruction || ""; if ($("#posterIG")) $("#posterIG").value = data.ig || ""; if ($("#posterWA")) $("#posterWA").value = data.wa || ""; if ($("#posterWEB")) $("#posterWEB").value = data.web || ""; if ($("#posterTT")) $("#posterTT").value = data.tt || ""; if ($("#posterYT")) $("#posterYT").value = data.yt || ""; if ($("#posterFB")) $("#posterFB").value = data.fb || ""; setSingleChoice("posterMode", data.mode); setSingleChoice("posterVisual", data.visual); setSingleChoice("posterColor", data.color); setSingleChoice("posterTypography", data.typography); setSingleChoice("posterLayout", data.layout); setSingleChoice("posterBackground", data.background); setSingleChoice("posterDecoration", data.decoration); setSingleChoice("posterRatio", data.ratio, ".aspect-card"); setToggleValues("posterSpecial", data.special || [], ".special-chip"); } function renderPresetList() { const list = $("#presetList"); const count = $("#presetCount"); const presets = getPresets(); if (!list || !count) return; count.textContent = `${presets.length} preset`; if (!presets.length) { list.className = "preset-empty"; list.textContent = "Belum ada preset tersimpan"; return; } list.className = "preset-list"; list.innerHTML = ""; presets.forEach((preset) => { const btn = document.createElement("button"); btn.type = "button"; btn.className = "preset-btn"; btn.textContent = preset.name; btn.addEventListener("click", () => setPosterData(preset.data)); list.appendChild(btn); }); } /* ========================= PRESET MODAL ========================= */ function openPresetModal() { if (!refs.presetModal) return; refs.presetModal.classList.remove("is-hidden"); } function closePresetModal() { if (!refs.presetModal) return; refs.presetModal.classList.add("is-hidden"); } /* ========================= PRESET ACTIONS ========================= */ function bindPresetActions() { const showSaveBtn = $("#showSavePresetBtn"); const saveWrap = $("#savePresetWrap"); const importWrap = $("#importPresetWrap"); const exportWrap = $("#exportPresetWrap"); const cancelSaveBtn = $("#cancelSavePresetBtn"); const saveBtn = $("#savePresetBtn"); const importToggleBtn = $("#importPresetToggleBtn"); const cancelImportBtn = $("#cancelImportPresetBtn"); const doImportBtn = $("#doImportPresetBtn"); const exportBtn = $("#exportPresetBtn"); const closeExportBtn = $("#closeExportPresetBtn"); const resetBtn = $("#resetPresetBtn"); const cancelResetBtn = $("#cancelPresetResetBtn"); const confirmResetBtn = $("#confirmPresetResetBtn"); if (showSaveBtn) { showSaveBtn.addEventListener("click", () => { if (saveWrap) saveWrap.hidden = false; if (importWrap) importWrap.hidden = true; if (exportWrap) exportWrap.hidden = true; }); } if (cancelSaveBtn) { cancelSaveBtn.addEventListener("click", () => { if (saveWrap) saveWrap.hidden = true; }); } if (saveBtn) { saveBtn.addEventListener("click", () => { const name = $("#presetName")?.value.trim() || ""; if (!name) { alert("Isi nama preset terlebih dahulu."); return; } const presets = getPresets(); presets.push({ name, data: getPosterData() }); setPresets(presets); if ($("#presetName")) $("#presetName").value = ""; if (saveWrap) saveWrap.hidden = true; renderPresetList(); }); } if (importToggleBtn) { importToggleBtn.addEventListener("click", () => { if (importWrap) importWrap.hidden = false; if (saveWrap) saveWrap.hidden = true; if (exportWrap) exportWrap.hidden = true; }); } if (cancelImportBtn) { cancelImportBtn.addEventListener("click", () => { if (importWrap) importWrap.hidden = true; }); } if (doImportBtn) { doImportBtn.addEventListener("click", () => { try { const raw = $("#presetJson")?.value.trim() || ""; const parsed = JSON.parse(raw); if (!Array.isArray(parsed)) throw new Error("invalid"); setPresets(parsed); if ($("#presetJson")) $("#presetJson").value = ""; if (importWrap) importWrap.hidden = true; renderPresetList(); } catch { alert("Format JSON preset tidak valid."); } }); } if (exportBtn) { exportBtn.addEventListener("click", () => { if ($("#presetExportOutput")) { $("#presetExportOutput").value = JSON.stringify(getPresets(), null, 2); } if (exportWrap) exportWrap.hidden = false; if (saveWrap) saveWrap.hidden = true; if (importWrap) importWrap.hidden = true; }); } if (closeExportBtn) { closeExportBtn.addEventListener("click", () => { if (exportWrap) exportWrap.hidden = true; }); } if (resetBtn) { resetBtn.addEventListener("click", openPresetModal); } if (cancelResetBtn) { cancelResetBtn.addEventListener("click", closePresetModal); } if (confirmResetBtn) { confirmResetBtn.addEventListener("click", () => { setPresets([]); renderPresetList(); closePresetModal(); }); } if (refs.presetModal) { refs.presetModal.classList.add("is-hidden"); refs.presetModal.addEventListener("click", (e) => { if (e.target === refs.presetModal) closePresetModal(); }); } } /* ========================= POSTER ========================= */ function buildPosterIdentityLines() { const lines = []; const ig = $("#posterIG")?.value.trim() || ""; const wa = $("#posterWA")?.value.trim() || ""; const web = $("#posterWEB")?.value.trim() || ""; const tt = $("#posterTT")?.value.trim() || ""; const yt = $("#posterYT")?.value.trim() || ""; const fb = $("#posterFB")?.value.trim() || ""; if (ig) lines.push(`• Instagram: ${ig}`); if (wa) lines.push(`• WhatsApp: ${wa}`); if (web) lines.push(`• Website: ${web}`); if (tt) lines.push(`• TikTok: ${tt}`); if (yt) lines.push(`• YouTube: ${yt}`); if (fb) lines.push(`• Facebook: ${fb}`); return lines; } function buildPosterSpecialBlocks() { const special = getToggleValues("posterSpecial", ".special-chip"); const blocks = []; if (special.includes("Anti Typo")) { blocks.push(`📝 ANTI TYPO: Pastikan semua teks yang muncul dalam gambar ditulis dengan BENAR dan TIDAK ADA TYPO/KESALAHAN EJA. Verifikasi setiap kata, terutama nama, tempat, dan istilah penting. Jika ada teks dalam bahasa Arab, pastikan huruf-hijaiyahnya benar dan lengkap (tidak ada yang hilang atau tertukar).`); } if (special.includes("Anti Tasywir")) { blocks.push(`🚫 ANTI TASYWIR: DILARANG KERAS membuat gambar makhluk bernyawa yang memiliki ruh (manusia atau hewan) dalam bentuk apapun termasuk wajah, mata, hidung, mulut, telinga, atau bentuk utuh tubuh. Gunakan alternatif: kalau menggunakan manusia, maka gunakan No Facial Details. objek non-makhluk (buku, pemandangan, bangunan, tumbuhan), representasi simbolik, ornamen/kaligrafi, atau TITIK/HURUF/ISYARAT.`); } if (special.includes("Mudah Terbaca")) { blocks.push(`👁️ MUDAH TERBACA: Pastikan TINGKAT KETERBACAAN teks SANGAT TINGGI. Kontras warna tinggi (minimal 4.5:1), ukuran font cukup besar, weight font tidak terlalu tipis (min 400), line-height nyaman (1.5x), hierarki jelas, tambahkan shadow/stroke jika teks di background kompleks. TEST: pastikan SEMUA teks tetap legible dibaca di layar HP dari jarak 30cm!`); } return blocks; } function bindPosterActions() { const generateBtn = $("#generatePosterBtn"); const resetBtn = $("#resetPosterTextBtn"); const copyBtn = $("#copyPosterResultBtn"); if (generateBtn) { generateBtn.addEventListener("click", () => { const title = $("#posterTitle")?.value.trim() || ""; const content = $("#posterContent")?.value.trim() || ""; const mode = getSingleChoice("posterMode") || "-"; const visual = getSingleChoice("posterVisual") || "-"; const color = getSingleChoice("posterColor") || "-"; const typography = getSingleChoice("posterTypography") || "-"; const layout = getSingleChoice("posterLayout") || "-"; const background = getSingleChoice("posterBackground") || "-"; const decoration = getSingleChoice("posterDecoration") || "-"; const ratio = getSingleChoice("posterRatio", ".aspect-card") || "-"; const instruction = $("#posterAdditionalInstruction")?.value.trim() || "AI akan menyesuaikan detail visual agar hasil lebih rapi, menarik, dan relevan."; const identityLines = buildPosterIdentityLines(); const specialBlocks = buildPosterSpecialBlocks(); const result = `Buatkan poster infografis dengan spesifikasi berikut: 📌 JUDUL/TOPIK: ${title || "-"} 📝 ISI/INFORMASI: ${content || "-"} 🎨 SPESIFIKASI DESAIN: Mode Tampilan: ${mode} | Gaya Visual: ${visual} | Tema Warna: ${color} | Tipografi: ${typography} | Layout: ${layout} | Background: ${background} | Dekorasi: ${decoration} | Aspect Ratio: ${ratio} 📱 IDENTITAS DIGITAL: ${identityLines.length ? identityLines.join("\n") : "-"} ⚙️ INSTRUKSI TAMBAHAN: ${instruction} ✨ OUTPUT YANG DIHARAPKAN: Buatkan poster infografis yang aesthetic, professional, dan eye-catching dengan aspect ratio ${ratio}. Pastikan hierarki informasi jelas, typography readable, dan visual hierarchy yang baik. High quality, siap untuk di-share di media sosial. ⚠️ SPECIAL INSTRUCTIONS: ${specialBlocks.length ? specialBlocks.join("\n\n") : "-"} Tolong generate gambar poster infografis ini.`; const shareConfig = `Template Poster Generate ZJ Prompt Studio ━━━━━━━━━━━━━━━━━━ Judul / Topik : ${title || "-"} Isi Poster : ${content || "-"} Mode Tampilan : ${mode} Gaya Visual : ${visual} Tema Warna : ${color} Tipografi : ${typography} Layout : ${layout} Background : ${background} Dekorasi : ${decoration} Aspect Ratio : ${ratio} Identitas Digital: ${identityLines.length ? identityLines.join("\n") : "-"} Instruksi Tambahan: ${instruction} ━━━━━━━━━━━━━━━━━━ Dibuat dengan ❤️ ZJ Prompt Studio Poster Generate ZJ Prompt Studio - Pro Edition`; showResult("posterResultWrap", "posterResult", result); updateShareConfig(shareConfig, "posterShareConfigText"); showShareBox("posterShareBox"); }); } if (resetBtn) { resetBtn.addEventListener("click", () => { if ($("#posterTitle")) $("#posterTitle").value = ""; if ($("#posterContent")) $("#posterContent").value = ""; }); } if (copyBtn) { copyBtn.addEventListener("click", function () { copyText("posterResult", this); }); } $("#copyPosterConfigBtn")?.addEventListener("click", function () { navigator.clipboard.writeText($("#posterShareConfigText").value); this.textContent = "Tersalin!"; setTimeout(() => (this.textContent = "Copy Config"), 1200); }); $("#waPosterConfigBtn")?.addEventListener("click", function () { shareToWhatsApp("posterShareConfigText"); }); } /* ========================= AUDIENCE SUGGESTION ========================= */ function updateAudienceSuggestion() { const audience = $("#brainstormAudience")?.value || ""; const target = $("#audienceSuggestionText"); if (!target) return; const suggestions = { "Pelajar/Mahasiswa": "Gunakan tone ringan, edukatif, dan relate dengan kehidupan belajar. Cocok dengan visual modern, segar, dan headline yang singkat.", "Pengajar/Guru": "Gunakan pendekatan informatif, berwibawa, dan jelas. Cocok dengan layout rapi, tipografi formal, dan warna yang tenang.", "Dosen/Academician": "Gunakan tone profesional, intelektual, dan kredibel. Cocok dengan visual minimalis atau modern corporate.", "Profesional/Karyawan": "Gunakan tone praktis, efisien, dan langsung ke manfaat. Cocok dengan desain bersih, modern, dan tidak terlalu ramai.", "Designer/Grafis": "Gunakan angle visual yang kreatif, estetik, dan inspiratif. Cocok dengan eksplorasi layout unik dan gaya visual yang lebih artistik.", "Digital Marketer": "Gunakan bahasa yang tajam, relevan, dan berorientasi hasil. Cocok dengan hook kuat, CTA jelas, dan visual konversi tinggi.", "Content Creator": "Gunakan tone santai, engaging, dan mudah dibagikan. Cocok dengan warna menarik dan headline yang memancing rasa penasaran.", "Pemilik Bisnis/Entrepreneur": "Gunakan pendekatan problem-solution dan fokus pada benefit bisnis. Cocok dengan tone profesional dan visual yang membangun kepercayaan.", "Corporate/B2B": "Gunakan bahasa formal, kredibel, dan terstruktur. Cocok dengan modern corporate, layout rapi, dan tipografi tegas.", "Ibu Rumah Tangga": "Gunakan tone hangat, empatik, dan mudah dipahami. Cocok dengan visual ramah, warna lembut, dan pesan yang dekat dengan kehidupan sehari-hari.", "Masyarakat Umum": "Gunakan bahasa universal, sederhana, dan mudah dicerna. Cocok dengan visual bersih dan tidak terlalu teknis.", "Jamaah Masjid": "Gunakan tone santun, islami, dan menenangkan. Cocok dengan warna lembut, ornamen islami, dan layout yang rapi.", "Komunitas Muslim": "Gunakan pendekatan persuasif, ukhuwah, dan bernilai. Cocok dengan elemen islami yang elegan dan pesan yang membangun kedekatan.", "Gen Z (18-25 tahun)": "Gunakan tone singkat, fresh, cepat, dan relatable. Cocok dengan visual trendi, headline hooky, dan warna yang lebih hidup.", "Millennial (26-40 tahun)": "Gunakan tone relevan, praktis, dan berorientasi solusi. Cocok dengan visual modern dan copywriting yang jelas.", "Generasi X (41-56 tahun)": "Gunakan bahasa yang lebih formal, tenang, dan meyakinkan. Cocok dengan desain sederhana dan mudah dibaca.", "Pemula/Beginner": "Gunakan penjelasan yang sederhana, step-by-step, dan tidak terlalu teknis. Cocok dengan layout bersih dan copy yang mudah dipahami.", "Intermediate": "Gunakan bahasa yang lebih spesifik dan fokus pada peningkatan hasil. Cocok dengan visual modern dan struktur yang efisien.", "Advanced/Expert": "Gunakan pendekatan yang lebih tajam, detail, dan bernilai tinggi. Cocok dengan tone premium dan tampilan profesional." }; target.textContent = suggestions[audience] || "Pilih target audiens untuk mendapatkan rekomendasi tone, angle, dan pendekatan visual."; } /* ========================= BRAINSTORM ========================= */ function bindBrainActions() { const generateBtn = $("#generateBrainstormBtn"); const copyBtn = $("#copyBrainstormBtn"); if (generateBtn) { generateBtn.addEventListener("click", () => { const topic = $("#brainstormTopic")?.value.trim() || ""; const scope = $("#brainstormScope")?.value || ""; const audience = $("#brainstormAudience")?.value || ""; const goal = $("#brainstormGoal")?.value || ""; const desc = $("#brainstormDesc")?.value.trim() || ""; const result = `##### ZJ Prompt Studio Brainstorming Tool Saya sedang menyusun bahan konsep untuk sebuah ${scope || "karya visual"}. Tema besar karya ini adalah: ${topic || "-"} Isi utama yang ingin disampaikan: ${desc || "-"} Target audiens: ${audience || "-"} Tujuan karya ini: ${goal || "-"} Tugas Anda BUKAN membuat poster final. Tugas Anda adalah menyusun RAMUAN / BAHAN KONSEP yang nantinya akan dipakai untuk membuat poster. Tolong bantu saya mengembangkan konsep visual karya ini menjadi bahan siap pakai dengan format berikut: 1. Judul (Hooky / Punchy) - berikan 3 sampai 5 opsi headline - pilih 1 rekomendasi utama yang paling kuat jualannya 2. Copywriting Utama (Siap Copas) - rapikan isi promosi agar lebih informatif, menarik, dan enak dibaca - tetap pertahankan inti pesan dari deskripsi asli - hasilkan versi yang siap di-copas ke poster 3. Instruksi Tambahan (Dekorasi & Tone Emosi) - berikan arahan dekorasi, elemen visual, tone emosi, dan nuansa desain - buat jelas, singkat, dan aplikatif 4. Rekomendasi Desain (Paling Optimal untuk Tujuan ${goal || "Promosi"}) Berdasarkan tujuan, audiens, dan tema besar ini, pilihkan 1 rekomendasi terbaik untuk masing-masing: ✅ Mode Tampilan Realistic Mockup / Digital - Flat / 3D Render / Photography / Vintage - Retro / Minimalist / Cinematic / Artistic - Painterly ✅ Gaya Visual 3D Mixed Media / Flat Vector Art / Hyper-Realistic / Watercolor / Layered Papercut / Batik Pattern / Neon Glitch / 3D Clay / Isometric / Line Art / Glassmorphism / Cyberpunk ✅ Tema Warna Royal Islamic / Modern Corporate / Warm Earthy / Vibrant Pop / Monochrome / Dripsender Blue / Sunset Gradient / Forest Nature / Luxury Black Gold / Soft Pastel / Ocean Blue ✅ Tipografi Modern Bold / Elegant Serif / Arabic Calligraphy / Playful Sans / Minimal Thin / Retro Vintage / Handwritten Script ✅ Layout / Komposisi Central Hero / Vertical Stack / Grid System / Bento Box / Split Screen / Asymmetric / Magazine Style / Carousel Cards ✅ Background Clean Studio / Subtle Pattern / Islamic Ornament / Paper Texture / Smooth Gradient / Nature Scene / Abstract Art / Bokeh - Blur ✅ Dekorasi Islamic Scholar / Nature & Organic / Ramadhan Object / Lantern & Lights / Mosque Silhouette / Floral Pattern / Geometric Shapes 5. Bonus Strategi Biar Makin Konversi - berikan 3 sampai 5 ide tambahan elemen promosi agar desain lebih menjual - contoh: badge promo, CTA, sticker diskon, urgency, trust element PENTING: - Jangan buat poster final - Jangan generate gambar - Jangan langsung menulis prompt image generator final - Fokus hanya membuat ramuan / bahan / arahan konsep poster - Output harus rapi, terstruktur, dan siap dipakai sebagai bahan lanjutan ke Prompt Poster Buat output dengan urutan persis seperti ini: 1. Judul (Hooky / Punchy) 2. Copywriting Utama (Siap Copas) 3. Instruksi Tambahan (Dekorasi & Tone Emosi) 4. Rekomendasi Desain (Paling Optimal untuk Tujuan ${goal || "Promosi"}) 5. Bonus Strategi Biar Makin Konversi`; const shareConfig = `Template Brainstormer ZJ Prompt Studio Tema Utama : ${topic || "-"} Project Scope : ${scope || "-"} Target Audiens : ${audience || "-"} Tujuan Project : ${goal || "-"} Deskripsi/Isi : ${desc || "-"} Dibuat dengan ❤️ ZJ Prompt Studio Brainstormer ZJ Prompt Studio - Pro Edition`; showResult("brainstormResultWrap", "brainstormResult", result); updateShareConfig(shareConfig, "brainstormShareConfigText"); showShareBox("brainstormShareBox"); }); } if (copyBtn) { copyBtn.addEventListener("click", function () { copyText("brainstormResult", this); }); } $("#copyBrainstormConfigBtn")?.addEventListener("click", function () { navigator.clipboard.writeText($("#brainstormShareConfigText").value); this.textContent = "Tersalin!"; setTimeout(() => (this.textContent = "Copy Config"), 1200); }); $("#waBrainstormConfigBtn")?.addEventListener("click", function () { shareToWhatsApp("brainstormShareConfigText"); }); } /* ========================= INIT ========================= */ window.addEventListener("DOMContentLoaded", () => { bindTabs(); bindPresetActions(); bindPosterActions(); bindBrainActions(); renderPresetList(); activateTab("poster"); const brainstormAudienceEl = $("#brainstormAudience"); if (brainstormAudienceEl) { brainstormAudienceEl.addEventListener("change", updateAudienceSuggestion); } updateAudienceSuggestion(); });