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.
#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:
..
background: -moz-linear-gradient(#26262a, #010102);
..
-moz-border-radius: 15px;
<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.
#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;
}
<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.
#circle {
-webkit-border-radius: 50px;
background: -webkit-linear-gradient(#000, #505050);
width: 30px;
height: 30px;
margin: auto;
}
<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.
#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
<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.
#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.
<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:
.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:
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">
</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:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Now we get down to writing our functions:
<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>
<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"> </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:
http://i.imgur.com/eqxFtfF.png
Enjoy.
I will aim to rectify any inaccuracies now.
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.
#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:
..
background: -moz-linear-gradient(#26262a, #010102);
..
-moz-border-radius: 15px;
<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.
#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;
}
<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.
#circle {
-webkit-border-radius: 50px;
background: -webkit-linear-gradient(#000, #505050);
width: 30px;
height: 30px;
margin: auto;
}
<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.
#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
<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.
#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.
<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:
.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:
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">
</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:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Now we get down to writing our functions:
<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>
<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"> </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:
http://i.imgur.com/eqxFtfF.png
Enjoy.
I will aim to rectify any inaccuracies now.