Selamlar dostlar! Bugün arşivimi karıştırırken bu dijital saate rastladım ve tasarımına gerçekten bayıldım. Kendi koleksiyonum için sakladığım bu şık projeyi, üzerinde biraz çalışıp Türkçeleştirerek sizlerle de paylaşmak istedim.
Hikayesi
İnternette bulup arşivime attığım bu proje, bugün karşıma çıkınca "Bunu neden forumdaki arkadaşlarla paylaşmıyorum?" dedim. Kodlarını inceledim, tamamen Türkçeye çevirdim ve görsel olarak en şık hale getirdim.
Projenin Öne Çıkan Yanları
- Tamamen Türkçe: Günler (Pazartesi-Pazar) ve aylar (Ocak-Aralık) artık tamamen bizim dilimizde.
- ÖÖ / ÖS Desteği: Klasik AM/PM yerine, bize uygun olan Öğleden Önce ve Öğleden Sonra sistemi tıkır tıkır çalışıyor.
- Görsel Tasarım: Saatte Neon Yeşil, tarihte Vurgulu Kırmızı ve aktif takvimde Altın Sarısı renkleriyle harika bir uyum yakaladım.
- 7-Segment LED Efekti: Rakamların arkasındaki o sönük gölgeler, gerçek bir dijital panel hissi veriyor.
ve Web Sitesi Sahipleri İçin
Bu saat sadece bir ekran değil, aynı zamanda siteleriniz için harika bir
Widget.
- Karanlık Mod Uyumu: Saf siyah arka planı sayesinde her türlü blog ve siteye şıklık katar.
- Hızlı ve Hafif: Hiçbir ağırlık yapmaz, tarayıcıyı yormaz.
Teknik Özellikler & Renk Paleti
Proje, görsel bir hiyerarşi oluşturmak için üç ana dijital renk üzerine kurulmuştur:
- Saat Paneli (Neon Yeşil): #4cd137 - Gözü yormayan, klasik gece görüşü rengi.
- Tarih Bölümü (Vurgulu Kırmızı): #ea2027 - Takvimin en dikkat çeken noktası.
- Aktif Takvim (Altın Sarısı): #ffc312 - O anki gün ve ayı vurgulayan premium renk.
- Boyutlar: Panel varsayılan olarak 600px genişliğindedir, ancak her türlü ekrana (TV, Tablet, Web Sidebar) uyum sağlayacak şekilde esnektir.
Kendi Sitenize veya Blogunuza Nasıl Eklersiniz?
Bu saati sitenize eklemek çok basit! İşte adım adım kurulum rehberi:
- Kodları Hazırlayın: Paylaştığım index.html, style.css ve script.js dosyalarını aynı klasöre koyun.
- Dosya Yollarını Kontrol Edin: HTML dosyasındaki <link> ve <script> etiketlerinin dosya isimlerinizle eşleştiğinden emin olun.
- Sidebar (Kenar Çubuğu) İçin: Eğer blogunuzun yan tarafına ekleyecekseniz, CSS dosyasındaki .clock ve .days genişliklerini (width: 600px) kendi sitenizin genişliğine göre (örneğin 100%) güncelleyebilirsiniz.
Kişiselleştirme: Renk ve Boyut Ayarları
Saati kendi zevkinize göre güncellemek çok kolay:
- Renkleri Değiştirmek: style.css dosyasında .clock (yeşil kısım) veya .day-active (sarı kısım) sınıflarının karşısındaki renk kodlarını değiştirerek kendi temanıza uydurabilirsiniz.
- Boyutu Ayarlamak: Rakamları büyütmek veya küçültmek için .clock sınıfındaki font-size: 100px; değerini değiştirmeniz yeterlidir.
- Font: Proje orijinalinde "DS-DIGI" fontuyla çalışır. Gerçekçi bir dijital görünüm için bu fontu sunucunuza yüklemeyi unutmayın!
Gelecek Planı
Şimdilik bu halini paylaşıyorum ama aklımda güzel fikirler var. İlerleyen zamanlarda bu panele
canlı hava durumu ve
namaz vakitleri gibi özellikler de eklemeyi düşünüyorum.
Canlı Demo ve İnceleme: Digital Clock TR - Arşivi
Arşivden çıkardığım bu parça hakkında ne düşünüyorsunuz? Yorumlarınızı ve fikirlerinizi bekliyorum!
Genel Bilgiler »
İnteraktif "Süper ötesi" Dijital Kütüphane Paneli [HTML/CSS/JS]
(21.01.2026, 03:26)
