-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpopup.html
More file actions
227 lines (200 loc) · 8.87 KB
/
popup.html
File metadata and controls
227 lines (200 loc) · 8.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt Navigator</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="popup-container">
<header>
<h1>Prompt Navigator</h1>
</header>
<div class="tabs">
<button class="tab-button active" data-tab="all">나의 프롬프트</button>
<button class="tab-button" data-tab="settings">설정</button>
<button class="tab-button" data-tab="help">도움말</button>
</div>
<div class="tab-content active" id="tab-all">
<div class="search-container">
<input type="text" id="searchInput" class="search-input" placeholder="정규식으로 프롬프트 검색..." />
</div>
<div id="historyList" class="history-list">
<div class="loading">불러오는 중...</div>
</div>
<div class="empty-state" id="emptyState" style="display: none;">
<p>저장된 프롬프트가 없습니다.</p>
<p class="hint">ChatGPT에서 메시지를 보내면 여기에 자동으로 저장됩니다.</p>
</div>
</div>
<div class="tab-content" id="tab-settings">
<div class="settings-container">
<div class="setting-item">
<div class="setting-info">
<h3>현재 질문 표시</h3>
<p>답변을 읽을 때 우측 상단에 현재 질문을 표시합니다</p>
</div>
<label class="toggle">
<input type="checkbox" id="showCurrentQuestion" checked>
<span class="slider"></span>
</label>
</div>
<div class="setting-item" id="autoShowOnEntrySetting">
<div class="setting-info">
<h3>채팅창 진입 시 질문 보기창 열어두기</h3>
<p>ChatGPT 채팅방에 들어갈 때 자동으로 질문 보기창을 표시합니다</p>
</div>
<label class="toggle">
<input type="checkbox" id="autoShowOnEntry" checked>
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-info">
<h3>현재 질문에 표시할 질문 줄 수</h3>
<p>질문 텍스트의 최대 표시 줄 수를 설정합니다 (2~10줄)</p>
</div>
<div class="range-input-container">
<input type="range" id="questionLines" min="2" max="10" value="4" class="range-input">
<span class="range-value" id="questionLinesValue">4줄</span>
</div>
</div>
<div class="setting-item">
<div class="setting-info">
<h3>테마 설정</h3>
<p>확장 프로그램의 테마를 선택합니다</p>
</div>
<div class="theme-selector">
<select id="themeSelect" class="theme-select">
<option value="system">시스템 설정 따르기</option>
<option value="light">라이트 모드</option>
<option value="dark">다크 모드</option>
</select>
</div>
</div>
<div class="setting-item">
<div class="setting-info">
<h3>사용자 프롬프트 이동시 애니메이션 효과 없애기</h3>
<p>이전/다음 질문으로 이동할 때 애니메이션 없이 즉시 이동합니다</p>
</div>
<label class="toggle">
<input type="checkbox" id="disableScrollAnimation">
<span class="slider"></span>
</label>
</div>
<div class="setting-item" id="scrollSpeedSetting">
<div class="setting-info">
<h3>네비게이션 애니메이션 속도</h3>
<p>이전/다음 질문으로 이동할 때 스크롤 애니메이션 속도를 조정합니다</p>
</div>
<div class="range-input-container">
<input type="range" id="scrollSpeed" min="1" max="5" value="3" class="range-input">
<span class="range-value" id="scrollSpeedValue">보통</span>
</div>
</div>
<div class="setting-item">
<div class="setting-info">
<h3>히스토리 삭제</h3>
<p>저장된 모든 프롬프트와 채팅 데이터를 삭제합니다</p>
</div>
<button id="clearHistory" class="btn btn-secondary">모두 삭제</button>
</div>
<div class="copyright-info">
<div class="copyright-section">
<h4>개발자 정보</h4>
<div class="developer-info">
<p><strong>Github:</strong> <a href="https://github.com/ej31" target="_blank" rel="noopener noreferrer">ej31</a></p>
<p><strong>Email:</strong> <a href="mailto:itj1032@gmail.com">itj1032@gmail.com</a></p>
</div>
</div>
<div class="copyright-text">
<p>© 2025 Prompt Navigator. All rights reserved.</p>
</div>
</div>
</div>
</div>
<div class="tab-content" id="tab-help">
<div class="help-container">
<div class="help-section">
<h3>🚀 프롬프트 이동 버튼</h3>
<p>ChatGPT 채팅창에서 도구 버튼 근처에 표시되는 네비게이션 버튼들입니다.</p>
<div class="help-item">
<div class="help-icon">⬆︎</div>
<div class="help-content">
<h4>이전 질문으로 이동</h4>
<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>↑</kbd> (Windows)</p>
<p><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>↑</kbd> (Mac)</p>
</div>
</div>
<div class="help-item">
<div class="help-icon">⬇︎</div>
<div class="help-content">
<h4>다음 질문으로 이동</h4>
<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>↓</kbd> (Windows)</p>
<p><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>↓</kbd> (Mac)</p>
</div>
</div>
<div class="help-item">
<div class="help-icon">📖</div>
<div class="help-content">
<h4>프롬프트 목록 보기</h4>
<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>/</kbd> (Windows)</p>
<p><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>/</kbd> (Mac)</p>
<p class="help-note">현재 채팅의 모든 질문을 모달로 표시하고 정규식 검색 가능</p>
</div>
</div>
<div class="help-item">
<div class="help-icon">🚀</div>
<div class="help-content">
<h4>확장 프로그램 창 열기</h4>
<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>;</kbd> (Windows)</p>
<p><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>;</kbd> (Mac)</p>
<p class="help-note">저장된 프롬프트 히스토리를 별도 창으로 열기</p>
</div>
</div>
</div>
<div class="help-section">
<h3>💡 주요 기능</h3>
<div class="help-feature">
<h4>📝 자동 프롬프트 저장</h4>
<p>ChatGPT에서 메시지를 보내면 자동으로 이 확장 프로그램에 저장됩니다.</p>
</div>
<div class="help-feature">
<h4>🔍 정규식 검색</h4>
<p>저장된 프롬프트를 정규식으로 빠르게 검색할 수 있습니다.</p>
</div>
<div class="help-feature">
<h4>📍 현재 질문 표시</h4>
<p>긴 답변을 읽을 때 우측 상단에 현재 질문이 표시됩니다.</p>
</div>
<div class="help-feature">
<h4>📋 복사 및 이동</h4>
<p>저장된 프롬프트를 클립보드에 복사하거나 해당 채팅으로 바로 이동할 수 있습니다.</p>
</div>
</div>
<div class="help-section">
<h3>⚙️ 사용 팁</h3>
<div class="help-tip">
<span class="tip-icon">💡</span>
<p>단축키를 사용하면 마우스 없이도 빠르게 이전/다음 질문으로 이동할 수 있습니다.</p>
</div>
<div class="help-tip">
<span class="tip-icon">🔎</span>
<p>프롬프트 목록 모달에서 정규식을 사용해 특정 키워드가 포함된 질문을 빠르게 찾을 수 있습니다.</p>
</div>
<div class="help-tip">
<span class="tip-icon">⚡</span>
<p>현재 질문 표시 기능이 방해된다면 설정 탭에서 끌 수 있습니다.</p>
</div>
</div>
</div>
</div>
<!-- 하단 고정 새로고침 버튼 -->
<div class="bottom-controls">
<button id="refresh" class="btn btn-primary">새로고침</button>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>