authentication implementation

2024-05-27 15:13:45 +03:30
parent a984a3937e
commit 021360e364
38 changed files with 1083 additions and 2995 deletions
@@ -0,0 +1,97 @@
+ <template>
+  <div
+    class="shadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] animate-pulse bg-zinc-50"
+  >
+    <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
+      <p
+        class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute left-0 bottom-0 bg-zinc-50 rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]"
+      >
+       
+        <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]"
+          ></span
+        >
+      </p>
+      <div
+        class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] bg-zinc-100"
+      ></div>
+    </div>
+
+    <div class="flexBox flex-col">
+      <div
+        class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]"
+      >
+        <div
+          class="bg-zinc-100 w-[9vw] h-[1vw] rounded-[0.2vw]"
+        >
+    </div>
+        <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
+          <div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">
+
+          </div>
+          <div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">
+
+          </div>
+          <div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">
+
+          </div>
+
+
+        </div>
+        <div class="flex justify-between !mt-[2.2vw]">
+        <div class="bg-zinc-100 w-[8vw] h-[2vw] rounded-[0.2vw]">
+
+        </div>
+        <div class="bg-zinc-100 w-[2vw] h-[2vw] rounded-[50%]">
+
+        </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.post::before {
+  content: "";
+  position: absolute;
+  top: -8.1vw;
+  left: 0vw;
+  width: 3vw;
+  height: 8.1vw;
+  border-bottom-left-radius: 0.781vw;
+  box-shadow: -0.03vw 0.8vw 0 -0.026vw #fafafa;
+}
+.post::after {
+  content: "";
+  position: absolute;
+  top: 0.15vw;
+  left: 100%;
+  width: 1.083vw;
+  height: 2.083vw;
+  border-bottom-left-radius: 0.781vw;
+  box-shadow: -0.26vw 1.042vw 0 0.026vw #fafafa;
+}
+
+@media (max-width: 768px) {
+  .post::before {
+    content: "";
+    position: absolute;
+    top: -8.1vw;
+    left: 0vw;
+    width: 3vw;
+    height: 8.1vw;
+    border-bottom-left-radius: 3.59vw;
+    box-shadow: -0.03vw 2.8vw 0 -0.026vw #fafafa;
+  }
+  .post::after {
+    content: "";
+    position: absolute;
+    top: 3.4vw;
+    left: 100%;
+    width: 5.083vw;
+    height: 6.083vw;
+    border-bottom-left-radius: 3.59vw;
+    box-shadow: -1vw 2vw 0 0.026vw #fafafa;
+  }
+}
+</style>