<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">
<style>
body{
background:#0F172A; /* Koyu modern arka plan */
color:#fff;
font-family:'Strait', sans-serif;
text-align:center;
margin: 0;
padding: 10px;
}
.baslik{
font-size:40px;
font-weight:bold;
margin-top:40px;
}
.altbaslik{
font-size:22px;
color:#CBD5E1;
margin-bottom:40px;
}
/* 4 Çemberi tek satırda tutan ve asla çakıştırmayan esnek kapsayıcı */
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
max-width: 600px;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
}
/* Her çember hücresi */
.circle-box{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
}
/* CSS ile çizilen responsive daire yapısı */
.progress-pie-chart {
width: 100%;
aspect-ratio: 1 / 1;
max-width: 110px; /* Masaüstü için şık üst sınır */
border-radius: 50%;
background: #313332; /* Yeni örnekteki pasif çember arka plan rengi */
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* Çemberin içini boşaltan transparan alan */
.ppc-percents {
position: absolute;
width: 84%; /* Çizgi kalınlığı ayarı */
height: 84%;
background: #0F172A; /* Body arka planı ile senkron */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
/* Çember içindeki sayı */
.ppc-percents span {
display: block;
font-size: 26px;
font-weight: bold;
color: #fff;
}
.circle-label{
font-size:16px;
color:#CBD5E1;
margin-top:10px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Mobil Ekran Uyumluluğu (Çakışma Önleyici Sabitler) */
@media(max-width:768px){
.baslik{font-size:24px; margin-top:20px;}
.altbaslik{font-size:16px; margin-bottom:20px;}
.circle-label{font-size:11px; margin-top:6px;}
.ppc-percents span { font-size: 18px; } /* Sayılar küçülür, çemberden taşmaz */
.countdown-container { gap: 6px; }
}
</style>
</head>
<body>
<div class="baslik">20 Haziran 2026 Cumartesi Saat 10:15</div>
<div class="altbaslik">YKS (YÜKSEKÖĞRETİM KURUMLARI SINAVI) GERİ SAYIM</div>
<div class="countdown-container">
<div class="circle-box" id="box-gun">
<div class="progress-pie-chart" id="chart-gun">
<div class="ppc-percents">
<span id="txt-gun">0</span>
</div>
</div>
<div class="circle-label">Gün</div>
</div>
<div class="circle-box" id="box-saat">
<div class="progress-pie-chart" id="chart-saat">
<div class="ppc-percents">
<span id="txt-saat">0</span>
</div>
</div>
<div class="circle-label">Saat</div>
</div>
<div class="circle-box" id="box-dakika">
<div class="progress-pie-chart" id="chart-dakika">
<div class="ppc-percents">
<span id="txt-dakika">0</span>
</div>
</div>
<div class="circle-label">Dakika</div>
</div>
<div class="circle-box" id="box-saniye">
<div class="progress-pie-chart" id="chart-saniye">
<div class="ppc-percents">
<span id="txt-saniye">0</span>
</div>
</div>
<div class="circle-label">Saniye</div>
</div>
</div>
<script>
function startCountdown(yil, ay, gun, saat, dakika, saniye){
// Örnekteki hedef veri: 2026-06-20 10:15:00
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;
// SÜRE BİTTİĞİNDE TETİKLENEN ALAN
if(distance <= 0){
clearInterval(x);
document.body.innerHTML = '<h1 style="margin-top:100px; color:#fff;">SÜRE DOLDU, SINAV BAŞLADI!</h1>';
setTimeout(function() {
alert("Süre bitti");
}, 100);
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);
// 1. Akıllı Gizleme/Gösterme Kontrolleri (0 Olunca Uçurma Mantığı)
if(days === 0) {
$("#box-gun").css("display", "none");
} else {
$("#box-gun").css("display", "flex");
}
if(hours === 0 && days === 0) {
$("#box-saat").css("display", "none");
} else {
$("#box-saat").css("display", "flex");
}
if(minutes === 0 && hours === 0 && days === 0) {
$("#box-dakika").css("display", "none");
} else {
$("#box-dakika").css("display", "flex");
}
// 2. Grafik İlerleme Derecelerinin Hesaplanması (360 derece üzerinden)
var degGun = (days / 365) * 360;
var degSaat = (hours / 24) * 360;
var degDk = (minutes / 60) * 360;
var degSn = (seconds / 60) * 360;
// 3. İç Metin Değerlerinin Basılması
$('#txt-gun').text(days);
$('#txt-saat').text(hours);
$('#txt-dakika').text(minutes);
$('#txt-saniye').text(seconds);
// 4. Yeni Örnekteki Birebir Orijinal Renk Kodları ile Çemberlerin Güncellenmesi
$('#chart-gun').css('background', 'conic-gradient(#e3be32 ' + degGun + 'deg, #313332 0deg)');
$('#chart-saat').css('background', 'conic-gradient(#36b0e3 ' + degSaat + 'deg, #313332 0deg)');
$('#chart-dakika').css('background', 'conic-gradient(#75bf44 ' + degDk + 'deg, #313332 0deg)');
$('#chart-saniye').css('background', 'conic-gradient(#66c5af ' + degSn + 'deg, #313332 0deg)');
}, 1000);
}
$(document).ready(function(){
// Sitedeki hedef parametrelere göre başlatıyoruz: 20 Haziran 2026, Saat 10:15
startCountdown(2026, 6, 20, 10, 15, 0);
});
</script>
</body>
</html>
