Кнопка нажатия открывает страницу x до тех пор, пока отсчет времени откроется страница y ⇐ CSS

[Anonymous]

Нажатие кнопки открывает страницу X до тех пор, пока после обратного отсчета не откроется страница Y
Я делаю этот веб-сайт-сюрприз для своей жены, он состоит из индексной страницы, на которой ведется обратный отсчет до определенной даты. с 1 кнопкой, которая открывает подарок. теперь я хочу, чтобы кнопка либо была заблокирована до тех пор, пока не закончится обратный отсчет, либо, если возможно, чтобы она открывала страницу, где я дразню здесь типа «о, нет, ты не делаешь этого», но если таймер на 0, тогда откроется настоящий приз. если это имеет какой-то смысл . либо способ, либо его работа были бы потрясающими.
вот мой код для упрощения отладки и предварительного просмотра: https://codepen.io/Probler/pen/KKLJxqO

Код: Выделить всё

const targetDate = new Date('July 15, 2024 00:00:00');

function updateCountdown() {
const now = new Date();
const remainingTime = targetDate - now;

if (remainingTime 
body {
background-color: #1e1f22;
}

.download {
font-family: "JetBrains Mono", monospace;
background-color: #383c44;
height: 35px;
width: 70px;
border-radius: 10px;
border: 0;
box-shadow: none;
text-align: center;
font-size: 23px;
font-weight: bolder;
color: #4cb1c2;
}

.tab {
margin: 3rem;
margin-left: 3.6em;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
display: block;
transform: translate(-50%, -50%);
}

h1 {
font-family: "JetBrains Mono", monospace;
font-size: 35px;
white-space: nowrap;
line-height: 0%;
color: white;
}

p {
font-family: "JetBrains Mono", monospace;
font-size: 20px;
padding-top: 3px;
padding-left: 10px;
font-weight: bolder;
color: #abb2bf;
}

.border {
outline: auto;
outline-color: #383c44;
outline-offset: 15px;
outline-width: 5px;
outline-style: solid;
padding: 10px;
border-top-right-radius: 1%;
border-bottom-left-radius: 1%;
border-bottom-right-radius: 1%;
border-top-left-radius: 1%;
}

.window {
background-color: #383c44;
height: 35px;
width: 150px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: left;
}

.win-pos {
transform: translateY(-15px);
}

.dot {
height: 13px;
width: 13px;
background-color: #FF6961;
border-radius: 50%;
transform: translate(126px,-38px);
}

Countdown






Until
Gift
:
{



Days:
,



Hours:
,



Minutes:
,



Seconds:
,




Unlock Gift:


Open


,



};


< /code>
< /div>
< /div>
< /p>
Если это не подходящее место для спроса, то мне извините! но если бы вы могли перенаправить меня, где я должен быть, это было бы полезно.

Подробнее здесь: https://stackoverflow.com/questions/786 ... pen-page-y