Application class

const lineX = [20, 50, 80]
const lineY = [14, 31, 48, 67]
const config = {
    "lockPage": [`
    <h3 id="time">24:24 </h3>
    <div class="pagesPoints"></div>
    `
    ],
    "homePage": [`
    <h3 id="time">24:24 </h3>
    <div class="pagesPoints"></div>
    <div class="homeTab">
        <img class="shape" src="icons/settings.png">
        <img class="shape" src="icons/phone.png">
        <img class="shape" src="icons/time.png">
    </div>
    `
    ],
    "bank": [
        `<div class="Balance">
        <img id="accountPic" src="imgs/accountDefaultPic.png">
        <p id="accountName">Account Name medtheman</p>
        <p id="accountBalance">Balance: 100.000.000 USD</p>
        <p id="accountStatus">Social Status: Rich</p>
    </div>
    <div class="bankButtons">
        <div>
            <label>Username</label>
            <input id="usernameOfTransaction" />
        </div>
        <div id="amountDiv">
            <label>Amount</label>
            <input id="amountOfTransaction">
        </div>
        <div class="bothDivs">
            <div id="applyTransaction">Apply Transaction</div>
            <div class="ATMs">Look For Nearby ATMs</div>
        </div>
    </div>`,
        `.mainContainer {
        position: absolute;
        border-radius: 26px;
        background: rgba(40,40,40,1);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 220px;
        height: 476px;
    }


    .mainContainer .topBar {
        position: absolute;
        width: 125px;
        height: 18px;
        top: 1.9%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .Balance {
        background: radial-gradient(white,gray);
        border-radius: 20px ;
        box-shadow: gray 10px ;
        width: 100%;
        height: 170px;
    }

    #accountPic {
        width: 60px;
        border-radius: 5px;
        margin-top: 30px;
        margin-left: 20px;
    }

    #accountName{
        text-align: center;
        position: absolute;
        top: 40px;
        margin-left: 90px;
        width: 120px;
    }

    #accountBalance {
        font-size: 15px;
        margin-top: 5px;
        width: 190px;
        margin-left:20px;
    }

    #accountStatus {
        font-size: 15px;
        margin-top: 5px;
        width: 190px;
        margin-left:20px;
    }

    .bankButtons {
        position: absolute;
        left: 50%;
        top: 63%;
        transform: translate(-50%,-50%);
        align-items: center;
        text-align: center;
    }

    .bankButtons #applyTransaction , .ATMs  {
        background: rgba(243, 124, 13,1);
        width: 100%;
        margin-top: 3px;
        padding-top: 10px;
        padding-bottom: 10px;
        transition:800ms;
    }
    #amountDiv {
        margin-top: 8px;
    }
    .bankButtons label {
        color: white;
    }
    .bankButtons input  {
        border: 0;
        height: 35px;
        text-align: center;
        color: white;
        background: rgba(30,30,30,1);transition:800ms;
    }
    .bankButtons input:hover , input:focus {
        background: rgba(255,255,255,1);
        color: black;
    }

    .bankButtons  #applyTransaction:hover  , .ATMs:hover {
        background: rgb(32, 126, 202);
    }

    .bothDivs {
        margin-top: 15px;
    }`
    ]
}
var apps = [[]]
var currentStyle
var timeInterval
var pagesCount = 1
var currentPage = 1
var previousPage = 0


class Application {
    constructor(name, iconPath, scriptPath) {
        this.name = name
        this.iconPath = iconPath
        this.scriptPath = scriptPath
    }
    static registreApp(app) {
        if (apps[pagesCount - 1].length == 12) {
            apps[pagesCount] = []
            pagesCount++
        }
        app.lineY = lineY[Math.trunc(apps[pagesCount - 1].length / 3)]
        app.lineX = lineX[(apps[pagesCount - 1].length % 3)]
        apps[pagesCount - 1].push(app)
    }

    static initialize(app) {
        let mainContainer = document.querySelector(".mainContainer")
        let appTag = document.createElement("div");
        appTag.className = app.name.replace(" ", "")
        let img = document.createElement("img");
        let p = document.createElement("p");
        img.src = app.iconPath
        appTag.appendChild(img)
        p.innerHTML = app.name
        appTag.appendChild(p)
        mainContainer.appendChild(appTag)
        let style = document.createElement('style');
        style.innerHTML = `
        .${appTag.className} {
            position: absolute;
            width: 50px;
            height: 50px;
            top: ${app.lineY}%;
            left: ${app.lineX}%;
            transform: translate(-50%, -50%);
            z-index: 999;
        }
        .${appTag.className} p {
            font-size: 11px;
            text-align: center;
            color: white;
            margin-top:2px;
            font-weight: bold;
            word-wrap: break-word
        }
        .${appTag.className} img {
            margin-left: auto;
            margin-right: auto;
            display: block;
            border-radius: 8px;
            width: 50px;
            transition:500ms;
        }
        .${appTag.className}:hover  {
            width: 55px;
        }
        .${appTag.className}:hover img {
            width: 55px;
        }
        `;
        document.head.appendChild(style);
        app.style = style
    }

