# Clopos E-Menu — Rezervasiya modulu · Piksel-piksel UI spesifikasiyası

Bu sənəd rezervasiya axınının üç ekranını — **Rezervasiya yarat**, **Rezervasiyalar (siyahı)**, **Rezervasiya detayı** — hər UI elementinin dəqiq ölçüləri, rəngləri, boşluqları və davranışı ilə təsvir edir. Prototip: 390px iPhone Safari çərçivəsi.

---

## 0. Dizayn tokenləri (bütün ekranlarda ortaq)

| Token | Dəyər | İstifadə |
|---|---|---|
| `--primary` | `#2684FF` | Əsas mavi — düymələr, seçili hallar, ikonlar |
| `--primary-50` | `#f0f6fa` | Seçili option fonu |
| `--primary-100` | `#e4f0ff` | — |
| `--primary-700` | `#0b63d1` | Basılı düymə, ay adı |
| `--text-1` | `#1d1d1d` | Əsas mətn |
| `--text-2` | `#5f6774` | İkincili mətn, label |
| `--text-3` | `#9aa3af` | Placeholder, disabled, chevron |
| `--line` | `#eef1f5` | Sərhədlər, ayırıcılar |
| `--soft` | `#f0f6fa` | İkon fonu, yumşaq fonlar |
| `--pill` | `#f2f2f7` | Grabber, ay naviqasiya düyməsi |
| `--ok` | `#16a34a` | Uğur, təsdiqləndi statusu |
| `--warn` | `#f59e0b` | Gözləyir statusu |
| `--danger` | `#e11d48` | Ləğv, xəbərdarlıq |
| Şrift | `'SF Pro Text','Inter',-apple-system,system-ui` | — |

