improve code

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

822
package-lock.json generated Normal file
View File

@@ -0,0 +1,822 @@
{
"name": "sms",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"devDependencies": {
"@fontsource/inter": "^5.2.8",
"@fontsource/jetbrains-mono": "^5.2.8",
"@fontsource/plus-jakarta-sans": "^5.2.8",
"@material-symbols/svg-400": "^0.44.8",
"@tailwindcss/vite": "^4.0.0",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^3.1",
"tailwindcss": "^4.0.0",
"vite": "^8.0.0"
}
},
"node_modules/@fontsource/inter": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
"integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
"dev": true,
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/jetbrains-mono": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
"dev": true,
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/plus-jakarta-sans": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/plus-jakarta-sans/-/plus-jakarta-sans-5.2.8.tgz",
"integrity": "sha512-P5qE49fqdeD+7DXH1KBxmMPlB17LTz1zvBhFH0tFzfnYTKVJVyb0pR6plh0ZGXxcB+Oayb54FZZw3V42/DawTw==",
"dev": true,
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/remapping": {
"version": "2.3.5",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@material-symbols/svg-400": {
"version": "0.44.8",
"resolved": "https://registry.npmjs.org/@material-symbols/svg-400/-/svg-400-0.44.8.tgz",
"integrity": "sha512-p4Lebev1M3UfRQug5rRV4Yci/j72+Pf4e3lZtyA0eLNAxUtYBiTlwMJHYHe8Pzw8QTU8KvZwULvRFxmO2rmWXA==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/@oxc-project/types": {
"version": "0.130.0",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/Boshen"
}
},
"node_modules/@rolldown/binding-darwin-x64": {
"version": "1.0.1",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^20.19.0 || >=22.12.0"
}
},
"node_modules/@rolldown/pluginutils": {
"version": "1.0.1",
"dev": true,
"license": "MIT"
},
"node_modules/@tailwindcss/node": {
"version": "4.3.0",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/remapping": "^2.3.5",
"enhanced-resolve": "^5.21.0",
"jiti": "^2.6.1",
"lightningcss": "1.32.0",
"magic-string": "^0.30.21",
"source-map-js": "^1.2.1",
"tailwindcss": "4.3.0"
}
},
"node_modules/@tailwindcss/oxide": {
"version": "4.3.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 20"
},
"optionalDependencies": {
"@tailwindcss/oxide-android-arm64": "4.3.0",
"@tailwindcss/oxide-darwin-arm64": "4.3.0",
"@tailwindcss/oxide-darwin-x64": "4.3.0",
"@tailwindcss/oxide-freebsd-x64": "4.3.0",
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
"@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
"@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
"@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
"@tailwindcss/oxide-linux-x64-musl": "4.3.0",
"@tailwindcss/oxide-wasm32-wasi": "4.3.0",
"@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
"@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
}
},
"node_modules/@tailwindcss/oxide-darwin-x64": {
"version": "4.3.0",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/vite": {
"version": "4.3.0",
"dev": true,
"license": "MIT",
"dependencies": {
"@tailwindcss/node": "4.3.0",
"@tailwindcss/oxide": "4.3.0",
"tailwindcss": "4.3.0"
},
"peerDependencies": {
"vite": "^5.2.0 || ^6 || ^7 || ^8"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/chalk": {
"version": "4.1.2",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/chalk/node_modules/supports-color": {
"version": "7.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/cliui": {
"version": "8.0.1",
"dev": true,
"license": "ISC",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.1",
"wrap-ansi": "^7.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"dev": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"dev": true,
"license": "MIT"
},
"node_modules/concurrently": {
"version": "9.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"chalk": "4.1.2",
"rxjs": "7.8.2",
"shell-quote": "1.8.3",
"supports-color": "8.1.1",
"tree-kill": "1.2.2",
"yargs": "17.7.2"
},
"bin": {
"conc": "dist/bin/concurrently.js",
"concurrently": "dist/bin/concurrently.js"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
}
},
"node_modules/detect-libc": {
"version": "2.1.2",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">=8"
}
},
"node_modules/emoji-regex": {
"version": "8.0.0",
"dev": true,
"license": "MIT"
},
"node_modules/enhanced-resolve": {
"version": "5.21.5",
"dev": true,
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.4",
"tapable": "^2.3.3"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/escalade": {
"version": "3.2.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/fdir": {
"version": "6.5.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"picomatch": "^3 || ^4"
},
"peerDependenciesMeta": {
"picomatch": {
"optional": true
}
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/get-caller-file": {
"version": "2.0.5",
"dev": true,
"license": "ISC",
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"dev": true,
"license": "ISC"
},
"node_modules/has-flag": {
"version": "4.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/is-fullwidth-code-point": {
"version": "3.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/jiti": {
"version": "2.7.0",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
},
"node_modules/laravel-vite-plugin": {
"version": "3.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"picocolors": "^1.0.0",
"tinyglobby": "^0.2.12",
"vite-plugin-full-reload": "^1.1.0"
},
"bin": {
"clean-orphaned-assets": "bin/clean.js"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"peerDependencies": {
"fontaine": "^0.5.0",
"vite": "^8.0.0"
},
"peerDependenciesMeta": {
"fontaine": {
"optional": true
}
}
},
"node_modules/lightningcss": {
"version": "1.32.0",
"dev": true,
"license": "MPL-2.0",
"dependencies": {
"detect-libc": "^2.0.3"
},
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"lightningcss-android-arm64": "1.32.0",
"lightningcss-darwin-arm64": "1.32.0",
"lightningcss-darwin-x64": "1.32.0",
"lightningcss-freebsd-x64": "1.32.0",
"lightningcss-linux-arm-gnueabihf": "1.32.0",
"lightningcss-linux-arm64-gnu": "1.32.0",
"lightningcss-linux-arm64-musl": "1.32.0",
"lightningcss-linux-x64-gnu": "1.32.0",
"lightningcss-linux-x64-musl": "1.32.0",
"lightningcss-win32-arm64-msvc": "1.32.0",
"lightningcss-win32-x64-msvc": "1.32.0"
}
},
"node_modules/lightningcss-darwin-x64": {
"version": "1.32.0",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/magic-string": {
"version": "0.30.21",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
}
},
"node_modules/nanoid": {
"version": "3.3.12",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/picocolors": {
"version": "1.1.1",
"dev": true,
"license": "ISC"
},
"node_modules/picomatch": {
"version": "4.0.4",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/postcss": {
"version": "8.5.15",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.12",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/require-directory": {
"version": "2.1.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/rolldown": {
"version": "1.0.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@oxc-project/types": "=0.130.0",
"@rolldown/pluginutils": "^1.0.0"
},
"bin": {
"rolldown": "bin/cli.mjs"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"optionalDependencies": {
"@rolldown/binding-android-arm64": "1.0.1",
"@rolldown/binding-darwin-arm64": "1.0.1",
"@rolldown/binding-darwin-x64": "1.0.1",
"@rolldown/binding-freebsd-x64": "1.0.1",
"@rolldown/binding-linux-arm-gnueabihf": "1.0.1",
"@rolldown/binding-linux-arm64-gnu": "1.0.1",
"@rolldown/binding-linux-arm64-musl": "1.0.1",
"@rolldown/binding-linux-ppc64-gnu": "1.0.1",
"@rolldown/binding-linux-s390x-gnu": "1.0.1",
"@rolldown/binding-linux-x64-gnu": "1.0.1",
"@rolldown/binding-linux-x64-musl": "1.0.1",
"@rolldown/binding-openharmony-arm64": "1.0.1",
"@rolldown/binding-wasm32-wasi": "1.0.1",
"@rolldown/binding-win32-arm64-msvc": "1.0.1",
"@rolldown/binding-win32-x64-msvc": "1.0.1"
}
},
"node_modules/rxjs": {
"version": "7.8.2",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/shell-quote": {
"version": "1.8.3",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/string-width": {
"version": "4.2.3",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/strip-ansi": {
"version": "6.0.1",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/supports-color": {
"version": "8.1.1",
"dev": true,
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
"node_modules/tailwindcss": {
"version": "4.3.0",
"dev": true,
"license": "MIT"
},
"node_modules/tapable": {
"version": "2.3.3",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/tinyglobby": {
"version": "0.2.16",
"dev": true,
"license": "MIT",
"dependencies": {
"fdir": "^6.5.0",
"picomatch": "^4.0.4"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/tree-kill": {
"version": "1.2.2",
"dev": true,
"license": "MIT",
"bin": {
"tree-kill": "cli.js"
}
},
"node_modules/tslib": {
"version": "2.8.1",
"dev": true,
"license": "0BSD"
},
"node_modules/vite": {
"version": "8.0.13",
"dev": true,
"license": "MIT",
"dependencies": {
"lightningcss": "^1.32.0",
"picomatch": "^4.0.4",
"postcss": "^8.5.14",
"rolldown": "1.0.1",
"tinyglobby": "^0.2.16"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"funding": {
"url": "https://github.com/vitejs/vite?sponsor=1"
},
"optionalDependencies": {
"fsevents": "~2.3.3"
},
"peerDependencies": {
"@types/node": "^20.19.0 || >=22.12.0",
"@vitejs/devtools": "^0.1.18",
"esbuild": "^0.27.0 || ^0.28.0",
"jiti": ">=1.21.0",
"less": "^4.0.0",
"sass": "^1.70.0",
"sass-embedded": "^1.70.0",
"stylus": ">=0.54.8",
"sugarss": "^5.0.0",
"terser": "^5.16.0",
"tsx": "^4.8.1",
"yaml": "^2.4.2"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
},
"@vitejs/devtools": {
"optional": true
},
"esbuild": {
"optional": true
},
"jiti": {
"optional": true
},
"less": {
"optional": true
},
"sass": {
"optional": true
},
"sass-embedded": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"terser": {
"optional": true
},
"tsx": {
"optional": true
},
"yaml": {
"optional": true
}
}
},
"node_modules/vite-plugin-full-reload": {
"version": "1.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"picocolors": "^1.0.0",
"picomatch": "^2.3.1"
}
},
"node_modules/vite-plugin-full-reload/node_modules/picomatch": {
"version": "2.3.2",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/wrap-ansi": {
"version": "7.0.0",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
"node_modules/y18n": {
"version": "5.0.8",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=10"
}
},
"node_modules/yargs": {
"version": "17.7.2",
"dev": true,
"license": "MIT",
"dependencies": {
"cliui": "^8.0.1",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.1.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/yargs-parser": {
"version": "21.1.1",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=12"
}
}
}
}

View File

@@ -7,6 +7,10 @@
"dev": "vite" "dev": "vite"
}, },
"devDependencies": { "devDependencies": {
"@fontsource/inter": "^5.2.8",
"@fontsource/jetbrains-mono": "^5.2.8",
"@fontsource/plus-jakarta-sans": "^5.2.8",
"@material-symbols/svg-400": "^0.44.8",
"@tailwindcss/vite": "^4.0.0", "@tailwindcss/vite": "^4.0.0",
"concurrently": "^9.0.1", "concurrently": "^9.0.1",
"laravel-vite-plugin": "^3.1", "laravel-vite-plugin": "^3.1",

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M179-179q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm0-254q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm0-254q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm254 0q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm254 0q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19ZM433.5-433.5Q414-453 414-480t19.5-46.5Q453-546 480-546t46.5 19.5Q546-507 546-480t-19.5 46.5Q507-414 480-414t-46.5-19.5ZM520-160v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>

After

Width:  |  Height:  |  Size: 864 B

View File

@@ -0,0 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m274-450 248 248-42 42-320-320 320-320 42 42-248 248h526v60H274Z"/></svg>

After

Width:  |  Height:  |  Size: 189 B

View File

@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><path fill="currentColor" d="m19 9-1.25-2.75L15 5l2.75-1.25L19 1l1.25 2.75L23 5l-2.75 1.25Zm0 14-1.25-2.75L15 19l2.75-1.25L19 15l1.25 2.75L23 19l-2.75 1.25ZM9 20l-2.5-5.5L1 12l5.5-2.5L9 4l2.5 5.5L17 12l-5.5 2.5Zm0-4.85L10 13l2.15-1L10 11 9 8.85 8 11l-2.15 1L8 13ZM9 12Z"/></svg>

After

Width:  |  Height:  |  Size: 360 B

1
public/icons/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z"/></svg>

After

Width:  |  Height:  |  Size: 178 B

View File

@@ -0,0 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m421-298 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z"/></svg>

After

Width:  |  Height:  |  Size: 375 B

View File

@@ -0,0 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M300-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h440q24 0 42 18t18 42v560q0 24-18 42t-42 18H300Zm0-60h440v-560H300v560ZM180-80q-24 0-42-18t-18-42v-620h60v620h500v60H180Zm120-180v-560 560Z"/></svg>

After

Width:  |  Height:  |  Size: 313 B

1
public/icons/info.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M453-280h60v-240h-60v240Zm50.5-323.2q9.5-9.2 9.5-22.8 0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2t23.52-9.2ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/></svg>

After

Width:  |  Height:  |  Size: 688 B

View File

@@ -1,3 +1,4 @@
@import './fonts.css';
@import 'tailwindcss'; @import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -6,6 +7,119 @@
@source '../**/*.js'; @source '../**/*.js';
@theme { @theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', --color-on-tertiary-fixed-variant: #7f2928;
'Segoe UI Symbol', 'Noto Color Emoji'; --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;
}
} }

