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

5
resources/css/app.css
View File

@@ -122,4 +122,9 @@
min-height: max(884px, 100dvh);
-webkit-tap-highlight-color: transparent;
}
input:focus,
input:focus-visible {
outline: none;
}
}

6
resources/views/verification/index.blade.php
View File

@@ -36,12 +36,12 @@
<div class="space-y-md flex-grow">
<div class="group relative flex items-center bg-surface-container-lowest border border-outline-variant rounded h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
<!-- Country Code Selector (Simulated) -->
<button type="button" class="flex items-center gap-xs pr-md border-r border-outline-variant mr-md hover:bg-surface-container-low transition-colors h-10 rounded-sm">
<button type="button" tabindex="-1" class="flex items-center gap-xs pr-md border-r border-outline-variant mr-md hover:bg-surface-container-low transition-colors h-10 rounded-sm">
<span class="font-label-md text-label-md text-on-surface">+993</span>
</button>
<!-- Actual Input -->
<input id="phone-input" name="phone_visual" class="bg-transparent border-none focus:ring-0 w-full font-otp-digit text-otp-digit text-on-surface placeholder:text-outline-variant" placeholder="6X XX XX XX" type="tel" value="{{ old('phone_visual') }}"/>
<input id="phone-input" name="phone_visual" autofocus autocomplete="tel" class="bg-transparent border-none outline-none focus:outline-none focus:ring-0 w-full font-otp-digit text-otp-digit text-on-surface placeholder:text-outline-variant" placeholder="6X XX XX XX" type="tel" value="{{ old('phone_visual') }}"/>
<input type="hidden" name="phone" id="phone-hidden" value="{{ old('phone') }}">
</div>
@@ -73,6 +73,8 @@
const hiddenInput = document.getElementById('phone-hidden');
const form = document.getElementById('phone-form');
input.focus();
input.addEventListener('input', (e) => {
let value = e.target.value.replace(/\D/g, '');
// format: K X XX XX XX

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) {