• 12-12-2025, 12:49:01
    #1
    Merhaba r10.net ailesi! 👋

    2026 yılbaşı için modern, tek sayfalık bir geri sayım sitesi hazırladım.
    Saf HTML, CSS ve Vanilla JavaScript ile yapıldı, hiçbir framework veya kütüphane kullanılmadı.

    ══════════════════════════════════════════════════ ═════
    📋 ÖZELLİKLER
    ══════════════════════════════════════════════════ ═════


    ✨ Modern Tasarım
    • Aurora efektli arka plan animasyonları
    • Glassmorphism (cam efekti) kartlar
    • Neon renkler ve yumuşak geçişler
    • Responsive tasarım (mobil uyumlu)


    ❄️ Etkileşimli Animasyonlar
    • Canvas ile kar yağışı (yoğunluk ayarlanabilir)
    • Konfeti patlaması (geri sayım bitince)
    • Cursor sparkle efekti
    • Asılı çanlar ve ışık zinciri animasyonları


    🎵 Ses Özellikleri
    • YouTube müzik entegrasyonu
    • Çan sesleri (hover ile)
    • Ses açma/kapama kontrolü


    ⏰ Geri Sayım
    • 2026 Yılbaşı için geri sayım
    • Kullanıcı saat dilimine göre otomatik hesaplama
    • Gün, Saat, Dakika, Saniye gösterimi
    • Geri sayım bitince "Mutlu Yıllar" mesajı


    💝 Dilek Özelliği
    • LocalStorage ile dilek kaydetme
    • Modal ile dilek yazma/silme


    📱 Sosyal Paylaşım
    • Link kopyalama
    • Twitter paylaşım
    • WhatsApp paylaşım


    ══════════════════════════════════════════════════ ═════
    🛠️ TEKNOLOJİLER
    ══════════════════════════════════════════════════ ═════


    • HTML5
    • CSS3 (backdrop-filter, gradients, animations)
    • Vanilla JavaScript
    • Canvas API
    • Web Audio API
    • LocalStorage API






    ══════════════════════════════════════════════════ ═════
    🚀 KURULUM
    ══════════════════════════════════════════════════ ═════


    1. Dosyaları bir web sunucusuna yükleyin
    2. index.html dosyasını tarayıcıda açın
    3. Hazır! 🎉


    ══════════════════════════════════════════════════ ═════
    💻 TARAYICI DESTEĞİ
    ══════════════════════════════════════════════════ ═════


    • Chrome/Edge (son sürümler)
    • Firefox (son sürümler)
    • Safari (son sürümler)
    • Mobil tarayıcılar


    ══════════════════════════════════════════════════ ═════
    📝 NOTLAR
    ══════════════════════════════════════════════════ ═════


    • Kodlar temiz, yorumlu ve öğrenmeye uygun
    • Accessibility (erişilebilirlik) özellikleri eklenmiş
    • Reduced motion desteği var
    • Performans optimizasyonu yapılmış


    İstediğiniz gibi kullanabilir, değiştirebilir, geliştirebilirsiniz.


    İyi çalışmalar! 🎉✨


    ══════════════════════════════════════════════════ ═════


    Codepen : https://codepen.io/savasciasi/pen/pvyYKMx
  • 12-12-2025, 12:51:02
    #2
    Elinize sağlık hocam
  • 12-12-2025, 12:55:21
    #3
    YusufGunes0 adlı üyeden alıntı: mesajı görüntüle
    Elinize sağlık hocam
    Tesekkürler hocam umarim begenmissinizdir