update scenarios

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",

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
 }

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;
+  }
 }

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;

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>

src/views/HomeView.vue

@@ -14,8 +14,9 @@ const keyColorClass = computed(() => {
 </script>
 
 <template>
-  <HeaderMenu :add-login="true" :is-found-key="isFoundKey"/>
+  <HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
-  <div class="center-block-custom content-block">
+  <div class="center-block-custom content-block center-middle-block-custom height80">
+    <div>
       <h1 class="font-text">
         Вечерний детектив
       </h1>
@@ -29,6 +30,7 @@ const keyColorClass = computed(() => {
         </Icon>
       </p>
     </div>
+  </div>
 </template>
 
 <style lang="css">