İnternette gezinirken bilgisayarınızın veya telefonunuzun saatine bakmak yerine, açık tuttuğunuz bir sekmede net ve şık bir şekilde saati görmek isteyebilirsiniz. Tam da bu ihtiyaca cevap vermek için “Türkiye Saati” adında minimal, hızlı yüklenen ve göz yormayan bir canlı saat sayfası hazırladım: saat-tr.html.
Neden Bu Sayfayı Yaptım?
Çoğu online saat sitesi gereksiz reklamlarla, ağır grafiklerle ve karmaşık arayüzlerle dolu. Oysa bazen tek ihtiyacımız olan şey, ekranın ortasında net bir şekilde duran, doğru saat dilimini gösteren sade bir saat. Bu proje tam olarak bunu hedefliyor: gereksiz hiçbir şey yok, sadece temiz bir tasarım ve doğru zaman bilgisi.
Öne Çıkan Özellikler
- Gerçek Zamanlı Güncelleme: Saat, dakika ve saniye her saniye otomatik olarak yenileniyor, sayfayı yenilemenize gerek yok.
- Türkiye Saat Dilimi (Europe/Istanbul, UTC+3): Saat, tarayıcınızın yerel ayarlarından bağımsız olarak her zaman doğru Türkiye saatini gösteriyor. Bu sayede yurt dışında olsanız bile Türkiye’deki gerçek saati takip edebilirsiniz.
- Türkçe Tarih ve Gün Bilgisi: Gün adı, ay adı ve tarih tamamen Türkçe olarak, okunaklı bir biçimde sunuluyor. Örneğin “Cumartesi, 08 Ağustos 2026” gibi.
- Modern ve Zarif Tasarım: Koyu tonlu, cam efektli (glassmorphism) bir kart tasarımı, yumuşak gölgeler ve okunabilir tipografi ile göz yormayan bir deneyim sunuyor.
- Hafif ve Hızlı: Herhangi bir dış kütüphane veya eklenti kullanılmadan sadece HTML, CSS ve saf JavaScript ile yazıldı. Bu sayede sayfa anında açılıyor.
- Mobil Uyumlu: Tasarım, telefon ve tablet ekranlarında da sorunsuz görüntüleniyor.
Nasıl Çalışıyor?
Sayfa, tarayıcının yerleşik Intl.DateTimeFormat API’sini kullanarak Europe/Istanbul saat diliminden güncel zamanı hesaplıyor. Bu sayede kullanıcının bilgisayarının saat dilimi ayarı ne olursa olsun, sayfa her zaman doğru Türkiye saatini gösteriyor. JavaScript ile her saniye bu bilgi yeniden hesaplanıp ekrana yansıtılıyor.
Kimler Kullanabilir?
- Yurt dışında yaşayıp Türkiye’deki yakınlarıyla iletişim saatini planlamak isteyenler
- Türkiye ile çalışan uzaktan çalışanlar ve serbest çalışanlar
- Kişisel veya kurumsal web sitelerine küçük bir widget olarak eklemek isteyenler
- Sadece sade ve şık bir saat sayfası arayanlar
Kaynak Kod (saat-tr.html)
Aşağıda sayfanın tam kaynak kodu yer alıyor. Tek bir HTML dosyası olduğu için kurulum gerektirmiyor; dosyayı kopyalayıp kendi sunucunuza veya sitenize yükleyerek anında kullanabilirsiniz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Türkiye Saati</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 20%, #1e2a4a 0%, #0b0f1e 70%);
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
color: #fff;
}
.card {
text-align: center;
padding: 48px 64px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
backdrop-filter: blur(6px);
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.flag {
font-size: 40px;
margin-bottom: 8px;
}
.title {
font-size: 18px;
letter-spacing: 4px;
text-transform: uppercase;
color: #ff4d4d;
margin-bottom: 16px;
font-weight: 600;
}
.clock {
font-size: 84px;
font-weight: 700;
letter-spacing: 2px;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 30px rgba(255,77,77,0.35);
}
.clock .sec {
font-size: 44px;
color: #ff8080;
vertical-align: baseline;
}
.date {
margin-top: 18px;
font-size: 22px;
color: #cfd6e6;
text-transform: capitalize;
}
.tz {
margin-top: 10px;
font-size: 14px;
color: #8891a8;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="card">
<div class="flag">🇹🇷</div>
<div class="title">Türkiye Saati</div>
<div class="clock" id="clock">--:--:<span class="sec">--</span></div>
<div class="date" id="date">-</div>
<div class="tz">Europe/Istanbul (UTC+3)</div>
</div>
<script>
const gunler = ["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"];
const aylar = ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"];
function pad(n) { return String(n).padStart(2, "0"); }
function guncelle() {
const simdi = new Date();
const parcalar = new Intl.DateTimeFormat("tr-TR", {
timeZone: "Europe/Istanbul",
hour: "2-digit", minute: "2-digit", second: "2-digit",
day: "2-digit", month: "2-digit", year: "numeric",
weekday: "long",
hourCycle: "h23"
}).formatToParts(simdi).reduce((acc, p) => { acc[p.type] = p.value; return acc; }, {});
document.getElementById("clock").innerHTML =
`${parcalar.hour}:${parcalar.minute}:<span class="sec">${parcalar.second}</span>`;
document.getElementById("date").textContent =
`${parcalar.weekday}, ${parcalar.day} ${aylar[parseInt(parcalar.month,10)-1]} ${parcalar.year}`;
}
guncelle();
setInterval(guncelle, 1000);
</script>
</body>
</html>
Sonuç
“Türkiye Saati” sayfası, karmaşadan uzak, hızlı ve estetik bir çözüm arayanlar için tasarlandı. Tek bir HTML dosyası olduğu için kurulum gerektirmiyor; dilerseniz kendi sunucunuza yükleyip anında kullanabilirsiniz. Sade ama işlevsel bir araç arıyorsanız, bu küçük proje tam size göre.
