https://www.xgrind.pro/assets/QuizBwPage-DA4DKlzq.js

1import{r as s,j as e}from"./react-core-bWLI75Fw.js";import{o as le,E as k,F as c,ct as u,cF as b,cH as l,lr as re}from"./index-Cuw9rIcM.js";import{coverFitRgba as J,loadImageFromFile as X,encodeQuizBw as ie,compositeOnBackground as V,exportRgbaPng as ne}from"./core-D8bievjF.js";import{F as de}from"./FunViralShortcuts-BJW8fPeM.js";import{av as oe,Y as S,ad as ce,aM as xe,L as Y,v as me,c_ as pe,X as Z,bE as ue}from"./lucide-U8ZTX028.js";import"./firebase-BwZ4hkwm.js";import"./framer-motion-C0wpNkKn.js";const be="xgrind-quiz-bw.png",he=[{n:"1",title:"Tulis Q & A",text:"Pertanyaan hitam (feed). Jawaban putih (hold). Hindari abu-abu."},{n:"2",title:"Opsional gambar",text:"Bisa tambah siluet hitam (Q) / putih (A) — teks saja juga cukup."},{n:"3",title:"Unduh & post",text:"Post PNG dari desktop x.com — light lihat soal, hold lihat jawaban."}],L=[{id:"portrait",label:"Portrait 4:5",w:1080,h:1350},{id:"square",label:"Square 1:1",w:1080,h:1080},{id:"story",label:"Tall 9:16",w:1080,h:1920}],W=[{q:"Siapa yang selalu offline pas dibutuhin?",a:"Dia."},{q:"Apa yang kamu sembunyikan dari crush?",a:"Rekening kosong."},{q:"Siapa di GC ini yang paling toxic?",a:"Scroll ke atas."}];function f(r){r&&URL.revokeObjectURL(r)}function ge({open:r,onClose:x,onUseDemo:i,busy:n}){return r?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-end justify-center p-3 sm:items-center sm:p-4",children:[e.jsx("button",{type:"button",className:"absolute inset-0 bg-slate-950/70 backdrop-blur-[2px]","aria-label":"Tutup",onClick:x}),e.jsxs("div",{className:`relative z-10 max-h-[88dvh] w-full max-w-sm overflow-y-auto rounded-2xl border-2 bg-white ${k} ${c} dark:bg-slate-950`,children:[e.jsxs("div",{className:"sticky top-0 z-10 flex items-start justify-between gap-2 border-b-2 border-slate-200 bg-white/95 px-3 py-2 backdrop-blur dark:border-indigo-500/25 dark:bg-slate-950/95",children:[e.jsxs("div",{children:[e.jsx("p",{className:`text-[10px] font-black uppercase tracking-[0.14em] ${l}`,children:"Contoh hasil"}),e.jsx("h2",{className:`text-[12px] font-black ${b}`,children:"Hitam di feed · putih saat hold"})]}),e.jsx("button",{type:"button",onClick:x,className:`rounded-lg border-2 p-1 ${k} ${b}`,"aria-label":"Tutup modal",children:e.jsx(Z,{size:14})})]}),e.jsxs("div",{className:"space-y-2.5 p-2.5",children:[e.jsx("p",{className:`text-[10px] font-medium leading-snug ${l}`,children:"Trik GE klasik: tinta hitam kebaca di timeline putih; jawaban putih baru muncul di latar hitam."}),e.jsxs("div",{className:"flex justify-center gap-1.5",children:[e.jsxs("figure",{className:"w-[88px] overflow-hidden rounded-md border-2 border-slate-300",children:[e.jsx("img",{src:"/assets/xviral/quiz-card-feed.jpg",alt:"Feed",className:"aspect-[4/5] w-full object-cover"}),e.jsx("figcaption",{className:"bg-white px-0.5 py-0.5 text-center text-[8px] font-black text-slate-900",children:"Feed"})]}),e.jsxs("figure",{className:"w-[88px] overflow-hidden rounded-md border-2 border-slate-700",children:[e.jsx("img",{src:"/assets/xviral/quiz-card-hold.jpg",alt:"Hold",className:"aspect-[4/5] w-full object-cover"}),e.jsx("figcaption",{className:"bg-slate-900 px-0.5 py-0.5 text-center text-[8px] font-black text-white",children:"Hold"})]})]}),e.jsx("img",{src:"/assets/xviral/quiz-compare.jpg",alt:"Quiz compare",className:"mx-auto max-w-[220px] rounded-md border border-slate-800"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsxs("button",{type:"button",onClick:i,disabled:n,className:`inline-flex items-center gap-1.5 rounded-xl border-2 border-slate-900 bg-lime-300 px-3 py-2 text-[11px] font-black text-slate-900 disabled:opacity-60 ${c} dark:border-lime-400/50 dark:bg-lime-800 dark:text-lime-50`,children:[n?e.jsx(Y,{size:13,className:"animate-spin"}):e.jsx(S,{size:13}),"Pakai demo teks"]}),e.jsx("button",{type:"button",onClick:x,className:`inline-flex items-center gap-1.5 rounded-xl border-2 px-3 py-2 text-[11px] font-black ${k} ${b}`,children:"Tutup"})]})]})]})]}):null}function K({label:r,hint:x,file:i,previewUrl:n,onFile:m,onClear:j}){return e.jsxs("div",{className:`overflow-hidden rounded-xl border-2 ${u}`,children:[e.jsxs("div",{className:"flex items-center gap-2 border-b border-slate-200 px-2.5 py-1.5 dark:border-slate-700",children:[e.jsx(ue,{size:12,className:"text-lime-600 dar

1k:text-lime-300"}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:`text-[11px] font-black ${b}`,children:r}),e.jsx("p",{className:`text-[9px] font-semibold ${l}`,children:x})]}),i?e.jsx("button",{type:"button",onClick:j,className:"ml-auto rounded border border-slate-300 p-0.5 text-slate-500","aria-label":"Hapus",children:e.jsx(Z,{size:12})}):null]}),e.jsxs("label",{className:"block cursor-pointer p-2",children:[n?e.jsx("img",{src:n,alt:r,className:"h-20 w-full rounded-lg object-cover"}):e.jsx("div",{className:"flex h-20 items-center justify-center rounded-lg border-2 border-dashed border-slate-300 text-[10px] font-bold text-slate-400 dark:border-slate-600",children:"Opsional"}),e.jsx("input",{type:"file",accept:"image/png,image/jpeg,image/webp,image/gif",className:"hidden",onChange:d=>m(d.target.files?.[0]||null)})]})]})}function $e(){const{isDark:r}=le(),x=re(r),[i,n]=s.useState(""),[m,j]=s.useState(""),[d,R]=s.useState(null),[h,O]=s.useState(null),[z,G]=s.useState(null),[E,H]=s.useState(null),[C,D]=s.useState("portrait"),[N,v]=s.useState(!1),[A,g]=s.useState(""),[p,T]=s.useState(null),[ee,q]=s.useState({feed:null,hold:null}),[w,I]=s.useState("feed"),[ae,P]=s.useState(!1);s.useEffect(()=>()=>{f(z),f(E)},[z,E]);const $=s.useCallback((a,t)=>{a==="q"?(G(o=>(f(o),t?URL.createObjectURL(t):null)),R(t)):(H(o=>(f(o),t?URL.createObjectURL(t):null)),O(t)),T(null),q({feed:null,hold:null}),g("")},[]),te=s.useCallback(()=>{const a=W[0];n(a.q),j(a.a),R(null),O(null),G(t=>(f(t),null)),H(t=>(f(t),null)),D("portrait"),I("feed"),g("")},[]),Q=L.find(a=>a.id===C)||L[0],y=!!(i.trim()||m.trim()||d||h),F=s.useCallback(async()=>{if(y){v(!0),g("");try{const{w:a,h:t}=Q;let o=null,B=null;d&&(o=J(await X(d),a,t)),h&&(B=J(await X(h),a,t));const U=ie(a,t,{questionRgba:o,answerRgba:B,questionText:i.trim(),answerText:m.trim()});T({rgba:U,width:a,height:t}),q({feed:V(U,a,t,"#ffffff"),hold:V(U,a,t,"#000000")})}catch(a){g(a?.message||"Gagal membuat PNG"),T(null),q({feed:null,hold:null})}finally{v(!1)}}},[y,Q,d,h,i,m]);s.useEffect(()=>{if(!y)return;const a=setTimeout(()=>{F()},280);return()=>clearTimeout(a)},[y,i,m,d,h,C,F]);const se=s.useCallback(async()=>{if(p){v(!0),g("");try{await ne(p.rgba,p.width,p.height,be,"png32")}catch(a){g(a?.message||"Gagal unduh")}finally{v(!1)}}},[p]),_=ee[w],M=_?_.toDataURL("image/png"):null;return e.jsxs("div",{className:"mx-auto w-full max-w-5xl space-y-4 px-3 pb-16 pt-3 sm:px-5 sm:pt-4",children:[e.jsx(de,{current:"quiz-bw",trailing:e.jsxs("button",{type:"button",onClick:()=>P(!0),className:`inline-flex items-center gap-1.5 rounded-xl border-2 bg-lime-200 px-2.5 py-1.5 text-[11px] font-black text-slate-900 ${k} ${c} dark:bg-lime-900 dark:text-lime-50`,children:[e.jsx(oe,{size:13}),"Lihat contoh hasil"]})}),e.jsx(ge,{open:ae,onClose:()=>P(!1),busy:N,onUseDemo:()=>{te(),P(!1)}}),e.jsxs("section",{className:`relative overflow-hidden rounded-2xl border-2 ${u} ${c}`,children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-br from-lime-100/80 via-white to-slate-100 dark:from-lime-950/40 dark:via-slate-950 dark:to-slate-900"}),e.jsxs("div",{className:"relative p-4 sm:p-5",children:[e.jsxs("div",{className:"flex items-center gap-2 text-lime-800 dark:text-lime-300",children:[e.jsx(S,{size:16}),e.jsx("span",{className:"text-[10px] font-black uppercase tracking-[0.18em]",children:"Fun · Viral PNG"})]}),e.jsx("h1",{className:`mt-1.5 text-xl font-black sm:text-2xl ${b}`,children:"Quiz B/W"}),e.jsx("p",{className:`mt-1 max-w-2xl text-sm font-medium ${l}`,children:"Pertanyaan hitam di feed putih; jawaban putih baru muncul saat hold/dark. Trik klasik, tetap nge-hit."}),e.jsx("ol",{className:"mt-4 grid gap-2 sm:grid-cols-3",children:he.map(a=>e.jsxs("li",{className:`flex gap-2.5 rounded-xl border-2 bg-white/80 p-2.5 dark:bg-slate-900/70 ${k}`,children:[e.jsx("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border-2 border-slate-900 bg-lime-200 text-[11px] font-black text-slate-900 dark:border-lime-400/50 dark:bg-lime-900 dark:text-lime-100",children:a.n}),e.jsxs("div",{children:[e.jsx("p",{className:`text-[12px] font-black ${b}`,children:a.title}),e.jsx("p",{className:`mt-0.5 text-[11px] font-medium leading-snug ${l}`,children:a.text})]})]},a.n))})]})]}),e.jsxs("div",{className:"flex flex-col gap-2 sm:flex-row",children:[e.jsxs("div",{className:"flex flex-1 items-start gap-2 rounded-2xl border-2 border-emerald-400/70 bg-emerald-50 px-3 py-2.5 text-xs font-semibold text-emerald-950 dark:border-emerald-500/40 dark:bg-emerald-950/35 dar

1k:text-emerald-100",children:[e.jsx(ce,{size:15,className:"mt-0.5 shrink-0"}),e.jsx("span",{children:"Semua proses lokal di browser. Gambar tidak di-upload ke server XGrind."})]}),e.jsxs("div",{className:"flex flex-1 items-start gap-2 rounded-2xl border-2 border-amber-400/80 bg-amber-50 px-3 py-2.5 text-xs font-semibold text-amber-950 dark:border-amber-500/40 dark:bg-amber-950/35 dark:text-amber-100",children:[e.jsx(xe,{size:15,className:"mt-0.5 shrink-0"}),e.jsxs("span",{children:["Post dari ",e.jsx("strong",{children:"desktop x.com"}),". Jangan pakai abu-abu — harus hitam/putih pekat."]})]})]}),e.jsxs("div",{className:"grid gap-4 lg:grid-cols-[1.05fr_0.95fr] lg:items-start",children:[e.jsxs("section",{className:"space-y-3",children:[e.jsx("h2",{className:`text-[11px] font-black uppercase tracking-[0.14em] ${l}`,children:"Langkah 1 · Soal & jawaban"}),e.jsxs("div",{className:`rounded-xl border-2 p-2.5 ${u}`,children:[e.jsx("p",{className:`mb-2 text-[10px] font-black uppercase tracking-wide ${l}`,children:"Preset cepat"}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:W.map(a=>e.jsxs("button",{type:"button",onClick:()=>{n(a.q),j(a.a)},className:"rounded-lg border-2 border-slate-200 bg-slate-50 px-2.5 py-1.5 text-[10px] font-black text-slate-700 hover:border-lime-400 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200",children:[a.q.slice(0,28),"…"]},a.q))})]}),e.jsxs("label",{className:`block rounded-xl border-2 p-2.5 ${u}`,children:[e.jsx("span",{className:`text-[10px] font-black uppercase tracking-wide ${l}`,children:"Pertanyaan (hitam · feed)"}),e.jsx("textarea",{value:i,onChange:a=>n(a.target.value),rows:3,placeholder:"Siapa yang...",className:"mt-1.5 w-full resize-y rounded-lg border-2 border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-900 outline-none focus:border-lime-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"})]}),e.jsxs("label",{className:`block rounded-xl border-2 p-2.5 ${u}`,children:[e.jsx("span",{className:`text-[10px] font-black uppercase tracking-wide ${l}`,children:"Jawaban (putih · hold)"}),e.jsx("textarea",{value:m,onChange:a=>j(a.target.value),rows:3,placeholder:"Jawabannya...",className:"mt-1.5 w-full resize-y rounded-lg border-2 border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-900 outline-none focus:border-lime-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"})]}),e.jsxs("div",{className:"grid gap-2 sm:grid-cols-2",children:[e.jsx(K,{label:"Gambar pertanyaan",hint:"Siluet gelap → tinta hitam",file:d,previewUrl:z,onFile:a=>$("q",a),onClear:()=>$("q",null)}),e.jsx(K,{label:"Gambar jawaban",hint:"Area terang → tinta putih",file:h,previewUrl:E,onFile:a=>$("a",a),onClear:()=>$("a",null)})]}),e.jsxs("div",{className:`rounded-xl border-2 p-2.5 ${u}`,children:[e.jsx("p",{className:`mb-2 text-[10px] font-black uppercase tracking-wide ${l}`,children:"Ukuran"}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:L.map(a=>e.jsx("button",{type:"button",onClick:()=>D(a.id),className:`rounded-lg px-2.5 py-1.5 text-[11px] font-black ${C===a.id?"bg-lime-300 text-slate-900 dark:bg-lime-700 dark:text-white":"bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"}`,children:a.label},a.id))})]}),y?e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:F,disabled:N,className:`inline-flex items-center gap-2 rounded-xl border-2 px-4 py-2.5 text-sm font-black disabled:opacity-60 ${x} ${c}`,children:[N?e.jsx(Y,{size:16,className:"animate-spin"}):e.jsx(S,{size:16}),N?"Memproses…":"Generate ulang"]}),e.jsxs("button",{type:"button",onClick:se,disabled:!p||N,className:`inline-flex items-center gap-2 rounded-xl border-2 border-slate-900 bg-cyan-300 px-4 py-2.5 text-sm font-black text-slate-900 disabled:cursor-not-allowed disabled:opacity-50 ${c} dark:border-cyan-400/50 dark:bg-cyan-800 dark:text-cyan-50`,children:[e.jsx(me,{size:16}),"Unduh PNG"]})]}):e.jsx("p",{className:`rounded-xl border-2 border-dashed px-3 py-2 text-xs font-bold ${l} ${k}`,children:"Isi pertanyaan dan/atau jawaban — generate otomatis."}),A?e.jsx("p",{className:"rounded-xl border-2 border-rose-300 bg-rose-50 px-3 py-2 text-xs font-bold text-rose-800 dark:border-rose-700 dark:bg-rose-950/40 dark:text-rose-200",children:A}):null,p?e.jsxs("div",{className:`rounded-2xl border-2 p-3 ${u} ${c}`,children:[e.jsx("p",{className:`text-[11px] font-black uppercase tracking-wide ${b}`,children:"Siap post?"}),e.jsxs("ul",{className:`mt-2 space-y-1.5 text-[12px] font-semibold ${l}`,children:[e.jsx("li",{children:"✓ Unduh PNG32 transparan"}),e.jsx("li",{children:"✓ Post dari browser desktop → x.com"}),e.jsx("li",{children:"✓ Feed = soal · Hold = jawaban"})]})]}):null]}),e.jsxs("section",{className:"space-y-3",children:[e.jsx("h2",{className:`text-[11px] font-black uppercase tracking-[0.14em] ${l}`,children:"Langkah 2 · Preview"}),e.jsxs("div",{className:`overflow-hidden rounded-[1.6rem] border-2 border-slate-900 bg-slate-950 ${c} dark:border-indigo-400/45`,children:[e.jsx("div",{className:"border-b border-white/10 px-3 py-2",children:e.jsx("p",{className:"text-[11px] font-black uppercase tracking-wide text-cyan-300",children:w==="feed"?"Timeline putih (soal)":"Hold hitam (jawaban)"})}),e.jsx("div",{className:"flex min-h-[260px] items-center justify-center p-3",style:{background:w==="feed"?"#ffffff"

1:"#000000"},children:M?e.jsx("img",{src:M,alt:w,className:"max-h-80 w-full object-contain"}):e.jsx("p",{className:"px-3 py-10 text-center text-xs font-semibold text-slate-400",children:"Isi teks untuk preview"})}),e.jsx("div",{className:"flex gap-1 border-t border-white/10 p-1.5",children:[{id:"feed",label:"Feed",Icon:S},{id:"hold",label:"Hold",Icon:pe}].map(({id:a,label:t,Icon:o})=>e.jsxs("button",{type:"button",onClick:()=>I(a),className:`flex flex-1 items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-[10px] font-black ${w===a?"bg-lime-300 text-slate-900":"text-slate-400 hover:bg-white/5"}`,children:[e.jsx(o,{size:12}),t]},a))})]}),e.jsx("p",{className:`text-[11px] font-medium leading-snug ${l}`,children:"Feed harus hanya soal hitam. Hold harus hanya jawaban putih. Kalau keduanya kelihatan bersamaan, perpendek teks."})]})]})]})}export{$e as default};