diff --git a/README.md b/README.md index 3f536612d..97844f6dc 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,17 @@ make See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on submitting issues, PRs, and syncing with upstream. +## Web Demo: Pixel OS Model + +This fork includes an interactive **Pixel OS Model Demo** — a working Pixel 8 Pro phone simulator that showcases Pixel OS capabilities in any browser: + +- Lock screen, home screen, 7 functional apps (Phone, Messages, Camera, Settings, Clock, Photos, Browser) +- Quick Settings, Recents, Dark Mode, Theme switcher +- Full menu bar with keyboard shortcuts +- 100% self-contained HTML — no build step, no dependencies + +**Run it:** Open [`examples/example_emscripten_pixel/pixel_os_demo.html`](examples/example_emscripten_pixel/pixel_os_demo.html) in any browser, or visit the [live demo on GitHub Pages](https://turtle-pb.github.io/imgui_xl/examples/example_emscripten_pixel/pixel_os_demo.html). + ## Upstream Resources - **Dear ImGui Homepage**: [github.com/ocornut/imgui](https://github.com/ocornut/imgui) diff --git a/examples/example_emscripten_pixel/README.md b/examples/example_emscripten_pixel/README.md new file mode 100644 index 000000000..56134957c --- /dev/null +++ b/examples/example_emscripten_pixel/README.md @@ -0,0 +1,67 @@ +# Example: Emscripten Pixel OS Demo + +Interactive **Pixel phone simulator** showcasing Pixel OS capabilities, built as a self-contained HTML demo. + +## What It Is + +A working model of a Pixel 8 Pro phone that runs in any browser. It demonstrates: + +- **Lock screen** with live clock, notifications, fingerprint/swipe unlock +- **Home screen** with Material You design, Google search bar, weather widget, app grid +- **7 functional apps**: Phone (keypad), Messages (chat with auto-replies), Settings (toggles), Camera (shutter flash), Photos (gallery), Clock (world clock, alarms, stopwatch), Browser (Chrome mockup) +- **Quick Settings** panel with 8 toggle tiles and brightness slider +- **Recents** app switcher +- **Dark mode** toggle +- **Theme switcher** with 6 color themes +- **Menu bar** integration (File, View, Tools, Help) with keyboard shortcuts + +## Running + +### Option 1: Open Directly +```bash +# Just open the HTML file in any browser +open pixel_os_demo.html # macOS +xdg-open pixel_os_demo.html # Linux +start pixel_os_demo.html # Windows +``` + +### Option 2: Local Server +```bash +python -m http.server 8765 +# Open http://localhost:8765/pixel_os_demo.html +``` + +### Option 3: GitHub Pages +Visit the [imgui_xl GitHub Pages](https://turtle-pb.github.io/imgui_xl/examples/example_emscripten_pixel/pixel_os_demo.html) to see it live. + +## Keyboard Shortcuts + +| Shortcut | Action | +|----------|--------| +| `Ctrl+P` | Open Phone | +| `Ctrl+M` | Open Messages | +| `Ctrl+B` | Open Browser | +| `Ctrl+,` | Open Settings | +| `Ctrl+L` | Lock Phone | +| `Ctrl+R` | Reload Demo | +| `Ctrl+Q` | Quick Settings | +| `Ctrl+D` | Toggle Dark Mode | +| `Ctrl+T` | Cycle Theme | +| `Ctrl+Tab` | Recents | +| `Home` / `Esc` | Go Home | +| `F1` | Quick Guide | + +## Integration with imgui_xl + +This demo serves as a reference for web-based UI patterns that complement Dear ImGui's native C++ rendering: + +- **Self-contained**: No build step, no dependencies, no server required +- **Cross-platform**: Works on any modern browser (desktop, mobile, tablet) +- **Interactive**: All buttons, toggles, and gestures are functional +- **Extensible**: Add new apps by extending the `views` pattern + +## License + +MIT License — (c) 2024 Paul Adcock / OwlLogics + +Part of [imgui_xl](https://github.com/Turtle-PB/imgui_xl). diff --git a/examples/example_emscripten_pixel/pixel_os_demo.html b/examples/example_emscripten_pixel/pixel_os_demo.html new file mode 100644 index 000000000..9b5411054 --- /dev/null +++ b/examples/example_emscripten_pixel/pixel_os_demo.html @@ -0,0 +1,961 @@ + + +
+ + + + +The world's information at your fingertips.
Android 15 brings new AI features, privacy controls, and Material You enhancements.
Pixel 8 Pro voted best smartphone of 2024 by The Verge.
New music releases this week - check out the charts.