Today I am going to show you how to replicate an iPhone using HTML and CSS as well as implementing jQuery for animation and PHP to gather and display the time and date. This isn't a tutorial for an iPhone 5.
If you've not got access to a web server, I would recommend downloading XAMPP or MAMP where you'll be able to test your PHP.
Here's a picture of the outcome: http://imgur.com/Uxu3FCc
At the end of the tutorial, you'll see the battery animation.
STEP ONE
Lets create the iPhone backbone, in this tutorial we'll be creating a black iPhone. If you are creating a white iPhone or another colour besides black, post your outcome, I would love to see them.
I am using Chrome therefore I'm using -webkit-, other browsers use different rendering engines.
e.g. If you are using Firefox you would simply remove the appropriate segment and add the following:
<html> <head> <style type="text/css"> // Put all the CSS we're doing within here. </style> </head> <body> <div id="black"> <div id="screen"></div> </div> </body> </html>
The iPhone's screen width is 320px x 480px hence why we're using these dimensions.
STEP THREE
Creating the button at the button of the iPhone. There's a slight inaccuracy with my design, I am yet to create the square that goes onto the button.
<html> <head> <style type="text/css"> // Put all the CSS we're doing within here. </style> </head> <body> <div id="black"> <div id="screen"> <p><?php date_default_timezone_set('Europe/London'); echo date('H:i'); ?><br /> <span style="font-size: small"><?php echo date('l j f');</span></p> </div> <div id="circle"></div> </div> </body> </html>
You can now use your server to test the outcome.
STEP FIVE
Creating the charger, it's extremely simple. We'll replicate this - http://i.imgur.com/RygICwV.png
I understand that the positioning of the [-] on the charger isn't exactly centered, I will aim to rectify this after I post this tutorial.
STEP SIX
Creating a battery, I found it hard to exactly replicate the battery but I had a good go. Hopefully those who have followed so far can have more luck in creating something more accurate.
STEP SEVEN
Charger animation. Later on in the tutorial we'll be creating a battery that'll go from fully charged (green) to partially charged (red). When our battery hits red, we want the charger to animate so it looks like it's entering the bottom of the iPhone and animate the battery's life increasing. Let's introduce some simple jQuery, I will explain everything that is happening in the code for those new to jQuery.
<script> // Once the document has loaded (ready), animate the 'battery' to a width of 50px. // Make the above animation last 1.5 seconds. $(document).ready(function () { $('#charging').animate({ 'width': '50px'
}, 1500); });
// In 1.5 seconds (once the above function has executed), add a class called 'charge' // Which makes the battery red. // $('#metal').fadeOut(300) - Fade Out the metal div (which is the metal top on the charger); // Move the charger up into the iPhone so it simulates it's charging. setTimeout(function() { $('#charging').addClass('charge').animate({ 'width': '45px' });
// Remove the red battery and make it green, so it simulates that it's charged. setTimeout(function() { $('#charging').removeClass('charge').animate({ 'width': '225px' }, 1500) }, 2000);
