Fixed font sizes and added hurry message

frontend/src/views/Login/Index.vue

@@ -1,51 +1,71 @@
 <template>
-  <div class="authCard">
-    <h1>Авторизация:</h1>
+  <div class="cardWrapper">
+    <div class="authCard">
+      <!-- <div 
+            class="info"
+            @click="showQr = !showQr"
+          >
+            <IconInfo />
+          </div> -->
 
-    <div class="auth">
-      <p>{{ question }}</p>
+      <h1>Авторизация:</h1>
 
-      <input 
-        v-model="answer"
-        placeholder="Ответ"
-        class="input"
-        :class="{
-          '-wrong': wrongPassword
-        }"
-      >
+      <div class="auth">
+        <p>{{ question }}</p>
 
-      <input
-        v-if="mode === 'player'"
-        v-model="username"
-        placeholder="Ваше имя"
-        class="input"
-      >
-      
-      <button 
-        v-if="mode === 'player'"
-        class="login"
-        :disabled="!username || !answer" 
-        @click="loginPlayer"
-      >
-        Войти как игрок
-      </button>
-      <button 
-        v-else
-        class="login"
-        :disabled="!answer" 
-        @click="loginScreen" 
-      >
-        Войти как большой экран
-      </button>
-      
-      <button 
-        class="switchMode"
-        @click="switchMode"
-      >
-        Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
-      </button>
+        <input 
+          v-model="answer"
+          placeholder="Ответ"
+          class="input"
+          :class="{
+            '-wrong': wrongPassword
+          }"
+        >
+
+        <input
+          v-if="mode === 'player'"
+          v-model="username"
+          placeholder="Ваше имя"
+          class="input"
+        >
+            
+        <button 
+          v-if="mode === 'player'"
+          class="login"
+          :disabled="!username || !answer" 
+          @click="loginPlayer"
+        >
+          Войти как игрок
+        </button>
+        <button 
+          v-else
+          class="login"
+          :disabled="!answer" 
+          @click="loginScreen" 
+        >
+          Войти как большой экран
+        </button>
+            
+        <button 
+          class="switchMode"
+          @click="switchMode"
+        >
+          Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
+        </button>
+      </div>
     </div>
   </div>
+
+  <!-- <a 
+    class="author"
+    href="https://kopyl.dev"
+    target="_blank"
+  >
+    <img 
+      src="kopyl_frame_white.png"
+      class="authorLogo"
+    >
+  </a> -->
 </template>
 
 <script setup>
@@ -53,6 +73,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import useStore from '../../store'
 import axios from 'axios'
+import VuePeel from 'vue-peel'
+import 'vue-peel/style.css'
+import IconInfo from '@/components/IconInfo.vue'
+
 axios.defaults.withCredentials = true
 
 const question = import.meta.env.VITE_APP_QUESTION
@@ -64,6 +88,7 @@ const mode = ref("player")
 const answer = ref()
 const username = ref()
 const wrongPassword = ref()
+const showQr = ref()
 
 function switchMode() {
   mode.value = mode.value === 'player' ? 'screen' : 'player'
@@ -113,23 +138,47 @@ async function loginScreen() {
   align-items: center;
 }
 
-.authCard {
+.cardWrapper {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: var(--clr-text);
+  display: flex;
+  gap: 64px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.authCard {
+  position: relative;
   color: var(--clr-text);
   width: 400px;
   margin: auto;
   border-radius: 32px;
   padding: 40px 40px;
   box-sizing: border-box;
-  background: white;
+  background-color: white;
   border: 3px solid var(--clr-text);
   @include filled-shadow(16);
 }
 
+.info {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 16px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--clr-text-secondary);
+  }
+}
+
 .input {
   font-size: 16px;
   padding: 16px;
@@ -186,11 +235,41 @@ async function loginScreen() {
   @include filled-shadow(4);
 }
 
+.author {
+  width: 64px;
+  height: 64px;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding: 16px;
+}
+
+.authorLogo {
+  width: 100%;
+  height: 100%;
+}
+
 @media only screen and (max-width: 520px) {
   .authCard {
     width: calc(100% - 90px);
     margin: auto;
     padding: 40px 20px;
   }
+
+  .flag {
+    transform: translate(calc(-50vw + 70px), -175%) rotate(90deg);
+
+    &.-open {
+      transform: translate(calc(-50vw + 70px), -175%) rotate(0);
+    }
+
+    &.-short {
+      transform: translate(calc(-50vw + 70px), -160%) rotate(90deg);
+
+      &.-open {
+        transform: translate(calc(-50vw + 70px), -160%) rotate(0);
+      }
+    }
+  }
 }
 </style>