Teachfluence Admin · Temeller
Tasarım belirteçleri · bileşen kiti · navigasyon iskeleti · giriş (OTP) · Türkçe · iOS öncelikli (Android/Material paritesi notlarda) · Light + Dark
Temeller · Belirteçler
Renk belirteçleri (Light/Dark çiftleri), tipografi ölçeği, sistem kuralları. Kaynak: _kit.css tokenları.
Referans · legend
Renk Belirteçleri (Light / Dark)
Her çip: sol kare = Light değeri, sağ kare = Dark değeri.
primary
screen
card
fill
fg
muted
hair
tint
success
warning
danger
info
Tipografi · Inter
Display · 800 · 30
₺248.940
H1 · 800 · 26
Ana Sayfa
Title · 700 · 17
Gelir trendi
Body · 500 · 14
Yeni satış · Mindful Coaching
Meta · 500 · 12
2 dk önce · #ORD-4471
Eyebrow · 600 · 11
AKSİYON GEREKLİ
Sistem
Radius 8 (kart / alan / buton)
Border-first · 1px hairline · gölge yok
Ritim 24 / 16 / 12
Marka azure #208AEF · tek tipografi (Inter)
Light + Dark · her ikisi de zorunlu
Ham hex yalnızca bu efsanede kullanılır; tüm ekran UI'ı yalnızca kit sınıfları + CSS değişkenleriyle boyanır.
Cihazda · Light
9:41
100%
Net gelir
₺248.940
▲ %12,4geçen 28 güne göre
Aynı hero, Light temada: kart #FFFFFF, fg #09090B, delta success #15803D.
Cihazda · Dark
9:41
100%
Net gelir
₺248.940
▲ %12,4geçen 28 güne göre
Aynı hero, Dark temada: kart #14171E, fg #F3F5F8, delta success #34D399. Belirteçler otomatik eşlenir.
Temeller · Bileşen kiti
Buton · alan · rozet · pill · kontrol · StatCard · ListRow · avatar · toast · iskelet · alt sayfa — tüm varyant ve durumlar. Kaynak yok; her ekranı besleyen _kit.css sınıf sözlüğünün canlı kataloğu.
Parça kataloğu · Light
Butonlar
Kaydet
İptal
Atla
Sil
Engelle
Ekle · sm
İkincil · sm
Devam et · lg
Pasif
Yükleniyor…
Alanlar
Varsayılan
ornek@teachfluence.com
Odaklı
Okulum Akademi
Hatalı
₺ 0
Tutar sıfırdan büyük olmalı
Seçim
Aylık üyelik
Metin alanı
Duyuru metnini yazın…
Arama
Öğrenci ara
OTP · 6 hane
4
8
1
Rozetler · pill
Tamamlandı Beklemede Reddedildi Bilgi Yeni Taslak
Etiket Etiket · dolu +3 daha
SLA çipi
Kalan 8 dk Kalan 2 dk Gecikti 5 dk
Chip'ler
Tümü 248 Açık 26 Kapalı 222
Avatar
EK
MD
AY
SÖ
OK
Kontroller
Switch · Radio · Check
Segment
Gün
Hafta
Ay
Sekmeler
Bekleyen
Şikayet
Yasaklı
StatCard
Net gelir
₺248.940
▲ %12,4geçen 28 güne göre
Sipariş
1.284
▲ %8,1
Ort. sepet
₺194
▼ %2,3
ListRow
Yeni satış — Mindful Coaching
Yıllık Üyelik
₺1.4502 dk
AY
Ahmet Yıldız
E-posta bildirimleri
Ödeme ayarları
PayTR · Iyzico
Toast
Gönderi onaylandıGeri al
İşlem başarısız oldu
Değişiklikler kaydediliyor…
İskelet
Boş durum
Henüz kayıt yok
Yeni bir satış geldiğinde burada listelenecek.
Kanonik parça kataloğu — her ekran yalnızca bu sınıfları besteler; renkler CSS değişkenlerinden gelir, gölge yoktur, kenarlık 1px hairline.
Parça kataloğu · Dark
Butonlar
Kaydet
İptal
Atla
Sil
Engelle
Pasif
Alanlar
Okulum Akademi
Aylık üyelik
₺ 0
Tutar sıfırdan büyük olmalı
Öğrenci ara
Rozet · pill · SLA
Tamamlandı Beklemede Reddedildi Bilgi Yeni Taslak
Kalan 8 dk Kalan 2 dk Gecikti 5 dk Etiket Dolu
Kontroller
Gün
Hafta
Ay
Açık 26Kapalı 222
Bekleyen
Şikayet
Yasaklı
StatCard
MRR
₺62.400
▲ %4,0
İptal
18
▼ %6,5
ListRow · Avatar
Yeni kayıt — Elif Demir
UX Tasarım Bootcamp
18 dk
SÖ
Selin Öz
Anlık bildirim
EK
MD
AY
SÖ
OK
Toast · İskelet · Boş
Gönderi onaylandıGeri al
İşlem başarısız oldu
Henüz kayıt yok
Dark tema aynı sınıflarla; tek fark .theme-dark token seti — bileşen işaretlemesi birebir aynı kalır.
Temeller · Navigasyon
Sekme çubuğu · uygulama çubuğu · “Daha Fazla” merkezi · organizasyon seçici. Kaynak: viewer, viewerMembership.role, org switch (switchOrganizationContext).
Sekme çubuğu · Ana Sayfa etkin · Light
Ana Sayfa
Satışlar
Topluluk
Destek
Daha Fazla
Beş kök sekme. Topluluk ve Destek üzerindeki kırmızı nokta, okunmamış moderasyon/atanmamış sohbet sayısıyla beslenir.
Sekme çubuğu · Topluluk etkin · Dark
Ana Sayfa
Satışlar
Topluluk
Destek
Daha Fazla
Uygulama çubuğu varyantları · Light
a · Varsayılan (kök sekme)
OK
Okulum Akademi
okulum.teachfluence.com
MD
b · Yığın (geri · başlık · kebap)
Geri Sipariş detayı
c · Büyük başlık (listenin üstünde)
Öğrenciler
1.842 öğrenci
Kök sekmelerde org seçicili varsayılan çubuk; itilen ekranlarda yığın çubuğu; koleksiyon ekranlarında kaydırma içi büyük başlık.
“Daha Fazla” merkezi · Light
9:41
100%
Daha Fazla
OK
Okulum Akademi
Üye olduğun 3 organizasyon
Yönetim
Öğrenciler
Formlar
Seanslar
Bildirimler
7
Notlandırma
12
Katalog
Ödemeler
Üyeler & Roller
Ayarlar
Hesap
MD
Mehmet Demir
Sahip · mehmet@okulum.com
Çıkış yap
Ana Sayfa
Satışlar
Topluluk
Destek
Daha Fazla
“Daha Fazla” merkezi · Dark
9:41
100%
Daha Fazla
OK
Okulum Akademi
Üye olduğun 3 organizasyon
Yönetim
Öğrenciler
Formlar
Seanslar
Bildirimler
7
Notlandırma
12
Katalog
Ödemeler
Üyeler & Roller
Ayarlar
Hesap
MD
Mehmet Demir
Sahip · mehmet@okulum.com
Çıkış yap
Ana Sayfa
Satışlar
Topluluk
Destek
Daha Fazla
Organizasyon değiştir · alt sayfa
9:41
100%
Daha Fazla
OK
Okulum Akademi
Üye olduğun 3 organizasyon
Organizasyon değiştir
OK
Okulum Akademi
Sahip
7
MC
Mindful Coaching
Yönetici
DS
Dijital Stüdyo
Eğitmen
Yeni organizasyon
Etkin org onay işaretiyle vurgulanır; her satır rol rozetini (viewerMembership.role) ve okunmamış sayısını taşır.
Akış · Giriş
E-posta ile giriş (Google veya 6 haneli OTP) — organizasyon slug’ı yok. Giriş sonrası, yönetici/eğitmen olunan organizasyonlar listelenir ve kullanıcı birini seçer. Kaynak: sendLoginOtp, loginWithOtp, loginWithGoogle, ardından viewer + üye olunan organizasyonlar.
1. Giriş · Light
9:41
100%
T
Teachfluence’a giriş
Yönetici hesabınızla devam edin. E-posta adresinize bir doğrulama kodu göndereceğiz.
mehmet@okulum.com
E-posta ile devam et
veya
Google ile devam et
Yalnızca bir organizasyonun yöneticisi/eğitmeni olan hesaplar giriş yapabilir.
Organizasyon seçimi giriş adımında değil, giriş sonrasında yapılır — kullanıcı birden çok organizasyona ait olabilir.
1. Giriş · Dark
9:41
100%
T
Teachfluence’a giriş
Yönetici hesabınızla devam edin. E-posta adresinize bir doğrulama kodu göndereceğiz.
mehmet@okulum.com
E-posta ile devam et
veya
Google ile devam et
Yalnızca bir organizasyonun yöneticisi/eğitmeni olan hesaplar giriş yapabilir.
Alan durumları · Light
9:41
100%
T
Teachfluence’a giriş
mehmet@okulum.com
Kod bu adrese gönderilecek.
mehmet@okulum
Geçerli bir e-posta adresi girin.
E-posta ile devam et
Tek alan: e-posta. Odak halkası .tf-input.focus; geçersiz e-postada .tf-input.error + .tf-help.error ve buton devre dışı.
2. Kodu doğrula · Light
9:41
100%
GeriKod doğrulama
Kodu girin
mehmet@okulum.com adresine gönderilen 6 haneli kodu girin.
2
0
8
Doğrula ve devam et
Kodu tekrar gönder · 0:54
Farklı e-posta kullan
Geri sayım bitene kadar “tekrar gönder” pasif; kod tamamlanınca loginWithOtp tetiklenir ve organizasyon seçimine geçilir.
2. Kodu doğrula · Dark
9:41
100%
GeriKod doğrulama
Kodu girin
mehmet@okulum.com adresine gönderilen 6 haneli kodu girin.
2
0
8
Doğrula ve devam et
Kodu tekrar gönder · 0:54
Farklı e-posta kullan
Kod hatalı · Dark
9:41
100%
GeriKod doğrulama
Kodu girin
mehmet@okulum.com adresine gönderilen 6 haneli kodu girin.
7
3
1
9
0
4
Kod hatalı veya süresi dolmuş.
Kodu tekrar gönder
Farklı e-posta kullan
Hatalı/expired kodda tüm hücreler --danger kenarlığına döner; birincil eylem “tekrar gönder”e döner.
3. Organizasyon seç · Light
9:41
100%
Hoş geldin, Mehmet 👋
Devam etmek için bir organizasyon seç.
OK
Okulum Akademi
Sahip · okulum.teachfluence.com
7
MC
Mindful Coaching
Yönetici · mindful.teachfluence.com
DS
Dijital Stüdyo
Eğitmen · 2 kurs
Çıkış yap
Girişten sonra viewer’ın üye olduğu organizasyonlar listelenir (rol + okunmamış rozet). Tek organizasyon varsa bu ekran atlanır, doğrudan panoya geçilir.
3. Organizasyon seç · Dark
9:41
100%
Hoş geldin, Mehmet 👋
Devam etmek için bir organizasyon seç.
OK
Okulum Akademi
Sahip · okulum.teachfluence.com
7
MC
Mindful Coaching
Yönetici · mindful.teachfluence.com
DS
Dijital Stüdyo
Eğitmen · 2 kurs
Çıkış yap
Yeniden giriş · Light
9:41
100%
Oturum süresi doldu
Güvenliğiniz için oturumunuz sonlandırıldı. Devam etmek için tekrar giriş yapın.
Tekrar giriş yap
JWT süresi dolduğunda uygulama bu ekrana düşer; e-posta korunur, yalnızca yeni bir OTP istenir.