PDFViewer/viewer.html at dev · enu3379/PDFViewer · 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
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light">
    <title>Margin — PDF Viewer</title>
  </head>
  <body>
    <div id="app" class="app-shell">
      <header class="toolbar">
        <div class="brand" aria-hidden="true">
          <svg class="brand-mark" viewBox="0 0 128 128" width="21" height="21" focusable="false">
            <rect x="5" y="5" width="118" height="118" rx="26" fill="#FBFAF6" stroke="#D7D3C6" stroke-width="6"/>
            <rect x="22" y="54" width="50" height="20" rx="6" fill="#FAD57E"/>
            <rect x="22" y="30" width="46" height="9" rx="4.5" fill="#C7C3B5"/>
            <rect x="27" y="59.5" width="40" height="9" rx="4.5" fill="#756F5E"/>
            <rect x="22" y="92" width="38" height="9" rx="4.5" fill="#C7C3B5"/>
            <circle cx="99" cy="64" r="8.5" fill="#BA7517"/>
          </svg>
        </div>
        <div id="fileLabel" class="file-label">빈 뷰어</div>
        <div class="toolbar-divider"></div>
        <button id="prevPage" class="icon-button" type="button" aria-label="이전 페이지">‹</button>
        <label class="page-jump" aria-label="현재 페이지">
          <input id="pageNumber" inputmode="numeric" value="1">
          <span>/</span>
          <span id="pageCount">0</span>
        </label>
        <button id="nextPage" class="icon-button" type="button" aria-label="다음 페이지">›</button>
        <div class="toolbar-divider"></div>
        <button id="zoomOut" class="icon-button" type="button" aria-label="축소">−</button>
        <span id="zoomLabel" class="zoom-label">100%</span>
        <button id="zoomIn" class="icon-button" type="button" aria-label="확대">+</button>
        <button id="fitWidth" class="toolbar-button" type="button">폭 맞춤</button>
        <div class="spacer"></div>
        <button id="downloadButton" class="toolbar-button" type="button" title="PDF 파일로 저장 (Ctrl/⌘+S)" disabled>저장</button>
        <button id="hubButton" class="toolbar-button" type="button">허브</button>
      </header>
      <main class="reader-shell">
        <section id="emptyState" class="empty-state" hidden>
          <svg class="state-mark" viewBox="0 0 128 128" width="46" height="46" aria-hidden="true" focusable="false">
            <rect x="5" y="5" width="118" height="118" rx="26" fill="#FDFCF9" stroke="#DCD8CB" stroke-width="4"/>
            <rect x="22" y="54" width="50" height="20" rx="6" fill="#FAD57E"/>
            <rect x="22" y="30" width="46" height="9" rx="4.5" fill="#C7C3B5"/>
            <rect x="27" y="59.5" width="40" height="9" rx="4.5" fill="#756F5E"/>
            <rect x="22" y="92" width="38" height="9" rx="4.5" fill="#C7C3B5"/>
            <circle cx="99" cy="64" r="8.5" fill="#BA7517"/>
          </svg>
          <h1>PDF를 여세요</h1>
          <p>파일을 선택하거나 이 창에 PDF를 끌어놓으세요.</p>
          <label class="file-button">
            파일 선택
            <input id="fileInput" type="file" accept="application/pdf,.pdf">
          </label>
          <p class="hint">로컬 PDF는 Chrome 확장 설정에서 파일 URL 접근 허용이 필요할 수 있습니다.</p>
        </section>
        <section id="pendingState" class="empty-state" hidden>
          <h1>PDF를 불러오는 중입니다</h1>
          <p id="pendingUrl"></p>
          <p class="hint">문서 크기와 네트워크 상태에 따라 잠시 걸릴 수 있습니다.</p>
        </section>
        <section id="errorState" class="empty-state error-state" hidden>
          <h1>PDF를 열 수 없습니다</h1>
          <p id="errorMessage"></p>
        </section>
        <section id="fileAccessState" class="empty-state file-access-state" hidden>
          <h1>로컬 파일을 읽을 권한이 꺼져 있어요</h1>
          <p>크롬은 확장 프로그램의 로컬 파일 접근을 기본으로 막아 둡니다. 확장 세부정보에서 「파일 URL에 대한 액세스 허용」(영어 UI: "Allow access to file URLs")을 켜 주세요. 켜는 순간 확장이 다시 시작되어 이 탭이 닫힐 수 있어요 — 그 후 PDF를 다시 열면 자동으로 Margin에서 열립니다.</p>
          <div class="state-actions">
            <button id="fileAccessSettings" class="file-button" type="button">권한 설정 열기</button>
            <button id="fileAccessPickFile" class="secondary-button" type="button">파일 다시 선택</button>
          </div>
          <p class="hint">지금은 PDF 파일을 이 창에 끌어다 놓아도 열 수 있어요.</p>
          <p id="fileAccessSettingsFallback" class="copy-url" hidden></p>
        </section>
        <section id="missingFileState" class="empty-state error-state" hidden>
          <h1>파일을 찾을 수 없어요</h1>
          <p>파일이 이동되었거나 이름이 바뀌었을 수 있어요. 다시 선택하거나 이 창에 끌어다 놓아 주세요.</p>
          <p id="missingFileUrl" class="copy-url"></p>
          <div class="state-actions">
            <button id="missingFilePickFile" class="file-button" type="button">파일 다시 선택</button>
          </div>
        </section>
        <section id="readRow" class="read-row" hidden>
          <div id="viewerContainer" class="pdf-scroll" tabindex="0">
            <div id="viewer" class="pdfViewer"></div>
          </div>
          <aside id="panel" aria-label="문서 패널">
            <div id="panelResize" class="panel-resize" role="separator" aria-orientation="vertical" aria-label="패널 너비 조절" tabindex="0" title="드래그해서 패널 너비 조절"></div>
            <div class="ptabs">
              <button class="ptab on" data-tab="toc" type="button">목차</button>
              <button class="ptab" data-tab="figures" type="button">그림·표</button>
              <button class="ptab" data-tab="memos" type="button">메모 <span id="memoTabN"></span></button>
              <span class="spacer"></span>
              <button class="pico on" id="pinPanel" title="고정됨 — 클릭해 해제" aria-label="패널 고정" type="button">⌖</button>
              <button class="pico" id="closePanel" title="패널 닫기" aria-label="패널 닫기" type="button">✕</button>
            </div>
            <div class="pbody">
              <section class="tab-page" data-tab="toc">
                <div id="tocList" class="toc-list"></div>
              </section>
              <section class="tab-page" data-tab="figures" hidden>
                <div id="figList" class="fig-list">
                  <div class="empty">PDF를 열면 그림·표를 자동으로 스캔합니다.</div>
                </div>
              </section>
              <section class="tab-page" data-tab="memos" hidden>
                <div id="composeSlot"></div>
                <div class="pens" id="pensRow">
                  <span class="penlab">형광펜</span>
                  <button class="pen on" data-color="amber" type="button" aria-label="주황 형광펜"></button>
                  <button class="pen" data-color="teal" type="button" aria-label="초록 형광펜"></button>
                  <button class="pen" data-color="pink" type="button" aria-label="분홍 형광펜"></button>
                  <button class="pen" data-color="blue" type="button" aria-label="파랑 형광펜"></button>
                  <span class="spacer"></span>
                  <button class="lnkbtn" id="penTheme" type="button" title="형광펜 팔레트 전환">소다 팔레트</button>
                </div>
                <p class="memohint">본문을 드래그하면 형광펜이 칠해집니다. 패널이 열려 있으면 바로 메모 작성, 닫혀 있으면 조용히 저장되고 여백에 점만 남아요.</p>
                <input class="search" id="memoSearch" placeholder="메모·인용문 검색">
                <div class="subh">이 문서의 메모 <span id="memoCount"></span></div>
                <div id="memoList"></div>
              </section>
            </div>
          </aside>
          <button id="edge" class="edge" type="button" hidden title="패널 열기" aria-label="패널 열기">‹</button>
        </section>
      </main>
    </div>
    <script type="module" src="/src/viewer/main.ts"></script>
  </body>
</html>