# Yemək Evi · Mobil uygulama prototipi (handoff)

Mobil uygulamanın **kodla yazılmış, çalışan prototipi**. Tüm ekranlar, ekran içi etkileşimler, geçişler ve animasyonlar
kod olarak burada.

**Açmak için:** `index.html`'e çift tıklayın. Kurulum, sunucu ya da internet
gerekmez. Telefonda açılınca tam ekran uygulama gibi çalışır.

- **155 ekran durumu**: Faz 1 için 110, Faz 2 için 45; açık ve koyu tema
- iOS ve Android (Android ekranları Faz 1 ve Faz 2 içinde ayrı bölümlerde)
- Ekranlar **390 × 844** (iPhone mantıksal çözünürlük)
- Uygulama dili Azerbaycan Türkçesi; yazılımcı notları Türkçe

---

## Neler çalışıyor

- **Ekranlar arası geçiş:** iOS tarzı itme / geri dönme, sheet'lerde yumuşak geçiş (`MOTION.md`)
- **Ekran içi etkileşimler:** PIN tuş takımı, OTP, sepete ekleme ve adet, filtreler, sekmeler, toggle'lar, sheet aç/kapa, şube seçimi, sohbet, arama ...
- **Tepkiler:** yanlış PIN'de titreme ve kırmızı hata, doğru PIN'de "Davam et →", yükleniyor iskeletleri, başarı halkaları, QR tarama çizgisi, geri sayımlar
- **Tema:** sol menüden açık/koyu; tüm ekranlar anında değişir
- **Gezinme:** sol menüden herhangi bir ekrana atla, ‹ › ya da ← → ile sırayla gez, **▶ Baştan başlat** ile Splash'ten akışı başlat. Her ekranın kendi adresi var: `index.html#/Login`

Deneme verileri (titreme + hata görmek için):
- Giriş PIN, Unlock, PIN tekrarı, SMS kodu, Təsdiq kodu: **000000** yanlış kabul edilir, diğer 6 haneli girişler doğrudur
- PIN yarat ve Yeni PIN: ardışık (**123456**) ya da tekrar eden (**111111**) PIN reddedilir

---

## Faz 1 ve Faz 2

Ekranlar iki yayın aşamasına ayrılmıştır. Sol menüde de bu sırayla görünür.

**Faz 1:** ilk yayın. Kasada QR okutup bakiyeden ödeme modeli.

| Bölüm | İçerik |
|---|---|
| F1.1 | Onboarding ve giriş |
| F1.2 | Kayıt |
| F1.3 | Ana sayfa, menü ve arama |
| F1.4 | Kasada QR okut ve bakiyeden öde |
| F1.5 | Arkadaşa yemek ısmarla ve askıda yemek |
| F1.6 | Siparişler (QR ödeme geçmişi) |
| F1.7 | Profil, bakiye ve ayarlar |
| F1.8 | Sistem durumları (internet yok, sunucu hatası, zorunlu güncelleme) |
| F1.9 | Android (iOS ile aynı akış, Android sistem öğeleri) |

**Faz 2:** önsipariş ve uygulamadan sipariş.

| Bölüm | İçerik |
|---|---|
| F2.1 | Faz 2'de açılan sürümler (ana sayfa, menü, yemek, siparişler, profil, ayarlar, SSS, bildirimler) |
| F2.2 | Ana sayfa · önsipariş durumu |
| F2.3 | Sepet ve teslim alma penceresi (10 dk · en fazla 50 kişi) |
| F2.4 | Aktif siparişler |
| F2.5 | QR göster |
| F2.6 | Haftayı planla ve abonelik |
| F2.7 | Live Activity ve Dynamic Island |
| F2.8 | Sonra · Teslimat (kapalı) |
| F2.9 | Android · kalıcı bildirim (Live Activity karşılığı) |
| F2.10 | Arşiv · Faz 1'den çıkarılanlar |

**Aynı ekranın iki fazdaki hali:** Ortak ekranlar tek bileşendir. Faz 2 sürümü
aynı bileşenin `f2: true` ile açılmasıdır. Örneğin `#/Home` Faz 1 ana sayfası,
`#/HomeF2` aynı ekranın Faz 2 hali. Bileşen kodunda `this.props.f2` ile
ayrılan kısımlar Faz 2'de açılan özelliklerdir.

**Android:** Android ekranları aynı bileşenin `android: true` ile açılmasıdır
(barmaq izi, Google Pay, Android izin pencereleri ...). Prototip bu ekranlarda
Android durum çubuğunu ve hareket çubuğunu gösterir.

---

## Klasör yapısı

