[OzanLoji]

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="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Inter & Outfit -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- Canvas Confetti Library (Hedef zamana ulaşıldığında kutlama efekti için) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Eğlence

❤Kalp Fırlat🌸Çiçek Fırlat💧Su Fırlat💣Bomba Fırlat↕Titret

🌸 1

👍1