<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 ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/circles/0.0.6/circles.min.js"></script>
<div class="row">
<div class="cerceve">
<div class="baslik">OYAK 2026 NEMASININ AÇIKLANMASINA KALAN SÜRE</div>
<div class="altbaslik">Oyak Bilgi Platformu</div>
<div class="countdown-container">
<div class="circle-box" id="box-gun">
<div id="gun"></div>
<div class="circle-label">gün</div>
</div>
<div class="circle-box" id="box-saat">
<div id="saat"></div>
<div class="circle-label">saat</div>
</div>
<div class="circle-box" id="box-dakika">
<div id="dakika"></div>
<div class="circle-label">dakika</div>
</div>
<div class="circle-box" id="box-saniye">
<div id="saniye"></div>
<div class="circle-label">saniye</div>
</div>
</div>
</div>
</div>
</div>
.cerceve{
background:#0F172A;
color:#fff;
font-family:'Strait', sans-serif;
text-align:center;
margin: 0;
padding: 10px;
border-radius:8px;
}
.baslik{
font-size:40px;
font-weight:bold;
margin-top:40px;
}
.altbaslik{
font-size:22px;
color:#CBD5E1;
margin-bottom:40px;
}
/* 4 Daireyi yan yana tutan ve taşmayı/çakışmayı önleyen ana esnek kapsayıcı */
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px; /* Daireler arasında güvenli minimum boşluk */
max-width: 600px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
margin-bottom:45px;
}
/* Her bir dairenin sığacağı sütun alanı */
.circle-box{
flex: 1;
min-width: 0; /* İçerik genişliğinin esnekliği zorlamasını engeller */
display: flex;
flex-direction: column;
align-items: center;
}
/* Kütüphanenin ürettiği container yapısının üst üste binmesini önleyen esnek CSS */
.circle-box > div {
width: 100% !important;
max-width: 110px; /* Masaüstünde dairelerin çok büyümesini engeller */
height: auto !important;
display: flex;
justify-content: center;
}
/* Çemberlerin içindeki sayı metinleri */
.circles-text {
font-size: 24px !important; /* Mobilde taşmayan ideal sabit/esnek boyut dengesi */
font-weight: bold !important;
font-family: 'Strait', sans-serif !important;
}
.circle-label{
font-size:16px;
color:#CBD5E1;
margin-top:8px;
text-transform: uppercase;
letter-spacing: 1px;
}
@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;}
.circles-text { font-size: 18px !important; } /* Küçük ekranlarda sayı fontunu da orantılı küçülttük */
.countdown-container { gap: 6px; } /* Mobilde yan yana sığması için boşluğu optimize ettik */
}
function getResponsiveRadius() {
var containerWidth = window.innerWidth;
// Maksimum container genişliğini sınırla
if (containerWidth > 600) containerWidth = 600;
// Kenar boşluklarını ve gap değerlerini düşerek kullanılabilir net alanı buluyoruz
// (4 daire için toplamda 3 adet gap ve güvenli boşluk payı düşüyoruz)
var availableWidth = containerWidth - 60;
// Her bir daireye düşen maksimum genişlik payı
var singleCircleWidth = availableWidth / 4;
// Yarıçap (Radius) çapın yarısı olduğu için 2'ye bölüyoruz EKRANA YAN YANA AYARLAYAN YER
var calculatedRadius = singleCircleWidth / 4;
// Güvenli alt ve üst sınırlar (Çok küçülüp yok olmasın, çok büyüyüp taşmasın)
if (calculatedRadius < 35) calculatedRadius = 35; // Mobil en küçük sınır
if (calculatedRadius > 55) calculatedRadius = 55; // Masaüstü ideal şık boyut (Çakışmayı önleyen üst sınır)
return calculatedRadius;
}
function createCircle(id, color, max, currentRadius){
return Circles.create({
id: id,
radius: currentRadius,
value: 0,
maxValue: max,
width: 8, // Çember çizgilerini biraz incelterek iç alanı ve sayıyı rahatlattık
colors: ['#334155', color],
duration: 0,
text: function(value){ return value; }
});
}
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;
// SÜRENİN BİTTİĞİ ANI YAKALAYAN KISIM
if(distance <= 0){
clearInterval(x); // Sayacı durdurur
// 1. Ekrana tarayıcı uyarısı çıkartır
//alert("Süre bitti");
// 2. İstersen arka plandaki sayfayı da "SÜRE DOLDU" olarak günceller
//document.body.innerHTML = '<h1 style="margin-top:100px; color:#fff;">SÜRE DOLDU</h1>';
$(".baslik").html("SÜRE DOLDU");
$(".altbaslik").html("");
$(".countdown-container").css("display","none"); //.css("visibility","hidden");
return;
}
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);
if(days === 0) {
$("#box-gun").css("display", "none");
} else {
$("#box-gun").css("display", "flex");
}
// Saat Kontrolü (Gün de sıfırlanmışsa veya doğrudan saat sıfırsa gizlenebilir)
if(hours === 0) {
$("#box-saat").css("display", "none");
} else {
$("#box-saat").css("display", "flex");
}
// Dakika Kontrolü
if(minutes === 0) {
$("#box-dakika").css("display", "none");
} else {
$("#box-dakika").css("display", "flex");
}
}, 1000);
}
$(document).ready(function(){
initCircles();
startCountdown(2027,5, 8, 18, 00, 00);
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
$('#gun, #saat, #dakika, #saniye').empty();
initCircles();
}, 250);
});
});
