From d667590862bae8ac7ccb806be876e402c5473db2 Mon Sep 17 00:00:00 2001 From: Fedorov Vladimir Date: Sun, 18 May 2025 21:20:50 +0700 Subject: [PATCH] updates --- index.html | 2 +- src/assets/base.css | 14 ++- src/assets/main.css | 64 ++++++---- src/components/GameWindow.vue | 212 ++++++++++++++++++++++++++++----- src/components/LoginWindow.vue | 59 +++++++++ src/router/index.ts | 6 + src/views/HomeView.vue | 8 +- src/views/LoginView.vue | 7 ++ 8 files changed, 307 insertions(+), 65 deletions(-) create mode 100644 src/components/LoginWindow.vue create mode 100644 src/views/LoginView.vue diff --git a/index.html b/index.html index 9e5fc8f..51a48d4 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + Вечерний детектив
diff --git a/src/assets/base.css b/src/assets/base.css index 8816868..93d9aae 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -19,6 +19,12 @@ --vt-c-text-light-2: rgba(60, 60, 60, 0.66); --vt-c-text-dark-1: var(--vt-c-white); --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); + + /* Главный цвет */ + --main-color: rgba(115, 185, 83, 1); + --second-color: rgba(98, 156, 68, 1); + --main-back-color: rgba(240, 240, 240, 1); + --main-back-item-color: rgba(254, 254, 254, 1); } /* semantic color variables for this project */ @@ -36,7 +42,7 @@ --section-gap: 160px; } -@media (prefers-color-scheme: dark) { +/* @media (prefers-color-scheme: dark) { :root { --color-background: var(--vt-c-black); --color-background-soft: var(--vt-c-black-soft); @@ -48,7 +54,7 @@ --color-heading: var(--vt-c-text-dark-1); --color-text: var(--vt-c-text-dark-2); } -} +} */ *, *::before, @@ -59,9 +65,9 @@ } body { - min-height: 100vh; + min-height: 100dvh; color: var(--color-text); - background: var(--color-background); + background: var(--main-back-color); transition: color 0.5s, background-color 0.5s; diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..602bc72 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,35 +1,47 @@ @import './base.css'; -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; +.header-block { + height: 50px; + background-color: var(--main-color); + font-size: large; + color: white; + vertical-align: middle; + padding: 10px 0 10px 16px; + font-weight: 700; } -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; +.input-custom { + width: 100%; + box-sizing: border-box; /* обязательно! */ + margin-bottom: 15px; } -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } +.button-custom { + margin-left: auto; + background-color: var(--main-color); + font-weight: 600; + color: white; } -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } +.button-custom:hover { + background-color: var(--second-color); +} + +.input-custom, .button-custom { + padding: 12px 16px; + border: 1px solid #ddd; + border-radius: 15px; + font-size: 16px; +} + +.button-container { + display: flex; +} + +.center-message { + display: flex; + justify-content: center; /* горизонтальное центрирование */ + align-items: center; /* вертикальное центрирование */ + height: calc(100dvh - 100px); + text-align: center; /* центрирование текста */ } diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue index 28e8729..04f1cd0 100644 --- a/src/components/GameWindow.vue +++ b/src/components/GameWindow.vue @@ -1,14 +1,19 @@ + + diff --git a/src/components/LoginWindow.vue b/src/components/LoginWindow.vue new file mode 100644 index 0000000..5b9d516 --- /dev/null +++ b/src/components/LoginWindow.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/router/index.ts b/src/router/index.ts index 3e49915..43078b6 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,6 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' +import LoginView from '../views/LoginView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -9,6 +10,11 @@ const router = createRouter({ name: 'home', component: HomeView, }, + { + path: '/login', + name: 'login', + component: LoginView, + }, { path: '/about', name: 'about', diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 61c1f3f..6b88bad 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,12 +1,8 @@ + diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue new file mode 100644 index 0000000..53eb4d4 --- /dev/null +++ b/src/views/LoginView.vue @@ -0,0 +1,7 @@ + + +