ds

src/Pages/DepositPage.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Turnstile } from "svelte-turnstile";
+  import Mbank from "../banks/mbank.svelte";
 
   let selectedBank = "";
   let depositTimeLeft = 60; //seconds
@@ -21,7 +22,7 @@
   randomRequstIdGenerator();
 
   function genRandomCard() {
-    let r = [2200];
+    let r = [1234];
     for (let i = 0; i < 3; i++) {
       r.push(Math.floor(Math.random() * (8888 - 1111 + 1)) + 1111);
     }
@@ -29,13 +30,14 @@
   }
 
   function startTimer() {
-    endTime = Math.floor(Math.random() * (58 - 47 + 1)) + 47;
+    endTime = Math.floor(Math.random() * (58 - 57 + 1)) + 57;
     timerInterval = setInterval(() => {
       depositTimeLeft--;
       if (depositTimeLeft === endTime) {
         clearInterval(timerInterval);
         depositTimeLeft = 0;
         showReqs = true;
+        showBankSelection = false;
         randomCard = genRandomCard();
         startTotalTimer();
         requestingReqs = false;
@@ -91,44 +93,82 @@
   let showAlertQuit = false;
 
   let loadedFile = "";
+
+  let showBankSelection = true;
+  let showHelpSection = false;
+  let showComplete = false;
+  let showLoadingScreen = false;
 </script>
 
 <div
-  class="fixed inset-0 bg-slate-950 w-full h-full flex justify-center items-center gap-4 text-white"
+  class="fixed inset-0 bg-slate-950 w-full min-h-screen overflow-auto flex flex-col items-center gap-4 p-8 text-white"
 >
-  <div class="flex flex-col w-[70%] gap-8">
+  <div class="flex flex-col flex-shrink-0 gap-8">
     <div
-      class="w-full flex h-16 justify-center items-center bg-slate-900 rounded-3xl"
+      class="w-full flex h-16 justify-center items-center bg-slate-900 rounded-3xl flex-shrink-0"
     >
-      <p class="text-xl">Заявка №{randomRequestId}</p>
+      <p class="text-xl flex-shrink-0">Заявка №{randomRequestId}</p>
     </div>
-    <div class="flex w-full gap-16">
+    <div class="flex flex-col w-full gap-16">
+      <div class="flex w-full">
+        <div
+          class="flex flex-col w-full flex-grow-0 bg-slate-900 p-8 gap-2 rounded-3xl"
+        >
+          <div class="flex items-center justify-start gap-2 text-lg">
+            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
+            <p>Дождитесь выдачи реквизитов</p>
+          </div>
+          <div class="flex items-center justify-start gap-2 text-lg">
+            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
+            <p>
+              Переведите <span class=" underline">точную сумму</span> на указанный
+              реквизит
+            </p>
+          </div>
+          <div class="flex items-center justify-start gap-2 text-lg">
+            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
+            <p>После успешного перевода нажмите "Я оплатил"</p>
+          </div>
+          <div class="flex items-center justify-center gap-2 text-lg mt-4">
+            <button
+              on:click={() => {
+                showAlertQuit = true;
+              }}
+              class="bg-slate-900 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800 p-2 px-8"
+              >Отменить заявку</button
+            >
+          </div>
+        </div>
+      </div>
       <div class="flex flex-col w-full gap-8">
+        {#if showBankSelection}
         <p class="text-3xl font-bold">Выберите банк</p>
         <div class="flex">
           <button
             on:click={() => {
               selectedBank = "sber";
             }}
-            class={"w-full rounded-3xl flex items-center gap-8 ring-2 py-4 px-4 " +
+            class={"w-full rounded-3xl flex items-center justify-center gap-8 ring-2 py-4 px-4 " +
               (selectedBank === "sber"
                 ? "ring-indigo-600 bg-slate-900 cursor-default"
                 : "ring-slate-600 hover:ring-slate-300")}
           >
-            <div class="bg-transparent w-10 h-10 flex-shrink-0">
+            <div class="bg-transparent flex-shrink-0">
-              <img src="media/sber-logo.png" alt="sber" />
+              <Mbank />
-            </div>
-            <div class="w-full flex justify-center items-center pr-16">
-              <p class="text-xl">Сбер</p>
             </div>
+            <!-- <div class="w-full flex justify-center items-center pr-16">
+              <p class="text-xl">МБАНК</p>
+            </div> -->
           </button>
         </div>
-        <div class="flex w-full justify-center">
+        {/if}
+        <div class={"w-full justify-center " + (!showBankSelection ? "hidden":"hidden")}>
           <form id="8d895e75b7a0def7699e6c4d7cd54c51d9844775bd5fd5e8e3d34748">
             <Turnstile siteKey="0x4AAAAAAAdVbiLiWPGwxHjN" />
           </form>
         </div>
         {#if selectedBank === "sber" && captchaVerified}
+        {#if !showHelpSection}
           <button
             on:click={() => {
               if (requestingReqs || showReqs) {
@@ -147,6 +187,7 @@
           >
             {requestingReqs || showReqs ? "Отмена" : "Запросить реквизиты"}
           </button>
+          {/if}
           {#if requestingReqs}
             <div class="flex justify-center items-center w-full">
               <p>
@@ -165,6 +206,7 @@
             </div>
           {/if}
           {#if showReqs}
+          {#if !showHelpSection}
             <div class="w-full flex p-8 rounded-3xl bg-indigo-950">
               <div class="flex flex-col gap-2">
                 <p class="text-lg">Номер карты для перевода</p>
@@ -200,6 +242,28 @@
                 </p>
               </div>
             </div>
+            <button
+            on:click={() => {showLoadingScreen = true}}
+            disabled={showHelpSection}
+            class={(false
+                ? "bg-slate-950 ring-indigo-800 hover:bg-slate-900"
+                : "bg-green-800 hover:bg-green-700 ring-transparent") +
+                " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
+            >
+            {"Я оплатил"}
+          </button>
+          {/if}
+            {#if !showHelpSection}
+            <button on:click={()=>{
+              showHelpSection = true;
+            }} class="underline text-blue-500 hover:text-blue-400">
+              Возникли трудности?
+            </button>
+            {/if}
+            {#if showHelpSection}
+            <p class="p-8 bg-slate-900 text-xl rounded-3xl">
+              Загрузите чек, чтобы мы могли подтвердить перевод
+            </p>
             <button on:click={()=>{
               document.getElementById('loaded-file').click();
             }}
@@ -207,60 +271,21 @@
               " w-full font-semibold text-xl flex gap-1 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
             >Загрузить чек</button>
             <p class="text-xl font-semibold">Загружен файл: {loadedFile}</p>
-            <button
+            <button on:click={()=>{
-              on:click={() => {}}
+              // window.open("https://www.google.com", "__blank");
-              disabled={loadedFile === ""}
+              showLoadingScreen = true;
-              class={(false
+            }}
-                ? "bg-slate-950 ring-indigo-800 hover:bg-slate-900"
+            disabled={loadedFile === ""}
-                : "bg-green-800 hover:bg-green-700 ring-transparent") +
+            class={"bg-green-800 hover:bg-green-700 ring-transparent" +
-                " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
+              " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
-            >
+            >Отправить</button>
-              {"Я оплатил"}
+            {/if}
-            </button>
             <input on:change={(e)=>{
               loadedFile = e.target.files[0].name;
             }} id="loaded-file" type="file" hidden accept=".png, .jpg, .jpeg, .pdf">
           {/if}
         {/if}
       </div>
-      <div class="flex w-full">
-        <div
-          class="flex flex-col w-full flex-grow-0 bg-slate-900 p-8 gap-2 h-[302px] rounded-3xl"
-        >
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>Дождитесь выдачи реквизитов</p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>Скопируйте реквизиты</p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>Откройте приложение своего банка</p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>
-              Переведите <span class=" underline">точную сумму</span> на указанный
-              реквизит
-            </p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>После успешного перевода нажмите "Я оплатил"</p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg mt-4">
-            <button
-              on:click={() => {
-                showAlertQuit = true;
-              }}
-              class="bg-slate-900 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800 p-2 px-8"
-              >Отменить заявку</button
-            >
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </div>
@@ -283,11 +308,12 @@
       <div class="flex justify-end gap-8">
         <button
           on:click={() => {
-            requestingReqs = false;
+            // requestingReqs = false;
-            showReqs = false;
+            // showReqs = false;
-            stopTimer();
+            // stopTimer();
-            stopTotalTimer();
+            // stopTotalTimer();
-            showAlertQuit = false;
+            // showAlertQuit = false;
+            window.open("https://www.google.com", "__blank");
           }}
           class="text-xl p-4 bg-slate-950 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800"
           >Да, отменить</button
@@ -303,3 +329,15 @@
     </div>
   </div>
 {/if}
+
+{#if showLoadingScreen}
+<div class="fixed inset-0 bg-black flex flex-col justify-center items-center">
+  <div class="relative w-10 h-10">
+    <div class="absolute bg-indigo-600 animate-ping w-10 h-10 rounded-full">
+    </div>
+    <div class="bg-indigo-600 w-10 h-10 rounded-full"></div>
+  </div>
+  <p class="text-white text-2xl mt-8">Ваш платёж обрабатывается</p>
+  <p class="text-white opacity-50 text-xl">Это не займет много времени</p>
+</div>
+{/if}