\n \n\n\n",[],[174,215],"e5437dbe-3432-11f1-915a-42b51c65c3df","app.tsx","e5437ea4-3432-11f1-915a-42b51c65c3df",7,["D",1775752862451],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ─── Types ────────────────────────────────────────────────────\ninterface Account {\n blobKey: string;\n email: string;\n createdAt: string;\n size: number;\n}\n\ninterface RunStatus {\n status: \"idle\" | \"running\" | \"success\" | \"error\";\n logs: string[];\n result?: { email: string; password: string; dob: string; profileName: string; blobKey: string };\n error?: string;\n liveViewUrl?: string;\n}\n\n// ─── Styles ───────────────────────────────────────────────────\nconst css = `\n @keyframes spin { to { transform: rotate(360deg); } }\n @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }\n @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }\n @keyframes glow {\n 0%,100% { box-shadow: 0 0 20px rgba(254,44,85,.3); }\n 50% { box-shadow: 0 0 40px rgba(254,44,85,.6); }\n }\n\n .container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 24px 20px 60px;\n }\n\n /* ── Header ── */\n .header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 36px;\n }\n .logo {\n width: 48px; height: 48px;\n background: linear-gradient(135deg, #fe2c55, #ff0050);\n border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 24px;\n box-shadow: 0 4px 20px rgba(254,44,85,.4);\n }\n .header-text h1 {\n font-size: 22px; font-weight: 700;\n background: linear-gradient(135deg, #fe2c55 20%, #25f4ee 80%);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n }\n .header-text p { font-size: 13px; color: var(--muted); margin-top: 2px; }\n\n /* ── Source link ── */\n .source-link {\n margin-left: auto;\n font-size: 12px; color: var(--muted);\n text-decoration: none;\n padding: 6px 12px;\n border: 1px solid var(--border);\n border-radius: 6px;\n transition: all .2s;\n }\n .source-link:hover { color: var(--text); border-color: var(--accent); }\n\n /* ── Card ── */\n .card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 24px;\n margin-bottom: 20px;\n animation: fadeIn .3s ease;\n }\n .card-title {\n font-size: 14px; font-weight: 600;\n text-transform: uppercase; letter-spacing: .06em;\n color: var(--muted); margin-bottom: 18px;\n display: flex; align-items: center; gap: 8px;\n }\n\n /* ── Config form ── */\n .config-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n @media(max-width: 600px) { .config-grid { grid-template-columns: 1fr; } }\n\n .field label {\n display: block; font-size: 12px; color: var(--muted);\n margin-bottom: 6px; font-weight: 500;\n }\n .field input, .field select {\n width: 100%;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 7px;\n padding: 10px 12px;\n color: var(--text);\n font-size: 14px;\n font-family: inherit;\n outline: none;\n transition: border-color .2s;\n }\n .field input:focus, .field select:focus { border-color: var(--accent); }\n .field input::placeholder { color: var(--muted); }\n\n /* ── Run button ── */\n .run-btn {\n width: 100%;\n margin-top: 20px;\n padding: 14px;\n background: linear-gradient(135deg, #fe2c55, #ff0050);\n border: none; border-radius: 8px;\n color: #fff; font-size: 15px; font-weight: 600;\n cursor: pointer;\n transition: all .2s;\n display: flex; align-items: center; justify-content: center; gap: 10px;\n }\n .run-btn:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 6px 24px rgba(254,44,85,.4);\n animation: glow 1.5s ease infinite;\n }\n .run-btn:disabled { opacity: .6; cursor: not-allowed; }\n\n /* ── Status indicator ── */\n .status-bar {\n display: flex; align-items: center; gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 13px; font-weight: 500;\n }\n .status-bar.idle { background: rgba(107,107,138,.1); color: var(--muted); }\n .status-bar.running { background: rgba(245,158,11,.1); color: var(--warning); border: 1px solid rgba(245,158,11,.2); }\n .status-bar.success { background: rgba(34,197,94,.1); color: var(--success); border: 1px solid rgba(34,197,94,.2); }\n .status-bar.error { background: rgba(239,68,68,.1); color: var(--error); border: 1px solid rgba(239,68,68,.2); }\n\n .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }\n .dot.idle { background: var(--muted); }\n .dot.running { background: var(--warning); animation: pulse 1s ease infinite; }\n .dot.success { background: var(--success); }\n .dot.error { background: var(--error); }\n\n .spinner {\n width: 16px; height: 16px;\n border: 2px solid rgba(255,255,255,.2);\n border-top-color: #fff;\n border-radius: 50%;\n animation: spin .7s linear infinite;\n }\n\n /* ── Live view link ── */\n .live-view {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 8px 14px;\n background: rgba(37,244,238,.08);\n border: 1px solid rgba(37,244,238,.2);\n border-radius: 6px;\n color: var(--accent2);\n text-decoration: none;\n font-size: 12px; font-weight: 500;\n margin-bottom: 14px;\n transition: all .2s;\n }\n .live-view:hover { background: rgba(37,244,238,.15); }\n\n /* ── Logs terminal ── */\n .terminal {\n background: #08080f;\n border: 1px solid var(--border);\n border-radius: 8px;\n padding: 14px;\n height: 280px;\n overflow-y: auto;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n line-height: 1.6;\n }\n .terminal::-webkit-scrollbar { width: 4px; }\n .terminal::-webkit-scrollbar-track { background: transparent; }\n .terminal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }\n\n .log-line { padding: 1px 0; white-space: pre-wrap; word-break: break-all; }\n .log-line.info { color: #a0a0c0; }\n .log-line.success { color: var(--success); }\n .log-line.warn { color: var(--warning); }\n .log-line.error { color: var(--error); }\n .log-line.kernel { color: var(--accent2); }\n .log-line.otp { color: #c084fc; }\n .log-line.done { color: var(--accent); font-weight: 600; }\n\n /* ── Result card ── */\n .result-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin-top: 4px;\n }\n @media(max-width:560px) { .result-grid { grid-template-columns: 1fr; } }\n\n .result-item { background: var(--surface2); border-radius: 7px; padding: 12px 14px; }\n .result-item .ri-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }\n .result-item .ri-value {\n font-size: 13px; font-family: 'JetBrains Mono', monospace;\n color: var(--text); word-break: break-all;\n }\n .ri-value.green { color: var(--success); }\n .ri-value.purple { color: #c084fc; }\n\n /* ── Accounts table ── */\n .table-wrap { overflow-x: auto; }\n table { width: 100%; border-collapse: collapse; font-size: 13px; }\n thead th {\n text-align: left; padding: 10px 14px;\n font-size: 11px; font-weight: 600;\n text-transform: uppercase; letter-spacing: .06em;\n color: var(--muted);\n border-bottom: 1px solid var(--border);\n }\n tbody tr { border-bottom: 1px solid rgba(42,42,61,.5); transition: background .15s; }\n tbody tr:last-child { border-bottom: none; }\n tbody tr:hover { background: rgba(255,255,255,.02); }\n tbody td { padding: 11px 14px; color: var(--text); }\n td.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }\n\n .badge {\n display: inline-flex; align-items: center;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px; font-weight: 500;\n }\n .badge.success { background: rgba(34,197,94,.1); color: var(--success); }\n .badge.info { background: rgba(37,244,238,.1); color: var(--accent2); }\n\n .dl-btn {\n padding: 5px 12px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 5px;\n color: var(--text); font-size: 12px;\n cursor: pointer; transition: all .2s;\n text-decoration: none;\n }\n .dl-btn:hover { border-color: var(--accent); color: var(--accent); }\n\n .empty {\n text-align: center; padding: 40px 0;\n color: var(--muted); font-size: 13px;\n }\n .empty span { display: block; font-size: 32px; margin-bottom: 8px; }\n\n .refresh-btn {\n padding: 6px 14px;\n background: transparent;\n border: 1px solid var(--border);\n border-radius: 6px;\n color: var(--muted); font-size: 12px;\n cursor: pointer; transition: all .2s;\n margin-left: auto; display: block;\n }\n .refresh-btn:hover { color: var(--text); border-color: var(--accent2); }\n\n /* ── Stats row ── */\n .stats-row {\n display: flex; gap: 12px; margin-bottom: 20px;\n flex-wrap: wrap;\n }\n .stat {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 14px 20px;\n flex: 1; min-width: 120px;\n }\n .stat-value { font-size: 26px; font-weight: 700; }\n .stat-value.red { color: var(--accent); }\n .stat-value.cyan { color: var(--accent2); }\n .stat-value.green{ color: var(--success); }\n .stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }\n`;\n\n// ─── Log parser ───────────────────────────────────────────────\nfunction logClass(line: string): string {\n if (line.includes(\"✅\") || line.includes(\"✓\") || line.includes(\"XONG\")) return \"done\";\n if (line.includes(\"❌\") || line.includes(\"Lỗi\")) return \"error\";\n if (line.includes(\"[warn]\")) return \"warn\";\n if (line.includes(\"[OTP]\") || line.includes(\"[emu]\")) return \"otp\";\n if (line.includes(\"[kernel]\") || line.includes(\"[ip]\") || line.includes(\"[browser]\")) return \"kernel\";\n if (line.includes(\"[save]\") || line.includes(\"[close]\") || line.includes(\"[done]\")) return \"success\";\n return \"info\";\n}\n\n// ─── App ──────────────────────────────────────────────────────\nfunction App() {\n const [password, setPassword] = useState(\"Aa11111@\");\n const [country, setCountry] = useState(\"US\");\n const [run, setRun] = useState({ status: \"idle\", logs: [] });\n const [accounts, setAccounts] = useState([]);\n const [loadingAccs, setLoadingAccs] = useState(false);\n const logsEndRef = useRef(null);\n const pollRef = useRef | null>(null);\n\n // Auto-scroll logs\n useEffect(() => {\n logsEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [run.logs]);\n\n // Fetch accounts list\n const fetchAccounts = useCallback(async () => {\n setLoadingAccs(true);\n try {\n const res = await fetch(\"/api/accounts\");\n if (res.ok) setAccounts(await res.json());\n } finally {\n setLoadingAccs(false);\n }\n }, []);\n\n useEffect(() => { fetchAccounts(); }, [fetchAccounts]);\n\n // Start automation\n const handleRun = async () => {\n setRun({ status: \"running\", logs: [\"[init] Khởi động automation...\"] });\n\n try {\n const res = await fetch(\"/api/run\", {\n method : \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body : JSON.stringify({ password, country }),\n });\n\n const reader = res.body!.getReader();\n const decoder = new TextDecoder();\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value, { stream: true });\n const lines = chunk.split(\"\\n\").filter(l => l.startsWith(\"data: \"));\n\n for (const raw of lines) {\n try {\n const event = JSON.parse(raw.slice(6));\n\n if (event.type === \"log\") {\n setRun(prev => ({ ...prev, logs: [...prev.logs, event.message] }));\n } else if (event.type === \"liveView\") {\n setRun(prev => ({ ...prev, liveViewUrl: event.url }));\n } else if (event.type === \"done\") {\n setRun(prev => ({\n ...prev,\n status: \"success\",\n result: event.result,\n logs : [...prev.logs, `[done] ✅ Hoàn thành!`],\n }));\n fetchAccounts();\n } else if (event.type === \"error\") {\n setRun(prev => ({\n ...prev,\n status: \"error\",\n error : event.message,\n logs : [...prev.logs, `[error] ❌ ${event.message}`],\n }));\n }\n } catch (_) {}\n }\n }\n } catch (err: any) {\n setRun(prev => ({\n ...prev,\n status: \"error\",\n error : err.message,\n logs : [...prev.logs, `[error] ❌ ${err.message}`],\n }));\n }\n };\n\n // Download account file\n const downloadAccount = async (blobKey: string) => {\n const res = await fetch(`/api/download?key=${encodeURIComponent(blobKey)}`);\n const text = await res.text();\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(new Blob([text], { type: \"text/plain\" }));\n a.download = blobKey.split(\"/\").pop() ?? \"account.txt\";\n a.click();\n };\n\n const statusLabel = {\n idle : \"Sẵn sàng\",\n running: \"Đang chạy...\",\n success: \"Thành công\",\n error : \"Lỗi\",\n }[run.status];\n\n return (\n <>\n \n

