Muzibu - Frontend Login Taslak

Farklı senaryolar için login sayfası görünüm örnekleri

Senaryo 1: Normal Login
Şifremi Unuttum

Şirketinizin size verdiği kurumsal erişim kodunu girin

veya
Senaryo 2: 2FA Aktif
İki Faktörlü Doğrulama (2FA)

Hesabınızda 2FA aktif. Giriş yaptıktan sonra telefonunuza gönderilen doğrulama kodunu girmeniz istenecek.

Şifremi Unuttum
veya

Doğrulama Kodu

+90 ••• •••• 67 numarasına gönderilen 6 haneli kodu girin

Kod gelmedi mi? Tekrar Gönder

Senaryo 3: Cihaz Limiti Doldu
Cihaz Limiti Doldu!

Hesabınızda maksimum 3 cihaz tanımlı. Yeni cihazdan giriş yapmak için aşağıdaki cihazlardan birini kaldırın.

Aktif Cihazlarınız (3/3)

  • iPhone 14 Pro

    Son giriş: 2 saat önce

    Aktif
  • MacBook Pro

    Son giriş: 1 gün önce

  • iPad Air

    Son giriş: 3 gün önce

Yeni Cihaz: Chrome / Windows 11 / İstanbul, TR
Senaryo 4: Hesap Onay Bekliyor
Hesabınız Onay Bekliyor

Kurumsal hesabınız yönetici onayı bekliyor. E-posta adresinizi doğruladıktan sonra yöneticinizin onayı ile giriş yapabileceksiniz.

E-posta Doğrulaması Gerekli

ahmet.yilmaz@sirket.com adresine doğrulama linki gönderdik.

Onay Süreci

  1. E-posta Doğrulama: Mailinizi kontrol edin ve doğrulama linkine tıklayın
  2. Yönetici Onayı: Şirket yöneticiniz hesabınızı onaylayacak
  3. Giriş Yapabilirsiniz: Onay sonrası sisteme giriş yapabilirsiniz

Sorun mu yaşıyorsunuz? Destek Ekibi ile İletişime Geçin

Senaryo 5: Başarılı Giriş
Giriş Başarılı!

Hoş geldiniz! Ana sayfaya yönlendiriliyorsunuz...

Hoş Geldiniz!

Ahmet Yılmaz

ahmet.yilmaz@email.com

Oturum Bilgileri

Cihaz:

Chrome / Windows 11

Konum:

İstanbul, TR

IP Adresi:

185.123.45.67

Son Giriş:

2 saat önce

Yönlendiriliyor...

Senaryo 6: Şifremi Unuttum

Şifrenizi mi Unuttunuz?

E-posta adresinizi girin, size şifre sıfırlama linki gönderelim.

Kayıtlı e-posta adresinizi girin

E-posta Gönderildi!

ahmet.yilmaz@email.com adresine şifre sıfırlama linki gönderdik. E-postanızı kontrol edin ve linke tıklayarak yeni şifrenizi belirleyin.

Link 24 saat geçerlidir

E-posta gelmediyse spam klasörünüzü kontrol edin

Tasarım Notları

Renk Paleti

  • Primary: #667eea → #764ba2 (Gradient)
  • Success: #10b981 (Yeşil)
  • Warning: #f59e0b (Turuncu)
  • Danger: #ef4444 (Kırmızı)
  • Info: #3b82f6 (Mavi)

Özellikler

  • Tailwind CSS kullanımı
  • Alpine.js ile toggle interaktivite
  • FontAwesome iconlar
  • Responsive tasarım
  • Modern gradient arka plan

Responsive

  • Desktop: Grid layout (2 sütun)
  • Tablet: Grid layout (2 sütun)
  • Mobile: Tek sütun, full width
  • Touch: Büyük butonlar, kolay tıklama

Teknoloji

  • Framework: Tailwind CSS (CDN)
  • JavaScript: Alpine.js (Collapse)
  • Icons: FontAwesome 6.4.0
  • Font: System UI Stack

Senaryolar

  • 1. Normal login formu
  • 2. 2FA doğrulama
  • 3. Cihaz limiti uyarısı
  • 4. Hesap onay bekliyor
  • 5. Başarılı giriş
  • 6. Şifre sıfırlama

Uygulanabilir

  • Blade template'e dönüştürülebilir
  • Livewire ile entegre edilebilir
  • Laravel validation uyumlu
  • API response'lara adapte edilebilir

Bu tasarımlar Blade template'lere dönüştürülebilir ve Laravel/Livewire ile entegre edilebilir.

Onay verirseniz uygulamaya geçebilirim!

🤖 Claude AI tarafından oluşturuldu - Frontend Login Sayfası Taslak

📅 2025-11-24