AFETNET Afet Veri Omurgası
AFETNET Tasarım Sistemi · v1

Liquid Glass

Katmanlı cam yüzeyler, renkli zemin, ışığın malzemeden geçmesi. Ama bu bir kriz masası: aciliyet asla yumuşatılmaz, kontrast asla pazarlık konusu değildir. Aşağıdaki her bileşenin altında kullanılacak sınıf adı yazılıdır.

24bileşen
140token
AAkontrast
0JS bağımlılığı
00

Least touch — bileşen seçerken uyulacak kurallar

Afet anında her fazladan tıklama gecikmedir. Sistem bunu zorlar: birincil buton görsel olarak tek başına baskındır, sessiz buton geri çekilir. Bir ekranda iki gl-btn--birincil görüyorsan tasarım yanlıştır.

YAP
  • Ekran başına tek birincil aksiyon; gerisi gl-btn--sessiz.
  • Geri alınabilir işlemi doğrudan yap, sonra "geri al" sun.
  • Liste satırının tamamını tıklanabilir yap (gl-liste__satir + gl-kart--etkilesimli), satır sonundaki ikona mecbur bırakma.
  • Boş durumun içine aksiyonu koy (gl-bos + buton).
  • Seçilebilecek şeyi gl-secim yap, yazdırma.
  • Filtreyi onchange ile uygula; ayrı "Uygula" butonu koyma.
  • Bilgiyi tek ekranda topla — yan panel > ikinci sayfa.
YAPMA
  • "Emin misiniz?" modalı — yalnız geri alınamaz işlemde (gl-btn--tehlike).
  • Çok adımlı sihirbaz; alanları tek forma sığdır.
  • Aynı veriyi 3 sekmeye bölmek. gl-sekmeler en fazla 2-3 görünüm içindir.
  • Zorunlu olmayan alan. Sormadan çıkarabiliyorsan çıkar.
  • Hover ile ortaya çıkan aksiyon — dokunmatikte yok hükmünde.
  • Başarı bildirimi için modal; gl-uyari--basari yeter.
Ölçüt
Bir koordinatör "kritik olayı gör → sorumlu ata" işini 2 dokunuşta bitirebilmeli. Bitiremiyorsa ekranı sadeleştir, bileşen ekleme.
01

Renk token'ları

Hiçbir yerde ham hex yazma. Her renk bir CSS değişkeni; koyu/açık temada otomatik yer değiştirir. Aciliyet renkleri anlam taşır, dekorasyon için kullanma.

Aciliyet ölçeği

Kritik
--gl-kritik / --gl-kritik-metin / -zemin / -kenar
Yüksek
--gl-yuksek · …-metin · …-zemin · …-kenar
Orta
--gl-orta · …-metin · …-zemin · …-kenar
Düşük
--gl-dusuk · …-metin · …-zemin · …-kenar

Marka, nötr ve metin

Marka
--gl-marka · --gl-marka-guclu
Nötr
--gl-notr · --gl-notr-metin
Metin 1 · birincil
--gl-metin
Metin 2 · gövde
--gl-metin-2 · --gl-metin-3

Zemin (mesh)

Cam ancak arkasında renk varsa cam görünür. Zemin body::before ile sabittir, hareketsizdir, tıklanamaz. Kaldırma — kaldırırsan sistem "gri üstüne blur"a düşer.

--gl-zemin · --gl-mesh-1..4 (body::before)
02

Tipografi

Sistem fontu: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter. Dış font indirilmez — kriz anında ağ zaten dardır.

Sessizlik ihtiyaçsızlık değildir
.gl-h1 · --gl-ts-3xl / 36px / 700 / -0.022em
Kadıköy · 14 doğrulanmış olay
.gl-h2 · --gl-ts-2xl / 28px / 600
Enkaz altında ses duyuldu
.gl-h3 · --gl-ts-xl / 22px / 600
Gövde metni. Aynı olayı anlatan mükerrer raporlar tek olayda birleşir; güven skoru kaynak güvenilirliği, çapraz doğrulama, konum ve zaman tutarlılığından üretilir.
.gl-govde · --gl-ts-md / 15px / 1.65
Yardımcı metin — 13px, ikincil bilgi ve zaman damgaları için.
.gl-yardimci · --gl-ts-sm / 13px
Bölüm etiketi
.gl-etiket · --gl-ts-xs / 11px / büyük harf / 0.14em
POST /api/rapor · kume_id=4172 · 2026-08-15T09:14:02Z
.gl-mono · teknik değer, kimlik, koordinat
03

Cam yüzeyler ve yükseklik

Üç yükseklik seviyesi. Yükseldikçe opaklık, bulanıklık ve gölge artar. Üstteki ince ışık çizgisi (specular) camı "kalın" gösteren şeydir — ::before ile otomatik gelir. Dördüncü bir seviye uydurma; üç seviye derinlik hiyerarşisi için yeterlidir.

Seviye 1 — ince

Liste kutusu, iç bölme, sessiz kapsayıcı. blur 14px.