```
app-handoff/
├─ index.html              Prototip (başlangıç noktası)
├─ README.md               Bu dosya
├─ MOTION.md               Tüm geçiş/animasyon süreleri ve eğrileri
├─ css/
│  ├─ tokens.css           Renk, yazı, radius, boşluk, hareket. TEK KAYNAK
│  ├─ base.css             Fontlar, ekran içi ortak sınıflar, animasyonlar (@keyframes)
│  └─ shell.css            Yalnızca prototip çerçevesi (uygulamaya taşınmaz)
├─ js/
│  ├─ ye.js                Ekran çekirdeği: html`` şablonu, state, yeniden çizim
│  ├─ shell.js             Telefon çerçevesi, yönlendirme, geçişler, tema
│  └─ routes.js            Ekran listesi: rota, başlık, faz, bölüm, props
├─ screens/
│  ├─ dizayn-sistemi/      Temeller, bileşenler, ikon/illüstrasyon kütüphaneleri
│  ├─ faz-1/               Bölüm klasörleri (01-onboarding-ve-giris, 02-qeydiyyat ...)
│  └─ faz-2/               Yalnızca Faz 2'de yeni olan ekranların klasörleri (sepet, aktif siparişler ...)
└─ assets/                 Fontlar, logolar, yemek fotoğrafları, harita, ikon seti
```

## Bir ekran dosyası

Her ekran tek bir dosya ve üç parçadan oluşur:

```js
YE.define('Login', class Login extends YE.Screen {
  constructor(p) { super(p); this.state = { value: '+994 50 123 45 67' }; }   // 1. durum

  renderVals() {                                                              // 2. mantık
    const t = { bg: 'var(--bg)', text: 'var(--text)', ... };                  //    renkler = token
    return { t, value: this.state.value,
             onType: (e) => this.setState({ value: e.target.value }),         //    olay
             next: '#/LoginPin' };                                            //    gidilecek ekran
  }

  template(v) {                                                               // 3. görünüm
    return html`<div style="background: ${v.t.bg}; ...">
      <input value="${v.value}" @input="${v.onType}">
      <a href="${v.next}">Davam et</a>
    </div>`;
  }
});
```

- **state** değişince ekran yeniden çizilir; yalnızca değişen kısım güncellenir, CSS geçişleri bu sayede çalışır.
- **Dosya başlığında** ekranın adı, bölümü, varyant rotaları (`props` ile) ve gittiği ekranlar yazılı.
- **Varyantlar:** bir ekranın durumları aynı bileşenin farklı `props` ile açılmasıdır. Örneğin `#/HomeReady` → `Home` bileşeni, `{"f2": true, "order": "ready"}`. Liste: `js/routes.js`.
- **Bileşen dosyasının yeri:** ekranın ilk göründüğü bölümdür. Faz 2'de de kullanılan ekranlar Faz 1 klasöründedir; dosya başlığındaki "Rotalar" listesi hangi fazda nasıl açıldığını gösterir.
- **Sheet arkası:** `YE.embed('Login', ...)` sheet'in altında görünen ekrandır. Gerçek uygulamada bu, alttaki ekranın kendisidir.

Bu yapı React bileşenine çok yakındır (`state` / `setState` / yaşam döngüsü
aynı mantık). SwiftUI ve Jetpack Compose'a da `state → görünüm` olarak
doğrudan karşılık gelir.

## Renkler ve tema

`css/tokens.css`: `:root` açık tema ve sabitler, `[data-theme="dark"]` koyu
tema. Ekranlarda renkler yalnızca `var(--token)` olarak geçer. Native
uygulamada iki blok, Light / Dark renk şemasına birebir taşınabilir.

## Yazı tipleri

| Kullanım | Font |
|---|---|
| Gövde | Inter 400/500/600/700 |
| Başlık | Bricolage YE 600/700/800 (Azerbaycan harfleri için özel kesim) |
| Başlık yedeği / Kiril | Geologica 600/700/800 |

---

## Henüz bağlanmamış noktalar

Tasarımda bilerek açık bırakılanlar. Tıklanınca "növbəti mərhələdə" uyarısı çıkar:

- Tətbiqi yenilə → gerçek App Store / Play Store linki
- +994 ülke kodu seçici (yabancı numaralar)
- Şirkət / kurum sekmesi için gerçek liste
- Gerçek şube listesi, adres ve koordinatlar
- Dəstək: WhatsApp, telefon, e-posta bilgileri
- Hukuki metinler örnektir, köşeli parantezli yer tutucular (`[tarix]`, `[müddət]` ...) gerçek bilgiyle doldurulacak

## Prototipe özel kısımlar (uygulamaya taşınmaz)

`js/shell.js`, `css/shell.css`, telefon çerçevesi, durum çubuğu (9:41) ve sol
menü yalnızca sunum içindir. Veriler örnek veridir; backend bağlantısı yoktur.