ares/belgeler/admin_panel.md

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.