47
resources/css/fonts.css Normal file
View File

@@ -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');
}

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>

View File

@@ -4,116 +4,7 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OTP Tassyklamak</title> <title>OTP Tassyklamak</title>
<!-- Fonts --> @vite(['resources/css/app.css', 'resources/js/app.js'])
<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>
@yield('styles') @yield('styles')
</head> </head>
<body class="bg-background text-on-background font-body-md min-h-screen flex flex-col items-center overflow-x-hidden"> <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') @yield('scripts')
</body> </body>
</html> </html>

View File

@@ -36,14 +36,14 @@
@section('content') @section('content')
<canvas class="confetti-canvas" id="confetti"></canvas> <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 --> <!-- Success Indicator -->
<div class="mb-xl relative"> <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)]"> <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> </div>
<!-- Decorative Sparks --> <!-- 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> </div>
<!-- Typography Block --> <!-- Typography Block -->
@@ -60,9 +60,17 @@
<span class="font-mono text-4xl font-bold text-primary tracking-widest" id="couponCode">{{ $code }}</span> <span class="font-mono text-4xl font-bold text-primary tracking-widest" id="couponCode">{{ $code }}</span>
</div> </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()"> <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> <span id="copyText">Kody göçür</span>
</button> </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> </div>
<!-- Shadow Depth --> <!-- 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> <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 --> <!-- 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"> <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"> <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ň. Bu kupon diňe öňümizdäki 24 sagadyň dowamynda hereket edýär. Arzanladyşdan peýdalanmak üçin töleg wagtynda ulanmagy ýatdan çykarmaň.
</p> </p>
@@ -151,11 +159,11 @@
const btnIcon = document.getElementById('copyIcon'); const btnIcon = document.getElementById('copyIcon');
btnText.innerText = 'Göçürildi!'; btnText.innerText = 'Göçürildi!';
btnIcon.innerText = 'check'; btnIcon.innerHTML = document.getElementById('icon-check').innerHTML;
setTimeout(() => { setTimeout(() => {
btnText.innerText = 'Kody göçür'; btnText.innerText = 'Kody göçür';
btnIcon.innerText = 'content_copy'; btnIcon.innerHTML = document.getElementById('icon-content_copy').innerHTML;
}, 2000); }, 2000);
} }

