<body>
<div id="message" class="text-center">Press and hold the power button to start. PIN code: 1100.</div>
<main id="nokia">
<portion id="screen">
<div id="container">
<section id="screen-pin">
<span>Enter PIN code:</span>
<input id="enterpin" type="password" readonly>
<div class="text-center">OK</div>
</section>
<section id="screen-standby">
<div class="text-right text-small" id="clock"> </div>
<div class="main mb-m20">
<div class="levelbar" id="signal"></div>
<div class="text-center" id="signal-txt">--</div>
<div class="levelbar" id="battery"></div>
</div>
<div class="text-center">Menu</div>
</section>
<section id="screen-call">
<div class="main" id="call"></div>
<div class="text-center">Call</div>
</section>
<section id="screen-menu">
<div class="header">Menu</div>
<div class="main" id="menu"></div>
<div class="text-center">Select</div>
<div class="scrollbar"><span class="handle"></span></div>
</section>
</div>
</portion>
<portion id="keypad">
<div class="key" id="key-pow"></div>
<div class="key" id="key-nav"></div>
<div class="key" id="key-up"></div>
<div class="key" id="key-clr"></div>
<div class="key" id="key-down"></div>
</portion>
<portion id="numpad">
<div class="key num" id="num-1"></div>
<div class="key num" id="num-2"></div>
<div class="key num" id="num-3"></div>
<div class="key num" id="num-4"></div>
<div class="key num" id="num-5"></div>
<div class="key num" id="num-6"></div>
<div class="key num" id="num-7"></div>
<div class="key num" id="num-8"></div>
<div class="key num" id="num-9"></div>
<div class="key num" id="num-aste"></div>
<div class="key num" id="num-0"></div>
<div class="key num" id="num-hash"></div>
</portion>
</main>
<!-- cache images -->
<div style="display: none">
<img src="https://vignette.wikia.nocookie.net/khangnd/images/3/3d/Nokia-messages.png">
<img src="https://vignette.wikia.nocookie.net/khangnd/images/8/8c/Nokia-contacts.png">
<img src="https://vignette.wikia.nocookie.net/khangnd/images/6/67/Nokia-settings.png">
<img src="https://vignette.wikia.nocookie.net/khangnd/images/1/1b/Nokia-tones.png">
<img src="https://vignette.wikia.nocookie.net/khangnd/images/4/45/Nokia-extras.png">
</div>
</body>/* IMAGES */
.messages {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/3/3d/Nokia-messages.png);
}
.contacts {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/8/8c/Nokia-contacts.png);
}
.settings {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/6/67/Nokia-settings.png);
}
.tones {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/1/1b/Nokia-tones.png);
}
.extras {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/4/45/Nokia-extras.png);
}
/* MAIN */
body {
font-family: sans-serif;
}
#nokia {
margin: auto;
width: 262px;
height: 610px;
position: relative;
background: url(https://raw.githubusercontent.com/khang-nd/public-assets/main/Nokia1100.png)
no-repeat;
background-size: contain;
}
portion {
position: absolute;
left: 50%;
transform: translateX(-51%);
}
#screen {
top: 145px;
width: 182px;
height: 135px;
background: #777;
border-radius: 5% / 50%;
box-shadow: inset -3px 3px 3px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
padding: 12px 12px 10px 10px;
}
#container {
width: 100%;
height: 100%;
font-weight: bold;
font-size: 115%;
}
#container > section {
display: none;
height: 100%;
flex-direction: column;
justify-content: space-between;
overflow: auto;
position: relative;
box-sizing: border-box;
}
#keypad {
top: 305px;
width: 200px;
height: 90px;
display: grid;
grid-template-columns: auto auto auto;
}
#numpad {
top: 400px;
width: 200px;
height: 170px;
display: grid;
grid-template-columns: auto auto auto;
}
#key-nav {
grid-row-end: span 2;
}
.key {
cursor: pointer;
}
.main {
height: 100%;
overflow: auto;
display: flex;
}
input[readonly] {
width: 100%;
background: none;
border: 0;
font-size: 150%;
box-sizing: border-box;
}
input[readonly]:focus {
outline: none;
}
.step {
width: 3px;
height: calc(14.2% - 2px - 0.5px);
margin: 1px;
background: rgba(0, 0, 0, 0.2);
}
#battery > .step,
#battery:after {
margin-left: auto;
}
#call {
word-break: break-all;
font-size: 130%;
}
#signal:after,
#battery:after {
content: "";
display: block;
width: 8px;
height: 10px;
background-size: contain;
background-repeat: no-repeat;
}
#signal:after {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/b/b6/Nokia-signal.PNG);
}
#battery:after {
background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/8/82/Nokia-battery.PNG);
}
.header {
display: flex;
align-items: center;
text-align: center;
width: 100%;
font-size: 75%;
font-weight: normal;
}
.header:before,
.header:after {
content: "";
display: block;
width: 100%;
height: 2px;
background: currentColor;
margin: 0 3px;
}
#menu {
display: block;
text-align: center;
font-size: 130%;
background-size: 50%;
background-position: center bottom;
background-repeat: no-repeat;
}
.scrollbar {
position: absolute;
width: 2px;
height: calc(100% - 30px);
background: currentColor;
right: 0;
top: 0;
margin: 15px 2px 15px 0;
}
.scrollbar > .handle {
position: absolute;
left: -2px;
width: 4px;
border: 1px solid;
border-radius: 4px;
background: #899776;
}
/* UTILITIES */
.text-center {
text-align: center;
width: 100%;
}
.text-right {
text-align: right;
width: 100%;
}
.text-small {
font-size: 75%;
}
.mb-m20 {
margin-bottom: -20px;
}
onload = () => {
"use strict";
// UTILITIES
const _s = (selector) => document.querySelector(selector);
const _a = (selector) => document.querySelectorAll(selector);
const rnd = (max = 1, min = 0) => Math.random() * (max - min) + min;
const imei = () => {
// random IMEI generator
let imei = "35";
for (let i = 0; i < 13; i++) imei += Math.round(rnd(9));
return imei;
};
const IMEI = imei();
const clr = (text) => text.slice(0, text.length - 1);
const wait = (ms) => new Promise((func) => setTimeout(func, ms));
const hideAll = () =>
_a("#container > section").forEach((pn) => (pn.style.display = ""));
const offAll = () => _a(".key").forEach((key) => (key.onclick = null));
const show = (elem, off = true) => {
const _self = _s("#" + elem);
if (_self.style.display === "flex") return;
if (off) offAll();
hideAll();
_self.style.display = "flex";
};
// ELEMENTS
const _msg = _s("#message");
const _wrp = _s("#screen");
const _scr = _s("#container");
const _pow = _s("#key-pow");
const _clr = _s("#key-clr");
const _nav = _s("#key-nav");
const _up = _s("#key-up");
const _down = _s("#key-down");
const _num = (fnc) =>
_a(".num").forEach((key) => (key.onclick = (e) => fnc(e)));
// VARIABLES
var started;
// PHONE WORKFLOW
function start() {
started = true;
_wrp.style.background = "#99a883";
_scr.style.background = "#555";
if (navigator.vibrate) navigator.vibrate(200);
wait(1000).then(pin);
}
function stop() {
started = false;
_wrp.style.background = "";
_scr.style.background = "";
offAll();
hideAll();
}
function pin() {
show("screen-pin");
const pwd = _s("#enterpin");
_scr.style.background = "rgba(0, 0, 0, 0.1)";
_clr.onclick = (e) => (pwd.value = clr(pwd.value));
_nav.onclick = (e) => {
if (pwd.value === "1100") {
wait(1500).then(standby);
_wrp.style.visibility = "hidden";
_msg.textContent = "";
} else {
_msg.textContent = "Enter 1100";
}
};
_num((e) => {
const val = e.target.id.split("-")[1];
if (!/hash|aste/.test(val) && pwd.value.length < 4) pwd.value += val;
});
}
function standby() {
show("screen-standby");
_wrp.style.visibility = "";
_a(".levelbar").forEach((bar) => {
const lv = bar.dataset.lv;
const frag = document.createDocumentFragment();
var w = 8;
for (var i = 0; i < 7; i++) {
const step = document.createElement("div");
step.className = "step";
if (i < 3) {
step.style.width = w + "px";
w -= 2;
}
frag.appendChild(step);
}
bar.innerHTML = "";
bar.appendChild(frag);
});
// phone clock
const updateClock = () => {
const today = new Date();
const pad0 = (o) => (o < 10 ? "0" + o : o);
const time = pad0(today.getHours()) + ":" + pad0(today.getMinutes());
_s("#clock").innerText = time;
};
// phone signal
const updateSignal = () => {
_a("#signal > .step").forEach((step) => {
step.style.background = navigator.onLine ? "#000" : "";
});
_s("#signal-txt").innerText = navigator.onLine ? "WI-FI" : "--";
};
// phone battery
const updateBattery = () => {
if (!navigator.getBattery) return;
navigator.getBattery().then((battery) => {
const level = battery.level * 10;
const from = (val) =>
_a("#battery > .step").forEach((step, i) => {
if (i >= val) step.style.background = "#000";
});
if (level >= 8) from(0);
else if (level >= 6.5 && level <= 8) from(1);
else if (level >= 5 && level <= 6.5) from(2);
else if (level >= 4 && level <= 5) from(3);
else if (level >= 3 && level <= 4) from(4);
else if (level >= 2 && level <= 3) from(5);
else from(6);
});
};
// call function
const _call = _s("#call");
const _text = _s("#call + div");
_pow.onclick = (e) => {
show("screen-standby", false);
_call.innerText = "";
_text.style.display = "";
};
_clr.onclick = (e) => {
if (_call.innerText.length <= 1 || _call.innerText.indexOf("Serial") >= 0)
_pow.click();
_call.innerText = clr(_call.innerText);
};
_nav.onclick = (e) => {
if (_call.innerText.indexOf("Serial") >= 0) return;
if (_call.innerText.length) window.open("tel:" + _call.innerText);
else menu();
};
let numclick = (e) => {
show("screen-call", false);
if (_call.innerText.indexOf("Serial") >= 0) return;
let val = e.target.id.split("-")[1];
val = val === "aste" ? "*" : val === "hash" ? "#" : val;
_call.innerText += val;
};
_num(numclick);
_s("#num-hash").onclick = (e) => {
if (_call.innerText !== "*#06") numclick(e);
else {
_call.innerText = "Serial no.\n";
_call.innerText += IMEI;
_text.style.display = "none";
}
};
// timer update
setInterval(() => {
updateClock();
updateSignal();
updateBattery();
}, 1000);
}
function menu() {
show("screen-menu");
var index = 0;
const _menu = _s("#menu");
const _sbar = _s("#screen-menu .handle");
const _class = _menu.className;
const menus = ["Messages", "Contacts", "Tones", "Settings", "Extras"];
const menu_h = 100 / menus.length;
const nav = (dir) => {
if (dir === "up" && index > 0) index--;
if (dir === "down" && index < menus.length - 1) index++;
_menu.innerText = menus[index];
_menu.className = _class + " " + menus[index].toLowerCase();
_sbar.style.top = index * menu_h + "%";
};
_sbar.style.height = menu_h + "%";
nav();
_up.onclick = () => nav("up");
_down.onclick = () => nav("down");
_pow.onclick = standby;
_clr.onclick = standby;
_nav.onclick = () => alert("That's all for now.\nThanks for viewing.");
// _nav.onclick = index => route(index);
}
function route(index) {
switch (index) {
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
}
}
function _hold(type) {
const events =
type === "touch" ? ["touchstart", "touchend"] : ["mousedown", "mouseup"];
_pow.addEventListener(events[0], (e) => {
const target = e.target;
const timer = setTimeout(started ? stop : start, 1200);
e.target.addEventListener(events[1], () => clearTimeout(timer));
});
}
_hold("mouse");
_hold("touch");
};
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.