| 1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
| 2 |
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| 3 |
<? |
| 4 |
if($_REQUEST["color"]) { |
| 5 |
$color = $_REQUEST["color"]; |
| 6 |
$color = str_replace("#","",$color); |
| 7 |
$col = strtoupper($color); |
| 8 |
$red = hexdec(substr($col,0,2)); |
| 9 |
$green = hexdec(substr($col,2,2)); |
| 10 |
$blue = hexdec(substr($col,4,2)); |
| 11 |
} else { |
| 12 |
$red = 128; |
| 13 |
$green = 128; |
| 14 |
$blue = 128; |
| 15 |
} |
| 16 |
?> |
| 17 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > |
| 18 |
<head> |
| 19 |
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> |
| 20 |
<meta name="description" content="" /> |
| 21 |
<meta name="keywords" content="" /> |
| 22 |
<meta name="robots" content="all" /> |
| 23 |
<meta name="author" content="Twyst" /> |
| 24 |
<title>ColorMatch Remix</title> |
| 25 |
<link type="text/css" rel="StyleSheet" href="swing.css" /> |
| 26 |
<style type="text/css"> |
| 27 |
|
| 28 |
body{ |
| 29 |
margin: 0; |
| 30 |
padding: 5px; |
| 31 |
background: rgb(230,230,230); |
| 32 |
font-family: Trebuchet MS, Verdana, Helvetica, Arial, Sans-serif; |
| 33 |
font-size: small; |
| 34 |
text-align: center; |
| 35 |
} |
| 36 |
|
| 37 |
.color-picker { |
| 38 |
background: transparent; |
| 39 |
width: 568px; |
| 40 |
height: auto; |
| 41 |
} |
| 42 |
|
| 43 |
.color-picker td { |
| 44 |
padding: 1px; |
| 45 |
} |
| 46 |
|
| 47 |
.dynamic-slider-control { |
| 48 |
width: auto; |
| 49 |
height: 20px; |
| 50 |
margin: 0; |
| 51 |
} |
| 52 |
|
| 53 |
.color-picker input { |
| 54 |
text-align: right; |
| 55 |
width: 30px; |
| 56 |
} |
| 57 |
.color-picker td,.color-picker input { |
| 58 |
font-family: Trebuchet MS, Verdana, Helvetica, Arial, Sans-serif; |
| 59 |
font-size: small; |
| 60 |
} |
| 61 |
.slider-caption { |
| 62 |
width: 40px; |
| 63 |
float: left; |
| 64 |
} |
| 65 |
|
| 66 |
.slider { |
| 67 |
position: absolute; |
| 68 |
width: 595px; |
| 69 |
float: left; |
| 70 |
top: 0px; |
| 71 |
left: 45px; |
| 72 |
} |
| 73 |
.sl-input { |
| 74 |
width: 30px; |
| 75 |
float: right; |
| 76 |
} |
| 77 |
|
| 78 |
#color-result { |
| 79 |
width: 75px; |
| 80 |
height: 75px; |
| 81 |
border: 1px solid #000; |
| 82 |
background-color: black; |
| 83 |
} |
| 84 |
.s |
| 85 |
{ |
| 86 |
border:1px solid #000; |
| 87 |
width: 75px; |
| 88 |
height: 75px; |
| 89 |
margin-right: 5px; |
| 90 |
float: left; |
| 91 |
font-weight: bold; |
| 92 |
color: #000000; |
| 93 |
cursor: pointer; |
| 94 |
cursor: hand; |
| 95 |
|
| 96 |
} |
| 97 |
.t |
| 98 |
{ |
| 99 |
color:#555555; |
| 100 |
margin-right: 5px; |
| 101 |
border: 1px solid #000; |
| 102 |
border-top: none; |
| 103 |
width: 75px; |
| 104 |
float: left; |
| 105 |
text-align: center; |
| 106 |
} |
| 107 |
.row { |
| 108 |
position: relative; |
| 109 |
height: 25px; |
| 110 |
} |
| 111 |
|
| 112 |
#allsliders { |
| 113 |
width: 760px; |
| 114 |
} |
| 115 |
#slideleft { |
| 116 |
width: 680px; |
| 117 |
float: left; |
| 118 |
} |
| 119 |
#slideright{ |
| 120 |
width: 75px; |
| 121 |
float: right; |
| 122 |
} |
| 123 |
|
| 124 |
.spacer { clear: both; } |
| 125 |
.footer { |
| 126 |
text-align: center; |
| 127 |
} |
| 128 |
#collist { |
| 129 |
padding-top: 10px; |
| 130 |
} |
| 131 |
form { padding-top: 10px; } |
| 132 |
#sitewidth { |
| 133 |
width:760px; |
| 134 |
margin: auto; |
| 135 |
text-align: left; |
| 136 |
} |
| 137 |
#forms input, select, option { |
| 138 |
margin: 3px 0px; |
| 139 |
font-family: Trebuchet MS, Verdana, Helvetica, Arial, Sans-serif; |
| 140 |
font-size: small; |
| 141 |
} |
| 142 |
#row2 { |
| 143 |
position: relative; |
| 144 |
width: 760px; |
| 145 |
} |
| 146 |
#forms { |
| 147 |
width: 325px; |
| 148 |
float: left; |
| 149 |
} |
| 150 |
#sample { |
| 151 |
border: 1px solid #000; |
| 152 |
background-color: #7F7F7F; |
| 153 |
margin-top: 30px; |
| 154 |
width: 400px; |
| 155 |
float: left; |
| 156 |
} |
| 157 |
#sampleh1 { |
| 158 |
border: 1px solid #7F7F7F; |
| 159 |
color: #CCCCCC; |
| 160 |
background-color: #808080; |
| 161 |
font-size: 16px; |
| 162 |
margin: 5px; |
| 163 |
padding: 5px; |
| 164 |
text-align: center; |
| 165 |
} |
| 166 |
#sampleh2 { |
| 167 |
border: 1px solid #7F7F7F; |
| 168 |
color: #CCCCCC; |
| 169 |
background-color: #808080; |
| 170 |
font-size: 14px; |
| 171 |
margin: 5px; |
| 172 |
padding: 5px; |
| 173 |
text-align: center; |
| 174 |
} |
| 175 |
#samplep { |
| 176 |
border: 1px solid #7F7F7F; |
| 177 |
color: #000000; |
| 178 |
background-color: #7F7F7F; |
| 179 |
font-size: 12px; |
| 180 |
margin: 5px; |
| 181 |
padding: 5px; |
| 182 |
} |
| 183 |
#samplelink { |
| 184 |
color: #A6A6A6; |
| 185 |
} |
| 186 |
#samplehover { |
| 187 |
color: #A6A6A6; |
| 188 |
} |
| 189 |
#samplea { |
| 190 |
color: #A6A6A6; |
| 191 |
} |
| 192 |
#samplea:hover { |
| 193 |
color: #A6A6A6; |
| 194 |
} |
| 195 |
</style> |
| 196 |
|
| 197 |
<script type="text/javascript" src="range.js"></script> |
| 198 |
<script type="text/javascript" src="timer.js"></script> |
| 199 |
<script type="text/javascript" src="slider.js"></script> |
| 200 |
<script type="text/javascript" src="colormatch.js"></script> |
| 201 |
</head> |
| 202 |
<body> |
| 203 |
<div id="sitewidth"> |
| 204 |
<div id="news" style="display: none;"> |
| 205 |
<h1>ColorMatch Remix</h1> |
| 206 |
<p>This colorpicker is based heavily upon the code from <a href="http://colormatch.dk">ColorMatch 5k</a>. I've made it more compatible - it now works in Mozilla, and should also work in Opera, since I'm using a much better slider control. I've also added 3 more colors, bringing the total auto-generated colors to 9, and the ability to export your colors to a Photoshop color table.</p> |
| 207 |
<p>You can also download the full source code <a href="colormatch.zip" title="Source Code">here.</a></p> |
| 208 |
<p><b>What's New:</b></p> |
| 209 |
<ul> |
| 210 |
<li>Jun. 12, 2004: Fixed a text export bug (finally!), added CMYK output, and the ability to bookmark colors. Also added colors to the dropdown theme list. Zipfile updated.</li> |
| 211 |
<li>Feb. 01, 2004: Added Sample Page rendering, cleaned up code, added config file.</li> |
| 212 |
<li>Jan. 29, 2004: Woo! <a href="http://zeldman.com" title="The Daily Report">Jeffrey Zeldman</a> has linked to this! Sweet!</li> |
| 213 |
<li>Jan. 23, 2004: <a href="http://hlrnet.com" title="Hans' site">Hans Le Roy</a> has put up a mirror of <a href="http://hlrnet.com/colormatch/" title="multilingual!">ColorMatch Remix</a>, with 3 translations - Spanish, French, and Dutch.</li> |
| 214 |
<li>Jan. 19, 2004: I've <a href="colormatch.zip" title="Everything you need.">zipped up</a> all the code, along with a dump of the database, for those of you who'd like to run it on your own server. All I request is that you link back to my main page.</li> |
| 215 |
<li>Dec. 06, 2003: This site featured in Lockergnome's <a href="http://channels.lockergnome.com/windows/backissues/20031205.phtml">Windows Fanatics</a> newsletter! (Thanks for the link, Chris!) </li> |
| 216 |
</ul> |
| 217 |
</div> |
| 218 |
<div id="allsliders"> |
| 219 |
<div class="spacer"></div> |
| 220 |
<div id="slideleft"> |
| 221 |
<div class="row"> |
| 222 |
<label class="slider-caption" for="red-slider">Red:</label> |
| 223 |
<div class="slider" id="red-slider"> |
| 224 |
<input class="slider-input" id="red-slider-input" /> |
| 225 |
</div> |
| 226 |
<input class="sl-input" id="red-input" maxlength="3" tabindex="1" /> |
| 227 |
</div> |
| 228 |
<div class="spacer"></div> |
| 229 |
<div class="row"> |
| 230 |
<label class="slider-caption" for="green-slider">Green:</label> |
| 231 |
<div class="slider" id="green-slider"> |
| 232 |
<input class="slider-input" id="green-slider-input" /> |
| 233 |
</div> |
| 234 |
<input class="sl-input" id="green-input" maxlength="3" tabindex="2" /> |
| 235 |
</div> |
| 236 |
<div class="spacer"></div> |
| 237 |
<div class="row"> |
| 238 |
<label class="slider-caption" for="blue-slider">Blue:</label> |
| 239 |
<div class="slider" id="blue-slider"> |
| 240 |
<input class="slider-input" id="blue-slider-input" /> |
| 241 |
</div> |
| 242 |
<input class="sl-input" id="blue-input" maxlength="3" tabindex="3" /> |
| 243 |
</div> |
| 244 |
</div> |
| 245 |
<div id="slideright"> |
| 246 |
<div id="color-result"> |
| 247 |
<div style="float: left; width: 49%; text-align: center;" id="light" onClick="c2r('light');"> |
| 248 |
light |
| 249 |
</div> |
| 250 |
<div style="float: right; width: 49%; text-align: center;" id="dark" onClick="c2r('dark');"> |
| 251 |
dark |
| 252 |
</div> |
| 253 |
</div> |
| 254 |
</div> |
| 255 |
<div class="spacer"></div> |
| 256 |
</div> |
| 257 |
<div id="collist"> |
| 258 |
<div class="spacer"></div> |
| 259 |
<div class="s" id="sw0" onclick="c2r('sw0')" title="Click to promote to primary color">1</div> |
| 260 |
<div class="s" id="sw1" onclick="c2r('sw1')" title="Click to promote to primary color">2</div> |
| 261 |
<div class="s" id="sw2" onclick="c2r('sw2')" title="Click to promote to primary color">3</div> |
| 262 |
<div class="s" id="sw3" onclick="c2r('sw3')" title="Click to promote to primary color">4</div> |
| 263 |
<div class="s" id="sw4" onclick="c2r('sw4')" title="Click to promote to primary color">5</div> |
| 264 |
<div class="s" id="sw5" onclick="c2r('sw5')" title="Click to promote to primary color">6</div> |
| 265 |
<div class="s" id="sw6" onclick="c2r('sw6')" title="Click to promote to primary color">7</div> |
| 266 |
<div class="s" id="sw7" onclick="c2r('sw7')" title="Click to promote to primary color">8</div> |
| 267 |
<div class="s" id="sw8" onclick="c2r('sw8')" title="Click to promote to primary color">9</div> |
| 268 |
<div class="spacer"></div> |
| 269 |
</div> |
| 270 |
<div> |
| 271 |
<div class="spacer"></div> |
| 272 |
<div class="t" id="hc0">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 273 |
<div class="t" id="hc1">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 274 |
<div class="t" id="hc2">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 275 |
<div class="t" id="hc3">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 276 |
<div class="t" id="hc4">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 277 |
<div class="t" id="hc5">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 278 |
<div class="t" id="hc6">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 279 |
<div class="t" id="hc7">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 280 |
<div class="t" id="hc8">000000<br />R: 0<br />G: 0<br />B: 0</div> |
| 281 |
<div class="spacer"></div> |
| 282 |
</div> |
| 283 |
<div id="row2"> |
| 284 |
<div class="spacer"></div> |
| 285 |
<div id="forms"> |
| 286 |
<form action="export.php" method="post"> |
| 287 |
<p> |
| 288 |
<input type="hidden" id="col0" name="col0" value="#000000" /> |
| 289 |
<input type="hidden" id="col1" name="col1" value="#000000" /> |
| 290 |
<input type="hidden" id="col2" name="col2" value="#000000" /> |
| 291 |
<input type="hidden" id="col3" name="col3" value="#000000" /> |
| 292 |
<input type="hidden" id="col4" name="col4" value="#000000" /> |
| 293 |
<input type="hidden" id="col5" name="col5" value="#000000" /> |
| 294 |
<input type="hidden" id="col6" name="col6" value="#000000" /> |
| 295 |
<input type="hidden" id="col7" name="col7" value="#000000" /> |
| 296 |
<input type="hidden" id="col8" name="col8" value="#000000" /> |
| 297 |
<label for="html">Hex:</label> <input type="text" id="html" size="15" maxlength="7" /> <input type="button" name="go" id="go" value="Use it" onclick="htmlgo();" /><br /><br /> |
| 298 |
Load Predefined Theme:<br /> |
| 299 |
<select id="coltheme" name="coltheme" onchange="load_theme();"> |
| 300 |
<? |
| 301 |
include("config.php"); |
| 302 |
$db = pg_connect($pg); |
| 303 |
$rgb = "$red,$green,$blue"; |
| 304 |
$r = pg_query("select basecol,name from colorpick where approved='1' order by name"); |
| 305 |
while ($q = pg_fetch_assoc($r)) { |
| 306 |
if($q["basecol"] == $rgb) { |
| 307 |
$sel = "selected=\"selected\" "; |
| 308 |
} else { |
| 309 |
$sel = ""; |
| 310 |
} |
| 311 |
echo " <option style=\"background:rgb(".$q["basecol"].");\" value=\"".$q["basecol"]."\" $sel>".htmlspecialchars($q["name"])."</option>"; |
| 312 |
} |
| 313 |
?> |
| 314 |
</select> |
| 315 |
<input type="button" id="loadtheme" name="loadtheme" value="Load" onclick="load_theme();" /><br /><br /> |
| 316 |
Bookmark This Theme:<br /> |
| 317 |
<input type="text" size="40" id="bookmark" name="bookmark" value="http://color.twysted.net/?color=<?=$color;?>" /><br /><br /> |
| 318 |
Create New Theme:<br /> |
| 319 |
<input type="text" id="newthemename" name="newthemename" value="Theme Name" size="15" maxlength="45" /> <input type="submit" name="newTheme" id="newTheme" onclick="return confirm('Are you sure you wish to add this theme?');" value="Save" /><br /><br /> |
| 320 |
Export:<br /> |
| 321 |
<input type="submit" id="photoshop" name="photoshop" value="Export to Photoshop .ACT file"/><br /> <input type="submit" id="illustrator" name="illustrator" value="Export to Illustrator .AI file" /> <br/> <input type="submit" id="plaintext" name="plaintext" value="Export in Plain Text" /> |
| 322 |
</p> |
| 323 |
</form> |
| 324 |
</div> |
| 325 |
<div id="sample"> |
| 326 |
<h1 id="sampleh1">This is a sample layout</h1> |
| 327 |
<h2 id="sampleh2">For your designing pleasure</h2> |
| 328 |
<p id="samplep"><span id="samplelink">This is the link color</span>. <span id="samplehover">This is the hover color</span>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna. Ut consequat rutrum augue. Suspendisse egestas quam non felis. Ut suscipit, pede vel laoreet gravida, felis enim condimentum arcu, non tempor tortor dui eu orci. Phasellus consequat ligula ac tellus. Curabitur et orci et sapien interdum tristique. Morbi commodo malesuada turpis. Donec sit amet arcu in sem consectetuer pulvinar. Fusce rhoncus. In gravida. Suspendisse potenti. Ut varius, orci vitae pulvinar auctor, urna tortor tincidunt lectus, nec consectetuer enim quam et nisl.</p> |
| 329 |
</div> |
| 330 |
<div class="spacer"></div> |
| 331 |
</div> |
| 332 |
<p class="footer"> |
| 333 |
Based on <a href="http://colormatch.dk">ColorMatch 5K</a> by Kim Jensen. | Modified by <a href="http://twysted.net">Twyst</a> (mail: twyst AT twysted dot net)<br /> |
| 334 |
This page validates as <a href="http://validator.w3.org/check/referer">XHTML 1.0 transitional.</a> |
| 335 |
</p> |
| 336 |
|
| 337 |
|
| 338 |
|
| 339 |
<script type="text/javascript"> |
| 340 |
|
| 341 |
|
| 342 |
// init code |
| 343 |
var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input")); |
| 344 |
r.setMaximum(255); |
| 345 |
var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input")); |
| 346 |
g.setMaximum(255); |
| 347 |
var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input")); |
| 348 |
b.setMaximum(255); |
| 349 |
|
| 350 |
var ri = document.getElementById("red-input"); |
| 351 |
ri.onchange = function () { |
| 352 |
r.setValue(parseInt(this.value)); |
| 353 |
}; |
| 354 |
|
| 355 |
var gi = document.getElementById("green-input"); |
| 356 |
gi.onchange = function () { |
| 357 |
g.setValue(parseInt(this.value)); |
| 358 |
}; |
| 359 |
|
| 360 |
var bi = document.getElementById("blue-input"); |
| 361 |
bi.onchange = function () { |
| 362 |
b.setValue(parseInt(this.value)); |
| 363 |
}; |
| 364 |
|
| 365 |
r.onchange = g.onchange = b.onchange = function () { |
| 366 |
var cr = document.getElementById("color-result"); |
| 367 |
cr.style.backgroundColor = "rgb(" + r.getValue() + "," + g.getValue() + "," + b.getValue() + ")"; |
| 368 |
rg.r = ri.value = r.getValue(); |
| 369 |
rg.g = gi.value = g.getValue(); |
| 370 |
rg.b = bi.value = b.getValue(); |
| 371 |
rg2hs(rg); |
| 372 |
ud("0",rg); |
| 373 |
dom(); |
| 374 |
if (typeof window.onchange == "function") |
| 375 |
window.onchange(); |
| 376 |
}; |
| 377 |
|
| 378 |
r.setValue(<?=$red;?>); |
| 379 |
g.setValue(<?=$green;?>); |
| 380 |
b.setValue(<?=$blue;?>); |
| 381 |
|
| 382 |
// end init |
| 383 |
|
| 384 |
function setRgb(nRed, nGreen, nBlue) { |
| 385 |
r.setValue(nRed); |
| 386 |
g.setValue(nGreen); |
| 387 |
b.setValue(nBlue); |
| 388 |
} |
| 389 |
|
| 390 |
function getRgb() { |
| 391 |
return { |
| 392 |
r: r.getValue(), |
| 393 |
g: g.getValue(), |
| 394 |
b: b.getValue() |
| 395 |
}; |
| 396 |
} |
| 397 |
|
| 398 |
function fixSize() { |
| 399 |
r.recalculate(); |
| 400 |
g.recalculate(); |
| 401 |
b.recalculate(); |
| 402 |
} |
| 403 |
|
| 404 |
var step = 8; |
| 405 |
|
| 406 |
function inc(n) { |
| 407 |
if (n + step < 255) { |
| 408 |
n += step; |
| 409 |
} else { |
| 410 |
n = 255; |
| 411 |
} |
| 412 |
return n; |
| 413 |
} |
| 414 |
|
| 415 |
function dec(n) { |
| 416 |
if (n - step > 0) { |
| 417 |
n -= step; |
| 418 |
} else { |
| 419 |
n = 0; |
| 420 |
} |
| 421 |
return n; |
| 422 |
} |
| 423 |
|
| 424 |
function light() { |
| 425 |
r.setValue( inc( r.getValue() ) ); |
| 426 |
g.setValue( inc( g.getValue() ) ); |
| 427 |
b.setValue( inc( b.getValue() ) ); |
| 428 |
} |
| 429 |
|
| 430 |
function dark() { |
| 431 |
r.setValue( dec( r.getValue() ) ); |
| 432 |
g.setValue( dec( g.getValue() ) ); |
| 433 |
b.setValue( dec( b.getValue() ) ); |
| 434 |
} |
| 435 |
|
| 436 |
|
| 437 |
window.onresize = fixSize; |
| 438 |
|
| 439 |
fixSize(); |
| 440 |
|
| 441 |
|
| 442 |
</script> |
| 443 |
|
| 444 |
</div> |
| 445 |
</body> |
| 446 |
</html> |
Parent Directory
| 
Revision Log