**Cihaz çərçivəsi**
- `.phone`: width 390px, border-radius 46px, background #000, padding 10px, shadow `0 30px 70px rgba(12,24,45,.18)`
- `.screen`: border-radius 38px, background #fff, height 800px, flex column
- `.island` (dynamic island): 110×34px, radius 20px, #000, top 18px, mərkəz
- `.status` (status bar): hündürlük 44px, padding 0 28px, font 15px/600 — solda "9:41", sağda signal+batareya SVG
- `.safari` (URL bar): margin 4px 8px 0, hündürlük 38px, radius 12px, background `--pill`; "aA" solda (#666,14px), domen mərkəzdə (`#1a9b4b`,13px/500), "↻" sağda (#999)

---

## 1. Ekran: REZERVASIYA YARAT (`reservation.html`)

### 1.1 Nav bar
- `.nav`: position relative, flex center, padding 14px 16px 12px, alt sərhəd 1px `--line`
- Geri düyməsi `.back`: absolute left 14px, 30×30px, chevron-left SVG (24px, stroke 2.4, `--text-1`)
- Başlıq `h1`: font 17px/600, letter-spacing -.3px, mətn **"Rezervasiya yarat"**

### 1.2 Body
- `.body`: flex 1, overflow-y auto, padding 16px 16px 20px, background `#F8FAFB`

### 1.3 Sahə düymələri (`.fields` → `.field`)
- `.fields`: flex column, gap **8px**
- `.field`: flex, align center, gap 13px, **padding 8px**, background #fff, border 1px `--line`, radius 12px, cursor pointer
  - `:active` → background `--soft`
- İkon qutusu `.fi`: 38×38px, radius 10px, background `--soft`, ikon rəngi `--primary`, ortalanmış
- Mətn bloku `.fl`: flex 1
  - Label `.k`: block, font 11px/500, `--text-2`
  - Dəyər `.v`: block, font 15px/600, letter-spacing -.2px, margin-top 2px
  - `.v.ph` (placeholder): `--text-3`, font-weight 500
- Chevron `.chev`: chevron-right (20px, stroke 2, `--text-3`), sağda

**Sahələrin sırası və ikonları:**
1. **Tarix** — `cal` ikonu (təqvim) — placeholder "Seçin"
2. **Saat** — `clock` ikonu — placeholder "Seçin"
3. **Qonaq sayı** — `users` ikonu (2+ nəfər) — placeholder "Seçin"
4. **Zal · üstünlük** — `hall` ikonu (masa-stul, fill) — default "İstənilən zal" (placeholder rəngli). Label-də "Zal" + `--text-3` rəngli " · üstünlük". Bu sahə **dropdown** açır (aşağı bax).

### 1.4 Foothint
- `.foothint`: font 11px, `--text-3`, mərkəz, margin-top 14px, line-height 1.5
- Mətn: "Sorğu göndərildikdən sonra restoran təsdiqləyənə qədər gözləyin. Masa qəbul zamanı təyin olunur."

### 1.5 Footer + CTA
- `.foot`: padding 12px 16px calc(24px + safe-area), üst sərhəd 1px `--line`, background #fff
- `.btn` (CTA "Rezervasiya et"): width 100%, hündürlük 50px, radius 13px, background `--primary`, ağ mətn 15px/600, shadow `0 10px 22px rgba(38,132,255,.26)`
- `.btn.dis` (deaktiv): background `#e6e9ee`, mətn `#97a0ad`, shadow yox — tarix+qonaq+saat seçilməyənə qədər
- Klik → `rezervasiyalarim.html` səhifəsinə keçid

---

## 2. Bottom-sheet ümumi quruluşu

- `.scrim`: absolute inset 0, background `rgba(0,0,0,.42)`, opacity keçidi .22s
- `.sheet`: absolute bottom, radius 22px 22px 0 0, background #fff, padding 8px 16px 22px, shadow `0 -12px 40px rgba(0,0,0,.22)`, max-height 88%, translateY(101%)→0 keçid .28s cubic-bezier(.2,.8,.2,1)
- `.grab` (tutacaq): 36×5px, radius 4px, `--pill`, mərkəz, sticky top
- `.sheet h3` (başlıq): 17px/700, letter-spacing -.3px, mərkəz, sticky top 11px, background #fff, **padding-bottom 20px** (başlıq–məzmun gap)
- Sabit alt düymələr `.cal-foot`: flex gap 10px, sticky bottom, background #fff, padding 12px 0 6px, üst kölgə `0 -1px 0 --line`
  - `.btn2`: flex 1, hündürlük 44px, radius 12px, font 15px/600
  - `.btn2.sec` (Ləğv et): background `#f2f4f5`, `--text-1`
  - `.btn2.pri` (Təsdiqlə): background `--primary`, ağ

### 2.1 Tarix sheet-i (təqvim)
- Başlıq yoxdur (silinib), birbaşa ay naviqasiyası
- `.cal-h`: flex space-between, margin-bottom 12px
  - Naviqasiya düymələri `.nb`: 32×32px, radius 9px, `--pill`, chevron; `.nb.off` (keçmiş aya keçid bağlı) opacity .35
  - Ay adı `.mo`: 14px/700 — "Dekabr 2026" formatı
- `.cal`: grid 7 sütun, gap 5px, mərkəz
  - Həftə günləri `.wd`: 10px/600, `--text-3` — B.e, Ç.a, Ç., C.a, C., Ş., B.
  - Gün `.cd`: aspect-ratio 1, radius 11px, 13px/600, tabular-nums
    - `.cd.on` (seçili): background `--primary`, ağ
    - `.cd.dis` (keçmiş): `--text-3`, opacity .35
  - Ayın ilk günü offset: `(getDay()+6)%7` boş xana
  - Bu gündən (REF=15 Dek 2026) əvvəlki günlər deaktiv
- Seç-sonra-təsdiqlə: gün seçilir (tmpDate), "Təsdiqlə" ilə state-ə yazılır

### 2.2 Saat sheet-i (slot grid)
- Başlıq "Saat seç"
- Üç bölmə `.period` (uppercase, 11px/600, `--text-2`, letter-spacing .4px, sağında xətt): **Səhər** (08:00–12:00), **Günorta** (12:00–17:00), **Axşam** (17:00–24:00)
- `.slotgrid`: grid 4 sütun, gap 8px; addım **30 dəqiqə**
- `.slot`: hündürlük 44px, radius 12px, border 1px `--line`, 13.5px/600, tabular-nums
  - `.slot.on`: background `--primary`, ağ, shadow `0 6px 14px rgba(38,132,255,.28)`
  - `.slot.dis` (dolu): background `--pill`, `--text-3`, üstüxətli
- Seç-sonra-təsdiqlə (Ləğv et / Təsdiqlə)

### 2.3 Qonaq sayı sheet-i (iki görünüş)
**Görünüş A — şablon:**
- Başlıq "Qonaq sayı"
- `.qtpl`: grid **5 sütun**, gap 8px — 1..10 çiplər
- `.qt`: hündürlük 60px, radius 14px, border 1px `--line`, flex column
  - `.qn` (rəqəm): 19px/500
  - `.ql` (label "qonaq"): 9px/500, `--text-3`
  - `.qt.on`: background `--primary`, ağ
- `.qt.other` ("Digər →"): tam en, hündürlük 48px, 14px/500 — manual görünüşə keçir
- Alt düymələr: Ləğv et / Təsdiqlə

**Görünüş B — manual (iOS klaviaturası):**
- `.sheet-hd`: flex space-between, sticky; solda geri düyməsi `.hdbk` (30×30), mərkəzdə "Say yazın"
- `.gmanual`: mərkəz; `.gnum` (böyük rəqəm) 38px/500, altında `.gml` "qonaq" 13px
- `.ioskb` (iOS nömrə klaviaturası): margin ilə tam en, background `#d3d6db`
  - `.kbtop`: chevron yuxarı/aşağı + sağda "Done" (`--primary`, 17px/600)
  - `.kbgrid`: grid 3 sütun, gap 6px; `.kbkey` 46px ağ düymələr, rəqəm 23px + hərflər (ABC…) 9px; sonuncu sırada boş / 0 / silmə (⌫)
  - Rəqəmə basdıqca say yığılır (max 99), Done yadda saxlayır

### 2.4 Zal dropdown (`.hallwrap` + `.dropdn`)
- Sahə düyməsinin altında açılan menyu (bottom-sheet DEYİL)
- `.dropdn`: absolute, left/right 8px, top calc(100%-4px), background #fff, border 1px `--line`, radius 14px, shadow `0 12px 30px rgba(16,24,40,.14)`, padding 6px, z-index 15
- `.dopt`: flex, gap 10px, padding 11px 10px, radius 10px; hover → `--soft`; `.on` → `--primary-50`
  - `.dt` (başlıq): 14px/600
  - `.ds` (alt): 11px, `--text-2`
  - `.dck` (check): sağda, seçilidə görünür
  - **İkon yoxdur** (açılan menyuda)
- Variantlar: **İstənilən zal** (Ən tez boşalan yerə oturdulacaq), **Zal** (İç məkan · isti), **Teras** (Açıq hava · siqaret icazəli), **Kabinet** (Ayrıca otaq)
- Açıq halda sahənin chevron-u 90° fırlanır
- Kənara klik menyunu bağlayır

---

## 3. Ekran: REZERVASIYALAR — siyahı (`rezervasiyalarim.html`)

### 3.1 Nav bar
- Geri düyməsi (chevron-left) + başlıq **"Rezervasiyalar"** (mərkəz, 17px/600)

### 3.2 Body
- `.body`: flex column, gap 12px, padding 14px 16px 16px, background `#F8FAFB`

### 3.3 Rezervasiya kartı (`.card`) — MİNİMAL
- `.card`: background #fff, border 1px `--line`, radius 16px, `flex-shrink:0`, cursor pointer; `:active` → border `--primary`
- `.top`: flex, align center, gap 10px, padding 14px 14px 12px
  - Tarix bloku `.dctl`: 44×44px, radius 12px, background `--soft`, flex column mərkəz
    - `.d` (gün): 17px/700
    - `.mo` (ay qısaltması): 9px/600, uppercase, `--primary-700`
  - Mətn `.ti`: flex 1
    - `.t` (başlıq): 15px/**500**, letter-spacing -.3px — "19:30 · 4 qonaq"
    - `.s` (alt): 12px, `--text-2` — zal adı (və ya "Zal fərqi yoxdur")
  - Status badge `.badge`: flex, gap 5px, padding 4px 9px, radius 999px, 11px/600, border 1px
    - `.dot`: 6×6px dairə
- **Ox (chevron) yoxdur.** Kart bütövlükdə klikləniir → `rezervasiya-detay.html?id=...`

### 3.4 Status badge rəngləri
| Status | Label | Fon | Mətn | Border | Dot |
|---|---|---|---|---|---|
| `pending` | Gözləyir | `#fff5e0` | `#b7791f` | `#fde3a9` | `--warn` |
| `confirmed` | Qəbul edildi | `#e8f7ee` | `--ok` | `#bbe5c8` | `--ok` |
| `cancelled` | Ləğv edildi | `#fdecef` | `--danger` | `#f8c9d3` | `--danger` |

### 3.5 Footer
- `.foot`: padding 12px 16px calc(20px+safe-area), üst sərhəd 1px `--line`
- `.cta` ("+ Rezervasiya yarat"): width 100%, hündürlük 56px, radius 12px, background `--primary`, ağ 16px/600, plus-ikon + mətn; klik → `reservation.html`

---

## 4. Ekran: REZERVASIYA DETAYI (`rezervasiya-detay.html`)

### 4.1 Nav bar
- Geri düyməsi + başlıq **"Rezervasiya detayı"**

### 4.2 Body
- Section label `.seclbl`: 12px/600, `--text-2`, margin 2px 2px 8px

**Kart 1 — "Rezervasiya məlumatları"** (`.card`, radius 16px, sətirlər `.row` 1px `--line` ayırıcı ilə):
Sətir strukturu `.row`: flex, gap 13px, padding 14px; `.ic` 36×36px radius 10px `--soft` fon; `.rl` (label `.rk` 11px `--text-2` üstdə, dəyər `.rv` 15px/600 altda)
1. **Status** — `dot` ikonu (içi dolu dairə); dəyər əvəzinə kiçik badge (padding 3px 9px 3px 8px, margin-top 5px, label/dəyər altında)
2. **Tarix** — `cal` — "25 Dekabr 2026"
3. **Saat** — `clock` — "19:30"
4. **Qonaq sayı** — `users` (2+) — "4 nəfər"
5. **Zal** — `hall` — zal adı
6. **Rezervasiya kodu** — `tag` — "RES-K7M2QX"

**Kart 2 — "Əlaqə məlumatları"**:
1. **Ad, Soyad** — `user` ikonu — "Rahid Akhundzada"
2. **Telefon** — `phone` ikonu — "+994 50 535 57 57"
3. **E-poçt** — `mail` ikonu — "rahid@gmail.com"

**Qeyd bloku `.note`**: flex, gap 9px, background `--soft`, radius 12px, padding 12px 14px, 12px `--text-2`; solda `info` ikonu (dairə+i, 15px, `--primary`). Statusa uyğun mətn.

### 4.3 Footer (statusdan asılı)
- `pending`: **"Rezervasiyanı ləğv et"** (danger fill — background `--danger`, ağ mətn)
- `confirmed`: **"QR göstər"** (primary fill) düyməsi
- `cancelled`: footer gizli

### 4.4 Ləğv təsdiq bottom-sheet-i (`.csheet`)
- Scrim + aşağıdan sürüşən sheet
- Yuxarıda xəbərdarlıq ikonu `.cwarn`: 52×52px dairə, background `#fdecef`, `--danger` üçbucaq-nida ikonu
- Başlıq "Rezervasiyanı ləğv et" (17px/700), izahat mətni (13px, `--text-2`)
- İki düymə: **Rezervasiyanı ləğv et** (danger fill) + **İmtina** (`--pill` fon)

---

## 5. Axın (naviqasiya)

```
reservation.html  ──(Rezervasiya et)──▶  rezervasiyalarim.html
        ▲                                            │
        │ (+ Rezervasiya yarat)                       │ (karta klik)
        └────────────────────────────────────────────┤
                                                      ▼
                                          rezervasiya-detay.html
                                          (Ləğv et → təsdiq sheet)
```

**Status həyat dövrü (Clopos Reservation API):** `pending → confirmed → (seated → completed)` və ya `→ cancelled`. Bu prototipdə yalnız **pending / confirmed / cancelled** göstərilir. Masa restoran qəbul edərkən təyin olunur — qonaq masa seçmir/görmür.

---

## 6. İkon kitabxanası (stroke SVG, viewBox 0 0 24 24, stroke-width 2 əsas)

| Ad | Təsvir |
|---|---|
| `back` / `chL` | chevron-left |
| `chev` / `chR` | chevron-right |
| `cal` | təqvim (rect + xətlər) |
| `clock` | saat (dairə + əqrəb) |
| `users` | 2+ nəfər |
| `hall` | masa-stul (fill) |
| `del` | klaviatura silmə (⌫) |
| `check` | tik |
| `dot` | içi dolu dairə (status) |
| `info` | dairə + i (qeyd) |
| `user` / `phone` / `mail` | əlaqə sahələri |
| `tag` | etiket (rezervasiya kodu) |

Bayraq: `assets/flag-az.svg` (Azərbaycan bayrağı, telefon inputunda istifadə olunur).