a6ab9e395d
## 주요 변경사항
### 1. 미사용 페이지 아카이브 (24개)
- admin 폴더 전체 (8개) → .archived-admin/
- 분석 페이지 (5개) → .archived-*
- 공통 페이지 (5개) → .archived-*
- 대시보드 페이지 (2개) → .archived-*
- 기타 (4개) → .archived-*
### 2. 새로운 폴더 구조
```
pages/
├── dashboard.html (메인 대시보드)
├── work/ (작업 관련)
│ ├── report-create.html (작업보고서 작성)
│ ├── report-view.html (작업보고서 조회)
│ └── analysis.html (작업 분석)
├── admin/ (관리 기능)
│ ├── index.html (관리 메뉴 허브)
│ ├── projects.html (프로젝트 관리)
│ ├── workers.html (작업자 관리)
│ ├── codes.html (코드 관리)
│ └── accounts.html (계정 관리)
└── profile/ (프로필)
├── info.html (내 정보)
└── password.html (비밀번호 변경)
```
### 3. 파일명 개선
- group-leader.html → dashboard.html
- daily-work-report.html → work/report-create.html
- daily-work-report-viewer.html → work/report-view.html
- work-analysis.html → work/analysis.html
- work-management.html → admin/index.html
- project-management.html → admin/projects.html
- worker-management.html → admin/workers.html
- code-management.html → admin/codes.html
- my-profile.html → profile/info.html
- change-password.html → profile/password.html
- admin-settings.html → admin/accounts.html
### 4. 내부 링크 전면 수정
- navbar.html 프로필 메뉴 링크 업데이트
- dashboard.html 빠른 작업 링크 업데이트
- admin/* 페이지 간 링크 업데이트
- load-navbar.js 대시보드 경로 수정
영향받는 파일: 39개
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
391 lines
9.2 KiB
HTML
391 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🔐 비밀번호 변경 | (주)테크니컬코리아</title>
|
||
<link rel="stylesheet" href="/css/main-layout.css">
|
||
<script src="/js/auth-check.js" defer></script>
|
||
|
||
<style>
|
||
/* 페이지 전용 스타일 */
|
||
.password-page {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.page-title {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.page-title h1 {
|
||
font-size: 2rem;
|
||
color: #333;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.page-title p {
|
||
color: #666;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* 카드 스타일 */
|
||
.password-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-header {
|
||
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
|
||
color: white;
|
||
padding: 24px 32px;
|
||
}
|
||
|
||
.card-header h2 {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.card-body {
|
||
padding: 32px;
|
||
}
|
||
|
||
/* 알림 박스 */
|
||
.info-box {
|
||
background: #e3f2fd;
|
||
border: 1px solid #90caf9;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.info-box h4 {
|
||
margin: 0 0 12px 0;
|
||
color: #1565c0;
|
||
font-size: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.info-box ul {
|
||
margin: 0;
|
||
padding-left: 24px;
|
||
color: #0d47a1;
|
||
}
|
||
|
||
.info-box li {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* 폼 스타일 */
|
||
.password-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.form-group label {
|
||
font-weight: 600;
|
||
color: #333;
|
||
font-size: 0.95rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.input-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 14px 48px 14px 16px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.form-control:focus {
|
||
outline: none;
|
||
border-color: #ff9800;
|
||
box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
|
||
}
|
||
|
||
.password-toggle {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
font-size: 1.2rem;
|
||
opacity: 0.6;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.password-toggle:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 버튼 */
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 14px 28px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #ff9800;
|
||
color: white;
|
||
flex: 1;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #f57c00;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #e0e0e0;
|
||
}
|
||
|
||
/* 메시지 */
|
||
.message-box {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
animation: slideDown 0.3s ease-out;
|
||
}
|
||
|
||
.message-box.error {
|
||
background: #ffebee;
|
||
border: 1px solid #ffcdd2;
|
||
color: #c62828;
|
||
}
|
||
|
||
.message-box.success {
|
||
background: #e8f5e9;
|
||
border: 1px solid #c8e6c9;
|
||
color: #2e7d32;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 하단 링크 */
|
||
.back-link {
|
||
text-align: center;
|
||
margin-top: 32px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.back-link a {
|
||
color: #1976d2;
|
||
text-decoration: none;
|
||
font-size: 0.95rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.back-link a:hover {
|
||
color: #1565c0;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 반응형 */
|
||
@media (max-width: 768px) {
|
||
.password-page {
|
||
padding: 20px 16px;
|
||
}
|
||
|
||
.card-body {
|
||
padding: 24px;
|
||
}
|
||
|
||
.form-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="main-layout-no-sidebar">
|
||
<div id="navbar-container"></div>
|
||
|
||
<div class="password-page">
|
||
<div class="page-title">
|
||
<h1>🔐 비밀번호 변경</h1>
|
||
<p>계정 보안을 위해 정기적으로 비밀번호를 변경해주세요</p>
|
||
</div>
|
||
|
||
<div class="password-card">
|
||
<div class="card-header">
|
||
<h2>
|
||
<span>🔑</span>
|
||
<span>새 비밀번호 설정</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<!-- 메시지 영역 -->
|
||
<div id="message-area"></div>
|
||
|
||
<!-- 안내 정보 -->
|
||
<div class="info-box">
|
||
<h4>
|
||
<span>ℹ️</span>
|
||
<span>비밀번호 요구사항</span>
|
||
</h4>
|
||
<ul>
|
||
<li>최소 6자 이상 입력해주세요</li>
|
||
<li>영문 대/소문자, 숫자, 특수문자를 조합하면 더 안전합니다</li>
|
||
<li>개인정보나 쉬운 단어는 피해주세요</li>
|
||
<li>이전 비밀번호와 다르게 설정해주세요</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 비밀번호 변경 폼 -->
|
||
<form id="changePasswordForm" class="password-form">
|
||
<div class="form-group">
|
||
<label for="currentPassword">
|
||
<span>🔓</span>
|
||
<span>현재 비밀번호</span>
|
||
</label>
|
||
<div class="input-wrapper">
|
||
<input
|
||
type="password"
|
||
id="currentPassword"
|
||
class="form-control"
|
||
placeholder="현재 비밀번호를 입력하세요"
|
||
required
|
||
autocomplete="current-password"
|
||
/>
|
||
<button type="button" class="password-toggle" data-target="currentPassword">👁️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="newPassword">
|
||
<span>🔐</span>
|
||
<span>새 비밀번호</span>
|
||
</label>
|
||
<div class="input-wrapper">
|
||
<input
|
||
type="password"
|
||
id="newPassword"
|
||
class="form-control"
|
||
placeholder="새 비밀번호를 입력하세요"
|
||
required
|
||
autocomplete="new-password"
|
||
/>
|
||
<button type="button" class="password-toggle" data-target="newPassword">👁️</button>
|
||
</div>
|
||
<div id="passwordStrength"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="confirmPassword">
|
||
<span>✅</span>
|
||
<span>새 비밀번호 확인</span>
|
||
</label>
|
||
<div class="input-wrapper">
|
||
<input
|
||
type="password"
|
||
id="confirmPassword"
|
||
class="form-control"
|
||
placeholder="새 비밀번호를 다시 입력하세요"
|
||
required
|
||
autocomplete="new-password"
|
||
/>
|
||
<button type="button" class="password-toggle" data-target="confirmPassword">👁️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||
<span>🔑</span>
|
||
<span>비밀번호 변경</span>
|
||
</button>
|
||
<button type="button" class="btn btn-secondary" id="resetBtn">
|
||
초기화
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="back-link">
|
||
<a href="javascript:history.back()">
|
||
<span>←</span>
|
||
<span>이전 페이지로 돌아가기</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="/js/load-navbar.js"></script>
|
||
<script type="module" src="/js/change-password.js"></script>
|
||
</body>
|
||
</html> |