From 7ac3ee2123cbe164b6f3a470ad5c2cb8e99ec6ce Mon Sep 17 00:00:00 2001
From: monster1935 <monster.1935.li@gmail.com>
Date: Wed, 26 Jun 2024 21:08:28 +0800
Subject: [PATCH] feat: add downloading page

---
 assets/new-img/down-arrow.svg |   6 ++
 pages/downloading.vue         | 130 ++++++++++++++++++++++++++++++++++
 2 files changed, 136 insertions(+)
 create mode 100644 assets/new-img/down-arrow.svg
 create mode 100644 pages/downloading.vue

diff --git a/assets/new-img/down-arrow.svg b/assets/new-img/down-arrow.svg
new file mode 100644
index 0000000..b322b96
--- /dev/null
+++ b/assets/new-img/down-arrow.svg
@@ -0,0 +1,6 @@
+
+<svg width="11" height="35" viewBox="0 0 11 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.506141 25.9531L5.50014 31.0351L10.4941 25.9531V29.1211L5.50014 34.1811L0.506141 29.1211V25.9531Z" fill="#12FE74"/>
+<path d="M0.506141 12.9766L5.50014 18.0586L10.4941 12.9766V16.1446L5.50014 21.2046L0.506141 16.1446V12.9766Z" fill="#12FE74"/>
+<path d="M0.506141 0L5.50014 5.082L10.4941 0V3.168L5.50014 8.228L0.506141 3.168V0Z" fill="#12FE74"/>
+</svg>
diff --git a/pages/downloading.vue b/pages/downloading.vue
new file mode 100644
index 0000000..17a733f
--- /dev/null
+++ b/pages/downloading.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="min-h-screen text-white">
+    <div class="mx-auto main-wrapper">
+      <div class="pt-6">
+        <img src="@/assets/new-img/logo.svg" alt="logo">
+      </div>
+      <div class="flex flex-col main-title-m text-center pt-7">
+        <div>{{ $t('main.title') }} </div>
+        <div class="print-wrapper print-wrapper-m flex text-brand">
+          <span v-for="(l, i) in printLetters" :key="i" class="letter" v-html="l"></span>
+        </div>
+      </div>
+
+      <div class="mt-3 text-center sub-title">
+        <p>Leading Multi-Chain Wallet Solution</p>
+        <p>Private & Secure </p>
+        <p>Decentralized & Versatile </p>
+      </div>
+
+      <div class="flex justify-center py-10 arrow-move">
+        <img src="@/assets/new-img/down-arrow.svg" alt="">
+      </div>
+
+      <div class="flex justify-center">
+        <MainBanner />
+      </div>
+      <div class="fixed bottom-0 left-0 right-0">
+        <div class="mx-auto bottom-download py-5">
+          <NewCustomButton
+            mode="tiny"
+            type="dark"
+            class="font-bold"
+            content="Downloading"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      letters: ['W', 'e', 'b', '3', '&nbsp;', 'W', 'a', 'l', 'l', 'e', 't'],
+      printLetters: [],
+      interval: null,
+      count: 0,
+      mobileWords1: ['L', 'e', 'a', 'd', 'i', 'n', 'g', ' ', 'y', 'o', 'u'],
+      mobileWords2: ['t', 'o', ' ', 't', 'h', 'e', ' ', 'w', 'o', 'r', 'l', 'd', ' ', 'o', 'f', ' ', 'W', 'e', 'b', '3'],
+
+    }
+  },
+  mounted() {
+    this.print()
+    this.autoDownload()
+  },
+  methods: {
+    print() {
+      this.printLetters = []
+      this.count = 0
+      this.interval = setInterval(() => {
+        if (this.count > this.letters.length - 1) {
+          clearInterval(this.interval)
+          setTimeout(() => {
+            this.print()
+          }, 4000)
+        }
+        this.printLetters.push(this.letters[this.count++])
+      }, 150)
+    },
+    autoDownload() {
+      const downloadUrl = this.$route.query?.downloadUrl
+      if (downloadUrl) {
+        const options = { method: 'Get' }
+        const element = document.createElement('form', options)
+        element.setAttribute('action', downloadUrl)
+        document.body.appendChild(element)
+        element.submit()
+      }
+    }
+  }
+
+}
+</script>
+<style>
+html,
+body {
+    background-color: black;
+}
+</style>
+<style scoped>
+.main-wrapper {
+    padding-bottom: 200px;
+    width: 375px;
+}
+
+.print-wrapper-m {
+    margin: 0 auto;
+    height: 75px;
+}
+
+.print-wrapper {
+    animation: blink-caret 0.75s step-end infinite;
+}
+
+@keyframes blink-caret {
+
+    from,
+    to {
+        box-shadow: 1px 0 0 0 transparent;
+    }
+
+    50% {
+        box-shadow: 1px 0px 0 0;
+    }
+}
+
+.main-title-m {
+    font-family: 'Poppins-Bold';
+    font-size: 50px;
+    line-height: 75px;
+    font-weight: 700;
+}
+
+.bottom-download {
+    background-color: #121212;
+    z-index: 1;
+    width: 375px;
+}
+</style>