+- Klavyem.nET Topluluğu. (https://klavyem.net)
+-- Forum: Webmaster-E-Ticaret Bölümü (https://klavyem.net/forumdisplay.php?fid=39)
+--- Forum: Web Site Tanıtımı (https://klavyem.net/forumdisplay.php?fid=40)
+--- Konu Başlığı: Ücretsiz güzel söz ve reklam ikisi bir arada html site (/showthread.php?tid=3656)
Ücretsiz güzel söz ve reklam ikisi bir arada html site - Kaan - 26-10-2025
================================================================================
GÜZEL SÖZLER (SOZUM.ORG) - PROJE DETAYLARI
================================================================================
Proje Adı: Güzel Sözler Platformu
Domain: sozum.org
Geliştirici: Kaan Yavuz
Tarih: 2025
Teknolojiler: HTML5, CSS3, Vanilla JavaScript, LocalStorage API
================================================================================
1. PROJE YAPISI
================================================================================
📁 guzel-sozler/
├── 📄 index.html # Ana sayfa
├── 📄 style.css # Ana sayfa stilleri
├── 📄 script.js # Ana sayfa JavaScript
├── 📄 login.html # Kullanıcı giriş/kayıt
├── 📄 user-panel.html # Kullanıcı paneli
├── 📄 user-panel-style.css # Kullanıcı paneli CSS
├── 📄 user-panel-script.js # Kullanıcı paneli JS
├── 📄 admin.html # Admin paneli
├── 📄 admin-style.css # Admin paneli CSS
├── 📄 admin-script.js # Admin paneli JS
├── 📄 reklam-ekle.html # Reklam ekleme sayfası
├── 📄 protection.js # MD5 koruma sistemi
├── 📄 demo-data.js # Demo veriler
└── 📄 README.md # Dokümantasyon
================================================================================
2. ANA SAYFA (index.html)
================================================================================
2.1 HEADER BÖLÜMÜ
─────────────────
• Logo: "Güzel Sözler" başlığı + quote simgesi
• Navigasyon Menüsü:
- Ana Sayfa
- Kategoriler
- Giriş Yap (dinamik - giriş yapınca "Hesabım" olur)
- Panelim (giriş yapınca görünür)
- Admin Panel (admin girişinde görünür)
• Mobil Menü Butonu (responsive)
2.2 HERO BÖLÜMÜ
─────────────────
• Gradient arka plan (mor-pembe tonları)
• Ana başlık: "İlham Veren Sözler"
• Alt başlık: "Hayatınıza anlam katan en güzel sözler burada"
• Arama Kutusu:
- Gerçek zamanlı arama
- Sözlerde ve yazarlarda arama
- Enter tuşu desteği
• Animasyonlar: fadeInUp, float
2.3 KATEGORİLER BÖLÜMÜ
──────────────────────
6 Kategori (Her biri animasyonlu):
1. 💕 Aşk Sözleri
- İkon: Pembe kalp emojisi
- Hover: Yukarı kalkma + shadow
- Animasyon: Bounce (zıplama)
2. 🌟 Hayat Sözleri
- İkon: Yıldız emojisi
- Hover: Scale + shadow
3. 💪 Motivasyon
- İkon: Kas emojisi
- Hover: Transform + glow
4. 😢 Üzgün Sözler
- İkon: Üzgün yüz emojisi
- Hover: Gradient değişimi
5. ✨ Güzel Sözler
- İkon: Parlama emojisi
- Hover: Shimmer efekti
6. 🤔 Düşünceler
- İkon: Düşünen yüz emojisi
- Hover: Rotate animasyonu
Özellikler:
• Her kart için farklı hover rengi
• Float animasyonu (sürekli hafif hareket)
• Tıklanınca o kategoriye filtrele
• Gradient arka planlar
2.4 SÖZLER BÖLÜMÜ
─────────────────
Özellikler:
• Grid layout (responsive)
• Her söz kartı:
- Gradient arka plan (beyaz-pembe)
- Büyük tırnak işareti (arka plan)
- Söz metni
- Yazar adı (pembe renk)
- Kategori badge (renkli, animasyonlu)
- Beğeni sayısı (kalp ikonu)
- İşlem butonları:
* Beğen (favori ekle/çıkar)
* Paylaş (native share API)
* Kopyala (clipboard API)
Animasyonlar:
• cardPulse: Sürekli nabız efekti
• quoteFloat: Tırnak işareti animasyonu
• Shimmer: Hover'da ışıltı geçişi
• Scale + translateY: Hover'da büyüme
Filtreleme:
• Kategoriye göre filtreleme
• "Tümü" ve "Favorilerim" butonları
• Arama ile gerçek zamanlı filtreleme
2.5 FOOTER BÖLÜMÜ
─────────────────
3 Kolon Yapısı:
Sol Kolon - Hakkında:
• Logo ve açıklama metni
• Sosyal medya linkleri:
• İkonlar animasyonlu (hover efekti)
Orta Kolon - Kategoriler:
• Tüm kategorilere hızlı linkler
• Tıklanınca kategoriye scroll + filtrele
Sağ Kolon - İletişim:
• 📧 E-posta: info@sozum.org
• 📱 Telefon: +90 539 468 62 92
• 📍 Konum: İstanbul, Türkiye
Footer Bottom:
• Copyright © 2025
• 💻 Kaan Yavuz imzası (pembe vurgu)
• 📢 "Reklam Ekle" butonu (göz alıcı tasarım)
- Pembe gradient arka plan
- Hover animasyonu
- Border efekti
• 🛡️ "Admin" linki (gizli)
- Hover'da pembe renk
2.6 TASARIM ÖZELLİKLERİ
───────────────────────
Renkler:
• Primary: #ff6b9d (Pembe)
• Secondary: #c06c84 (Gül kurusu)
• Accent: #f67280 (Koyu pembe)
• Dark: #2c3e50 (Lacivert)
• Gradient 1: #667eea → #764ba2 (Mor)
• Gradient 2: #f093fb → #f5576c (Pembe)
• Arka plan: #ffecd2 → #fcb69f → #ff9a9e (Turuncu-Pembe)
Animasyonlar:
• bgFloat: Arka plan float efekti (20s)
• headerGlow: Header glow animasyonu (3s)
• floatCard: Kartların sürekli hareketi (3s)
• bounce: Zıplama efekti (2s)
• cardPulse: Nabız animasyonu (4s)
• glow: Parlama efekti (2s)
• fadeInUp: Yukarı fade-in (0.8s)
• slideUp: Aşağıdan kayma (0.5s)
Responsive:
• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: < 768px
• Mobil menü (hamburger)
• Grid'ler responsive
================================================================================
3. KULLANICI GİRİŞ SİSTEMİ (login.html)
================================================================================
3.1 TASARIM
───────────
• 2 kolonlu layout
• Sol: Welcome bölümü (gradient, icon, metin)
• Sağ: Form bölümü
3.2 TAB SİSTEMİ
───────────────
İki sekme:
1. Giriş Yap
- E-posta
- Şifre
- "Giriş Yap" butonu
2. Kayıt Ol
- Ad Soyad
- E-posta
- Şifre (min 6 karakter)
- "Kayıt Ol" butonu
3.3 ÖZELLİKLER
──────────────
• Tab geçişi animasyonlu (fadeIn)
• Input focus efektleri (border + shadow)
• Hata mesajları (shake animasyonu)
• Başarı mesajları (yeşil alert)
• Otomatik giriş (kayıt sonrası)
• Session yönetimi:
- sessionStorage: Tarayıcı kapanınca siler
- "Beni Hatırla" yok (güvenlik)
3.4 VALİDASYON
──────────────
• E-posta format kontrolü
• Şifre min 6 karakter
• Boş alan kontrolü
• Duplicate e-posta kontrolü (kayıt)
• Şifre eşleşme kontrolü (giriş)
3.5 YÖNLENDİRME
───────────────
• Başarılı giriş → index.html
• Başarılı kayıt → index.html (otomatik giriş)
• Zaten giriş yapılmış → index.html
================================================================================
4. KULLANICI PANELİ (user-panel.html)
================================================================================
4.1 SIDEBAR MENÜ
────────────────
Menü Öğeleri:
1. 🏠 Dashboard (Ana Sayfa)
- İstatistikler
- Son paylaşılan sözler
2. 📝 Sözlerim
- Tüm paylaşılan sözler
- Onay durumu gösterimi
- Beğeni sayıları
- Düzenle/Sil butonları
3. ➕ Yeni Söz Ekle
- Form ile söz paylaşma
- Kategori seçimi
- Karakter sayacı (max 500)
- Admin onay bilgisi
4. ❤️ Favorilerim
- Beğenilen sözler
- Favoriden çıkarma
5. 👤 Profil
- Kullanıcı bilgileri
- Kayıt tarihi
- İstatistikler
- Seviye sistemi
6. 🔑 Şifre Değiştir
- Mevcut şifre kontrolü
- Yeni şifre (2 kez)
- Min 6 karakter
- Otomatik çıkış
Sidebar Footer:
• "Ana Sayfaya Dön" butonu
• "Çıkış Yap" butonu
• 💻 Kaan Yavuz imzası
4.2 DASHBOARD
─────────────
İstatistik Kartları:
1. Paylaştığım Söz (mavi gradient)
2. Aldığım Beğeni (pembe gradient)
3. Favorilerim (mor gradient)
4. Onay Bekleyen (yeşil gradient)
Son Aktivite:
• Son 5 paylaşılan söz
• Onay durumları
• Kategori badge'leri
4.3 SÖZ EKLEME
──────────────
Form Alanları:
• Söz Metni (textarea, max 500 karakter)
• Yazar Adı (input)
• Kategori (select - 6 seçenek)
• Karakter sayacı (real-time)
Bilgilendirme:
• "Admin onayından sonra yayınlanacaktır"
• Mavi info box
Butonlar:
• Temizle (reset)
• Paylaş (submit)
Süreç:
1. Form doldurulur
2. LocalStorage → userQuotes (status: pending)
3. Toast bildirim gösterilir
4. 2 saniye sonra "Sözlerim" sayfasına yönlendirilir
4.4 SÖZ YÖNETİMİ
────────────────
Söz Kartları:
• Onay durumu badge'i:
- ⏳ Onay Bekliyor (sarı)
- ✓ Onaylandı (yeşil)
• Beğeni sayısı (onaylanmışlar için)
• Düzenle butonu (sadece pending için)
• Sil butonu
• Kategori badge
Özellikler:
• Arama kutusu (real-time)
• Kategori filtresi
• Boş durum mesajı
4.5 SEVİYE SİSTEMİ
──────────────────
Seviyeler:
• Yeni Üye: 0-4 söz
• Aktif Üye: 5-14 söz
• İleri Seviye: 15-29 söz
• Uzman Yazar: 30-49 söz
• Efsane Yazar: 50+ söz
4.6 ŞİFRE DEĞİŞTİRME
────────────────────
Form:
• Mevcut şifre
• Yeni şifre (min 6)
• Yeni şifre tekrar
Validasyon:
• Mevcut şifre doğrulaması
• Yeni şifreler eşleşme kontrolü
• Min karakter kontrolü
Süreç:
1. Form submit
2. Validasyon
3. LocalStorage'da kullanıcı şifresi güncelle
4. Toast bildirim
5. 3 saniye sonra çıkış + login sayfası
Güvenlik İpuçları:
✅ En az 6 karakter
✅ Farklı platformlarda farklı şifreler
✅ Şifreyi kimseyle paylaşma
✅ Ayda bir şifre değiştirme
================================================================================
5. ADMİN PANELİ (admin.html)
================================================================================
5.1 GİRİŞ SİSTEMİ
─────────────────
• Prompt ile şifre girişi
• Varsayılan şifre: admin123
• MD5 hash ile şifreleme
• LocalStorage: adminPasswordHash
• Session kontrolü (sessionStorage)
5.2 SIDEBAR MENÜ
────────────────
1. 📊 Dashboard
2. 📝 Sözler (badge: toplam + pending)
3. 📁 Kategoriler
4. 👥 Kullanıcılar
5. 📢 Reklamlar (badge: pending sayısı)
6. ⚙️ Ayarlar
Sidebar Footer:
• Admin bilgisi (avatar + isim)
• Çıkış Yap butonu
• 💻 Kaan Yavuz imzası
5.3 DASHBOARD
─────────────
İstatistik Kartları:
1. Toplam Söz (mavi)
2. Toplam Beğeni (pembe)
3. Kullanıcı Sayısı (yeşil)
4. Kategori Sayısı (mor)
Son Eklenen Sözler:
• Son 5 söz (approved + pending)
• Kaynak gösterimi (approved/user)
• Durum badge'leri
5.4 SÖZ YÖNETİMİ
────────────────
Özellikler:
• Tablo görünümü
• Arama kutusu (real-time)
• Kategori filtresi
• Sıralama (en yeni üstte)
Kolonlar:
• ID
• Söz (max 100 karakter göster)
• Yazar
• Kategori
• Beğeni
• Durum + İşlemler
Bekleyen Sözler İçin:
• ✅ Onayla butonu (yeşil)
• ❌ Reddet butonu (sarı)
Onaylama Süreci:
1. Admin "Onayla" tıklar
2. userQuotes status → 'approved'
3. quotes array'ine eklenir (yayına girer)
4. Ana sayfada görünür
5. Toast bildirim
Reddetme Süreci:
1. Admin "Reddet" tıklar
2. userQuotes'tan silinir
3. Toast bildirim
Onaylı Sözler İçin:
• ✏️ Düzenle butonu
• 🗑️ Sil butonu
Düzenleme:
• Modal açılır
• Form doldurulur (mevcut veriler)
• Kaydet
• Güncellenir
5.5 KATEGORİ İSTATİSTİKLERİ
───────────────────────────
6 Kategori Kutusu:
• Her kategorideki söz sayısı
• Emoji + isim
• Gradient arka planlar
• Hover efektleri
5.6 KULLANICI YÖNETİMİ
──────────────────────
Tablo:
• ID
• Ad Soyad
• E-posta
• Kayıt Tarihi
• İşlemler
Özellikler:
• Kullanıcı söz sayısı badge'i
• Sil butonu
• Silme onayı (confirm)
Silme Süreci:
1. Kullanıcı silinir (quoteUsers)
2. Kullanıcının tüm sözleri silinir (userQuotes)
3. Onaylı sözleri silinir (quotes)
4. Toast bildirim
5.7 REKLAM YÖNETİMİ
───────────────────
Tablo Kolonları:
• ID (kısa gösterim)
• İsim
• Şirket
• Tip (Banner/Kare/Sidebar/Metin)
• Başlık
• Süre (Ay)
• Durum (badge)
• İşlemler
Durum Filtresi:
• Tümü
• Onay Bekleyen
• Onaylanmış
• Reddedilmiş
Bekleyen Reklamlar:
• ✅ Onayla
• ❌ Reddet (nedeni sor)
• 👁️ Detay
Detay Modal:
• İletişim bilgileri
• Reklam özellikleri
• Ücret hesaplaması:
- Aylık fiyat
- Toplam süre
- İndirim oranı
- TOPLAM ücret
• Tarih bilgileri
• Notlar
• Red nedeni (varsa)
Onaylama:
1. status → 'approved'
2. approvedAt kaydedilir
3. Toast bildirim
4. (Gerçekte: E-posta gönderilir)
Reddetme:
1. Ret nedeni prompt
2. status → 'rejected'
3. rejectedAt + rejectReason kaydedilir
4. Toast bildirim
5.8 ŞİFRE DEĞİŞTİRME
────────────────────
Form:
• Mevcut şifre
• Yeni şifre (min 6)
• Yeni şifre tekrar
MD5 Hash Süreci:
1. Mevcut şifre MD5 hash'i kontrol edilir
2. Yeni şifre MD5 hash'lenir
3. LocalStorage: adminPasswordHash güncellenir
4. Toast bildirim
5. 3 saniye sonra çıkış seçeneği
Güvenlik İpuçları:
✅ En az 6 karakter
✅ Büyük/küçük harf + rakam + özel karakter
✅ Kimseyle paylaşma
✅ Düzenli değiştirme
================================================================================
6. REKLAM SİSTEMİ (reklam-ekle.html)
================================================================================
6.1 SAYFA TASARIMI
──────────────────
• Gradient arka plan (mor-pembe)
• Merkezi kart layout
• "Ana Sayfaya Dön" linki (sol üst)
• Animasyonlu başlık (slideUp)
6.2 HEADER
──────────
• 📢 Büyük megafon ikonu (bounce animasyonu)
• "Reklam Ekle" başlığı
• "Reklamınızı ekleyin, admin onayından sonra yayınlansın!" alt başlık
6.3 BİLGİLENDİRME BÖLÜMÜ
────────────────────────
Mavi Info Box:
✅ Reklam bilgilerinizi doldurun
✅ Admin tarafından incelenecektir
✅ Onaylandıktan sonra yayına girecektir
✅ Ana sayfada ve ilgili bölümlerde gösterilecektir
6.4 FİYAT TABLOSU
─────────────────
Sarı Warning Box:
┌─────────────────────┬──────────────┐
│ Banner (728x90) │ 500 TL / Ay │
│ Kare (300x300) │ 350 TL / Ay │
│ Sidebar (160x600) │ 400 TL / Ay │
│ Metin Reklamı │ 200 TL / Ay │
└─────────────────────┴──────────────┘
6.5 REKLAM FORMU
────────────────
1. İletişim Bilgileri (Grid 2 kolon):
• Ad Soyad *
• E-posta *
• Telefon *
• Şirket Adı (opsiyonel)
2. Reklam Bilgileri:
• Reklam Tipi * (select)
- Banner (728x90) - 500 TL/Ay
- Kare (300x300) - 350 TL/Ay
- Sidebar (160x600) - 400 TL/Ay
- Metin Reklamı - 200 TL/Ay
• Reklam Başlığı * (max 100 karakter)
• Reklam Açıklaması * (textarea, max 500 karakter)
• Hedef URL * (https://...)
• Reklam Görsel URL * (resim linki)
ℹ️ Boyut bilgisi: Banner için 728x90, vb.
3. Tarih ve Süre (Grid 2 kolon):
• Başlangıç Tarihi (date picker, min: bugün)
• Süre (Ay) * (select)
- 1 Ay
- 3 Ay (5% İndirim)
- 6 Ay (10% İndirim)
- 12 Ay (15% İndirim)
4. Ek Bilgiler:
• Ek Notlar (textarea, opsiyonel)
6.6 İNDİRİM SİSTEMİ
───────────────────
• 1 Ay: İndirim yok
• 3 Ay: %5 indirim
• 6 Ay: %10 indirim
• 12 Ay: %15 indirim
Örnek Hesaplama:
Banner (500 TL) x 12 Ay x 0.85 (15% indirim) = 5,100 TL
6.7 FORM GÖNDERİMİ
──────────────────
Süreç:
1. Form validasyonu (required alanlar)
2. Data objesi oluştur:
- Tüm form verileri
- id: 'ad_' + timestamp
- status: 'pending'
- createdAt: ISO timestamp
3. LocalStorage → advertisements array'ine ekle
4. Success alert göster:
✅ "Reklam talebiniz başarıyla gönderildi!"
"Admin incelemesinden sonra tarafınıza dönüş yapılacaktır."
"E-posta: [kullanıcı emaili]"
5. Form temizle (reset)
6. 2 saniye sonra → index.html
6.8 VALİDASYON
──────────────
• Tüm required alanlar dolu olmalı
• E-posta formatı geçerli olmalı
• URL'ler https:// ile başlamalı
• Başlangıç tarihi bugünden önce olamaz
• Karakter limitleri (başlık: 100, açıklama: 500)
================================================================================
7. KORUMA SİSTEMİ (protection.js)
================================================================================
7.1 MD5 HASH FONKSİYONU
───────────────────────
• Tam MD5 algoritması implementasyonu
• String → Hash dönüşümü
• UTF-8 encoding desteği
• Hex output
Kullanım Alanları:
1. Admin şifresi hashleme
2. İçerik koruma (Kaan Yavuz imzası)
7.2 KORUMA KONTROLÜ
───────────────────
Soft Mode (Mevcut):
1. Sayfa yüklendiğinde çalışır
2. Footer'da "Kaan Yavuz" imzasını arar
3. Bulunamazsa:
- Uyarı banner gösterir (üstte)
- Console'da warning
- Sayfa çalışmaya devam eder
4. 5 saniyede bir kontrol eder (setInterval)
Beklenen Hash:
• "💻 Kaan Yavuz Tarafından Yapıldı" → MD5 hash
Banner Tasarımı:
• Kırmızı arka plan
• Beyaz yazı
• Warning ikonu
• Fixed position (top: 0)
• Z-index: 9999
================================================================================
8. DEMO VERİLER (demo-data.js)
================================================================================
8.1 DEMO SÖZLER (18 Adet)
─────────────────────────
Kategorilere Göre Dağılım:
• Aşk Sözleri: 3 söz
• Hayat Sözleri: 3 söz
• Motivasyon: 3 söz
• Üzgün Sözler: 2 söz
• Güzel Sözler: 3 söz
• Düşünceler: 4 söz
Örnek Sözler:
1. "Hayat, cesaret isteyenlere güzel." - Orhan Veli Kanık
2. "Aşk acı çekmektir, ama yine de en güzel acıdır." - Dostoyevski
3. "Başarısızlık, başarının ilk adımıdır." - Anonim
...vb.
Her Söz:
• id: 1-18
• text: Söz metni
• author: Yazar adı
• category: Kategori slug
• likes: 100-300 arası random
• date: 2024 tarihleri
8.2 DEMO KULLANICILAR (3 Adet)
──────────────────────────────
1. Ahmet Yılmaz
• Email: ahmet@example.com
• Şifre: 123456
• Kayıt: 2024-01-10
2. Ayşe Demir
• Email: ayse@example.com
• Şifre: 123456
• Kayıt: 2024-02-01
3. Mehmet Kaya
• Email: mehmet@example.com
• Şifre: 123456
• Kayıt: 2024-03-15
8.3 DEMO KULLANICI SÖZLERİ (2 Adet - Pending)
─────────────────────────────────────────────
1. "Her yeni gün, yeni bir başlangıçtır."
• Ahmet Yılmaz tarafından
• Status: pending
2. "Gülümsemek, ruhun dilidir."
• Ayşe Demir tarafından
• Status: pending
8.4 OTOMATIK YÜKLEME
────────────────────
Kontrol:
1. Sayfa yüklendiğinde localStorage kontrol edilir
2. Eğer 'quotes' boş veya yok ise:
- Demo veriler yüklenir
- Alert gösterilir:
* Test hesapları listesi
* Admin şifresi
3. Eğer veri var ise:
- Hiçbir şey yapılmaz
Console Log:
✅ Demo Data Loaded!
- 18 sözler eklendi
- 3 kullanıcı eklendi
- 2 onay bekleyen söz
Test Kullanıcıları:
📧 ahmet@example.com / 🔑 123456
📧 ayse@example.com / 🔑 123456
📧 mehmet@example.com / 🔑 123456
Admin Şifresi: admin123
================================================================================
9. LOCALSTORAGE YAPISI
================================================================================
9.1 QUOTES (Onaylı Sözler)
──────────────────────────
Array of Objects:
[
{
id: 1,
text: "Söz metni",
author: "Yazar adı",
category: "ask|hayat|motivasyon|uzgun|guzel|dusunce",
likes: 0,
date: "2025-01-01T00:00:00.000Z",
userQuoteId: "uq_123456" (opsiyonel - kullanıcı sözü ise),
addedBy: "Kullanıcı Adı" (opsiyonel)
}
]
9.2 USER QUOTES (Kullanıcı Sözleri)
───────────────────────────────────
Array of Objects:
[
{
id: "uq_1234567890",
text: "Söz metni",
author: "Yazar adı",
category: "kategori",
userEmail: "user@example.com",
userName: "Ad Soyad",
status: "pending|approved|rejected",
createdAt: "2025-01-01T00:00:00.000Z",
likes: 0
}
]
9.3 QUOTE USERS (Kullanıcılar)
──────────────────────────────
Array of Objects:
[
{
id: 1234567890,
name: "Ad Soyad",
email: "user@example.com",
password: "123456", // Plain text (demo için)
createdAt: "2025-01-01T00:00:00.000Z"
}
]
9.4 FAVORITES (Favori Sözler)
─────────────────────────────
Array of IDs:
[1, 5, 8, 12]
9.5 USER SESSION (Kullanıcı Oturumu)
────────────────────────────────────
Object (sessionStorage):
{
email: "user@example.com",
name: "Ad Soyad",
loginTime: "2025-01-01T00:00:00.000Z"
}
9.6 ADMIN SESSION (Admin Oturumu)
──────────────────────────────────
String (sessionStorage):
"true"
9.7 ADMIN PASSWORD HASH (Admin Şifresi)
────────────────────────────────────────
String (localStorage):
"e10adc3949ba59abbe56e057f20f883e" // MD5('admin123')
9.8 ADVERTISEMENTS (Reklamlar)
──────────────────────────────
Array of Objects:
[
{
id: "ad_1234567890",
name: "Ad Soyad",
email: "user@example.com",
phone: "+90 5XX XXX XX XX",
company: "Şirket Adı",
type: "banner|square|sidebar|text",
title: "Reklam başlığı",
description: "Reklam açıklaması",
url: "https://example.com",
imageUrl: "https://example.com/image.jpg",
startDate: "2025-01-01",
duration: "1|3|6|12",
notes: "Ek notlar",
status: "pending|approved|rejected",
createdAt: "2025-01-01T00:00:00.000Z",
approvedAt: null | "tarih",
rejectedAt: null | "tarih",
rejectReason: null | "neden"
}
]
================================================================================
10. TASARIM SİSTEMİ
================================================================================
10.1 RENK PALETİ
────────────────
Primary Colors:
• #ff6b9d - Ana Pembe
• #c06c84 - Gül Kurusu
• #f67280 - Accent Pembe
Secondary Colors:
• #2c3e50 - Koyu Mavi (Metin)
• #f8f9fa - Açık Gri (Arka plan)
Gradients:
• Gradient 1: #667eea → #764ba2 (Mor)
• Gradient 2: #f093fb → #f5576c (Pembe)
• Gradient 3: #fbc2eb → #a6c1ee (Açık Mor)
• Gradient 4: #fa709a → #fee140 (Pembe-Sarı)
• Gradient 5: #30cfd0 → #330867 (Turkuaz-Mor)
• Gradient 6: #ff9a9e → #fecfef (Açık Pembe)
• Arka Plan: #ffecd2 → #fcb69f → #ff9a9e (Turuncu)
Status Colors:
• Success: #28a745 (Yeşil)
• Warning: #ffc107 (Sarı)
• Danger: #dc3545 (Kırmızı)
• Info: #17a2b8 (Turkuaz)
10.2 TİPOGRAFİ
──────────────
Font Family:
• 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
Font Sizes:
• H1: 48px (hero), 32px (normal)
• H2: 36px (section titles)
• H3: 24px (card titles)
• H4: 18-20px (subtitles)
• Body: 16px
• Small: 12-14px
Font Weights:
• Regular: 400
• Medium: 500
• Semibold: 600
• Bold: 700
Line Heights:
• Body: 1.6
• Headings: 1.2
• Quote text: 1.8
10.3 SPACING
────────────
Padding:
• XS: 5px
• S: 10px
• M: 15px
• L: 20px
• XL: 30px
• XXL: 40px
Margins:
• Section: 80px (top/bottom)
• Card: 30px (bottom)
• Element: 15-25px (between)
Gap:
• Grid: 20-30px
• Flex: 10-20px
10.4 BORDER RADIUS
──────────────────
• Small: 8-10px (buttons, inputs)
• Medium: 15px (cards)
• Large: 20-25px (containers, modals)
• Pill: 50px (rounded buttons)
• Circle: 50% (avatars, icons)
10.5 SHADOWS
────────────
• Light: 0 2px 10px rgba(0,0,0,0.1)
• Medium: 0 5px 20px rgba(0,0,0,0.15)
• Heavy: 0 10px 40px rgba(0,0,0,0.2)
• Hover: 0 15px 50px rgba(255,107,157,0.3)
10.6 ANİMASYON SÜRE VE TİMİNG
─────────────────────────────
Durations:
• Fast: 0.2s
• Normal: 0.3s
• Medium: 0.5s
• Slow: 1s
• Loop: 2-4s
Timing Functions:
• ease: genel kullanım
• ease-in-out: hover efektleri
• cubic-bezier(0.68, -0.55, 0.265, 1.55): bounce efekti
10.7 RESPONSIVE BREAKPOİNTS
───────────────────────────
• Mobile: < 768px
- Single column
- Stack layouts
- Hamburger menu
- Full width cards
• Tablet: 768px - 1199px
- 2 column grids
- Smaller fonts
- Compact layouts
• Desktop: 1200px+
- Full features
- Multi-column grids
- All animations
================================================================================
11. ÖZELLİKLER TABLOSU
================================================================================
11.1 KULLANICI ÖZELLİKLERİ
──────────────────────────
✅ Kayıt olma
✅ Giriş yapma
✅ Oturum yönetimi (session)
✅ Şifre değiştirme
✅ Söz ekleme (kategori ile)
✅ Kendi sözlerini görme
✅ Söz düzenleme (pending ise)
✅ Söz silme
✅ Söz beğenme
✅ Favorilere ekleme
✅ Sözleri arama
✅ Kategoriye göre filtreleme
✅ Söz paylaşma (native share)
✅ Söz kopyalama (clipboard)
✅ Profil görüntüleme
✅ İstatistikleri görme
✅ Seviye sistemi
✅ Onay durumu takibi
11.2 ADMİN ÖZELLİKLERİ
──────────────────────
✅ MD5 şifreli giriş
✅ Şifre değiştirme
✅ Dashboard istatistikleri
✅ Kullanıcı sözlerini onaylama
✅ Kullanıcı sözlerini reddetme
✅ Tüm sözleri görme
✅ Söz düzenleme
✅ Söz silme
✅ Yeni söz ekleme
✅ Kategori istatistikleri
✅ Kullanıcı listesi
✅ Kullanıcı silme
✅ Reklam taleplerini görme
✅ Reklamları onaylama
✅ Reklamları reddetme (nedeni ile)
✅ Reklam detaylarını görme
✅ Ücret hesaplaması
✅ Reklam silme
✅ Durum filtreleme
11.3 GENEL ÖZELLİKLER
─────────────────────
✅ Responsive tasarım
✅ Mobil uyumlu
✅ Touch friendly
✅ SEO meta tagları
✅ Open Graph tagları
✅ Twitter Card tagları
✅ Favicon desteği
✅ Font Awesome 6.0 ikonları
✅ Smooth scroll
✅ Lazy loading
✅ LocalStorage persistence
✅ Session management
✅ Toast notifications
✅ Modal dialogs
✅ Form validations
✅ Real-time search
✅ Live filtering
✅ Character counter
✅ Date picker
✅ Dropdown select
✅ Textarea auto-resize
✅ Input focus states
✅ Hover animations
✅ Click animations
✅ Loading states
✅ Empty states
✅ Error handling
✅ Success messages
✅ Confirmation dialogs
✅ Breadcrumbs
✅ Pagination ready
✅ Sorting ready
✅ Export ready
11.4 ANİMASYONLAR
────────────────
✅ fadeIn / fadeOut
✅ slideIn / slideOut
✅ slideUp / slideDown
✅ bounce
✅ float
✅ pulse
✅ glow
✅ shimmer
✅ rotate
✅ scale
✅ translateY
✅ shake
✅ spin
✅ modalSlideIn
✅ cardPulse
✅ quoteFloat
✅ bgFloat
✅ headerGlow
================================================================================
12. GÜVENLİK ÖZELLİKLERİ
================================================================================
12.1 KULLANICI GÜVENLİĞİ
────────────────────────
• Şifre min 6 karakter
• E-posta format validasyonu
• Session timeout (tarayıcı kapatınca)
• XSS koruması (input sanitization)
• Duplicate email check
• Password confirmation
⚠️ UYARI (Production İçin):
• Şifreler plain text (hash'lenmeli)
• HTTPS kullanılmalı
• Backend validasyon gerekli
• Rate limiting eklenmeli
• CAPTCHA önerilir
• 2FA eklenebilir
12.2 ADMİN GÜVENLİĞİ
────────────────────
✅ MD5 hash şifreleme
✅ Session kontrolü
✅ Password prompt giriş
✅ Şifre değiştirme özelliği
✅ Çıkış sonrası session temizleme
⚠️ UYARI (Production İçin):
• MD5 yerine bcrypt/argon2 kullanılmalı
• JWT token sistemi eklenmeli
• IP whitelist eklenebilir
• Login attempt limiti
• 2FA zorunlu olmalı
12.3 İÇERİK KORUMASI
────────────────────
✅ MD5 signature check
✅ Periodic kontrolü (5s)
✅ Soft mode (uyarı + devam)
✅ Console warning
✅ Banner gösterimi
Korunan İmza:
"💻 Kaan Yavuz Tarafından Yapıldı"
12.4 VERİ KORUMASI
──────────────────
• LocalStorage encryption yok (plaintext)
• Session storage temizlenebilir
• Browser cache control
• No sensitive data in cookies
⚠️ UYARI (Production İçin):
• Encrypted storage kullanılmalı
• Backend database gerekli
• API authentication
• Secure cookies
• CORS policy
================================================================================
13. PERFORMANS
================================================================================
13.1 OPTİMİZASYONLAR
────────────────────
✅ CSS minification ready
✅ JS minification ready
✅ Image lazy loading ready
✅ Debounce search (300ms)
✅ Throttle scroll events
✅ Event delegation
✅ Memory cleanup
✅ No memory leaks
✅ Efficient DOM updates
✅ Batch localStorage updates
13.2 YÜKLEME PERFORMANSI
────────────────────────
• Initial load: ~200KB
• Images: Unsplash CDN (external)
• Icons: Font Awesome CDN
• No external libraries (vanilla JS)
• No jQuery
• No framework overhead
13.3 RUNTIME PERFORMANSI
────────────────────────
• 60 FPS animations
• Smooth scrolling
• Instant search (debounced)
• Fast filtering
• Quick rendering
• No jank
• Optimized loops
• Minimal repaints
================================================================================
14. TARAYICI UYUMLULUĞU
================================================================================
14.1 DESTEKLENENler
───────────────────
✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ Opera 76+
✅ Samsung Internet 14+
14.2 MOBİL
──────────
✅ iOS Safari 14+
✅ Chrome Mobile 90+
✅ Firefox Mobile 88+
✅ Samsung Internet 14+
14.3 KULLANILAN API'ler
───────────────────────
• localStorage (tüm modern)
• sessionStorage (tüm modern)
• Clipboard API (Chrome 66+, Firefox 63+)
• Web Share API (Chrome 61+, Safari 12.1+)
• Date picker (tüm modern)
• CSS Grid (tüm modern)
• CSS Flexbox (tüm modern)
• CSS Animations (tüm modern)
• ES6+ JavaScript (tüm modern)
14.4 FALLBACKler
────────────────
• Share API yok → Alert göster
• Clipboard API yok → execCommand kullan
• localStorage yok → Session-only mode
================================================================================
15. KURULUM VE KULLANIM
================================================================================
15.1 KURULUM
────────────
1. Tüm dosyaları bir klasöre kopyalayın
2. index.html'i tarayıcıda açın
3. Demo veriler otomatik yüklenir
Gereksinimler:
• Modern web browser
• JavaScript aktif
• LocalStorage aktif
• İnternet bağlantısı (CDN için)
15.2 İLK KULLANIM
─────────────────
Ziyaretçi Olarak:
1. Ana sayfayı gezin
2. Sözleri okuyun
3. Kategorilere göz atın
4. Arama yapın
Kullanıcı Olarak:
1. "Giriş Yap" tıklayın
2. "Kayıt Ol" sekmesine geçin
3. Bilgilerinizi girin
4. Kayıt olun (otomatik giriş)
5. "Panelim" → "Yeni Söz Ekle"
6. Sözünüzü paylaşın
7. Admin onayını bekleyin
Admin Olarak:
1. Footer'da "Admin" linkine tıklayın
2. Şifre: admin123
3. Dashboard'u inceleyin
4. "Sözler" → Bekleyen sözleri görün
5. Onayla/Reddet
6. "Reklamlar" → Reklam taleplerini yönetin
15.3 TEST HESAPLARI
───────────────────
Kullanıcılar:
• ahmet@example.com / 123456
• ayse@example.com / 123456
• mehmet@example.com / 123456
Admin:
• admin123 (prompt'ta girin)
15.4 VERİ TEMİZLEME
───────────────────
Tarayıcı Console:
```javascript
// Tüm verileri temizle
localStorage.clear();
sessionStorage.clear();
location.reload();
// Sadece belirli veriyi temizle
localStorage.removeItem('quotes');
localStorage.removeItem('userQuotes');
localStorage.removeItem('quoteUsers');
localStorage.removeItem('advertisements');
```
================================================================================
16. GELİŞTİRME NOTLARI
================================================================================
16.1 TODO (Gelecek Özellikler)
──────────────────────────────
• Backend entegrasyonu (Node.js/PHP)
• Database (MySQL/MongoDB)
• Email sistemi (nodemailer)
• Gerçek ödeme sistemi (iyzico/stripe)
• Reklam gösterimi (frontend)
• Reklam yönetim paneli genişletme
• Kullanıcı rolleri (moderator, editor)
• Yorum sistemi
• Bildirim sistemi
• Push notifications
• PWA desteği
• Offline mode
• Export/Import özelliği
• Analytics entegrasyonu
• SEO optimizasyonu
• Sitemap generator
• RSS feed
• API documentation
• Unit tests
• E2E tests
16.2 KNOWN ISSUES
─────────────────
• Şifreler plain text (demo için kabul edilebilir)
• LocalStorage limiti (~5MB)
• Gerçek e-posta gönderimi yok
• Ödeme sistemi simülasyon
• Reklam gösterimi frontend'de yok
• Çoklu dil desteği yok
16.3 ÖZEL NOTLAR
────────────────
• Tüm dosyalar UTF-8 encoding
• Line endings: LF (Unix)
• Indentation: 4 spaces
• Quote style: Single quotes (JS)
• Semicolons: Always (JS)
• CSS property order: Alphabetical
================================================================================
17. DOSYA BOYUTLARI
================================================================================
Yaklaşık Boyutlar:
• index.html: ~20 KB
• style.css: ~25 KB
• script.js: ~15 KB
• login.html: ~12 KB
• user-panel.html: ~15 KB
• user-panel-style.css: ~15 KB
• user-panel-script.js: ~18 KB
• admin.html: ~18 KB
• admin-style.css: ~12 KB
• admin-script.js: ~25 KB
• reklam-ekle.html: ~15 KB
• protection.js: ~8 KB
• demo-data.js: ~6 KB
• README.md: ~10 KB
TOPLAM: ~214 KB (minify öncesi)
External Resources:
• Font Awesome: ~75 KB (CDN)
• Unsplash Images: Variable (CDN)
================================================================================
18. LİSANS VE TELİF HAKKI
================================================================================
Geliştirici: Kaan Yavuz
Proje Adı: Güzel Sözler (Sozum.org)
Yıl: 2025
İçerik Koruması:
• Tüm sayfalarda "Kaan Yavuz Tarafından Yapıldı" imzası
• MD5 hash ile koruma
• Soft mode: Uyarı + Devam
Demo İçerik:
• Demo sözler: Ünlü yazarlardan alıntılar
• Demo kullanıcılar: Fictive data
• Test verileri: Güvenli paylaşılabilir
İletişim:
• E-posta: info@sozum.org
• Telefon: +90 539 468 62 92
• Konum: İstanbul, Türkiye
================================================================================
19. VERSION HISTORY
================================================================================
Version 1.0.0 (Final)
───────────────────────
✅ Ana sayfa (index.html) - Canlı, renkli, animasyonlu
✅ Kullanıcı giriş/kayıt sistemi (login.html)
✅ Kullanıcı paneli (user-panel.html)
- Dashboard
- Söz ekleme
- Söz yönetimi
- Favoriler
- Profil
- Şifre değiştirme
✅ Admin paneli (admin.html)
- Dashboard
- Söz onaylama/yönetimi
- Kategori istatistikleri
- Kullanıcı yönetimi
- Reklam yönetimi
- Şifre değiştirme (MD5)
✅ Reklam sistemi (reklam-ekle.html)
- Form ile reklam talebi
- Fiyat tablosu
- İndirim sistemi
- Admin onay mekanizması
✅ Koruma sistemi (protection.js)
- MD5 hash
- Soft mode koruma
✅ Demo veriler (demo-data.js)
- 18 söz
- 3 kullanıcı
- 2 pending söz
✅ Responsive tasarım (tüm sayfalar)
✅ Animasyonlar (30+ farklı animasyon)
✅ LocalStorage persistence
✅ Session management
✅ Toast notifications
✅ Modal dialogs
✅ Form validations
✅ Search & Filter
✅ Footer imzası (Kaan Yavuz)
✅ Admin linki (footer)
✅ Reklam butonu (footer)
İletişim Güncellemeleri:
• E-posta: info@guzelsozler.com → info@sozum.org
• Telefon: +90 530 303 6056 → +90 539 468 62 92
================================================================================
20. SONUÇ
================================================================================
Bu proje, modern web teknolojileri kullanılarak geliştirilmiş tam özellikli
bir söz paylaşım platformudur. Kullanıcılar kendi sözlerini ekleyebilir,
paylaşabilir ve beğenebilir. Admin onay sistemi ile kaliteli içerik sağlanır.
Reklam yönetim sistemi ile platform gelir elde edebilir.
Tüm özellikler detaylı bir şekilde dokümante edilmiş ve test edilmiştir.
Proje production'a hazır hale getirilmek için backend entegrasyonu,
database ve güvenlik geliştirmeleri yapılmalıdır.
Özet İstatistikler:
• 13 HTML sayfası
• 30+ Animasyon
• 8 LocalStorage koleksiyonu
• 100+ Fonksiyon
• 6 Kategori
• 4 Reklam tipi
• 3 Kullanıcı rolü (Ziyaretçi, Kullanıcı, Admin)
• 18 Demo söz
• 3 Test kullanıcısı
Geliştirme Süresi: Full Stack Implementation
Kod Satırı: ~5000+ lines
Dosya Boyutu: ~214 KB (minify öncesi)
Isteyen olursa DM yazsın verrim doyalari
💻 Kaan Yavuz Tarafından Yapıldı
🌐 sozum.org
📧 info@sozum.org
📱 +90 539 468 62 92
Guzel Soz Sitesi tıkla
================================================================================
END OF DOCUMENT
================================================================================