116 lines
3.1 KiB
HTML
116 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="color-scheme" content="light" />
|
|
<title>__STATUS__</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f5f5f5;
|
|
--ink-strong: #555;
|
|
--ink: #666;
|
|
--ink-soft: #888;
|
|
--ink-muted: #999;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px 24px;
|
|
background:
|
|
radial-gradient(ellipse 42% 38% at 96% 92%, rgba(93, 220, 232, 0.28), transparent 72%),
|
|
radial-gradient(ellipse 34% 25% at 72% 103%, rgba(176, 183, 244, 0.24), transparent 72%),
|
|
radial-gradient(ellipse 14% 22% at 100% 54%, rgba(92, 214, 231, 0.13), transparent 74%),
|
|
radial-gradient(ellipse 18% 14% at 55% 94%, rgba(202, 181, 241, 0.12), transparent 75%),
|
|
linear-gradient(145deg, #f8f9fc 0%, var(--bg) 48%, #f2f6fb 100%);
|
|
background-attachment: fixed;
|
|
color: var(--ink);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
width: min(100%, 560px);
|
|
}
|
|
|
|
.icon {
|
|
display: block;
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: 0 auto 28px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.code {
|
|
margin: 0 0 12px;
|
|
font-size: clamp(3rem, 10vw, 4.5rem);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
color: var(--ink-strong);
|
|
}
|
|
|
|
.title {
|
|
margin: 0 0 14px;
|
|
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.message {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: max(24px, env(safe-area-inset-bottom));
|
|
left: 24px;
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
color: var(--ink-muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<svg class="icon" viewBox="0 0 120 120" aria-hidden="true">
|
|
<circle cx="60" cy="60" r="54" fill="none" stroke="currentColor" stroke-width="5" />
|
|
<circle cx="42" cy="48" r="5" fill="currentColor" />
|
|
<circle cx="78" cy="48" r="5" fill="currentColor" />
|
|
<path
|
|
d="M38 78c8-10 36-10 44 0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="5"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
|
|
<p class="code">__STATUS__</p>
|
|
<h1 class="title">__ERROR_TITLE__</h1>
|
|
<p class="message">
|
|
We're working to resolve the issue.<br />
|
|
Please try again shortly.
|
|
</p>
|
|
</main>
|
|
<footer>© 2026 takitsme. All rights reserved.</footer>
|
|
</body>
|
|
</html>
|