add CreateView

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>