135 lines
6.5 KiB
PHP
135 lines
6.5 KiB
PHP
<!DOCTYPE html>
|
|
<html class="light" lang="tk">
|
|
<head>
|
|
<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>
|
|
@yield('styles')
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-md min-h-screen flex flex-col items-center overflow-x-hidden">
|
|
<!-- TopAppBar Section -->
|
|
<header class="flex items-center justify-between px-container-padding h-16 w-full z-50 fixed top-0 bg-background">
|
|
@yield('header-back')
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-primary">Tassyklamak</h1>
|
|
<div class="w-10"></div> <!-- Spacer for center alignment -->
|
|
</header>
|
|
|
|
@yield('content')
|
|
|
|
<!-- Subtle atmospheric background elements -->
|
|
<div class="fixed top-0 right-0 -z-10 w-64 h-64 bg-primary/5 rounded-full blur-[80px] pointer-events-none"></div>
|
|
<div class="fixed bottom-0 left-0 -z-10 w-96 h-96 bg-secondary-container/10 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
@yield('scripts')
|
|
</body>
|
|
</html> |