    static addEvent(app) {
        let mainContainer = document.querySelector(".mainContainer")
        let appTag = document.querySelector("." + app.name.replace(" ", ""))
        appTag.addEventListener("click", function () {
            mainContainer.innerHTML = app.scriptPath[0]
            mainContainer.innerHTML += `
            <img class="topBar" src="topBar.png"/>
            <div class="homeButton"></div>
            `
            document.querySelector(".homeButton").addEventListener("click", unlockPhone)
            let style = document.createElement('style');
            style.innerHTML = app.scriptPath[1];
            document.head.appendChild(style);
            for (i = 0; i < apps[currentPage - 1].length; i++) {
                document.head.removeChild(apps[currentPage - 1][i].style)
            }
            clearInterval(timeInterval)
            currentStyle = style
        })
    }

    static removeApp(app) {
        var appTag = document.querySelector("." + app.name.replace(" ", ""))
        appTag.parentNode.removeChild(appTag)
        document.head.removeChild(app.style)
    }
}

function registreApps() {
    let Bank = new Application("Bank", "icons/bank.png", config.bank)
    Application.registreApp(Bank)
    let FlappyBird = new Application("Flappy Bird", "icons/flappybird.png")
    Application.registreApp(FlappyBird)
    let Housing = new Application("Housing", "icons/housing.png")
    Application.registreApp(Housing)
    let Messages = new Application("Messages", "icons/messages.png")
    Application.registreApp(Messages)
    let Music = new Application("Music", "icons/music.png")
    Application.registreApp(Music)
    let Notes = new Application("Notes", "icons/notes.png")
    Application.registreApp(Notes)
    let SAES = new Application("SAES", "icons/saes.png")
    Application.registreApp(SAES)
    let Youtube = new Application("Youtube", "icons/youtube.png")
    Application.registreApp(Youtube)

}

function changePage() {
    if (currentPage == pagesCount) {
        currentPage = 1
        previousPage = pagesCount
        for (i = 0; i < apps[currentPage - 1].length; i++) {
            Application.initialize(apps[currentPage - 1][i])
        }
        for (i = 0; i < apps[pagesCount - 1].length; i++) {
            Application.removeApp(apps[pagesCount - 1][i])
        }
    } else {
        currentPage++
        previousPage = currentPage - 1
        for (i = 0; i < apps[currentPage - 1].length; i++) {
            Application.initialize(apps[currentPage - 1][i])
        }
        for (i = 0; i < apps[currentPage - 2].length; i++) {
            Application.removeApp(apps[currentPage - 2][i])
        }
    }
    document.querySelector(`#pagePoint${currentPage}`).style.opacity = "1.0"
    document.querySelector(`#pagePoint${previousPage}`).style.opacity = "0.5"
}

function updateTime() {
    let timeText = document.querySelector('#time')
    let d = new Date();
    let hours = d.getHours()
    let minutes = d.getMinutes()
    if (hours < 10) {
        hours = "0" + hours
    }
    if (minutes < 10) {
        minutes = "0" + minutes
    }
    timeText.innerHTML = hours + ":" + minutes
}

function updateTimeTextPosition() {
    let timeText = document.querySelector('#time')
    timeText.style.fontSize = "12px"
    timeText.style.top = "4.5%"
    timeText.style.left = "82%"
}

function setPagesDisplay() {
    let pagesPoints = document.querySelector(".pagesPoints")
    for (i = 0; i < pagesCount; i++) {
        let div = document.createElement("div")
        div.id = "pagePoint" + (i + 1)
        pagesPoints.appendChild(div)
        if (i == currentPage - 1) {
            div.style.opacity = "1.0"
        }
    }
    pagesPoints.addEventListener("click", changePage)
}

function unlockPhone() {
    if (currentStyle) {
        currentStyle.parentNode.removeChild(currentStyle)
    }
    var mainContainer = document.querySelector(".mainContainer")
    mainContainer.removeEventListener("click", unlockPhone)
    mainContainer.innerHTML = config.homePage[0]
    updateTime()
    updateTimeTextPosition()
    setPagesDisplay()
    timeInterval = setInterval(updateTime, 30000)
    for (i = 0; i < apps[currentPage - 1].length; i++) {
        Application.initialize(apps[currentPage - 1][i])
        Application.addEvent(apps[currentPage - 1][i])
    }
}

function onWindowLoad() {
    var mainContainer = document.querySelector(".mainContainer")
    mainContainer.addEventListener("click", unlockPhone)
    mainContainer.innerHTML = config.lockPage
    updateTime()
    timeInterval = setInterval(updateTime, 30000)
    registreApps()
}
window.addEventListener("load", onWindowLoad)