mirror of
https://github.com/NaitLee/Cat-Printer.git
synced 2025-05-15 23:00:15 -07:00
260 lines
13 KiB
HTML
260 lines
13 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 class="hard-animation">
|
|
<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>
|
|
<div data-hide-as="print">
|
|
<label for="device-options" data-i18n="device-">Device:</label>
|
|
<select id="device-options" data-key>
|
|
</select>
|
|
<button id="device-refresh" data-i18n="scan" data-key>Scan</button>
|
|
<hr />
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="label-span-input">
|
|
<span data-i18n="process-as-">Process as:</span>
|
|
<span>
|
|
<label>
|
|
<input type="radio" name="algo" value="algo-steinberg" data-key checked />
|
|
<span data-i18n="picture">Picture</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="algo" value="algo-halftone" data-key />
|
|
<span data-i18n="pattern">Pattern</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="algo" value="algo-direct" data-key />
|
|
<span data-i18n="text">Text</span>
|
|
</label>
|
|
</span>
|
|
</span>
|
|
<!-- "brightness" is historically "threshold" -->
|
|
<label class="label-span-input">
|
|
<span data-i18n="brightness-">Brightness:</span>
|
|
<input type="range" min="0" max="256" value="86" step="16" name="threshold" data-key data-default />
|
|
</label>
|
|
<!-- Thermal "Strength", so-called "darkness", or internally "energy" -->
|
|
<label class="label-span-input" data-hide-as="print">
|
|
<span data-i18n="strength-">Strength:</span>
|
|
<input type="range" min="0" max="256" value="64" step="16" name="energy" data-key data-default />
|
|
</label>
|
|
<!-- "Quality", just speed of paper feeding, but slower makes better heating -->
|
|
<label class="label-span-input" data-hide-as="print">
|
|
<span data-i18n="quality-">Quality:</span>
|
|
<input type="range" min="24" max="36" value="32" step="4" name="quality" data-key data-default />
|
|
</label>
|
|
</div>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="rotate" data-key />
|
|
<span data-i18n="rotate-image">Rotate Image</span>
|
|
</label>
|
|
<label class="label-input-span" data-hide-as="print">
|
|
<input type="checkbox" name="transparent-as-white" data-key checked />
|
|
<span data-i18n="transparent-as-white">Transparent as White</span>
|
|
</label>
|
|
<div class="center">
|
|
<button data-i18n="show-more-options" data-show="print" data-once data-key>Show More Options</button>
|
|
</div>
|
|
</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">
|
|
<div class="input-group">
|
|
<label class="label-span-input">
|
|
<span data-i18n="scan-time-">Scan Time:</span>
|
|
<input type="number" name="scan-time" min="1" max="10" value="4" data-key />
|
|
<span data-i18n="-seconds">seconds</span>
|
|
</label>
|
|
</div>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="flip" data-key />
|
|
<span data-i18n="cat-face-toward">Cat Face Toward</span>
|
|
</label>
|
|
<!-- <hr /> -->
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="dry-run" data-key />
|
|
<span data-i18n="dry-run">Dry Run</span>
|
|
</label>
|
|
<!-- <label class="label-input-span">
|
|
<input type="checkbox" name="dump" data-key />
|
|
<span data-i18n="dump-traffic">Dump Traffic</span>
|
|
</label> -->
|
|
<button id="set-accessibility" data-key>
|
|
<span>🌎</span>
|
|
<span data-i18n="accessibility">Accessibility</span>
|
|
</button>
|
|
<button id="test-unknown-device" data-i18n="test-unknown-device" data-key>Test Unknown Device</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>
|
|
<button id="insert-text" data-i18n="insert-text" data-key="\">Insert Text</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-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 dynamic elements -->
|
|
<input type="file" id="file" />
|
|
<img src="" id="img" alt="hidden-image" />
|
|
<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>
|
|
<br />
|
|
</div>
|
|
<div>
|
|
<h2 data-i18n="layout">Layout</h2>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="dark-theme" data-key />
|
|
<span data-i18n="dark-theme">Dark Theme</span>
|
|
</label>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="high-contrast" data-key />
|
|
<span data-i18n="high-contrast">High Contrast</span>
|
|
</label>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="no-animation" data-key />
|
|
<span data-i18n="disable-animation">Disable Animation</span>
|
|
</label>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="force-rtl" data-key />
|
|
<span data-i18n="right-to-left-text-order">Right-to-left text order</span>
|
|
</label>
|
|
<label class="label-input-span">
|
|
<input type="checkbox" name="large-font" data-key />
|
|
<span data-i18n="large-font">Large Font</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="text-input">
|
|
<h1 data-i18n="insert-text">Insert Text</h1>
|
|
<div>
|
|
<div id="text-settings">
|
|
<div name="font-and-size" class="text-settings-group">
|
|
<select id="text-font" contenteditable="true" data-key>
|
|
<option value="serif" data-i18n="serif">Serif</option>
|
|
<option value="sans-serif" data-i18n="sans-serif" selected>Sans Serif</option>
|
|
<option value="monospace" data-i18n="monospace">Monospace</option>
|
|
<option value="Unifont" data-i18n="unifont">Unifont</option>
|
|
</select>
|
|
<input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
|
|
</div>
|
|
<div name="wrap-and-align" class="text-settings-group">
|
|
<label>
|
|
<input type="checkbox" name="wrap-words-by-spaces" data-key checked />
|
|
<span data-i18n="wrap-words-by-spaces">Wrap words by spaces</span>
|
|
</label>
|
|
<span class="text-align-container">
|
|
<input type="radio" name="text-align" value="left" data-key checked />
|
|
<span class="text-align-checkmark text-align-left"></span>
|
|
</span>
|
|
<span class="text-align-container">
|
|
<input type="radio" name="text-align" value="center" data-key />
|
|
<span class="text-align-checkmark text-align-center"></span>
|
|
</span>
|
|
<span class="text-align-container">
|
|
<input type="radio" name="text-align" value="right" data-key />
|
|
<span class="text-align-checkmark text-align-right"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="text-textarea">
|
|
<textarea id="insert-text-area" data-key="/"></textarea>
|
|
</div>
|
|
</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" 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>
|