Marks/hpp-platform
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ds

Browse Source
This commit is contained in:
you 2024-07-11 22:21:43 +03:00
parent b0bf630dca
commit ea880508ce
1 changed files with 105 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/Pages/DepositPage.svelte
View File

@ -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">
<img src="media/sber-logo.png" alt="sber" />
</div>
<div class="w-full flex justify-center items-center pr-16">
<p class="text-xl">Сбер</p>
<div class="bg-transparent flex-shrink-0">
<Mbank />
</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
on:click={() => {}}
disabled={loadedFile === ""}
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>
<button on:click={()=>{
// window.open("https://www.google.com", "__blank");
showLoadingScreen = true;
}}
disabled={loadedFile === ""}
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"}
>Отправить</button>
{/if}
<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;
showReqs = false;
stopTimer();
stopTotalTimer();
showAlertQuit = false;
// requestingReqs = false;
// showReqs = false;
// stopTimer();
// stopTotalTimer();
// 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}