Log inSign up

alizhan0818

coloros-16

Public
Интерактивный симулятор ОС в стиле ColorOS 16
htmlosreactui
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

ColorOS 16 Simulator 📱

Интерактивный симулятор ОС в стиле OPPO ColorOS 16 — дизайн Light Field / Liquid Glass (матовое стекло, отражения света, градиентное размытие). Работает прямо в браузере.

Открыть симулятор

Что внутри

  • Always-On Display — полноэкранный AOD с обоями и временем. Нажмите → экран блокировки.
  • Экран блокировки — часы в 3 стилях (цифровые / «колбасные» / аналоговые), виджеты с матовым стеклом.
  • Liquid Glass PIN — клавиатура со светящимися кнопками и бликом. PIN: 1234.
  • Flux Home Screen — изменяемый размер иконок долгим нажатием (1×1, 2×1, 1×2, 2×2), док-бар с матовым стеклом.
  • Центр управления — тумблеры 4×4, слайдеры яркости и громкости, переключатель тёмной темы.
  • Уведомления — стековые, свип вниз по сетке.
  • Ящик приложений — свип вверх / тап по папке.
  • Приложения: Калькулятор (блик при нажатии), Погода, Часы, Музыка, Галерея, Заметки, Настройки (лимит заряда 80–100%), Телефон, Сообщения, Камера и др.

Управление

ДействиеРезультат
Тап по экрануAOD → блокировка
Тап по иконкеОткрыть приложение
Долгое нажатие на иконкуИзменить размер (Flux)
Свайп вверх на сеткеЯщик приложений
Свайп вниз на сеткеУведомления
Тап «PIN» на блокировкеКлавиатура (PIN 1234)

Структура

index.ts                       Hono-сервер
frontend/
  root.tsx                     HTML-оболочка
  styles.css                   Liquid Glass стили
  apps.tsx                     Каталог приложений
  components/
    App.tsx                    Главный оркестратор (AOD→lock→home→app)
    LockScreen.tsx             AOD + блокировка + PIN
    HomeScreen.tsx             Дом, док, ящик, центр управления, уведомления
    Apps.tsx                   Все приложения
    Icons.tsx                  Иконки приложений
    StatusBar.tsx              Статус-бар + часы
    Intro.tsx                  Панель описания