mirror of
https://github.com/xiaoqidun/ofdgo.git
synced 2026-10-29 16:59:27 +08:00
220 lines
11 KiB
HTML
220 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#fbfcfd">
|
|
<title>OFDGo WebUI - 纯粹的OFD阅读器，完全本地、离线可用</title>
|
|
<link rel="manifest" href="./ofdgo.json">
|
|
<link rel="icon" type="image/svg+xml" href="./ofdgo.svg">
|
|
<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">
|
|
<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
|
|
<input id="fontDirectoryInput" class="file-input" type="file" webkitdirectory multiple>
|
|
<div class="tool-group">
|
|
<button id="ofdButton" class="icon-button" type="button" title="打开" aria-label="打开" aria-keyshortcuts="Control+O Meta+O"><span class="open-icon" aria-hidden="true"></span></button>
|
|
<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>
|
|
<div class="toolbar-space"></div>
|
|
<div class="tool-group">
|
|
<button id="prevButton" class="icon-button arrow-prev" type="button" title="上一页" aria-label="上一页" aria-keyshortcuts="ArrowLeft" disabled></button>
|
|
<label class="page-control">
|
|
<input id="pageInput" type="number" min="1" value="0" disabled>
|
|
<span>/</span>
|
|
<span id="pageTotal">0</span>
|
|
</label>
|
|
<button id="nextButton" class="icon-button arrow-next" type="button" title="下一页" aria-label="下一页" aria-keyshortcuts="ArrowRight" disabled></button>
|
|
</div>
|
|
<div class="tool-group">
|
|
<button id="zoomOutButton" class="icon-button" type="button" title="缩小" aria-label="缩小" aria-keyshortcuts="-" disabled>-</button>
|
|
<span id="zoomLabel" class="zoom-label">100%</span>
|
|
<button id="zoomInButton" class="icon-button" type="button" title="放大" aria-label="放大" aria-keyshortcuts="= Shift+= Plus" disabled>+</button>
|
|
<button id="fitButton" class="button" type="button" data-short="宽" aria-label="适宽" disabled>适宽</button>
|
|
<button id="fitHeightButton" class="button" type="button" data-short="高" aria-label="适高" disabled>适高</button>
|
|
<button id="rotateButton" class="button" type="button" data-short="转" title="顺时针旋转90°" aria-label="旋转" disabled>旋转</button>
|
|
<button id="panButton" class="button" type="button" data-short="拖" title="拖动页面" aria-label="拖动" aria-pressed="false" disabled>拖动</button>
|
|
<button id="continuousButton" class="button" type="button" data-short="连" title="无距连续显示" aria-label="无距连续显示" aria-pressed="false" disabled>连续</button>
|
|
<button id="annotationButton" class="button" type="button" data-short="注" title="关闭注解" aria-label="关闭注解" aria-pressed="true">注解</button>
|
|
</div>
|
|
<div class="tool-group">
|
|
<select id="exportFormat" class="format-select" title="导出格式" aria-label="导出格式" disabled></select>
|
|
<select id="imageDPI" class="format-select dpi-select" title="图片 DPI" aria-label="图片 DPI" disabled>
|
|
<option value="96">96</option>
|
|
<option value="150">150</option>
|
|
<option value="300" selected>300</option>
|
|
<option value="600">600</option>
|
|
</select>
|
|
<button id="exportPageButton" class="button" type="button" data-short="单" title="导出单页" aria-label="导出单页" disabled>单页</button>
|
|
<button id="exportButton" class="button" type="button" data-short="多" title="导出文档" aria-label="导出文档" aria-haspopup="dialog" aria-controls="exportPanel" disabled>文档</button>
|
|
</div>
|
|
</header>
|
|
<dialog id="exportPanel" class="form-dialog" aria-label="导出文档">
|
|
<form id="exportForm">
|
|
<div class="form-row">
|
|
<span id="exportScopeLabel">范围</span>
|
|
<div class="form-options" role="radiogroup" aria-labelledby="exportScopeLabel">
|
|
<label><input id="exportAll" type="radio" name="scope" value="all" checked autofocus><span>全部</span></label>
|
|
<label><input id="exportSpecified" type="radio" name="scope" value="specified"><span>指定</span></label>
|
|
</div>
|
|
</div>
|
|
<div id="exportRangeRow" class="form-row" hidden>
|
|
<label for="exportRange">页码</label>
|
|
<input id="exportRange" type="text" aria-describedby="exportRangeStatus" autocomplete="off" spellcheck="false">
|
|
</div>
|
|
<div class="form-actions">
|
|
<div id="exportRangeStatus" class="form-status" role="status" aria-live="polite"></div>
|
|
<button id="exportCancel" class="button" type="button">取消</button>
|
|
<button id="exportSubmit" class="button" type="submit">导出</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<main class="workspace">
|
|
<aside class="page-list-panel">
|
|
<div id="pageListTitle" class="panel-title">页面</div>
|
|
<div id="navigationTabs" class="navigation-tabs" role="tablist" aria-label="文档导航" hidden>
|
|
<button id="pagesTab" type="button" role="tab" aria-selected="true" aria-controls="pageList">页面</button>
|
|
<button id="outlinesTab" type="button" role="tab" aria-selected="false" aria-controls="outlineList" tabindex="-1">目录</button>
|
|
<button id="searchTab" type="button" role="tab" aria-keyshortcuts="Control+F Meta+F" aria-selected="false" aria-controls="searchPanel" tabindex="-1">搜索</button>
|
|
</div>
|
|
<div id="pageList" class="page-list" role="tabpanel" aria-label="页面"></div>
|
|
<div id="outlineList" role="tabpanel" aria-label="目录" hidden></div>
|
|
<div id="searchPanel" role="tabpanel" aria-label="搜索" hidden>
|
|
<form id="searchForm" class="search-form" role="search">
|
|
<input id="searchInput" type="search" aria-label="搜索文字" placeholder="搜索文字" autocomplete="off">
|
|
<button type="submit" class="button">搜索</button>
|
|
</form>
|
|
<div class="search-tools">
|
|
<span id="searchStatus" role="status" aria-live="polite"></span>
|
|
<span id="searchCount">0 / 0</span>
|
|
<button id="searchPrev" type="button" class="icon-button arrow-prev" title="上一处" aria-label="上一处" aria-keyshortcuts="Shift+F3" disabled></button>
|
|
<button id="searchNext" type="button" class="icon-button arrow-next" title="下一处" aria-label="下一处" aria-keyshortcuts="F3" disabled></button>
|
|
</div>
|
|
<div id="searchResults" class="search-results"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="viewer-panel" tabindex="0" aria-label="阅读区">
|
|
<div id="emptyState" class="empty-state">选择 OFD 文件</div>
|
|
<div id="progressPanel" class="progress-panel" role="status" aria-live="polite" hidden>
|
|
<div class="progress-spinner"></div>
|
|
<div id="progressLabel" class="progress-label">加载中</div>
|
|
<button id="cancelExportButton" class="small-button" type="button" title="取消导出" aria-label="取消导出" hidden>取消</button>
|
|
<div class="progress-track">
|
|
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
|
|
</div>
|
|
</div>
|
|
<div id="pageFrame" class="page-frame" hidden>
|
|
<div id="svgHost" class="svg-host"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="meta-panel">
|
|
<section id="appPanel" class="app-panel" aria-labelledby="appPanelTitle" hidden>
|
|
<div class="panel-row">
|
|
<div id="appPanelTitle" class="panel-title compact">应用</div>
|
|
<div class="panel-actions">
|
|
<span id="offlineStatus" class="app-status" role="status">准备中</span>
|
|
<button id="refreshAppButton" class="small-button app-refresh" type="button" title="刷新应用" aria-label="刷新应用" disabled>↻</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="panel-title">文档</div>
|
|
<dl class="meta-list">
|
|
<div>
|
|
<dt>文件</dt>
|
|
<dd id="metaFile">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>标题</dt>
|
|
<dd id="metaTitle">-</dd>
|
|
</div>
|
|
<div hidden>
|
|
<dt>主题</dt>
|
|
<dd id="metaSubject"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>作者</dt>
|
|
<dd id="metaAuthor">-</dd>
|
|
</div>
|
|
<div hidden>
|
|
<dt>创建</dt>
|
|
<dd id="metaCreationDate"></dd>
|
|
</div>
|
|
<div hidden>
|
|
<dt>修改</dt>
|
|
<dd id="metaModDate"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>类型</dt>
|
|
<dd id="metaType">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>版本</dt>
|
|
<dd id="metaVersion">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>签名</dt>
|
|
<dd id="metaSignatures">0</dd>
|
|
</div>
|
|
<div>
|
|
<dt>字体</dt>
|
|
<dd id="metaFonts">0</dd>
|
|
</div>
|
|
</dl>
|
|
<section id="attachmentPanel" class="attachment-panel" aria-labelledby="attachmentPanelTitle" hidden>
|
|
<div id="attachmentPanelTitle" class="panel-title">附件</div>
|
|
<div id="attachmentList" class="attachment-list"></div>
|
|
</section>
|
|
<section id="signaturePanel" class="signature-panel" aria-labelledby="signaturePanelTitle" hidden>
|
|
<div class="panel-row">
|
|
<div id="signaturePanelTitle" class="panel-title compact">签名</div>
|
|
<span id="signatureSummary" class="count-pill">0</span>
|
|
</div>
|
|
<div id="signatureList" class="signature-list"></div>
|
|
</section>
|
|
<section id="annotationPanel" class="annotation-panel" aria-labelledby="annotationPanelTitle" hidden>
|
|
<div id="annotationPanelTitle" class="panel-title">注解</div>
|
|
<div id="annotationList" class="annotation-list"></div>
|
|
</section>
|
|
<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" aria-label="系统字体">系统</button>
|
|
<button id="fontAddButton" class="small-button" type="button">添加</button>
|
|
<button id="fontDirectoryButton" class="small-button" type="button" title="添加字体目录" aria-label="添加字体目录">目录</button>
|
|
</div>
|
|
</div>
|
|
<div id="fontPermissionHint" class="font-permission-hint" hidden>字体尚未授权</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 type="module" src="./ofdgo.js"></script>
|
|
</body>
|
|
</html>
|