Fake OS

Recreating an Android OS in HTML, SCSS and JS.

View it live here

Inside is a project where we basically create a Fake OS using what we've learnt so far with HTML, SCSS and JS.

Some of my earliest smartphones have been the Nexus 5, and Nexus 6P, which to this day are some of my favourite devices. To my disappointment Google scrapped the Nexus line to make way for the Pixel line.

So as a homage to Android, that is what I'll be recreating for this project. Following the provided screenshot, this is mainly based on Google's Holo Design spanning from Android 4.0 (Ice Cream Sandwich) to Android 4.4 (Kitkat).

Functionality

Current Functionality

• Action Bar Opens
• Volume Toggles
• Airplane Mode toggles (incomplete)
• Search Bar (google searches into new tab currently)
• Back Button
• Home Button
• Youtube App
• Messages App
• Dailer / Contacts App
• Youtube stops playing on exit

Bugs / Issues

Action Bar icons not updating

• Action bar icons are not updating based on settings through GitHub pages. This functionality works locally.
• Cannot transition nicely between apss due to using display: none. Would like to restructure completely
• Quick settings cannot transition nicely as image change is currently done by changing img src in JS

Resources

Where possible, icon files have been taken from an unpacked Android distribution. Otherwise icons have been downloaded from DeviantArt.

KitKat Flat Icons

Android Kit Kat Status Bar for iOS 7

Catull Font

Android 4.4 Distribution

Android UI Design Kit 4.4

Ice Cream Sandwich Wallpapers

Android Action Bar Icons