Обновил бэкенд под новые изменения на фронте

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/backed-old/

package-lock.json

@@ -1121,30 +1121,30 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "8.0.7",
+      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.1.1.tgz",
-      "integrity": "sha512-tc1TXAxclsn55JblLkFVcIRG7MeSJC4fWsPjfM7qu/IcmPUYnQ5Q8vzWwBpyDY24ZjmZTUCCwjRSNbx58IhlAA==",
+      "integrity": "sha512-bsDMJ07b3GN1puVwJb/fyFnj/U2imyswK5UQVLZwVl7O05jDrt6BHxeG5XffmOOdasOj/bOmIjxJvGPxU7pcqw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^8.0.7"
+        "@vue/devtools-kit": "^8.1.1"
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "8.0.7",
+      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.1.1.tgz",
-      "integrity": "sha512-H6esJGHGl5q0E9iV3m2EoBQHJ+V83WMW83A0/+Fn95eZ2iIvdsq4+UCS6yT/Fdd4cGZSchx/MdWDreM3WqMsDw==",
+      "integrity": "sha512-gVBaBv++i+adg4JpH71k9ppl4soyR7Y2McEqO5YNgv0BI1kMZ7BDX5gnwkZ5COYgiCyhejZG+yGNrBAjj6Coqg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^8.0.7",
+        "@vue/devtools-shared": "^8.1.1",
         "birpc": "^2.6.1",
         "hookable": "^5.5.3",
         "perfect-debounce": "^2.0.0"
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "8.0.7",
+      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.1.1.tgz",
-      "integrity": "sha512-CgAb9oJH5NUmbQRdYDj/1zMiaICYSLtm+B1kxcP72LBrifGAjUmt8bx52dDH1gWRPlQgxGPqpAMKavzVirAEhA==",
+      "integrity": "sha512-+h4ttmJYl/txpxHKaoZcaKpC+pvckgLzIDiSQlaQ7kKthKh8KuwoLW2D8hPJEnqKzXOvu15UHEoGyngAXCz0EQ==",
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
@@ -1420,9 +1420,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
+      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2712,10 +2712,10 @@
       }
     },
     "node_modules/minipass-flush": {
-      "version": "1.0.5",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.7.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "integrity": "sha512-TbqTz9cUwWyHS2Dy89P3ocAGUGxKjjLuR9z8w4WUTGAVgEj17/4nhgo2Du56i0Fm3Pm30g4iA8Lcqctc76jCzA==",
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "optional": true,
       "dependencies": {
         "minipass": "^3.0.0"
@@ -2782,15 +2782,15 @@
       "license": "MIT"
     },
     "node_modules/mlly": {
-      "version": "1.8.0",
+      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
-      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.15.0",
+        "acorn": "^8.16.0",
         "pathe": "^2.0.3",
         "pkg-types": "^1.3.1",
-        "ufo": "^1.6.1"
+        "ufo": "^1.6.3"
       }
     },
     "node_modules/mlly/node_modules/confbox": {
@@ -2886,9 +2886,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.87.0",
+      "version": "3.89.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.87.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.89.0.tgz",
-      "integrity": "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ==",
+      "integrity": "sha512-6u9UwL0HlAl21+agMN3YAMXcKByMqwGx+pq+P76vii5f7hTPtKDp08/H9py6DY+cfDw7kQNTGEj/rly3IgbNQA==",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.3.5"
@@ -3030,9 +3030,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.3.0",
+      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3953,6 +3953,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -4056,9 +4057,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "5.0.3",
+      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.4.tgz",
-      "integrity": "sha512-nG1c7aAFac7NYj8Hluo68WyWfc41xkEjaR0ViLHCa3oDvTQ/nIuLJlXJX1NUPw/DXzx/8+OKMng045HHQKQKWw==",
+      "integrity": "sha512-lCqDLCI2+fKVRl2OzXuzdSWmxXFLQRxQbmHugnRpTMyYiT+hNaycV0faqG5FBHDXoYrZ6MQcX87BvbY8mQ20Bg==",
       "license": "MIT",
       "dependencies": {
         "@babel/generator": "^7.28.6",
@@ -4163,9 +4164,9 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.8.2",
+      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
-      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"

report.html

@@ -1,265 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-  <meta charset="UTF-8">
-  <title>Отчёт об изменениях — проект Buhuchet</title>
-  <style>
-    body {
-      font-family: 'Times New Roman', Times, serif;
-      font-size: 14pt;
-      margin: 2.5cm 3cm;
-      color: #000;
-      line-height: 1.5;
-    }
-    h1 {
-      font-size: 18pt;
-      text-align: center;
-      margin-bottom: 6pt;
-    }
-    h2 {
-      font-size: 14pt;
-      margin-top: 18pt;
-      margin-bottom: 4pt;
-      border-bottom: 1px solid #555;
-      padding-bottom: 2pt;
-    }
-    h3 {
-      font-size: 13pt;
-      margin-top: 12pt;
-      margin-bottom: 2pt;
-    }
-    .subtitle {
-      text-align: center;
-      color: #444;
-      margin-bottom: 20pt;
-    }
-    .meta {
-      text-align: center;
-      font-size: 11pt;
-      color: #666;
-      margin-bottom: 30pt;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: 8pt 0 16pt;
-      font-size: 12pt;
-    }
-    th {
-      background: #f0f0f0;
-      border: 1px solid #999;
-      padding: 6pt 8pt;
-      text-align: left;
-    }
-    td {
-      border: 1px solid #ccc;
-      padding: 5pt 8pt;
-      vertical-align: top;
-    }
-    tr:nth-child(even) td { background: #fafafa; }
-    code {
-      font-family: 'Courier New', monospace;
-      font-size: 11pt;
-      background: #f4f4f4;
-      padding: 1pt 4pt;
-      border-radius: 2pt;
-    }
-    .new-file { color: #1a7a1a; font-weight: bold; }
-    .mod-file { color: #7a4a00; font-weight: bold; }
-    ul { margin: 4pt 0 8pt 20pt; }
-    li { margin-bottom: 3pt; }
-    .section-num {
-      font-weight: bold;
-      margin-right: 6pt;
-    }
-    hr { border: none; border-top: 1px solid #ddd; margin: 20pt 0; }
-  </style>
-</head>
-<body>
-
-<h1>Отчёт об изменениях проекта</h1>
-<p class="subtitle">Проект: <strong>Buhuchet</strong> — лендинг услуг удалённого бухгалтера</p>
-<p class="meta">Дата: 02.03.2026 &nbsp;|&nbsp; Ветка: back_alpha</p>
-
-<hr>
-
-<h2>1. Общая сводка изменений</h2>
-<p>В ходе двух итераций разработки в проект были внесены следующие изменения:</p>
-<ul>
-  <li>Добавлен веб-сервер на Express.js с поддержкой SPA и API</li>
-  <li>Внедрён клиентский роутинг (Vue Router) с двумя страницами</li>
-  <li>Создана страница-заглушка для оформления заказа</li>
-  <li>Добавлена база данных SQLite с таблицей регионов</li>
-  <li>Данные в селекторе городов теперь загружаются из БД через API</li>
-</ul>
-
-<hr>
-
-<h2>2. Итерация 1 — Express сервер и страница-заглушка</h2>
-
-<h3>2.1 Установленные зависимости</h3>
-<table>
-  <tr><th>Пакет</th><th>Версия</th><th>Назначение</th></tr>
-  <tr><td><code>express</code></td><td>^5.2.1</td><td>Веб-сервер</td></tr>
-  <tr><td><code>vue-router</code></td><td>^5.0.3</td><td>Клиентский роутинг SPA</td></tr>
-</table>
-
-<h3>2.2 Новые файлы</h3>
-<table>
-  <tr><th>Файл</th><th>Тип</th><th>Описание</th></tr>
-  <tr>
-    <td><code>server.js</code></td>
-    <td><span class="new-file">Новый</span></td>
-    <td>Express-сервер, порт 3000. Отдаёт статику из <code>dist/</code>, SPA-fallback на <code>index.html</code> для всех неизвестных маршрутов.</td>
-  </tr>
-  <tr>
-    <td><code>src/router/index.js</code></td>
-    <td><span class="new-file">Новый</span></td>
-    <td>Конфигурация Vue Router: маршрут <code>/</code> → HomePage, <code>/order</code> → OrderPage.</td>
-  </tr>
-  <tr>
-    <td><code>src/pages/HomePage.vue</code></td>
-    <td><span class="new-file">Новый</span></td>
-    <td>Главная страница, содержимое перенесено из <code>App.vue</code>.</td>
-  </tr>
-  <tr>
-    <td><code>src/pages/OrderPage.vue</code></td>
-    <td><span class="new-file">Новый</span></td>
-    <td>Страница-заглушка оформления заявки. Отображает название выбранного тарифа (из query-параметра <code>?tariff=</code>), кнопку «Вернуться назад».</td>
-  </tr>
-</table>
-
-<h3>2.3 Изменённые файлы</h3>
-<table>
-  <tr><th>Файл</th><th>Тип</th><th>Изменение</th></tr>
-  <tr>
-    <td><code>src/main.js</code></td>
-    <td><span class="mod-file">Изменён</span></td>
-    <td>Импорт и подключение <code>vue-router</code>: <code>app.use(router)</code>.</td>
-  </tr>
-  <tr>
-    <td><code>src/App.vue</code></td>
-    <td><span class="mod-file">Изменён</span></td>
-    <td>Весь контент перенесён в <code>HomePage.vue</code>. Осталось только <code>&lt;router-view /&gt;</code> как точка монтирования роутера.</td>
-  </tr>
-  <tr>
-    <td><code>src/components/TariffCards.vue</code></td>
-    <td><span class="mod-file">Изменён</span></td>
-    <td>Кнопка «Выбрать» теперь вызывает <code>selectTariff(tariff)</code>, которая выполняет навигацию: <code>router.push({ path: '/order', query: { tariff: tariff.title } })</code>.</td>
-  </tr>
-  <tr>
-    <td><code>package.json</code></td>
-    <td><span class="mod-file">Изменён</span></td>
-    <td>Добавлен скрипт <code>"start": "node server.js"</code> для запуска Express.</td>
-  </tr>
-</table>
-
-<hr>
-
-<h2>3. Итерация 2 — База данных SQLite и динамический селектор регионов</h2>
-
-<h3>3.1 Установленные зависимости</h3>
-<table>
-  <tr><th>Пакет</th><th>Версия</th><th>Назначение</th></tr>
-  <tr><td><code>sqlite3</code></td><td>^5.1.7</td><td>Работа с базой данных SQLite</td></tr>
-</table>
-
-<h3>3.2 База данных</h3>
-<p>Файл базы данных: <code>data.db</code> (создаётся автоматически при первом запуске сервера).</p>
-<table>
-  <tr><th>Объект БД</th><th>Тип</th><th>Описание</th></tr>
-  <tr>
-    <td><code>regions</code></td>
-    <td>Таблица</td>
-    <td>
-      Поля: <code>id</code> (INTEGER PK AUTOINCREMENT), <code>region_name</code> (TEXT).<br>
-      Начальные данные: <em>Москва, Санкт-Петербург, Казань</em>.
-    </td>
-  </tr>
-  <tr>
-    <td><code>region_list</code></td>
-    <td>VIEW (представление)</td>
-    <td>
-      <code>SELECT id, region_name FROM regions ORDER BY id</code>.<br>
-      Используется функцией <code>getRegions()</code> для абстракции доступа к данным.
-    </td>
-  </tr>
-</table>
-
-<h3>3.3 Новые файлы</h3>
-<table>
-  <tr><th>Файл</th><th>Тип</th><th>Описание</th></tr>
-  <tr>
-    <td><code>db/database.js</code></td>
-    <td><span class="new-file">Новый</span></td>
-    <td>
-      Модуль работы с БД. Экспортирует:
-      <ul>
-        <li><code>initializeDatabase()</code> — создаёт таблицу, VIEW и заполняет начальными данными при первом запуске;</li>
-        <li><code>getRegions()</code> — функция получения регионов через представление <code>region_list</code> (не прямой запрос к таблице).</li>
-      </ul>
-    </td>
-  </tr>
-</table>
-
-<h3>3.4 Изменённые файлы</h3>
-<table>
-  <tr><th>Файл</th><th>Тип</th><th>Изменение</th></tr>
-  <tr>
-    <td><code>server.js</code></td>
-    <td><span class="mod-file">Изменён</span></td>
-    <td>
-      Добавлены:
-      <ul>
-        <li>Импорт <code>initializeDatabase</code> и <code>getRegions</code> из <code>./db/database.js</code>;</li>
-        <li>Маршрут <code>GET /api/regions</code> — возвращает JSON-массив регионов из БД;</li>
-        <li>Запуск сервера теперь происходит после успешной инициализации БД.</li>
-      </ul>
-    </td>
-  </tr>
-  <tr>
-    <td><code>src/components/SiteHeader.vue</code></td>
-    <td><span class="mod-file">Изменён</span></td>
-    <td>
-      Добавлены:
-      <ul>
-        <li>Секция <code>&lt;script setup&gt;</code> с <code>ref</code> и <code>onMounted</code>;</li>
-        <li>Запрос к <code>/api/regions</code> при монтировании компонента;</li>
-        <li>Динамический рендеринг опций через <code>v-for</code>, <code>v-model</code>;</li>
-        <li>Состояние загрузки («Загрузка...») до получения данных с сервера.</li>
-      </ul>
-      Удалены захардкоженные <code>&lt;option&gt;</code> (Москва, Санкт-Петербург, Казань).
-    </td>
-  </tr>
-</table>
-
-<hr>
-
-<h2>4. Архитектура потока данных</h2>
-<p style="font-family: 'Courier New', monospace; font-size: 11pt; background: #f4f4f4; padding: 10pt; border-left: 3px solid #999;">
-  data.db (SQLite)<br>
-  &nbsp;&nbsp;└── таблица <em>regions</em><br>
-  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── VIEW <em>region_list</em><br>
-  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── db/database.js :: getRegions()<br>
-  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── server.js :: GET /api/regions<br>
-  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── SiteHeader.vue :: fetch('/api/regions') → &lt;select&gt;
-</p>
-
-<hr>
-
-<h2>5. Запуск проекта</h2>
-<table>
-  <tr><th>Режим</th><th>Команда</th><th>Описание</th></tr>
-  <tr><td>Разработка (Vite)</td><td><code>npm run dev</code></td><td>Hot reload, порт 5173. API запросы к /api/* не проксируются — нужен отдельный запуск сервера или настройка прокси в vite.config.js</td></tr>
-  <tr><td>Сборка</td><td><code>npm run build</code></td><td>Собирает проект в папку <code>dist/</code></td></tr>
-  <tr><td>Продакшн (Express)</td><td><code>npm start</code></td><td>Запускает Express на порту 3000. Требует предварительной сборки.</td></tr>
-</table>
-
-<hr>
-
-<p style="text-align:center; font-size: 11pt; color: #888; margin-top: 30pt;">
-  Отчёт подготовлен автоматически &mdash; Claude Sonnet 4.6 &mdash; 02.03.2026
-</p>
-
-</body>
-</html>

server.js

@@ -7,23 +7,35 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 const app = express()
 const PORT = 3000
 
-const db = new Database.Database(join(__dirname, 'data.db'))
+const db = new Database.Database(join(__dirname, 'Buh-nr'))
 
 app.use(express.static(join(__dirname, 'dist')))
 
-// получение списка регионов из БД
 app.get('/api/regions', (_req, res) => {
-  db.all('SELECT id, region_name FROM regions ORDER BY id', (err, rows) => {
+  db.all('SELECT id, name, slug FROM regions ORDER BY id', (err, rows) => {
     if (err) return res.status(500).json({ error: 'Ошибка получения регионов' })
     res.json(rows)
   })
 })
 
-// и что им не понравилось в *?
+app.get('/api/tariffs', (req, res) => {
+  const mode = req.query.mode || 'special'
+  const sql = `
+    SELECT t.id, t.title, t.description, p.price
+    FROM tariffs t
+    JOIN prices p      ON p.tariff_id   = t.id
+    JOIN tax_modes tm  ON tm.id         = p.tax_mode_id
+    WHERE tm.slug = ?
+    ORDER BY t.sort_order
+  `
+  db.all(sql, [mode], (err, rows) => {
+    if (err) return res.status(500).json({ error: 'Ошибка получения тарифов' })
+    res.json(rows)
+  })
+})
+
 app.get('/{*splat}', (_req, res) => {
   res.sendFile(join(__dirname, 'dist', 'index.html'))
 })
 
-app.listen(PORT, () => {
+app.listen(PORT, () => console.log(`Сервер запущен: http://localhost:${PORT}`))
-  console.log(`Сервер запущен: http://localhost:${PORT}`)
-})

src/App.vue

@@ -1,11 +1,46 @@
 <template>
+  <n-config-provider :theme-overrides="selectTheme">
+    <n-message-provider>
       <router-view />
+    </n-message-provider>
+  </n-config-provider>
 </template>
 
+<script setup>
+const selectTheme = {
+  common: {
+    primaryColor: "#ff4d00",
+    primaryColorHover: "#ff6a00",
+    primaryColorPressed: "#e63e00",
+    borderRadius: "10px"
+  },
+  Select: {
+    peers: {
+      InternalSelection: {
+        color: "rgba(255,255,255,0.45)",
+        textColor: "#000",
+        border: "1px solid rgba(255,255,255,0.35)",
+        borderHover: "1px solid rgba(255,255,255,0.6)"
+      }
+    }
+  }
+}
+</script>
+
 <style>
 body {
   margin: 0;
   font-family: Arial, sans-serif;
   color: #000;
 }
+
+.app {
+  background: linear-gradient(90deg, #ffd400, #ff0000);
+  min-height: 100vh;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 40px 60px 80px;
+}
 </style>

src/components/SiteHeader.vue

@@ -1,53 +1,98 @@
+<script setup>
+import { ref, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useMessage } from "naive-ui"
+
+const message = useMessage()
+const route   = useRoute()
+const router  = useRouter()
+
+const city  = ref(route.params.region || 'moscow')
+const cities = ref([])
+
+const phone    = "8 (800) 000-00-00"
+const phoneRaw = "88000000000"
+
+onMounted(async () => {
+  const res  = await fetch('/api/regions')
+  const data = await res.json()
+  cities.value = data.map(r => ({ label: r.name, value: r.slug }))
+})
+
+// синхронизируем селектор при навигации (кнопка «назад» и т.п.)
+watch(() => route.params.region, (val) => {
+  if (val && val !== city.value) city.value = val
+})
+
+// переходим на страницу выбранного региона
+watch(city, (val) => {
+  if (val !== route.params.region) router.push(`/${val}`)
+})
+
+function handlePhoneClick() {
+  const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
+    .test(navigator.userAgent)
+
+  if (isMobile) {
+    window.location.href = `tel:${phoneRaw}`
+  } else {
+    navigator.clipboard.writeText(phone)
+    message.success("Номер скопирован")
+  }
+}
+</script>
+
 <template>
   <header class="header">
     <div class="inner">
+
       <div class="col left">
         <div class="logo">LOGO</div>
       </div>
 
       <div class="col center">
         <div class="title">Удалённый бухгалтер</div>
-        <select class="city" v-model="selectedRegion">
+        <n-select
-          <option v-if="regions.length === 0" disabled value="">Загрузка...</option>
+          v-model:value="city"
-          <option
+          :options="cities"
-            v-for="region in regions"
+          size="small"
-            :key="region.id"
+          class="city"
-            :value="region.region_name"
+        />
-          >
-            {{ region.region_name }}
-          </option>
-        </select>
       </div>
 
       <div class="col right">
-        <div class="phone">8 (800) 000-00-00</div>
+        <div
+          class="phone"
+          @click="handlePhoneClick"
+          title="Нажмите чтобы скопировать"
+        >
+          {{ phone }}
         </div>
       </div>
+
+    </div>
   </header>
 </template>
 
-<script setup>
-import { ref, onMounted } from 'vue'
-
-const regions = ref([])
-const selectedRegion = ref('')
-
-onMounted(async () => {
-  try {
-    const res = await fetch('/api/regions')
-    regions.value = await res.json()
-    if (regions.value.length > 0) {
-      selectedRegion.value = regions.value[0].region_name
-    }
-  } catch (err) {
-    console.error('Не удалось загрузить регионы:', err)
-  }
-})
-</script>
-
 <style scoped>
+
 .header {
-  padding: 25px 0;
+  padding: 26px 0;
+  background: linear-gradient(120deg, #ffd000, #ff7a00, #ff2a00);
+  background-size: 300% 300%;
+  animation: gradientMove 10s ease infinite, headerAppear .7s ease;
+  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
+}
+
+@keyframes gradientMove {
+  0%   { background-position: 0%   50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0%   50%; }
+}
+
+@keyframes headerAppear {
+  from { opacity: 0; transform: translateY(-40px); }
+  to   { opacity: 1; transform: translateY(0);     }
 }
 
 .inner {
@@ -55,7 +100,7 @@ onMounted(async () => {
   margin: 0 auto;
   padding: 0 60px;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3,1fr);
   align-items: center;
 }
 
@@ -64,35 +109,58 @@ onMounted(async () => {
   align-items: center;
 }
 
-.left {
+.left  { justify-content: flex-start; }
-  justify-content: flex-start;
+.center { flex-direction: column; text-align: center; }
-}
+.right { justify-content: flex-end; }
-
-.center {
-  flex-direction: column;
-  text-align: center;
-}
-
-.right {
-  justify-content: flex-end;
-}
 
 .logo {
-  font-size: 22px;
+  font-size: 24px;
-  font-weight: bold;
+  font-weight: 800;
+  letter-spacing: 1px;
+  color: black;
+  transition: transform .25s ease;
 }
 
+.logo:hover { transform: scale(1.08); }
+
 .title {
-  font-size: 18px;
+  font-size: 20px;
-  font-weight: 600;
+  font-weight: 700;
+  color: black;
 }
 
-.city {
+.city { margin-top: 8px; width: 190px; }
-  margin-top: 6px;
-  padding: 6px 12px;
-}
 
 .phone {
-  font-weight: 600;
+  font-weight: 700;
+  font-size: 18px;
+  color: black;
+  padding: 7px 16px;
+  border-radius: 12px;
+  background: rgba(255,255,255,0.35);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.35);
+  cursor: pointer;
+  transition: all .25s ease;
 }
+
+.phone:hover {
+  background: rgba(255,255,255,0.6);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,.2);
+}
+
+@media (max-width: 900px) {
+  .inner {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 0 25px;
+    text-align: center;
+  }
+  .left, .right { justify-content: center; }
+  .logo  { font-size: 22px; }
+  .title { font-size: 18px; }
+  .phone { font-size: 16px; }
+}
+
 </style>

src/components/TariffCards.vue

@@ -31,7 +31,7 @@
           {{ tariff.price }} ₽
         </div>
 
-        <n-button type="primary" block @click="selectTariff(tariff)">
+        <n-button type="primary" block @click="selectTariff(tariff.title)">
           Выбрать
         </n-button>
       </n-card>
@@ -40,14 +40,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
-
-const router = useRouter()
-
-function selectTariff(tariff) {
-  router.push({ path: '/order', query: { tariff: tariff.title } })
-}
 
 const props = defineProps({
   mode: {
@@ -56,56 +50,37 @@ const props = defineProps({
   }
 })
 
-const priceSets = {
+const route   = useRoute()
-  special: [1437, 3037, 2992],
+const router  = useRouter()
-  general: [1890, 3790, 3490]
+const tariffs = ref([])
+
+async function fetchTariffs(mode) {
+  const res  = await fetch(`/api/tariffs?mode=${mode}`)
+  tariffs.value = await res.json()
 }
 
-const baseTariffs = [
+onMounted(() => fetchTariffs(props.mode))
-  {
+watch(() => props.mode, fetchTariffs)
-    id: 1,
-    title: 'Базовый',
-    description: 'Подходит для ИП без сотрудников. Минимальный пакет услуг.'
-  },
-  {
-    id: 2,
-    title: 'Стандарт',
-    description: 'Оптимальный вариант для малого бизнеса с небольшим оборотом.'
-  },
-  {
-    id: 3,
-    title: 'Премиум',
-    description: 'Полное бухгалтерское сопровождение и расширенные консультации.'
-  }
-]
 
-const tariffs = computed(() => {
+function selectTariff(title) {
-  const currentMode = props.mode || 'special'
+  router.push(`/${route.params.region}/order?tariff=${encodeURIComponent(title)}`)
-  const prices = priceSets[currentMode]
+}
-
-  return baseTariffs.map((tariff, index) => ({
-    ...tariff,
-    price: prices[index]
-  }))
-})
 </script>
 
-
-
 <style scoped>
 .tariff-wrapper {
   margin-top: 40px;
   margin-bottom: 20px;
   display: flex;
-  flex-direction: column; /* 🔥 вертикально */
+  flex-direction: column;
   gap: 24px;
-  
 }
-.column{
+
+.column {
   width: 33%
 }
-.columns {
 
+.columns {
   display: flex;
   justify-content: space-between;
   gap: 40px;

src/pages/HomePage.vue

@@ -26,15 +26,3 @@ import Footer from '../components/Footer.vue'
 
 const selectedMode = ref('special')
 </script>
-
-<style scoped>
-.app {
-  background: linear-gradient(90deg, #ffd400, #ff0000);
-  min-height: 100vh;
-}
-
-.container {
-  margin: 0 auto;
-  padding: 40px 60px 80px;
-}
-</style>

src/pages/OrderPage.vue

@@ -1,72 +1,44 @@
 <template>
+  <div class="app">
     <div class="order-page">
-    <div class="order-card">
+      <h1>Оформление заказа</h1>
-      <div class="order-icon">📋</div>
+      <p v-if="tariff">Выбранный тариф: <strong>{{ tariff }}</strong></p>
-      <h1>Оформление заявки</h1>
+      <router-link :to="`/${region}`">← Вернуться назад</router-link>
-      <p class="order-subtitle">Тариф: <strong>{{ tariffName }}</strong></p>
-      <p class="order-description">
-        Страница в разработке. Скоро здесь хоть что-нибудь появится.
-      </p>
-      <n-button type="primary" size="large" @click="goBack">
-        ← Вернуться назад
-      </n-button>
     </div>
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 
-const router = useRouter()
 const route = useRoute()
 
-const tariffName = computed(() => route.query.tariff || 'Не выбран')
+const region = computed(() => route.params.region)
-
+const tariff = computed(() => route.query.tariff || '')
-function goBack() {
-  router.push('/')
-}
 </script>
 
 <style scoped>
 .order-page {
-  background: linear-gradient(90deg, #ffd400, #ff0000);
+  max-width: 600px;
-  min-height: 100vh;
+  margin: 100px auto;
-  display: flex;
+  padding: 0 60px;
-  align-items: center;
-  justify-content: center;
-}
-
-.order-card {
-  background: #fff;
-  border-radius: 16px;
-  padding: 60px 80px;
-  text-align: center;
-  max-width: 500px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-}
-
-.order-icon {
-  font-size: 64px;
-  margin-bottom: 20px;
 }
 
 h1 {
-  font-size: 28px;
+  font-size: 32px;
-  margin: 0 0 12px;
-  color: #111;
-}
-
-.order-subtitle {
-  font-size: 18px;
-  color: #444;
   margin-bottom: 20px;
 }
 
-.order-description {
+a {
-  font-size: 15px;
+  color: #ff4d00;
-  color: #777;
+  font-weight: 600;
-  line-height: 1.6;
+  text-decoration: none;
-  margin-bottom: 36px;
+  display: inline-block;
+  margin-top: 30px;
+}
+
+a:hover {
+  text-decoration: underline;
 }
 </style>

src/router/index.js

@@ -3,8 +3,9 @@ import HomePage from '../pages/HomePage.vue'
 import OrderPage from '../pages/OrderPage.vue'
 
 const routes = [
-  { path: '/', component: HomePage },
+  { path: '/',                redirect: '/moscow' },
-  { path: '/order', component: OrderPage }
+  { path: '/:region',        component: HomePage },
+  { path: '/:region/order',  component: OrderPage }
 ]
 
 export default createRouter({

vite.config.js

@@ -8,5 +8,10 @@ export default defineConfig({
     alias: {
       'vue': 'vue/dist/vue.esm-bundler.js'
     }
-}
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  }
 })