mirror of
https://github.com/xiaoqidun/ofdgo.git
synced 2026-08-30 12:12:40 +08:00
112 lines
4.4 KiB
HTML
112 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>OFDGo WebUI</title>
|
|
<link rel="stylesheet" href="./ofdgo.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="toolbar app-bar">
|
|
<input id="ofdInput" class="file-input" type="file" accept=".ofd,application/ofd,application/zip">
|
|
<button id="ofdButton" class="button primary" type="button" data-short="打开">打开 OFD</button>
|
|
<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
|
|
<button id="togglePagesButton" class="icon-button" type="button" title="页面栏" aria-label="页面栏" aria-pressed="true">☰</button>
|
|
<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" aria-label="信息栏" aria-pressed="true">ⓘ</button>
|
|
<div class="toolbar-space"></div>
|
|
<button id="prevButton" class="icon-button" type="button" title="上一页" disabled>‹</button>
|
|
<label class="page-control">
|
|
<input id="pageInput" type="number" min="1" value="1" disabled>
|
|
<span>/</span>
|
|
<span id="pageTotal">0</span>
|
|
</label>
|
|
<button id="nextButton" class="icon-button" type="button" title="下一页" disabled>›</button>
|
|
<div class="divider"></div>
|
|
<button id="zoomOutButton" class="icon-button" type="button" title="缩小" disabled>-</button>
|
|
<span id="zoomLabel" class="zoom-label">100%</span>
|
|
<button id="zoomInButton" class="icon-button" type="button" title="放大" disabled>+</button>
|
|
<button id="fitButton" class="button" type="button" data-short="宽" disabled>适宽</button>
|
|
<button id="fitHeightButton" class="button" type="button" data-short="高" disabled>适高</button>
|
|
<button id="exportButton" class="button" type="button" data-short="PDF" title="导出 PDF" aria-label="导出 PDF" disabled>PDF</button>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<aside class="page-list-panel">
|
|
<div class="panel-title">页面</div>
|
|
<div id="pageList" class="page-list"></div>
|
|
</aside>
|
|
|
|
<section class="viewer-panel" tabindex="0">
|
|
<div id="emptyState" class="empty-state">选择 OFD 文件</div>
|
|
<div id="progressPanel" class="progress-panel" hidden>
|
|
<div class="progress-spinner"></div>
|
|
<div id="progressLabel" class="progress-label">加载中</div>
|
|
<div class="progress-track">
|
|
<div id="progressBar" class="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div id="pageFrame" class="page-frame" hidden>
|
|
<div id="svgHost" class="svg-host"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="meta-panel">
|
|
<div class="panel-title">文档</div>
|
|
<dl class="meta-list">
|
|
<div>
|
|
<dt>标题</dt>
|
|
<dd id="metaTitle">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>作者</dt>
|
|
<dd id="metaAuthor">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>版本</dt>
|
|
<dd id="metaVersion">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>类型</dt>
|
|
<dd id="metaType">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>字体</dt>
|
|
<dd id="metaFonts">0</dd>
|
|
</div>
|
|
</dl>
|
|
<section class="doc-font-panel" aria-labelledby="docFontPanelTitle">
|
|
<div class="panel-row">
|
|
<div id="docFontPanelTitle" class="panel-title compact">OFD 字体</div>
|
|
<span id="docFontSummary" class="count-pill">0</span>
|
|
</div>
|
|
<div id="docFontList" class="doc-font-list"></div>
|
|
</section>
|
|
<section class="font-panel" aria-labelledby="fontPanelTitle">
|
|
<div class="panel-row">
|
|
<div id="fontPanelTitle" class="panel-title compact">可用字体</div>
|
|
<div class="panel-actions">
|
|
<span id="availableFontSummary" class="count-pill">0</span>
|
|
<button id="localFontButton" class="small-button" type="button">系统字体</button>
|
|
<button id="fontAddButton" class="small-button" type="button">添加</button>
|
|
</div>
|
|
</div>
|
|
<div id="fontList" class="font-list"></div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer class="app-footer app-bar">
|
|
<a class="footer-brand" href="https://github.com/xiaoqidun/ofdgo" target="_blank" rel="noreferrer">OFDGo</a>
|
|
<div id="statusText" class="status-text">正在准备渲染引擎</div>
|
|
<nav class="footer-links" aria-label="相关链接">
|
|
<a href="https://aite.me/" target="_blank" rel="noreferrer">官方网站</a>
|
|
</nav>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="./wasm_exec.js"></script>
|
|
<script type="module" src="./ofdgo.js"></script>
|
|
</body>
|
|
</html>
|