{"id":21147777,"url":"https://github.com/hamzazaidix/i-phone-by-html-css-javascript-","last_synced_at":"2025-07-09T07:33:14.893Z","repository":{"id":40581415,"uuid":"507669961","full_name":"HamzaZaidiX/I-PHONE-BY-HTML-CSS-JAVASCRIPT-","owner":"HamzaZaidiX","description":"I PHONE 📱 By Simple Html, CSS \u0026 JavaScript ","archived":false,"fork":false,"pushed_at":"2022-08-30T19:43:29.000Z","size":20778,"stargazers_count":3,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-04T16:42:44.275Z","etag":null,"topics":["apple","apple-mobile","camera","css","html","html-css-javascript","ios","iphone","iphone-app","iphone-by-html-css-javascript","iphone-clone","iphone-demo","iphone12","javascript","smartphone"],"latest_commit_sha":null,"homepage":"https://i-phone-12-shjz.vercel.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HamzaZaidiX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-26T19:48:31.000Z","updated_at":"2024-05-08T11:03:07.000Z","dependencies_parsed_at":"2023-01-16T16:01:16.629Z","dependency_job_id":null,"html_url":"https://github.com/HamzaZaidiX/I-PHONE-BY-HTML-CSS-JAVASCRIPT-","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaZaidiX%2FI-PHONE-BY-HTML-CSS-JAVASCRIPT-","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaZaidiX%2FI-PHONE-BY-HTML-CSS-JAVASCRIPT-/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaZaidiX%2FI-PHONE-BY-HTML-CSS-JAVASCRIPT-/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaZaidiX%2FI-PHONE-BY-HTML-CSS-JAVASCRIPT-/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HamzaZaidiX","download_url":"https://codeload.github.com/HamzaZaidiX/I-PHONE-BY-HTML-CSS-JAVASCRIPT-/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225507123,"owners_count":17483515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","apple-mobile","camera","css","html","html-css-javascript","ios","iphone","iphone-app","iphone-by-html-css-javascript","iphone-clone","iphone-demo","iphone12","javascript","smartphone"],"created_at":"2024-11-20T09:18:26.122Z","updated_at":"2024-11-20T09:18:26.678Z","avatar_url":"https://github.com/HamzaZaidiX.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iPhone 12 Pro Max 📱 Made By `HTML`, `CSS` \u0026 `JavaScript` ! \n\n# Hello there! 👋\n\nI have created a [**Black color iPhone 12 Pro Max**](https://i-phone-12-shjz.vercel.app/) built with `HTML`, `CSS`, and some `JavaScript` !\n\n## Here's how it looks like: \n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/howItLooksLike.png\" alt=\"iphone\" width=\"800\" height=\"500\"/\u003e\u003c/a\u003e\n\n### I tried to make it look as close as possible to the original iPhone:\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/real.png\" alt=\"iphone\" width=\"500\" height=\"500\"/\u003e\u003c/a\u003e\n\n**I also made the passcode screen, the homescreen, and even the camera app!**\n\n## You can also check it out 👇! \n\n## [Live Site 🚀](https://i-phone-12-shjz.vercel.app/)\n**or check out on** [Replit ==\u003e](https://iPhone-12.bookie0.repl.co)\n\n## Features ✨\n\n- ## **Lockscreen**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/lockscreen.png\" alt=\"iphone\" width=\"300\" height=\"500\"/\u003e\u003c/a\u003e\n\n- **Lockscreen wallpaper**\n- **Lock icon**\n- **Time and date**\n- **Torch and camera icon**\n- **Swipe up to unlock and home indicator animation**\n\n**You can click the torch icon to `'Turn it on'` (doesn't actually work). You can also click the camera icon to go to the camera app, just like the real thing. Click the home indicator to unlock the iPhone.**\n\n\n- ## **Camera**:\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/camera.png\" alt=\"iphone\" width=\"400\" height=\"500\"/\u003e\u003c/a\u003e\n\n- **Image**\n- **Using camera and microphone indicator**\n- **Flash, hidden, live icons**\n- **Zoom**\n- **Modes**\n- **Pictures**\n- **Capture**\n- **Rotate**\n\n**You can click the capture button (satisfying)!**\n\n## **Passcode**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/passcode.png\" alt=\"iphone\" width=\"400\" height=\"500\"/\u003e\u003c/a\u003e\n\n- **Lock icon**\n- Dots **\n- **Numbers**\n- Emergency and cancel buttons**\n\n**You can actually type in a password and watch the dots fill in. Any password works.**\n\n- ## **Home page**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/homepage.png\" alt=\"iphone\" width=\"400\" height=\"500\"/\u003e\u003c/a\u003e\n\n- **Homepage wallpaper**\n- Apps** \n- **3 dots** \n- **Menu bar**\n\n**When the home page loads up, the apps have a kind of 'bounce-in' animation, similar to the one for iPhone.**\n\n## Hardware 🔨\n\n**For the hardware of the phone (case, buttons, notch, etc.), I tried to make it look like the real thing.** \n\n- **For the side buttons, you can see the ringer, volume, and power buttons. You can click the volume and power buttons, althought only the power button actually does something (it turns off the phone). When the phone is off, you can touch the screen (tap to wake) or click the power button again to turn the phone back on.**\n\n- **The notch has the mic and the camera.**\n\n- **The casing even has the little marks or dashes that look like this for the real iPhone:**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/dash.png\" alt=\"iphone\" width=\"700\" height=\"300\"/\u003e\u003c/a\u003e\n\n## 🎨 Styles:\n\n- **Wallpapers**\n\n**The lockscreen wallpaper is the [dark mode default wallpaper](https://replit.com/@Bookie0/iPhone-12#Images/Backgrounds/lockscreen.jpeg):**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/lockWallpaper.png\" alt=\"iphone\" width=\"300\" height=\"300\"/\u003e\u003c/a\u003e\n\n**The homepage wallpaper is the [orange light mode iOS 13 wallpaper](https://replit.com/@Bookie0/iPhone-12#Images/Backgrounds/homescreen.jpeg) because I think it looks cool:**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/homeWallpaper.png\" alt=\"iphone\" width=\"300\" height=\"300\"/\u003e\u003c/a\u003e\n\n### - **Fonts**\n**The font family I used mostly is the default Apple font: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`.**\n\nI also used [San Francisco Compact](https://www.cufonfonts.com/font/sf-compact-display) for the camera app.\n\n### - **Icons**\n\n**Most of the icons come from [Apple's developer package icons](https://developer.apple.com/sf-symbols/), a great bundle of more than 3,000 symbols which you can customize.**\n\n**One icon from the phone is from [Ionicons](https://ionic.io/ionicons) as I couldn't find it on the Apple package.**\n\n### - **Bent effect**\n\n**On iPhone's camera app, you can scroll sideways to scroll through the different camera modes (video, photo, slo-mo, etc.) and whilst I didn't make the scrolling, effect, I was able to make the bent effect.**\n\nThis is how it really looks like:\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/bentReal.png\" alt=\"iphone\" width=\"700\" height=\"500\" /\u003e\u003c/a\u003e\n\n**And this is what I mananged to achieve:**\n\n\u003ca href=\"https://i-phone-12-shjz.vercel.app/\"\u003e\u003cimg src=\"ReadmeImages/bent.png\" alt=\"iphone\" width=\"700\" height=\"500\" /\u003e\u003c/a\u003e\n\n**I was able to do that by making the color of the letters at the far ends a different shade of gray, and I also used `transform: rotateY(50deg);` to kind of squish the letters more together and make them thinner. Hence, the bent effect was achieved.\nWell, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! 😊**\n\n## Here's what you can basically The iPhone do:\n\n- **Click the power button on the right to turn the phone on/off**\n- **Click the home indicator on the bottom and type in a password to go to home**\n- **Click the camera icon for camera**\n- **Click the torch icon for torch**\n\n# Licence\n\nMIT LICENCE\nRead `Licence` document for more details\n\n# Bye! 👋\n\nHOPE U LIKE THIS PROJECT PLEASE! IF YOU ARE USING THIS CODE PLEASE GIVE **HAMZA ZAIDI** SOME CREDITS BY LIKE \u0026 GIVE A HEART!!! 😃👍💛\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamzazaidix%2Fi-phone-by-html-css-javascript-","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamzazaidix%2Fi-phone-by-html-css-javascript-","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamzazaidix%2Fi-phone-by-html-css-javascript-/lists"}