auto-sync: 2026-05-05 01:50:01

2026-05-05 01:50:01 +03:00
parent ae1dabf03f
commit 9eee1ab2e0
1 changed files with 526 additions and 0 deletions
--- a/tasks/enduro-trails/BRD_PHASE5.md
+++ b/tasks/enduro-trails/BRD_PHASE5.md
@@ -0,0 +1,526 @@
+# BRD: Enduro Trails — Фаза 5 «Редизайн»
+
+**Версия:** 1.0  
+**Дата:** 2026-05-04  
+**Автор:** Стрим 🌊  
+**Статус:** На согласовании
+
+---
+
+## 1. Контекст и проблема
+
+Текущий UI — функциональный прототип, не готовый к реальному использованию. Основные боли:
+
+- **Не мобильный** — панели перекрывают карту, мелкие кнопки, тяжело нажимать в перчатках
+- **Нет стиля** — белый фон, emoji-иконки, выглядит как dev-прототип
+- **Всё поверх карты** — карта не видна когда работают панели
+- **Нет режима вождения** — на мотоцикле невозможно пользоваться
+
+## 2. Цель
+
+Создать мобильный UI уровня onX Offroad / Locus Map — тёмный, эндуро-стильный, thumb-friendly. Карта — главный герой. UI — минималистичный HUD.
+
+## 3. Дизайн-система
+
+### 3.1 Цветовая палитра
+
+```
+Фон приложения:   #0D1117  (почти чёрный, как грязь ночью)
+Поверхности:      #161B22  (тёмно-серый)
+Поверхности 2:    #21262D  (чуть светлее)
+Акцент (оранж):   #FF6B00  (цвет эндуро-резины, огня)
+Акцент hover:     #FF8C2A
+Золото (Lev1-2):  #FFD700
+Красный (Lev3-5): #FF3B1F
+Текст primary:    #E6EDF3
+Текст secondary:  #8B949E
+Текст muted:      #484F58
+Успех:            #2EA043
+Граница:          #30363D
+```
+
+### 3.2 Типографика
+
+```
+Font: system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif
+Заголовок:    16px, 700, #E6EDF3
+Подзаголовок: 13px, 600, #8B949E, uppercase, letter-spacing: 0.08em
+Текст:        14px, 400, #E6EDF3
+Мелкий:       12px, 400, #8B949E
+Цифры:        font-variant-numeric: tabular-nums
+```
+
+### 3.3 Иконки
+
+**НЕ emoji!** SVG-иконки через inline SVG или icon font.  
+Источник: **Lucide Icons** (MIT, 24px stroke, line-cap: round).
+
+Ключевые иконки:
+- 🗺 Route: `map` (lucide)
+- 📍 Recon: `search` или `radar`
+- 🔗 Link: `git-merge`
+- 🎨 Scenic: `sparkles`
+- 📏 Ruler: `ruler`
+- 📌 Marker: `map-pin`
+- 🎯 Locate: `navigation`
+- 🧭 Compass: `compass`
+- ⬇ Download/GPX: `download`
+- ✕ Close: `x`
+- ➕ Add: `plus`
+- 🔥 Difficulty: `flame`
+- 💧 Water: `droplets`
+- 👁 View: `eye`
+
+### 3.4 Компоненты
+
+#### Кнопка карты (FAB style)
+```css
+.map-btn {
+  width: 48px; height: 48px;
+  background: #161B22;
+  border: 1px solid #30363D;
+  border-radius: 12px;
+  color: #E6EDF3;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+  transition: all 0.15s;
+  -webkit-tap-highlight-color: transparent;
+}
+.map-btn:active { background: #21262D; transform: scale(0.94); }
+.map-btn.active { background: #FF6B00; color: #fff; border-color: #FF6B00; }
+```
+
+#### Bottom Sheet (панели)
+```css
+.bottom-sheet {
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: #161B22;
+  border-radius: 20px 20px 0 0;
+  border-top: 1px solid #30363D;
+  padding: 0 16px 32px;  /* 32px = safe area снизу */
+  z-index: 100;
+  max-height: 75vh;
+  overflow-y: auto;
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1);
+}
+.bottom-sheet.open { transform: translateY(0); }
+
+/* Drag handle */
+.sheet-handle {
+  width: 36px; height: 4px;
+  background: #30363D;
+  border-radius: 2px;
+  margin: 12px auto 16px;
+}
+```
+
+#### Карточка маршрута
+```css
+.route-card {
+  background: #21262D;
+  border: 1.5px solid #30363D;
+  border-radius: 12px;
+  padding: 12px 14px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.route-card.active {
+  border-color: #FF6B00;
+  box-shadow: 0 0 0 1px #FF6B00;
+}
+```
+
+#### Stat pill (статистика)
+```css
+.stat-pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  background: #0D1117;
+  border: 1px solid #30363D;
+  border-radius: 20px;
+  padding: 3px 10px;
+  font-size: 12px; font-weight: 600;
+  color: #E6EDF3;
+}
+.stat-pill.dirt { border-color: #FFD700; color: #FFD700; }
+.stat-pill.asphalt { border-color: #8B949E; color: #8B949E; }
+```
+
+## 4. Layout — Mobile First
+
+### Основной экран
+```
+┌─────────────────────────────────┐
+│ [🔍 Поиск...........]  [☰]     │  ← search bar, 44px, top: safe
+│                                 │
+│                                 │
+│           КАРТА                 │  ← 100% экрана
+│                                 │
+│                          [🧭]   │
+│                          [🎯]   │  ← кнопки справа, 48×48
+│ ────────────────────────────────│
+│ [🗺][🔗][🎨][📍][📏][📌]       │  ← bottom toolbar, 64px
+└─────────────────────────────────┘
+```
+
+**Bottom toolbar**: 6 режимов, иконки 24px, tap target 48px minimum.  
+Активный режим — оранжевый фон + label появляется под иконкой.
+
+### При активном режиме (пример: Маршрут)
+```
+┌─────────────────────────────────┐
+│ [🔍 Поиск...]          [☰]     │
+│                                 │
+│           КАРТА                 │
+│                                 │
+│                          [🧭]   │
+│                          [🎯]   │
+├─────────────────────────────────┤
+│ ▬▬▬ drag handle ▬▬▬            │  ← Bottom Sheet
+│ 🗺 МАРШРУТ              [✕]    │
+│ ─────────────────────────────── │
+│ [A: Хоруговино   ] [B: ...]    │  ← точки (горизонтально)
+│ [+ Точка]  [Сбросить]  [GPX⬇] │
+│                                 │
+│ Строю маршрут...                │
+│ ┌───────────────────────────┐   │
+│ │● Вариант 1  1013 км  14ч  │   │
+│ │  ████████░░  97% грунт    │   │
+│ └───────────────────────────┘   │
+└─────────────────────────────────┘
+```
+
+## 5. Компоненты — детальный дизайн
+
+### 5.1 Toolbar (нижняя панель)
+
+```html
+<nav id="toolbar">
+  <button class="tb-btn active" data-mode="route" onclick="toggleRouteMode()">
+    <svg><!-- map icon --></svg>
+    <span>Маршрут</span>
+  </button>
+  <button class="tb-btn" data-mode="link" onclick="toggleLinkMode()">
+    <svg><!-- git-merge --></svg>
+    <span>Связка</span>
+  </button>
+  <button class="tb-btn" data-mode="scenic" onclick="toggleScenicMode()">
+    <svg><!-- sparkles --></svg>
+    <span>Красивый</span>
+  </button>
+  <button class="tb-btn" data-mode="recon" onclick="toggleReconMode()">
+    <svg><!-- radar --></svg>
+    <span>Разведка</span>
+  </button>
+  <button class="tb-btn" data-mode="ruler" onclick="toggleRuler()">
+    <svg><!-- ruler --></svg>
+    <span>Линейка</span>
+  </button>
+  <button class="tb-btn" data-mode="marker" onclick="toggleMarkerMode()">
+    <svg><!-- map-pin --></svg>
+    <span>Метка</span>
+  </button>
+</nav>
+```
+
+```css
+#toolbar {
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  height: 72px;
+  background: #161B22;
+  border-top: 1px solid #30363D;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 4px;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  z-index: 200;
+}
+.tb-btn {
+  flex: 1;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 3px;
+  height: 56px;
+  border: none; background: none;
+  color: #8B949E;
+  font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+  -webkit-tap-highlight-color: transparent;
+}
+.tb-btn svg { width: 22px; height: 22px; stroke-width: 1.8; }
+.tb-btn.active { color: #FF6B00; }
+.tb-btn.active svg { stroke: #FF6B00; }
+```
+
+### 5.2 Bottom Sheet — Маршрут
+
+Заменяет существующий `#route-panel`.
+
+**Секция точек (горизонтальный scroll если много):**
+```html
+<div class="waypoints-row">
+  <div class="wp-chip wp-start">
+    <div class="wp-dot" style="background:#2EA043"></div>
+    <span class="wp-label">Хоруговино</span>
+  </div>
+  <div class="wp-arrow">›</div>
+  <div class="wp-chip wp-end">
+    <div class="wp-dot" style="background:#FF3B1F"></div>
+    <span class="wp-label">Корак-Чурачки</span>
+  </div>
+</div>
+```
+
+**Карточка маршрута:**
+```html
+<div class="route-card active">
+  <div class="rc-header">
+    <span class="rc-dot" style="background:#0066ff"></span>
+    <span class="rc-title">Основной</span>
+    <span class="rc-km">1013 км</span>
+    <span class="rc-time">14ч 22м</span>
+  </div>
+  <div class="rc-bar">
+    <div class="rc-bar-dirt" style="width:97%"></div>
+    <div class="rc-bar-asphalt" style="width:3%"></div>
+  </div>
+  <div class="rc-stats">
+    <span class="stat-pill dirt">🟡 97% грунт</span>
+    <span class="stat-pill asphalt">⬜ 3% асфальт</span>
+  </div>
+</div>
+```
+
+### 5.3 Bottom Sheet — Разведка
+
+При нажатии открывается sheet с радиус-контролом. После клика на карте — обновляется.
+
+```html
+<div class="bottom-sheet" id="sheet-recon">
+  <div class="sheet-handle"></div>
+  <div class="sheet-header">
+    <svg><!-- radar icon --></svg>
+    <h2>Разведка</h2>
+    <button class="sheet-close" onclick="toggleReconMode()">✕</button>
+  </div>
+  
+  <p class="sheet-hint">Тапни точку на карте — узнаешь сколько грунтовок рядом</p>
+  
+  <div class="radius-selector">
+    <button class="radius-btn active" onclick="setReconRadius(20)">20 км</button>
+    <button class="radius-btn" onclick="setReconRadius(50)">50 км</button>
+    <button class="radius-btn" onclick="setReconRadius(100)">100 км</button>
+  </div>
+  
+  <div id="recon-results" style="display:none">
+    <div class="recon-section">
+      <div class="section-label">ГРУНТОВКИ</div>
+      <div class="recon-grid">
+        <div class="recon-stat">
+          <div class="rs-value" id="r-total-km">—</div>
+          <div class="rs-label">км всего</div>
+        </div>
+        <div class="recon-stat">
+          <div class="rs-value rs-gold" id="r-lev12-km">—</div>
+          <div class="rs-label">км Lev1-2</div>
+        </div>
+        <div class="recon-stat">
+          <div class="rs-value rs-red" id="r-lev345-km">—</div>
+          <div class="rs-label">км Lev3-5</div>
+        </div>
+        <div class="recon-stat">
+          <div class="rs-value" id="r-path-km">—</div>
+          <div class="rs-label">км тропы</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="recon-section">
+      <div class="section-label">POI В РАДИУСЕ</div>
+      <div class="poi-list" id="r-poi-list"></div>
+    </div>
+  </div>
+</div>
+```
+
+### 5.4 Bottom Sheet — Красивый маршрут
+
+```html
+<div class="bottom-sheet" id="sheet-scenic">
+  <div class="sheet-handle"></div>
+  <div class="sheet-header">
+    <svg><!-- sparkles --></svg>
+    <h2>Красивый маршрут</h2>
+    <button class="sheet-close" onclick="toggleScenicMode()">✕</button>
+  </div>
+  
+  <div id="scenic-start-prompt">
+    <p class="sheet-hint">Тапни точку старта на карте</p>
+  </div>
+  
+  <div id="scenic-config" style="display:none">
+    <div class="section-label">ДИСТАНЦИЯ</div>
+    <div class="dist-row">
+      <button class="dist-btn" data-km="50">50</button>
+      <button class="dist-btn active" data-km="100">100</button>
+      <button class="dist-btn" data-km="150">150</button>
+      <button class="dist-btn" data-km="200">200</button>
+      <input type="number" id="dist-custom" placeholder="км" min="20" max="500">
+    </div>
+    
+    <button class="btn-primary" onclick="buildScenicRoute()">
+      <svg><!-- sparkles --></svg>
+      Построить маршрут
+    </button>
+  </div>
+  
+  <div id="scenic-cards"></div>
+</div>
+```
+
+### 5.5 Кнопки карты (правый столбец)
+
+```html
+<div id="map-controls-r">
+  <button class="map-btn" title="Компас" id="btn-compass" onclick="toggleCompass()">
+    <svg><!-- compass --></svg>
+  </button>
+  <button class="map-btn" title="Моё местоположение" onclick="locateMe()">
+    <svg><!-- navigation --></svg>
+  </button>
+</div>
+```
+
+### 5.6 Search Bar (верхняя строка)
+
+```html
+<div id="search-bar">
+  <svg><!-- search icon --></svg>
+  <input type="text" id="search-input" placeholder="Поиск места..." autocomplete="off">
+  <button id="btn-menu" onclick="toggleMenu()">
+    <svg><!-- menu --></svg>
+  </button>
+</div>
+```
+
+```css
+#search-bar {
+  position: fixed;
+  top: env(safe-area-inset-top, 12px);
+  left: 12px; right: 12px;
+  height: 48px;
+  background: #161B22;
+  border: 1px solid #30363D;
+  border-radius: 14px;
+  display: flex; align-items: center;
+  padding: 0 14px;
+  gap: 10px;
+  z-index: 200;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+}
+#search-input {
+  flex: 1;
+  background: none; border: none;
+  color: #E6EDF3; font-size: 15px;
+  outline: none;
+}
+#search-input::placeholder { color: #484F58; }
+```
+
+## 6. Анимации и микроинтерактивность
+
+- **Bottom sheet**: `transform: translateY` + `cubic-bezier(0.32, 0, 0.15, 1)`, 280ms
+- **Кнопки**: `transform: scale(0.94)` при tap (active state), 100ms
+- **Карточки маршрутов**: `border-color` transition 150ms
+- **Loading**: пульсирующий skeleton (opacity animation) вместо spinner
+- **Маркеры на карте**: появление через `transform: scale(0) → scale(1)`, 200ms
+
+## 7. Адаптив
+
+- **Мобила (< 768px)**: bottom sheet, toolbar снизу
+- **Десктоп (≥ 768px)**: боковая панель 320px слева, кнопки сохраняются
+- **Landscape мобила**: toolbar справа вертикально, sheet с max-height: 80vh
+
+## 8. Тест-кейсы
+
+### P0 — Критично (должно работать идеально)
+
+| ID | Сценарий | Устройство | Шаги | Ожидаемый результат |
+|----|----------|-----------|------|---------------------|
+| T01 | Открытие приложения | iPhone SE (375px) | Открыть URL | Карта 100% экрана, toolbar снизу виден, search bar сверху |
+| T02 | Нажать режим Маршрут | iPhone | Тап на иконку 🗺 | Bottom sheet выезжает снизу, иконка оранжевая |
+| T03 | Установить A и B точки | iPhone | Тап A, тап B | Маркеры на карте, карта НЕ перекрыта |
+| T04 | Маршрут построен | iPhone | После T03 | Карточки маршрутов в sheet, карта видна |
+| T05 | Тап по карточке | iPhone | Тап на вариант 2 | Маршрут 2 активен (оранжевый), карточка выделена |
+| T06 | Закрыть sheet | iPhone | Тап ✕ или свайп вниз | Sheet уходит, toolbar возвращается, карта чистая |
+| T07 | Разведка — тап на карту | iPhone | Включить Разведку, тапнуть | Круг на карте, sheet со статистикой |
+| T08 | Переключение радиуса | iPhone | В sheet Разведки нажать 50км | Круг обновился, статистика пересчиталась |
+| T09 | Красивый маршрут | iPhone | Включить, тапнуть, нажать «Построить» | Кольцевой маршрут на карте, карточки в sheet |
+| T10 | Связка | iPhone | Включить, тапнуть 2 точки | Маршрут между точками, карточки |
+| T11 | Поиск места | iPhone | Тапнуть search bar, ввести «Тверь» | Результаты поиска, тап → карта летит |
+| T12 | GPX скачать | iPhone | Построить маршрут → Download | Файл скачался |
+
+### P1 — Важно
+
+| ID | Сценарий | Устройство | Шаги | Ожидаемый результат |
+|----|----------|-----------|------|---------------------|
+| T13 | Тёмная тема | Любое | Открыть | Фон #0D1117, текст светлый, нет белых вспышек |
+| T14 | Толстые пальцы в перчатках | iPhone | Нажимать кнопки | Все кнопки min 48×48px, не промахиваешься |
+| T15 | Landscape поворот | iPhone | Повернуть телефон | UI перестроился, карта видна |
+| T16 | Десктоп Chrome | MacBook | Открыть | Боковая панель 320px, кнопки слева |
+| T17 | Свайп вниз для закрытия | iPhone | Свайп вниз по handle | Sheet закрывается |
+| T18 | Два режима не активны одновременно | iPhone | Открыть Маршрут, потом Разведку | Маршрут закрылся, Разведка открылась |
+| T19 | Геолокация | iPhone | Нажать 🎯 | Запрос разрешения, потом маркер на карте |
+| T20 | Компас | iPhone | Нажать 🧭 | Карта вращается, кнопка активна |
+| T21 | Метка — добавить | iPhone | Включить 📌, тапнуть | Диалог выбора типа метки (popup) |
+| T22 | Метка — иконка на карте | iPhone | После T21 | Метка видна, тап открывает popup с опциями |
+| T23 | Линейка | iPhone | Включить 📏, тапнуть несколько точек | Линия + дистанция |
+| T24 | Анимация sheet | iPhone | Открыть/закрыть | Плавная, 280ms, без дёрганий |
+| T25 | Skeleton loading | iPhone | Построить длинный маршрут | Skeleton в карточках пока грузится |
+| T26 | Ошибка маршрута | iPhone | Поставить точки в море | Понятное сообщение об ошибке в sheet |
+
+### P2 — Nice to have
+
+| ID | Сценарий | Шаги | Ожидаемый результат |
+|----|----------|------|---------------------|
+| T27 | Safari iOS | Открыть | Safe area работает, нет обрезания снизу |
+| T28 | Медленный интернет | Throttle 3G | Skeleton, потом данные |
+| T29 | Очень длинное название места | Поставить точку у «деревня Нижние Бородавки» | Название обрезается с ellipsis |
+| T30 | 3 альтернативных маршрута | Построить маршрут | 3 карточки, можно переключать |
+| T31 | Scenic score визуализация | В карточке Красивого | Звёздочки или bar для scenic_score |
+| T32 | POI на маршруте в Красивом | В карточке | Иконки POI с названиями |
+| T33 | Кнопки режима вместе видны | На экране 375px | Все 6 иконок в toolbar без обрезания |
+| T34 | Статус бар iOS | iPhone | Нет перекрытия search bar статус-баром |
+
+## 9. Definition of Done
+
+- [ ] Все P0 тест-кейсы прошли на iPhone SE (375px)
+- [ ] Все P0 + P1 тест-кейсы прошли на iPhone 14 Pro (393px)
+- [ ] Bottom sheet плавно открывается/закрывается
+- [ ] Toolbar: все 6 режимов, min 48px tap target
+- [ ] Тёмная тема везде, нет белых фонов
+- [ ] SVG иконки (Lucide), никаких emoji в UI-элементах
+- [ ] Карта видна при активных панелях
+- [ ] Safe area корректная (notch, home indicator)
+- [ ] Десктоп: боковая панель, не ломается layout
+- [ ] GPX скачивание работает
+- [ ] Деплой + health check OK
+
+## 10. Технические ограничения
+
+- Менять бэкенд (app.py) нельзя — только фронт
+- MapLibre GL остаётся
+- Без новых npm-зависимостей (только inline CSS/JS)
+- Lucide иконки — подключить через CDN: `https://unpkg.com/lucide@latest`
+- Деплой через ssh2 (стандартная схема)
+
+---
+
+*Документ готов к согласованию.*