First commit

2026-08-15 19:50:54 +09:00
commit 5ff20429d6
6 changed files with 287 additions and 0 deletions
@@ -0,0 +1,115 @@
+<!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>