You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 lines
5.4 KiB
HTML
194 lines
5.4 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<link href="colorPicker.css" rel="stylesheet" type="text/css">
|
|
<link href="colorPicker.sys.css" rel="stylesheet" type="text/css">
|
|
<style type="text/css">
|
|
#displayHTML, #displayCSS {
|
|
clear: both;
|
|
padding: 2em 1em 0;
|
|
color: #666;
|
|
font-family: Courier,mono; /* "Courier New", */
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
}
|
|
pre {
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
-webkit-tab-size: 4;
|
|
-ms-tab-size: 4;
|
|
tab-size: 4;
|
|
}
|
|
.cp-app {
|
|
position: relative;
|
|
float: left;
|
|
margin: 10px 0 0 10px;
|
|
}
|
|
.cp-app .cp-curm {
|
|
top: 255px;
|
|
left: 0;
|
|
}
|
|
.cp-app .cp-curl,
|
|
.cp-app .cp-curr {
|
|
top: 255px;
|
|
}
|
|
.cp-panel .cp-cold {
|
|
width: 71%;
|
|
}
|
|
.cp-panel .cp-cont {
|
|
width: 29%;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
</style>
|
|
<title>colorPicker markup</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="cp-app alpha-bg-w">
|
|
<div class="cp-slds">
|
|
<div class="cp-sldl-1"></div>
|
|
<div class="cp-sldl-2"></div>
|
|
<div class="cp-sldl-3"></div>
|
|
<div class="cp-curm"></div>
|
|
<div class="cp-sldr-1"></div>
|
|
<div class="cp-sldr-2"></div>
|
|
<div class="cp-sldr-4"></div>
|
|
<div class="cp-curl"></div>
|
|
<div class="cp-curr"></div>
|
|
</div>
|
|
<div class="cp-opacity">
|
|
<div>
|
|
<div class="cp-opacity-slider"></div>
|
|
</div>
|
|
</div>
|
|
<div class="cp-memo">
|
|
<div class="cp-raster"></div>
|
|
<div class="cp-raster-bg"></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div class="cp-memo-store"></div>
|
|
<div class="cp-memo-cursor"></div>
|
|
</div>
|
|
<div class="cp-panel">
|
|
<div class="cp-hsv">
|
|
<div class="hsl-mode cp-butt"></div>
|
|
<div class="hsv-h-butt cp-butt">H</div>
|
|
<div class="hsv-h-disp cp-disp">-<div class="cp-nsarrow"></div></div>
|
|
<div class="hsl-h-labl cp-labl">H</div>
|
|
<div class="hsv-s-butt cp-butt">S</div>
|
|
<div class="hsv-s-disp cp-disp">-</div>
|
|
<div class="hsl-s-labl cp-labl">S</div>
|
|
<div class="hsv-v-butt cp-butt">B</div>
|
|
<div class="hsv-v-disp cp-disp">-</div>
|
|
<div class="hsl-l-labl cp-labl">L</div>
|
|
</div>
|
|
<div class="cp-hsl cp-hide">
|
|
<div class="hsv-mode cp-butt"></div>
|
|
<div class="hsl-h-butt cp-butt">H</div>
|
|
<div class="hsl-h-disp cp-disp">-</div>
|
|
<div class="hsv-h-labl cp-labl">H</div>
|
|
<div class="hsl-s-butt cp-butt">S</div>
|
|
<div class="hsl-s-disp cp-disp">-</div>
|
|
<div class="hsv-s-labl cp-labl">S</div>
|
|
<div class="hsl-l-butt cp-butt">L</div>
|
|
<div class="hsl-l-disp cp-disp">-</div>
|
|
<div class="hsv-v-labl cp-labl">B</div>
|
|
</div>
|
|
<div class="cp-rgb">
|
|
<div class="rgb-r-butt cp-butt">R</div>
|
|
<div class="rgb-r-disp cp-disp">-</div>
|
|
<div class="rgb-r-labl cp-butt"> </div>
|
|
<div class="rgb-g-butt cp-butt">G</div>
|
|
<div class="rgb-g-disp cp-disp">-</div>
|
|
<div class="rgb-g-labl cp-butt"> </div>
|
|
<div class="rgb-b-butt cp-butt">B</div>
|
|
<div class="rgb-b-disp cp-disp">-</div>
|
|
<div class="rgb-b-labl cp-butt"> </div>
|
|
</div>
|
|
<div class="cp-cmyk">
|
|
<div class="Lab-mode cp-butt"></div>
|
|
<div class="cmyk-c-butt cp-labl">C</div>
|
|
<div class="cmyk-c-disp cp-disp">-</div>
|
|
<div class="Lab-L-labl cp-labl">L</div>
|
|
<div class="cmyk-m-butt cp-labl">M</div>
|
|
<div class="cmyk-m-disp cp-disp">-</div>
|
|
<div class="Lab-a-labl cp-labl">a</div>
|
|
<div class="cmyk-y-butt cp-labl">Y</div>
|
|
<div class="cmyk-y-disp cp-disp">-</div>
|
|
<div class="Lab-b-labl cp-labl">b</div>
|
|
<div class="cmyk-k-butt cp-labl">K</div>
|
|
<div class="cmyk-k-disp cp-disp">-</div>
|
|
<div class="Lab-x-labl cp-butt"> </div>
|
|
</div>
|
|
<div class="cp-Lab cp-hide">
|
|
<div class="cmyk-mode cp-butt"></div>
|
|
<div class="Lab-L-butt cp-labl">L</div>
|
|
<div class="Lab-L-disp cp-disp">-</div>
|
|
<div class="cmyk-c-labl cp-labl">C</div>
|
|
<div class="Lab-a-butt cp-labl">a</div>
|
|
<div class="Lab-a-disp cp-disp">-</div>
|
|
<div class="cmyk-m-labl cp-labl">M</div>
|
|
<div class="Lab-b-butt cp-labl">b</div>
|
|
<div class="Lab-b-disp cp-disp">-</div>
|
|
<div class="cmyk-y-labl cp-labl">Y</div>
|
|
<div class="Lab-x-butt cp-labl"> </div>
|
|
<div class="Lab-x-disp cp-disp">-</div>
|
|
<div class="cmyk-k-labl cp-labl">K</div>
|
|
</div>
|
|
<div class="cp-alpha">
|
|
<div class="alpha-butt cp-butt">A</div>
|
|
<div class="alpha-disp cp-disp">-</div>
|
|
<div class="alpha-labl cp-butt">W</div>
|
|
</div>
|
|
<div class="cp-HEX">
|
|
<div class="HEX-butt cp-butt">#</div>
|
|
<div class="HEX-disp cp-disp">-</div>
|
|
<div class="HEX-labl cp-butt">M</div>
|
|
</div>
|
|
<div class="cp-ctrl">
|
|
<div class="cp-raster"></div>
|
|
<div class="cp-cont"></div>
|
|
<div class="cp-cold"></div>
|
|
<div class="cp-col1">
|
|
<div> </div>
|
|
</div>
|
|
<div class="cp-col2">
|
|
<div> </div>
|
|
</div>
|
|
<div class="cp-bres">RESET</div>
|
|
<div class="cp-bsav">SAVE</div>
|
|
</div>
|
|
</div>
|
|
<div class="cp-exit"></div>
|
|
<div class="cp-resize"></div>
|
|
<div class="cp-resizer"><div></div></div>
|
|
</div>
|
|
|
|
|
|
|
|
<pre id="displayHTML"> </pre>
|
|
<pre id="displayCSS"> </pre>
|
|
|
|
<script type="text/javascript" src="colorPicker.dev.js"></script>
|
|
|
|
<script type="text/javascript" src="../colors.js"></script>
|
|
<script type="text/javascript" src="../colorPicker.js"></script>
|
|
<script type="text/javascript">
|
|
// var myDevMode = new ColorPicker({
|
|
// devPicker: document.getElementsByClassName('cp-app')[0],
|
|
// instanceName: 'myDevMode'
|
|
// });
|
|
</script>
|
|
|
|
</body>
|
|
</html> |