.gl-kart .gl-y1
Seviye 2 — standart

Varsayılan kart / panel. blur 26px. Ekranların %80'i bu.

.gl-kart .gl-y2
Seviye 3 — kalın

Öne çıkan blok, yan panel, modal. blur 40px.

.gl-kart .gl-y3
Tıklanabilir kart

Üzerine gel: 2px yükselir, parlar. Least touch — kartın tamamı hedef.

.gl-kart .gl-y2 .gl-kart--etkilesimli
Yoğunluk katmanı

Harita üstü, uzun metin, tablo. Saydamlık düşer, okunurluk kazanır.

.gl-kart .gl-yogun
Panel

Kartlardan büyük kapsayıcı: 24px yarıçap, 24px iç boşluk. İçindeki kartlar 20px yarıçap — iç içe köşelerde optik uyum kuralı: dış yarıçap = iç yarıçap + iç boşluk.

.gl-panel .gl-y1
04

Butonlar

Birincil ve tehlike doludur, cam değildir: ana eylem tereddütsüz okunmalı. İkincil ve sessiz camdır, geri çekilir. Ekran başına tek birincil.

.gl-btn.gl-btn--birincil
.gl-btn.gl-btn--ikincil
.gl-btn.gl-btn--tehlike
.gl-btn.gl-btn--sessiz
.gl-btn[disabled]
.gl-btn--kucuk
.gl-btn--buyuk
.gl-btn--tam

Sekmeler

Kriz Masası Elenenler Arşiv
.gl-sekmeler > .gl-sekme[aria-selected="true"]
İstanbul · Kadıköy .gl-cip
05

Aciliyet ölçeği

Kural: aciliyet arttıkça saydamlık AZALIR. Kritik kart yarı saydam değildir — kenarı kalınlaşır, rengi doygunlaşır, arkasına yoğunluk katmanı gelir. Cam efekti alarmı yumuşatamaz.

Rozetler

KRİTİK.gl-rozet.gl-rozet--kritik
YÜKSEK.gl-rozet--yuksek
ORTA.gl-rozet--orta
DÜŞÜK.gl-rozet--dusuk
Twitter/X.gl-rozet--notr · kaynak etiketi
MCP.gl-rozet--marka.gl-rozet--hap
CAN KAYBI RİSKİ.gl-rozet--kritik-dolu · listede kaybolmaması gereken tek şey

Aciliyet kartları

KRİTİK Bahçelievler · Enkaz altından ses 4 kaynak · 3 dk önce
.gl-kart.gl-kart-sik.gl-aciliyet.gl-aciliyet--kritik.gl-nabiz
YÜKSEK Kartal · Doğal gaz sızıntısı ihbarı 2 kaynak · 11 dk önce
.gl-aciliyet--yuksek
ORTA Ümraniye · Su dağıtım noktası talebi 1 kaynak · 26 dk önce
.gl-aciliyet--orta
DÜŞÜK Beykoz · Battaniye fazlası bildirildi 1 kaynak · 1 sa önce
.gl-aciliyet--dusuk

.gl-nabiz yalnız kritikte ve ekranda tek bir öğede kullanılır. Üç şey birden yanıp sönerse hiçbiri fark edilmez.

06

Güven skoru göstergesi

Eşikler: ≥75 yüksek (yeşil) · 50-74 orta (sarı) · <50 düşük (kırmızı). Yüzde değeri her zaman yazıyla da yazılır — renk tek başına bilgi taşımaz (renk körlüğü). Değer style="--gl-guven-deger:82" ile verilir.

Çubuk — liste ve tablo içinde
%92
%64
%31
.gl-guven.gl-guven--yuksek|orta|dusuk > .gl-guven__cubuk + .gl-guven__deger
Halka — kart köşesinde tek bakış
92
64
31
.gl-guven-halka.gl-guven--yuksek + style="--gl-guven-deger:92"

İlerleme çubuğu

.gl-ilerleme[--gl-ilerleme-deger] · --kritik --yuksek --basari --ince · .gl-ilerleme-yigin

Sayaç / istatistik bloğu

1 284ham rapor
312benzersiz olay
418birleştirilen
%71ort. güven
27kritik olay
.gl-panel.gl-sayac-serit > .gl-sayac > .gl-sayac__deger + .gl-sayac__etiket
07

Yoğun veri — liste ve tablo

Cam üstünde uzun liste okunaklı kalmalı. Tablo başlığı yapışkandır ve yoğunluk katmanı taşır; satırlar hover'da opaklaşır. Liste satırının tamamı tıklama hedefidir.

