82220a4a44
- GUI: SALES_COLUMNS 상수 정의, 칼럼 폭/윈도우 위치 gui_settings.json에 저장 - 전화번호 입력: 적립페이지/마이페이지에서 010 고정 + 뒷번호만 입력 - 적립페이지: MSSQL SALE_SUB에서 구매 품목 조회 및 토글 표시 - 마이페이지: 적립 내역 탭 시 품목 상세 AJAX 조회 (캐시 적용) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
197 lines
5.8 KiB
HTML
197 lines
5.8 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">
|
|
<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;
|
|
}
|
|
|
|
.login-container {
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
padding: 48px 32px;
|
|
max-width: 420px;
|
|
width: 100%;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.logo {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 20px auto;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.header-title {
|
|
color: #212529;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.header-subtitle {
|
|
color: #868e96;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
color: #495057;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 16px 18px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 14px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
letter-spacing: -0.3px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: #6366f1;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
color: #adb5bd;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.btn-submit {
|
|
width: 100%;
|
|
padding: 18px;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 14px;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
letter-spacing: -0.3px;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.24);
|
|
}
|
|
|
|
.btn-submit:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-back {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
color: #6366f1;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.btn-back:active {
|
|
color: #8b5cf6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="header">
|
|
<div class="logo">📱</div>
|
|
<div class="header-title">마이페이지</div>
|
|
<div class="header-subtitle">전화번호로 포인트 조회</div>
|
|
</div>
|
|
|
|
<form method="GET" action="/my-page">
|
|
<div class="form-group">
|
|
<label for="phone">전화번호</label>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-size: 18px; font-weight: 600; color: #495057; white-space: nowrap; padding: 16px 0 16px 4px;">010 -</span>
|
|
<input type="tel" id="phoneInput"
|
|
placeholder="0000-0000"
|
|
inputmode="numeric"
|
|
maxlength="9"
|
|
autocomplete="tel"
|
|
required
|
|
style="flex: 1;">
|
|
<input type="hidden" id="phone" name="phone">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit">
|
|
조회하기
|
|
</button>
|
|
</form>
|
|
|
|
<a href="/" class="btn-back">← 홈으로</a>
|
|
</div>
|
|
|
|
<script>
|
|
// 뒷번호 자동 하이픈 (010 고정)
|
|
const phoneInput = document.getElementById('phoneInput');
|
|
const phoneHidden = document.getElementById('phone');
|
|
|
|
phoneInput.addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/[^0-9]/g, '');
|
|
if (value.length <= 4) {
|
|
e.target.value = value;
|
|
} else {
|
|
e.target.value = value.slice(0, 4) + '-' + value.slice(4, 8);
|
|
}
|
|
});
|
|
|
|
// 제출 시 010 합쳐서 hidden 필드에 전달
|
|
phoneInput.closest('form').addEventListener('submit', function() {
|
|
const raw = phoneInput.value.replace(/[^0-9]/g, '');
|
|
phoneHidden.value = '010' + raw;
|
|
});
|
|
|
|
phoneInput.focus();
|
|
</script>
|
|
</body>
|
|
</html>
|