OzanLoji
21 Ekim 2026, 00:10
Bu kod, modern bir cam efekti (glassmorphism) tasarımına sahip, arayüzünde ayar paneli bulundurmayan, doğrudan sabit bir hedef tarihe göre çalışan tek dosyalık bir geri sayım sayacıdır.
Öne Çıkan Özellikleri:
Görsel Tasarım: Arka plandaki renkli neon parlamalar ve buzlu cam kart görünümüyle oldukça şık ve modern bir arayüz sunar.
Canlı Sayım: Belirlenen hedefe kalan gün, saat, dakika ve saniyeyi her saniye güncelleyerek gösterir.
Süre Bitimi Kutlaması: Geri sayım sıfırlandığında otomatik olarak ekranda konfeti patlatır ve kutlama mesajı gösterir.
Hedef Tarih Nasıl Değiştirilir?
Kodun içindeki JavaScript bölümünde yer alan şu iki satırı kendi etkinliğinize göre düzenleyebilirsiniz:
EVENT_TITLE: Sayacın üzerinde görünecek etkinlik başlığı.
TARGET_DATE_STRING: Sayacın geri sayacağı hedef tarih ve saat (YYYY-MM-DDTHH:MM:SS formatında).
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sade & Modern Geri Sayım Sayacı</title>
<!-- Tailwind CSS CDN -->
<script src="[Only Registered Users Can See Links]"></script>
<!-- Google Fonts: Inter & Outfit -->
<link href="[Only Registered Users Can See Links]@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
<!-- Lucide Icons -->
<script src="[Only Registered Users Can See Links]@latest"></script>
<!-- Canvas Confetti Library (Hedef zamana ulaşıldığında kutlama efekti için) -->
<script src="[Only Registered Users Can See Links]@1.6.0/dist/confetti.browser.min.js"></script>
<style>
/* ==========================================
* GENEL SAYFA VE ARKA PLAN TASARIMI
* ========================================== */
body {
font-family: 'Inter', sans-serif;
background: radial-gradient(circle at top left, #1e1b4b, #0f172a, #020617);
min-height: 100vh;
}
.font-outfit {
font-family: 'Outfit', sans-serif;
}
/* Glassmorphic Cam Efekti Kartları */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
/* Arka plandaki renkli neon parıltılar */
.glow-1 {
background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(0,0,0,0) 70%);
}
.glow-2 {
background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, rgba(0,0,0,0) 70%);
}
/* ==========================================
* SAYI DEĞİŞİM (POP) ANIMASYONU
* ========================================== */
@keyframes pop {
0% { transform: scale(0.95); opacity: 0.8; }
50% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
.number-animate {
animation: pop 0.3s ease-out;
}
</style>
</head>
<body class="text-slate-100 flex flex-col justify-between p-4 md:p-8 relative overflow-x-hidden min-h-screen">
<!-- ARKA PLAN NEON PARILTILARI -->
<div class="glow-1 absolute -top-20 -left-20 w-96 h-96 rounded-full pointer-events-none z-0"></div>
<div class="glow-2 absolute -bottom-20 -right-20 w-96 h-96 rounded-full pointer-events-none z-0"></div>
<!-- BAŞLIK VE KÜÇÜK ROZET ALANI -->
<header class="relative z-10 text-center my-auto pt-8">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card text-xs md:text-sm font-medium text-indigo-300 mb-4 border border-indigo-500/20">
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-400"></i>
<span>Geri Sayım</span>
</div>
<!-- Etkinlik Başlığı (JavaScript içerisinden dinamik olarak atanır) -->
<h1 id="eventTitleDisplay" class="text-4xl md:text-6xl font-extrabold font-outfit tracking-tight bg-gradient-to-r from-white via-indigo-200 to-indigo-400 bg-clip-text text-transparent px-4">
Yeni Yıl Geri Sayımı
</h1>
</header>
<!-- SAYAÇ KARTLARI KONTEYNERİ -->
<main class="relative z-10 max-w-4xl mx-auto w-full my-auto py-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8">
<!-- GÜN KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="days" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Gün</span>
</div>
<!-- SAAT KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="hours" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Saat</span>
</div>
<!-- DAKİKA KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="minutes" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Dakika</span>
</div>
<!-- SANİYE KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300 border-indigo-500/30">
<div class="absolute inset-0 bg-gradient-to-b from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="seconds" class="block text-5xl md:text-7xl font-bold font-outfit text-pink-400 tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-pink-300/80 font-medium">Saniye</span>
</div>
</div>
<!-- SÜRE DOLDUĞUNDA GÖRÜNECEK KUTLAMA BİLDİRİMİ -->
<div id="completionMessage" class="hidden glass-card rounded-2xl p-6 text-center border-emerald-500/40 bg-emerald-950/20 my-4 animate-bounce">
<div class="inline-flex p-3 rounded-full bg-emerald-500/20 text-emerald-400 mb-2">
<i data-lucide="party-popper" class="w-8 h-8"></i>
</div>
<h2 class="text-2xl font-bold text-emerald-300 font-outfit">Süre Doldu!</h2>
<p class="text-sm text-emerald-200/70 mt-1">Geri sayım başarıyla tamamlandı.</p>
</div>
</main>
<!-- ALT BİLGİ (FOOTER) -->
<footer class="relative z-10 text-center text-xs text-slate-500 py-4 mt-auto">
<p>© Modern Glassmorphism Geri Sayım Sayaç Kodu</p>
</footer>
<!-- JAVASCRIPT MANTIĞI VE AYARLAR -->
<script>
/*
* ================================================== ============================
* GERİ SAYIM AYARLARI (BURADAN DEĞİŞTİREBİLİRSİNİZ)
* ================================================== ============================
*
* 1. EVENT_TITLE: Sayfada görünecek başlığı değiştirmek için tırnak içini güncelleyin.
* 2. TARGET_DATE_STRING: Hedef tarihi ayarlayın.
* Format Örnekleri:
* - "January 1, 2027 00:00:00"
* - "2027-01-01T00:00:00"
* - "December 31, 2026 23:59:59"
*/
const EVENT_TITLE = "2027 Yeni Yıl Geri Sayımı";
const TARGET_DATE_STRING = "January 1, 2027 00:00:00";
/* ================================================== ============================ */
// 1. DOM Elemanlarını Yakalama
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
const eventTitleDisplay = document.getElementById('eventTitleDisplay');
const completionMessage = document.getElementById('completionMessage');
// Hedef tarihin milisaniye cinsinden zaman damgası (Timestamp)
const targetTime = new Date(TARGET_DATE_STRING).getTime();
// Başlığı ekrana yazdır
eventTitleDisplay.textContent = EVENT_TITLE;
// Lucide ikonlarını yükle
lucide.createIcons();
// 2. Zaman Tek Haneli İse Başına 0 Ekleme (Örn: 5 -> "05")
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
// 3. Geri Sayımı Güncelleyen Ana Fonksiyon
function updateCountdown() {
const currentTime = new Date().getTime();
const distance = targetTime - currentTime;
// Zaman Dolduysa Çalışacak Blok
if (distance <= 0) {
clearInterval(countdownInterval);
daysEl.textContent = "00";
hoursEl.textContent = "00";
minutesEl.textContent = "00";
secondsEl.textContent = "00";
// Kutlama Mesajını Göster ve Konfeti Efektini Çalıştır
completionMessage.classList.remove('hidden');
triggerConfetti();
return;
}
// Zaman Hesaplamaları
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Değerleri Ekrana Yazdır
animateIfChanged(daysEl, formatTime(days));
animateIfChanged(hoursEl, formatTime(hours));
animateIfChanged(minutesEl, formatTime(minutes));
animateIfChanged(secondsEl, formatTime(seconds));
}
// 4. Değer Değiştiğinde Pop Animasyonu Tetikleme
function animateIfChanged(element, newValue) {
if (element.textContent !== String(newValue)) {
element.textContent = newValue;
element.classList.remove('number-animate');
void element.offsetWidth; // Reflow tetikleme
element.classList.add('number-animate');
}
}
// 5. Konfeti Efekti
function triggerConfetti() {
if (typeof confetti === 'function') {
confetti({
particleCount: 120,
spread: 70,
origin: { y: 0.6 }
});
}
}
// 6. Zamanlayıcıyı Başlatma (Her 1 saniyede bir çalışır)
updateCountdown(); // Sayfa açılır açılmaz ilk hesaplama
const countdownInterval = setInterval(updateCountdown, 1000);
</script>
</body>
</html>
[Only Registered Users Can See Links]
Öne Çıkan Özellikleri:
Görsel Tasarım: Arka plandaki renkli neon parlamalar ve buzlu cam kart görünümüyle oldukça şık ve modern bir arayüz sunar.
Canlı Sayım: Belirlenen hedefe kalan gün, saat, dakika ve saniyeyi her saniye güncelleyerek gösterir.
Süre Bitimi Kutlaması: Geri sayım sıfırlandığında otomatik olarak ekranda konfeti patlatır ve kutlama mesajı gösterir.
Hedef Tarih Nasıl Değiştirilir?
Kodun içindeki JavaScript bölümünde yer alan şu iki satırı kendi etkinliğinize göre düzenleyebilirsiniz:
EVENT_TITLE: Sayacın üzerinde görünecek etkinlik başlığı.
TARGET_DATE_STRING: Sayacın geri sayacağı hedef tarih ve saat (YYYY-MM-DDTHH:MM:SS formatında).
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sade & Modern Geri Sayım Sayacı</title>
<!-- Tailwind CSS CDN -->
<script src="[Only Registered Users Can See Links]"></script>
<!-- Google Fonts: Inter & Outfit -->
<link href="[Only Registered Users Can See Links]@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
<!-- Lucide Icons -->
<script src="[Only Registered Users Can See Links]@latest"></script>
<!-- Canvas Confetti Library (Hedef zamana ulaşıldığında kutlama efekti için) -->
<script src="[Only Registered Users Can See Links]@1.6.0/dist/confetti.browser.min.js"></script>
<style>
/* ==========================================
* GENEL SAYFA VE ARKA PLAN TASARIMI
* ========================================== */
body {
font-family: 'Inter', sans-serif;
background: radial-gradient(circle at top left, #1e1b4b, #0f172a, #020617);
min-height: 100vh;
}
.font-outfit {
font-family: 'Outfit', sans-serif;
}
/* Glassmorphic Cam Efekti Kartları */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
/* Arka plandaki renkli neon parıltılar */
.glow-1 {
background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(0,0,0,0) 70%);
}
.glow-2 {
background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, rgba(0,0,0,0) 70%);
}
/* ==========================================
* SAYI DEĞİŞİM (POP) ANIMASYONU
* ========================================== */
@keyframes pop {
0% { transform: scale(0.95); opacity: 0.8; }
50% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
.number-animate {
animation: pop 0.3s ease-out;
}
</style>
</head>
<body class="text-slate-100 flex flex-col justify-between p-4 md:p-8 relative overflow-x-hidden min-h-screen">
<!-- ARKA PLAN NEON PARILTILARI -->
<div class="glow-1 absolute -top-20 -left-20 w-96 h-96 rounded-full pointer-events-none z-0"></div>
<div class="glow-2 absolute -bottom-20 -right-20 w-96 h-96 rounded-full pointer-events-none z-0"></div>
<!-- BAŞLIK VE KÜÇÜK ROZET ALANI -->
<header class="relative z-10 text-center my-auto pt-8">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card text-xs md:text-sm font-medium text-indigo-300 mb-4 border border-indigo-500/20">
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-400"></i>
<span>Geri Sayım</span>
</div>
<!-- Etkinlik Başlığı (JavaScript içerisinden dinamik olarak atanır) -->
<h1 id="eventTitleDisplay" class="text-4xl md:text-6xl font-extrabold font-outfit tracking-tight bg-gradient-to-r from-white via-indigo-200 to-indigo-400 bg-clip-text text-transparent px-4">
Yeni Yıl Geri Sayımı
</h1>
</header>
<!-- SAYAÇ KARTLARI KONTEYNERİ -->
<main class="relative z-10 max-w-4xl mx-auto w-full my-auto py-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8">
<!-- GÜN KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="days" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Gün</span>
</div>
<!-- SAAT KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="hours" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Saat</span>
</div>
<!-- DAKİKA KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="minutes" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Dakika</span>
</div>
<!-- SANİYE KUTUSU -->
<div class="glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300 border-indigo-500/30">
<div class="absolute inset-0 bg-gradient-to-b from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<span id="seconds" class="block text-5xl md:text-7xl font-bold font-outfit text-pink-400 tracking-tight my-2">00</span>
<span class="text-xs md:text-sm uppercase tracking-widest text-pink-300/80 font-medium">Saniye</span>
</div>
</div>
<!-- SÜRE DOLDUĞUNDA GÖRÜNECEK KUTLAMA BİLDİRİMİ -->
<div id="completionMessage" class="hidden glass-card rounded-2xl p-6 text-center border-emerald-500/40 bg-emerald-950/20 my-4 animate-bounce">
<div class="inline-flex p-3 rounded-full bg-emerald-500/20 text-emerald-400 mb-2">
<i data-lucide="party-popper" class="w-8 h-8"></i>
</div>
<h2 class="text-2xl font-bold text-emerald-300 font-outfit">Süre Doldu!</h2>
<p class="text-sm text-emerald-200/70 mt-1">Geri sayım başarıyla tamamlandı.</p>
</div>
</main>
<!-- ALT BİLGİ (FOOTER) -->
<footer class="relative z-10 text-center text-xs text-slate-500 py-4 mt-auto">
<p>© Modern Glassmorphism Geri Sayım Sayaç Kodu</p>
</footer>
<!-- JAVASCRIPT MANTIĞI VE AYARLAR -->
<script>
/*
* ================================================== ============================
* GERİ SAYIM AYARLARI (BURADAN DEĞİŞTİREBİLİRSİNİZ)
* ================================================== ============================
*
* 1. EVENT_TITLE: Sayfada görünecek başlığı değiştirmek için tırnak içini güncelleyin.
* 2. TARGET_DATE_STRING: Hedef tarihi ayarlayın.
* Format Örnekleri:
* - "January 1, 2027 00:00:00"
* - "2027-01-01T00:00:00"
* - "December 31, 2026 23:59:59"
*/
const EVENT_TITLE = "2027 Yeni Yıl Geri Sayımı";
const TARGET_DATE_STRING = "January 1, 2027 00:00:00";
/* ================================================== ============================ */
// 1. DOM Elemanlarını Yakalama
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
const eventTitleDisplay = document.getElementById('eventTitleDisplay');
const completionMessage = document.getElementById('completionMessage');
// Hedef tarihin milisaniye cinsinden zaman damgası (Timestamp)
const targetTime = new Date(TARGET_DATE_STRING).getTime();
// Başlığı ekrana yazdır
eventTitleDisplay.textContent = EVENT_TITLE;
// Lucide ikonlarını yükle
lucide.createIcons();
// 2. Zaman Tek Haneli İse Başına 0 Ekleme (Örn: 5 -> "05")
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
// 3. Geri Sayımı Güncelleyen Ana Fonksiyon
function updateCountdown() {
const currentTime = new Date().getTime();
const distance = targetTime - currentTime;
// Zaman Dolduysa Çalışacak Blok
if (distance <= 0) {
clearInterval(countdownInterval);
daysEl.textContent = "00";
hoursEl.textContent = "00";
minutesEl.textContent = "00";
secondsEl.textContent = "00";
// Kutlama Mesajını Göster ve Konfeti Efektini Çalıştır
completionMessage.classList.remove('hidden');
triggerConfetti();
return;
}
// Zaman Hesaplamaları
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Değerleri Ekrana Yazdır
animateIfChanged(daysEl, formatTime(days));
animateIfChanged(hoursEl, formatTime(hours));
animateIfChanged(minutesEl, formatTime(minutes));
animateIfChanged(secondsEl, formatTime(seconds));
}
// 4. Değer Değiştiğinde Pop Animasyonu Tetikleme
function animateIfChanged(element, newValue) {
if (element.textContent !== String(newValue)) {
element.textContent = newValue;
element.classList.remove('number-animate');
void element.offsetWidth; // Reflow tetikleme
element.classList.add('number-animate');
}
}
// 5. Konfeti Efekti
function triggerConfetti() {
if (typeof confetti === 'function') {
confetti({
particleCount: 120,
spread: 70,
origin: { y: 0.6 }
});
}
}
// 6. Zamanlayıcıyı Başlatma (Her 1 saniyede bir çalışır)
updateCountdown(); // Sayfa açılır açılmaz ilk hesaplama
const countdownInterval = setInterval(updateCountdown, 1000);
</script>
</body>
</html>
[Only Registered Users Can See Links]