App.tsx00006440000000000000000000112635152753343100007157ustar import React, { useEffect, useMemo, useRef, useState } from "react"; import { Sparkles, MessageSquare, Compass, Code2, Rocket, CheckCircle2, Circle, ArrowRight, Zap, Clock, Heart, FolderGit2, Send, PenLine, Phone, ShoppingBag, BarChart3, Bot, Coffee, UtensilsCrossed, Store, ChevronDown, Play, RotateCcw, Eye, Globe, ShieldCheck, Smartphone, Gauge, FileCode2, Database, Plug, Layers, Wand2 } from "lucide-react"; type Answers = Record; type SavedProject = { id:string; value:any }; const EXAMPLES = ["Лендинг кофейни в Алматы","Бот для заказов суши","Интернет-магазин косметики","Дашборд продаж для кофейни","Сайт для доставки суши в Алматы"]; const QUESTIONS = [ {id:"audience", q:"Кто целевая аудитория?", opts:["Молодёжь 18–30","Семьи с детьми","Бизнес-клиенты","Все жители города"]}, {id:"goal", q:"Главная цель продукта?", opts:["Принимать заказы","Собирать заявки","Продавать онлайн","Показывать аналитику"]}, {id:"style", q:"Какой стиль ближе?", opts:["Яркий и дерзкий","Минимализм","Тёплый и уютный","Премиум / тёмный"]}, {id:"integrations", q:"Какие интеграции нужны?", opts:["WhatsApp + оплата","Доставка и карта","CRM и рассылки","Только форма заявки"]}, {id:"budget", q:"Какой бюджет и срок?", opts:["Старт · до 60 000 ₸","Стандарт · до 150 000 ₸","Премиум · 150 000 ₸+","Срочно · за 3 дня"]}, ]; const FILES = ["index.html","styles.css","app.js","api/orders.js","data/menu.json"]; const CODE_LINES = [ " "," ","Продукт · MuratX Studio",""," ", "
● Продукт"," ","
", "

Вкусно. Быстро. Удобно.

","

Заказ за 2 минуты — доставка за 30 минут.

","
", "
","
Фото · Название · Цена · +
","
", "const cart = []; function addToCart(id){ cart.push(id); render(); }", "async function checkout(){ const r = await fetch('/api/orders', {method:'POST', body: JSON.stringify(cart)}); }", "function render(){ document.querySelector('#total').textContent = cart.length + ' товаров'; }", "/* Адаптив: мобильная версия, сетка, тёмная тема */","@media (max-width: 640px){ .hero{ padding: 28px 16px } }", "// QA: формы, скорость, доступность — готово ✓","export default function App(){ return }", ]; const STATIC_PROJECTS = [ {title:"Sushi Go — доставка", type:"Интернет-магазин", price:"150 000 ₸", time:"13 мин", status:"Опубликован", accent:"#f472b6", icon:"🍣"}, {title:"Кофе Точка — лендинг", type:"Лендинг", price:"50 000 ₸", time:"11 мин", status:"Опубликован", accent:"#fbbf24", icon:"☕"}, {title:"SalesBoard — дашборд", type:"Дашборд", price:"120 000 ₸", time:"16 мин", status:"На правке", accent:"#38bdf8", icon:"📊"}, ]; const QA_ITEMS = [ {id:"mobile", label:"Мобильная версия", desc:"375px, 430px и планшет — без горизонтального скролла"}, {id:"speed", label:"Скорость загрузки", desc:"Целевой показатель — менее 1,8 секунды"}, {id:"forms", label:"Формы и заказы", desc:"Валидация, отправка, подтверждение заказа"}, {id:"access", label:"Доступность и контраст", desc:"Кнопки от 44px, читаемые шрифты, фокус"}, {id:"seo", label:"SEO и мета-теги", desc:"Title, description, Open Graph, favicon"}, ]; async function api(action:string, args:any){ const res = await fetch("actions", {method:"POST", headers:{"content-type":"application/json"}, body: JSON.stringify({action, args})}); const json = await res.json().catch(()=>({})); if(!res.ok || json.error) throw new Error(json.error || `Ошибка ${res.status}`); return json.data; } function detectType(prompt:string){ const p = prompt.toLowerCase(); if(p.includes("бот")) return "bot"; if(p.includes("магазин") || p.includes("суши") || p.includes("достав")) return "shop"; if(p.includes("дашборд") || p.includes("аналит") || p.includes("продаж")) return "dashboard"; if(p.includes("кофейн") || p.includes("лендинг")) return "landing"; if(p.includes("косметик")) return "shop"; return "landing"; } function priceFor(type:string, answers:Answers){ let base = type==="shop"?150000:type==="dashboard"?120000:type==="bot"?80000:50000; if(answers.integrations?.includes("WhatsApp")) base+=10000; if(answers.integrations?.includes("Доставка")) base+=15000; if(answers.budget?.includes("Премиум")) base+=25000; if(answers.budget?.includes("Старт")) base=Math.max(40000, base-15000); return base; } export default function App(){ const [prompt, setPrompt] = useState("Сайт для доставки суши в Алматы"); const [started, setStarted] = useState(false); const [brief, setBrief] = useState(""); const [answers, setAnswers] = useState({}); const [openStep, setOpenStep] = useState(1); const [activeFile, setActiveFile] = useState(FILES[0]); const [codeIdx, setCodeIdx] = useState(0); const [coding, setCoding] = useState(false); const [qa, setQa] = useState>({}); const [editText, setEditText] = useState(""); const [previewNote, setPreviewNote] = useState(""); const [previewHeadline, setPreviewHeadline] = useState(""); const [saved, setSaved] = useState([]); const [apiStatus, setApiStatus] = useState(""); const [busy, setBusy] = useState(false); const [publishMsg, setPublishMsg] = useState(""); const [view, setView] = useState<"studio"|"projects">("studio"); const [toast, setToast] = useState(""); const shellStyle = {boxSizing:"border-box" as const, paddingTop:"var(--safe-area-inset-top)"}; const timer = useRef(null); const type = detectType(brief || prompt); const price = priceFor(type, answers); const styleAccent = answers.style?.includes("Минимализм") ? "#e8eaf6" : answers.style?.includes("Тёплый") ? "#fbbf24" : answers.style?.includes("Яркий") ? "#f472b6" : "#7c5cff"; const audience = answers.audience || "Жители Алматы"; const goal = answers.goal || "Принимать заказы онлайн"; const preview = useMemo(()=>{ if(type==="shop") return {brand: brief.includes("суши")?"Sushi • Алматы":"Магазин", title: previewHeadline || (brief.includes("суши") ? "Суши, которые приезжают горячими" : "Всё для вашего дня — в один клик"), sub:`Для: ${audience}. Цель: ${goal.toLowerCase()}. Заказ за 2 минуты.`, items:[{n:"Сет «Фирменный»",p:"6 900 ₸",e:"🍣"},{n:"Ролл «Калифорния»",p:"2 400 ₸",e:"🍱"},{n:"Сет «Семейный»",p:"11 900 ₸",e:"🥢"},{n:"Поке с лососем",p:"3 800 ₸",e:"🥗"}], cta:"Заказать в WhatsApp", badge:"Доставка 30 мин"}; if(type==="dashboard") return {brand:"SalesBoard", title: previewHeadline || "Продажи — в одном экране", sub:`Для: ${audience}. Выручка, заказы и средний чек — без таблиц.`, items:[{n:"Выручка сегодня",p:"184 500 ₸",e:"📈"},{n:"Заказы",p:"132",e:"🧾"},{n:"Средний чек",p:"1 398 ₸",e:"💳"},{n:"Повторные",p:"38%",e:"🔁"}], cta:"Открыть отчёт", badge:"Live · обновлено только что"}; if(type==="bot") return {brand:"OrderBot", title: previewHeadline || "Бот принимает заказы 24/7", sub:`Для: ${audience}. Клиент пишет — бот оформляет и передаёт на кухню.`, items:[{n:"Меню в чате",p:"за 10 сек",e:"💬"},{n:"Оплата по ссылке",p:"Kaspi / карта",e:"💳"},{n:"Статус заказа",p:"в реальном времени",e:"📍"},{n:"Отзывы и промо",p:"автоматически",e:"⭐"}], cta:"Открыть в Telegram", badge:"Онлайн"}; return {brand: brief.includes("кофе")||brief.includes("кофейн")?"Кофе Точка":"Лендинг", title: previewHeadline || "Место, куда хочется вернуться", sub:`Для: ${audience}. ${goal}. Тёплая атмосфера и честный вкус.`, items:[{n:"Флэт уайт",p:"1 100 ₸",e:"☕"},{n:"Капучино",p:"950 ₸",e:"🥛"},{n:"Круассан",p:"850 ₸",e:"🥐"},{n:"Раф с мёдом",p:"1 250 ₸",e:"🍯"}], cta:"Забронировать столик", badge:"Алматы · с 08:00"}; },[type, brief, audience, goal, previewHeadline]); const load = async()=>{ try{ const d = await api("records.list", {collection:"projects"}); setSaved(d.records||[]); setApiStatus("Сохранение проектов активно"); } catch{ setApiStatus("Сохранение временно недоступно в предпросмотре — проекты пока только на экране"); } }; useEffect(()=>{ load(); },[]); const start = ()=>{ if(!prompt.trim()){ setToast("Введите запрос клиента — например, сайт для доставки суши"); return; } setBrief(prompt.trim()); setStarted(true); setOpenStep(1); setCodeIdx(0); setCoding(false); setQa({}); setPreviewHeadline(""); setPreviewNote(""); setPublishMsg(""); setView("studio"); setTimeout(()=>document.getElementById("pipeline")?.scrollIntoView({behavior:"smooth"}),80); }; const choose = (id:string, val:string)=>{ setAnswers(a=>({...a,[id]:val})); setToast(`Интервьюер записал: ${val}`); }; const runCoder = ()=>{ if(coding) return; setCoding(true); setOpenStep(3); setCodeIdx(0); if(timer.current) clearInterval(timer.current); timer.current = setInterval(()=>{ setCodeIdx(v=>{ if(v>=CODE_LINES.length-1){ clearInterval(timer.current); setCoding(false); setToast("Код сгенерирован — 1 284 строки"); return v; } return v+1; }); }, 90); }; const progress = Math.round((codeIdx+1)/CODE_LINES.length*100); const qaDone = QA_ITEMS.filter(x=>qa[x.id]).length; const link = `https://muratx.app/${(brief||prompt).toLowerCase().replace(/[^a-zа-я0-9]+/gi,"-").replace(/^-|-$/g,"") || "product"}`; const publish = async()=>{ setBusy(true); setPublishMsg(""); const value = {title: preview.title, prompt: brief, type, price, answers, headline: previewHeadline, createdLabel: new Date().toLocaleDateString("ru-RU")}; try{ const rec = await api("records.create", {collection:"projects", value, idempotency_key:`publish-${Date.now()}`}); setSaved(s=>[rec,...s]); setPublishMsg(`Опубликовано! Проект сохранён в «Мои проекты».`); setToast("Проект опубликован и сохранён"); } catch(e:any){ setPublishMsg(`Не удалось сохранить в «Мои проекты»: ${e.message}. Превью всё равно готово к показу.`); } setBusy(false); }; const applyEdit = async()=>{ if(!editText.trim()){ setToast("Напишите, что поменять в превью"); return; } setPreviewHeadline(editText.trim()); setPreviewNote(`Правка применена: «${editText.trim()}»`); setToast("Превью обновлено"); // сохраняем правку как отдельную запись, чтобы она не потерялась try{ await api("records.create", {collection:"projects", value:{title:`Правка: ${editText.trim()}`, prompt: brief, type:"edit", price, answers, headline: editText.trim(), createdLabel: new Date().toLocaleDateString("ru-RU")}, idempotency_key:`edit-${Date.now()}`}); await load(); } catch{ /* локальная правка уже применена */ } setEditText(""); }; const loadSaved = (p:any)=>{ setBrief(p.prompt||p.title); setPrompt(p.prompt||p.title); setAnswers(p.answers||{}); setPreviewHeadline(p.headline||""); setStarted(true); setOpenStep(4); setView("studio"); window.scrollTo({top:0, behavior:"smooth"}); }; const steps = [ {n:1, icon:MessageSquare, title:"Интервьюер", desc:"5 уточняющих вопросов", color:"#a78bfa"}, {n:2, icon:Compass, title:"Архитектор", desc:"План, база и интеграции", color:"#38bdf8"}, {n:3, icon:Code2, title:"Кодер", desc:"Живая генерация кода", color:"#34d399"}, {n:4, icon:Rocket, title:"QA + Деплой", desc:"Проверки и публикация", color:"#fbbf24"}, ]; return (
M
MURATX STUDIO
AI-студия вайбкодинга
4 агента онлайн
{/* HERO */}
AI-студия · 4 агента · 15 минут

От идеи
до продукта
за 15 минут

Опишите продукт одним запросом. Интервьюер уточнит детали, Архитектор соберёт план, Кодер напишет код, а QA опубликует живой продукт.

setPrompt(e.target.value)} onKeyDown={e=>e.key==="Enter"&&start()} placeholder="Например: сайт для доставки суши в Алматы" className="min-w-0 flex-1 rounded-xl bg-transparent px-4 py-3 text-[15px] outline-none placeholder:text-slate-500"/>
{EXAMPLES.slice(0,4).map(x=>)}
⏱ Среднее время — 14 мин✓ Без кода с вашей стороны↻ Правки — в один клик
live-preview
{preview.brand}{preview.badge}

