feat: add Authentication Page

app/src/components/AuthenticationPart.vue

@@ -0,0 +1,36 @@
+<script setup></script>
+<template>
+  <!--login page-->
+  <div
+    class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
+  >
+    <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odysssey</h1>
+    <form action="" class="w-full">
+      <div class="mb-6">
+        <label for="email" class="text-sm font-semibold text-text">Email</label
+        ><input
+          type="email"
+          id="email"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your email address"
+        />
+      </div>
+      <div class="mb-6">
+        <label for="password" class="text-sm font-semibold leading-6 text-text"
+          >Password</label
+        ><input
+          type="password"
+          id="password"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your password"
+        />
+      </div>
+      <button
+        type="submit"
+        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+      >
+        <span>Log in / Sign up</span></button
+      ><input type="hidden" name="remember" value="true" />
+    </form>
+  </div>
+</template>

app/src/components/DynamicBackground.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="box">
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const cw = ref(0)
+const ch = ref(0)
+const fallingCharArr = ref([])
+const fontSize = ref(16)
+const maxColums = ref(0)
+const charArr = ['0', '1', '', '', '']
+const ctx = ref(null)
+
+const randomInt = (min, max) => {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+const randomFloat = (min, max) => {
+  return Math.random() * (max - min) + min
+}
+
+const draw = (point) => {
+  point.value = charArr[randomInt(0, charArr.length)].toUpperCase()
+  if (point.y < 0) point.speed = randomFloat(10, 20)
+
+  ctx.value.fillStyle = '#0F0'
+  ctx.value.font = `${fontSize.value}px san-serif`
+  ctx.value.fillText(point.value, point.x, point.y)
+
+  point.y += point.speed
+  if (point.y > ch.value) {
+    point.y = randomFloat(-100, 0)
+    point.speed = randomFloat(2, 8)
+  }
+}
+
+const update = () => {
+  ctx.value.fillStyle = 'rgba(0,0,0,0.05)'
+  ctx.value.fillRect(0, 0, cw.value, ch.value)
+
+  let i = fallingCharArr.value.length
+  while (i--) {
+    draw(fallingCharArr.value[i])
+  }
+  setTimeout(update, 25)
+}
+
+onMounted(() => {
+  cw.value = document.documentElement.clientWidth
+  ch.value = document.documentElement.clientHeight
+  maxColums.value = cw.value / fontSize.value
+
+  const canvas = document.querySelector('canvas')
+  ctx.value = canvas.getContext('2d')
+
+  canvas.width = cw.value
+  canvas.height = ch.value
+
+  for (let i = 0; i < maxColums.value; i++) {
+    fallingCharArr.value.push({
+      x: i * fontSize.value,
+      y: randomFloat(-500, 0),
+    })
+  }
+
+  window.addEventListener('resize', () => {
+    cw.value = document.documentElement.clientWidth
+    ch.value = document.documentElement.clientHeight
+    maxColums.value = cw.value / fontSize.value
+    canvas.width = cw.value
+    canvas.height = ch.value
+  })
+
+  update()
+})
+</script>
+
+<style scoped>
+#box {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>

app/src/components/HeaderPart.vue

@@ -12,7 +12,7 @@
       <button id="backward" class="flex items-center">
         <font-awesome-icon
           :icon="['fas', 'arrow-left']"
-          class="text-text-line h-5 w-5"
+          class="text-text-tertiary h-5 w-5"
         />
       </button>
       <button>

app/src/components/QuestPart.vue

@@ -24,7 +24,7 @@ api
     <h1 id="topic" class="text-text" v-else-if="questData">
       {{ questData.title }}
     </h1>
-    <hr class="border-text-line border-2 my-2" />
+    <hr class="border-text-tertiary border-2 my-2" />
     <div>
       <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>