[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","alizhan0818","name","coloros-16","path","frontend/components/Apps.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/alizhan0818/coloros-16/code/frontend/components/Apps.tsx","extension","id","106ae5f5-4658-4290-8ca7-47eadbd3f198","Apps.tsx","fileId","f54963a6-aa23-11f1-befe-1607ee4eb77e","parentId","01a0780d-1583-70f3-a38d-d13aa3c8e67a","branchId","6e938afa-1ae1-4976-a64e-92bffded7928","branchVersion",31,"latest",true,"createdAt",["D",1788721197328],"version",6,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { APP, WALLPAPERS } from \"../apps.tsx\";\nimport { Sign } from \"./Icons.tsx\";\nimport { StatusBar } from \"./StatusBar.tsx\";\n\nexport function AppWindow({ id, now, onBack, settings }: { id: string; now: Date; onBack: () => void; settings?: any }) {\n const app = APP[id] || { name: id, emoji: \"📱\" };\n const name = app.name.charAt(0).toUpperCase() + app.name.slice(1);\n return (\n

←

{app.emoji} {name}

\n \n

\n );\n}\n\nfunction AppBody({ id, now, onBack, settings }: { id: string; now: Date; onBack: () => void; settings?: any }) {\n switch (id) {\n case \"calculator\": return ;\n case \"weather\": return ;\n case \"clock\": return ;\n case \"music\": return ;\n case \"gallery\": return ;\n case \"notes\": return ;\n case \"settings\": return ;\n case \"phone\": return ;\n case \"camera\": return ;\n case \"messages\": return ;\n case \"timer\": return ;\n default: return (\n

{Sign[id]?.[0]}

{APP[id]?.name} — демо приложение

\n );\n }\n}\n\n/* ---------- Calculator (liquid glass, shines on press) ---------- */\nfunction Calculator() {\n const [dis, setDis] = useState(\"0\");\n const [prev, setPrev] = useState(null);\n const [op, setOp] = useState(null);\n const [fresh, setFresh] = useState(true);\n const [press, setPress] = useState(null);\n\n const hit = (v: string) => {\n setPress(v); setTimeout(() => setPress(null), 420);\n if (/[0-9]/.test(v)) {\n if (fresh || dis === \"0\") { setDis(v); setFresh(false); }\n else setDis(dis + v);\n } else if (v === \".\") {\n if (!dis.includes(\".\")) setDis(dis + \".\");\n } else if (v === \"C\") { setDis(\"0\"); setPrev(null); setOp(null); setFresh(true); }\n else if (v === \"±\") setDis((+dis * -1).toString());\n else if (v === \"%\") setDis((+dis / 100).toString());\n else {\n const cur = +dis;\n if (prev !== null && op) {\n const r = compute(prev, cur, op);\n setPrev(r); setDis(String(r));\n } else setPrev(cur);\n setOp(v === \"=\" ? null : v); setFresh(true);\n }\n };\n\n const compute = (a: number, b: number, o: string) =>\n o === \"+\" ? a + b : o === \"-\" ? a - b : o === \"×\" ? a * b : o === \"÷\" ? (b === 0 ? NaN : a / b) : b;\n\n const keys = [\n [\"C\", \"±\", \"%\", \"÷\"],\n [\"7\", \"8\", \"9\", \"×\"],\n [\"4\", \"5\", \"6\", \"-\"],\n [\"1\", \"2\", \"3\", \"+\"],\n [\"0\", \".\", \"=\", \"\"],\n ];\n return (\n

{prev !== null ? prev + (op || \"\") : \"\"}

\n {dis}\n

\n {keys.flat().map((k) => {\n if (!k) return

;\n const accent = k === \"=\" || \"+-×÷\".includes(k);\n const dark = k === \"C\" || k === \"±\" || k === \"%\";\n return (\n

hit(k)}>\n {k}\n

\n );\n })}\n

\n );\n}\n\n/* ---------- Weather ---------- */\nconst DAYS = [\n [\"Сейчас\", \"☀️\", \"17°\"],\n [\"Пт\", \"⛅\", \"14°\"],\n [\"Сб\", \"🌧️\", \"12°\"],\n [\"Вс\", \"☀️\", \"18°\"],\n [\"Пн\", \"🌤️\", \"16°\"],\n];\nfunction Weather() {\n return (\n

Алматы

17°

Переменная облачность

Ощущается как 16° • Ветер 4 м/с • Влажность 60%

\n {DAYS.map((d, i) => (\n

{d[0]}

{d[1]}

{d[2]}

\n ))}\n

\n );\n}\n\n/* ---------- Clock ---------- */\nfunction ClockApp({ now }: { now: Date }) {\n const city = [\"Алматы\", \"Москва\", \"Нью-Йорк\", \"Токио\"];\n const offsets = [0, -3, -11, 5];\n return (\n

\n {now.getHours().toString().padStart(2, \"0\")}:{now.getMinutes().toString().padStart(2, \"0\")}\n

{now.getSeconds()} сек

Мировое время

\n {city.map((c, i) => {\n const h = (now.getHours() + offsets[i] + 24) % 24;\n return (\n

{c}{i === 0 ? \"Местное время\" : \"Другой часовой пояс\"}

{h.toString().padStart(2, \"0\")}:{now.getMinutes().toString().padStart(2, \"0\")}

\n );\n })}\n

\n );\n}\n\n/* ---------- Music ---------- */\nconst TRACKS = [\"Смысл — Герой\", \"Танцы — Отражение\", \"Алма — Ночь\", \"Заря — Путь\", \"Океан — Дождь\"];\nfunction Music() {\n const [i, setI] = useState(0);\n const [playing, setPlaying] = useState(false);\n return (\n

{TRACKS[i][0]}

{TRACKS[i].split(\" — \")[1]}

{TRACKS[i].split(\" — \")[0]}

\n
\n
setI((x) => (x - 1 + TRACKS.length) % TRACKS.length)}>⏮
\n
setPlaying((p) => !p)}>{playing ? \"⏸\" : \"▶\"}
\n
setI((x) => (x + 1) % TRACKS.length)}>⏭
\n
\n

\n );\n}\n\n/* ---------- Gallery ---------- */\nconst GCOLS = [\"linear-gradient(135deg,#f78ca0,#f9748f)\", \"linear-gradient(135deg,#a18cd1,#fbc2eb)\", \"linear-gradient(135deg,#fccb90,#d57eeb)\", \"linear-gradient(135deg,#84fab0,#8fd3f4)\", \"linear-gradient(135deg,#a6c0fe,#f68084)\", \"linear-gradient(135deg,#ffecd2,#fcb69f)\"];\nfunction Gallery() {\n return (\n
\n
\n {GCOLS.map((g, i) => (\n
\n
{[\"🌅\", \"🌺\", \"🏔️\", \"🌊\", \"🌠\", \"🍁\"][i]}
\n
\n ))}\n {GCOLS.map((g, i) => (\n
\n
{[\"🐱\", \"🚗\", \"🎂\", \"🏖️\", \"🎨\", \"🌃\"][i]}
\n
\n ))}\n
\n
\n );\n}\n\n/* ---------- Notes ---------- */\nconst NOTES = [\n [\"Цели\", \"Запустить свою ОС, выучить JS/TS, построить проект...\"],\n [\"Список покупок\", \"Молоко, хлеб, кофе, батарейки для пульта\"],\n [\"Идея\", \"Сделать виджеты для экрана блокировки, как в ColorOS 16\"],\n];\nfunction Notes() {\n return (\n
\n
\n {NOTES.map((n, i) => (\n
\n
📝 {n[0]}
\n
{n[1]}
\n
Сегодня, 18:0{i}
\n
\n ))}\n
\n
\n );\n}\n\n/* ---------- Settings (Flux: appearance, wallpaper, sound, lock style, about) ---------- */\nfunction SettingsApp({ s }: { s?: any }) {\n const [limit, setLimit] = useState(\"80%\");\n const [glass, setGlass] = useState(true);\n const [passOn, setPassOn] = useState(true);\n const [fingerOn, setFingerOn] = useState(true);\n const [vol, setVol] = useState(70);\n const [clickSound, setClickSound] = useState(true);\n const [showAbout, setShowAbout] = useState(false);\n const wallpaper = s?.wallpaper ?? 0;\n const setWallpaper = s?.setWallpaper ?? (() => {});\n const iconSize = s?.iconSize ?? \"medium\";\n const setIconSize = s?.setIconSize ?? (() => {});\n const darkMode = s?.darkMode ?? false;\n const setDarkMode = s?.setDarkMode ?? (() => {});\n\n const set = (label: string, sub: string, ic: string, ctrl: any) => (\n
\n {ic}\n
{label}{sub}
\n {ctrl}\n
\n );\n\n if (showAbout) {\n return (\n
\n
setShowAbout(false)}>←
\n
\n
📱
\n
ColorOS Simulator
\n
вдохновлено OPPO ColorOS 16
\n
\n
\n {set(\"Версия\", \"ColorOS 16.0 · Web Build\", \"🔢\", null)}\n {set(\"Разработчик\", \"Townie AI + вы\", \"🧑‍💻\", null)}\n {set(\"Хранилище\", \"128 ГБ (демо, не занято)\", \"💾\", null)}\n {set(\"Сборка\", \"Light Field / Liquid Glass\", \"💎\", null)}\n
\n
\n
\n Что нового
\n • Онбординг при первом запуске
\n • Подборщик обоев (6 стилей Light Field)
\n • Размер иконок (мал./сред./крупн.)
\n • Диалер с вкладками и буквами на клавишах
\n • Секундомер
\n
\n
\n
\n );\n }\n\n return (\n
\n
\n {set(\"Тёмная тема\", darkMode ? \"Включена\" : \"Выключена\", \"🌙\",
setDarkMode(!darkMode)} />)}\n {set(\"Эффекты матового стекла\", glass ? \"Включены\" : \"Выключены\", \"💎\",
setGlass(!glass)} />)}\n
\n
📐Размер иконок
\n
\n {([\"small\", \"medium\", \"large\"] as const).map((sz) => (\n
setIconSize(sz)}>\n {sz === \"small\" ? \"Малый\" : sz === \"medium\" ? \"Средний\" : \"Крупный\"}\n
\n ))}\n
\n
\n
\n\n
\n
\n
🖼️Обои (Light Field)
\n
\n {WALLPAPERS.map((w) => (\n
setWallpaper(w.id)}>\n
{w.name}
\n
\n ))}\n
\n
\n
\n\n
\n {set(\"Лимит заряда\", `Останавливает на ${limit}`, \"🔋\", {limit})}\n
\n {[\"80\", \"85\", \"90\", \"95\", \"100\"].map((l) => (\n setLimit(l + \"%\")} style={{ marginRight: 10, padding: \"6px 10px\", borderRadius: 12, background: limit === l + \"%\" ? \"linear-gradient(135deg,#3a7bff,#7a4bff)\" : \"var(--glass)\", cursor: \"pointer\" }}>{l}%\n ))}\n
\n {set(\"Состояние батареи\", \"Отличное (95%)\", \"💚\", null)}\n
\n\n
\n {set(\"Громкость\", `${vol}%`, \"🔊\", null)}\n
\n {set(\"Звук нажатий\", clickSound ? \"Включён\" : \"Выключен\", \"🔈\",
setClickSound(!clickSound)} />)}\n
\n\n
\n {set(\"Пароль\", passOn ? \"Включён\" : \"Выключен\", \"🔒\",
setPassOn(!passOn)} />)}\n {set(\"Отпечаток пальца\", fingerOn ? \"Включён\" : \"Выключен\", \"🖐️\",
setFingerOn(!fingerOn)} />)}\n
\n\n
\n
setShowAbout(true)} style={{ cursor: \"pointer\" }}>\n 📱\n
О телефонеColorOS 16 • Android 16
\n ›\n
\n
\n
\n );\n}\n\n/* ---------- Dialer (Набор / Контакты / Избранное) ---------- */\nconst CONTACTS = [\"Герой\", \"Мама\", \"Такси\", \"Саят\", \"Айгуль\", \"Работа\"];\nconst KEYPAD = [\n [\"1\", \"\"], [\"2\", \"ABC\"], [\"3\", \"DEF\"],\n [\"4\", \"GHI\"], [\"5\", \"JKL\"], [\"6\", \"MNO\"],\n [\"7\", \"PQRS\"], [\"8\", \"TUV\"], [\"9\", \"WXYZ\"],\n [\"*\", \"\"], [\"0\", \"+\"], [\"#\", \"\"],\n];\nfunction Dialer({ onBack }: { onBack: () => void }) {\n const [tab, setTab] = useState<\"dial\" | \"contacts\" | \"fav\">(\"dial\");\n const [num, setNum] = useState(\"\");\n const [call, setCall] = useState(null);\n\n if (call) {\n return (\n
\n
📞 Звонок…
\n
{call}
\n
{\"⏱ 00:12\"}
\n \n
\n );\n }\n\n return (\n
\n
\n
setTab(\"dial\")}>Набор
\n
setTab(\"contacts\")}>Контакты
\n
setTab(\"fav\")}>Избранное
\n
\n\n {tab === \"dial\" && (\n <>\n
{num || Введите номер}
\n
\n {KEYPAD.map(([d, letters]) => (\n
setNum((n) => n + d)}>\n {d}{letters}\n
\n ))}\n
\n
num && setCall(num)}>📞
\n \n )}\n\n {(tab === \"contacts\" || tab === \"fav\") && (CONTACTS.slice(0, tab === \"fav\" ? 3 : 6)).map((c, i) => (\n
\n 👤\n
{c}{tab === \"fav\" ? \"Избранный контакт\" : \"Контакт\"}
\n
setCall(c)} style={{ width: 40, height: 40, borderRadius: \"50%\", background: \"linear-gradient(135deg,#22c55e,#16a34a)\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", cursor: \"pointer\" }}>📞
\n
\n ))}\n
\n );\n}\n\n/* ---------- Stopwatch (Таймер) ---------- */\nfunction Stopwatch() {\n const [ms, setMs] = useState(0);\n const [running, setRunning] = useState(false);\n const [laps, setLaps] = useState([]);\n\n useEffect(() => {\n if (!running) return;\n const t = setInterval(() => setMs((m) => m + 10), 10);\n return () => clearInterval(t);\n }, [running]);\n\n const fmt = (v: number) => {\n const m = Math.floor(v / 60000).toString().padStart(2, \"0\");\n const s = Math.floor((v % 60000) / 1000).toString().padStart(2, \"0\");\n const cs = Math.floor((v % 1000) / 10).toString().padStart(2, \"0\");\n return `${m}:${s}.${cs}`;\n };\n\n return (\n
\n
{fmt(ms)}
\n
\n
{ setMs(0); setLaps([]); setRunning(false); }}>Сброс
\n
setRunning((r) => !r)}>{running ? \"Стоп\" : \"Старт\"}
\n
running && setLaps((l) => [ms, ...l])}>Круг
\n
\n
\n {laps.map((l, i) => (\n
Круг {laps.length - i}{fmt(l)}
\n ))}\n
\n
\n );\n}\n\n/* ---------- Camera ---------- */\nfunction Camera() {\n const [shot, setShot] = useState(0);\n return (\n
\n
🌆
\n
\n );\n}\n\n/* ---------- Messages ---------- */\nfunction Messages() {\n const [txt, setTxt] = useState(\"\");\n const [msgs, setMsgs] = useState([\"Привет! 👋\", \"Ты видел новый ColorOS 16?\"]);\n return (\n
\n {msgs.map((m, i) => (\n
{m}
\n ))}\n
\n setTxt(e.target.value)} placeholder=\"Сообщение…\" style={{ flex: 1, padding: 12, borderRadius: 20, background: \"var(--glass)\", border: \"1px solid var(--stroke)\", color: \"#fff\", outline: \"none\" }} />\n \n
\n
\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","5ca72600-33a7-49d6-b7e5-81c0004cf559",["D",1788720518465],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Интерактивный симулятор ОС в стиле ColorOS 16","imageUrl","userId","6fbccba7-1304-452e-9c47-63a82b93ab80","pinnedFileId","01a0780d-1583-70f3-a38d-ee7dce21ca92","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a07777-e619-74c3-b583-4fbaca18818a","tursoName","5ca7260033a749d6b7e581c0004cf559","tursoHostname","5ca7260033a749d6b7e581c0004cf559-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504908499],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Алижан","avatar","https://lh3.googleusercontent.com/a/ACg8ocJCKDI1euTzxy69SEJ3KYyrMIx0Lsefabw9acb-nqWJ6PtpYA=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]