add CreateView

src/layouts/CreateLayout.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="create-layout-container max-w-lg mx-auto py-6 px-4 md:px-6">
+    <!-- Список шагов -->
+    <!--    <nav class="steps mb-4">-->
+    <!--      <ul class="steps-list">-->
+    <!--        <li :class="{ active: $route.name === 'create' }">-->
+    <!--          <router-link to="/create">Шаг 1: Место размещения</router-link>-->
+    <!--        </li>-->
+    <!--        <li :class="{ active: $route.name === 'create-actions' }">-->
+    <!--          <router-link to="/create/actions">Шаг 2: Доступные действия</router-link>-->
+    <!--        </li>-->
+    <!--      </ul>-->
+    <!--    </nav>-->
+
+    <!-- Динамическое отображение компонента в зависимости от маршрута -->
+    <section class="content">
+      <RouterView />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.create-layout-container {
+  font-family: Arial, sans-serif;
+}
+
+.steps {
+  color: #555;
+  font-size: 0.875rem;
+}
+
+.steps-list {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+}
+
+.steps-list li {
+  color: #007bff;
+}
+
+.steps-list li.active {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.content {
+  padding-top: 1rem;
+}
+</style>

src/router/index.ts

@@ -1,23 +1,89 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '@/views/HomeView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView,
+  },
+
+  {
+    path: '/create',
+    component: () => import('@/layouts/CreateLayout.vue'),
+    children: [
+      {
+        path: '',
+        name: 'create',
+        component: () => import('@/views/CreateView.vue'), // Первый шаг создания QR-кода
+      },
+      // {
+      //   path: 'actions',
+      //   name: 'create-actions',
+      //   component: () => import('@/views/CreateActionsView.vue'), // Второй шаг создания QR-кода
+      // },
+    ],
+  },
+  // {
+  //   path: '/create/actions',
+  //   name: 'create-actions',
+  //   component: () => import('@/views/CreateActionsView.vue'), // Второй шаг создания QR-кода
+  // },
+  // {
+  //   path: '/manage/:qr_code/settings',
+  //   name: 'manage-settings',
+  //   component: () => import('@/views/SettingsView.vue'), // Настройки QR-кода для владельца
+  // },
+  // {
+  //   path: '/manage/profile',
+  //   name: 'manage-profile',
+  //   component: () => import('@/views/ProfileView.vue'), // Личный кабинет владельца
+  // },
+  // {
+  //   path: '/manage/:qr_code/:chat',
+  //   name: 'manage-chat',
+  //   component: () => import('@/views/ChatView.vue'), // Чат для владельца
+  // },
+  // {
+  //   path: '/chat/:qr_code/:chat',
+  //   name: 'public-chat',
+  //   component: () => import('@/views/PublicChatView.vue'), // Публичный чат для гостей
+  // },
+  // {
+  //   path: '/:qr_code',
+  //   name: 'public-qr',
+  //   component: () => import('@/views/PublicQRView.vue'), // Публичная страница QR-кода
+  // },
+  // {
+  //   path: '/help',
+  //   name: 'help',
+  //   component: () => import('@/views/HelpView.vue'), // Страница помощи и FAQ
+  // },
+  // {
+  //   path: '/about',
+  //   name: 'about',
+  //   component: () => import('@/views/AboutView.vue'), // Страница информации о компании и проекте
+  // },
+  // {
+  //   path: '/contact',
+  //   name: 'contact',
+  //   component: () => import('@/views/ContactView.vue'), // Страница с контактной информацией
+  // },
+  // {
+  //   path: '/privacy-policy',
+  //   name: 'privacy-policy',
+  //   component: () => import('@/views/PrivacyPolicyView.vue'), // Политика конфиденциальности
+  // },
+  // {
+  //   path: '/terms-of-service',
+  //   name: 'terms-of-service',
+  //   component: () => import('@/views/TermsOfServiceView.vue'), // Условия использования
+  // },
+]
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView,
-    },
-    {
-      path: '/create',
-      name: 'create',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/CreateView.vue'),
-    },
-  ],
+  routes,
 })
 
 export default router

src/views/CreateView.vue

@@ -1,5 +1,60 @@
 <template>
-  <div class="about">
-    <h1>This is an create page</h1>
+  <div class="flex items-center justify-center min-h-screen px-4">
+    <div class="max-w-md">
+      <h2 class="text-2xl font-semibold mb-4">Где вы хотите разместить QR-код?</h2>
+      <p class="text-gray-600 mb-6">
+        Этот выбор поможет настроить QR-код с подходящими действиями для выбранного места или цели.
+        На следующем шаге вы сможете выбрать, какие действия будут доступны сканирующему.
+      </p>
+
+      <!-- Список типов назначений -->
+      <div class="placement-options mb-6">
+        <label v-for="(label, type) in qrCodePlacements" :key="type" class="block mb-4">
+          <input type="radio" :value="type" v-model="selectedPlacement" class="mr-2" />
+          {{ label }}
+        </label>
+      </div>
+
+      <!-- Сообщение об ошибке -->
+      <p v-if="error" class="text-red-500 mb-4">
+        Пожалуйста, выберите, где вы хотите разместить QR-код
+      </p>
+
+      <!-- Кнопка Далее -->
+      <button
+        @click="nextStep"
+        :disabled="!selectedPlacement"
+        class="p-2 bg-blue-500 text-white rounded"
+      >
+        Далее
+      </button>
+    </div>
   </div>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+
+const qrCodePlacements = {
+  car: 'Автомобиль',
+  door: 'Входная дверь',
+  pet: 'Питомец',
+  store: 'Магазин',
+}
+
+const selectedPlacement = ref('')
+const error = ref(false)
+
+function nextStep() {
+  if (!selectedPlacement.value) {
+    error.value = true
+  } else {
+    error.value = false
+    // Логика перехода к следующему шагу и сохранения места размещения QR-кода
+  }
+}
+
+function goBack() {
+  // Логика перехода на предыдущий шаг
+}
+</script>