markdown-viewer/index.html at main · spskelly/markdown-viewer · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Lightweight markdown file viewer PWA">
    <meta name="theme-color" content="#0d1117">
    <title>Markdown Viewer</title>
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Markdown Viewer</h1>
            <div class="controls">
                <button id="openFile" class="btn">Open Files</button>
                <button id="toggleTheme" class="btn">Toggle Theme</button>
                <button id="helpBtn" class="btn btn-icon" aria-label="Keyboard shortcuts" title="Keyboard shortcuts">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
                    </svg>
                </button>
            </div>
        </header>

        <div id="dropZone" class="drop-zone">
            <div class="drop-zone-content">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                    <polyline points="13 2 13 9 20 9"></polyline>
                </svg>
                <p>Drop markdown files here or click "Open Files"</p>
                <p class="hint">or press <kbd>Ctrl+O</kbd> to open one or more files</p>
                <p class="hint">Supports syntax highlighting and Mermaid diagrams</p>
            </div>
        </div>

        <div id="tabBar" class="tab-bar" style="display: none;">
            <div id="tabList" class="tab-list" role="tablist" aria-label="Open markdown files"></div>
        </div>

        <div id="fileInfo" class="file-info" style="display: none;">
            <span id="fileName"></span>
            <div class="file-meta">
                <span id="fileSize"></span>
                <span class="separator">|</span>
                <span id="wordCount"></span>
                <span class="separator">|</span>
                <span id="readTime"></span>
            </div>
        </div>

        <div id="content" class="markdown-body" style="display: none;"></div>
    </div>

    <button id="scrollTop" class="scroll-top-btn" aria-label="Scroll to top" style="display: none;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
    </button>

    <div id="shortcutsModal" class="modal-overlay" style="display: none;">
        <div class="modal">
            <h3>Keyboard Shortcuts</h3>
            <div class="shortcut-list">
                <div class="shortcut"><div><kbd>Ctrl</kbd> + <kbd>O</kbd></div><span>Open files</span></div>
                <div class="shortcut"><div><kbd>Ctrl</kbd> + <kbd>D</kbd></div><span>Toggle theme</span></div>
                <div class="shortcut"><div><kbd>←</kbd> / <kbd>→</kbd></div><span>Switch tabs</span></div>
                <div class="shortcut"><div><kbd>?</kbd></div><span>Show shortcuts</span></div>
                <div class="shortcut"><div><kbd>Esc</kbd></div><span>Close dialog</span></div>
            </div>
            <button id="closeModal" class="btn">Close</button>
        </div>
    </div>

    <div id="diagramFullscreen" class="modal-overlay" style="display: none;">
        <div class="fullscreen-diagram">
            <div class="fullscreen-header">
                <span class="fullscreen-title">Diagram</span>
                <button id="closeFullscreen" class="btn btn-icon" aria-label="Close fullscreen">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div id="fullscreenContainer" class="fullscreen-container"></div>
            <div class="fullscreen-controls">
                <button data-zoom="in" aria-label="Zoom in" title="Zoom in">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                </button>
                <button data-zoom="out" aria-label="Zoom out" title="Zoom out">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                </button>
                <button data-zoom="reset" aria-label="Reset zoom" title="Reset zoom">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="1 4 1 10 7 10"></polyline>
                        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                    </svg>
                </button>
                <span class="fullscreen-hint">Scroll to zoom</span>
            </div>
        </div>
    </div>

    <input type="file" id="fileInput" accept=".md,.markdown" multiple style="display: none;">

    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-highlight@2.2.3/lib/index.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/panzoom@9.4.3/dist/panzoom.min.js"></script>
    <script src="app.js"></script>
</body>
</html>