iPhone Web Simulator

A web project that recreates the look and basic interaction of an iPhone interface.

The project simulates a phone with a lock screen, home screen and several working apps.

Features

• iPhone-style lock screen
• Screen turns on by pressing a button or CTRL
• Realistic homepage interface with time display
• Swipe bar to access the home screen
• Three working apps:
  • Messages
  • Phone
  • Calculator

Apps

Messages

• Custom on-screen keyboard
• Keyboard can be opened and closed
• Send messages
• Delete messages
• Switch between letters and numbers
• Uppercase support

Phone

• Dial phone numbers
• Automatic formatting for numbers like +381
• Recognizes Serbian mobile numbers starting with 06

Calculator

• iPhone-style calculator interface
• Basic arithmetic operations

System Behavior

• Navigation happens dynamically without reloading pages
• Elements are shown and hidden using JavaScript
• Turning the phone off always returns to the lock screen

Technologies

• HTML
• CSS
• JavaScript

What I Learned

• Advanced DOM manipulation
• Showing and hiding UI components dynamically
• Handling keyboard and button events
• Creating interactive UI components
• Managing application state without page reload
• Building more complex JavaScript logic

Author

Software engineering student at ITS

Screenshots