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

improve code

Browse Source
This commit is contained in:
Mekan1206
2026-05-19 20:11:21 +05:00
parent 77fab714a6
commit a40eee7171
22 changed files with 1040 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
resources/views/components/icon.blade.php Normal file
View File

@@ -0,0 +1,16 @@
@props(['name', 'class' => ''])
@php
$path = public_path("icons/{$name}.svg");
if (! is_file($path)) {
throw new InvalidArgumentException("Icon [{$name}] not found.");
}
$svg = file_get_contents($path);
$svg = preg_replace('/<svg\b/', '<svg class="w-full h-full"', $svg, 1);
@endphp
<span {{ $attributes->merge(['class' => 'inline-flex shrink-0 '.$class]) }} aria-hidden="true">
{!! $svg !!}
</span>

113
resources/views/layouts/app.blade.php
View File

@@ -4,116 +4,7 @@
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OTP Tassyklamak</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-tertiary-fixed-variant": "#7f2928",
"on-primary-fixed-variant": "#005137",
"tertiary-container": "#ba5551",
"background": "#f8f9ff",
"secondary-fixed": "#d5e6df",
"on-tertiary-container": "#fffbff",
"tertiary-fixed": "#ffdad7",
"surface": "#f8f9ff",
"on-primary-container": "#f5fff7",
"tertiary": "#9b3e3b",
"surface-container-high": "#dfe9fa",
"on-primary-fixed": "#002114",
"outline-variant": "#bccac0",
"inverse-on-surface": "#eaf1ff",
"primary-fixed": "#85f8c4",
"on-error": "#ffffff",
"surface-container": "#e5eeff",
"on-secondary-fixed": "#101e1a",
"on-background": "#121c28",
"primary-container": "#00855d",
"tertiary-fixed-dim": "#ffb3ae",
"on-secondary-fixed-variant": "#3b4a44",
"on-tertiary-fixed": "#410004",
"on-tertiary": "#ffffff",
"outline": "#6d7a72",
"surface-container-highest": "#d9e3f4",
"error": "#ba1a1a",
"primary": "#006948",
"surface-tint": "#006c4a",
"surface-container-low": "#eef4ff",
"surface-container-lowest": "#ffffff",
"error-container": "#ffdad6",
"on-secondary-container": "#566660",
"on-primary": "#ffffff",
"surface-variant": "#d9e3f4",
"secondary": "#52625c",
"on-error-container": "#93000a",
"inverse-primary": "#68dba9",
"on-surface": "#121c28",
"secondary-container": "#d3e3dc",
"inverse-surface": "#27313e",
"on-secondary": "#ffffff",
"surface-bright": "#f8f9ff",
"primary-fixed-dim": "#68dba9",
"on-surface-variant": "#3d4a42",
"secondary-fixed-dim": "#bacac3",
"surface-dim": "#d1dbec"
},
"borderRadius": {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
"spacing": {
"sm": "12px",
"xl": "32px",
"2xl": "48px",
"gutter": "12px",
"container-padding": "20px",
"md": "16px",
"base": "8px",
"xs": "4px",
"lg": "24px"
},
"fontFamily": {
"body-md": ["Inter"],
"headline-xl": ["Plus Jakarta Sans"],
"label-md": ["Inter"],
"headline-lg-mobile": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"otp-digit": ["Plus Jakarta Sans"],
"body-sm": ["Inter"],
"mono": ["JetBrains Mono"]
},
"fontSize": {
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"headline-lg-mobile": ["22px", {"lineHeight": "28px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"otp-digit": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
min-height: max(884px, 100dvh);
-webkit-tap-highlight-color: transparent;
}
</style>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@yield('styles')
</head>
<body class="bg-background text-on-background font-body-md min-h-screen flex flex-col items-center overflow-x-hidden">
@@ -132,4 +23,4 @@
@yield('scripts')
</body>
</html>
</html>

22
resources/views/verification/congratulations.blade.php
View File

@@ -36,14 +36,14 @@
@section('content')
<canvas class="confetti-canvas" id="confetti"></canvas>
<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full">
<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full max-w-md mx-auto">
<!-- Success Indicator -->
<div class="mb-xl relative">
<div class="w-24 h-24 bg-primary-fixed rounded-full flex items-center justify-center text-primary-container shadow-[0_0_40px_rgba(0,105,72,0.2)]">
<span class="material-symbols-outlined !text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<x-icon name="check_circle" class="w-12 h-12 text-primary-container" />
</div>
<!-- Decorative Sparks -->
<div class="absolute -top-2 -right-2 text-primary opacity-50"><span class="material-symbols-outlined !text-xl">auto_awesome</span></div>
<div class="absolute -top-2 -right-2 text-primary opacity-50"><x-icon name="auto_awesome" class="w-5 h-5" /></div>
</div>
<!-- Typography Block -->
@@ -60,9 +60,17 @@
<span class="font-mono text-4xl font-bold text-primary tracking-widest" id="couponCode">{{ $code }}</span>
</div>
<button class="flex items-center gap-2 text-primary font-label-md text-label-md hover:bg-primary-container/10 px-md py-sm rounded-full transition-colors active:scale-95" onclick="copyCode()">
<span class="material-symbols-outlined" id="copyIcon">content_copy</span>
<span id="copyIcon" class="inline-flex">
<x-icon name="content_copy" class="w-5 h-5" data-icon="content_copy" />
</span>
<span id="copyText">Kody göçür</span>
</button>
<template id="icon-check">
<x-icon name="check" class="w-5 h-5" />
</template>
<template id="icon-content_copy">
<x-icon name="content_copy" class="w-5 h-5" />
</template>
</div>
<!-- Shadow Depth -->
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-primary/10 blur-xl rounded-full -z-10"></div>
@@ -77,7 +85,7 @@
<!-- Info Card -->
<div class="mt-2xl w-full max-w-sm bg-secondary-container/30 border border-secondary-container rounded-lg p-md flex gap-md items-start">
<span class="material-symbols-outlined text-secondary">info</span>
<x-icon name="info" class="w-6 h-6 text-secondary shrink-0" />
<p class="font-body-sm text-body-sm text-on-secondary-container">
Bu kupon diňe öňümizdäki 24 sagadyň dowamynda hereket edýär. Arzanladyşdan peýdalanmak üçin töleg wagtynda ulanmagy ýatdan çykarmaň.
</p>
@@ -151,11 +159,11 @@
const btnIcon = document.getElementById('copyIcon');
btnText.innerText = 'Göçürildi!';
btnIcon.innerText = 'check';
btnIcon.innerHTML = document.getElementById('icon-check').innerHTML;
setTimeout(() => {
btnText.innerText = 'Kody göçür';
btnIcon.innerText = 'content_copy';
btnIcon.innerHTML = document.getElementById('icon-content_copy').innerHTML;
}, 2000);
}

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

@@ -34,7 +34,7 @@
<form action="{{ route('verification.send') }}" method="POST" class="flex-grow flex flex-col" id="phone-form">
@csrf
<div class="space-y-md flex-grow">
<div class="group relative flex items-center bg-surface-container-lowest border border-outline-variant rounded-DEFAULT h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
<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">
<span class="font-label-md text-label-md text-on-surface">+993</span>
@@ -49,8 +49,8 @@
<p class="text-error text-sm">{{ $message }}</p>
@enderror
<div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded-DEFAULT border border-secondary-container">
<span class="material-symbols-outlined text-on-secondary-container mt-0.5" data-icon="info">info</span>
<div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded border border-secondary-container">
<x-icon name="info" class="w-6 h-6 text-on-secondary-container mt-0.5" />
<p class="font-body-sm text-body-sm text-on-secondary-container">
Tassyklaýyş maksady bilen size bir SMS kod iberiler.
</p>

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

@@ -13,7 +13,7 @@
@section('header-back')
<a href="{{ route('verification.index') }}" class="hover:opacity-80 transition-opacity active:scale-95 transition-transform flex items-center justify-center p-2 rounded-full">
<span class="material-symbols-outlined text-primary" data-icon="arrow_back">arrow_back</span>
<x-icon name="arrow_back" class="w-6 h-6 text-primary" />
</a>
@endsection
@@ -29,7 +29,7 @@
<!-- Hero Content -->
<div class="mt-2xl text-center">
<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>
<x-icon name="app_registration" class="w-10 h-10 text-primary" />
</div>
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Belgiňizi tassyklaň</h2>
@@ -57,10 +57,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-DEFAULT 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-DEFAULT 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-DEFAULT 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-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
<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"/>
</div>
<!-- Actions -->
@@ -81,9 +81,9 @@
</div>
<!-- Info Card -->
<div class="mt-auto mb-xl p-md rounded-DEFAULT border border-outline-variant bg-surface-container-low">
<div class="mt-auto mb-xl p-md rounded 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>
<x-icon name="info" class="w-6 h-6 text-on-surface-variant" />
<p class="font-body-sm text-body-sm text-on-surface-variant">
SMS kody 2 minutdan 5 minuda çenli baryp biler, garaşmagyňyzy Sizden haýyş edýäris.
</p>