From a97993c70b7218d565143fa1e46abb6387dbb3ab Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 19 Jul 2026 17:07:22 +0700
Subject: [PATCH] update scenarios

---
 package.json                                  |   2 +-
 .../crabs/evening_detective_server/client.ts  |   4 +-
 src/assets/main.css                           |  19 ++-
 src/components/LoginPage.vue                  |   6 +-
 src/components/ScenariosPage.vue              | 125 +++++++++++++++++-
 src/views/HomeView.vue                        |  30 +++--
 6 files changed, 160 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 2411978..f0d17b4 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
diff --git a/src/api/generated/crabs/evening_detective_server/client.ts b/src/api/generated/crabs/evening_detective_server/client.ts
index a4c94e4..efd978a 100644
--- a/src/api/generated/crabs/evening_detective_server/client.ts
+++ b/src/api/generated/crabs/evening_detective_server/client.ts
@@ -52,5 +52,7 @@ export function createHttpHandler(
 }
 
 export function getURL(): string {
-    return "http://localhost:8090"
+    const url =  import.meta.env.VITE_API_URL || "http://localhost:8090"
+    // console.log(url)
+    return url
 }
diff --git a/src/assets/main.css b/src/assets/main.css
index 1593ae3..b7ad290 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,7 +2,8 @@
 
 body {
   overflow: hidden;
-  background-color: black;
+  color: #eeeeee;
+  background-color: #111111;
   scrollbar-width: none;
 }
 
@@ -24,18 +25,32 @@ body {
 
 .content-block {
   margin-top: 70px;
-  padding: 10px;
+  padding: 0 20px;
   /* background-color: #553333; */
 }
 
+.height80 {
+  height: 80vh;
+}
+
 @media (min-width: 1024px) {
   .center-block-custom {
     width: 700px;
     margin: 70px auto 0 auto;
   }
 
+  .center-block-custom-big {
+    width: 1200px;
+    margin: 70px auto 0 auto;
+  }
+
   .center-middle-block-custom {
     display: grid;
     place-items: center;
   }
+
+  .content-block {
+    margin-top: 70px;
+    padding: 0;
+  }
 }
\ No newline at end of file
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 45a213e..7a9fd37 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -52,7 +52,7 @@ async function signup() {
 </script>
 
 <template>
-  <div class="center-block-custom content-block center-middle-block-custom height100">
+  <div class="center-block-custom content-block center-middle-block-custom height80">
     <n-card style="margin-bottom: 16px" class="sign-card">
       <n-tabs type="line" animated>
 
@@ -137,10 +137,6 @@ async function signup() {
   color: #63e2b7;
 }
 
-.height100 {
-  height: 80vh;
-}
-
 @media (min-width: 1024px) {
   .sign-card {
     width: 380px;
diff --git a/src/components/ScenariosPage.vue b/src/components/ScenariosPage.vue
index a2d18cf..0a4084f 100644
--- a/src/components/ScenariosPage.vue
+++ b/src/components/ScenariosPage.vue
@@ -5,9 +5,128 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="scenarios" />
 
-    <div class="center-block-custom content-block">
-        Сценарии
+    <div class="center-block-custom-big content-block">
+
+        <div class="scenarios-container">
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image-plus">+</div>
+                <p class="scenario-title">Создать новый сценарий</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+            <div class="scenario-block">
+                <div class="scenario-image-block scenario-image"></div>
+                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+            </div>
+
+        </div>
+
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.scenarios-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow-y: auto;
+    padding: 40px 0;
+    height: calc(100vh - 70px);
+}
+
+.scenario-block {
+    margin: 10px;
+    width: 250px;
+    cursor: pointer;
+    /* background-color: #553333; */
+}
+
+.scenario-block:hover {
+    color: #63e2b7;
+}
+
+.scenario-image-block {
+    width: 250px;
+    height: 250px;
+    border-radius: 10px;
+}
+
+.scenario-image-block:hover {
+    color: #63e2b7;
+    border: 2px solid #63e2b7;
+}
+
+.scenario-image-plus {
+    font-size: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #333333;
+}
+
+.scenario-image {
+    background-image: url('https://avatars.mds.yandex.net/i?id=6afaa986a0a8ca7c47697195bc71a531_l-4510207-images-thumbs&n=13');
+    background-size: cover;
+    background-position: center;
+}
+
+.scenario-title {
+    padding: 5px 0;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ffc2b3c..2e88417 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,20 +14,22 @@ const keyColorClass = computed(() => {
 </script>
 
 <template>
-  <HeaderMenu :add-login="true" :is-found-key="isFoundKey"/>
-  <div class="center-block-custom content-block">
-    <h1 class="font-text">
-      Вечерний детектив
-    </h1>
-    <h3 class="font-text">
-      Дело №0
-    </h3>
-    <p class="content-text">
-      Поиграем?
-      <Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
-        <Key24Regular />
-      </Icon>
-    </p>
+  <HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
+  <div class="center-block-custom content-block center-middle-block-custom height80">
+    <div>
+      <h1 class="font-text">
+        Вечерний детектив
+      </h1>
+      <h3 class="font-text">
+        Дело №0
+      </h3>
+      <p class="content-text">
+        Поиграем?
+        <Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
+          <Key24Regular />
+        </Icon>
+      </p>
+    </div>
   </div>
 </template>