// Created by #anas ali khan; document.addEventListener("DOMContentLoaded", function () { const fill = (number) => number < 10 ? number = "0" + number : number; let date = new Date(); const getTime = () => { document.getElementById("clock-screen").innerHTML = fill(date.getHours()) + ":" + fill(date.getMinutes()); } setInterval(getTime, 100); let Div = (value1, value2) => { let obj = document.createElement("div"); obj.setAttribute("class", value1); value2 == null ? obj.setAttribute("class", value1) : obj.setAttribute("id", value2); return obj; } let Node = (type, text) => { let obj = document.createElement(type); obj.innerHTML = text; return obj; } let Icon = (type) => { let obj = document.createElement("i"); obj.setAttribute("class", "bi"); obj.setAttribute("class", "icons-settings"); obj.setAttribute("class", type); return obj; } let Image = (value, attr1, attr2) => { let obj = document.createElement("img"); obj.setAttribute("src", value); if (!attr1 === null && !attr2 === null) { obj.setAttribute("class", attr1); obj.setAttribute("id", attr2); } if (!attr1 === null && attr2 === null) { obj.setAttribute("class", attr1); } return obj; } const hideTaskbar = (bool) => { if (bool) { document.getElementById("taskbar-buttons").style.visibility = "hidden"; } else { document.getElementById("taskbar-buttons").style.visibility = "visible"; } } let taskbarPermanentButtons = document.getElementById("taskbar-permanent-buttons"), phoneHeader = document.getElementById("phone-header"), phone = document.getElementById("phone"), clock = document.getElementById("clock-screen"), backBtn = document.getElementById("back-btn"), homeBtn = document.getElementById("home-btn"), taskBtn = document.getElementById("task-btn"); const changeTaskarColor = () => taskbarPermanentButtons.classList.add("gray"); const revertTasbarColor = () => taskbarPermanentButtons.classList.remove("gray"); const changeBackground = () => { changeTaskarColor(); taskbarPermanentButtons.style.backgroundColor = "#f2f2f2"; phoneHeader.style.backgroundColor = "#f2f2f2"; clock.style.color = "#424242"; } const revertBackground = () => { revertTasbarColor(); taskbarPermanentButtons.style.backgroundColor = ""; phoneHeader.style.backgroundColor = ""; hideTaskbar(false); } let pads = [1, 2, 3, 4, 5, 6, 7, 8, 9, "*", 0, "#"]; let chs = ["...", "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ", "", "", ""]; let calcs = ["C", "<-", "/", "7", "8", "9", "*", "4", "5", "6", "-", "1", "2", "3", "+", ".", "0", "="]; let numpad = (nr, text) => { let elem = Div("item-key"); elem.appendChild(Node("p", nr)); elem.appendChild(Node("p", text)); return elem; } let changeClass = (obj, old, recent) => { obj.classList.remove(old); obj.classList.add(recent); } let daysInMonth = (month, year) => new Date(year, month, 0).getDate(); class App { constructor(id) { this.id = id; } open() { let app = Div("app", this.id); let header = Div("app-header"); let body = Div("app-body"); switch (this.id) { case "calls": changeClass(header, "app-header", "call-header"); changeClass(body, "app-body", "call-body"); header.appendChild(Node("h3", "Phone")); let display = document.createElement("input"); display.setAttribute("class", "display"); display.setAttribute("disabled", "true"); body.appendChild(display); let keys = Div("keyboard"); for (let index = 0; index < 12; index++) { keys.appendChild(numpad(pads[index], chs[index])); } let call = Div("call"); let c = Image("https://i.ibb.co/WVTm789/call.jpg"); c.setAttribute("class", "call-btn"); call.appendChild(c); let back = Image("https://i.ibb.co/ZGKr0yZ/backkey.jpg"); back.setAttribute("class", "delkey"); call.appendChild(back); body.appendChild(keys); body.appendChild(call); app.appendChild(header); app.appendChild(body); break; case "messages": header.appendChild(Node("h2", "Messages")); header.appendChild(Node("p", "1 unread messages")); app.appendChild(header); setTimeout(() => { let sms = Div("row-sms"); let col1 = Div("col-sms-avatar"); col1.appendChild(Image("https://i.ibb.co/Pc9P4Vh/portofolio-header.jpg")); let col2 = Div("col-sms-content"); let smsHead = Node("p", "Viorel"); smsHead.setAttribute("class", "message-header"); let smsContent = Node("span", "Thank you for checking my code!"); col2.appendChild(smsHead); col2.appendChild(smsContent); sms.appendChild(col1); sms.appendChild(col2); sms.addEventListener("click", function () { sms.style.backgroundColor = "#f2f2f2"; document.getElementsByClassName("app-header")[0].lastChild.innerHTML = "No unread messages"; }) body.appendChild(sms); app.appendChild(body); }, 350); break; case "settings": let setttings = ["Connection", "Sounds and vibration", "Notifications", "Display", "Wallpapers", "Themes", "Lock screen", "Biometrics and security", "Privacy", "Location", "Accounts and backup", "Google", "Advanced freatures", "Device care", "Apps", "About phone"]; let icons_set = ["bi-wifi", "bi-volume-up", "bi-bell", "bi-phone", "bi-images", "bi-layout-sidebar-inset", "bi-file-lock", "bi-shield-check", "bi-shield-shaded", "bi-geo-alt", "bi-person-circle", "bi-google", "bi-award", "bi-heart", "bi-app", "bi-info-circle"]; changeClass(header, "app-header", "set-header"); changeClass(body, "app-body", "set-body"); header.appendChild(Node("h3", "Settings")); header.appendChild(Image("https://i.ibb.co/Pc9P4Vh/portofolio-header.jpg")); app.appendChild(header); for (let index = 0; index < 16; index++) { let row = Div("row-set"); row.appendChild(Icon(icons_set[index])); row.appendChild(Node("p", setttings[index])); body.appendChild(row); } app.appendChild(body); break; case "camera": changeClass(body, "app-body", "camera-body"); body.appendChild(Icon("bi-camera-fill")); body.appendChild(Icon("bi-arrow-counterclockwise")); body.appendChild(Icon("bi-file-earmark-excel")); app.appendChild(body); phoneHeader.style.backgroundColor = "#000"; taskbarPermanentButtons.style.backgroundColor = "#000"; break; case "calendar": let days = ["M", "T", "W", "T", "F", "S", "S"]; let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; let year = date.getFullYear(); changeClass(header, "app-header", "cal-header"); changeClass(body, "app-body", "cal-body"); header.appendChild(Node("h3", months[date.getMonth()].slice(0, 3).toUpperCase() + " " + year)); header.appendChild(Icon("bi-calendar-date")); app.appendChild(header); let day = Div("days"); for (let index = 0; index < days.length; index++) { day.appendChild(Node("p", days[index])); } app.appendChild(day); let count = daysInMonth(date.getMonth() + 1, year); for (let index = 1; index <= count; index++) { body.appendChild(Node("p", index)); } app.appendChild(body); body.children[date.getDate() - 1].classList.add("today"); break; case "files": let dirs = ["Alarms", "Android", "DCIM", "Download", "Movies", "Music", "Notifications", "Pictures", "Podcats", "Ringtones", "Samsung", "Telegram", "WhatsApp"]; changeClass(header, "app-header", "files-header"); header.appendChild(Icon("bi-folder")); header.appendChild(Icon("bi-caret-right")); header.appendChild(Node("p", "Internal storage")); changeClass(body, "app-body", "files-body"); for (let index = 0; index < 13; index++) { let file = Div("file"); file.appendChild(Icon("bi-folder")); file.appendChild(Node("p", dirs[index])); body.appendChild(file); } app.appendChild(header); app.appendChild(body); break; case "alarm": let off = "Alarms"; changeClass(header, "app-header", "alarm-header"); header.appendChild(Node("h3", off)); changeClass(body, "app-body", "alarm-body"); app.appendChild(header); let alarm1 = Div("alarm-row"); alarm1.appendChild(Node("p", "6:00")); let rightSide = Div("alarm-onoff"); rightSide.appendChild(Node("p", "Every day")); let input = document.createElement("input"); input.setAttribute("id", "1"); input.setAttribute("type", "checkbox"); input.setAttribute("checked", "true"); input.setAttribute("disabled", "true"); rightSide.appendChild(input); alarm1.appendChild(rightSide); body.appendChild(alarm1); app.appendChild(body); break; case "calculator": changeClass(header, "app-header", "calc-header"); let ouput = document.createElement("input"); ouput.setAttribute("disabled", "true"); ouput.setAttribute("class", "display-calc"); header.appendChild(ouput); changeClass(body, "app-body", "calc-body"); app.appendChild(header); for (let index = 0; index < 18; index++) { let div = Div("item"); div.appendChild(Node("p", calcs[index])); let id; switch (calcs[index]) { case "<-": id = "backspace"; break; case "/": id = "divide"; break; case "x": id = "multi"; break; case "-": id = "dif"; break; case "+": id = "add"; break; case ".": id = "deci"; break; case "=": id = "result"; break; default: id = calcs[index]; break } div.setAttribute("id", id); body.appendChild(div); } app.appendChild(body); break; } phone.appendChild(app); homeBtn.addEventListener("click", function () { app.remove(); revertBackground(); }) backBtn.addEventListener("click", function () { app.remove(); revertBackground(); }) } } let phoneBtn = document.getElementById("phone-btn"), smsBtn = document.getElementById("sms-btn"), setBtn = document.getElementById("set-btn"), img = document.getElementById("imgs-btn"), calendar = document.getElementById("cal-btn"), files = document.getElementById("files-btn"), alarm = document.getElementById("alarm-btn"), calculator = document.getElementById("calc-btn"); let calling_info = ["Add call", "Hold call", "Bluetooth", "Speaker", "Mute", "Keypad"]; let calling_ico = ["bi-telephone-plus", "bi-pause", "bi-soundwave", "bi-volume-up", "bi-mic-mute", "bi-command"]; const removeBackground = () => { taskbarPermanentButtons.classList.remove("cover"); phoneHeader.classList.remove("cover"); } class CallNumber { constructor(number) { this.number = number; } open() { let window = Div("dialing"); window.appendChild(Node("p", "Calling...")); window.appendChild(Node("h3", this.number)); let calingpad = Div("calling-pad"); for (let index = 0; index < 6; index++) { let elem = Div("item-call"); elem.appendChild(Icon(calling_ico[index])); elem.appendChild(Node("p", calling_info[index])); calingpad.appendChild(elem); } window.appendChild(calingpad); let finishCall = Icon("bi-telephone-x"); finishCall.setAttribute("id", "finish-call"); window.appendChild(finishCall); revertTasbarColor(); phoneHeader.classList.add("cover"); taskbarPermanentButtons.classList.add("cover"); phone.appendChild(window); document.getElementById("finish-call").addEventListener("click", function () { window.remove(); changeTaskarColor(); removeBackground(); }) homeBtn.addEventListener("click", function () { window.remove(); removeBackground(); }) backBtn.addEventListener("click", function () { window.remove(); removeBackground(); }) } } phoneBtn.addEventListener("click", function () { hideTaskbar(); changeBackground(); phoneApp = true; let call = new App("calls"); call.open() let isPress = false; let display = document.getElementsByClassName("display")[0]; let keyboard = document.getElementsByClassName("keyboard")[0]; let keys = keyboard.children; for (let index = 0; index < keys.length; index++) { keys[index].addEventListener("click", function () { if (display.value.length < 18) { if (!isPress) { isPress = true; document.getElementsByClassName("delkey")[0].style.visibility = "visible"; document.getElementsByClassName("delkey")[0].addEventListener("click", function () { display.value = display.value.replace(display.value[display.value.length - 1], ""); }) } display.value += pads[index]; } }) } document.getElementsByClassName("call-btn")[0].addEventListener("click", function () { if (display.value.length > 0) { let callNumber = new CallNumber(display.value); callNumber.open(); } }) }); smsBtn.addEventListener("click", function () { changeBackground() messageApp = true; let mes = new App("messages"); mes.open(); }); setBtn.addEventListener("click", function () { settingsApp = true; changeBackground(); let set = new App("settings"); set.open(); }); img.addEventListener("click", function () { changeBackground(); let images = new App("camera"); images.open(); }) calendar.addEventListener("click", function () { changeBackground(); let cal = new App("calendar"); cal.open(); }) files.addEventListener("click", function () { changeBackground(); let files = new App("files"); files.open(); }) alarm.addEventListener("click", function () { changeBackground(); let alarms = new App("alarm"); alarms.open(); }) let ready = (item) => !isNaN(item[item.length - 1]); calculator.addEventListener("click", function () { changeBackground(); let calc = new App("calculator"); calc.open(); let calc_result = document.getElementsByClassName("display-calc")[0]; let calc_body = document.getElementsByClassName("calc-body")[0]; let key = calc_body.children; let decimal = false, task = false; for (let index = 0; index < key.length; index++) { key[index].addEventListener("click", function () { if (calc_result.value.length < 18) { if (calcs[index] === "C") { calc_result.value = ""; } if (calcs[index] !== "C" && calcs[index] !== "<-" && calcs[index] !== "=" && calcs[index] !== "/" && calcs[index] !== "*" && calcs[index] !== "-" && calcs[index] !== "+" && calcs[index] !== "." && calcs[index] !== "0") { calc_result.value += calcs[index]; } if (calc_result.value.length > 0) { if (calcs[index] === "0") { calc_result.value += "0"; } if (calcs[index] === ".") { if (!decimal) { calc_result.value += "."; decimal = true; } } if (calcs[index] === "+") { if (ready(calc_result.value)) { if (!task) { calc_result.value += "+"; task = true; } else { calc_result.value = eval(calc_result.value) + "+"; task = true; } } } if (calcs[index] === "-") { if (ready(calc_result.value)) { if (!task) { calc_result.value += "-"; task = true; } else { calc_result.value = eval(calc_result.value) + "-"; task = true; } } } if (calcs[index] === "*") { if (ready(calc_result.value)) { if (!task) { calc_result.value += "*"; task = true; } else { calc_result.value = eval(calc_result.value) + "*"; task = true; } } } if (calcs[index] === "/") { if (ready(calc_result.value)) { if (!task) { calc_result.value += "/"; task = true; } else { calc_result.value = eval(calc_result.value) + "/"; task = true; } } } } if (calcs[index] === "=") { if (ready(calc_result.value)) { console.log(calc_result.value) calc_result.value = eval(calc_result.value); } else { calc_result.value = calc_result.value.replace(calc_result.value[calc_result.value.length - 1], ""); calc_result.value = eval(calc_result.value); } } if (calcs[index] === "<-") { if (calc_result.value[calc_result.value.length - 1] === ".") { decimal = false; } calc_result.value = calc_result.value.replace(calc_result.value[calc_result.value.length - 1], ""); } } else { if (calcs[index] === "C") { calc_result.value = ""; } if (calcs[index] === "<-") { if (calc_result.value[calc_result.value.length - 1] === ".") { decimal = false; } calc_result.value = calc_result.value.replace(calc_result.value[calc_result.value.length - 1], ""); } } }) } }) });

Android Home Launcher made by Anas ali khan