<!DOCTYPE HTML>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div {
color: rgb(40, 165, 216);
display: flex;
justify-content: center;
text-align: center;
font-size: 30px;
margin-top: 0px;
}
.all {
background-color: white;
border-radius: 12px;
width: 30%;
margin-top: 0px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.a {
display: grid;
gap: 10px;
}
.b {
display: grid;
gap: 14px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
}
.header {
display: flex;
align-items: center;
justify-content: center;
}
.number {
border-radius: 12px;
padding: 4px;
background-color: rgba(218, 217, 217, 0.284);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<section class="droid-arabic-kufi">
<div class="div" id="demo"></div>
<script>
const demo = $("#demo")
var countDownDate = new Date("jun 19, 2022 13:00:00").getTime();
var x = setInterval(function () {
demo.html("")
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var div = $(
`
<div class="all">
<div class="header">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<p>الوقت المتبقي لتخرج دفعة وطن</p>
</div>
<div class="container">
<div class="a">
<div class="number">Day</div>
<div class="number">${days}</div>
</div>
<div class="b">
<div>:</div>
<div>:</div>
</div>
<div class="a">
<div class="number">Hou</div>
<div class="number">${hours}</div>
</div>
<div class="b">
<div>:</div>
<div>:</div>
</div>
<div class="a">
<div class="number">Min</div>
<div class="number">${minutes}</div>
</div>
<div class="b">
<div>:</div>
<div>:</div>
</div>
<div class="a">
<div class="number">Sec</div>
<div class="number">${seconds}</div>
</div>
</div>
</div>
`
)
demo.append(div)
if (distance < 0) {
clearInterval(x);
demo.html("")
let div = $(
`
<div class="all" style="padding:10px">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
مبارك تخرجكم
</div>
`
)
demo.append(div)
}
}, 1000);
</script>
</body>
</html>