<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/sanatankc/pen/QvxwGZ?depth=everything&order=popularity&page=45&q=mobile&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400");
body {
font-family: "Roboto", sans-serif;
color: white;
user-select: none;
}
.phone {
height: 492px;
width: 264px;
background-color: #F9ECD4;
border-radius: 4%;
position: absolute;
margin: auto;
top: calc(50% - 246px);
left: calc(50% - 137px);
border: 3px solid #EAD7C6;
}
.screen {
background: url("https://s-media-cache-ak0.pinimg.com/originals/a1/f6/8f/a1f68f445eb049575f28744c84b24081.jpg");
background-size: cover;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 80px);
border-radius: 2%;
margin: auto;
overflow: hidden;
left: 0;
right: 0;
top: 7%;
}
.buttons {
position: absolute;
display: flex;
width: 90%;
margin: auto;
left: 0;
right: 0;
bottom: 3%;
justify-content: space-around;
align-items: baseline;
color: black;
}
.buttons div {
opacity: 0.4;
}
.buttons .back {
font-size: 24px;
position: relative;
top: 2px;
}
.top {
position: absolute;
top: 2%;
left: 27%;
}
.top div {
display: inline-block;
}
.top .speaker1 {
width: 25px;
height: 7px;
background: #444;
border-radius: 5px;
}
.top .speaker2 {
width: 45px;
height: 7px;
background: #444;
border-radius: 15px;
}
.top .camera {
width: 10px;
height: 10px;
background: #444;
border-radius: 50%;
position: relative;
left: 25%;
}
.dock {
width: 100%;
height: 60px;
position: relative;
bottom: calc(-100% + 60px);
}
.icon {
display: inline-block;
}
.icon .body {
height: 41px;
width: 41px;
background: #fff;
border-radius: 19%;
margin-left: 2px;
position: relative;
color: white;
}
.icon .body i, .icon .body img {
position: absolute;
top: 8px;
font-size: 24px;
left: 9px;
}
.icon .body.call {
margin-left: 5px;
background: #18B264;
}
.icon .body.call i {
transform: rotate(10deg);
}
.icon .body.call:active {
background: #117d46;
}
.icon .body.gmail {
background: #363636;
}
.icon .body.gmail img {
width: 29px;
top: 7px;
left: 6px;
}
.icon .body.gmail:active {
background: #262626;
}
.icon .body.message {
background: #FCB03D;
}
.icon .body.message i {
font-weight: bold;
}
.icon .body.message:active {
background: #b07b2b;
}
.icon .body.chrome {
background: #FFFFFF;
}
.icon .body.chrome img {
width: 35px;
top: 3px;
left: 4px;
}
.icon .body.chrome:active {
background: #b3b3b3;
}
.icon .body.camera {
background: #EAECEF;
}
.icon .body.camera .camera-circle {
background-color: #fff;
height: 26px;
width: 26px;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}
.icon .body.camera .camera-circle .black-circle {
position: absolute;
height: 75%;
width: 75%;
top: 10%;
left: 14%;
background-color: black;
border-radius: 50%;
}
.icon .body.camera .camera-circle .black-circle .greyish-border {
height: 50%;
width: 50%;
position: absolute;
border-radius: 50%;
border: 2px solid #4E4F52;
left: 15%;
top: 14%;
}
.icon .body.camera .camera-circle .black-circle .greyish-border .grey-dot {
height: 30%;
width: 30%;
position: absolute;
background: #4E4F52;
top: 40%;
left: 40%;
border-radius: 50%;
}
.icon .body.camera:active {
background: #a4a5a7;
}
p.label {
margin: 0;
padding: 0;
font-size: 9px;
text-align: center;
color: white;
margin-left: 5px;
margin-top: 3px;
}
.main {
top: 205px;
}
.main .body {
height: 41px;
width: 41px;
background: #fff;
border-radius: 19%;
margin-left: 13px;
position: relative;
}
.main .body.quora {
background: #BB2920;
}
.main .body.quora:active {
background: #831d16;
}
.main .body.medium {
background: #FFFFFF;
color: green;
}
.main .body.medium img {
width: 25px;
}
.main .body.medium:active {
background: #b3b3b3;
}
.main .body.youtube {
background: #E2E2E2;
color: #E62920;
}
.main .body.youtube:active {
background: #9e9e9e;
}
.main .body.facebook {
background: #3b5998;
overflow: hidden;
}
.main .body.facebook i {
top: 4px;
left: 12px;
font-size: 40px;
}
.main .body.facebook:active {
background: #293e6a;
}
.main p.label {
margin-left: 13px;
}
.time-section {
position: absolute;
left: 7%;
top: 22%;
}
.time {
font-size: 45px;
font-weight: 100;
}
.date {
font-size: 10px;
}
.search-bar {
background: #fff;
width: 80%;
position: absolute;
top: 10%;
padding: 6px 13px 4px 13px;
border-radius: 3px;
margin: auto;
left: 0;
right: 0;
}
.search-bar img.google {
height: 20px;
}
.search-bar img.mic {
height: 20px;
float: right;
margin-bottom: 0px;
}
.status-bar {
height: 14px;
width: 100%;
position: absolute;
top: 0%;
padding-top: 1%;
font-size: 9px;
transition: all 0.3s ease-in-out;
}
.status-bar .battery-icon-border {
height: 32%;
width: 9%;
position: absolute;
top: 30%;
right: 12%;
border-radius: 25%;
border: 1.4px solid white;
}
.status-bar .battery-icon-border .battery-status {
height: 80%;
width: 60%;
position: absolute;
top: 10%;
right: 10%;
border-radius: 20%;
background: white;
}
.battery-num {
font-size: 9px;
position: absolute;
right: 3%;
top: 30%;
}
.sim-1 {
font-size: 12px;
position: absolute;
right: 25%;
top: 15%;
}
.sim-2 {
font-size: 12px;
position: absolute;
right: 50%;
top: 15%;
}
.status-net {
position: absolute;
right: 32%;
top: 35%;
}
.apps {
height: calc(100% - 16px);
width: 100%;
background: #444;
background-size: 244px 400px;
position: absolute;
top: 16px;
left: 0%;
}
.apps.quora {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DJNktHd7.png");
}
.apps.quora.animate {
animation: 0.3s open-quora ease-in-out 1 forwards;
}
.apps.quora.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.medium {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DKylXdhJ.png");
}
.apps.medium.animate {
animation: 0.3s open-medium ease-in-out 1 forwards;
}
.apps.medium.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.youtube {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DKOYGn6y.png");
}
.apps.youtube.animate {
animation: 0.3s open-youtube ease-in-out 1 forwards;
}
.apps.youtube.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.facebook {
display: none;
background-image: url("https://cdn.pbrd.co/images/Mbi65ta6.jpg");
}
.apps.facebook.animate {
animation: 0.3s open-facebook ease-in-out 1 forwards;
}
.apps.facebook.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.dialer {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DN0jRbRz.png");
}
.apps.dialer.animate {
animation: 0.3s open-dial ease-in-out 1 forwards;
}
.apps.dialer.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.gmail {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DNp68UA4.png");
}
.apps.gmail.animate {
animation: 0.3s open-gmail ease-in-out 1 forwards;
}
.apps.gmail.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.message {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DL2sMgSA.png");
}
.apps.message.animate {
animation: 0.3s open-message ease-in-out 1 forwards;
}
.apps.message.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.chrome {
display: none;
background-image: url("https://cdn.pbrd.co/images/7EXq1juRO.png");
}
.apps.chrome.animate {
animation: 0.3s open-chrome ease-in-out 1 forwards;
}
.apps.chrome.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
.apps.camera {
display: none;
background-image: url("https://cdn.pbrd.co/images/7DLYgVkDR.png");
}
.apps.camera.animate {
animation: 0.3s open-camera ease-in-out 1 forwards;
}
.apps.camera.animate-out {
animation: 0.3s close ease-in-out 1 forwards;
}
@keyframes open-chrome {
0% {
transform: translateY(330px) translateX(160px);
width: 0px;
opacity: 0.3;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-message {
0% {
opacity: 0.3;
transform: translateY(330px) translateX(110px);
width: 0px;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-gmail {
0% {
opacity: 0.3;
transform: translateY(330px) translateX(60px);
width: 0px;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-dial {
0% {
opacity: 0.3;
transform: translateY(330px) translateX(20px);
width: 0px;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-camera {
0% {
opacity: 0.3;
transform: translateY(330px) translateX(210px);
width: 0px;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-quora {
0% {
transform: translateY(260px) translateX(20px);
width: 0px;
opacity: 0.3;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-medium {
0% {
transform: translateY(260px) translateX(80px);
width: 0px;
opacity: 0.3;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-youtube {
0% {
transform: translateY(260px) translateX(140px);
width: 0px;
height: 0px;
opacity: 0.3;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes open-facebook {
0% {
transform: translateY(260px) translateX(200px);
opacity: 0.3;
width: 0px;
height: 0px;
}
100% {
opacity: 1;
width: 244px;
height: 412px;
}
}
@keyframes close {
0% {
opacity: 1;
transform: translateY(0px);
}
40% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(412px);
}
}
</style></head><body>
<div class="phone">
<div class="top">
<div class="speaker1"></div>
<div class="speaker2"></div>
<div class="camera"></div>
</div>
<div class="screen">
<div class="dock">
<div class="icon">
<div class="body call" data-dom-map=".apps.dialer" data-theme-color="#27B769"><i class="fa fa-phone"></i></div>
<p class="label">Phone</p>
</div>
<div class="icon">
<div class="body gmail" data-dom-map=".apps.gmail" data-theme-color="#B93221"><img src="https://cdn.pbrd.co/images/ITgrLIcY.png"/></div>
<p class="label">Gmail</p>
</div>
<div class="icon">
<div class="body message" data-dom-map=".apps.message" data-theme-color="#F2F2F2"><i class="fa fa-comment-o"></i></div>
<p class="label">Messaging</p>
</div>
<div class="icon">
<div class="body chrome" data-dom-map=".apps.chrome" data-theme-color="#000000"><img src="https://cdn.pbrd.co/images/7f3FklhYZ.png"/></div>
<p class="label">Chrome</p>
</div>
<div class="icon">
<div class="body camera" data-dom-map=".apps.camera" data-theme-color="hide">
<div class="camera-circle">
<div class="black-circle">
<div class="greyish-border">
<div class="grey-dot"></div>
</div>
</div>
</div>
</div>
<p class="label">Camera</p>
</div>
</div>
<div class="dock main">
<div class="icon">
<div class="body quora" data-dom-map=".apps.quora" data-theme-color="#B92B27"><i class="fa fa-quora"></i></div>
<p class="label">Quora</p>
</div>
<div class="icon">
<div class="body medium" data-dom-map=".apps.medium" data-theme-color="#000000"><img src="https://cdn.pbrd.co/images/7eQVMaDeN.png"/></div>
<p class="label">Medium</p>
</div>
<div class="icon">
<div class="body youtube" data-dom-map=".apps.youtube" data-theme-color="#B21911"><i class="fa fa-youtube-play"></i></div>
<p class="label">YouTube</p>
</div>
<div class="icon">
<div class="body facebook" data-dom-map=".apps.facebook" data-theme-color="#2D4778"><i class="fa fa-facebook"></i></div>
<p class="label">Facebook</p>
</div>
</div>
<div class="time-section">
<div class="time"><span class='hour'></span>:<span class='minute'></span></div>
<div class="date"><span class='week-day'></span>, <span class='date'></span> <span class='month'></span></div>
</div>
<div class="search-bar"><img class="google" src="https://cdn.pbrd.co/images/7mp9m16em.png"/><img class="mic" src="https://cdn.pbrd.co/images/7mDVCkv6l.png"/></div>
<div class="status-bar">
<div class="status-net">4G VoLTE</div>
<div class="sim-1 fa fa-signal"></div>
<div class="sim-2 fa fa-signal"></div>
<div class="battery-num">74%</div>
<div class="battery-icon-border">
<div class="battery-status"></div>
</div>
</div>
<div class="apps quora"></div>
<div class="apps medium"></div>
<div class="apps youtube"></div>
<div class="apps facebook"></div>
<div class="apps dialer"></div>
<div class="apps gmail"></div>
<div class="apps message"></div>
<div class="apps chrome"></div>
<div class="apps camera"></div>
</div>
<div class="buttons">
<div class="side"><i class="fa fa-bars"></i></div>
<div class="home"><i class="fa fa-square-o"></i></div>
<div class="back"> <i class="fa fa-angle-left"></i></div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >// Starts Time Section
const num_to_month = ['Jan', 'Feb', 'Mar', 'Apr', 'May' , 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
'Nov', 'Dec']
const num_to_weekday = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu' , 'Fri', 'Sat']
const date = new Date()
$('.time-section .time .hour').text(date.getHours())
$('.time-section .time .minute').text(date.getMinutes())
$('.time-section .date .week-day').text(num_to_weekday[date.getDay()])
$('.time-section .date .date').text(date.getDate())
$('.time-section .date .month').text(num_to_month[date.getMonth()])
// updates time every seconds
setInterval(function(){
$('.time-section .time .minute').text(String("0" + new Date().getMinutes()).slice(-2))
if(new Date().getMinutes() == '0'){
console.log(new Date().getMinutes())
$('.time-section .time .hour').text(new Date().getHours())
}
}, 1000)
// Ends Time Section
// Starts app open Sec
$('.body').click(function(){
var app_screen = $($(this).attr('data-dom-map'))
app_screen.show()
app_screen.removeClass('animate-out').addClass('animate')
if ($(this).attr('data-theme-color') == '#F2F2F2'){
$('.status-bar').css('color', 'black')
$('.battery-icon-border').css('border', '1.4px solid black')
$('.battery-status').css('background', 'black')
}
if ($(this).attr('data-theme-color') == 'hide'){
$('.status-bar').children().hide()
$('.status-bar').css('background', 'black')
}
$('.status-bar').css('background', $(this).attr('data-theme-color'))
listen_for_close(app_screen)
})
function listen_for_close(app_screen){
$('.buttons .home').click(function(){
app_screen.removeClass('animate').addClass('animate-out')
$('.status-bar').css('background', '')
$('.status-bar').css('color', 'white')
$('.battery-icon-border').css('border', '1.4px solid white')
$('.battery-status').css('background', 'white')
if(!$('.battery-status').is(":visible")){
$('.status-bar').children().show()
}
app_screen.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e){
if(e.originalEvent.animationName == 'close')
app_screen.hide()
});
})
}
//# sourceURL=pen.js
</script>
</body></html>
