first commit

belgeler/admin_panel.md

@@ -0,0 +1,96 @@
+You are an AI developer assistant. Your task is to generate a complete admin panel scaffold (HTML templates, static assets and server-side route stubs) for a Go Fiber project. Use only the following frontend libraries already available in the project dependencies: Alpine.js, Bootstrap 5, HTMX, jQuery. Do not add other frameworks. Produce code artifacts described in the "Outputs" section below.
+
+Constraints & requirements (önemli)
+- Kullanılan frontend kütüphaneleri: Alpine.js (v3), HTMX, Bootstrap 5, jQuery — bunları  proje /public üzerinden kullan.
+- Tema: Koyu ve aydın (dark/light) destekli olacak. Kullanıcı temayı değiştirdiğinde tercih localStorage'da saklansın ve sayfa yenilendiğinde korunmalı.
+- Layout: Sol sabit (desktop) sidebar; mobilde off-canvas veya slide-in davranışı. Üstte sticky header (navbar) — hep görünür. Ana içerik HTMX ile parçalar halinde yüklensin (partials/fragments).
+- Login sayfası: Cloudflare Turnstile ile korumalı. Turnstile için sitekey ve secret key placeholder kullanılacak (örneğin: YOUR_TURNSTILE_SITEKEY, YOUR_TURNSTILE_SECRET). Login formu HTMX ile POST gönderecek, sunucu Turnstile doğrulaması yapacak.
+- Accessibility: ARIA nitelikleri eklensin, klavye navigasyonu çalışsın, renk kontrastı erişilebilir seviyede olsun.
+- Responsive: Desktop / tablet / mobile uyumlu olmalı.
+- Minimal JS: Alpine.js ile UI state yönetimi (tema toggle, mobil sidebar), HTMX ile partial yükleme, küçük helper JS dosyası için jQuery veya vanilla kullanılabilir. Büyük bundler veya build pipeline gerektirmeyecek.
+- Security: CSRF, XSS ve session güvenliği için sunucu tarafı notları verilecek (CSRF token uygulaması önerisi, Turnstile server-side doğrulama, secure cookie flags, rate limiting).
+- Dosya/dizin yapısı: templates/ (HTML şablonları), public/css, public/js, public/assets. Server tarafı Go Fiber rotaları ve basit handler açıklamaları verilecek (kod değil; hangi endpoint ne döner).
+
+Görsel / UX istekleri
+- Tema değişimi için hem simge hem metin olacak (ör. güneş/ay). Geçiş animasyonu küçük (0.2s - 0.35s).
+- Sidebar: ikon + etiket, aktif öğe vurgulu, mümkünse collapse/expand (yalnızca genişlik daraltıldığında).
+- Header: sol marka, ortada opsiyonel breadcrumb (isteğe bağlı), sağda tema toggle ve kullanıcı dropdown.
+- İçerik alanı: kart bazlı, boşluklar (padding/margin) dengeli.
+- Animasyonlar: HTMX swap sırasında fade veya slide geçişi (kısa).
+- Renk paleti: net iki palet tanımı (aydın için açık nötr arka plan + mavi aksan; koyu için koyu mavi/şeftali aksan). Renkler CSS custom properties (CSS değişkenleri) ile tanımlansın.
+
+Girdi (input)
+- ./public Alpine.js, Bootstrap, HTMX, jQuery (mevcut).
+- Kullanıcı sağlayacak: Cloudflare Turnstile sitekey/secret (placeholder bırakılacak).
+- Sunucu: Go Fiber (kullanıcı Fiber projesine kolayca entegre edebilsin).
+
+Outputs — AI'nin üretmesi gerekenler (tam liste)
+1. Temel layout şablonu (templates/layout.html veya .tmpl):
+    - ./public/assets (Bootstrap CSS/JS, HTMX, Alpine, jQuery, Turnstile script).
+    - Body: sticky header, sol sidebar, main content container (#main-content) — HTMX hedefi.
+    - Tema yönetimi için Alpine veri nesnesi referansları (tema toggle, mobile sidebar kontrol).
+    - Ana layout'ta HTMX ile fragment yüklemeye uygun linkler (hx-get, hx-target="#main-content", hx-swap).
+
+2. Login şablonu (templates/login.html):
+    - Cloudflare Turnstile widget (data-sitekey placeholder).
+    - Form HTMX ile POST atacak (hx-post="/login", hx-target="#login-feedback" vb.).
+    - Başarı/hata fragment'leri için sunucu tarafı cevap formatı belirtilecek.
+
+3. Örnek HTMX fragment'leri (templates/fragments/*):
+    - dashboard fragment
+    - users list fragment
+    - settings fragment
+      (her fragment minimal içerik, HTMX swap ile çalışacak biçimde)
+
+4. public/js/main.js (küçük açıklama, içerik oluşturulacak):
+    - Alpine tema manager yapısı (isDark reactive, save/load localStorage, toggle fonksiyonları).
+    - Mobile sidebar toggle fonksiyonları.
+    - HTMX üzerinden fragment yüklenirken küçük loading indicator veya class ekleme.
+    - Turnstile ile integration notu (widget render ve token gönderimi; token'ın login formu ile nasıl dahil olacağı).
+
+5. public/css/theme.css:
+    - CSS custom properties hem light hem dark için.
+    - Sidebar, header, card stilleri, responsive medya sorguları.
+    - Küçük animasyonlar (fade, transition).
+
+6. Sunucu tarafı: Go Fiber rotaları listesi ve davranış açıklamaları (kod değil, endpoint + beklenen request/response):
+    - GET /login -> login şablonunu döndür
+    - POST /login -> Turnstile token doğrulaması + credentials doğrulama; başarılıysa session cookie oluştur ve /admin yönlendir (HTMX için fragment veya redirect)
+    - GET /admin -> layout render (veya layout + default fragment)
+    - GET /admin/content/dashboard -> dashboard fragment (HTMX hedefi)
+    - GET /admin/content/users -> users fragment
+    - GET /admin/content/settings -> settings fragment
+    - GET /logout -> oturumu sonlandır
+    - admin middleware ye agit tum rotalar
+    - (Opsiyonel) POST /api/users/* gibi API uç noktaları (JSON) — HTMX yerine AJAX gerekeceğinde kullanılacak
+
+7. Güvenlik & operasyonel notlar (dokümantasyon/metin):
+    - Turnstile: server-side doğrulama nasıl yapılır (istek: secret ve token ile Cloudflare API endpoint çağrısı; doğrulama şartı).
+    - CSRF: HTMX formlarında CSRF token nasıl geçilir (hidden input veya header); Fiber için örnek header adı ve cookie ilişkisi (kod değil açıklama).
+    - Session yönetimi: secure, httpOnly, SameSite=strict/ Lax önerisi.
+    - Rate limiting önerisi (ör. login için).
+    - Input validation and output escaping reminder.
+
+8. Acceptance criteria / test senaryoları:
+    - Tema toggle yapıldığında localStorage güncellenmeli ve sayfa yenilendiğinde tercih korunmalı.
+    - Sidebar linkine tıklandığında HTMX ile fragment yüklensin, header sabit kalsın.
+    - Mobilde sidebar toggle düzgün çalışsın ve overlay kapanışı sağlansın.
+    - Login formu Turnstile widget üretiyor; form gönderildiğinde Sunucu Turnstile token'ı doğruluyor — geçerse oturum açma gerçekleşiyor, geçmezse hata mesajı.
+    - Erişilemeyen bir fragment istenirse HTMX hedefinde uygun hata gösterimi (alert/flash) gelsin.
+    - Temel a11y kontrolü: tüm interaktif öğeler klavye ile erişilebilir olsun, img/ikonlar için alt metin/aria-label.
+
+Ek istekler / tercih edilen çıktı biçimi
+- Üretilen dosyaları dosya isimleriyle ve kısa açıklamalarıyla listelerken KOD VERMEYİN — sadece hangi dosyayı ve ne içermesi gerektiğini net maddelemeyle verin (ama AI kod da üretirse ayrı bir adımda bunu isteyebilirim).
+- Turnstile sitekey/secret için placeholder kullanın ve kullanıcıya nerede değiştireceğini açıkça belirtin.
+- HTMX fragment response biçimi: tam HTML fragment (sadece main-content içeriği) veya JSON+HTML toggles; tercihen saf HTML fragment kullanılsın.
+- Her dosya için kısa "örnek içerik açıklaması" verin (ör. dashboard fragment: 3 adet statistic card ve bir tablo).
+
+Çıktı teslim formatı
+- Lütfen üretim çıktısını şu şekilde organize et:
+    - "Files to create" listesi (path + kısa açıklama)
+    - "Server endpoints" listesi (method + path + beklenen davranış)
+    - "Güvenlik & deployment notları"
+    - "Acceptance tests"
+- Tekrar ediyorum: BU PROMPT sadece kılavuzdur — şu an yalnızca prompt dosyasını istiyorum, KOD YOK. Eğer kod oluşturmaya hazırsan, ayrı bir istekte bulunacağım.
+
+Not: Kullanıcı adı ve mevcut package.json bağımlılıklarını unutma: Alpine.js, Bootstrap 5, htmx, jquery. Cloudflare Turnstile sitekey/secret işaretlerini placeholder bırak.