mirror of
https://github.com/NaitLee/Cat-Printer.git
synced 2025-05-16 07:10:30 -07:00
197 lines
10 KiB
HTML
197 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title data-i18n="cat-printer">Cat Printer</title>
|
|
<link rel="stylesheet" href="main.css" />
|
|
<link rel="icon" href="icon.svg" />
|
|
</head>
|
|
<body>
|
|
<main class="hard-hidden">
|
|
<div class="menu-side">
|
|
<h1 id="title" data-i18n="cat-printer">Cat Printer</h1>
|
|
<div id="notice">
|
|
</div>
|
|
<div class="menu">
|
|
<div class="panel" id="panel-print" data-default>
|
|
<label for="device-options" data-i18n="device-">Device:</label>
|
|
<select id="device-options" data-key>
|
|
</select>
|
|
<button id="device-refresh" data-i18n="refresh" data-key>Refresh</button>
|
|
<hr />
|
|
<dl>
|
|
<dt><label data-i18n="process-as-">Process as:</label></dt>
|
|
<dd>
|
|
<label>
|
|
<input type="radio" name="algo" value="algo-direct" data-key />
|
|
<span data-i18n="text">Text</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="algo" value="algo-steinberg" data-key checked />
|
|
<span data-i18n="picture">Picture</span>
|
|
</label>
|
|
</dd>
|
|
<!-- <label>
|
|
<input type="radio" name="algo" value="algo-halftone" data-key />
|
|
<span data-i18n="pattern">Pattern</span>
|
|
</label> -->
|
|
</dl>
|
|
<!-- "brightness" is historically "threshold" -->
|
|
<dl>
|
|
<dt><label for="threshold" data-i18n="brightness-">Brightness:</label></dt>
|
|
<dd><input type="range" min="0" max="256" value="86" step="16" id="threshold" data-key data-default /></dd>
|
|
</dl>
|
|
<!-- "Strength", so-called "darkness", or internally "energy" -->
|
|
<dl>
|
|
<dt><label for="energy" data-i18n="strength-">Strength:</label></dt>
|
|
<dd><input type="range" min="0" max="256" value="64" step="16" id="energy" data-key data-default /></dd>
|
|
</dl>
|
|
<!-- "Quality", just speed of paper feeding, but slower makes better heating -->
|
|
<dl>
|
|
<dt><label for="quality" data-i18n="quality-">Quality:</label></dt>
|
|
<dd><input type="range" min="24" max="36" value="32" step="4" id="quality" data-key data-default /></dd>
|
|
</dl>
|
|
<input type="checkbox" name="transparent-as-white" id="transparent-as-white" data-key checked />
|
|
<label for="transparent-as-white" data-i18n="transparent-as-white">Transparent as White</label>
|
|
</div>
|
|
<div class="panel active" id="panel-help">
|
|
<div>
|
|
<p data-i18n="coming-soon">Coming Soon...</p>
|
|
<p>
|
|
<a href="about.html" target="frame" data-i18n="about" data-key>About</a>
|
|
<a href="jslicense.html" data-jslicense="1" target="frame"
|
|
data-i18n="javascript-license-information" data-key>JavaScript License Information</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="panel-settings">
|
|
<label for="scan-time" data-i18n="scan-time-">Scan Time:</label>
|
|
<input type="number" name="scan-time" id="scan-time" min="1" max="10" value="4" data-key />
|
|
<span data-i18n="-seconds">seconds</span>
|
|
<br />
|
|
<!-- <input type="checkbox" name="flip-h" id="flip-h" data-key />
|
|
<label for="flip-h" data-i18n="flip-horizontally">Flip Horizontally</label>
|
|
<input type="checkbox" name="flip-v" id="flip-v" data-key />
|
|
<label for="flip-v" data-i18n="flip-vertically">Flip Vertically</label> -->
|
|
<input type="checkbox" name="flip" id="flip" data-key />
|
|
<label for="flip" data-i18n="cat-face-toward">Cat Face Toward</label>
|
|
<hr />
|
|
<input type="checkbox" name="dry-run" id="dry-run" data-key />
|
|
<label for="dry-run" data-i18n="dry-run">Dry Run</label>
|
|
<input type="checkbox" name="dump" id="dump" data-key />
|
|
<label for="dump" data-i18n="dump-traffic">Dump Traffic</label>
|
|
<br />
|
|
<button id="set-accessibility" data-key>
|
|
<span>🌎</span>
|
|
<span data-i18n="accessibility">Accessibility</span>
|
|
</button>
|
|
<button class="hidden" data-panel="panel-error" data-i18n="error-message" data-key>Error Message</button>
|
|
<div class="center">
|
|
<button id="button-exit" data-i18n="exit" data-key>Exit</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="panel-error">
|
|
<p>
|
|
<span data-i18n="you-can-seek-for-help-with-detailed-info-below">You can seek for help with detailed info below.</span>
|
|
</p>
|
|
<div id="error-record" class="selectable"></div>
|
|
</div>
|
|
</div>
|
|
<div class="compact-menu">
|
|
<button class="compact-button" data-panel="panel-print" data-i18n="print" data-key="z">Print</button>
|
|
<button class="compact-button active" data-panel="panel-help" data-i18n="help" data-key="x">Help</button>
|
|
<button class="compact-button" data-panel="panel-settings" data-i18n="settings" data-key="c">Settings</button>
|
|
</div>
|
|
<div class="center">
|
|
<!-- -->
|
|
</div>
|
|
</div>
|
|
<div class="canvas-side">
|
|
<div id="control-overlay">
|
|
<div>
|
|
<button id="insert-picture" data-i18n="insert-picture" data-key="Enter">Insert Picture</button>
|
|
<p data-i18n="or-drag-file-to-below" class="hide-on-android">Or drag file to below</p>
|
|
</div>
|
|
</div>
|
|
<div class="canvas-group">
|
|
<canvas id="canvas" width="384" height="384"></canvas>
|
|
<canvas id="preview" width="384" height="384"></canvas>
|
|
</div>
|
|
<div class="center buttons">
|
|
<!-- <button id="canvas-expand" data-i18n="expand">Expand</button>
|
|
<button id="canvas-crop" data-i18n="crop">Crop</button> -->
|
|
<!-- <button id="button-preview" data-i18n="preview">Preview</button> -->
|
|
<button id="button-reset" data-i18n="reset" data-key>Reset</button>
|
|
<button id="button-print" data-i18n="print" data-key=" ">Print</button>
|
|
</div>
|
|
<div class="blank"></div>
|
|
</div>
|
|
</main>
|
|
<div id="hidden" class="hard-hidden">
|
|
<!-- Hidden area for putting elements -->
|
|
<input type="file" id="file" />
|
|
<div id="accessibility">
|
|
<div>
|
|
<h2>
|
|
<span>🌎</span>
|
|
<span data-i18n="language">Language</span>
|
|
</h2>
|
|
<select multiple id="select-language" data-key="a">
|
|
</select>
|
|
<br />
|
|
<span id="hint-tab-control" class="hide-on-android"
|
|
data-i18n="to-enter-keyboard-mode-press-tab">To enter Keyboard Mode, press Tab</span>
|
|
</div>
|
|
<div>
|
|
<h2 data-i18n="layout">Layout</h2>
|
|
<input type="checkbox" name="dark-theme" id="dark-theme" data-key />
|
|
<label for="dark-theme" data-i18n="dark-theme">Dark Theme</label>
|
|
<br />
|
|
<input type="checkbox" name="high-contrast" id="high-contrast" data-key />
|
|
<label for="high-contrast" data-i18n="high-contrast">High Contrast</label>
|
|
<br />
|
|
<input type="checkbox" name="no-animation" id="no-animation" data-key />
|
|
<label for="no-animation" data-i18n="disable-animation">Disable Animation</label>
|
|
<br />
|
|
<input type="checkbox" name="force-rtl" id="force-rtl" data-key />
|
|
<label for="force-rtl" data-i18n="right-to-left-text-order">Right-to-left text order</label>
|
|
<br />
|
|
<input type="checkbox" name="large-font" id="large-font" data-key />
|
|
<label for="large-font" data-i18n="large-font">Large Font</label>
|
|
</div>
|
|
</div>
|
|
<iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe>
|
|
</div>
|
|
<div id="dialog" class="hidden">
|
|
<div class="shade"></div>
|
|
<div class="content">
|
|
<div id="dialog-content">
|
|
<!-- Dialog content -->
|
|
</div>
|
|
<div id="dialog-choices">
|
|
<input id="dialog-input" type="text" id="dialog-input" placeholder="" data-key="m">
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="loading-screen">
|
|
<div class="logo"></div>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<noscript>
|
|
<p class="noscript">
|
|
<span>Please enable JavaScript!</span><br />
|
|
<a href="jslicense.html" data-i18n="javascript-license-information"
|
|
data-jslicense="1" tabindex="1" >JavaScript License Information</a>
|
|
</p>
|
|
</noscript>
|
|
</div>
|
|
<div id="keyboard-shortcuts-layer"></div>
|
|
<script src="loader.js"></script>
|
|
</body>
|
|
</html>
|