From 2599be3f5327779a249820c625fef01011e081b7 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 19 Jul 2026 15:24:36 +0700
Subject: [PATCH] add center

---
 src/assets/main.css              |   7 +-
 src/components/GamesPage.vue     |   4 +-
 src/components/LoginPage.vue     | 112 ++++++++++++++++---------------
 src/components/OfficePage.vue    |  16 +++--
 src/components/ScenariosPage.vue |   2 +-
 src/components/UsersPage.vue     |   4 +-
 6 files changed, 81 insertions(+), 64 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index badd59d..1593ae3 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -25,7 +25,7 @@ body {
 .content-block {
   margin-top: 70px;
   padding: 10px;
-  background-color: #333333;
+  /* background-color: #553333; */
 }
 
 @media (min-width: 1024px) {
@@ -33,4 +33,9 @@ body {
     width: 700px;
     margin: 70px auto 0 auto;
   }
+
+  .center-middle-block-custom {
+    display: grid;
+    place-items: center;
+  }
 }
\ No newline at end of file
diff --git a/src/components/GamesPage.vue b/src/components/GamesPage.vue
index d98f68b..7e8c018 100644
--- a/src/components/GamesPage.vue
+++ b/src/components/GamesPage.vue
@@ -5,7 +5,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="games" />
 
-    Игры
+    <div class="center-block-custom content-block">
+        Игры
+    </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 6e7aa39..45a213e 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -52,65 +52,67 @@ async function signup() {
 </script>
 
 <template>
-  <n-card style="margin-bottom: 16px" class="sign-card">
-    <n-tabs type="line" animated>
+  <div class="center-block-custom content-block center-middle-block-custom height100">
+    <n-card style="margin-bottom: 16px" class="sign-card">
+      <n-tabs type="line" animated>
 
-      <n-tab-pane name="signin" tab="Вход">
-        <n-space vertical>
-          <div class="form-label">Почта</div>
-          <n-auto-complete v-model:value="email" :input-props="{
-            autocomplete: 'disabled',
-          }" :options="options" placeholder="detective@mail.ru" clearable />
-          <div class="form-label">Пароль</div>
-          <n-input v-model:value="password" type="password" placeholder="********" />
-          <div class="form-button-wrapper">
-            <div class="form-label">
-              <n-button @click="signin" :disabled="email.length == 0 || password.length == 0">
-                <span v-if="!authStore.isLoading">
-                  Вход
-                </span>
-                <span v-else>
-                  Подождите...
-                </span>
-              </n-button>
+        <n-tab-pane name="signin" tab="Вход">
+          <n-space vertical>
+            <div class="form-label">Почта</div>
+            <n-auto-complete v-model:value="email" :input-props="{
+              autocomplete: 'disabled',
+            }" :options="options" placeholder="detective@mail.ru" clearable />
+            <div class="form-label">Пароль</div>
+            <n-input v-model:value="password" type="password" placeholder="********" />
+            <div class="form-button-wrapper">
+              <div class="form-label">
+                <n-button @click="signin" :disabled="email.length == 0 || password.length == 0">
+                  <span v-if="!authStore.isLoading">
+                    Вход
+                  </span>
+                  <span v-else>
+                    Подождите...
+                  </span>
+                </n-button>
+              </div>
             </div>
-          </div>
-        </n-space>
-      </n-tab-pane>
+          </n-space>
+        </n-tab-pane>
 
-      <n-tab-pane name="signup" tab="Регистрация">
-        <n-space vertical>
-          <div class="form-label">Позывной</div>
-          <n-input v-model:value="username" type="text" placeholder="Шерлок" />
-          <div class="form-label">Почта</div>
-          <n-auto-complete v-model:value="email" :input-props="{
-            autocomplete: 'disabled',
-          }" :options="options" placeholder="detective@mail.ru" clearable />
-          <div class="form-label">
-            <n-checkbox v-model:checked="approval">
-              Я согласен с
-              <a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br>
-              и
-              <a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
-            </n-checkbox>
-          </div>
-          <div class="form-button-wrapper">
+        <n-tab-pane name="signup" tab="Регистрация">
+          <n-space vertical>
+            <div class="form-label">Позывной</div>
+            <n-input v-model:value="username" type="text" placeholder="Шерлок" />
+            <div class="form-label">Почта</div>
+            <n-auto-complete v-model:value="email" :input-props="{
+              autocomplete: 'disabled',
+            }" :options="options" placeholder="detective@mail.ru" clearable />
             <div class="form-label">
-              <n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval">
-                <span v-if="!authStore.isLoading">
-                  Регистрация
-                </span>
-                <span v-else>
-                  Подождите...
-                </span>
-              </n-button>
+              <n-checkbox v-model:checked="approval">
+                Я согласен с
+                <a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br>
+                и
+                <a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
+              </n-checkbox>
             </div>
-          </div>
-        </n-space>
-      </n-tab-pane>
+            <div class="form-button-wrapper">
+              <div class="form-label">
+                <n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval">
+                  <span v-if="!authStore.isLoading">
+                    Регистрация
+                  </span>
+                  <span v-else>
+                    Подождите...
+                  </span>
+                </n-button>
+              </div>
+            </div>
+          </n-space>
+        </n-tab-pane>
 
-    </n-tabs>
-  </n-card>
+      </n-tabs>
+    </n-card>
+  </div>
 </template>
 
 <style scoped>
@@ -135,6 +137,10 @@ async function signup() {
   color: #63e2b7;
 }
 
+.height100 {
+  height: 80vh;
+}
+
 @media (min-width: 1024px) {
   .sign-card {
     width: 380px;
diff --git a/src/components/OfficePage.vue b/src/components/OfficePage.vue
index 6ee1b33..8b6d60e 100644
--- a/src/components/OfficePage.vue
+++ b/src/components/OfficePage.vue
@@ -21,14 +21,16 @@ getPermissions()
 <template>
     <HeaderMenu :add-logout="true" active="office" />
 
-    <p>
-        Доброго времени суток, {{ authStore.username }}.
-    </p>
-    <!-- <p>
-        {{ authStore.userRoles }}
-    </p>
+    <div class="center-block-custom content-block">
+        <p>
+            Доброго времени суток, {{ authStore.username }}.
+        </p>
+        <!-- <p>
+            {{ authStore.userRoles }}
+        </p>
 
-    {{ permissions }} -->
+        {{ permissions }} -->
+    </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/ScenariosPage.vue b/src/components/ScenariosPage.vue
index ed7e4ea..a2d18cf 100644
--- a/src/components/ScenariosPage.vue
+++ b/src/components/ScenariosPage.vue
@@ -5,7 +5,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="scenarios" />
 
-    <div class="center-block-custom">
+    <div class="center-block-custom content-block">
         Сценарии
     </div>
 </template>
diff --git a/src/components/UsersPage.vue b/src/components/UsersPage.vue
index 9ab0ef1..844bc24 100644
--- a/src/components/UsersPage.vue
+++ b/src/components/UsersPage.vue
@@ -5,7 +5,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="users" />
 
-    Пользователи
+    <div class="center-block-custom content-block">
+        Пользователи
+    </div>
 </template>
 
 <style scoped></style>