.gitignore

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

package.json

@@ -6,11 +6,15 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "node server.js"
   },
   "dependencies": {
+    "express": "^5.2.1",
     "naive-ui": "^2.43.2",
-    "vue": "^3.5.25"
+    "sqlite3": "^5.1.7",
+    "vue": "^3.5.25",
+    "vue-router": "^5.0.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.2",

server.js

@@ -0,0 +1,41 @@
+import express from 'express'
+import Database from 'sqlite3'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const app = express()
+const PORT = 3000
+
+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, 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, () => console.log(`Сервер запущен: http://localhost:${PORT}`))

src/App.vue

@@ -1,34 +1,12 @@
 <template>
   <n-config-provider :theme-overrides="selectTheme">
     <n-message-provider>
-  <div class="app">
-    <SiteHeader />
-    <main class="container">
-      <TaxModeSelector v-model="selectedMode" />
-      <TariffCards :mode="selectedMode" />
-      <MarqueeBar />
-      <PriceTable />
-      <ServicesGrid />
-      <AdvantagesSection />
-      
-    </main>
-    <Footer />
-  </div>
-  </n-message-provider>
+      <router-view />
+    </n-message-provider>
   </n-config-provider>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import SiteHeader from './components/SiteHeader.vue'
-import TaxModeSelector from './components/TaxModeSelector.vue'
-import TariffCards from './components/TariffCards.vue'
-import MarqueeBar from './components/MarqueeBar.vue'
-import PriceTable from './components/PriceTable.vue'
-import ServicesGrid from './components/ServicesGrid.vue'
-import AdvantagesSection from './components/AdvantagesSection.vue'
-import Footer from './components/Footer.vue'
-const selectedMode = ref('special')
 const selectTheme = {
   common: {
     primaryColor: "#ff4d00",

src/components/SiteHeader.vue

@@ -1,42 +1,45 @@
 <script setup>
-import { ref } from "vue"
+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("moscow")
+const city  = ref(route.params.region || 'moscow')
+const cities = ref([])
 
-const cities = [
-  { label: "Москва", value: "moscow" },
-  { label: "Санкт-Петербург", value: "spb" },
-  { label: "Казань", value: "kazan" }
-]
-
-const phone = "8 (800) 000-00-00"
+const phone    = "8 (800) 000-00-00"
 const phoneRaw = "88000000000"
 
-function handlePhoneClick() {
+onMounted(async () => {
+  const res  = await fetch('/api/regions')
+  const data = await res.json()
+  cities.value = data.map(r => ({ label: r.name, value: r.slug }))
+})
 
-  const isMobile =
-    /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
+// синхронизируем селектор при навигации (кнопка «назад» и т.п.)
+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}`
-    return
-
-  }
-  else{
-
+  } else {
     navigator.clipboard.writeText(phone)
     message.success("Номер скопирован")
   }
-
 }
-
-
-
 </script>
 
 <template>
@@ -49,16 +52,12 @@ function handlePhoneClick() {
 
       <div class="col center">
         <div class="title">Удалённый бухгалтер</div>
-
-        
-          <n-select
-            v-model:value="city"
-            :options="cities"
-            size="small"
-            class="city"
-          />
-        
-
+        <n-select
+          v-model:value="city"
+          :options="cities"
+          size="small"
+          class="city"
+        />
       </div>
 
       <div class="col right">
@@ -77,204 +76,91 @@ function handlePhoneClick() {
 
 <style scoped>
 
-/* HEADER */
-
 .header {
-
   padding: 26px 0;
-
-  background: linear-gradient(
-    120deg,
-    #ffd000,
-    #ff7a00,
-    #ff2a00
-  );
-
+  background: linear-gradient(120deg, #ffd000, #ff7a00, #ff2a00);
   background-size: 300% 300%;
-
-  animation:
-    gradientMove 10s ease infinite,
-    headerAppear .7s ease;
-
+  animation: gradientMove 10s ease infinite, headerAppear .7s ease;
   box-shadow: 0 8px 22px rgba(0,0,0,0.25);
-
 }
 
-/* gradient animation */
-
 @keyframes gradientMove {
-
-  0% { background-position: 0% 50%; }
-
-  50% { background-position: 100% 50%; }
-
-  100% { background-position: 0% 50%; }
-
+  0%   { background-position: 0%   50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0%   50%; }
 }
 
-/* header appear */
-
 @keyframes headerAppear {
-
-  from {
-    opacity: 0;
-    transform: translateY(-40px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
+  from { opacity: 0; transform: translateY(-40px); }
+  to   { opacity: 1; transform: translateY(0);     }
 }
 
-/* layout */
-
 .inner {
-
   max-width: 1600px;
-
   margin: 0 auto;
-
   padding: 0 60px;
-
   display: grid;
-
   grid-template-columns: repeat(3,1fr);
-
   align-items: center;
-
 }
 
 .col {
-
   display: flex;
-
   align-items: center;
-
-}
-
-.left { justify-content: flex-start; }
-
-.center {
-
-  flex-direction: column;
-
-  text-align: center;
-
 }
 
+.left  { justify-content: flex-start; }
+.center { flex-direction: column; text-align: center; }
 .right { justify-content: flex-end; }
 
-/* logo */
-
 .logo {
-
   font-size: 24px;
-
   font-weight: 800;
-
   letter-spacing: 1px;
-
   color: black;
-
   transition: transform .25s ease;
-
 }
 
-.logo:hover {
-
-  transform: scale(1.08);
-
-}
-
-/* title */
+.logo:hover { transform: scale(1.08); }
 
 .title {
-
   font-size: 20px;
-
   font-weight: 700;
-
   color: black;
-
 }
 
-/* select */
-
-.city {
-
-  margin-top: 8px;
-
-  width: 190px;
-
-}
-
-/* phone */
+.city { margin-top: 8px; width: 190px; }
 
 .phone {
-
   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);
-
 }
 
-/* mobile */
-
 @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; }
-
+  .left, .right { justify-content: center; }
+  .logo  { font-size: 22px; }
   .title { font-size: 18px; }
-
   .phone { font-size: 16px; }
-
 }
 
 </style>

src/components/TariffCards.vue

@@ -11,27 +11,27 @@
         bordered
       >
         <div class="columns">
-        <div class="column">
-          <h4>Кому подходит</h4>
-          <p>Малому и среднему бизнесу</p>
-        </div>
+          <div class="column">
+            <h4>Кому подходит</h4>
+            <p>Малому и среднему бизнесу</p>
+          </div>
 
-        <div>
-          <h4>Какие задачи решает</h4>
-          <p>Сдача отчётности, расчёт налогов</p>
-        </div>
+          <div>
+            <h4>Какие задачи решает</h4>
+            <p>Сдача отчётности, расчёт налогов</p>
+          </div>
 
-        <div>
-          <h4>Преимущества</h4>
-          <p>Экономия времени и снижение рисков</p>
+          <div>
+            <h4>Преимущества</h4>
+            <p>Экономия времени и снижение рисков</p>
+          </div>
         </div>
-      </div>
 
         <div class="price">
           {{ tariff.price }} ₽
         </div>
 
-        <n-button type="primary" block>
+        <n-button type="primary" block @click="selectTariff(tariff.title)">
           Выбрать
         </n-button>
       </n-card>
@@ -40,7 +40,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 const props = defineProps({
   mode: {
@@ -49,56 +50,37 @@ const props = defineProps({
   }
 })
 
-const priceSets = {
-  special: [1437, 3037, 2992],
-  general: [1890, 3790, 3490]
+const route   = useRoute()
+const router  = useRouter()
+const tariffs = ref([])
+
+async function fetchTariffs(mode) {
+  const res  = await fetch(`/api/tariffs?mode=${mode}`)
+  tariffs.value = await res.json()
 }
 
-const baseTariffs = [
-  {
-    id: 1,
-    title: 'Базовый',
-    description: 'Подходит для ИП без сотрудников. Минимальный пакет услуг.'
-  },
-  {
-    id: 2,
-    title: 'Стандарт',
-    description: 'Оптимальный вариант для малого бизнеса с небольшим оборотом.'
-  },
-  {
-    id: 3,
-    title: 'Премиум',
-    description: 'Полное бухгалтерское сопровождение и расширенные консультации.'
-  }
-]
+onMounted(() => fetchTariffs(props.mode))
+watch(() => props.mode, fetchTariffs)
 
-const tariffs = computed(() => {
-  const currentMode = props.mode || 'special'
-  const prices = priceSets[currentMode]
-
-  return baseTariffs.map((tariff, index) => ({
-    ...tariff,
-    price: prices[index]
-  }))
-})
+function selectTariff(title) {
+  router.push(`/${route.params.region}/order?tariff=${encodeURIComponent(title)}`)
+}
 </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/main.js

@@ -2,9 +2,9 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import naive from 'naive-ui'
-
-
+import router from './router/index.js'
 
 const app = createApp(App)
 app.use(naive)
+app.use(router)
 app.mount('#app')

src/pages/HomePage.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="app">
+    <SiteHeader />
+    <main class="container">
+      <TaxModeSelector v-model="selectedMode" />
+      <TariffCards :mode="selectedMode" />
+      <MarqueeBar />
+      <PriceTable />
+      <ServicesGrid />
+      <AdvantagesSection />
+    </main>
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import SiteHeader from '../components/SiteHeader.vue'
+import TaxModeSelector from '../components/TaxModeSelector.vue'
+import TariffCards from '../components/TariffCards.vue'
+import MarqueeBar from '../components/MarqueeBar.vue'
+import PriceTable from '../components/PriceTable.vue'
+import ServicesGrid from '../components/ServicesGrid.vue'
+import AdvantagesSection from '../components/AdvantagesSection.vue'
+import Footer from '../components/Footer.vue'
+
+const selectedMode = ref('special')
+</script>

src/pages/OrderPage.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="app">
+    <div class="order-page">
+      <h1>Оформление заказа</h1>
+      <p v-if="tariff">Выбранный тариф: <strong>{{ tariff }}</strong></p>
+      <router-link :to="`/${region}`">← Вернуться назад</router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const region = computed(() => route.params.region)
+const tariff = computed(() => route.query.tariff || '')
+</script>
+
+<style scoped>
+.order-page {
+  max-width: 600px;
+  margin: 100px auto;
+  padding: 0 60px;
+}
+
+h1 {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+
+a {
+  color: #ff4d00;
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-block;
+  margin-top: 30px;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>

src/router/index.js

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '../pages/HomePage.vue'
+import OrderPage from '../pages/OrderPage.vue'
+
+const routes = [
+  { path: '/',                redirect: '/moscow' },
+  { path: '/:region',        component: HomePage },
+  { path: '/:region/order',  component: OrderPage }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})

vite.config.js

@@ -5,8 +5,13 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
   resolve: {
-  alias: {
-    'vue': 'vue/dist/vue.esm-bundler.js'
+    alias: {
+      'vue': 'vue/dist/vue.esm-bundler.js'
+    }
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
   }
-}
 })