good so far

This commit is contained in:
Mekan1206
2026-05-19 18:35:25 +05:00
parent 68ff1c4c39
commit 61c1c2bef9
8 changed files with 68 additions and 38 deletions

View File

@@ -31,9 +31,9 @@
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary-container mb-lg">
<span class="material-symbols-outlined text-primary text-4xl" data-icon="app_registration">app_registration</span>
</div>
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Verify your number</h2>
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Belgiňizi tassyklaň</h2>
<p class="font-body-md text-body-md text-on-surface-variant max-w-[280px] mx-auto">
Enter the 4-digit code sent to <span class="font-semibold text-on-surface">{{ $phone }}</span>
Şu belgä iberilen 4 sanly kody giriziň: <span class="font-semibold text-on-surface">+933 {{ $phone }}</span>
</p>
</div>
@@ -43,6 +43,12 @@
</div>
@endif
@if (session('status'))
<div class="text-primary text-center mt-md">
{{ session('status') }}
</div>
@endif
<form action="{{ route('verification.verify') }}" method="POST" id="otp-form">
@csrf
<input type="hidden" name="phone" value="{{ $phone }}">
@@ -59,22 +65,25 @@
<!-- Actions -->
<div class="mt-2xl space-y-md">
<button type="button" id="verify-btn" class="glow-button w-full h-14 bg-primary text-on-primary font-label-md text-label-md rounded-full hover:opacity-90 active:scale-[0.98] transition-all">
Verify
Tassykla
</button>
<div class="text-center">
<button type="button" class="font-label-md text-label-md text-primary hover:underline transition-all">
Resend Code
</button>
</div>
</div>
</form>
<div class="text-center mt-md">
<form action="{{ route('verification.resend') }}" method="POST" class="inline">
@csrf
<button type="submit" class="font-label-md text-label-md text-primary hover:underline transition-all">
Kody täzeden iber
</button>
</form>
</div>
<!-- Info Card -->
<div class="mt-auto mb-xl p-md rounded-DEFAULT border border-outline-variant bg-surface-container-low">
<div class="flex gap-sm">
<span class="material-symbols-outlined text-on-surface-variant" data-icon="info">info</span>
<p class="font-body-sm text-body-sm text-on-surface-variant">
We use this to keep your account secure. Your number will not be shared with others.
Muny hasabyňyzyň howpsuzlygyny üpjün etmek üçin ulanýarys. Belgiňiz başgalar bilen paýlaşylmaz.
</p>
</div>
</div>
@@ -108,13 +117,13 @@
if (code.length === 4) {
hiddenOtp.value = code;
verifyBtn.innerHTML = '<span class="flex items-center justify-center gap-sm"><svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Verifying...</span>';
verifyBtn.innerHTML = '<span class="flex items-center justify-center gap-sm"><svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Tassyklanýar...</span>';
setTimeout(() => {
form.submit();
}, 500); // small delay to show animation
} else {
alert('Please enter a 4-digit code.');
alert('Haýyş, 4 sanly kody giriziň.');
}
});
</script>