improve code

2026-05-19 20:11:21 +05:00
parent 77fab714a6
commit a40eee7171
22 changed files with 1040 additions and 131 deletions
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,4 @@
+@import './fonts.css';
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -6,6 +7,119 @@
@source '../**/*.js';

@theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    --color-on-tertiary-fixed-variant: #7f2928;
+    --color-on-primary-fixed-variant: #005137;
+    --color-tertiary-container: #ba5551;
+    --color-background: #f8f9ff;
+    --color-secondary-fixed: #d5e6df;
+    --color-on-tertiary-container: #fffbff;
+    --color-tertiary-fixed: #ffdad7;
+    --color-surface: #f8f9ff;
+    --color-on-primary-container: #f5fff7;
+    --color-tertiary: #9b3e3b;
+    --color-surface-container-high: #dfe9fa;
+    --color-on-primary-fixed: #002114;
+    --color-outline-variant: #bccac0;
+    --color-inverse-on-surface: #eaf1ff;
+    --color-primary-fixed: #85f8c4;
+    --color-on-error: #ffffff;
+    --color-surface-container: #e5eeff;
+    --color-on-secondary-fixed: #101e1a;
+    --color-on-background: #121c28;
+    --color-primary-container: #00855d;
+    --color-tertiary-fixed-dim: #ffb3ae;
+    --color-on-secondary-fixed-variant: #3b4a44;
+    --color-on-tertiary-fixed: #410004;
+    --color-on-tertiary: #ffffff;
+    --color-outline: #6d7a72;
+    --color-surface-container-highest: #d9e3f4;
+    --color-error: #ba1a1a;
+    --color-primary: #006948;
+    --color-surface-tint: #006c4a;
+    --color-surface-container-low: #eef4ff;
+    --color-surface-container-lowest: #ffffff;
+    --color-error-container: #ffdad6;
+    --color-on-secondary-container: #566660;
+    --color-on-primary: #ffffff;
+    --color-surface-variant: #d9e3f4;
+    --color-secondary: #52625c;
+    --color-on-error-container: #93000a;
+    --color-inverse-primary: #68dba9;
+    --color-on-surface: #121c28;
+    --color-secondary-container: #d3e3dc;
+    --color-inverse-surface: #27313e;
+    --color-on-secondary: #ffffff;
+    --color-surface-bright: #f8f9ff;
+    --color-primary-fixed-dim: #68dba9;
+    --color-on-surface-variant: #3d4a42;
+    --color-secondary-fixed-dim: #bacac3;
+    --color-surface-dim: #d1dbec;
+
+    --radius: 1rem;
+    --radius-lg: 2rem;
+    --radius-xl: 3rem;
+
+    --spacing-sm: 12px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-gutter: 12px;
+    --spacing-container-padding: 20px;
+    --spacing-md: 16px;
+    --spacing-base: 8px;
+    --spacing-xs: 4px;
+    --spacing-lg: 24px;
+
+    /* Restore layout widths — custom --spacing-* must not shrink max-w-* utilities */
+    --max-width-sm: 24rem;
+    --max-width-md: 28rem;
+    --max-width-lg: 32rem;
+    --max-width-xl: 36rem;
+    --max-width-2xl: 42rem;
+
+    --font-body-md: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-headline-xl: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-label-md: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-headline-lg-mobile: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-headline-lg: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-otp-digit: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-body-sm: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+    --text-body-md: 16px;
+    --text-body-md--line-height: 24px;
+    --text-body-md--font-weight: 400;
+
+    --text-headline-xl: 32px;
+    --text-headline-xl--line-height: 40px;
+    --text-headline-xl--letter-spacing: -0.02em;
+    --text-headline-xl--font-weight: 700;
+
+    --text-label-md: 14px;
+    --text-label-md--line-height: 20px;
+    --text-label-md--letter-spacing: 0.05em;
+    --text-label-md--font-weight: 600;
+
+    --text-headline-lg-mobile: 22px;
+    --text-headline-lg-mobile--line-height: 28px;
+    --text-headline-lg-mobile--font-weight: 600;
+
+    --text-headline-lg: 24px;
+    --text-headline-lg--line-height: 32px;
+    --text-headline-lg--letter-spacing: -0.01em;
+    --text-headline-lg--font-weight: 600;
+
+    --text-otp-digit: 28px;
+    --text-otp-digit--line-height: 36px;
+    --text-otp-digit--font-weight: 600;
+
+    --text-body-sm: 14px;
+    --text-body-sm--line-height: 20px;
+    --text-body-sm--font-weight: 400;
+}
+
+@layer base {
+    body {
+        min-height: max(884px, 100dvh);
+        -webkit-tap-highlight-color: transparent;
+    }
 }
--- a/resources/css/fonts.css
+++ b/resources/css/fonts.css
@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/fonts/inter-400.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/fonts/inter-600.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/fonts/plus-jakarta-sans-600.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/plus-jakarta-sans-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url('/fonts/plus-jakarta-sans-800.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
+}
--- a/resources/views/components/icon.blade.php
+++ b/resources/views/components/icon.blade.php
@@ -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>
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -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>
--- a/resources/views/verification/congratulations.blade.php
+++ b/resources/views/verification/congratulations.blade.php
@@ -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);
    }

--- a/resources/views/verification/index.blade.php
+++ b/resources/views/verification/index.blade.php
@@ -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>
--- a/resources/views/verification/verify.blade.php
+++ b/resources/views/verification/verify.blade.php
@@ -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>