| 1 |
<!DOCTYPE html> |
| 2 |
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
| 3 |
<head> |
| 4 |
<meta charset="UTF-8" /> |
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 |
<title>Region Not Available</title> |
| 7 |
<style> |
| 8 |
:root { |
| 9 |
--bg: #0b0f14; |
| 10 |
--card: #111827; |
| 11 |
--accent: #38bdf8; |
| 12 |
--muted: #94a3b8; |
| 13 |
--text: #e5e7eb; |
| 14 |
--danger: #ef4444; |
| 15 |
--warning: #f59e0b; |
| 16 |
} |
| 17 |
|
| 18 |
* { box-sizing: border-box; margin: 0; padding: 0; } |
| 19 |
|
| 20 |
body { |
| 21 |
margin: 0; |
| 22 |
min-height: 100vh; |
| 23 |
display: grid; |
| 24 |
place-items: center; |
| 25 |
background: |
| 26 |
radial-gradient(1200px 600px at 10% -10%, #0ea5e955, transparent 40%), |
| 27 |
radial-gradient(800px 400px at 90% 10%, #22d3ee33, transparent 45%), |
| 28 |
var(--bg); |
| 29 |
color: var(--text); |
| 30 |
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; |
| 31 |
padding: 20px; |
| 32 |
} |
| 33 |
|
| 34 |
.card { |
| 35 |
width: min(600px, 100%); |
| 36 |
background: linear-gradient(180deg, #0f172a, var(--card)); |
| 37 |
border: 1px solid #1f2937; |
| 38 |
border-radius: 16px; |
| 39 |
padding: 40px; |
| 40 |
box-shadow: |
| 41 |
0 20px 40px rgba(0,0,0,.45), |
| 42 |
inset 0 1px 0 rgba(255,255,255,.04); |
| 43 |
text-align: center; |
| 44 |
} |
| 45 |
|
| 46 |
.icon { |
| 47 |
width: 80px; |
| 48 |
height: 80px; |
| 49 |
margin: 0 auto 24px; |
| 50 |
border-radius: 50%; |
| 51 |
background: linear-gradient(135deg, var(--warning), #dc2626); |
| 52 |
display: flex; |
| 53 |
align-items: center; |
| 54 |
justify-content: center; |
| 55 |
font-size: 40px; |
| 56 |
} |
| 57 |
|
| 58 |
h1 { |
| 59 |
font-size: 28px; |
| 60 |
font-weight: 700; |
| 61 |
margin-bottom: 16px; |
| 62 |
color: var(--text); |
| 63 |
} |
| 64 |
|
| 65 |
.country-badge { |
| 66 |
display: inline-block; |
| 67 |
padding: 8px 16px; |
| 68 |
background: rgba(245, 158, 11, 0.1); |
| 69 |
border: 1px solid rgba(245, 158, 11, 0.3); |
| 70 |
border-radius: 8px; |
| 71 |
color: var(--warning); |
| 72 |
font-weight: 600; |
| 73 |
margin: 16px 0; |
| 74 |
} |
| 75 |
|
| 76 |
p { |
| 77 |
font-size: 16px; |
| 78 |
line-height: 1.6; |
| 79 |
color: var(--muted); |
| 80 |
margin-bottom: 12px; |
| 81 |
} |
| 82 |
|
| 83 |
.back-link { |
| 84 |
display: inline-block; |
| 85 |
margin-top: 24px; |
| 86 |
padding: 12px 24px; |
| 87 |
background: linear-gradient(135deg, var(--accent), #0ea5e9); |
| 88 |
color: white; |
| 89 |
text-decoration: none; |
| 90 |
border-radius: 8px; |
| 91 |
font-weight: 600; |
| 92 |
transition: opacity 0.2s; |
| 93 |
} |
| 94 |
|
| 95 |
.back-link:hover { |
| 96 |
opacity: 0.9; |
| 97 |
} |
| 98 |
</style> |
| 99 |
</head> |
| 100 |
<body> |
| 101 |
<div class="card"> |
| 102 |
<div class="icon">🌍</div> |
| 103 |
<h1>Service Not Available in Your Region</h1> |
| 104 |
|
| 105 |
<div class="country-badge" th:if="${countryName}"> |
| 106 |
<span th:text="${countryName}">Your Country</span> |
| 107 |
<span th:if="${countryCode}">(<span th:text="${countryCode}"></span>)</span> |
| 108 |
</div> |
| 109 |
|
| 110 |
<p>Unfortunately, we do not currently offer our services in your location.</p> |
| 111 |
<p>We're working hard to expand our availability to more regions soon.</p> |
| 112 |
|
| 113 |
<a href="/" class="back-link">← Back to Home</a> |
| 114 |
</div> |
| 115 |
</body> |
| 116 |
</html> |
| 117 |
|