Rip out Theia, bump submodules, retire platform/ scaffold, snapshot docs + design assets
Theia rip-out (parent):
- Remove theia submodule entry (the local fork, Gitea repo, Coolify app,
Cloud Run services, and Artifact Registry image are all gone)
- Drop README.md + INFRASTRUCTURE.md (obsolete "Project OS" snapshots
that also leaked API tokens) and setup.sh (Theia clone bootstrap)
- Delete UI-DESIGN-GUIDE.md, BACKEND_AGENTS_PLAN.md, VIBN_BUILD_PLAN.md,
VISUAL_EDITOR_PLAN.md, core-packages.md, ai-packages.md, tools-list.md
(all 100% Theia-specific or superseded)
- Surgical scrubs of remaining Theia mentions in
AGENT_EXECUTION_ARCHITECTURE.md and TURBOREPO_MIGRATION_PLAN.md
Submodule bumps:
- vibn-agent-runner: Theia rip-out + MCP refactor (api/wrapper/server
pattern across shell/file/git/memory/prd/search/agent/gitea/coolify)
- vibn-frontend: Theia rip-out + P5.1 attach E2E + Justine UI WIP
Retire platform/ scaffold:
- Remove platform/backend/ (control-plane, executors, mcp-adapter),
platform/client-ide/ (gcp-productos extension), platform/contracts/,
platform/infra/terraform/, platform/scripts/templates/turborepo/
(replaced by vibn-agent-runner + vibn-frontend + Coolify direct)
- Drop architecture.md, technical_spec.md, vision-ext.md,
"1.Generate Control Plane API scaffold.md" (same era)
Docs / planning snapshots (new):
- AI_CAPABILITIES.md, AI_CAPABILITIES_ROADMAP.md
- AGENT_TELEMETRY_STREAMING_PROJECT.md
- VIBN_PRD.md, product-idea-a.md
Design assets (new):
- branding/{coolify,gitea,ux-testing}/ static brand collateral
- justine/ HTML mockups for the new onboarding/build flows
- preview-assist-ui/ Vite scratch app
- master-ai.code-workspace
Infra helpers (new):
- setup-coolify-montreal.sh provisioner
- gitea-docker-compose.yml
- vibn-coolify-schema.sql for the Coolify Postgres extensions
- prd-agent-prompt.pdf, prompt, root.txt, remixed-9edec9e9.tsx scratch
- flatten.sh helper
.gitignore: ignore **/node_modules, **/.next, **/.turbo, **/coverage
Made-with: Cursor
This commit is contained in:
412
justine/vibn front end/09_build.html
Normal file
412
justine/vibn front end/09_build.html
Normal file
@@ -0,0 +1,412 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="favicon_clean.ico">
|
||||
<script>if(localStorage.getItem('vibn-theme')==='dark')document.documentElement.dataset.theme='dark';</script>
|
||||
<title>vibn — Build</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
:root{
|
||||
--ink:#1A1A1A;--ink2:#2c2c2a;--ink3:#6366F1;--mid:#6B7280;--muted:#888780;
|
||||
--stone:#b4b2a9;--parch:#d3d1c7;--cream:#eef2ff;--paper:#F5F3FF;--white:#FFFFFF;--border:#e0e7ff;
|
||||
--indigo:#6366F1;--indigo-dark:#4338CA;--indigo-deep:#2E2A5E;
|
||||
--indigo-soft:rgba(99,102,241,0.08);--indigo-ring:rgba(99,102,241,0.12);--subtitle:#7171b7;
|
||||
}
|
||||
body{font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(to bottom,#FAFAFA,#F5F3FF);display:flex;flex-direction:column;height:100vh;overflow:hidden;}
|
||||
.f{font-family:'Plus Jakarta Sans',sans-serif;}
|
||||
.sidebar-phase{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;}
|
||||
.sidebar-phase.active{background:#fafaff;}
|
||||
.phase-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;}
|
||||
@keyframes spin{to{transform:rotate(360deg);}}
|
||||
.spinning{display:inline-block;animation:spin 1s linear infinite;}
|
||||
|
||||
/* ── Progress screen ── */
|
||||
.grad-title{background:linear-gradient(135deg,#1A1A2E 0%,#2E2A5E 30%,#4338CA 65%,#6366F1 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
|
||||
[data-theme="dark"] .grad-title{background:linear-gradient(135deg,#d0d0f0 0%,#9090cc 30%,#6C7CFF 65%,#A8B4FF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
|
||||
@keyframes grad-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
|
||||
.grad-anim{background:linear-gradient(270deg,#1A1A2E,#4338CA,#6366F1,#A5B4FC,#6366F1,#4338CA,#1A1A2E);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grad-flow 4s ease infinite;}
|
||||
[data-theme="dark"] .grad-anim{background:linear-gradient(270deg,#4B42D8,#6C7CFF,#C7D2FE,#A8B4FF,#6C7CFF,#4B42D8);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grad-flow 4s ease infinite;}
|
||||
@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}80%{opacity:1}100%{transform:translateY(105vh) rotate(800deg);opacity:0}}
|
||||
.step-num{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#4338CA,#818CF8);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:700;flex-shrink:0;}
|
||||
.btn-gitea{background:transparent;color:var(--mid);border:1px solid var(--border);border-radius:11px;padding:14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background 0.18s,border-color 0.18s,color 0.18s;}
|
||||
.btn-gitea:hover{background:var(--cream);border-color:rgba(99,102,241,0.22);color:var(--indigo);}
|
||||
[data-theme="dark"] .btn-gitea{border-color:var(--dm-border)!important;color:var(--dm-text-3)!important;}
|
||||
[data-theme="dark"] .btn-gitea:hover{background:var(--dm-accent-fill)!important;border-color:var(--dm-accent-border)!important;color:var(--dm-accent)!important;}
|
||||
|
||||
/* ── Launch section ── */
|
||||
.launch-divider{border:none;border-top:1px solid var(--border);margin:28px 0;}
|
||||
.launch-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 28px 24px;box-shadow:0 2px 12px rgba(99,102,241,0.06),0 0 0 1px rgba(255,255,255,0.60);}
|
||||
[data-theme="dark"] .launch-card{background:rgba(255,255,255,0.07)!important;border-color:rgba(255,255,255,0.10)!important;box-shadow:0 0 0 1px rgba(255,255,255,0.12),0 0 28px rgba(255,255,255,0.07),0 4px 24px rgba(0,0,0,0.35)!important;}
|
||||
.build-step{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);}
|
||||
.build-step:last-child{border-bottom:none;}
|
||||
.build-step-icon{width:24px;height:24px;border-radius:6px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink3);flex-shrink:0;opacity:0.8;transform:scale(0.95);}
|
||||
.build-step > div > span{font-size:14px!important;}
|
||||
.build-step > span{font-size:12px!important;color:var(--muted)!important;}
|
||||
.build-cta{width:100%;background:linear-gradient(135deg,#2E2A5E 0%,#4338CA 55%,#6366F1 100%);color:#fff;border:none;border-radius:12px;padding:16px 24px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:-0.01em;transition:box-shadow 0.2s,transform 0.2s;box-shadow:0 8px 24px rgba(99,102,241,0.25),0 2px 6px rgba(99,102,241,0.12);}
|
||||
.build-cta:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(99,102,241,0.40),0 0 0 4px rgba(99,102,241,0.10);}
|
||||
.build-cta:active{transform:translateY(0);box-shadow:0 2px 10px rgba(99,102,241,0.22);}
|
||||
.build-cta:disabled{opacity:0.75;cursor:not-allowed;transform:none;}
|
||||
.includes-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:500;color:var(--mid);background:var(--cream);border-radius:20px;padding:3px 9px;}
|
||||
[data-theme="dark"] .launch-divider{border-top-color:rgba(255,255,255,0.06)!important;}
|
||||
[data-theme="dark"] .build-cta{background:linear-gradient(135deg,#4B42D8 0%,#6C7CFF 100%)!important;box-shadow:0 4px 22px rgba(108,124,255,0.38),inset 0 1px 0 rgba(255,255,255,0.12)!important;}
|
||||
[data-theme="dark"] .build-cta:hover{box-shadow:0 8px 36px rgba(108,124,255,0.55),0 0 0 4px rgba(108,124,255,0.16),inset 0 1px 0 rgba(255,255,255,0.16)!important;}
|
||||
[data-theme="dark"] .includes-chip{background:rgba(108,124,255,0.12)!important;color:var(--dm-text-3)!important;}
|
||||
|
||||
/* ── Dark mode tokens — exact match with architect / describe ── */
|
||||
[data-theme="dark"]{--ink:#EEEEFF;--ink2:#B8B8D0;--ink3:#8484A8;--mid:#9898B8;--muted:#c2c2ee;--border:rgba(255,255,255,0.08);
|
||||
--cream:rgba(108,124,255,0.14);--paper:#0A1120;--white:rgba(255,255,255,0.05);--stone:rgba(255,255,255,0.08);
|
||||
--parch:rgba(255,255,255,0.06);--indigo:#6C7CFF;--indigo-dark:#6C7CFF;--indigo-deep:#4B42D8;--subtitle:#a8a8d7;--text:#d9d9ee;
|
||||
--indigo-soft:rgba(108,124,255,0.14);--indigo-ring:rgba(108,124,255,0.22);
|
||||
--dm-surf-sidebar:rgba(12,18,34,0.72);--dm-surf-topbar:rgba(12,18,34,0.58);--dm-surf-panel:rgba(12,18,34,0.58);
|
||||
--dm-surf-card:rgba(255,255,255,0.07);--dm-border:rgba(255,255,255,0.08);
|
||||
--dm-border-strong:rgba(255,255,255,0.14);--dm-accent:#6C7CFF;
|
||||
--dm-accent-fill:rgba(108,124,255,0.14);--dm-accent-fill-mid:rgba(108,124,255,0.20);--dm-accent-border:rgba(108,124,255,0.55);
|
||||
--dm-text-1:#EEEEFF;--dm-text-2:#B4B4CC;--dm-text-3:#d2d2ef;}
|
||||
[data-theme="dark"] body{background:linear-gradient(to bottom,rgba(12, 18, 34, 0.58) 0%,rgba(60,120,255,0.10) 38%,transparent 62%),linear-gradient(to bottom,rgba(108,124,255,0.10),transparent 180px),radial-gradient(900px 520px at 14% -8%,rgba(108,124,255,0.24),transparent 62%),radial-gradient(760px 420px at 88% 0%,rgba(72,145,255,0.16),transparent 60%),linear-gradient(180deg,#18213B 0%,#101726 48%,#0A1120 100%);}[data-theme="dark"] #mock {background: #fff !important;}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
[data-theme="dark"] .sidebar-col{background:var(--dm-surf-sidebar)!important;border-right:1px solid var(--dm-border)!important;box-shadow:2px 0 28px rgba(0,0,0,0.60)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="border-top:1px solid #e5e7eb"]{border-top-color:var(--dm-border)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="background:#e5e7eb"]{background:rgba(255,255,255,0.08)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="color:#1a1a1a"]{color:var(--dm-text-1)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="color:#6b7280"]{color:var(--dm-text-3)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="color:#444441"]{color:var(--dm-text-3)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="color:#9ca3af"]{color:var(--dm-text-3)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="background:#6366F1"]{background:var(--dm-accent)!important;color:#0F1424!important;}
|
||||
[data-theme="dark"] .sidebar-phase.active{background:var(--dm-accent-fill)!important;}
|
||||
[data-theme="dark"] .sidebar-phase:not(.active):hover{background:rgba(255,255,255,0.08)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="background:#eef2ff"]{background:var(--dm-accent-fill)!important;border-color:var(--dm-accent-border)!important;}
|
||||
[data-theme="dark"] .sidebar-col [style*="background:#eef2ff"] span{color:var(--dm-accent)!important;}
|
||||
[data-theme="dark"] #sidebar-project-name{color:var(--dm-text-3)!important;}
|
||||
|
||||
/* ── Main content ── */
|
||||
[data-theme="dark"] #screen-review{color:var(--dm-text-1);}
|
||||
/* Cards */
|
||||
[data-theme="dark"] [style*="background:var(--white)"]{background:var(--dm-surf-card)!important;}
|
||||
[data-theme="dark"] [style*="border:1px solid var(--border)"]{border-color:var(--dm-border)!important;}
|
||||
[data-theme="dark"] [style*="border-bottom:1px solid var(--border)"]{border-bottom-color:var(--dm-border)!important;}
|
||||
[data-theme="dark"] [style*="border-right:1px solid var(--border)"]{border-right-color:var(--dm-border)!important;}
|
||||
/* Infra note & icon boxes using --cream */
|
||||
[data-theme="dark"] [style*="background:var(--cream)"]{background:var(--dm-accent-fill)!important;border-color:var(--dm-border)!important;}
|
||||
/* Progress active row in renderSteps */
|
||||
[data-theme="dark"] #steps-list [style*="background:var(--cream)"]{background:var(--dm-accent-fill)!important;}
|
||||
/* Step done-dot: background:var(--ink) → accent; checkmark span inside: color:var(--white) → white */
|
||||
[data-theme="dark"] #steps-list [style*="background:var(--ink)"]{background:var(--dm-accent)!important;}
|
||||
[data-theme="dark"] #steps-list [style*="color:var(--white)"]{color:#fff!important;}
|
||||
/* Done-section numbered circles and their text */
|
||||
[data-theme="dark"] #done-section [style*="background:var(--ink)"]{background:var(--dm-accent)!important;color:#fff!important;}
|
||||
/* Done-section "Open my app" button */
|
||||
[data-theme="dark"] #done-section a button{background:linear-gradient(135deg,#4B42D8 0%,#6C7CFF 100%)!important;color:#fff!important;box-shadow:0 4px 22px rgba(108,124,255,0.38)!important;}
|
||||
/* Secondary "View in Gitea" button */
|
||||
[data-theme="dark"] #done-section [style*="background:var(--white)"][style*="color:var(--mid)"]{background:rgba(255,255,255,0.07)!important;border-color:var(--dm-border)!important;color:var(--dm-text-3)!important;}
|
||||
|
||||
/* ── CTA build button ── */
|
||||
[data-theme="dark"] button[onclick="startBuild()"]{background:linear-gradient(135deg,#4B42D8 0%,#6C7CFF 100%)!important;color:#fff!important;box-shadow:0 4px 22px rgba(108,124,255,0.38),inset 0 1px 0 rgba(255,255,255,0.14)!important;}
|
||||
[data-theme="dark"] button[onclick="startBuild()"]:hover{box-shadow:0 6px 32px rgba(108,124,255,0.50),inset 0 1px 0 rgba(255,255,255,0.18)!important;}
|
||||
|
||||
/* ── Save & dark-toggle buttons ── */
|
||||
[data-theme="dark"] button[onclick="saveAndExit()"]{background:var(--dm-accent-fill)!important;border-color:var(--dm-accent-border)!important;}
|
||||
[data-theme="dark"] button[onclick="saveAndExit()"]:hover{background:var(--dm-accent-fill-mid)!important;}
|
||||
[data-theme="dark"] button[onclick="saveAndExit()"]:hover span{color:#fff!important;}
|
||||
[data-theme="dark"] button[onclick="saveAndExit()"] span{color:var(--dm-accent)!important;}
|
||||
[data-theme="dark"] #dark-toggle{background:rgba(255,255,255,0.05)!important;border-color:var(--dm-border)!important;color:var(--dm-text-3)!important;}
|
||||
[data-theme="dark"] #dark-toggle:hover{background:rgba(255,255,255,0.10)!important;color:var(--dm-text-1)!important;}
|
||||
[data-theme="dark"] .vibn-avatar{background:var(--dm-accent)!important;}
|
||||
|
||||
/* ── Scrollbar ── */
|
||||
[data-theme="dark"] ::-webkit-scrollbar{width:6px;height:6px;}
|
||||
[data-theme="dark"] ::-webkit-scrollbar-track{background:#0A1120;}
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px;}
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(108,124,255,0.45);}
|
||||
[data-theme="dark"] *{scrollbar-color:rgba(255,255,255,0.12) #0A1120;scrollbar-width:thin;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:flex;height:100%;overflow:hidden;">
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<div class="sidebar-col" style="width:200px;background:#ffffff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;padding:18px 12px;flex-shrink:0;">
|
||||
<div style="padding:0 6px;margin-bottom:26px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||||
<div class="vibn-avatar" style="width:26px;height:26px;background:linear-gradient(135deg,#2E2A5E,#4338CA);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><span class="f" style="font-size:13px;font-weight:700;color:#FFFFFF;">V</span></div>
|
||||
<span class="f" style="font-size:16px;font-weight:700;color:#1a1a1a;letter-spacing:-0.02em;">vibn</span>
|
||||
</div>
|
||||
<div id="sidebar-project-name" style="font-size:11px;font-weight:500;color:#9ca3af;padding-left:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;"></div>
|
||||
</div>
|
||||
<div style="font-size:9.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#9ca3af;padding:0 6px;margin-bottom:8px;">MVP Setup</div>
|
||||
<div style="display:flex;flex-direction:column;gap:2px;flex:1;">
|
||||
<div class="sidebar-phase" onclick="window.location.href='05_describe.html'" style="cursor:pointer;" onmouseover="this.style.background='#f5f3ff'" onmouseout="this.style.background='transparent'">
|
||||
<div class="phase-dot" style="background:#6366F1;color:#ffffff;">✓</div>
|
||||
<div style="font-size:12.5px;color:#6b7280;">Describe</div>
|
||||
</div>
|
||||
<div class="sidebar-phase" onclick="window.location.href='06_architect.html'" style="cursor:pointer;" onmouseover="this.style.background='#f5f3ff'" onmouseout="this.style.background='transparent'">
|
||||
<div class="phase-dot" style="background:#6366F1;color:#ffffff;">✓</div>
|
||||
<div style="font-size:12.5px;color:#6b7280;">Architect</div>
|
||||
</div>
|
||||
<div class="sidebar-phase" onclick="window.location.href='07_design.html'" style="cursor:pointer;" onmouseover="this.style.background='#f5f3ff'" onmouseout="this.style.background='transparent'">
|
||||
<div class="phase-dot" style="background:#6366F1;color:#ffffff;">✓</div>
|
||||
<div style="font-size:12.5px;color:#6b7280;">Design</div>
|
||||
</div>
|
||||
<div class="sidebar-phase" onclick="window.location.href='08_website.html'" style="cursor:pointer;" onmouseover="this.style.background='#f5f3ff'" onmouseout="this.style.background='transparent'">
|
||||
<div class="phase-dot" style="background:#6366F1;color:#ffffff;">✓</div>
|
||||
<div style="font-size:12.5px;color:#6b7280;">Website</div>
|
||||
</div>
|
||||
<div class="sidebar-phase active">
|
||||
<div class="phase-dot" style="background:#6366F1;color:#ffffff;">▲</div>
|
||||
<div><div style="font-size:12.5px;font-weight:600;color:#1a1a1a;">Build MVP</div><div style="font-size:10px;color:#9ca3af;">Review & launch</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid #e5e7eb;margin-top:14px;padding-top:12px;">
|
||||
<button onclick="saveAndExit()" style="display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:#eef2ff;border:1px solid #e0e7ff;border-radius:8px;padding:9px 10px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background 0.15s;" onmouseover="this.style.background=document.documentElement.dataset.theme==='dark'?'':'#e0e7ff'" onmouseout="this.style.background=document.documentElement.dataset.theme==='dark'?'':'#eef2ff'">
|
||||
<span style="font-size:12px;font-weight:600;color:#6366F1;">Save & go to dashboard</span>
|
||||
</button>
|
||||
<button id="dark-toggle" onclick="toggleTheme()" style="margin-top:8px;display:flex;align-items:center;justify-content:center;width:100%;background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:500;color:var(--mid);transition:background 0.15s,border-color 0.15s;" onmouseover="this.style.borderColor='#6366F1';this.style.color='#6366F1';" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--mid)';">🌙 Dark mode</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div style="flex:1;overflow-y:auto;">
|
||||
|
||||
<!-- REVIEW SCREEN -->
|
||||
<div id="screen-review" style="padding:28px 32px;max-width:680px;margin:0 auto;">
|
||||
<div class="f" style="font-size:22px;font-weight:700;color:var(--ink);margin-bottom:6px;">Ready to build</div>
|
||||
<p style="font-size:13.5px;color:var(--muted);margin-bottom:22px;">Review everything below. Once you hit Build, AI codes your full product and deploys it.</p>
|
||||
<div style="background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;">
|
||||
<div style="padding:12px 18px;border-bottom:1px solid var(--border);"><span style="font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;">What's being built</span></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;">
|
||||
<div style="padding:13px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;"><div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">⛓</div><div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Sign up & login</div><div style="font-size:13px;font-weight:600;color:var(--ink);">Email + social login</div></div></div>
|
||||
<div style="padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;"><div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">$</div><div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Payments</div><div style="font-size:13px;font-weight:600;color:var(--ink);">Subscription billing</div></div></div>
|
||||
<div style="padding:13px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;"><div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">✉</div><div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Email</div><div style="font-size:13px;font-weight:600;color:var(--ink);">Transactional + marketing</div></div></div>
|
||||
<div style="padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;"><div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">◧</div><div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Product style</div><div style="font-size:13px;font-weight:600;color:var(--ink);">Clean & focused</div></div></div>
|
||||
<div style="padding:13px 18px;border-right:1px solid var(--border);display:flex;align-items:center;gap:10px;"><div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">◉</div><div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Website style</div><div style="font-size:13px;font-weight:600;color:var(--ink);">Startup energy</div></div></div>
|
||||
<div style="padding:13px 18px;display:flex;align-items:center;gap:10px;"><div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;"> ≡</div><div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Campaign topics</div><div style="font-size:13px;font-weight:600;color:var(--ink);">3 topics ready</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;">
|
||||
<div style="padding:12px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;"><span style="font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;">Pages</span><span style="font-size:12px;color:var(--muted);">14 pages total</span></div>
|
||||
<div style="padding:16px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;">
|
||||
<div style="padding:0 14px 0 0;border-right:1px solid var(--border);margin-right:14px;"><div style="font-size:9.5px;font-weight:700;color:var(--subtitle);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;">Public</div><div style="font-size:12.5px;color:var(--ink2);line-height:2.0;">Landing page<br>Pricing<br>About<br>Blog</div></div>
|
||||
<div style="padding:0 14px 0 0;border-right:1px solid var(--border);margin-right:14px;"><div style="font-size:9.5px;font-weight:700;color:var(--subtitle);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;">Auth</div><div style="font-size:12.5px;color:var(--ink2);line-height:2.0;">Sign up<br>Log in<br>Forgot password</div></div>
|
||||
<div style="padding:0 14px 0 0;border-right:1px solid var(--border);margin-right:14px;"><div style="font-size:9.5px;font-weight:700;color:var(--subtitle);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;">App</div><div style="font-size:12.5px;color:var(--ink2);line-height:2.0;">Dashboard<br>Onboarding<br>Settings</div></div>
|
||||
<div><div style="font-size:9.5px;font-weight:700;color:var(--subtitle);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;">Payments</div><div style="font-size:12.5px;color:var(--ink2);line-height:2.0;">Checkout<br>Success<br>Manage subscription</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;">
|
||||
<div style="padding:12px 18px;border-bottom:1px solid var(--border);"><span style="font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;">Your design</span></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;">
|
||||
<div style="padding:13px 18px;border-right:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">◈</div>
|
||||
<div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Feel</div><div id="build-feel" style="font-size:13px;font-weight:600;color:var(--ink);">Friendly</div></div>
|
||||
</div>
|
||||
<div style="padding:13px 18px;border-right:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
||||
<div id="build-color-swatch" style="width:26px;height:26px;border-radius:50%;background:#6366F1;flex-shrink:0;box-shadow:0 0 0 3px var(--white),0 0 0 4px #e0e7ff;"></div>
|
||||
<div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Accent</div><div id="build-color" style="font-size:13px;font-weight:600;color:var(--ink);">Indigo</div></div>
|
||||
</div>
|
||||
<div style="padding:13px 18px;display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">◇</div>
|
||||
<div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Layout</div><div id="build-structure" style="font-size:13px;font-weight:600;color:var(--ink);">Clean</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;">
|
||||
<div style="padding:12px 18px;border-bottom:1px solid var(--border);"><span style="font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;">Your website</span></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;">
|
||||
<div style="padding:13px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">✦</div>
|
||||
<div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Voice</div><div id="build-voice" style="font-size:13px;font-weight:600;color:var(--ink);">Friendly · Balanced · Warm</div></div>
|
||||
</div>
|
||||
<div style="padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">⬡</div>
|
||||
<div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Website style</div><div id="build-ws-style" style="font-size:13px;font-weight:600;color:var(--ink);">Editorial</div></div>
|
||||
</div>
|
||||
<div style="padding:13px 18px;grid-column:1/-1;display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:26px;height:26px;border-radius:7px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);flex-shrink:0;">◉</div>
|
||||
<div><div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;">Topics</div><div id="build-topics" style="font-size:13px;font-weight:600;color:var(--ink);">The problem · Who it's for · Why now</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── Launch section ── -->
|
||||
<hr class="launch-divider">
|
||||
|
||||
<div class="launch-card">
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;margin-bottom:8px;">You're ready to build your product</div>
|
||||
<p style="font-size:14px;color:var(--muted);line-height:1.5;max-width:520px;">Your app will be generated, your backend configured, and everything deployed to your infrastructure — fully automated, no code needed.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:26px;margin-bottom:6px;">
|
||||
<div style="font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;opacity:0.7;">What happens next</div>
|
||||
<div class="build-step">
|
||||
<div class="build-step-icon">✦</div>
|
||||
<div style="flex:1;"><span style="font-size:13px;font-weight:500;color:var(--ink);">Generate UI & all pages</span></div>
|
||||
<span style="font-size:11px;color:var(--stone);">~30s</span>
|
||||
</div>
|
||||
<div class="build-step">
|
||||
<div class="build-step-icon">⛁</div>
|
||||
<div style="flex:1;"><span style="font-size:13px;font-weight:500;color:var(--ink);">Set up database & backend</span></div>
|
||||
<span style="font-size:11px;color:var(--stone);">~45s</span>
|
||||
</div>
|
||||
<div class="build-step">
|
||||
<div class="build-step-icon">⛓</div>
|
||||
<div style="flex:1;"><span style="font-size:13px;font-weight:500;color:var(--ink);">Connect auth, payments & email</span></div>
|
||||
<span style="font-size:11px;color:var(--stone);">~30s</span>
|
||||
</div>
|
||||
<div class="build-step">
|
||||
<div class="build-step-icon">▲</div>
|
||||
<div style="flex:1;"><span style="font-size:13px;font-weight:500;color:var(--ink);">Deploy your app live</span></div>
|
||||
<span style="font-size:11px;color:var(--stone);">~20s</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:11.5px;color:var(--muted);margin-bottom:28px;">Takes ~2–4 minutes · All steps run in parallel</p>
|
||||
|
||||
<button id="build-cta-btn" class="build-cta" onclick="startBuild()">Build my product</button>
|
||||
<p style="font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px;margin-bottom:4px;opacity:0.85;">No code needed · You can edit everything after</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="text-align:center;padding-bottom:8px;">
|
||||
<button onclick="window.history.back()" style="background:none;border:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:var(--muted);cursor:pointer;padding:6px 0;transition:color 0.15s;" onmouseover="this.style.color='var(--ink)'" onmouseout="this.style.color='var(--muted)'">← Go back and tweak choices</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROGRESS SCREEN -->
|
||||
<div id="screen-progress" style="display:none;padding:32px;max-width:580px;margin:0 auto;width:100%;">
|
||||
<div id="prog-header" style="text-align:center;margin-bottom:26px;">
|
||||
<div class="f grad-anim" style="font-size:24px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;">Building your product…</div>
|
||||
<div id="step-counter" style="font-size:13.5px;color:var(--muted);">Step 0 of 12</div>
|
||||
</div>
|
||||
<div id="steps-list" style="background:var(--white);border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-bottom:18px;"></div>
|
||||
<div id="done-section" style="display:none;">
|
||||
<div style="background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;">
|
||||
<div class="grad-title" style="font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;">Your next 3 actions</div>
|
||||
<div style="display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);"><div class="step-num">1</div><div><div style="font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;">Open your live app</div><div style="font-size:12px;color:var(--muted);line-height:1.5;">Share the URL with 5 real people today.</div></div></div>
|
||||
<div style="display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);"><div class="step-num">2</div><div><div style="font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;">Sign up as a user</div><div style="font-size:12px;color:var(--muted);line-height:1.5;">Go through your own onboarding. Fix anything confusing.</div></div></div>
|
||||
<div style="display:flex;gap:12px;padding:10px 0;"><div class="step-num">3</div><div><div style="font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;">Post your first topic</div><div style="font-size:12px;color:var(--muted);line-height:1.5;">AI has drafted your first content batch. Publish one today.</div></div></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;">
|
||||
<a href="10_vibe_editor.html" style="flex:2;display:block;text-decoration:none;"><button class="build-cta" style="border-radius:11px;font-size:14px;">Open my app ↗</button></a>
|
||||
<button class="btn-gitea" style="flex:1;">View in Gitea ↗</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
try {
|
||||
var name = localStorage.getItem('vibn_project_name') || 'My project';
|
||||
var el = document.getElementById('sidebar-project-name');
|
||||
el.textContent = name;
|
||||
el.style.display = 'block';
|
||||
} catch(e){}
|
||||
|
||||
/* ── Populate design summary ── */
|
||||
try {
|
||||
var ds = JSON.parse(localStorage.getItem('vibn_design') || 'null');
|
||||
if(ds){
|
||||
var feelLabels = {premium:'Premium SaaS', friendly:'Friendly & Approachable', minimal:'Minimal & Clean'};
|
||||
var structLabels = {clean:'Clean', data:'Data-rich', bold:'Bold'};
|
||||
document.getElementById('build-feel').textContent = feelLabels[ds.feel] || ds.feel;
|
||||
document.getElementById('build-structure').textContent = structLabels[ds.structure] || ds.structure;
|
||||
document.getElementById('build-color').textContent = ds.colorName || ds.color;
|
||||
var swatch = document.getElementById('build-color-swatch');
|
||||
swatch.style.background = ds.colorHex || '#6366F1';
|
||||
swatch.style.boxShadow = '0 0 0 3px var(--white),0 0 0 4px '+(ds.colorHex ? ds.colorHex+'44' : '#e0e7ff');
|
||||
}
|
||||
} catch(e){}
|
||||
|
||||
/* ── Populate website summary ── */
|
||||
try {
|
||||
var ws = JSON.parse(localStorage.getItem('vibn_website') || 'null');
|
||||
if(ws){
|
||||
if(ws.voice){
|
||||
document.getElementById('build-voice').textContent = ws.voice.tone + ' · ' + ws.voice.style + ' · ' + ws.voice.pers;
|
||||
}
|
||||
if(ws.styleLabel){
|
||||
document.getElementById('build-ws-style').textContent = ws.styleLabel;
|
||||
}
|
||||
if(ws.topics && ws.topics.length){
|
||||
document.getElementById('build-topics').textContent = ws.topics.join(' · ');
|
||||
}
|
||||
}
|
||||
} catch(e){}
|
||||
});
|
||||
var STEPS=[
|
||||
{l:'Creating Gitea repository',d:'Setting up version control for your project'},
|
||||
{l:'Scaffolding the app',d:'Next.js · TypeScript · Tailwind CSS'},
|
||||
{l:'Setting up your database',d:'PostgreSQL + schema based on your product plan'},
|
||||
{l:'Building sign up & login',d:'Email + Google + GitHub OAuth'},
|
||||
{l:'Wiring payments',d:'Stripe checkout, webhooks, billing portal'},
|
||||
{l:'Generating app pages',d:'Dashboard, settings, onboarding, invite flow'},
|
||||
{l:'Applying your design',d:'Clean & focused theme applied across all pages'},
|
||||
{l:'Building marketing website',d:'Startup energy style · SEO-ready'},
|
||||
{l:'Setting up email',d:'Welcome, password reset, and marketing templates'},
|
||||
{l:'Pushing to Gitea',d:'Full codebase committed and pushed'},
|
||||
{l:'Deploying via Coolify',d:'Building Docker image, deploying to your servers'},
|
||||
{l:'Running health checks',d:'Verifying all pages, auth, and payments are live'},
|
||||
];
|
||||
var cur=0, iv=null;
|
||||
function startBuild(){
|
||||
var btn = document.getElementById('build-cta-btn');
|
||||
if(btn){ btn.disabled=true; btn.innerHTML='<span class="spinning" style="display:inline-block;margin-right:7px;font-size:12px;">◎</span>Building your product…'; }
|
||||
setTimeout(function(){
|
||||
document.getElementById('screen-review').style.display='none';
|
||||
document.getElementById('screen-progress').style.display='block';
|
||||
renderSteps();
|
||||
iv=setInterval(function(){
|
||||
cur++;
|
||||
if(cur>=STEPS.length){
|
||||
clearInterval(iv);
|
||||
document.getElementById('prog-header').innerHTML='<div style="font-size:36px;margin-bottom:12px;">🚀</div><div class="f grad-title" style="font-size:24px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;">Your MVP is live</div><div style="font-size:13.5px;color:var(--muted);">Deployed to Coolify · Pushed to Gitea · Ready to share</div>';
|
||||
document.getElementById('done-section').style.display='block';
|
||||
triggerConfetti();
|
||||
} else {
|
||||
document.getElementById('step-counter').textContent='Step '+cur+' of 12';
|
||||
}
|
||||
renderSteps();
|
||||
},700);
|
||||
},400);
|
||||
}
|
||||
function renderSteps(){
|
||||
var list=document.getElementById('steps-list'); list.innerHTML='';
|
||||
STEPS.forEach(function(s,i){
|
||||
var done=i<cur, active=i===cur;
|
||||
var div=document.createElement('div');
|
||||
div.style.cssText='display:flex;align-items:center;gap:12px;padding:10px 15px;border-bottom:'+(i<STEPS.length-1?'1px solid var(--border)':'none')+';background:'+(active?'var(--cream)':'transparent')+';transition:background 0.3s;';
|
||||
var dotBg=done?'linear-gradient(135deg,#2E2A5E,#6366F1)':active?'linear-gradient(135deg,#4338CA,#6C7CFF)':'var(--parch)';
|
||||
var dotContent=done?'<span style="color:#fff;font-size:9px;font-weight:900;">✓</span>'
|
||||
:active?'<span class="spinning" style="color:#fff;font-size:8px;">◎</span>':'';
|
||||
div.innerHTML='<div style="width:20px;height:20px;border-radius:50%;background:'+dotBg+';display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s;">'+dotContent+'</div>'
|
||||
+'<div style="flex:1;"><div style="font-size:12.5px;font-weight:'+(active?'600':'400')+';color:'+(done?'var(--muted)':active?'var(--ink)':'var(--stone)')+';">'+s.l+'</div>'
|
||||
+((done||active)?'<div style="font-size:11px;color:var(--mid);margin-top:1px;">'+s.d+'</div>':'')+'</div>';
|
||||
list.appendChild(div);
|
||||
});
|
||||
}
|
||||
function triggerConfetti(){
|
||||
var wrap=document.createElement('div');
|
||||
wrap.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden;';
|
||||
document.body.appendChild(wrap);
|
||||
var colors=['#6366F1','#818CF8','#4338CA','#A5B4FC','#C7D2FE','#FCD34D','#F472B6','#34D399','#60A5FA','#FBBF24'];
|
||||
var shapes=['50%','3px','0'];
|
||||
for(var i=0;i<110;i++){
|
||||
var el=document.createElement('div');
|
||||
var color=colors[Math.floor(Math.random()*colors.length)];
|
||||
var size=Math.random()*9+4;
|
||||
var left=Math.random()*100;
|
||||
var delay=Math.random()*1.2;
|
||||
var dur=Math.random()*2.5+2;
|
||||
var br=shapes[Math.floor(Math.random()*shapes.length)];
|
||||
var xDrift=(Math.random()-0.5)*200;
|
||||
el.style.cssText='position:absolute;top:-12px;left:'+left+'%;width:'+size+'px;height:'+(size*(Math.random()*0.6+0.4))+'px;background:'+color+';border-radius:'+br+';animation:confetti-fall '+dur+'s '+delay+'s ease-in forwards;transform:translateX('+xDrift+'px) rotate('+(Math.random()*360)+'deg);';
|
||||
wrap.appendChild(el);
|
||||
}
|
||||
setTimeout(function(){if(wrap.parentNode)wrap.parentNode.removeChild(wrap);},5000);
|
||||
}
|
||||
function saveAndExit(){window.location.href='03_dashboard.html';}
|
||||
function toggleTheme(){const html=document.documentElement;const isDark=html.dataset.theme==='dark';html.dataset.theme=isDark?'':'dark';document.getElementById('dark-toggle').textContent=isDark?'🌙 Dark mode':'☀️ Light mode';localStorage.setItem('vibn-theme',isDark?'':'dark');}
|
||||
(function(){const saved=localStorage.getItem('vibn-theme');if(saved==='dark'){document.documentElement.dataset.theme='dark';document.addEventListener('DOMContentLoaded',function(){const btn=document.getElementById('dark-toggle');if(btn)btn.textContent='☀️ Light mode';});}})();
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user