<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>
body{
background:#0F172A;
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 Daireyi tek satırda tutan esnek flexbox kapsayıcısı */
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px; /* Daireler arası boşluk */
max-width: 800px;
margin: 0 auto;
padding: 0 10px;
}
/* Her bir daire kutusunun esnek yapısı */
.circle-box{
flex: 1; /* Genişliği eşit olarak paylaşırlar */
min-width: 0; /* Mobilde taşmayı önler */
display: flex;
flex-direction: column;
align-items: center;
}
/* Circles kütüphanesinin ürettiği SVG'nin esnek olması için */
.circle-box > div {
width: 100% !important;
max-width: 140px; /* Masaüstünde çok devasa olmasın diye sınır */
height: auto !important;
}
/* Dairelerin içindeki sayıların CSS'i */
.circles-text {
font-size: 4vw !important; /* Ekran genişliğine göre yazı boyutu küçülür */
font-weight: bold !important;
font-family: 'Strait', sans-serif !important;
}
/* Masaüstü ekranlar için yazı boyutuna üst sınır */
@media(min-width: 769px) {
.circles-text {
font-size: 28px !important;
}
}
.circle-label{
font-size:18px;
color:#CBD5E1;
margin-top:8px;
text-transform: uppercase;
}
@media(max-width:768px){
.baslik{font-size:24px; margin-top:20px;}
.altbaslik{font-size:16px; margin-bottom:20px;}
.circle-label{font-size:12px; margin-top:4px;}
.countdown-container { gap: 8px; } /* Mobilde daireler birbirine biraz daha yaklaşır */
}
</style>
</head>
<body>
<div class="baslik">20 Haziran 2026 Cumartesi Saat 10:15</div>
<div class="altbaslik">BÜYÜK SINAVA KALAN SÜRE</div>
<div class="countdown-container">
<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">dakika</div>
</div>
<div class="circle-box">
<div id="saniye"></div>
<div class="circle-label">saniye</div>
</div>
</div>
<script>
// Ekran genişliğine göre ideal daire yarıçapını (radius) hesaplayan fonksiyon
function getResponsiveRadius() {
var width = window.innerWidth;
if (width < 480) {
return (width - 60) / 8; // En dar ekranlarda (Mobil)
} else if (width < 768) {
return 55; // Orta boy cihazlar (Tablet)
}
return 70; // Masaüstü (Desktop)
}
function createCircle(id, color, max, currentRadius){
return Circles.create({
id: id,
radius: currentRadius, // Hesaplanan dinamik yarıçap buraya geliyor
value: 0,
maxValue: max,
width: 10,
colors: ['#334155', color],
duration: 0,
text: function(value){ return value; }
});
}
// Global olarak daire değişkenlerini tanımlıyoruz
var gunCircle, saatCircle, dakikaCircle, saniyeCircle;
function initCircles() {
var radius = getResponsiveRadius();
gunCircle = createCircle('gun', '#FACC15', 365, radius);
saatCircle = createCircle('saat', '#38BDF8', 24, radius);
dakikaCircle = createCircle('dakika', '#22C55E', 60, radius);
saniyeCircle = createCircle('saniye', '#EF4444', 60, radius);
}
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);
if(gunCircle) gunCircle.update(days);
if(saatCircle) saatCircle.update(hours);
if(dakikaCircle) dakikaCircle.update(minutes);
if(saniyeCircle) saniyeCircle.update(seconds);
}, 1000);
}
$(document).ready(function(){
// 1. Daireleri ekrana göre boyutlandırıp başlat
initCircles();
// 2. Geri sayımı başlat
startCountdown(2026, 6, 20, 10, 15, 0);
// 3. Telefon yan çevrilirse veya ekran boyutu değişirse daireleri bozmadan yeniden hesapla
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Mevcut dairelerin içini temizleyip yeni yarıçapla baştan oluşturuyoruz
$('#gun, #saat, #dakika, #saniye').empty();
initCircles();
}, 250);
});
});
</script>
</body>
</html>
