Create an iPhone with HTML, CSS, jQuery & PHP

Tuts · 27-05-2013, 06:48 PM

Hello,

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.

PHP Code:


#black {
    background: -webkit-linear-gradient(#26262a, #010102);
    height: 575px;
    width: 355px;
    -webkit-border-radius: 15px;
    border: 3px solid #ababb0;
    box-shadow: 5px 5px 25px #000;
    margin: auto;
    margin-bottom: 50px;
}

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:

PHP Code:


..
background: -moz-linear-gradient(#26262a, #010102);
..
-moz-border-radius: 15px;

PHP Code:


<html>
<head>
     <style type="text/css">
     // Put all the CSS we're doing within here. 
    </style>
</head>
<body>
<div id="black">

</div>
</body>
</html>

STEP TWO

Now it's time to build the screen.

PHP Code:


#screen {
    background: black;
    width: 320px;
    height: 480px;
    margin: auto;
    text-align: center;
    font-family: 'Helvetica', sans-serif;
    font-weight: 100;
    font-size: small;
    color: #FFF;
}

PHP Code:


<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.

PHP Code:


#circle {
    -webkit-border-radius: 50px;
    background: -webkit-linear-gradient(#000, #505050);
    width: 30px;
    height: 30px;
    margin: auto;
}

PHP Code:


<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 id="circle"></div>
</div>
</body>
</html>

Here's what you should have at present - http://imgur.com/arkM30B
Don't worry about the positioning, it'll all fall into place at a later point.

STEP FOUR
Displaying the time and date just like the iPhone.

PHP Code:


#screen p {
    padding-top: 5%;
    padding-bottom: -5%;
    text-align: center;
}

If you're new to PHP, you may want to look at the PHP Manual for the different ways in which to display the date() func - http://php.net/manual/en/function.date.php

The date is displayed like this: Monday 27 May
The time is displayed like: 19:09 (depending on Settings, default is 24hr clock).

Don't forget to add your timezone, here's a list of supported timezones - http://php.net/manual/en/timezones.php

PHP Code:


<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.

PHP Code:


#metal {
    width: 90px;
    height: 20px;
    background: -webkit-radial-gradient(circle,  #eee, #dadada);
    margin: auto;
}
#charger {
    width: 120px;
    height: 40px;
    background: black;
    -webkit-border-radius: 3px;
    background: -webkit-radial-gradient(center, 10em 40px, #FFF, #d4d4d4);
    margin: auto;
    box-shadow: 5px 5px 25px #000;
}
.add {
    width: 20%;
    height: 30%;
    border: 2px solid #b3b3b3;
    -webkit-border-radius: 3px;
    margin: auto;
    text-align: center;
    line-height: 7px;
    color: #b3b3b3;
    font-size: x-large;
    vertical-align: middle;
    padding: 2% 0 0 0;
}
#lead {
    height: 200px;
    width: 1%;
    background: -webkit-linear-gradient(#d4d4d4, #f0f0f0);
    margin: auto;
    border: 1px solid #f0f0f0;
    box-shadow: 5px 5px 25px #5e5e5e;
}

and add the HTML to the end of our other <div> tags.

PHP Code:


<div id="metal"></div>
<div id='charger'>
    <div class="add">-</div>
</div>
<div id="lead"></div>

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.

Here's the battery's CSS:

PHP Code:


.cont {
    height: 100px;
    width: 82%;
    margin-top: 20%;
    margin: auto;
    padding-top: 10%
}
#battery {
    width: 250px;
    height: 100px;
    -webkit-border-radius: 15px;
    background: -webkit-linear-gradient(#e1e1e1, #c8c8c8);
    background: 1px solid #000;
    text-align: right;
    overflow: auto;
    float: left;
    margin: auto;
    opacity: 0.7;
}
#charging {
    height: 100px;
    width: 225px;
    background: -webkit-linear-gradient(#6dd031, #489519);
    margin: auto;
    box-shadow: 0px 0px 50px #41801c;
    float: left;
    margin-left: 5%;
    -webkit-border-radius: 2px;
}
#charging.charge {
    background: -webkit-linear-gradient(#de3f3b, #ae1f1b);
    box-shadow: 0px 0px 50px #8c1613;
    -webkit-border-radius: 2px;
    
}
#battery_tip {
    background: black;
    width: 3%;
    height: 50%;
    float: left;
    margin-top: 25px;
    background: -webkit-linear-gradient(#e1e1e1, #c8c8c8);
    background: 1px solid #000;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    opacity: 0.7;
}
.glow {
    background: #FFF;
    opacity: 0.4;
    height: 35px;
    width: 100%;
    -webkit-border-radius: 3px;
    margin-top: 5%;  
}
.glowTwo {
    background: #FFF;
    opacity: 0.4;
    height: 15px;
    width: 100%;
    -webkit-border-radius: 15px;
    margin-top: 15%;
}

Here's how the HTML should look:

PHP Code:


div id="black">
        <div id="screen">
            <p style="font-size: 45px"><?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 class="cont">
                <div id="battery">
                    <div id="charging"></div>

                    <div class="glow"></div>

                    <div class="glowTwo"></div>
                </div>

                <div id="battery_tip">
                    &nbsp;
                </div>
            </div>
        </div>

        <div id="circle">
            <!--<div id="square"></div>-->
        </div>
    </div>

    <div id="metal"></div>

    <div id="charger">
        <div class="add">
            -
        </div>
    </div>

    <div id="lead"></div>

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.

Add this between the <head> tags, anywhere:

PHP Code:


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Now we get down to writing our functions:

PHP Code:


