----- CSS ------------
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
.cop-banner {
/* position: relative; */
width: 100%;
height: 275px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
display: block;
align-items: center;
justify-content: center;
text-align: center;
/* background: url('https://montsame.mn/files/68ec6ab13debf.jpeg') center/cover no-repeat; */
background: #f7f7ed;
display: block;
margin-top: 30px;
}
.cop-logo {
/* position: absolute; */
margin-top: 15px;
margin-left: auto;
margin-right: auto;
display: block;
/* width: 90%;*/
max-height: 80px;
}
.cop-title {
display: block;
width: 60%;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
color: #2f6371;
font-weight: 600;
font-size: 1rem;
letter-spacing: 1px;
}
.cop-countdown {
display: block;
width: 100%;
/* gap: 6px;
position: absolute; */
padding-bottom: 20px;
/* z-index: 3;*/
align-items: center;
justify-content: center;
text-align: center;
}
.cop-glass-box {
/* background: rgba(255, 255, 255, 0.1); */
display: inline-block;
background : #2f6371;
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(8px);
border-radius: 10px;
/* width: 55px; */
width: 23%;
padding: 8px 6px;
transition: all 0.3s ease;
cursor: default;
}
/* .cop-glass-box:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
box-shadow: 0 0 12px rgba(0, 255, 204, 0.4);
}
*/
.cop-glass-box span {
display: block;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: #fff;
text-shadow: 0 0 8px rgba(0,255,204,0.4);
}
.cop-label {
color: #fff;
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 2px;
opacity: 0.9;
}
.cop-down {
position: absolute;
bottom: 10px;
color: #2f6371;
font-weight: 600;
font-size: 0.9rem;
opacity: 0.85;
z-index: 3;
}
---------- JAVA -------------
const targetDate = new Date('August 17, 2026 09:00:00').getTime();
function updateCountdown() {
const now = new Date().getTime();
const diff = targetDate - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').innerText = days;
document.getElementById('hours').innerText = String(hours).padStart(2, '0');
document.getElementById('minutes').innerText = String(minutes).padStart(2, '0');
document.getElementById('seconds').innerText = String(seconds).padStart(2, '0');
if (diff < 0) {
document.getElementById('days').innerText = '0';
document.getElementById('hours').innerText = '00';
document.getElementById('minutes').innerText = '00';
document.getElementById('seconds').innerText = '00';
}
}
updateCountdown();
setInterval(updateCountdown, 1000);