const firstP = document.querySelector(".first-page");
const massage = document.querySelector(".massage-container");
const power = document.querySelector(".power");
const black = document.querySelector(".black");
const powerT = document.querySelector(".power__text");
const secondP = document.querySelector(".second-page");

massage.addEventListener("click",pageUp);
function pageUp (){
    firstP.style.opacity = "0";
    secondP.style.opacity = "1"
    setTimeout(() => {
        firstP.style.display = "none";
        secondP.style.display = "flex";
    }, 300);
}

power.addEventListener("click",function (){
    if(black.style.opacity == "0"){
        black.style.opacity = "1";
        firstP.style.opacity = "1";
        secondP.style.opacity = "0";
        setTimeout(() => {
            black.style.display = "block";
            firstP.style.display = "flex";
            secondP.style.display = "none";
        }, 100);
    }else{
        black.style.opacity = "0";
        powerT.style.opacity = "0";
        setTimeout(() => {
            black.style.display = "none";
            powerT.style.display = "none";
        }, 100);

    }

})

const clock = document.querySelector(".clock__clock");
setInterval(updateClock, 1000);

function updateClock() {
    let date = new Date();
    let second = date.getSeconds();
    let minute = date.getMinutes();
    let hour = date.getHours();
    let ap = "AM";

    if (hour === 0) {
        hour = 12;
    }
    if (hour > 12) {
        hour -= 12;
        ap = "PM"
    }


    hour = (hour < 10) ? `0${hour}` : hour;
    second = (second < 10) ? `0${second}` : second;
    minute = (minute < 10) ? `0${minute}` : minute;

    clock.innerText = `${hour}:${minute}`;
}