index.html

<!DOCTYPE html>
<html lang="en" theme="dark">

<head>
    <meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>ColorPicker</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Changa">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/ColorPicker/color-input.css">
    <link rel="stylesheet" href="assets/css/ColorPicker/color-picker_scrollbar.css">
    <link rel="stylesheet" href="assets/css/ColorPicker/color-picker.css">
    <link rel="stylesheet" href="assets/css/slider/SliderInput.css">
    <link rel="stylesheet" href="assets/css/element-helpers.css">
</head>

<body>
    <h4 id="example_heading" style="margin: 20px;">Change my color</h4>
    <div class="d-block input-color" id="testColor" style="margin-left: 30px;" value="rgb(4,183,32)"></div>
    <div id="colorpicker" class="color-picker window" menu=""><i class="fa fa-eyedropper" id="cp_eyedropper"></i>
        <div id="cp_bg" class="relative-fill">
            <div class="tabs">
                <div class="tab active" cp-sub-menu-tab="main, shared">
                    <div class="t-overlay"></div><i class="fa fa-adjust"></i>
                </div>
                <div class="tab" cp-sub-menu-tab="palette, shared">
                    <div class="t-overlay"></div><i class="material-icons">palette</i>
                </div>
                <div class="tab" cp-sub-menu-tab="favourite, shared">
                    <div class="t-overlay"></div><i class="fa fa-heart"></i>
                </div>
                <div class="tab" cp-sub-menu-tab="advanced, shared">
                    <div class="t-overlay"></div><i class="fa fa-gears"></i>
                </div>
            </div>
            <div class="show" cp-sub-menu="main">
                <div id="cp_colorwall" class="color" style="background-color:#ff0000;">
                    <div class="sat">
                        <div class="val">
                            <div id="cp_cursor" class="color-wall-cursor"></div>
                        </div>
                    </div>
                </div>
                <div id="cp_huebar" class="hue cp_cbar" minvalue="0" maxvalue="360">
                    <div class="relative-fill">
                        <div id="cp_huehandle" class="handle smooth"></div>
                    </div>
                </div>
                <div id="cp_transbar" class="trans cp_cbar t-bg" minvalue="0" maxvalue="1">
                    <div class="relative-fill">
                        <div class="bg"></div>
                        <div id="cp_transhandle" class="handle smooth"></div>
                    </div>
                </div>
            </div>
            <div cp-sub-menu="palette">
                <div>
                    <div class="active" palette="basic">
                        <div></div>
                    </div>
                    <div palette="w3">
                        <div></div>
                    </div>
                    <div palette="extended">
                        <div></div>
                    </div>
                    <div palette="simple">
                        <div></div>
                    </div>
                </div><select id="cp_palette">
                    <optgroup label="Choose a Palette...">
                        <option value="basic" selected="">Basic</option>
                        <option value="extended">Extended</option>
                        <option value="w3">W3</option>
                    </optgroup>
                </select>
            </div>
            <div cp-sub-menu="favourite">
                <div id="cp_palettes">
                    <div palette="session"></div>
                    <div class="active" palette="favourite"></div>
                    <div palette="current"></div>
                </div>
                <div id="cp_deleteFav"><i class="fa fa-remove"></i></div><select id="cp_favourites">
                    <optgroup label="Choose a Palette...">
                        <option value="favourite" selected="">Favourites</option>
                        <option value="session">Session</option>
                        <option value="current">Current</option>
                        <option value="new">Create New</option>
                    </optgroup>
                </select><input type="file" id="cp_favHiddenImport" class="d-none" accept=".pal"><a id="cp_favHiddenExport" class="d-none" href="#">Link</a>
                <div id="cp_favModal"><a id="cp_favModalDB"><i class="fa fa-save"></i></a><input type="text" id="cp_inputNewFav" placeholder="Enter a name..."><button class="btn btn-primary" id="cp_newFavOk" type="button">Ok</button><button class="btn btn-primary" id="cp_newFavCancel" type="button">✖<br></button></div>
                <div class="btn-group" role="group"><button class="btn btn-primary" id="cp_favImport" type="button">Import</button><button class="btn btn-primary" id="cp_favExport" type="button">Export</button></div>
            </div>
            <div cp-sub-menu="advanced"><label class="form-label cp_a_label redhue">Red</label><label class="form-label cp_a_label greensaturation">Green</label><label class="form-label cp_a_label bluebrightness">Blue</label><label class="form-label cp_a_label transparency">Transparency</label>
                <div id="cp_a_redhue" class="sliderInput" minvalue="0" maxvalue="255" type="int" useinput="true" value="0" style="margin: auto;width: 275px;" units="°" steps="1">
                    <div class="sbar">
                        <div class="shandle"></div>
                    </div><input type="" class="slider-output" maxlength="255">
                </div>
                <div id="cp_a_greensaturation" class="sliderInput" minvalue="0" maxvalue="255" type="int" useinput="true" value="0" style="margin: auto;width: 275px;" units="%" steps="1">
                    <div class="sbar">
                        <div class="shandle"></div>
                    </div><input type="" class="slider-output">
                </div>
                <div id="cp_a_bluebrightness" class="sliderInput" minvalue="0" maxvalue="255" type="int" useinput="true" value="0" style="margin: auto;width: 275px;" units="%" steps="1">
                    <div class="sbar">
                        <div class="shandle"></div>
                    </div><input type="" class="slider-output">
                </div>
                <div id="cp_a_transparency" class="sliderInput" minvalue="0" maxvalue="100" type="units" useinput="true" value="100" style="margin: auto;width: 275px;" units="%" steps="1">
                    <div class="sbar">
                        <div class="shandle"></div>
                    </div><input type="" class="slider-output">
                </div>
                <div class="hsv-rgb_selector">
                    <div id="cp_a_rgb" class="active"><label class="form-label">RGB</label></div>
                    <div id="cp_a_hsv"><label class="form-label">HSV</label></div>
                </div>
                <div id="cp_a_walltoggle">
                    <div class="t-overlay"></div><i class="fa fa-plus"></i><i class="fa fa-minus"></i>
                </div>
                <div id="cp_a_colorwall" class="color show" style="background-color:#ff0000;">
                    <div class="sat">
                        <div class="val">
                            <div id="cp_a_cursor" class="color-wall-cursor"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show" cp-sub-menu="shared">
                <div id="cp_lastcolor" class="preview t-bg">
                    <div class="t-overlay"></div>
                </div>
                <div id="cp_newcolor" class="preview t-bg">
                    <div class="t-overlay"></div>
                </div>
                <div id="cp_eyedropperbtn"><i class="fa fa-eyedropper"></i></div>
                <div class="favourite"><i class="fa fa-heart" id="cp_favourite"></i></div><select id="cp_colorvaluetype" class="value-type" style="width: 78px;height: 28px;">
                    <optgroup label="Color Input/Output Type">
                        <option value="RGBA" selected="">RGBA</option>
                        <option value="HEX">HEX</option>
                    </optgroup>
                </select><input type="text" id="cp_colorvalueinput" style="width: 160px;height: 28px;">
            </div><button class="btn btn-dark" id="cp_accept" type="button">Accept</button><button class="btn btn-secondary" id="cp_cancel" type="button">Cancel</button><button class="btn btn-secondary" id="cp_none" type="button">Default</button>
            <div id="cp_previewpalette" style="display:none;"></div>
        </div>
    </div>
    <h4 id="example_heading2" style="margin: 20px;">Change my value :&nbsp;</h4>
    <div id="testSlider" class="sliderInput" type="float" value="0" steps="0.1">
        <div class="sbar">
            <div class="shandle"></div>
        </div><input type="" maxlength="255">
    </div>
    <div id="testSlider2" class="sliderInput" minvalue="0" maxvalue="255" type="int" value="0" units="°" steps="1">
        <div class="sbar">
            <div class="shandle"></div>
        </div><input type="" maxlength="255">
    </div>
    <p>Using Sliders is not recommended.<br>To get certain things into a working state I rushed patching things together and created a bit of a mess.<br>They need a complete rewrite before they are reliable to use outside the color window.<br></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/delegates/EventWindowResize.js"></script>
    <script src="assets/js/Extensions/jquery.js"></script>
    <script src="assets/js/delegates/EventWindowScroll.js"></script>
    <script src="assets/js/Extensions/array.js"></script>
    <script src="assets/js/delegates/EventReady.js"></script>
    <script src="assets/js/Extensions/Color.js"></script>
    <script src="assets/js/ColorPicker/ColorData.js"></script>
    <script src="assets/js/delegates/EventKeyPress.js"></script>
    <script src="assets/js/delegates/EventKeyUp.js"></script>
    <script src="assets/js/Extensions/File.js"></script>
    <script src="assets/js/delegates/EventKeyDown.js"></script>
    <script src="assets/js/Extensions/Map.js"></script>
    <script src="assets/js/delegates/EventMouseClick.js"></script>
    <script src="assets/js/Extensions/MathE.js"></script>
    <script src="assets/js/delegates/EventMouseDoubleClick.js"></script>
    <script src="assets/js/Extensions/Number.js"></script>
    <script src="assets/js/delegates/EventMouseDown.js"></script>
    <script src="assets/js/Extensions/Error.js"></script>
    <script src="assets/js/delegates/EventMouseUp.js"></script>
    <script src="assets/js/Extensions/set.js"></script>
    <script src="assets/js/delegates/EventMouseMove.js"></script>
    <script src="assets/js/Extensions/Object.js"></script>
    <script src="assets/js/delegates/CustomEvents.js"></script>
    <script src="assets/js/Extensions/Position.js"></script>
    <script src="assets/js/Extensions/resizeCanvas.js"></script>
    <script src="assets/js/ColorPicker/SliderInput.js"></script>
    <script src="assets/js/ColorPicker/ColorInput.js"></script>
    <script src="assets/js/ColorPicker/ColorPicker.js"></script>
    <script src="assets/js/Example.js"></script>
    <script src="assets/js/Extensions/BinaryExport.js"></script>
</body>

</html>