Create Fully interactive smartphone
Juni 08, 2022
Candil Kuya - Hallo Sobat Developers kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat Fully interactive smartphone sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, Gunakan Kata sandi adalah 1111 dan Anda dapat mengubahnya di pengaturan, Silahkan di simak dan perhatikan baik-baik code di bawah ini.
How to Create Fully interactive smartphone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive smartphone | TailwindCSS x AlpineJS v3</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script defer src="https://unpkg.com/alpinejs@3.2.2/dist/cdn.min.js"></script>
</head>
<body>
<main class="h-screen flex items-center justify-center">
<div
x-data="smartphone"
class="shadow-2xl border-8 mobile-screen border-gray-800 rounded-3xl bg-center bg-no-repeat bg-cover overflow-hidden flex flex-col justify-start"
:class="background.current"
>
<!-- Battery -->
<div
class="flex flex-row justify-end items-center pr-3 transition-colors"
:class="step > 2 ? 'bg-gray-100' : 'bg-transparent'"
>
<svg
x-show="step === 3"
class="fill-current h-3 w-6 text-white"
:class="step > 2 ? 'text-gray-800' : 'text-white'"
viewBox="0 0 20 20"
>
<path
d="M15.808,14.066H6.516v-1.162H5.354v1.162H4.193c-0.321,0-0.581,0.26-0.581,0.58s0.26,0.58,0.581,0.58h1.162
v1.162h1.162v-1.162h9.292c0.32,0,0.58-0.26,0.58-0.58S16.128,14.066,15.808,14.066z M15.808,9.419h-1.742V8.258h-1.162v1.161
h-8.71c-0.321,0-0.581,0.26-0.581,0.581c0,0.321,0.26,0.581,0.581,0.581h8.71v1.161h1.162v-1.161h1.742
c0.32,0,0.58-0.26,0.58-0.581C16.388,9.679,16.128,9.419,15.808,9.419z M17.55,0.708H2.451c-0.962,0-1.742,0.78-1.742,1.742v15.1
c0,0.961,0.78,1.74,1.742,1.74H17.55c0.962,0,1.742-0.779,1.742-1.74v-15.1C19.292,1.488,18.512,0.708,17.55,0.708z M18.13,17.551
c0,0.32-0.26,0.58-0.58,0.58H2.451c-0.321,0-0.581-0.26-0.581-0.58v-15.1c0-0.321,0.26-0.581,0.581-0.581H17.55
c0.32,0,0.58,0.26,0.58,0.581V17.551z M15.808,4.774H9.419V3.612H8.258v1.162H4.193c-0.321,0-0.581,0.26-0.581,0.581
s0.26,0.581,0.581,0.581h4.065v1.162h1.161V5.935h6.388c0.32,0,0.58-0.26,0.58-0.581S16.128,4.774,15.808,4.774z"
></path>
</svg>
<svg
class="fill-current h-3.5 w-6 text-white"
:class="step > 2 ? 'text-gray-800' : 'text-white'"
viewBox="0 0 20 20"
>
<path
d="M16.803,18.615h-4.535c-1,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.535C18.616,17.803,17.804,18.615,16.803,18.615zM17.71,12.268c0-0.502-0.405-0.906-0.907-0.906h-4.535c-0.501,0-0.906,0.404-0.906,0.906v4.535c0,0.502,0.405,0.906,0.906,0.906h4.535c0.502,0,0.907-0.404,0.907-0.906V12.268z M16.803,9.546h-4.535c-1,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.534C18.616,8.734,17.804,9.546,16.803,9.546zM17.71,3.198c0-0.501-0.405-0.907-0.907-0.907h-4.535c-0.501,0-0.906,0.406-0.906,0.907v4.534c0,0.501,0.405,0.908,0.906,0.908h4.535c0.502,0,0.907-0.406,0.907-0.908V3.198z M7.733,18.615H3.198c-1.002,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.535C9.547,17.803,8.735,18.615,7.733,18.615zM8.64,12.268c0-0.502-0.406-0.906-0.907-0.906H3.198c-0.501,0-0.907,0.404-0.907,0.906v4.535c0,0.502,0.406,0.906,0.907,0.906h4.535c0.501,0,0.907-0.404,0.907-0.906V12.268z M7.733,9.546H3.198c-1.002,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.534C9.547,8.734,8.735,9.546,7.733,9.546z M8.64,3.198c0-0.501-0.406-0.907-0.907-0.907H3.198c-0.501,0-0.907,0.406-0.907,0.907v4.534c0,0.501,0.406,0.908,0.907,0.908h4.535c0.501,0,0.907-0.406,0.907-0.908V3.198z"
></path>
</svg>
<p
class="text-xs font-semibold"
:class="step > 2 ? 'text-gray-800' : 'text-white'"
x-text="batteryPower"
>
10%
</p>
<svg
class="fill-current h-4 w-6 text-white"
:class="step > 2 ? 'text-gray-800' : 'text-white'"
viewBox="0 0 20 20"
>
<path
d="M18.834,6.961h-0.655V5.18c0-0.459-0.373-0.834-0.834-0.834H1.166c-0.461,0-0.834,0.375-0.834,0.834v9.64c0,0.461,0.373,0.834,0.834,0.834h16.179c0.461,0,0.834-0.373,0.834-0.834v-1.711h0.655c0.461,0,0.834-0.372,0.834-0.834v-4.48C19.669,7.334,19.295,6.961,18.834,6.961z M16.511,13.986H2V6.014h14.511v1.781v4.48V13.986z"
></path>
<rect x="2.8" y="6.775" width="2.612" height="6.448"></rect>
</svg>
</div>
<!-- Intoduction -->
<div
class="w-full h-full flex flex-col items-center justify-between cursor-pointer py-8 px-5"
x-show="step === 0"
@click="step = 1"
x-transition:enter="transform transition-transform"
x-transition:enter-start="-translate-y-full"
x-transition:enter-end="translate-y-0"
>
<div>
<h2 class="text-white text-4xl" x-text="getTime()"></h2>
<h3 class="text-white text-base" x-text="getDate()"></h3>
</div>
<h2 class="text-white">Click on screen</h2>
</div>
<!-- Password -->
<div
class="w-full h-full flex flex-col justify-center p-5"
x-show="step === 1"
x-transition:enter="transform transition-transform"
x-transition:enter-start="translate-y-full"
x-transition:enter-end="translate-y-0"
>
<h1 class="flex justify-center my-5 font-semibold text-2xl h-10 text-white">
<span class="" x-text="showPassword"></span>
</h1>
<ul class="grid grid-cols-3 grid-rows-4 justify-items-center gap-5">
<li
@click="setPassword(1)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
1
</li>
<li
@click="setPassword(2)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
2
</li>
<li
@click="setPassword(3)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
3
</li>
<li
@click="setPassword(4)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
4
</li>
<li
@click="setPassword(5)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
5
</li>
<li
@click="setPassword(6)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
6
</li>
<li
@click="setPassword(7)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
7
</li>
<li
@click="setPassword(8)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
8
</li>
<li
@click="setPassword(9)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
9
</li>
<li
@click="deletePassword()"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
<svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
</li>
<li
@click="setPassword(0)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
0
</li>
<li
@click="checkPassword()"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
<svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
<path
d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
></path>
</svg>
</li>
</ul>
</div>
<!-- Main -->
<div
x-show="step === 2"
class="w-full h-full flex flex-col justify-between py-8 px-5"
x-show="step === 1"
x-transition:enter="transform transition-transform"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
>
<div>
<h2 class="text-white text-4xl" x-text="getTime()"></h2>
<h3 class="text-white text-base" x-text="getDate()"></h3>
</div>
<ul class="grid grid-rows-2 grid-cols-3 gap-4">
<li @click="step = 3" class="text-white text-center flex flex-col items-center cursor-pointer">
<svg
class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
viewBox="0 0 20 20"
>
<path
d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"
></path>
</svg>
<p class="text-xs">Settings</p>
</li>
<li @click="step = 4" class="text-white text-center flex flex-col items-center cursor-pointer">
<svg
class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
viewBox="0 0 20 20"
>
<path
d="M18.555,15.354V4.592c0-0.248-0.202-0.451-0.45-0.451H1.888c-0.248,0-0.451,0.203-0.451,0.451v10.808c0,0.559,0.751,0.451,0.451,0.451h16.217h0.005C18.793,15.851,18.478,14.814,18.555,15.354 M2.8,14.949l4.944-6.464l4.144,5.419c0.003,0.003,0.003,0.003,0.003,0.005l0.797,1.04H2.8z M13.822,14.949l-1.006-1.317l1.689-2.218l2.688,3.535H13.822z M17.654,14.064l-2.791-3.666c-0.181-0.237-0.535-0.237-0.716,0l-1.899,2.493l-4.146-5.42c-0.18-0.237-0.536-0.237-0.716,0l-5.047,6.598V5.042h15.316V14.064z M12.474,6.393c-0.869,0-1.577,0.707-1.577,1.576s0.708,1.576,1.577,1.576s1.577-0.707,1.577-1.576S13.343,6.393,12.474,6.393 M12.474,8.645c-0.371,0-0.676-0.304-0.676-0.676s0.305-0.676,0.676-0.676c0.372,0,0.676,0.304,0.676,0.676S12.846,8.645,12.474,8.645"
></path>
</svg>
<p class="text-xs">Pictures</p>
</li>
<li @click="step = 5" class="text-white text-center flex flex-col items-center cursor-pointer">
<svg
class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
viewBox="0 0 20 20"
>
<path
d="M10,6.536c-2.263,0-4.099,1.836-4.099,4.098S7.737,14.732,10,14.732s4.099-1.836,4.099-4.098S12.263,6.536,10,6.536M10,13.871c-1.784,0-3.235-1.453-3.235-3.237S8.216,7.399,10,7.399c1.784,0,3.235,1.452,3.235,3.235S11.784,13.871,10,13.871M17.118,5.672l-3.237,0.014L12.52,3.697c-0.082-0.105-0.209-0.168-0.343-0.168H7.824c-0.134,0-0.261,0.062-0.343,0.168L6.12,5.686H2.882c-0.951,0-1.726,0.748-1.726,1.699v7.362c0,0.951,0.774,1.725,1.726,1.725h14.236c0.951,0,1.726-0.773,1.726-1.725V7.195C18.844,6.244,18.069,5.672,17.118,5.672 M17.98,14.746c0,0.477-0.386,0.861-0.862,0.861H2.882c-0.477,0-0.863-0.385-0.863-0.861V7.384c0-0.477,0.386-0.85,0.863-0.85l3.451,0.014c0.134,0,0.261-0.062,0.343-0.168l1.361-1.989h3.926l1.361,1.989c0.082,0.105,0.209,0.168,0.343,0.168l3.451-0.014c0.477,0,0.862,0.184,0.862,0.661V14.746z"
></path>
</svg>
<p class="text-xs">Camera</p>
</li>
<li @click="step = 6" class="text-white text-center flex flex-col items-center cursor-pointer">
<svg
class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
viewBox="0 0 20 20"
>
<path
d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"
></path>
</svg>
<p class="text-xs">Fake Maps</p>
</li>
<li @click="step = 0" class="text-white text-center flex flex-col items-center cursor-pointer">
<svg
class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
viewBox="0 0 20 20"
>
<path
d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"
></path>
</svg>
<p class="text-xs">Lock screen</p>
</li>
<li @click="step = 8" class="text-white text-center flex flex-col items-center cursor-pointer">
<svg
class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
viewBox="0 0 20 20"
>
<path
d="M17.211,3.39H2.788c-0.22,0-0.4,0.18-0.4,0.4v9.614c0,0.221,0.181,0.402,0.4,0.402h3.206v2.402c0,0.363,0.429,0.533,0.683,0.285l2.72-2.688h7.814c0.221,0,0.401-0.182,0.401-0.402V3.79C17.612,3.569,17.432,3.39,17.211,3.39M16.811,13.004H9.232c-0.106,0-0.206,0.043-0.282,0.117L6.795,15.25v-1.846c0-0.219-0.18-0.4-0.401-0.4H3.189V4.19h13.622V13.004z"
></path>
</svg>
<p class="text-xs">Messages</p>
</li>
</ul>
</div>
<!-- Settings -->
<div
class="w-full h-full flex flex-col justify-start bg-gray-100"
x-show="step === 3"
x-transition:enter="transform transition-transform"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
>
<header class="flex flex-row items-center p-1">
<svg
@click="step = 2"
class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
viewBox="0 0 20 20"
>
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
<h2 class="w-full text-xl font-semibold">Settings</h2>
</header>
<main class="px-5 overflow-y-auto overflow-x-hidden">
<h2 class="mb-3 font-semibold">Background</h2>
<ul class="grid grid-rows-2 grid-cols-2 gap-4">
<template x-for="bg in background.collection">
<li
@click="background.current = bg"
:class="background.current === bg ? `border-purple-500 ${bg}` : `border-gray-100 ${bg}`"
class="w-full h-28 bg-center bg-no-repeat bg-cover cursor-pointer shadow-md rounded-md border-4"
></li>
</template>
</ul>
<h2 class="my-3 font-semibold">Password</h2>
<ul class="grid grid-rows-2 grid-cols-2 gap-4">
<li
@click="step = 7"
class="w-full h-28 cursor-pointer shadow-md rounded-md border-4 flex flex-col items-center p-1"
>
<svg class="fill-current w-12 h-12" viewBox="0 0 20 20">
<path
d="M12.319,5.792L8.836,2.328C8.589,2.08,8.269,2.295,8.269,2.573v1.534C8.115,4.091,7.937,4.084,7.783,4.084c-2.592,0-4.7,2.097-4.7,4.676c0,1.749,0.968,3.337,2.528,4.146c0.352,0.194,0.651-0.257,0.424-0.529c-0.415-0.492-0.643-1.118-0.643-1.762c0-1.514,1.261-2.747,2.787-2.747c0.029,0,0.06,0,0.09,0.002v1.632c0,0.335,0.378,0.435,0.568,0.245l3.483-3.464C12.455,6.147,12.455,5.928,12.319,5.792 M8.938,8.67V7.554c0-0.411-0.528-0.377-0.781-0.377c-1.906,0-3.457,1.542-3.457,3.438c0,0.271,0.033,0.542,0.097,0.805C4.149,10.7,3.775,9.762,3.775,8.76c0-2.197,1.798-3.985,4.008-3.985c0.251,0,0.501,0.023,0.744,0.069c0.212,0.039,0.412-0.124,0.412-0.34v-1.1l2.646,2.633L8.938,8.67z M14.389,7.107c-0.34-0.18-0.662,0.244-0.424,0.529c0.416,0.493,0.644,1.118,0.644,1.762c0,1.515-1.272,2.747-2.798,2.747c-0.029,0-0.061,0-0.089-0.002v-1.631c0-0.354-0.382-0.419-0.558-0.246l-3.482,3.465c-0.136,0.136-0.136,0.355,0,0.49l3.482,3.465c0.189,0.186,0.568,0.096,0.568-0.245v-1.533c0.153,0.016,0.331,0.022,0.484,0.022c2.592,0,4.7-2.098,4.7-4.677C16.917,9.506,15.948,7.917,14.389,7.107 M12.217,15.238c-0.251,0-0.501-0.022-0.743-0.069c-0.212-0.039-0.411,0.125-0.411,0.341v1.101l-2.646-2.634l2.646-2.633v1.116c0,0.174,0.126,0.318,0.295,0.343c0.158,0.024,0.318,0.034,0.486,0.034c1.905,0,3.456-1.542,3.456-3.438c0-0.271-0.032-0.541-0.097-0.804c0.648,0.719,1.022,1.659,1.022,2.66C16.226,13.451,14.428,15.238,12.217,15.238"
></path>
</svg>
<p class="text-center">Change password</p>
</li>
</ul>
</main>
</div>
<!-- Picures -->
<div
class="w-full h-full flex flex-col justify-start bg-gray-100 pb-2"
x-show="step === 4"
x-transition:enter="transform transition-transform"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
>
<header class="flex flex-row items-center p-1">
<svg
@click="step = 2"
class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
viewBox="0 0 20 20"
>
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
<h2 class="w-full text-xl font-semibold">Pictures</h2>
</header>
<main class="px-5 overflow-y-auto overflow-x-hidden">
<ul class="w-full grid grid-cols-2 gap-4 mb-4">
<template x-for="picture in picture.collection">
<li :class="picture" class="w-full h-28 bg-center bg-no-repeat bg-cover shadow-md rounded-md"></li>
</template>
</ul>
</main>
</div>
<!-- Camera -->
<div
class="w-full h-full flex flex-col justify-start bg-gray-100"
x-show="step === 5"
x-transition:enter="transform transition-transform"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
>
<header class="flex flex-row items-center p-1">
<svg
@click="step = 2"
class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
viewBox="0 0 20 20"
>
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
<h2 class="w-full text-xl font-semibold">Camera</h2>
</header>
<main class="px-5 h-full flex flex-col justify-center items-center">
<svg class="fill-current text-red-600 w-14 h-14 mb-4" viewBox="0 0 20 20">
<path
d="M12.71,7.291c-0.15-0.15-0.393-0.15-0.542,0L10,9.458L7.833,7.291c-0.15-0.15-0.392-0.15-0.542,0c-0.149,0.149-0.149,0.392,0,0.541L9.458,10l-2.168,2.167c-0.149,0.15-0.149,0.393,0,0.542c0.15,0.149,0.392,0.149,0.542,0L10,10.542l2.168,2.167c0.149,0.149,0.392,0.149,0.542,0c0.148-0.149,0.148-0.392,0-0.542L10.542,10l2.168-2.168C12.858,7.683,12.858,7.44,12.71,7.291z M10,1.188c-4.867,0-8.812,3.946-8.812,8.812c0,4.867,3.945,8.812,8.812,8.812s8.812-3.945,8.812-8.812C18.812,5.133,14.867,1.188,10,1.188z M10,18.046c-4.444,0-8.046-3.603-8.046-8.046c0-4.444,3.603-8.046,8.046-8.046c4.443,0,8.046,3.602,8.046,8.046C18.046,14.443,14.443,18.046,10,18.046z"
></path>
</svg>
<h1>Oh no, something is wrong</h1>
</main>
</div>
<!-- Fake Maps -->
<div
class="w-full h-full flex flex-col justify-start bg-gray-100"
x-show="step === 6"
x-transition:enter="transform transition-transform"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
>
<header class="flex flex-row items-center p-1">
<svg
@click="step = 2"
class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
viewBox="0 0 20 20"
>
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
<h2 class="w-full text-xl font-semibold">Fake Maps</h2>
</header>
<main class="px-5 bg10 h-screen bg-center bg-cover shadow-md rounded-md"></main>
</div>
<!-- Change password -->
<div
class="w-full h-full flex flex-col justify-start bg-gray-100"
x-show="step === 7"
x-transition:enter="transform transition-transform"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
>
<header class="flex flex-row items-center p-1">
<svg
@click="step = 3"
class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
viewBox="0 0 20 20"
>
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
<h2 class="w-full text-xl font-semibold">Change password</h2>
</header>
<main class="px-5 h-screen bg-center bg-cover shadow-md rounded-md">
<h1 class="flex justify-center my-5 font-semibold text-2xl h-10 text-gray-800">
<span class="" x-text="showPassword"></span>
</h1>
<ul class="grid grid-cols-3 grid-rows-4 justify-items-center gap-5">
<li
@click="setPassword(1)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
1
</li>
<li
@click="setPassword(2)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
2
</li>
<li
@click="setPassword(3)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
3
</li>
<li
@click="setPassword(4)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
4
</li>
<li
@click="setPassword(5)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
5
</li>
<li
@click="setPassword(6)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
6
</li>
<li
@click="setPassword(7)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
7
</li>
<li
@click="setPassword(8)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
8
</li>
<li
@click="setPassword(9)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
9
</li>
<li
@click="deletePassword()"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
<svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
</li>
<li
@click="setPassword(0)"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
0
</li>
<li
@click="changePassword()"
class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
>
<svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
<path
d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
></path>
</svg>
</li>
</ul>
</main>
</div>
<!-- Messages -->
<div
class="w-full h-full flex flex-col justify-start bg-gray-100"
x-show="step === 8"
x-transition:enter="transform transition-transform"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
>
<header class="flex flex-row items-center p-1">
<svg
@click="step = 2"
class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
viewBox="0 0 20 20"
>
<path
d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
></path>
</svg>
<h2 class="w-full text-xl font-semibold">Messages</h2>
</header>
<main class="px-3 h-screen bg-center bg-cover shadow-md rounded-md">
<ul class="flex flex-col">
<li class="flex flex-row items-center my-2">
<div
class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
>
<svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
></path>
</svg>
</div>
<div class="ml-3">
<p class="font-semibold">Mike</p>
<p class="text-xs">I like playing golf and tennis in my free time. How about you?</p>
</div>
</li>
<li class="flex flex-row items-center my-2">
<div
class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
>
<svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
></path>
</svg>
</div>
<div class="ml-3">
<p class="font-semibold">Tricia</p>
<p class="text-xs">Last weekend, I went to visit my friends in San Francisco. What...</p>
</div>
</li>
<li class="flex flex-row items-center my-2">
<div
class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
>
<svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
></path>
</svg>
</div>
<div class="ml-3">
<p class="font-semibold">Mum</p>
<p class="text-xs">Have a nice day!</p>
</div>
</li>
<li class="flex flex-row items-center my-2">
<div
class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
>
<svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
></path>
</svg>
</div>
<div class="ml-3">
<p class="font-semibold">Josh</p>
<p class="text-xs">How about tomorrow? Are you going to study English tomorrow?</p>
</div>
</li>
</ul>
</main>
</div>
</div>
</main>
</body>
</html>
.bg1 {
background-image: url("https://i.pinimg.com/originals/a3/ae/b5/a3aeb5bc3ae525341f2f60685d31c10a.jpg");
}
.bg2 {
background-image: url("https://image.winudf.com/v2/image/Y29tLm9vbm9fd2FsbHBhcGVyX3M5X3BsdXNfZ2FsYXh5X3hfbm90ZV85XzhfbWlfbWl4X3NjcmVlbl8wXzE1MjU4MTY4NzZfMDMy/screen-0.jpg?fakeurl=1&type=.jpg");
}
.bg3 {
background-image: url("https://wallpapersflix.com/aesthetic/wp-content/uploads/2020/08/Aesthetic-Android-Background.jpg");
}
.bg4 {
background-image: url("https://images.unsplash.com/photo-1505322022379-7c3353ee6291?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Nnx8fGVufDB8fHw%3D&w=1000&q=80");
}
.bg5 {
background-image: url("https://images.pexels.com/photos/1368382/pexels-photo-1368382.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}
.bg6 {
background-image: url("https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg");
}
.bg7 {
background-image: url("https://media.nature.com/lw800/magazine-assets/d41586-020-01430-5/d41586-020-01430-5_17977552.jpg");
}
.bg8 {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
}
.bg9 {
background-image: url("https://merriam-webster.com/assets/mw/images/article/art-wap-landing-mp-lg/train-3448-72edc8c66df509608c1e13f712a1436e@1x.jpg");
}
.bg10 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpUD18KRowJ-kShh2z-qXCi_LfW4Z6wS9MIhV9o9EiAlolmB1ALRkEo-eLmwdTRNqyzUHADc3y7bFO9V5l7a7AgAqj1BRRse4emUUJkZzWFs_1O6qW9PNszIShMNATGJKTzrCT_pm0UZg/s1600/route_google_map.png");
}
.mobile-screen {
width: 340px;
height: 640px;
}
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
const vibrate = () => {
};
document.addEventListener("alpine:init", () => {
Alpine.data("smartphone", () => ({
init() {
const handle = setInterval(() => (
this.battery === 1 ? clearInterval(handle) : this.battery--
), 10000);
setInterval(() => (this.date = new Date()), 1000);
},
step: 0,
password: {
current: [],
correct: '1111'
},
background: {
current: 'bg1',
collection: ["bg1", "bg2", "bg3", "bg4", "bg5"]
},
picture: {
collection: ["bg7", "bg1", "bg6", "bg2", "bg5", "bg8", "bg3", "bg9", "bg4"]
},
date: new Date(),
battery: 15,
get batteryPower() {
return `${this.battery}%`;
},
formatTime(value) {
return value < 10 ? `0${value}` : value;
},
getDate() {
return new Date().toJSON().slice(0, 10).replace(/-/g, "/");
},
getTime() {
const seconds = this.formatTime(this.date.getSeconds());
const minutes = this.formatTime(this.date.getMinutes());
const hours = this.formatTime(this.date.getHours());
return `${hours}:${minutes}:${seconds}`;
},
showPassword() {
return this.password.current.join(" ").replace(/[0-9]/g, '*');
},
setPassword(number) {
this.vibrate(50);
if (this.password.current.length > 3) return;
this.password.current.push(number);
},
deletePassword() {
this.vibrate(50);
this.password.current = [];
},
checkPassword() {
if (this.password.current.join("") !== this.password.correct) {
this.vibrate(100);
this.password.current = [];
return;
}
this.step = 2;
this.password.current = [];
},
changePassword() {
if (this.password.current.length !== 4) return;
this.password.correct = this.password.current.join("");
this.password.current = [];
this.step = 3;
},
vibrate(pattern) {
navigator.vibrate(pattern);
}
}));
});
Gunakan Live editor online : Live editor online untuk mencoba code diatas.
Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika dirasa Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.
Penutup
Semoga saja code Fully interactive smartphone bisa dijadikan refferensi pembelajaran untuk anda yang masih baru terjun ke dalam dunia web programming, silahkan di share, nantikan web design menarik lainnya hanya di blog ini, Semoga Bermanfaat and Hapy Ngoding.
