Liquid Glass iOS is a lightweight, responsive, single-page web operating system dashboard inspired by modern iOS aesthetics and glassmorphism design principles. Built using pure HTML5, Tailwind CSS, Font Awesome, and Vanilla JS, it features real-time HTML5 Canvas animations, dynamic color themes, interactive widgets, and full Progressive Web App (PWA) support.
- Connectivity Management: Toggles for Wi-Fi, Bluetooth, Mobile Data, Airplane Mode, Hotspot, NFC, and Quick Share.
- Display & Audio Control: Interactive sliders for screen brightness (with real-time screen dimming overlay) and volume control.
- Quick Utilities: Flashlight simulation overlay, screenshot flash trigger, interactive QR Code scanner modal, AirPlay, Do Not Disturb, and Dolby Atmos audio state toggles.
- Dynamic Theme Presets: Real-time theme switching using CSS custom variables with custom color palettes:
- Sky Glass (Default)
- Midnight Titanium
- Emerald Glass
- Rose Gold
- Solar Amber
- Lavender Pearl
- Dynamic Wallpapers: Switch seamlessly between interactive liquid canvas animation and high-resolution backdrop presets (Fashion, Supercar, Nature, Architecture, Aurora).
- Dual Clock Mode: Tap to toggle between Digital Time & Date and a dynamic HTML5 Canvas Analog Clock.
- Apple Intelligence Siri Orb: Interactive canvas-rendered liquid glow animation with active mic listening states.
- Apple Music Player: Track controls, progress bar, animated audio visualizer wave bars, background album artwork blur bleed, and pre-loaded playlist switching.
- Health Activity Rings: Canvas-rendered animated fitness goal trackers for Calories, Steps, and Active Minutes.
- Weather & Calendar: Real-time location mock display with hourly weather forecasting and upcoming event logs.
- Smart Home Dock: Controls for smart lighting and thermostat adjustments.
- Standalone Support: Native app-like experience when installed on mobile devices (iOS/Android).
- On-the-Fly Asset Generation: HTML5 Canvas dynamically renders a high-res 512x512 PNG app icon and builds an inline manifest blob and Service Worker at runtime.
- Structure: HTML5
- Styling: Tailwind CSS (CDN), Custom CSS Glassmorphism Engine
- Typography & Icons: Inter Font, Font Awesome 6.5.1
- Scripting & Canvas: Native Vanilla JS (ES6+) & HTML5 Canvas API
Because Liquid Glass OS is self-contained in a single HTML file with no build step required, getting started is instant.
- Clone or download this repository:
git clone [https://github.com/your-username/liquid-glass-os.git](https://github.com/your-username/liquid-glass-os.git)
2. Open `index.html` in any modern web browser.
### Option 2: Local Development Server
For the best experience (including PWA installation testing), serve the file using a simple local server:
Using Python 3:
```bash
python -m http.server 8000
Then navigate to http://localhost:8000 in your web browser.
.
├── index.html # Complete application (UI, CSS styles, Canvas animations, PWA logic)
└── README.md # Project documentation
This project is open-source and available under the MIT License.
