first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,95 @@
+<template>
+  <div class="auth-shell">
+    <div class="auth-shell__form-area">
+      <div class="auth-shell__bg-mobile" :style="{ backgroundImage: `url(${bgPatternMobile})` }" />
+      <div class="auth-shell__form">
+        <slot />
+      </div>
+    </div>
+    <div class="auth-shell__pattern">
+      <PatternSection :front-image="logoPattern" :bg-image="bgPattern" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PatternSection from '@/features/auth/components/PatternSection.vue'
+import { gallery } from '@/utils/gallery'
+
+const bgPattern = gallery.loginPattern
+const bgPatternMobile = gallery.loginPatternMobile
+const logoPattern = gallery.loginPatternWithLogo
+</script>
+
+<style lang="scss" scoped>
+.auth-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100dvh;
+  min-height: 100vh;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+
+  &__form-area {
+    flex-basis: 100%;
+    display: flex;
+    flex-direction: column;
+
+    @media (min-width: 768px) {
+      flex-basis: 58.3333%;
+    }
+  }
+
+  &__bg-mobile {
+    width: 100%;
+    height: 20%;
+    background-position: bottom;
+    background-position-x: right;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: space-between;
+    margin-inline-start: auto;
+    width: 100%;
+    padding: 0 1.25rem;
+
+    @media (min-width: 640px) {
+      padding: 0 0.5rem;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 300px;
+      padding: 0;
+    }
+
+    @media (min-width: 1024px) {
+      max-width: 400px;
+    }
+
+    @media (min-width: 1280px) {
+      max-width: 514px;
+    }
+  }
+
+  &__pattern {
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+      flex-basis: 41.6667%;
+    }
+  }
+}
+</style>