View File

@@ -34,7 +34,7 @@
<form action="{{ route('verification.send') }}" method="POST" class="flex-grow flex flex-col" id="phone-form"> <form action="{{ route('verification.send') }}" method="POST" class="flex-grow flex flex-col" id="phone-form">
@csrf @csrf
<div class="space-y-md flex-grow"> <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) --> <!-- 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" 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> <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> <p class="text-error text-sm">{{ $message }}</p>
@enderror @enderror
<div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded-DEFAULT border border-secondary-container"> <div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded border border-secondary-container">
<span class="material-symbols-outlined text-on-secondary-container mt-0.5" data-icon="info">info</span> <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"> <p class="font-body-sm text-body-sm text-on-secondary-container">
Tassyklaýyş maksady bilen size bir SMS kod iberiler. Tassyklaýyş maksady bilen size bir SMS kod iberiler.
</p> </p>

View File

@@ -13,7 +13,7 @@
@section('header-back') @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"> <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> </a>
@endsection @endsection
@@ -29,7 +29,7 @@
<!-- Hero Content --> <!-- Hero Content -->
<div class="mt-2xl text-center"> <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"> <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> </div>
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Belgiňizi tassyklaň</h2> <h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Belgiňizi tassyklaň</h2>
@@ -57,10 +57,10 @@
<!-- OTP Inputs --> <!-- OTP Inputs -->
<div class="mt-2xl flex justify-center gap-md" id="otp-container"> <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 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-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 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 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 border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
</div> </div>
<!-- Actions --> <!-- Actions -->
@@ -81,9 +81,9 @@
</div> </div>
<!-- Info Card --> <!-- 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"> <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"> <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. SMS kody 2 minutdan 5 minuda çenli baryp biler, garaşmagyňyzy Sizden haýyş edýäris.
</p> </p>