start new design

src/assets/main.css

@@ -13,7 +13,7 @@
 .input-custom {
   width: 100%;
   box-sizing: border-box; /* обязательно! */
-  margin-bottom: 15px;
+  margin-right: 15px;
 }
 
 .button-custom {

src/components/BeltBlock.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="belt-block">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.belt-block {
+  background-image: url("@/assets/belt.png");
+  background-size: cover;
+}
+</style>

src/components/BeltMiniBlock.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="belt-block">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.belt-block {
+  background-image: url("@/assets/belt_mini.png");
+  background-size: cover;
+}
+</style>

src/components/GameWindow.vue

@@ -3,6 +3,8 @@ import { ref, nextTick, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { encodeUTF8ToBase64, getApiUrl } from './utils';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
+import BeltMiniBlock from './BeltMiniBlock.vue';
+import BeltBlock from './BeltBlock.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -207,27 +209,28 @@ onMounted(() => {
 
   <div class="body-custom">
 
-    <img alt="Вечерний детектив" class="logo" src="@/assets/logo.png" width="40" height="40" />
+    <div>
-    <div class="header-block">
+      <div class="game-header-empty-block"></div>
-      Вечерний детектив
+      <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
-      <span class="team-name-block text-truncate">{{ team.name }}</span>
+      <BeltMiniBlock class="game-header-belt-mini"></BeltMiniBlock>
+      <BeltBlock class="game-header-belt center-bold-text">
+        <!-- Вечерний детектив -->
+        <!-- <span class="team-name-block text-truncate">{{ team.name }}</span> -->
+      </BeltBlock>
     </div>
 
     <!-- Форма ввода -->
-    <div class="form-custom form-block">
+    <BeltBlock class="form-custom">
       <div class="center-block-custom">
         <form @submit.prevent="addAction">
-          <div>
+          <div class="controller">
             <input class="input-custom" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)"
               :disabled="gameState !== 'RUN'">
-          </div>
-          <div class="button-container">
-            <div class="second-color info-custom">{{ gameStateText }}</div>
             <button class="button-custom" type="submit" :disabled="gameState !== 'RUN'">Поехали</button>
           </div>
         </form>
       </div>
-    </div>
+    </BeltBlock>
 
     <!-- Действия -->
     <div class="messages-block" ref="scrollContainer">
@@ -295,11 +298,6 @@ body {
   padding-left: 15px;
 }
 
-.logo {
-  float: left;
-  margin: 10px;
-}
-
 .logo-right {
   float: right;
   margin: 12px;
@@ -311,7 +309,6 @@ body {
 
 .form-custom {
   border: 1px solid #444444;
-  background-color: var(--main-back-color);
   position: fixed;
   bottom: 0;
   left: 0;
@@ -352,10 +349,6 @@ body {
   color: var(--second-color);
 }
 
-.form-block {
-  height: 140px;
-}
-
 .messages-block {
   height: calc(100dvh - 140px - 60px);
   overflow-y: auto;
@@ -403,4 +396,49 @@ body {
   border-radius: 4px;
   font-size: medium;
 }
+
+.belt-mini-block {
+  height: 30px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.controller {
+  display: flex;
+}
+
+.game-header-empty-block {
+  height: 5px;
+}
+
+.game-header-belt-mini {
+  height: 30px;
+  position: relative;
+  z-index: 10;
+}
+
+.game-header-belt {
+  height: 60px;
+  position: relative;
+  top: -5px;
+  z-index: 1;
+}
+
+.logo {
+  width: 90px;
+  height: 88px;
+  float: left;
+  margin: 0 10px;
+  position: relative;
+  z-index: 20;
+  top: 10px;
+}
+
+.center-bold-text {
+  font-size: large;
+  color: white;
+  vertical-align: middle;
+  font-weight: 700;
+}
 </style>