<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.search-box {
display: flex;
margin-bottom: 20px;
position: relative;
}
#search-input {
flex: 1;
padding: 10px 40px 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
#search-btn {
padding: 10px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
#search-btn:hover {
background-color: #2980b9;
}
.search-clear {
position: absolute;
right: 120px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #999;
cursor: pointer;
font-size: 16px;
display: none;
}
.help-nav {
display: flex;
margin-bottom: 20px;
}
.help-categories {
width: 250px;
border-right: 1px solid #ddd;
padding-right: 15px;
}
.category {
cursor: pointer;
padding: 8px 10px;
border-radius: 4px;
transition: background-color 0.3s;
margin-bottom: 5px;
}
.category:hover {
background-color: #f0f0f0;
}
.category.active {
background-color: #e6f2ff;
color: #3498db;
font-weight: bold;
}
.help-content {
flex: 1;
padding-left: 20px;
}
.topic {
display: none;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.topic h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.topic.active {
display: block;
}
#search-results {
display: none;
}
.result-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: background-color 0.3s;
margin-bottom: 15px;
border-left: 3px solid #3498db;
background-color: #f9f9f9;
}
.result-item:hover {
background-color: #f0f0f0;
}
.highlight {
background-color: #ffff99;
font-weight: bold;
}
.back-btn {
display: none;
padding: 8px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
}
.back-btn:hover {
background-color: #2980b9;
}
.search-status {
margin-top: 10px;
font-style: italic;
color: #666;
}
.no-results {
text-align: center;
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-top: 20px;
}
.search-suggestion {
margin-top: 10px;
}
.search-suggestion span {
cursor: pointer;
color: #3498db;
margin-right: 10px;
text-decoration: underline;
}
.search-filters {
display: flex;
margin: 10px 0;
flex-wrap: wrap;
}
.search-filter {
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 15px;
margin-right: 10px;
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.search-filter:hover, .search-filter.active {
background-color: #3498db;
color: white;
}
.category-badge {
display: inline-block;
padding: 2px 8px;
background-color: #e6f2ff;
color: #3498db;
border-radius: 10px;
font-size: 12px;
margin-left: 10px;
}
.search-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>도움말 시스템</h1>
<div class="search-box">
<input type="text" id="search-input" placeholder="도움말 검색...">
<button class="search-clear" id="clear-search"><i class="fas fa-times"></i></button>
<button id="search-btn"><i class="fas fa-search"></i> 검색</button>
</div>
<button class="back-btn" id="back-to-help">도움말 목록으로 돌아가기</button>
<div id="search-results">
<div class="search-info">
<h2>검색 결과</h2>
<div class="search-status" id="search-status"></div>
</div>
<div class="search-filters" id="search-filters">
<div class="search-filter active" data-filter="all">전체</div>
<div class="search-filter" data-filter="getting-started">시작하기</div>
<div class="search-filter" data-filter="account">계정 관리</div>
<div class="search-filter" data-filter="features">주요 기능</div>
<div class="search-filter" data-filter="troubleshooting">문제 해결</div>
</div>
<div id="results-list"></div>
<div class="search-suggestion" id="search-suggestion"></div>
</div>
<div class="help-nav" id="help-content">
<div class="help-categories">
<h2>카테고리</h2>
<div class="category active" data-category="getting-started">시작하기</div>
<div class="category" data-category="account">계정 관리</div>
<div class="category" data-category="features">주요 기능</div>
<div class="category" data-category="troubleshooting">문제 해결</div>
</div>
<div class="help-content">
<!-- 시작하기 카테고리 -->
<div class="topic active" data-category="getting-started" id="intro">
<h3>프로그램 소개</h3>
<p>이 프로그램은 사용자가 쉽게 작업을 수행할 수 있도록 설계되었습니다. 주요 기능과 인터페이스에 대한 설명을 제공합니다.</p>
<p>사용자 친화적인 인터페이스와 함께 다양한 기능을 탐색하고 활용할 수 있습니다. 이 도움말 시스템은 프로그램 사용 중에 발생할 수 있는 모든 질문에 대한 답변을 제공합니다.</p>
</div>
<div class="topic" data-category="getting-started" id="installation">
<h3>설치 방법</h3>
<p>프로그램을 설치하기 위한 단계별 지침을 제공합니다.</p>
<ol>
<li>웹사이트에서 설치 파일을 다운로드합니다.</li>
<li>다운로드한 파일을 실행합니다.</li>
<li>설치 마법사의 지시를 따릅니다.</li>
<li>설치가 완료되면 프로그램을 실행합니다.</li>
</ol>
<p>설치 중 문제가 발생하면 '문제 해결' 섹션을 참조하시기 바랍니다.</p>
</div>
<div class="topic" data-category="getting-started" id="system-requirements">
<h3>시스템 요구사항</h3>
<p>프로그램을 실행하기 위한 최소 시스템 요구사항입니다:</p>
<ul>
<li>운영체제: Windows 10 이상 / macOS 10.14 이상 / Linux (Ubuntu 18.04 이상)</li>
<li>프로세서: 2GHz 이상의 듀얼 코어 프로세서</li>
<li>메모리: 4GB RAM</li>
<li>저장공간: 500MB 이상의 여유 공간</li>
<li>인터넷 연결: 초기 설정 및 업데이트를 위한 인터넷 연결 필요</li>
</ul>
</div>
<!-- 계정 관리 카테고리 -->
<div class="topic" data-category="account" id="create-account">
<h3>계정 생성</h3>
<p>새 계정을 만들기 위한 절차를 설명합니다.</p>
<ol>
<li>프로그램 실행 후 '계정 생성' 버튼을 클릭합니다.</li>
<li>필요한 정보(이름, 이메일, 비밀번호)를 입력합니다.</li>
<li>이메일 인증을 완료합니다.</li>
<li>계정 설정을 확인하고 완료합니다.</li>
</ol>
<p>계정 생성 시 강력한 비밀번호를 사용하는 것을 권장합니다.</p>
</div>
<div class="topic" data-category="account" id="login">
<h3>로그인</h3>
<p>프로그램에 로그인하는 방법을 설명합니다.</p>
<ol>
<li>프로그램을 실행하면 로그인 화면이 표시됩니다.</li>
<li>등록된 이메일과 비밀번호를 입력합니다.</li>
<li>'로그인' 버튼을 클릭합니다.</li>
</ol>
<p>'자동 로그인' 옵션을 선택하면 다음 실행 시 자동으로 로그인됩니다. 공용 컴퓨터에서는 이 옵션을 사용하지 마세요.</p>
</div>
<div class="topic" data-category="account" id="password">
<h3>비밀번호 재설정</h3>
<p>비밀번호를 잊어버렸을 때 재설정하는 방법을 안내합니다.</p>
<ol>
<li>로그인 화면에서 '비밀번호 찾기' 링크를 클릭합니다.</li>
<li>등록된 이메일 주소를 입력합니다.</li>
<li>이메일로 전송된 링크를 통해 새 비밀번호를 설정합니다.</li>
</ol>
<p>비밀번호 재설정 이메일이 오지 않는 경우, 스팸 폴더를 확인하거나 지원팀에 문의하세요.</p>
</div>
<div class="topic" data-category="account" id="profile-settings">
<h3>프로필 설정</h3>
<p>사용자 프로필 정보를 업데이트하는 방법을 안내합니다.</p>
<ol>
<li>로그인 후 오른쪽 상단의 프로필 아이콘을 클릭합니다.</li>
<li>'설정' 또는 '프로필 관리'를 선택합니다.</li>
<li>개인 정보, 알림 설정, 테마 등을 변경할 수 있습니다.</li>
<li>'저장' 버튼을 클릭하여 변경사항을 적용합니다.</li>
</ol>
</div>
<!-- 주요 기능 카테고리 -->
<div class="topic" data-category="features" id="feature1">
<h3>기능 1: 데이터 관리</h3>
<p>데이터를 효율적으
