1 files changed, 91 insertions, 0 deletions
diff --git a/public/offline.html b/public/offline.html
new file mode 100644
index 0000000..15bcb0c
--- /dev/null
+++ b/public/offline.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="ja">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="theme-color" content="#4CAF50" />
+		<title>Kioku - Offline</title>
+		<style>
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			body {
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+					Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+				background-color: #f5f5f5;
+				min-height: 100vh;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.container {
+				text-align: center;
+				padding: 2rem;
+				max-width: 400px;
+			}
+			.icon {
+				width: 80px;
+				height: 80px;
+				margin-bottom: 1.5rem;
+			}
+			h1 {
+				color: #333;
+				margin-bottom: 1rem;
+				font-size: 1.5rem;
+			}
+			p {
+				color: #666;
+				margin-bottom: 1.5rem;
+				line-height: 1.6;
+			}
+			button {
+				background-color: #4caf50;
+				color: white;
+				border: none;
+				padding: 0.75rem 1.5rem;
+				border-radius: 4px;
+				font-size: 1rem;
+				cursor: pointer;
+				transition: background-color 0.2s;
+			}
+			button:hover {
+				background-color: #45a049;
+			}
+			button:active {
+				background-color: #3d8b40;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<svg
+				class="icon"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 512 512"
+			>
+				<rect width="512" height="512" rx="64" fill="#4CAF50" />
+				<text
+					x="256"
+					y="340"
+					font-family="Arial, sans-serif"
+					font-size="280"
+					font-weight="bold"
+					fill="white"
+					text-anchor="middle"
+				>
+					K
+				</text>
+			</svg>
+			<h1>You're Offline</h1>
+			<p>
+				It looks like you've lost your internet connection. Please check your
+				connection and try again.
+			</p>
+			<button type="button" onclick="window.location.reload()">
+				Try Again
+			</button>
+		</div>
+	</body>
+</html>