74 lines
3.2 KiB
Handlebars
74 lines
3.2 KiB
Handlebars
<!-- PALETTE -->
|
|
<div id = "palette-block">
|
|
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
|
|
|
<h1>Edit palette</h1>
|
|
|
|
<div id = "colour-picker">
|
|
<div id = "cp-modes">
|
|
<button id="cp-rgb" class="cp-selected-mode" onclick="changePickerMode(this, 'rgb')">RGB</button>
|
|
<button id="cp-hsv" onclick="changePickerMode(this, 'hsv')">HSV</button>
|
|
<button id="cp-hsl" onclick="changePickerMode(this, 'hsl')">HSL</button>
|
|
|
|
<div id="cp-colour-preview" class="cp-colour-preview"></div>
|
|
<input id="cp-hex" type="text" value="#123456" onchange="hexUpdated()"/>
|
|
</div>
|
|
|
|
<div id = "sliders-container">
|
|
<div class = "cp-slider-entry">
|
|
<label for = "first-slider">R</label>
|
|
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider" onmousemove="updateSliderValue(1)" onclick="updateSliderValue(1)"/>
|
|
<input type = "text" value = "128" onchange="inputChanged(this,1)"/>
|
|
</div>
|
|
|
|
<div class = "cp-slider-entry">
|
|
<label for = "second-slider">G</label>
|
|
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider" onmousemove="updateSliderValue(2)" onclick="updateSliderValue(2)"/>
|
|
<input type = "text" value = "128" onchange="inputChanged(this,2)"/>
|
|
</div>
|
|
|
|
<div class = "cp-slider-entry">
|
|
<label for = "third-slider">B</label>
|
|
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider" onmousemove="updateSliderValue(3)" onclick="updateSliderValue(3)"/>
|
|
<input type = "text" value = "128" onchange="inputChanged(this,3)"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div id = "cp-minipicker">
|
|
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider" onmousemove="miniSliderInput(event)" onclick="miniSliderInput(event)"/>
|
|
<div id="cp-canvas-container" onmousemove="movePickerIcon(event)">
|
|
<canvas id = "cp-spectrum"></canvas>
|
|
<div id="cp-active-icon" class="cp-picker-icon"></div>
|
|
</div>
|
|
|
|
<div id = "cp-colours-previews">
|
|
<div class = "cp-colour-preview">
|
|
#123456
|
|
</div>
|
|
</div>
|
|
|
|
<div id = "cp-colour-picking-modes">
|
|
<button class="cp-selected-mode" onclick="changePickingMode(event,'mono')">Mono</button>
|
|
<button onclick="changePickingMode(event,'analog')">Nlgs</button>
|
|
<button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
|
|
<button onclick="changePickingMode(event,'tri')">Tri</button>
|
|
<button onclick="changePickingMode(event,'scmpt')">Scm</button>
|
|
<button onclick="changePickingMode(event,'tetra')">Tetra</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id = "palette-container">
|
|
<ul id = "palette-list">
|
|
<li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="startRampSelection(event)"
|
|
onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
|
|
<li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="startRampSelection(event)"
|
|
onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="pb-options">
|
|
<button title="Add colours to palette" onclick="pbAddColours()">Add colours</button>
|
|
<button title="Remove colours from palette" onclick="pbRemoveColours()">Remove colours</button>
|
|
</div>
|
|
</div> |