Gelen ham akış
Ataşehir Barbaros Mah. bina yan yattı, ses var Twitter/X · 2 dk önce %88 Kartal E-5 üzeri yol kapalı, ekipler alternatif arıyor Telsiz · 5 dk önce %74 Ümraniye toplanma alanı su ihtiyacı bildirdi STK · 9 dk önce %61 Maltepe sahil toplanma alanı çadır kurulumu tamam Saha Ekibi · 14 dk önce %93 Kadıköy Fikirtepe elektrik yok, teyit edilmedi Vatandaş · 21 dk önce %42 Beşiktaş bina çatlağı fotoğrafı paylaşıldı Twitter/X · 33 dk önce %38
.gl-liste.gl-kaydir > a.gl-liste__satir > .gl-liste__ana / .gl-liste__yan
MahalleİlçeOlayGüvenDurum
Barbaros Ataşehir 14 %88 Kritik
Yakacık Kartal 9 %74 Yüksek
Atatürk Ümraniye 6 %61 Orta
Cevizli Maltepe 3 %93 Düşük
Fikirtepe Kadıköy 11 %42 Orta
Sinanpaşa Beşiktaş 2 %38 Düşük
.gl-kart.gl-yogun > .gl-tablo-sarmal.gl-kaydir > table.gl-tablo.gl-tablo--seritli · th yapışkan · td.gl-sag
08

Form alanları

Least touch: alan sayısını en aza indir, seçilebileni yazdırma, filtreyi onchange ile uygula. Her alan .gl-alan ile sarılır.

Kısa ve tek cümle. Detay açıklamaya yazılır. .gl-alan > .gl-alan__etiket + .gl-girdi + .gl-alan__ipucu
.gl-secim
Geçersiz koordinat biçimi. Beklenen: enlem, boylam .gl-alan.gl-alan--hatali · input[aria-invalid="true"] · .gl-alan__hata
.gl-alan-metin
Kaynak türü
.gl-onay > input[type=checkbox|radio]
.gl-anahtar > input[type=checkbox]
Least touch: tek birincil aksiyon, onay adımı yok.
09

Uyarı kutuları ve boş durum

Boş durum bir çıkmaz sokak değildir: içinde her zaman doğrudan bir aksiyon bulunur.

Bilgi
184 rapor işlenmeyi bekliyor. Triyaj her 5 dakikada bir otomatik çalışır.
.gl-uyari.gl-uyari--bilgi
Tamamlandı
418 mükerrer rapor 312 benzersiz olayda birleştirildi.
.gl-uyari--basari
Dikkat
Bu mahalleden 3 saattir hiç veri gelmiyor. Sessizlik ihtiyaçsızlık değildir.
.gl-uyari--uyari
Kritik
Bu olay için hiçbir ekip atanmadı ve 42 dakikadır bekliyor.
.gl-uyari--tehlike
Bu filtreyle eşleşen olay yok
Filtreyi genişletebilir ya da doğrudan buradan yeni bir saha raporu açabilirsin.
.gl-bos > .gl-bos__ikon + .gl-bos__baslik + .gl-bos__aciklama + aksiyon
10

Modal / katman

Modal istisnadır. Yalnız geri alınamaz işlemler ve odak gerektiren tek adımlık girdi için. Bilgi göstermek için modal açma — yan panel ya da genişleyen kart kullan. Aşağıdaki örnek gerçek görünümüyle, örtü içinde gömülü gösteriliyor.

Arkadaki içerik

Örtü bunu bulanıklaştırır — camın arkasında bir şey olduğu görünür kalır.

GERİ ALINAMAZ
Kaydı kalıcı olarak sil

Ham metin normalde silinmez; elenen kayıt bile arşivde kalır. Bu işlem geri alınamaz, bu yüzden onay soruluyor.

.gl-ortu > .gl-katman (.gl-katman--genis) > .gl-katman__baslik + .gl-katman__alt
11

Ekip kuralları

Şablon sözleşmesi
  • {% extends "base.html" %} zorunlu.
  • Sayfa adı: {% block baslik %}
  • Gövde: {% block icerik %} — kabuk zaten .gl-kap sağlar, ikinci bir kapsayıcı ekleme.
  • Sayfaya özel CSS: {% block bas %}
  • Sayfaya özel JS: {% block betik %} (gövdenin sonunda çalışır)
Uyulacak sınırlar
  • Yeni ekranlarda Tailwind sınıfı kullanma — yalnız gl-*.
  • Ham hex renk yazma; token kullan. Yeni renk gerekiyorsa tasarım sistemine token ekle.
  • backdrop-filter'ı elle yazma; .gl-y1/2/3 kullan. İç içe 3'ten fazla cam katman performansı yakar.
  • Aciliyet renklerini dekorasyon için kullanma. Kırmızı = alarm, başka bir şey değil.
  • Harita/tablo gibi yoğun içerik .gl-yogun üstünde durur.
  • Yeni CDN / JS kütüphanesi ekleme.
Eski ekranlar hakkında
panel · harita · stk · hane · gönüllü · koordinasyon · mcp şablonları Tailwind ile yazılmıştı ve değiştirilmedi. glass.css içindeki "köprü katmanı" (bölüm 23) Tailwind sınıflarını glass token'larına bağlar, böylece o ekranlar tek satır değişmeden yeni malzemeyi devraldı. Bu köprü geçicidir: bir ekran gl-*'a taşındığında o ekranın Tailwind sınıfları silinmelidir.