pptviewer/404.html at main · flyfish-dev/pptviewer · 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
133
134
135
136
137
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="ppt-viewer demo: open legacy Microsoft PowerPoint .ppt files in the browser with a pure TypeScript parser, worker pipeline, and light PowerPoint-like rendering."
    />
    <title>ppt-viewer demo</title>
    <link rel="stylesheet" href="./styles.css?v=20260422092711244" />
  </head>
  <body>
    <div class="page-shell">
      <header class="hero-card">
        <div>
          <div class="eyebrow" id="heroEyebrow">Pure TypeScript · Binary .ppt · Worker rendering</div>
          <h1 id="heroTitle">ppt-viewer demo</h1>
          <p id="heroSubtitle">
            Open classic PowerPoint 97-2003 <code>.ppt</code> files directly in the browser. Parsing runs in a worker by default,
            and rendering stays in a light PowerPoint-like visual style.
          </p>
        </div>
        <div class="hero-actions">
          <div class="language-switch" aria-label="Language switch">
            <button class="lang-button" type="button" data-lang="en">EN</button>
            <button class="lang-button is-active" type="button" data-lang="zh-CN">中文</button>
          </div>
        </div>
      </header>

      <section class="panel viewer-panel">
        <div class="viewer-panel__header">
          <div>
            <h2 id="viewerHeading">Slide preview</h2>
            <p class="panel-description" id="viewerDescription">
              Slides are rendered as HTML and scaled to fit the page width by default.
            </p>
          </div>
          <div class="viewer-mode-pill" id="viewerModePill">Fit width</div>
        </div>
        <div id="viewerHost" class="viewer-host"></div>
      </section>

      <main class="main-grid">
        <section class="panel control-panel">
          <h2 id="uploadHeading">Open a .ppt file</h2>
          <p class="panel-description" id="uploadDescription">
            The demo does not upload your presentation to a server. Pick a local binary PowerPoint <code>.ppt</code> file and it
            will be parsed in your browser.
          </p>

          <label class="drop-zone" id="dropZone" for="fileInput">
            <input id="fileInput" type="file" accept=".ppt,application/vnd.ms-powerpoint" />
            <div class="drop-zone__icon" aria-hidden="true">📽️</div>
            <div class="drop-zone__title" id="dropTitle">Drop a .ppt file here</div>
            <div class="drop-zone__hint" id="dropHint">or click to browse your device</div>
            <span class="drop-zone__button" id="browseButtonText">Choose file</span>
          </label>

          <div class="option-list">
            <label class="toggle-row">
              <span>
                <strong id="workerLabel">Use worker parsing</strong>
                <small id="workerHelp">Recommended for large presentations</small>
              </span>
              <input id="useWorker" type="checkbox" checked />
            </label>
            <label class="toggle-row">
              <span>
                <strong id="inlinePicturesLabel">Inline picture payloads</strong>
                <small id="inlinePicturesHelp">Embeds extracted images as base64 for self-contained preview output</small>
              </span>
              <input id="inlinePictures" type="checkbox" checked />
            </label>
          </div>

          <div class="toolbar-row">
            <div class="segmented-control" aria-label="Preview scale mode">
              <button class="segmented-control__button is-active" type="button" data-fit-mode="fit" id="fitButton">Fit width</button>
              <button class="segmented-control__button" type="button" data-fit-mode="actual" id="actualButton">Actual size</button>
            </div>
            <button class="secondary-button" type="button" id="clearButton">Clear</button>
          </div>

          <div class="status-card" id="statusCard" data-state="idle">
            <div class="status-card__label" id="statusLabel">Ready</div>
            <div class="status-card__text" id="statusText">Waiting for a local .ppt file.</div>
            <div class="progress-track" aria-hidden="true">
              <div class="progress-track__bar" id="progressBar"></div>
            </div>
          </div>
        </section>

        <aside class="panel metadata-panel">
          <h2 id="metadataHeading">Presentation info</h2>
          <dl class="metadata-grid">
            <div>
              <dt id="metaFileNameLabel">File</dt>
              <dd id="metaFileName">—</dd>
            </div>
            <div>
              <dt id="metaSlideCountLabel">Slides</dt>
              <dd id="metaSlideCount">—</dd>
            </div>
            <div>
              <dt id="metaSlideSizeLabel">Slide size</dt>
              <dd id="metaSlideSize">—</dd>
            </div>
            <div>
              <dt id="metaPictureCountLabel">Pictures</dt>
              <dd id="metaPictureCount">—</dd>
            </div>
            <div>
              <dt id="metaFontCountLabel">Fonts</dt>
              <dd id="metaFontCount">—</dd>
            </div>
            <div>
              <dt id="metaParseTimeLabel">Parse time</dt>
              <dd id="metaParseTime">—</dd>
            </div>
            <div>
              <dt id="metaVersionLabel">Doc version</dt>
              <dd id="metaVersion">—</dd>
            </div>
            <div>
              <dt id="metaUserLabel">Current user</dt>
              <dd id="metaUser">—</dd>
            </div>
          </dl>
        </aside>
      </main>
    </div>

    <script type="module" src="./app.js?v=20260422092711244"></script>
  </body>
</html>