{preview.title}

{preview.sub}

{preview.items.slice(0,2).map((it,i)=>
{it.e}
{it.n}
{it.p}
)}
Агенты уже проанализировали ваш запрос
{/* stats */}
{[{v:"128",l:"продуктов создано",icon:FolderGit2},{v:"14 мин",l:"среднее время",icon:Clock},{v:"96%",l:"довольных клиентов",icon:Heart}].map((s,i)=>
{s.v}
{s.l}
)}
{/* PROJECTS */}

ПОРТФОЛИО

Мои проекты

{STATIC_PROJECTS.map((p,i)=>
{p.icon}{p.status}

{p.title}

{p.type} · {p.time}

{p.price}
)} {saved.map((s:any)=>
✨Сохранён

{s.value?.title || "Проект"}

{s.value?.prompt} · {s.value?.createdLabel}

{s.value?.price ? `${Number(s.value.price).toLocaleString("ru-RU")} ₸` : ""}
)}

{apiStatus}

{started && (

LIVE PIPELINE

Агенты работают над: «{brief}»

{/* stepper */}
{steps.map(s=>)}
{/* STEP 1 */} {openStep===1 &&

Интервьюер вопрос {Object.keys(answers).length}/5

Ваши ответы меняют превью, цену и план
{QUESTIONS.map((q,qi)=>

{qi+1}.{q.q}

{q.opts.map(o=>)}
)}
} {/* STEP 2 */} {openStep===2 &&

Архитектор — план продукта

Страницы / экраны
  • • Главная + Hero
  • • Каталог / услуги
  • • Корзина и заказ
  • • Доставка и отзывы
  • • Админ-панель
База данных
  • • products, orders
  • • users, reviews
  • • payments, delivery
  • • История заказов
Интеграции
  • • {answers.integrations || "WhatsApp + оплата"}
  • • Карты и доставка
  • • Уведомления
  • • Аналитика
Стек
  • • React + TypeScript
  • • Tailwind CSS
  • • Node / API
  • • PostgreSQL
Архитектура: Клиент → CDN → Frontend → API → База. Заказы попадают в админку за 2 секунды, оплата подтверждается автоматически. Аудитория: {audience}. Стиль: {answers.style || "Премиум / тёмный"}.
} {/* STEP 3 */} {openStep===3 &&

Кодер пишет код

{(1284 * (codeIdx+1)/CODE_LINES.length).toFixed(0)} строк
{coding?"Печатает код…":"Готово к генерации"}{progress}%

ФАЙЛЫ ПРОЕКТА

{FILES.map(f=>)}
✓ {activeFile} — синтаксис проверен
{activeFile}● live
{CODE_LINES.slice(0,codeIdx+1).map((l,i)=>
{String(i+1).padStart(2,"0")}{l}
)}
} {/* STEP 4 + PREVIEW */} {openStep===4 &&

QA + Деплой

Отметьте проверки — деплой откроется автоматически.

{QA_ITEMS.map(q=>)}
Проверено{qaDone}/{QA_ITEMS.length}
{qaDone===QA_ITEMS.length ?

Все проверки пройдены

Готовая ссылка: {link}

Домен, SSL и аналитика уже подключены.

:

Осталось проверок: {QA_ITEMS.length-qaDone} — отметьте все, чтобы открыть деплой.

}
{publishMsg &&

{publishMsg}

}

Живой превью продукта

Адаптивный макет
{preview.brand}
КаталогДоставкаОтзывы
{preview.badge}

{preview.title}

{preview.sub}

{preview.items.map((it,i)=>
{it.e}
{it.n}
{it.p}
)}
© {preview.brand} · Алматы WhatsApp: +7 700 000-00-00
Итоговая цена проекта
{price.toLocaleString("ru-RU")} ₸
Тип: {type==="shop"?"Интернет-магазин":type==="dashboard"?"Дашборд":type==="bot"?"Бот":"Лендинг"} · срок 3–7 дней
Домен и хостинг включены

Например: «Сделай заголовок короче» или «Добавь акцию −20%».

setEditText(e.target.value)} placeholder="Что изменить в превью?" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-black/20 px-3 py-2.5 text-sm outline-none"/>
{previewNote &&

{previewNote}

}
}
)} {!started &&
{[{i:Coffee,t:"Лендинг кофейни",d:"Меню, бронь, карта"},{i:UtensilsCrossed,t:"Доставка суши",d:"Каталог, корзина, оплата"},{i:Store,t:"Интернет-магазин",d:"Товары, фильтры, заказы"},{i:BarChart3,t:"Дашборд продаж",d:"Метрики, графики, экспорт"}].map((c,i)=>)}
} {toast && }
MuratX Studio — AI-студия вайбкодинга · Алматы 4 агента · Интервьюер · Архитектор · Кодер · QA
); } index.css00006440000000000000000000003744152753343100007520ustar @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;700;900&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; :root{ --bg:#070812; --surface:#0e1023; --surface-2:#151838; --line:rgba(255,255,255,.10); --text:#f5f6ff; --muted:#a7abd0; --violet:#7c5cff; --blue:#38bdf8; --mint:#34d399; --amber:#fbbf24; --pink:#f472b6; } @media (prefers-color-scheme: light){ :root{ --bg:#f4f4fb; --surface:#ffffff; --surface-2:#eceeff; --line:rgba(20,20,60,.10); --text:#11122b; --muted:#5f6390; } } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,-apple-system,sans-serif} .font-display{font-family:'Unbounded',sans-serif} .glass{background:color-mix(in srgb, var(--surface) 82%, transparent);border:1px solid var(--line);backdrop-filter:blur(16px)} .grad-text{background:linear-gradient(90deg,#a78bfa,#38bdf8,#34d399);-webkit-background-clip:text;background-clip:text;color:transparent} .grad-btn{background:linear-gradient(90deg,#7c5cff,#2563eb 55%,#06b6d4);box-shadow:0 10px 30px rgba(124,92,255,.35)} .chip{border:1px solid var(--line);background:var(--surface-2)} .chip.active{background:linear-gradient(90deg,rgba(124,92,255,.28),rgba(56,189,248,.22));border-color:#8b5cf6;color:white} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} @keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}} .animate-float{animation:float 5s ease-in-out infinite} .caret::after{content:'▍';animation:blink 1s infinite;color:#38bdf8;margin-left:2px} .dot{width:8px;height:8px;border-radius:999px;animation:pulseDot 1.6s infinite} .no-scrollbar::-webkit-scrollbar{display:none} .no-scrollbar{scrollbar-width:none} input,textarea,select{font-family:inherit} button{transition:.18s ease} button:active{transform:scale(.98)} .clippy/vfs-manifest.json00006440000000000000000000000474152753343100012547ustar [ { "path": "App.tsx", "file": { "file_name": "/mnt/data/src/App.tsx", "storage_handle": "", "storage_type": "BASE64" } }, { "path": "index.css", "file": { "file_name": "/mnt/data/src/index.css", "storage_handle": "", "storage_type": "BASE64" } } ]