HTML CSS Javascript code for Nokia phone

Author - Mukesh Nath
November 06, 20236 minute read
0

   Remember the code you are gonna to copy is mixed if you want to watch up an preview please check out previous post thank :- You also can support me by following up here or by given link to YouTube or direct contact me with telegram or ai bot :- 







                                 Code :-



  <!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

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

};


</script>

<style type="text/css">

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

}


</style>

<title></title>

</head>

<body>

 <a href="https://www.facebook.com/profile.php?id=100056935015573&mibextid=ZbWKwL"> By Mukesh Nath</a>

 <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">&nbsp;</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>

</html>        

Tags
Mukesh Nath

Mukesh Nath

I am a programer ,web and app developer ,ui Linux designer

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link
To Top