iOS & iPadOS Prototype
Apple Human Interface Guidelines · iPhone 15 Pro & iPad Air · Dual Light/Dark Modes
✓ VERIFIED PROTOTYPE
Presented & Verified by ABIN S CHANDRAN
Reviewer Demo Instructions
1
Switch Appearance & Device Views:
In the prototype's left sidebar, click Dark to test the dark mode palette (navy `#043563` and surface `#003580`). Click iPad Sidebar to see the iPhone 390×844 layout morph into an 820×620 tablet workspace with persistent 260px sidebar navigation.
In the prototype's left sidebar, click Dark to test the dark mode palette (navy `#043563` and surface `#003580`). Click iPad Sidebar to see the iPhone 390×844 layout morph into an 820×620 tablet workspace with persistent 260px sidebar navigation.
2
Review Apple Guideline 5.4 Privacy Declaration:
Click 7. Data-Use Declaration in the jump list to view the native iOS bottom sheet modal detailing zero-logs privacy guarantees prior to initial connection or subscription.
Click 7. Data-Use Declaration in the jump list to view the native iOS bottom sheet modal detailing zero-logs privacy guarantees prior to initial connection or subscription.
3
Interact with Dynamic Island Live Activity:
While connected, click the pill-shaped Dynamic Island at the top of the iPhone frame. Watch it expand into the full Live Activity view displaying live VPN duration, throughput metrics, and quick disconnect action.
While connected, click the pill-shaped Dynamic Island at the top of the iPhone frame. Watch it expand into the full Live Activity view displaying live VPN duration, throughput metrics, and quick disconnect action.
4
Test App Store In-App Purchase Sheet:
Tap the 4-day trial banner or select 9. Paywall Sheet to open the iOS modal sheet with store billing, 2-Year ($2.22/mo), 1-Year ($2.86/mo), and 6-Month plans with App Store compliance text.
Tap the 4-day trial banner or select 9. Paywall Sheet to open the iOS modal sheet with store billing, 2-Year ($2.22/mo), 1-Year ($2.86/mo), and 6-Month plans with App Store compliance text.
5
Test Account Deletion Flow:
Select 10. Account & Deletion and tap "Delete Account". Test the safety guard requiring the user to type "DELETE" before enabling the irreversible deletion confirmation button.
Select 10. Account & Deletion and tap "Delete Account". Test the safety guard requiring the user to type "DELETE" before enabling the irreversible deletion confirmation button.
Known Simulation Scope:
This is a browser-based prototype built with modern CSS and JavaScript. Apple NetworkExtension framework bindings and StoreKit sandbox transactions are simulated.
Prototype Validation Checklist
- Passed Screen 7: Apple Guideline 5.4 Privacy Declaration sheet modal
- Passed Screen 8a: Home Disconnected (Light Theme with red status pill)
- Passed Screen 8b: Home Connecting animation (1.4s pulse cycle)
- Passed Screen 8c: Home Connected (Light Theme with green status pill & live timer)
- Passed Screen 8d & 8e: Home Disconnected & Connected in Dark Theme
- Passed Screen 9: Paywall bottom sheet modal with App Store billing compliance
- Passed Screen 10: Account management & typed DELETE account verification
- Passed Screen 11: Dynamic Island compact + expanded Live Activity preview
- Passed iPadOS Mode: Responsive transition from tab bar to 260px sidebar
- Passed Responsive Zoom engine preventing clipping on compact laptop viewports
- Simulated Apple StoreKit in-app purchase receipts & NetworkExtension VPN configurations
File:
Open Raw Prototype ↗
ios.html (135 KB)