<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' 
    });
    
    $('#metal').fadeOut(300);
    $('#black').animate({
    'margin-bottom': '0px' 
    });
        
}, 1500);

// 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);



</script>

Here's the final, full piece of code:

HTML Code:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
    $('#charging').animate({
        'width': '50px'

    }, 1500);
});

setTimeout(function() {
    $('#charging').addClass('charge').animate({
        'width': '45px' 
    });
    
    $('#metal').fadeOut(300);
    $('#black').animate({
    'margin-bottom': '0px' 
    });
        
}, 1500);

setTimeout(function() {
	$('#charging').removeClass('charge').animate({
		'width': '225px'
	}, 1500)
}, 2000);



</script>
<style type="text/css">
html, body {
    background: url("http://i.imgur.com/wojk9de.jpg") repeat;
}
#black {
    //background: -webkit-linear-gradient(#26262a, #010102);
    background: white;
    height: 575px;
    width: 357px;
    -webkit-border-radius: 15px;
    border: 3px solid #ababb0;
    box-shadow: 5px 5px 25px #000;
    margin: auto;
    margin-bottom: 50px;
}
#white {
    background: black;
    width: 320px;
    height: 480px;
    margin: auto;
    margin-top: 24px;
    text-align: center;
    font-family: 'Helvetica', sans-serif;
    font-weight: 100;
    font-size: small;
    color: #FFF;
}
#circle {
    -webkit-border-radius: 50px;
    //background: -webkit-linear-gradient(#000, #505050);
    background: -webkit-linear-gradient(#FFF, #B8B8B8);
    width: 30px;
    height: 30px;
    margin: auto;
    margin-top: 5px;
    vertical-align: center;
    line-height: 30px;
}
#black p {
	padding-top: 2%;
}
#square {
    width: 15px;
    height: 15px;
    border: 1px solid #c9c9c9;
    -webkit-border-radius: 2px;
    margin: auto;
}
#charger {
    width: 120px;
    height: 40px;
    background: black;
    -webkit-border-radius: 3px;
    background: -webkit-radial-gradient(center, 10em 40px, #FFF, #d4d4d4);
    margin: auto;
    box-shadow: 5px 5px 25px #000;
}
.add {
    width: 20%;
    height: 30%;
    border: 2px solid #b3b3b3;
    -webkit-border-radius: 3px;
    margin: auto;
    text-align: center;
    line-height: 7px;
    color: #b3b3b3;
    font-size: x-large;
    vertical-align: middle;
    padding: 2% 0 0 0;
}
#lead {
    height: 200px;
    width: 1%;
    background: -webkit-linear-gradient(#d4d4d4, #f0f0f0);
    margin: auto;
    border: 1px solid #f0f0f0;
    box-shadow: 5px 5px 25px #5e5e5e;
}
.cont {
    height: 100px;
    width: 82%;
    margin-top: 20%;
    margin: auto;
    padding-top: 10%
}
#battery {
    width: 250px;
    height: 100px;
    -webkit-border-radius: 15px;
    background: -webkit-linear-gradient(#e1e1e1, #c8c8c8);
    background: 1px solid #000;
    text-align: right;
    overflow: auto;
    float: left;
    margin: auto;
    opacity: 0.7;
}
#charging {
    height: 100px;
    width: 225px;
    background: -webkit-linear-gradient(#6dd031, #489519);
    margin: auto;
    box-shadow: 0px 0px 50px #41801c;
    float: left;
    margin-left: 5%;
    -webkit-border-radius: 2px;
}
#charging.charge {
    background: -webkit-linear-gradient(#de3f3b, #ae1f1b);
    box-shadow: 0px 0px 50px #8c1613;
    -webkit-border-radius: 2px;
    
}
#battery_tip {
    background: black;
    width: 3%;
    height: 50%;
    float: left;
    margin-top: 25px;
    background: -webkit-linear-gradient(#e1e1e1, #c8c8c8);
    background: 1px solid #000;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    opacity: 0.7;
}
.glow {
    background: #FFF;
    opacity: 0.4;
    height: 35px;
    width: 100%;
    -webkit-border-radius: 3px;
    margin-top: 5%;  
}
.glowTwo {
    background: #FFF;
    opacity: 0.4;
    height: 15px;
    width: 100%;
    -webkit-border-radius: 15px;
    margin-top: 15%;
}
#metal {
    width: 90px;
    height: 20px;
    background: -webkit-radial-gradient(circle,  #eee, #dadada);
    margin: auto;
}
#white p {
	padding-top: 5%;
	padding-bottom: -5%;
	text-align: center;
}
</style>
</head>
<body>

<div id="black">
    <div id="white">
    	    <p style="font-size: 45px">
    	    <?php 
    	   // $timezone = 'Europe/London';
	    	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 class="cont">
<div id="battery">
    <div id="charging">
    </div> 
    <div class="glow"></div>
    <div class="glowTwo"></div>
   
</div>
<div id="battery_tip">&nbsp;</div>
</div>

    </div>
    <div id="circle">
        <!--<div id="square"></div>-->
    </div>
</div>
    <div id="metal"></div>
<div id="charger">
    <div class="add">-</div>
</div>
<div id="lead"></div>
</body>
</html>

and here's the outcome:

Enjoy.
I will aim to rectify any inaccuracies now.

Mark · 27-05-2013, 07:47 PM

That looks great! Not being picky however the iPhone 5 has a new lightening connector charger

Thread: Create an iPhone with HTML, CSS, jQuery & PHP

Thread Tools

Create an iPhone with HTML, CSS, jQuery & PHP

Posting Permissions