\n\n {/* Header */}\n

🎵

TikTok Auto Signup

Kernel Browser · Playwright · Val Town

\n ⟨/⟩ source\n

\n\n {/* Stats */}\n

\n {run.status === \"running\" ? \"●\" : accounts.length}\n

\n {run.status === \"running\" ? \"Đang chạy\" : \"Tổng accounts\"}\n

\n {accounts.length}\n

Đã lưu

🇺🇸

Proxy US

📱

iPhone SE

\n\n {/* Config + Run */}\n

⚙️ Cấu hình

\n Password\n setPassword(e.target.value)}\n placeholder=\"Aa11111@\"\n disabled={run.status === \"running\"}\n />\n

\n Proxy Country\n setCountry(e.target.value)}\n disabled={run.status === \"running\"}\n >\n \n \n \n \n \n

\n \n {run.status === \"running\"\n ? <>

Đang chạy automation...\n : <>▶ Bắt đầu đăng ký TikTok\n }\n \n

\n\n {/* Run status + logs */}\n

📟 Logs thực thi

\n\n

\n {statusLabel}\n {run.status === \"running\" && run.logs.length > 0 && (\n \n — {run.logs[run.logs.length - 1].replace(/^\\[[^\\]]+\\]\\s*/, \"\").slice(0, 60)}\n \n )}\n

\n\n {run.liveViewUrl && run.status === \"running\" && (\n \n 👁 Live View Browser →\n \n )}\n\n

\n {run.logs.length === 0\n ? // Nhấn \"Bắt đầu\" để xem logs...\n : run.logs.map((line, i) => (\n

{line}

\n ))\n }\n

\n\n {/* Result */}\n {run.status === \"success\" && run.result && (\n

\n KẾT QUẢ\n

{run.result.email}

Password

{run.result.password}

Ngày sinh

{run.result.dob}

Kernel Profile

{run.result.profileName}

\n )}\n\n {run.status === \"error\" && (\n

\n ❌ {run.error}\n

\n )}\n

\n\n {/* Accounts table */}\n

\n 📂 Danh sách Accounts\n \n

\n\n {accounts.length === 0 ? (\n

\n 📭\n Chưa có account nào. Hãy chạy automation!\n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {accounts.map(acc => (\n \n \n \n \n \n \n \n ))}\n \n

Email	Thời gian tạo	Kích thước	Trạng thái	Tải xuống
\n {acc.email}\n	\n {new Date(acc.createdAt).toLocaleString(\"vi-VN\")}\n	{(acc.size / 1024).toFixed(1)} KB	✓ Saved	\n downloadAccount(acc.blobKey)}\n >\n ↓ .txt\n \n

\n )}\n

\n\n

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[174,223],["D",1775752782691],[191,192],[174],["D",1775751977873],{"_11":12,"_92":88},{"_11":12,"_86":-5,"_87":88,"_47":48,"_89":90,"_91":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_79":42,"_80":81,"_82":83,"_84":14,"_85":12},"ctx",{"_72":-5,"_115":270,"_271":272,"_273":274,"_275":40,"_276":40,"_277":40,"_278":52,"_279":-5,"_280":-7,"_281":-7,"_282":56,"_283":40,"_284":40,"_285":-5,"_286":40,"_287":40,"_288":40,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":26,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1