-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathnewtab.html
More file actions
287 lines (273 loc) · 16.8 KB
/
newtab.html
File metadata and controls
287 lines (273 loc) · 16.8 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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🦋 MothNote</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="toast-container"></div>
<div class="container">
<aside class="panel" id="folders-panel">
<header class="panel-header">
<h2>📁 폴더</h2>
<div class="button-group">
<button id="add-folder-btn" class="icon-button ripple-effect" title="✨ 새 폴더 만들기 (Alt+Shift+N)">✨</button>
</div>
</header>
<div id="dashboard-container">
<div id="digital-clock"></div>
<div id="widget-row">
<div id="analog-clock-container">
<canvas id="analog-clock" width="150" height="150"></canvas>
</div>
<div id="weather-container">
</div>
</div>
<div id="calendar-container">
<div id="calendar-header">
<button id="prev-month-btn" class="ripple-effect">◀️</button>
<h3 id="calendar-month-year"></h3>
<button id="next-month-btn" class="ripple-effect">▶️</button>
</div>
<div id="date-picker-popover" class="date-picker-popover" style="display: none;">
<div class="date-picker-header">
<h4>📆 날짜 선택</h4>
<button id="date-picker-close-btn" class="modal-close-button ripple-effect" title="닫기">🗙</button>
</div>
<div class="date-picker-inputs">
<input type="number" id="year-input" min="1900" max="2200">
<span>년</span>
<input type="number" id="month-input" min="1" max="12">
<span>월</span>
</div>
<div class="date-picker-actions">
<button id="date-picker-today-btn" class="modal-button neutral ripple-effect">🎯 오늘</button>
<button id="date-picker-confirm-btn" class="modal-button confirm ripple-effect">🚀 이동</button>
</div>
</div>
<div id="calendar-grid"></div>
</div>
<!-- [디자인 수정] 앱 아이콘 그리드 컨테이너 (2x2 레이아웃 대응) -->
<div id="app-grid-container">
<!-- 습관 트래커 (iOS 앱 아이콘 스타일) -->
<div id="habit-tracker-btn" class="app-icon-widget ripple-effect" title="습관 트래커 열기">
<div class="app-icon-bg">✅</div>
<span class="app-label">습관 트래커</span>
</div>
<!-- [기능 추가] 다이어트 챌린지 (iOS 앱 아이콘 스타일) -->
<div id="diet-challenge-btn" class="app-icon-widget ripple-effect" title="다이어트 챌린지 열기">
<div class="app-icon-bg">🏃♂️</div>
<span class="app-label">다이어트<br>챌린지</span>
</div>
<!-- 향후 앱 추가 공간 -->
</div>
</div>
<ul id="folder-list" class="item-list" tabindex="0"></ul>
<footer class="panel-footer">
<button id="shortcut-guide-btn" class="text-button ripple-effect" title="⌨️ 전체 단축키 보기">⌨️ 키보드 단축키</button>
<button id="settings-btn" class="text-button ripple-effect" title="⚙️ 설정 열기">⚙️ 설정</button>
</footer>
<input type="file" id="import-file-input" accept=".json" style="display: none;">
</aside>
<div class="splitter" id="splitter-1"></div>
<!-- [BUG FIX] 중복된 요소들을 제거하고, 닫기 버튼을 컨테이너 안으로 이동 -->
<div id="weather-view-container" style="display: none;">
<button id="close-weather-view-btn" class="ripple-effect" title="날씨 뷰 닫기">❌</button>
<iframe id="weather-iframe" src="about:blank"></iframe>
</div>
<!-- [기능 추가] 습관 트래커를 표시할 컨테이너와 iframe 추가 -->
<div id="habit-tracker-container" style="display: none;">
<button id="close-habit-tracker-btn" class="ripple-effect" title="습관 트래커 닫기">❌</button>
<iframe id="habit-tracker-iframe" src="about:blank"></iframe>
</div>
<!-- [기능 추가] 다이어트 챌린지를 표시할 컨테이너와 iframe 추가 -->
<div id="diet-challenge-container" style="display: none;">
<button id="close-diet-challenge-btn" class="ripple-effect" title="다이어트 챌린지 닫기">❌</button>
<iframe id="diet-challenge-iframe" src="about:blank"></iframe>
</div>
<nav class="panel" id="notes-panel">
<header class="panel-header">
<h2 id="notes-panel-title">📝 노트</h2>
<div id="notes-panel-header-actions" class="button-group">
<button id="empty-trash-btn" class="icon-button ripple-effect" title="🗑️ 휴지통 비우기">🗑️</button>
<button id="add-note-btn" class="icon-button ripple-effect" title="✍️ 새 노트 추가 (Alt+N)">✍️</button>
</div>
</header>
<div class="notes-header-extra">
<div class="search-container">
<input type="search" id="search-input" placeholder="🔍 검색...">
<button id="clear-search" class="ripple-effect" title="❌ 검색 지우기">×</button>
</div>
<select id="note-sort-select" title="🔃 노트 정렬 방식">
<option value="updatedAt_desc">🕒 수정일 순 (최신)</option>
<option value="updatedAt_asc">🕒 수정일 순 (오래된)</option>
<option value="createdAt_desc">📅 생성일 순 (최신)</option>
<option value="createdAt_asc">📅 생성일 순 (오래된)</option>
<option value="title_asc">🔤 제목 순 (ㄱ-ㅎ)</option>
<option value="title_desc">🔤 제목 순 (ㅎ-ㄱ)</option>
</select>
</div>
<ul id="note-list" class="item-list" tabindex="0"></ul>
</nav>
<div class="splitter" id="splitter-2"></div>
<main class="panel main-content">
<div class="zen-resize-handle" id="zen-resize-handle-left"></div>
<div class="zen-resize-handle" id="zen-resize-handle-right"></div>
<div id="editor-container" class="editor-area" style="display: none;">
<input type="text" id="note-title-input" placeholder="🏷️ 제목을 입력하세요">
<div id="note-content-view" class="note-content-view"></div>
<textarea id="note-content-textarea" placeholder="✍️ 자유롭게 노트를 써보세요..."></textarea>
<div id="editor-footer">
<span id="char-count"></span>
<span id="word-count"></span>
<span id="line-count"></span>
<span id="created-date"></span>
<span id="updated-date"></span>
<span id="save-status-indicator"></span>
</div>
</div>
<div id="placeholder-container" class="placeholder">
<p id="placeholder-icon" class="placeholder-icon">🦋</p>
<p>왼쪽에서 노트를 선택하거나<br>새로운 생각을 펼쳐보세요!</p>
</div>
</main>
</div>
<dialog id="modal" class="modal">
<h3 id="modal-title"></h3>
<button id="modal-close-btn" class="modal-close-button ripple-effect" title="닫기" style="display: none;">🗙</button>
<div id="modal-message"></div>
<form id="modal-form" method="dialog">
<div id="modal-error-message" class="modal-error"></div>
<input type="text" id="modal-input" class="modal-input" style="display: none;">
<div id="modal-buttons" class="modal-buttons">
<button id="modal-cancel-btn" class="modal-button cancel ripple-effect" value="cancel"></button>
<button id="modal-confirm-btn" class="modal-button confirm ripple-effect" value="confirm"></button>
</div>
</form>
</dialog>
<dialog id="settings-modal" class="modal settings-modal">
<header class="settings-header">
<h3 id="settings-modal-title">⚙️ 설정</h3>
<button id="settings-modal-close-btn" class="modal-close-button ripple-effect" title="닫기">🗙</button>
</header>
<div class="settings-content">
<div class="settings-tabs">
<button class="settings-tab-btn active ripple-effect" data-tab="layout">🎨 레이아웃</button>
<button class="settings-tab-btn ripple-effect" data-tab="editor">✏️ 편집기</button>
<button class="settings-tab-btn ripple-effect" data-tab="weather">🌦️ 날씨</button>
<button class="settings-tab-btn ripple-effect" data-tab="data">💾 데이터</button>
</div>
<div class="settings-tab-panel active" id="settings-tab-layout">
<h4>↔️ 컬럼 너비 (%)</h4>
<div class="settings-group">
<label for="settings-col1-width">📁 폴더 패널</label>
<input type="range" id="settings-col1-width" min="10" max="50" step="1">
<input type="number" id="settings-col1-input" min="10" max="50" class="settings-value-input">
<span class="settings-unit-label">%</span>
</div>
<div class="settings-group">
<label for="settings-col2-width">📝 노트 패널</label>
<input type="range" id="settings-col2-width" min="10" max="50" step="1">
<input type="number" id="settings-col2-input" min="10" max="50" class="settings-value-input">
<span class="settings-unit-label">%</span>
</div>
<p class="settings-description">
💡 팁: 각 패널 사이의 경계선을 마우스로 직접 드래그하여 너비를 조절할 수도 있습니다.
</p>
<h4>🧘 젠 모드</h4>
<div class="settings-group">
<label for="settings-zen-max-width">↔️ 최대 너비 (px)</label>
<input type="range" id="settings-zen-max-width" min="500" max="2000" step="10">
<input type="number" id="settings-zen-max-input" min="500" max="2000" step="10" class="settings-value-input">
<span class="settings-unit-label">px</span>
</div>
<p class="settings-description">
ℹ️ 젠 모드에서 편집기의 최대 너비를 설정합니다. 가독성을 위해 적절한 너비를 선택하세요.<br><br>
<strong>💡 팁:</strong> 젠 모드가 활성화된 상태에서 편집기의 좌우 가장자리를 마우스로 드래그하여 너비를 직접 조절할 수도 있습니다.
</p>
</div>
<div class="settings-tab-panel" id="settings-tab-editor">
<h4>🔤 편집기 글꼴</h4>
<div class="settings-group">
<label for="settings-editor-font-family">🔤 글꼴 이름</label>
<input type="text" id="settings-editor-font-family" class="modal-input" placeholder="예: 'Noto Sans KR', sans-serif">
</div>
<p class="settings-description">ℹ️ 글꼴이 시스템에 설치되어 있어야 적용됩니다.</p>
<div class="settings-group">
<label for="settings-editor-font-size">📏 글꼴 크기 (px)</label>
<input type="number" id="settings-editor-font-size" class="modal-input" min="10" max="30" step="1">
</div>
</div>
<div class="settings-tab-panel" id="settings-tab-weather">
<h4>🗺️ 날씨 지역</h4>
<div class="settings-group weather-search-group">
<label for="settings-weather-city-search">🏙️ 도시 이름 검색</label>
<div class="weather-search-wrapper">
<div class="weather-search-input-wrapper">
<input type="text" id="settings-weather-city-search" class="modal-input" placeholder="예: Seoul, London, Tokyo">
<button id="settings-weather-city-search-btn" class="modal-button neutral ripple-effect">검색</button>
</div>
<ul id="settings-weather-city-results" class="city-results-list"></ul>
</div>
</div>
<p class="settings-description">
ℹ️ 영어로 도시 이름을 검색 후 선택하거나, 아래에 위도/경도를 직접 입력하세요.<br>
</p>
<div class="settings-group">
<label for="settings-weather-lat">🌐 위도</label>
<input type="number" id="settings-weather-lat" class="modal-input" step="any" placeholder="예: 37.5665">
</div>
<div class="settings-group">
<label for="settings-weather-lon">🌐 경도</label>
<input type="number" id="settings-weather-lon" class="modal-input" step="any" placeholder="예: 126.9780">
</div>
<p class="settings-description" style="text-align: center; margin-top: 16px; opacity: 0.8;">
<a href="https://open-meteo.com/" target="_blank" rel="noreferrer">Weather data by Open-Meteo.com</a>
</p>
</div>
<div class="settings-tab-panel" id="settings-tab-data">
<h4>📦 데이터 관리</h4>
<div class="settings-group storage-info-group">
<label for="settings-storage-usage">💽 저장소 사용량</label>
<p id="settings-storage-usage" class="storage-usage-text">계산 중...</p>
</div>
<div class="settings-group-row">
<button id="settings-export-btn" class="modal-button neutral ripple-effect">💾 데이터 백업</button>
<button id="settings-import-btn" class="modal-button neutral ripple-effect">↩️ 데이터 복원</button>
</div>
<p class="settings-description">
ℹ️ 현재 모든 <strong>폴더, 노트, 설정, 습관 트래커 데이터, 다이어트 챌린지 데이터</strong>를 JSON 파일로 백업하거나, 백업 파일로부터 복원합니다.<br> <!-- [수정] 설명 문구 업데이트 -->
⚠️ <strong>주의:</strong> 가져오기를 실행하면 현재 데이터와 설정이 <strong>모두 덮어씌워집니다.</strong><br><br>
ℹ️ Simplenote 백업 JSON 파일 복원을 지원합니다. (이 경우에만 기존 데이터를 유지합니다.)
</p>
</div>
</div>
<footer class="settings-footer">
<button id="settings-reset-btn" class="modal-button danger ripple-effect">🔄 모두 기본값으로 복원</button>
<button id="settings-save-btn" class="modal-button confirm ripple-effect">💾 저장</button>
</footer>
</dialog>
<template id="item-template">
<li class="item-list-entry" draggable="true">
<div class="item-details">
<span class="item-name"></span>
<span class="item-count"></span>
<div class="item-snippet" style="display: none;"></div>
</div>
<div class="item-actions">
</div>
</li>
</template>
<template id="section-header-template">
<li class="section-header">
<span></span>
</li>
</template>
<button id="markdown-toggle-btn" class="ripple-effect" title="Ⓜ️ 마크다운 미리보기">Ⓜ️</button>
<button id="zen-mode-toggle-btn" class="ripple-effect" title="🧘 젠 모드">🧘</button>
<button id="theme-toggle-btn" class="ripple-effect" title="🎨 테마 전환">🌙</button>
<script type="module" src="app.js"></script>
</body>
</html>