236 lines
9.0 KiB
HTML
236 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>draw</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body data-theme="light" data-cursor="crosshair">
|
|
<div id="app" class="wrap">
|
|
<canvas id="canvas"></canvas>
|
|
<div id="refLayer"></div>
|
|
<div id="cursorDot" aria-hidden="true"></div>
|
|
|
|
<aside id="hud" class="hud" aria-label="drawing controls">
|
|
<div class="hud-inner">
|
|
<div class="hud-top">
|
|
<div id="hudDragHandle" tabindex="0" role="button" aria-label="Drag panel or use arrow keys to move"></div>
|
|
<button id="toggleTheme" class="icon-btn" type="button" aria-label="Toggle theme">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.75 12h10.5m0 0a2.5 2.5 0 0 0 5 0m-5 0a2.5 2.5 0 0 1 5 0m0 0h3M7.75 5.25h13.5m-13.5 0a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0m-5 13.5h3m0 0a2.5 2.5 0 0 0 5 0m-5 0a2.5 2.5 0 0 1 5 0m0 0h10.5"/>
|
|
</svg>
|
|
</button>
|
|
<button id="cycleCursor" class="icon-btn" type="button" aria-label="Cycle cursor mode">
|
|
<svg class="icon cursor-ic cursor-default" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path fill="currentColor" d="M13.91 12.36L17 20.854l-2.818 1.026l-3.092-8.494l-4.172 3.156l1.49-14.909l10.726 10.463z"/>
|
|
</svg>
|
|
<svg class="icon cursor-ic cursor-crosshair" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path fill="currentColor" d="M11 21v-8H3v-2h8V3h2v8h8v2h-8v8z"/>
|
|
</svg>
|
|
<svg class="icon cursor-ic cursor-dot" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path fill="currentColor" d="M12 16a4 4 0 1 1 0-8a4 4 0 0 1 0 8Z"/>
|
|
</svg>
|
|
</button>
|
|
<div id="hudHoverGap" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<div id="uiBody" class="hud-body">
|
|
<div class="row">
|
|
<label for="size">size</label>
|
|
<div class="value">
|
|
<input id="sizeRange" type="range" min="1" max="100" step="1" value="12">
|
|
<input id="size" type="number" min="1" max="100" step="1" value="12">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="thinning">thinning</label>
|
|
<div class="value">
|
|
<input id="thinningRange" type="range" min="-0.99" max="0.99" step="0.01" value="-0.2">
|
|
<input id="thinning" type="number" min="-0.99" max="0.99" step="0.01" value="-0.2">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="smoothing">smoothing</label>
|
|
<div class="value">
|
|
<input id="smoothingRange" type="range" min="0.01" max="0.99" step="0.01" value="0.56">
|
|
<input id="smoothing" type="number" min="0.01" max="0.99" step="0.01" value="0.56">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="streamline">streamline</label>
|
|
<div class="value">
|
|
<input id="streamlineRange" type="range" min="0.01" max="0.99" step="0.01" value="0.82">
|
|
<input id="streamline" type="number" min="0.01" max="0.99" step="0.01" value="0.82">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="pressureMode">pressure mode</label>
|
|
<div class="value">
|
|
<select id="pressureMode">
|
|
<option value="simulate">simulate</option>
|
|
<option value="pointer">pointer pressure</option>
|
|
</select>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row color-row">
|
|
<label for="strokeColor">stroke color</label>
|
|
<div class="value">
|
|
<input id="strokeColor" type="color" value="#000000">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<label>gradient</label>
|
|
<div class="value">
|
|
<button id="gradientToggle" type="button">show</button>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gradientPanel" class="collapsible-panel">
|
|
<div class="row">
|
|
<label for="colorA">color a</label>
|
|
<div class="value">
|
|
<input id="colorA" type="color" value="#000000">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="colorB">color b</label>
|
|
<div class="value">
|
|
<input id="colorB" type="color" value="#ffffff">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="gradientMix">gradient mix</label>
|
|
<div class="value">
|
|
<input id="gradientMixRange" type="range" min="0" max="1" step="0.01" value="0.5">
|
|
<input id="gradientMix" type="number" min="0" max="1" step="0.01" value="0.5">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="gradientMode">gradient mode</label>
|
|
<div class="value">
|
|
<select id="gradientMode">
|
|
<option value="fixed">fixed mix</option>
|
|
<option value="along">along stroke</option>
|
|
</select>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>guides</label>
|
|
<div class="value">
|
|
<button id="guidesToggle" type="button">show</button>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="guidesPanel" class="collapsible-panel">
|
|
<div class="row checkbox-row">
|
|
<label for="guidesOn">guides on</label>
|
|
<div class="value">
|
|
<label class="glass-checkbox">
|
|
<input id="guidesOn" type="checkbox">
|
|
<span>on</span>
|
|
</label>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="guidesMode">layout mode</label>
|
|
<div class="value">
|
|
<select id="guidesMode">
|
|
<option value="crosshair">crosshair</option>
|
|
<option value="grid">grid</option>
|
|
<option value="custom">custom</option>
|
|
</select>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="guidesSpacing">spacing</label>
|
|
<div class="value">
|
|
<input id="guidesSpacingRange" type="range" min="8" max="400" step="1" value="80">
|
|
<input id="guidesSpacing" type="number" min="8" max="400" step="1" value="80">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="guidesOpacity">opacity</label>
|
|
<div class="value">
|
|
<input id="guidesOpacityRange" type="range" min="0" max="1" step="0.01" value="0.18">
|
|
<input id="guidesOpacity" type="number" min="0" max="1" step="0.01" value="0.18">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row checkbox-row">
|
|
<label for="guidesSnap">snap</label>
|
|
<div class="value">
|
|
<label class="glass-checkbox">
|
|
<input id="guidesSnap" type="checkbox">
|
|
<span>on</span>
|
|
</label>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="resetGuides">reset</label>
|
|
<div class="value">
|
|
<button id="resetGuides" type="button">reset guides</button>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="addRef">reference</label>
|
|
<div class="value">
|
|
<input id="refUpload" type="file" accept="image/*" multiple hidden>
|
|
<button id="addRef" type="button">add ref.</button>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row checkbox-row" style="opacity:1;">
|
|
<label for="eraser">eraser</label>
|
|
<div class="value">
|
|
<label class="glass-checkbox">
|
|
<input id="eraser" type="checkbox">
|
|
<span>on</span>
|
|
</label>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hud-footer hidden" style="opacity:0;">
|
|
<button id="clear" type="button">clear</button>
|
|
<button id="undo" type="button">undo</button>
|
|
<button id="redo" type="button">redo</button>
|
|
<button id="save" type="button">save</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script type="module" src="./main.js"></script>
|
|
</body>
|
|
</html>
|