93 lines
4.9 KiB
HTML
93 lines
4.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Orion4D Gradient Fill</title>
|
||
<link rel="stylesheet" href="./gradient_fill_app.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div>
|
||
<div class="eyebrow">ORION4D LAYER TOOLS</div>
|
||
<h1>Fill / Gradient Generator</h1>
|
||
</div>
|
||
<div class="top-actions">
|
||
<div class="preset-bar">
|
||
<select id="presetSelect" aria-label="Gradient preset"><option value="">— Preset —</option></select>
|
||
<button id="savePreset" class="secondary">Save</button>
|
||
<button id="savePresetAs" class="secondary">Save as…</button>
|
||
<button id="deletePreset" class="danger">Delete</button>
|
||
</div>
|
||
<button id="resetSettings" class="secondary">Reset</button>
|
||
<button id="applySettings" class="primary">Apply</button>
|
||
<button id="closeApp" class="secondary">Close</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="workspace">
|
||
<section class="preview-panel">
|
||
<div class="preview-toolbar">
|
||
<span id="status">Connecting to ComfyUI…</span>
|
||
<span id="canvasInfo">1024 × 1024</span>
|
||
</div>
|
||
<div class="preview-stage">
|
||
<canvas id="previewCanvas"></canvas>
|
||
<div class="preview-hint">Drag the center point directly in the preview</div>
|
||
</div>
|
||
<div class="preview-footer">The preview follows the same gradient geometry as the Python renderer.</div>
|
||
</section>
|
||
|
||
<aside class="controls-panel">
|
||
<section class="control-section">
|
||
<h2>Canvas</h2>
|
||
<div class="two-columns">
|
||
<label>Width<input id="width" type="number" min="1" max="8192" step="1"></label>
|
||
<label>Height<input id="height" type="number" min="1" max="8192" step="1"></label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="control-section">
|
||
<h2>Gradient</h2>
|
||
<label>Mode
|
||
<select id="fill_mode">
|
||
<option value="solid">Solid</option>
|
||
<option value="linear">Linear</option>
|
||
<option value="radial">Radial</option>
|
||
<option value="angular">Angular</option>
|
||
<option value="reflected">Reflected</option>
|
||
<option value="diamond">Diamond</option>
|
||
</select>
|
||
</label>
|
||
<label>Color count
|
||
<select id="color_count"><option>1</option><option>2</option><option>3</option><option>4</option></select>
|
||
</label>
|
||
<div id="colorRows" class="color-list">
|
||
<label class="color-row" data-color-row="1">Color 1<input id="color_1" type="color"><input id="color_1_text" type="text" maxlength="7"></label>
|
||
<label class="color-row" data-color-row="2">Color 2<input id="color_2" type="color"><input id="color_2_text" type="text" maxlength="7"></label>
|
||
<label class="color-row" data-color-row="3">Color 3<input id="color_3" type="color"><input id="color_3_text" type="text" maxlength="7"></label>
|
||
<label class="color-row" data-color-row="4">Color 4<input id="color_4" type="color"><input id="color_4_text" type="text" maxlength="7"></label>
|
||
</div>
|
||
<label>Angle <output data-for="angle"></output><input id="angle" type="range" min="0" max="360" step="1"></label>
|
||
<div class="two-columns ranges">
|
||
<label>Center X <output data-for="center_x"></output><input id="center_x" type="range" min="0" max="1" step="0.01"></label>
|
||
<label>Center Y <output data-for="center_y"></output><input id="center_y" type="range" min="0" max="1" step="0.01"></label>
|
||
</div>
|
||
<label class="toggle-row"><span>Invert direction</span><input id="invert" type="checkbox"></label>
|
||
</section>
|
||
|
||
<section class="control-section">
|
||
<h2>Inner Border</h2>
|
||
<label>Size <output data-for="inner_border_px"></output><input id="inner_border_px" type="range" min="0" max="200" step="1"></label>
|
||
<label>Opacity <output data-for="border_opacity"></output><input id="border_opacity" type="range" min="0" max="1" step="0.01"></label>
|
||
<label class="color-row">Border color<input id="border_color" type="color"><input id="border_color_text" type="text" maxlength="7"></label>
|
||
</section>
|
||
|
||
<div class="bottom-actions"><button id="applyClose" class="primary wide">Apply & Close</button></div>
|
||
</aside>
|
||
</main>
|
||
|
||
<script type="module" src="./gradient_fill_app.js"></script>
|
||
</body>
|
||
</html>
|