<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<script src="https://cdnjs.cloudflare.com/ajax/libs/circles/0.0.6/circles.min.js"></script>
<style>
.cerceve{
background:#0F172A;
color:#fff;
font-family:'Strait', sans-serif;
text-align:center;
}
.baslik{
font-size:40px;
font-weight:bold;
margin-top:40px;
}
.altbaslik{
font-size:22px;
color:#CBD5E1;
margin-bottom:40px;
}
.circle-box{
display:inline-block;
margin:20px;
}
/* Kütüphanenin kendi oluşturduğu metin alanını özelleştiriyoruz */
.circles-text {
font-size:28px !important;
font-weight:bold !important;
font-family:'Strait', sans-serif !important;
}
.circle-label{
font-size:20px;
color:#CBD5E1;
margin-top:5px;
}
@media(max-width:768px){
.baslik{font-size:28px;}
.altbaslik{font-size:18px;}
.circles-text{font-size:22px !important;}
.circle-label{font-size:16px;}
}
</style>
</head>
<div class="cerceve">
<div class="baslik">20 Haziran 2026 Cumartesi Saat 10:15</div>
<div class="altbaslik">BÜYÜK SINAVA KALAN SÜRE</div>
<div class="circle-box">
<div id="gun"></div>
<div class="circle-label">GÜN</div>
</div>
<div class="circle-box">
<div id="saat"></div>
<div class="circle-label">SAAT</div>
</div>
<div class="circle-box">
<div id="dakika"></div>
<div class="circle-label">DAKİKA</div>
</div>
<div class="circle-box">
<div id="saniye"></div>
<div class="circle-label">SANİYE</div>
</div>
</div>
<script>
function createCircle(id, color, max){
return Circles.create({
id: id,
radius: 70,
value: 0,
maxValue: max,
width: 12,
colors: ['#334155', color],
duration: 0, // Süreyi 0 yaparak ondalıklı sayı (float) geçiş animasyonunu tamamen kapattık
text: function(value){ return value; }
});
}
// Daireleri başlatıyoruz
var gunCircle = createCircle('gun', '#FACC15', 365);
var saatCircle = createCircle('saat', '#38BDF8', 24);
var dakikaCircle = createCircle('dakika', '#22C55E', 60);
var saniyeCircle = createCircle('saniye', '#EF4444', 60);
function startCountdown(yil, ay, gun, saat, dakika, saniye){
var hedef = new Date(yil, ay-1, gun, saat, dakika, saniye).getTime();
var x = setInterval(function(){
var now = new Date().getTime();
var distance = hedef - now;
if(distance <= 0){
clearInterval(x);
document.body.innerHTML = '<h1 style="margin-top:100px;">SÜRE DOLDU</h1>';
return;
}
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);
// Grafik barlarını ve içindeki değerleri doğrudan tam sayı olarak güncelliyoruz
gunCircle.update(days);
saatCircle.update(hours);
dakikaCircle.update(minutes);
saniyeCircle.update(seconds);
}, 1000);
}
$(document).ready(function(){
// Hedef tarih: 20 Haziran 2026 10:15:00
startCountdown(2026, 6, 20, 10, 15, 0);
});
</script>
</html>
.cerceve{
background:#0F172A;
color:#fff;
font-family:'Strait', sans-serif;
text-align:center;
}
.baslik{
font-size:40px;
font-weight:bold;
margin-top:40px;
}
.altbaslik{
font-size:22px;
color:#CBD5E1;
margin-bottom:40px;
}
.circle-box{
display:inline-block;
margin:20px;
}
/* Kütüphanenin kendi oluşturduğu metin alanını özelleştiriyoruz */
.circles-text {
font-size:28px !important;
font-weight:bold !important;
font-family:'Strait', sans-serif !important;
}
.circle-label{
font-size:20px;
color:#CBD5E1;
margin-top:5px;
}
@media(max-width:768px){
.baslik{font-size:28px;}
.altbaslik{font-size:18px;}
.circles-text{font-size:22px !important;}
.circle-label{font-size:16px;}
}
