nurmuhammet/daragt-coupon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

good

Browse Source
This commit is contained in:
Mekan1206
2026-05-19 20:17:11 +05:00
parent a40eee7171
commit 9870048a5f
3 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
resources/views/verification/verify.blade.php
View File

@@ -3,6 +3,7 @@
@section('styles')
<style>
.otp-input:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.1);
}
.glow-button {
@@ -57,10 +58,10 @@
<!-- OTP Inputs -->
<div class="mt-2xl flex justify-center gap-md" id="otp-container">
<input autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input autofocus autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
</div>
<!-- Actions -->
@@ -99,6 +100,13 @@
const form = document.getElementById('otp-form');
const verifyBtn = document.getElementById('verify-btn');
const focusFirstOtp = () => {
const firstEmpty = [...inputs].find((input) => !input.value) ?? inputs[0];
firstEmpty?.focus();
};
focusFirstOtp();
inputs.forEach((input, index) => {
input.addEventListener('input', (e) => {
if (e.target.value.length === 1 && index < inputs.length - 1) {