-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
169 lines (162 loc) · 9.48 KB
/
index.html
File metadata and controls
169 lines (162 loc) · 9.48 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
<!doctype html>
<html lang="zh-Hant-TW">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Markdown Explorer</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="libs/prism/prism-tomorrow.css" />
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="MD Explorer" />
<link rel="manifest" href="favicon/site.webmanifest" />
</head>
<body>
<div class="app">
<aside class="sidebar" aria-label="檔案總管">
<div class="sidebar-header">
<div class="sidebar-header-content">
<h1>Markdown Explorer</h1>
<button id="open-folder" class="primary" type="button">
<span class="dot"></span>
<span id="open-folder-label">開啟資料夾</span>
</button>
</div>
<button id="sidebar-toggle" class="theme-toggle-btn" type="button" aria-pressed="false" aria-label="收合側邊欄"></button>
</div>
<span class="sidebar-collapsed-label" aria-hidden="true">Markdown Explorer</span>
<div class="sidebar-body">
<div id="recent-panel" class="recent-panel">
<button id="recent-panel-toggle" class="recent-panel-toggle" type="button" aria-expanded="false">
<span class="recent-panel-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></span>
<span id="recent-panel-label">最近開啟</span>
<span class="recent-panel-chevron"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="chevron-icon"><polyline points="9 18 15 12 9 6"/></svg></span>
</button>
<div id="recent-panel-body" class="recent-panel-body" hidden></div>
</div>
<div id="tree" class="tree" role="tree" aria-live="polite"></div>
<div class="sidebar-footer">
<p class="hint">僅支援 Chrome/Edge，需手動授權存取</p>
<div class="footer-bottom">
<a href="https://github.com/Hank076/markdown-explorer" target="_blank" rel="noopener noreferrer" class="footer-github-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
<span>GitHub</span>
</a>
<span class="footer-separator" aria-hidden="true">·</span>
<p class="copyright">MIT © 2026 Hank</p>
</div>
</div>
</div>
<div class="sidebar-resizer" aria-hidden="true"></div>
</aside>
<main class="workspace" data-drag-hint="">
<div class="topbar">
<div id="tabs" class="tabs" role="tablist" aria-label="已開啟檔案"></div>
<button id="close-all-tabs" class="close-all-tabs-btn" type="button" aria-label="關閉所有分頁" hidden></button>
<div class="search-shell">
<label class="search-box" for="workspace-search">
<span id="workspace-search-label" class="sr-only">搜尋文件</span>
<input
id="workspace-search"
type="search"
placeholder="搜尋檔名、標題或內容"
autocomplete="off"
/>
</label>
<aside
id="search-results"
class="search-results"
role="region"
aria-live="polite"
aria-atomic="false"
aria-labelledby="search-results-label"
hidden
>
<h2 id="search-results-label" class="sr-only">搜尋結果</h2>
</aside>
</div>
<button id="settings-toggle" class="theme-toggle-btn" type="button" aria-pressed="false" aria-label="開啟設定"></button>
<button id="lang-toggle" class="theme-toggle-btn" type="button" aria-pressed="false" aria-label="Switch to English">中</button>
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-pressed="false" aria-label="切換主題"></button>
</div>
<section class="viewer" aria-live="polite">
<div id="empty" class="empty-state">
<div class="empty-card">
<h2 id="empty-title">開啟一個資料夾</h2>
<p id="empty-desc">左側會顯示樹狀目錄，點選 .md 檔案即可在右側開啟。</p>
<ul>
<li id="empty-feature1">支援多檔分頁</li>
<li id="empty-feature2">支援語法高亮與 Mermaid sequenceDiagram</li>
<li id="empty-feature3">離線可用（無需連網）</li>
</ul>
</div>
</div>
<div id="viewer-container" class="viewer-container" hidden>
<article id="preview" class="preview" aria-label="Markdown 預覽"></article>
<aside id="toc" class="toc" aria-label="目錄">
<button id="toc-toggle" class="toc-toggle-btn" type="button" aria-label="切換目錄"></button>
<span id="toc-collapsed-label" class="toc-collapsed-label" aria-hidden="true">目錄</span>
<div class="toc-content">
<div class="toc-title">目錄</div>
<div id="toc-list-container"></div>
</div>
</aside>
</div>
</section>
</main>
</div>
<div id="statusbar" class="statusbar" role="status">
<span id="status-text">等待選擇資料夾</span>
</div>
<dialog id="settings-dialog" class="settings-dialog" aria-labelledby="settings-title">
<div class="settings-panel">
<div class="settings-header">
<div class="settings-header-copy">
<h2 id="settings-title" class="settings-title">設定</h2>
<p id="settings-description" class="settings-description">管理預覽與介面設定。</p>
</div>
<button id="settings-close" class="theme-toggle-btn" type="button" aria-label="關閉設定"></button>
</div>
<section class="settings-section" aria-labelledby="settings-rendering-title">
<div class="settings-section-copy">
<h3 id="settings-rendering-title" class="settings-section-title">公式渲染</h3>
<p id="settings-rendering-description" class="settings-section-description">選擇 LaTeX 公式的渲染引擎。</p>
</div>
<label class="math-renderer-field" for="math-renderer">
<span id="math-renderer-label" class="math-renderer-label">公式引擎</span>
<select id="math-renderer" class="math-renderer-select" aria-label="選擇 LaTeX 渲染器">
<option value="katex">KaTeX</option>
<option value="mathjax">MathJax</option>
</select>
</label>
</section>
<section class="settings-section" aria-labelledby="settings-font-title">
<div class="settings-section-copy">
<h3 id="settings-font-title" class="settings-section-title">字體</h3>
<p id="settings-font-description" class="settings-section-description">選擇 Markdown 預覽的字體。</p>
</div>
<div class="font-control" role="group" aria-labelledby="settings-font-title">
<button class="font-control-btn" data-font="default" id="font-btn-default">預設</button>
<button class="font-control-btn" data-font="serif" id="font-btn-serif">襯線</button>
<button class="font-control-btn" data-font="sans" id="font-btn-sans">無襯線</button>
</div>
</section>
<section class="settings-section" aria-labelledby="settings-fontsize-title">
<div class="settings-section-copy">
<h3 id="settings-fontsize-title" class="settings-section-title">字級大小</h3>
<p id="settings-fontsize-description" class="settings-section-description">調整 Markdown 預覽的全域字體大小。</p>
</div>
<div class="font-control" role="group" aria-labelledby="settings-fontsize-title">
<button class="font-control-btn" data-font-size="14" id="font-size-btn-sm">小</button>
<button class="font-control-btn" data-font-size="16" id="font-size-btn-md">中</button>
<button class="font-control-btn" data-font-size="18" id="font-size-btn-lg">大</button>
<button class="font-control-btn" data-font-size="20" id="font-size-btn-xl">特大</button>
</div>
</section>
</div>
</dialog>
<script type="module" src="app.js"></script>
</body>
</html>