console
function powerMe() {
document.getElementById("inAppBar").style.bottom = "-8%";
document.getElementById("inAppBar").style.pointerEvents = "none";
document.getElementsByClassName("wallpaper")[0].style.backgroundImage =
"url('https://assets.codepen.io/2722301/bg.jpg')";
if (powerVar == 1) {
document.getElementsByClassName("ipadScreen")[0].style.opacity = 1;
document.getElementsByClassName("ipadScreen")[0].style.pointerEvents =
"all";
powerVar = 0;
document.getElementsByClassName("lockScreen")[0].style.transition =
"top 800ms ease-in 0s, backdrop-filter 200ms ease-in 0s";
document.getElementsByClassName("dockWrapper")[0].style.transition =
"bottom 400ms ease-in-out 0s";
} else {
document.getElementsByClassName("ipadScreen")[0].style.opacity = 0;
document.getElementsByClassName("ipadScreen")[0].style.pointerEvents =
"none";
powerVar = 1;
setTimeout(function () {
document.getElementsByClassName("lockScreen")[0].style.transition =
"none";
document.getElementsByClassName("dockWrapper")[0].style.transition =
"none";
document.getElementsByClassName("lockScreen")[0].style.backdropFilter =
"blur(0)";
document.getElementsByClassName("lockScreen")[0].style.top = "0";
document.getElementsByClassName("dockWrapper")[0].style.bottom = "-20%";
}, 300);
}
resetIcons();
}
function lockClick() {
document.getElementsByClassName("lockScreen")[0].style.backdropFilter =
"blur(2vh) brightness(1.2)";
document.getElementsByClassName("lockScreen")[0].style.top = "-110%";
document.getElementsByClassName("dockWrapper")[0].style.bottom = "3%";
}
function checkTime() {
var day = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
var month = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
d = new Date();
if (d.getMinutes() < 10) {
minTime = "0" + d.getMinutes();
} else {
minTime = d.getMinutes();
}
document.getElementsByClassName("lockTime")[0].innerHTML =
d.getHours() +
":" +
minTime +
"<br/>" +
day[d.getDay()] +
", " +
month[d.getMonth()] +
" " +
d.getDate();
setTimeout(function () {
checkTime();
}, 500);
}
function goHome() {
document.getElementById("inAppBar").style.bottom = "-8%";
document.getElementById("inAppBar").style.pointerEvents = "none";
document.getElementsByClassName("wallpaper")[0].style.backgroundImage =
"url('https://assets.codepen.io/2722301/bg.jpg')";
document.getElementsByClassName("dockWrapper")[0].style.bottom = "3%";
resetIcons();
}
function resetIcons() {
window.lastIcon = false;
var x = document.getElementsByClassName("iconDiv");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.width = "calc(var(--sizeVar) / 20)";
x[i].style.height = "calc(var(--sizeVar) / 20)";
x[i].style.margin = "calc(var(--sizeVar) / 60) calc(var(--sizeVar) / 120)";
x[i].style.pointerEvents = "all";
x[i].getElementsByClassName("imgDiv")[0].style.opacity = 0;
if (powerVar == 1) {
x[i].style.transition =
"all 0s ease-in-out 350ms, transform 100ms ease-in-out 0s";
x[i].getElementsByClassName("imgDiv")[0].style.transition =
"opacity 0s linear 350ms";
} else {
x[i].style.transition =
"all 500ms ease-in-out 0s, transform 100ms ease-in-out 0s";
x[i].getElementsByClassName("imgDiv")[0].style.transition =
"opacity 300ms linear 0s";
}
}
}
function iconClick(e) {
var x = document.getElementsByClassName("iconDiv");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.width = 0;
x[i].style.height = 0;
x[i].style.margin = 0;
x[i].style.pointerEvents = "none";
x[i].getElementsByClassName("imgDiv")[0].style.opacity = 0;
}
if (window.lastIcon) {
e.target.style.width = "calc(var(--sizeVar) * 1)";
} else {
e.target.style.width = "calc(var(--sizeVar) * .96)";
}
e.target.style.height = "calc(var(--sizeVar) * .74)";
e.target.style.marginLeft = "calc(var(--sizeVar) / 35)";
document.getElementsByClassName("dockWrapper")[0].style.bottom = 0;
e.target.getElementsByClassName("imgDiv")[0].style.opacity = 1;
document
.getElementById("inAppBar")
.style.setProperty("--colorMe", window.barColor);
document.getElementById("inAppBar").style.bottom = "0";
document.getElementById("inAppBar").style.pointerEvents = "all";
setTimeout(function () {
document.getElementsByClassName("wallpaper")[0].style.backgroundImage =
"none";
}, 500);
}
function iconFClick(e) {
window.lastIcon = true;
iconClick(event);
}
powerVar = 0;
setTimeout(function () {
document.getElementsByClassName("ipadScreen")[0].style.opacity = 1;
}, 1000);
<body onload="checkTime();">
<div class="ipadBox">
<button class="powerButton" onclick="powerMe();">I</button>
<div class="ipadScreen">
<div class="wallpaper">
<div class="statusBar"></div>
<div class="dockWrapper">
<div class="dockbar">
<div class="iconDiv" onclick="window.barColor='white';iconClick(event);">
<div class="imgDiv"></div>
</div>
<div class="iconDiv" onclick="window.barColor='white';iconClick(event);">
<div class="imgDiv"></div>
</div>
<div class="iconDiv" onclick="window.barColor='black';iconClick(event);">
<div class="imgDiv"></div>
</div>
<div class="iconDivide"></div>
<div class="iconDiv" onclick="window.barColor='black';iconFClick(event);">
<div class="imgDiv"></div>
</div>
<div class="iconDiv" onclick="window.barColor='white';iconFClick(event);">
<div class="imgDiv"></div>
</div>
</div>
</div>
</div>
<div class="lockScreen" onclick="lockClick();">
<div class="lockContent">
<div class="statusBar"></div>
<div class="lockIcon"></div>
<div class="lockTime">9:41<br />Saturday, August 17</div>
</div>
<div class="interactionBar"></div>
</div>
<div class="interactionBar" id="inAppBar" onclick="goHome();"></div>
</div>
</div>
</body>
:root {
--sizeVar: 90vmin;
}
.ipadBox {
position: absolute;
width: var(--sizeVar);
height: calc(var(--sizeVar) * 0.77);
background-color: #121212;
border-radius: calc(var(--sizeVar) / 24);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 calc(var(--sizeVar) / 200) #9d9ea0;
}
.ipadBox::before,
.ipadBox::after {
content: "";
position: absolute;
width: 4%;
height: 1%;
left: 6%;
top: -1.2%;
border-radius: calc(var(--sizeVar) / 24) calc(var(--sizeVar) / 24) 0 0;
}
.ipadBox::after {
left: 11%;
}
.ipadBox::before,
.ipadBox::after,
.powerButton {
background-color: #8a8a8a;
z-index: -1;
}
.powerButton {
position: absolute;
width: fit-content;
height: 7%;
left: -1.5vmin;
top: 5%;
padding: 0;
padding-right: 0.5vmin;
border: none;
outline: none;
cursor: pointer;
color: transparent;
border-radius: calc(var(--sizeVar) / 24) 0 0 calc(var(--sizeVar) / 24);
}
.powerButton::after {
content: "";
position: absolute;
width: 200%;
height: 150%;
top: -25%;
left: -100%;
}
.ipadScreen {
position: absolute;
width: 95%;
height: 93.6%;
top: 3.2%;
left: 2.5%;
border-radius: calc(var(--sizeVar) / 40);
background-color: #aaaaaa;
opacity: 0;
overflow: hidden;
transition: opacity 300ms linear;
}
.wallpaper,
.lockContent {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-image: url("https://assets.codepen.io/2722301/bg.jpg");
background-size: cover;
background-position: center;
background-color: black;
}
.lockScreen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
cursor: pointer;
overflow: hidden;
backdrop-filter: blur(0);
transition: top 800ms ease-in 0s, backdrop-filter 200ms ease-in 0s;
}
.lockContent {
background: none;
}
.statusBar {
width: 100%;
height: 3%;
background-image: url("status.png");
background-position: right;
background-size: 11.6%;
background-repeat: no-repeat;
}
.lockIcon {
width: 100%;
height: 5%;
background-image: url("https://assets.codepen.io/2722301/lock.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.lockTime {
width: 100%;
font-family: "Work Sans", sans-serif;
font-weight: 200;
font-size: calc(var(--sizeVar) / 46);
color: white;
text-align: center;
line-height: 250%;
margin-top: 3%;
}
.lockTime::first-line {
font-size: calc(var(--sizeVar) / 10.5);
}
.interactionBar {
--colorMe: white;
position: absolute;
bottom: -8%;
height: 3%;
width: 100%;
transition: bottom 800ms ease-in 0s;
}
.lockScreen .interactionBar {
bottom: 0;
}
#inAppBar {
cursor: pointer;
}
.interactionBar::after {
content: "";
position: absolute;
width: 28%;
height: 30%;
top: 0;
margin-left: 36%;
border-radius: 100px;
background-color: var(--colorMe);
}
.lockScreen .interactionBar::after {
animation: interactionAnim 8000ms ease-in infinite;
}
.lockScreen .interactionBar::before {
position: absolute;
width: 100%;
top: -140%;
text-align: center;
color: white;
content: "swipe up to open";
font-size: calc(var(--sizeVar) / 46);
font-family: "Work Sans", sans-serif;
font-weight: 200;
animation: interTextAnim 8000ms ease-in infinite;
}
.dockWrapper {
position: absolute;
bottom: -20%;
width: 100%;
align-items: center;
justify-content: center;
display: flex;
transition: bottom 400ms ease-in-out 0s;
}
.dockWrapper .dockbar {
display: inline-flex;
padding: 0 calc(var(--sizeVar) / 120);
border-radius: calc(var(--sizeVar) / 40);
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(1vh);
}
.dockbar .iconDiv,
.dockbar .iconDivide {
display: inline-flex;
width: calc(var(--sizeVar) / 20);
height: calc(var(--sizeVar) / 20);
margin: calc(var(--sizeVar) / 60) calc(var(--sizeVar) / 120);
border-radius: calc(var(--sizeVar) / 80);
}
.dockbar .iconDiv {
background-color: #ffffff;
cursor: pointer;
transition: all 500ms ease-in-out 0s, transform 100ms ease-in-out 0s;
overflow: hidden;
background-image: url(https://assets.codepen.io/2722301/icon_sf.png);
background-repeat: no-repeat;
background-size: cover;
}
.iconDiv:nth-of-type(2) {
background-image: url(https://assets.codepen.io/2722301/icon_tw.png);
}
.iconDiv:nth-of-type(3) {
background-image: url(https://assets.codepen.io/2722301/icon_fb.png);
}
.iconDiv:nth-of-type(5) {
background-image: url(https://assets.codepen.io/2722301/icon_md.png);
}
.iconDiv:nth-of-type(6) {
background-image: url(https://assets.codepen.io/2722301/icon_cm.png);
}
.dockbar .iconDivide {
width: calc(var(--sizeVar) / 200);
background-color: rgba(255, 255, 255, 0.1);
}
.dockbar .iconDiv:hover {
transform: scale(1.1);
}
.iconDiv .imgDiv {
position: relative;
border: none;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url(https://assets.codepen.io/2722301/img_sf.jpg);
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 300ms linear 0s;
}
.iconDiv:nth-of-type(2) .imgDiv {
background-image: url(https://assets.codepen.io/2722301/img_tw.jpg);
}
.iconDiv:nth-of-type(3) .imgDiv {
background-image: url(https://assets.codepen.io/2722301/img_fb.jpg);
}
.iconDiv:nth-of-type(5) .imgDiv {
background-image: url(https://assets.codepen.io/2722301/img_md.jpg);
}
.iconDiv:nth-of-type(6) .imgDiv {
background-image: url(https://assets.codepen.io/2722301/img_cm.jpg);
}
.dockWrapper {
transition: all 500ms linear;
}
@keyframes interactionAnim {
0% {
top: 0;
}
70% {
top: 0;
}
80% {
top: -50%;
}
92% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes interTextAnim {
0% {
top: -100%;
opacity: 0;
}
70% {
top: -100%;
opacity: 0;
}
80% {
top: -200%;
opacity: 1;
}
90% {
top: -200%;
opacity: 1;
}
100% {
top: -200%;
opacity: 0;
}
}