ed2a3f28bf
- 세션 설정: 90일 유지, SameSite=Lax (QR 스캔 시 쿠키 전송) - 적립 성공 시 세션에 유저 정보 저장 (3곳) - /claim 자동적립: 세션에 유저가 있으면 입력 없이 바로 적립 - /logout 라우트 추가, 마이페이지 헤더에 로그아웃 버튼 - /sw.js, /privacy 라우트 추가 - 고객용 템플릿 6개에 PWA 메타 태그 + 서비스 워커 등록 - 적립 성공 화면에 PWA 설치 유도 배너 (iOS/Android 분기) - session 변수명 충돌 수정 (db_session으로 변경) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
111 lines
4.1 KiB
HTML
111 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#6366f1">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="청춘약국">
|
|
<link rel="manifest" href="/static/manifest.json">
|
|
<link rel="apple-touch-icon" href="/static/icons/icon-192.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
|
|
<title>오류 - 청춘약국</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #f5f7fa;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.error-container {
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
padding: 48px 32px;
|
|
max-width: 420px;
|
|
width: 100%;
|
|
text-align: center;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.error-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto 24px auto;
|
|
background: linear-gradient(135deg, #f03e3e 0%, #d6336c 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40px;
|
|
}
|
|
|
|
.error-title {
|
|
color: #212529;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.error-message {
|
|
color: #868e96;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
margin-bottom: 32px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.btn-home {
|
|
display: inline-block;
|
|
padding: 16px 32px;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
border-radius: 14px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.2px;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.24);
|
|
}
|
|
|
|
.btn-home:active {
|
|
transform: scale(0.98);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="error-container">
|
|
<div class="error-icon">⚠️</div>
|
|
<div class="error-title">문제가 발생했어요</div>
|
|
<div class="error-message">{{ message }}</div>
|
|
<div style="display: flex; flex-direction: column; gap: 12px;">
|
|
<a href="/my-page/kakao/start" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; background: #FEE500; color: #191919; text-decoration: none; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; transition: all 0.2s ease;">
|
|
<svg width="18" height="18" viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 1C4.477 1 0 4.477 0 8.5c0 2.58 1.693 4.847 4.243 6.134l-1.084 3.97a.3.3 0 00.457.338L7.7 16.392c.75.112 1.52.17 2.3.17 5.523 0 10-3.477 10-7.562C20 4.477 15.523 1 10 1z" fill="#191919"/>
|
|
</svg>
|
|
내 마일리지 확인하기
|
|
</a>
|
|
<a href="/" class="btn-home">홈으로 이동</a>
|
|
</div>
|
|
</div>
|
|
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
|
|
</body>
|
|
</html>
|