87 lines
3.0 KiB
HTML
87 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ComfyUI Canvas Editor</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="cash.min.js"></script>
|
|
<script src="support.js"></script>
|
|
<script src="paintTools.js"></script>
|
|
<script src="bspaint.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="fillparent">
|
|
<div class="panel noselect">
|
|
<div id="import_control">
|
|
<label for="import_mode">
|
|
Incoming Images
|
|
</label>
|
|
<select id="import_mode">
|
|
<option value="replace_target">Replace Targeted Layer</option>
|
|
<option value="layer">Add layer <small>(if size matches)</small></option>
|
|
<option value="image">Create new Image</option>
|
|
<option value="ignore">Ignore</option>
|
|
</select>
|
|
</div>
|
|
<div id="pen" title="Brush 🇧" class="tool button"></div>
|
|
<div id="eraser" title="Eraser 🇪" class="tool button" style="background-image:url(images/eraser.png);"></div>
|
|
<div id="pixels" title="Pixels 🇿" class="tool button" style="background-image:url(images/pixels.png);"></div>
|
|
<div id="fine_eraser" title="Clear pixels" class="tool button" style="background-image:url(images/fine_eraser.png);"></div>
|
|
<div id="eyedropper" title="Sample color 🇵" class="tool button" ></div>
|
|
<div id="transform" title="Tansform Layer 🇹" class="tool button" ></div>
|
|
<div class="subpanel actions">
|
|
<div id="clear" class="action button" ></div>
|
|
<div id="undo" class="action button" ></div>
|
|
<div id="redo" class="action button" ></div>
|
|
<button id="newImageBtn">New Image</button>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="palette" class="noselect">
|
|
<div id="brush_opacity">
|
|
<label for="opacity">opacity</label>
|
|
<input class="percentage" type="text" value="100%">
|
|
<br>
|
|
<input name="opacity" type="range" min="0" max="100" value="100" step="1">
|
|
</div>
|
|
<input id="foreground" type="color" value="#000000">
|
|
<input id="background" type="color" value="#ff00ff">
|
|
</div>
|
|
<div id="workspace" class="background noselect">
|
|
</div>
|
|
<div id="right_panel">
|
|
<div id="command_control" class = "sidepanel_block">
|
|
|
|
</div>
|
|
|
|
<div id="layer_control" class = "sidepanel_block">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="newImageModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-button">×</span>
|
|
<h2>Create New Image</h2>
|
|
<div>
|
|
<label for="imageWidth">Width:</label>
|
|
<input type="number" id="imageWidth" name="imageWidth" min="1" value="512">
|
|
<br>
|
|
<label for="imageHeight">Height:</label>
|
|
<input type="number" id="imageHeight" name="imageHeight" min="1" value="512">
|
|
|
|
</div>
|
|
<div>
|
|
<button class="create-button">Create</button>
|
|
<button class="cancel-button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html>
|