Kapsamlı HTML E-posta Şablonu

Bu proje, çeşitli e-posta iletişim senaryoları için tasarlanmış, modern, duyarlı ve karanlık mod uyumlu, kapsamlı bir HTML e-posta şablonu setidir. Tek bir HTML dosyası içinde birden fazla e-posta türü için hazır örnekler sunar ve geliştirme/önizleme kolaylığı için bir şablon seçici içerir.

✨ Özellikler

• Çoklu Şablon Desteği: Hoşgeldin, şifre sıfırlama, sipariş bilgilendirmeleri, promosyonlar, güvenlik uyarıları ve daha birçok farklı senaryo için hazır şablonlar.
• Duyarlı Tasarım: Tüm ekran boyutlarında (masaüstü, tablet, mobil) mükemmel görünüm.
• Karanlık Mod (Dark Mode) Uyumlu: Kullanıcının işletim sistemi veya e-posta istemcisi karanlık modda ise şablon otomatik olarak uyum sağlar.
• Modern UI Bileşenleri: Bootstrap benzeri butonlar, estetik doğrulama kodu kutuları, bilgi/uyarı/hata mesajları için alert kutuları.
• Kolay Önizleme: Dahili JavaScript tabanlı "Şablon Seçici" paneli ile farklı e-posta örnekleri arasında kod değiştirmeden geçiş yapabilme.
• Modüler Yapı: Her e-posta türü ayrı bir div içinde, HTML yorumlarıyla net bir şekilde bölümlendirilmiştir.
• Minimum CSS & HTML DOM: E-posta istemcilerinde daha iyi uyumluluk ve hızlı yüklenme için optimize edilmiştir.
• Özelleştirilebilir: Renkler, fontlar, logo ve içerik kolayca markanıza göre uyarlanabilir.

🚀 Nasıl Kullanılır?

1. Önizleme:

   • email-template.html dosyasını bir web tarayıcısında açın.
   • Sağ alt köşede bulunan "Şablon Seçici" panelini kullanarak farklı e-posta örneklerini inceleyebilirsiniz.

2. Belirli Bir Şablonu Kullanma:

   • Göndermek istediğiniz e-posta türünü belirleyin (örn: "Şifremi Unuttum Eposta Örneği").
   • email-template.html dosyasını bir metin düzenleyicide açın.
   • İlgili şablonun bulunduğu div bloğunu bulun (HTML yorumları size yol gösterecektir, örn: <!-- ============== Şifremi Unuttum Eposta Örneği Başlangıcı ============== -->).
   • Bu div'in style özelliğindeki display: none; değerini display: block; olarak değiştirin.
   • Diğer tüm şablonların (div.template) style özelliğinde display: none; olduğundan emin olun.
   • Alternatif olarak: Kullanmayacağınız şablon divlerini HTML'den silebilirsiniz, sadece kullanacağınız şablonu ve genel yapıyı (header, footer, CSS) bırakarak.

3. İçeriği Özelleştirme:

   • Logo: Header bölümündeki <img> etiketinin src özelliğini kendi logo URL'niz ile güncelleyin.
   • Yer Tutucular: Metinlerdeki köşeli parantez içindeki yer tutucuları ([Kullanıcı Adı], [Sipariş Numarası], [Linkler], [Şirket Adı], [Yıl] vb.) kendi dinamik veya statik verilerinizle değiştirin.
   • Bağlantılar: Tüm href="#..." bağlantılarını kendi geçerli URL'lerinizle güncelleyin.
   • CSS: İhtiyaç duyarsanız, <style> etiketi içindeki CSS kodlarını markanızın renklerine ve fontlarına göre özelleştirebilirsiniz.

🔧 Özelleştirme İpuçları

• Renkler: Ana renkler (#007bff gibi) CSS içinde kolayca bulunup değiştirilebilir. Dark mode renkleri @media (prefers-color-scheme: dark) bloğu içindedir.
• Fontlar: body, html seçicisindeki font-family özelliğini değiştirerek genel fontu güncelleyebilirsiniz.
• Yeni Şablon Ekleme: Mevcut bir şablon div'ini kopyalayıp içeriğini değiştirerek ve h2.template-title başlığını güncelleyerek yeni şablonlar ekleyebilirsiniz. Şablon seçici, yeni eklenen şablonları otomatik olarak algılayacaktır.

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Bir hata bulursanız veya bir iyileştirme öneriniz varsa, lütfen bir "issue" açın veya bir "pull request" gönderin.

📄 Lisans

Bu proje, The Unlicense altında kamu malı olarak sunulmaktadır. Bu, herkesin bu yazılımı ve ilgili dokümantasyonu herhangi bir amaç için, ticari amaçlar dahil olmak üzere ve herhangi bir kısıtlama olmaksızın kopyalama, değiştirme, birleştirme, yayınlama, dağıtma, alt lisanslama ve/veya satma özgürlüğüne sahip olduğu anlamına gelir.

Daha fazla bilgi için lütfen http://unlicense.org/ adresini ziyaret edin.