498 lines
12 KiB
HTML
498 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>내차는언제타냐 통합확장기</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
background: #f4f6f9;
|
|
padding: 20px;
|
|
width: 320px;
|
|
height: 100vh;
|
|
/* overflow: hidden; */
|
|
overflow-y: auto;
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: #2c3e50;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
}
|
|
input[type="email"], input[type="password"] {
|
|
width: 100%;
|
|
padding: 10px 40px 10px 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
.form-group input:focus {
|
|
border-color: #3498db;
|
|
outline: none;
|
|
}
|
|
.tooltip {
|
|
font-size: 11px;
|
|
color: #999;
|
|
margin-top: 3px;
|
|
}
|
|
.error {
|
|
color: red;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.checkbox-group input {
|
|
margin-right: 6px;
|
|
}
|
|
.btn {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background: #3498db;
|
|
border: none;
|
|
color: white;
|
|
font-weight: bold;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
.btn:disabled {
|
|
background: #bdc3c7;
|
|
}
|
|
#password-toggle {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
cursor: pointer;
|
|
color: #555;
|
|
user-select: none;
|
|
}
|
|
.status {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
.loading {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #3498db;
|
|
}
|
|
.level {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #27ae60;
|
|
}
|
|
.debug-info {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
}
|
|
.debug-info button {
|
|
display: block;
|
|
margin-top: 8px;
|
|
padding: 6px 12px;
|
|
font-size: 11px;
|
|
background: #007acc;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.debug-info button:hover {
|
|
background: #005a9e;
|
|
}
|
|
|
|
/* 로그인 화면과 사용자 정보 화면 여백 추가 */
|
|
#login-section {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
#user-info-section {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
/* 설정 버튼 스타일 */
|
|
.settings-btn {
|
|
background: #9b59b6;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.settings-btn:hover {
|
|
background: #8e44ad;
|
|
}
|
|
|
|
/* 관리 버튼 스타일 */
|
|
.management-buttons {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.management-btn {
|
|
background: #27ae60;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.management-btn:hover {
|
|
background: #219a52;
|
|
}
|
|
|
|
/* 모달 스타일 수정 */
|
|
.modal {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0,0,0,0.5);
|
|
display: none;
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
background-color: #fefefe;
|
|
margin: 15px auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 80%;
|
|
max-width: 900px;
|
|
min-width: 400px;
|
|
min-height: 300px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.modal-header {
|
|
cursor: move;
|
|
padding: 10px;
|
|
margin: -20px -20px 20px -20px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
border-radius: 5px 5px 0 0;
|
|
user-select: none;
|
|
}
|
|
|
|
.resizer {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #6c757d;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
cursor: se-resize;
|
|
border-radius: 0 0 5px 0;
|
|
}
|
|
|
|
.resizer:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.close {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
color: white;
|
|
}
|
|
|
|
.close:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
height: calc(100% - 56px); /* 헤더 높이를 제외한 나머지 */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 테이블 컨테이너 높이 조정 */
|
|
.banned-words-table-container {
|
|
height: calc(100% - 80px); /* 통계 정보 높이를 제외한 나머지 */
|
|
overflow: auto;
|
|
}
|
|
|
|
#banned-words-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 테이블 헤더 고정 */
|
|
#banned-words-table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
background: #f8f9fa;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 통계 정보 스타일 */
|
|
.stats-info {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #495057;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 테이블 스타일 */
|
|
.banned-words-table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#banned-words-table th,
|
|
#banned-words-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 12px 8px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#banned-words-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#banned-words-table tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* 순번 열 스타일 */
|
|
#banned-words-table th:first-child,
|
|
#banned-words-table td:first-child {
|
|
width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 액션 버튼 스타일 */
|
|
.action-btn {
|
|
padding: 6px 10px;
|
|
margin: 2px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.view-btn {
|
|
background: #3498db;
|
|
color: white;
|
|
}
|
|
|
|
.edit-btn {
|
|
background: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
.delete-btn {
|
|
background: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 키프리스 결과 스타일 */
|
|
.kipris-results-container {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.kipris-item {
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.kipris-item h4 {
|
|
margin: 0 0 10px 0;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.kipris-field {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.kipris-field strong {
|
|
color: #34495e;
|
|
}
|
|
|
|
.kipris-drawing {
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin-top: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 등급 표시 스타일 */
|
|
.grade-display {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #495057;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>내차는언제타냐 통합확장 로그인</h2>
|
|
|
|
<!-- 디버그 정보 -->
|
|
<div class="debug-info" id="debug-info">
|
|
초기화 중...
|
|
</div>
|
|
|
|
<!-- 로그인 화면 -->
|
|
<div id="login-section">
|
|
|
|
<div class="form-group">
|
|
<input type="email" id="email" placeholder="이메일 주소" />
|
|
<div class="tooltip">가입한 이메일 주소를 입력하세요</div>
|
|
<div class="error" id="email-error"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="password" id="password" placeholder="비밀번호" />
|
|
<span id="password-toggle">👁️</span>
|
|
<div class="tooltip">영문, 숫자 포함 6자 이상 입력</div>
|
|
<div class="error" id="password-error"></div>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="save-login" />
|
|
<label for="save-login">로그인 정보 저장</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="auto-login" />
|
|
<label for="auto-login">자동 로그인</label>
|
|
</div>
|
|
|
|
<button class="btn" id="login-btn">로그인</button>
|
|
|
|
<div class="loading" id="loading" style="display: none;">🔄 로그인 중입니다...</div>
|
|
<div class="status" id="status"></div>
|
|
<div class="level" id="membership-level"></div>
|
|
|
|
</div>
|
|
|
|
<!-- 로그인 후 사용자 정보 출력 화면 -->
|
|
<div id="user-info-section" style="display: none;">
|
|
<h3>👋 내차는언제타냐 통합확장기</h3>
|
|
<p><strong>이메일:</strong> <span id="user-email"></span></p>
|
|
<p><strong>회원등급:</strong> <span id="user-level"></span></p>
|
|
<p><strong>오늘 호출량:</strong> <span id="user-usage"></span>회</p>
|
|
<p><strong>등급 만료일:</strong> <span id="user-expire"></span></p>
|
|
|
|
<!-- 휴식 시간 카운트다운 -->
|
|
<div id="break-timer-section" style="margin: 15px 0; padding: 10px; background: #e8f5e8; border-radius: 6px; border: 1px solid #c3e6c3;">
|
|
<p style="margin: 0; font-weight: bold; color: #2d5a2d;">⏰ 다음 휴식까지</p>
|
|
<p id="break-countdown" style="margin: 5px 0 0 0; font-size: 16px; font-weight: bold; color: #1e7e1e;">계산 중...</p>
|
|
</div>
|
|
|
|
<!-- 관리 버튼들 -->
|
|
<div class="management-buttons">
|
|
<button class="btn management-btn" id="settings-btn">⚙️ 설정</button>
|
|
<button class="btn management-btn" id="banned-words-btn">🚫 금지어 관리</button>
|
|
<button class="btn management-btn" id="sayings-btn">💬 타냐대장경</button>
|
|
<!-- <button class="btn management-btn" id="zzim-btn" disabled>💝 찜관리</button> -->
|
|
<button class="btn management-btn" id="zzim-btn">💝 찜관리</button>
|
|
<button class="btn management-btn" id="manual-btn">📚 매뉴얼</button>
|
|
|
|
</div>
|
|
|
|
<button class="btn" id="logout-btn">로그아웃</button>
|
|
</div>
|
|
|
|
<!-- 스크립트를 일반 스크립트로 변경 -->
|
|
<script src="popup.js"></script>
|
|
|
|
<!-- 금지어 관리 모달 -->
|
|
<div id="banned-words-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>🚫 금지어 관리</h3>
|
|
<span class="close" id="close-banned-words">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="banned-words-stats" class="stats-info">
|
|
<!-- 통계 정보가 여기에 표시됩니다 -->
|
|
</div>
|
|
<div class="banned-words-table-container">
|
|
<table id="banned-words-table">
|
|
<thead>
|
|
<tr>
|
|
<th>순번</th>
|
|
<th>금지어</th>
|
|
<th>등급</th>
|
|
<th>작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="banned-words-tbody">
|
|
<!-- 동적으로 생성됨 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="loading" id="banned-words-loading" style="display: none;">
|
|
🔄 금지어 목록을 불러오는 중...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 키프리스 결과 모달 -->
|
|
<div id="kipris-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>🔍 키프리스 검색 결과</h3>
|
|
<span class="close" id="close-kipris">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="kipris-word-title"></div>
|
|
<div class="kipris-results-container">
|
|
<div id="kipris-results">
|
|
<!-- 동적으로 생성됨 -->
|
|
</div>
|
|
</div>
|
|
<div class="loading" id="kipris-loading" style="display: none;">
|
|
🔄 키프리스 결과를 불러오는 중...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|