72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Gradient Editor</title>
|
|
|
|
<link rel="stylesheet" href="gradient-editor.css">
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>Histogram Gradient Editor</h1>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="toolbar">
|
|
<button id="addPoint" class="btn">Add point</button>
|
|
<button id="removePoint" class="btn" disabled>Remove selected</button>
|
|
<span class="muted small">Click the color canvas to set the selected point's color.</span>
|
|
</div>
|
|
<canvas id="gradientCanvas" width="960" height="1"></canvas>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<canvas id="picker" width="600" height="180"></canvas>
|
|
<div class="muted small">Hue horizontal; white top; black bottom.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="margin-top:16px; margin-bottom:16px">
|
|
<table id="pointsTable">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40px">#</th>
|
|
<th style="width:80px">Swatch</th>
|
|
<th>Hex</th>
|
|
<th style="width:140px">Weight</th>
|
|
<th style="width:120px">Position</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<button id="exportShader" class="btn">Export OBS shader</button>
|
|
<button id="exportJSON" class="btn">Export JSON</button>
|
|
<button id="exportES" class="btn">Export EcmaScript</button>
|
|
|
|
</div>
|
|
|
|
<dialog id="exportDialog" class="export-dialog">
|
|
<form method="dialog" class="export-form">
|
|
<h3 id="exportTitle"></h3>
|
|
|
|
<textarea
|
|
id="exportText"
|
|
readonly
|
|
spellcheck="false"></textarea>
|
|
|
|
<div class="toolbar export-toolbar">
|
|
<button id="copyExport" class="btn" type="button">Copy</button>
|
|
<button id="downloadExport" class="btn" type="button">Download</button>
|
|
<button class="btn">Close</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
|
|
<script src="gradient-editor.js"></script>
|
|
</body>
|
|
</html>
|