🎯 Proje Adı ve Kısa Açıklama
VaultID, kullanıcı kaydı ve girişi için üç katmanlı bir güvenlik mimarisi sunan, tek dosyalık (single-file) bir web uygulamasıdır:

Katman Bilgi Format
1 E-posta RFC 5322 uyumlu
2 PIN Şifre 8 hane, sadece rakam
3 WebPass 16 karakter (harf + sayı + özel)
Bonus TOTP 6 haneli, 30 sn'de yenilenen QR kodlu 2FA
Kullanım alanları:

Yüksek güvenlikli SaaS panelleri

Fintech / bankacılık arayüzleri

Kurumsal VPN / admin girişleri

Prototip / demo amaçlı güvenli auth ekranları

✨ Özellikler
🔐 Güvenlik
✅ İki katmanlı kimlik doğrulama (PIN + WebPass)

✅ QR kodlu TOTP (Google Authenticator, Authy, Microsoft Authenticator uyumlu)

✅ Saf JS SHA-1 + HMAC ile TOTP üretimi (sunucu/internet gerekmez)

✅ ±30 saniye tolerans penceresi (saat kayması toleransı)

✅ Otomatik secret üretimi (20 byte, Base32 encode)

✅ Şifre gücü göstergesi (4 seviyeli)

✅ Şifre tekrar doğrulaması (kayıt sırasında)

✅ Rate-limit görünümlü shake animasyonu (hata geri bildirimi)

✅ Oturum token'ı (32 byte rastgele)

🎨 UI/UX
✅ Lacivert-Beyaz tema (koyu & açık mod)

✅ Sekmeli yapı — Giriş / Kayıt / Şifremi Unuttum

✅ Adım adım sihirbaz (1/4, 2/4...)

✅ İlerleme çubuğu (animasyonlu gradient)

✅ OTP tarzı kod girişi (yapıştırma desteği, otomatik ilerleme, ok tuşu navigasyonu)

✅ WebPass üretici (güvenli rastgele 16 karakter)

✅ Göster/Gizle (👁 toggle)

✅ "Beni hatırla" (30 gün localStorage / sekme başına sessionStorage)

🎬 Animasyonlar & Efektler
✅ SVG Morphing Blob arka plan

✅ Cursor Glow (fareyi takip eden ışık)

✅ Magnetic Buttons (fareye çekilir)

✅ Typewriter başlıklar (harf harf yazılır)

✅ Skeleton Loading (yükleniyor placeholder)

✅ Count-up animasyonu (0/16 → 16/16)

✅ Haptic feedback (mobil titreşim)

✅ Ripple efekti (tıklamada dalga)

✅ 3D tilt (fare ile kart eğilir)

✅ Konfeti (başarı ekranı)

✅ Shake (hata animasyonu)

✅ Gradient shift (butonlar)

✅ Shine sweep (hover'da parlama)

🌐 Erişilebilirlik
✅ prefers-reduced-motion desteği

✅ ARIA rolleri (role="tablist", aria-selected, aria-label)

✅ Klavye navigasyonu (Tab, Ok, Enter, Backspace)

✅ Yüksek kontrast renk seçimi

✅ Mobil dokunmatik optimizasyonu

🧰 Teknoloji Yığını
Katman Teknoloji Amaç
Markup HTML5 Semantik yapı
Stil CSS3 (Custom Properties, Grid, Flexbox, @keyframes, backdrop-filter) Görsel + animasyonlar
Mantık Vanilla JavaScript (ES2020+) Doğrulama, oturum, TOTP
Kripto Web Crypto API (crypto.getRandomValues) Güvenli rastgele
Depolama localStorage + sessionStorage Kullanıcı & oturum
QR api.qrserver.com QR kod üretimi
Font Inter (system-ui fallback) Tipografi
Hangi Dillere / Framework'lere Uyarlanabilir?
Ortam Uyarlama Zorluğu Yöntem
Saf HTML/CSS/JS ⭐ Kolay Olduğu gibi çalışır
React ⭐⭐ Orta Bileşenlere böl: , , ,
Vue 3 ⭐⭐ Orta ile ref/reactive'e taşı
Svelte ⭐⭐ Orta Store + #await bloklarıyla yeniden yaz
Next.js / Nuxt ⭐⭐⭐ Zor API route'ları ile sunucu tarafına taşı
Laravel Blade ⭐⭐⭐ Zor @csrf + form request validation
Django / Flask ⭐⭐⭐ Zor Jinja template + pyotp kütüphanesi
Node + Express ⭐⭐⭐ Zor speakeasy + qrcode npm paketleri
Flutter / React Native ⭐⭐⭐⭐ Çok zor Tamamen yeniden yazım; otp widget'ı kullan
Electron / Tauri ⭐⭐ Orta Aynı kod, sadece QR için farklı kütüphane