/[colormatch]/trunk/index.php
This is repository of my old source code which isn't updated any more. Go to git.rot13.org for current projects!
ViewVC logotype

Contents of /trunk/index.php

Parent Directory Parent Directory | Revision Log Revision Log


Revision 3 - (show annotations)
Sat Oct 2 23:39:42 2004 UTC (19 years, 5 months ago) by dpavlin
File size: 14407 byte(s)
document.getElementById cache, show/hide news which are moved to bottom

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="hide.js"></script>
198 <script type="text/javascript" src="range.js"></script>
199 <script type="text/javascript" src="timer.js"></script>
200 <script type="text/javascript" src="slider.js"></script>
201 <script type="text/javascript" src="colormatch.js"></script>
202 </head>
203 <body>
204 <div id="sitewidth">
205 <div id="allsliders">
206 <div class="spacer"></div>
207 <div id="slideleft">
208 <div class="row">
209 <label class="slider-caption" for="red-slider">Red:</label>
210 <div class="slider" id="red-slider">
211 <input class="slider-input" id="red-slider-input" />
212 </div>
213 <input class="sl-input" id="red-input" maxlength="3" tabindex="1" />
214 </div>
215 <div class="spacer"></div>
216 <div class="row">
217 <label class="slider-caption" for="green-slider">Green:</label>
218 <div class="slider" id="green-slider">
219 <input class="slider-input" id="green-slider-input" />
220 </div>
221 <input class="sl-input" id="green-input" maxlength="3" tabindex="2" />
222 </div>
223 <div class="spacer"></div>
224 <div class="row">
225 <label class="slider-caption" for="blue-slider">Blue:</label>
226 <div class="slider" id="blue-slider">
227 <input class="slider-input" id="blue-slider-input" />
228 </div>
229 <input class="sl-input" id="blue-input" maxlength="3" tabindex="3" />
230 </div>
231 </div>
232 <div id="slideright">
233 <div id="color-result">
234 <div style="float: left; width: 49%; text-align: center;" id="light" onClick="c2r('light');">
235 light
236 </div>
237 <div style="float: right; width: 49%; text-align: center;" id="dark" onClick="c2r('dark');">
238 dark
239 </div>
240 </div>
241 </div>
242 <div class="spacer"></div>
243 </div>
244 <div id="collist">
245 <div class="spacer"></div>
246 <div class="s" id="sw0" onclick="c2r('sw0')" title="Click to promote to primary color">1</div>
247 <div class="s" id="sw1" onclick="c2r('sw1')" title="Click to promote to primary color">2</div>
248 <div class="s" id="sw2" onclick="c2r('sw2')" title="Click to promote to primary color">3</div>
249 <div class="s" id="sw3" onclick="c2r('sw3')" title="Click to promote to primary color">4</div>
250 <div class="s" id="sw4" onclick="c2r('sw4')" title="Click to promote to primary color">5</div>
251 <div class="s" id="sw5" onclick="c2r('sw5')" title="Click to promote to primary color">6</div>
252 <div class="s" id="sw6" onclick="c2r('sw6')" title="Click to promote to primary color">7</div>
253 <div class="s" id="sw7" onclick="c2r('sw7')" title="Click to promote to primary color">8</div>
254 <div class="s" id="sw8" onclick="c2r('sw8')" title="Click to promote to primary color">9</div>
255 <div class="spacer"></div>
256 </div>
257 <div>
258 <div class="spacer"></div>
259 <div class="t" id="hc0">000000<br />R: 0<br />G: 0<br />B: 0</div>
260 <div class="t" id="hc1">000000<br />R: 0<br />G: 0<br />B: 0</div>
261 <div class="t" id="hc2">000000<br />R: 0<br />G: 0<br />B: 0</div>
262 <div class="t" id="hc3">000000<br />R: 0<br />G: 0<br />B: 0</div>
263 <div class="t" id="hc4">000000<br />R: 0<br />G: 0<br />B: 0</div>
264 <div class="t" id="hc5">000000<br />R: 0<br />G: 0<br />B: 0</div>
265 <div class="t" id="hc6">000000<br />R: 0<br />G: 0<br />B: 0</div>
266 <div class="t" id="hc7">000000<br />R: 0<br />G: 0<br />B: 0</div>
267 <div class="t" id="hc8">000000<br />R: 0<br />G: 0<br />B: 0</div>
268 <div class="spacer"></div>
269 </div>
270 <div id="row2">
271 <div class="spacer"></div>
272 <div id="forms">
273 <form action="export.php" method="post">
274 <p>
275 <input type="hidden" id="col0" name="col0" value="#000000" />
276 <input type="hidden" id="col1" name="col1" value="#000000" />
277 <input type="hidden" id="col2" name="col2" value="#000000" />
278 <input type="hidden" id="col3" name="col3" value="#000000" />
279 <input type="hidden" id="col4" name="col4" value="#000000" />
280 <input type="hidden" id="col5" name="col5" value="#000000" />
281 <input type="hidden" id="col6" name="col6" value="#000000" />
282 <input type="hidden" id="col7" name="col7" value="#000000" />
283 <input type="hidden" id="col8" name="col8" value="#000000" />
284 <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 />
285 Load Predefined Theme:<br />
286 <select id="coltheme" name="coltheme" onchange="load_theme();">
287 <?
288 include("config.php");
289 $db = pg_connect($pg);
290 $rgb = "$red,$green,$blue";
291 $r = pg_query("select basecol,name from colorpick where approved='1' order by name");
292 while ($q = pg_fetch_assoc($r)) {
293 if($q["basecol"] == $rgb) {
294 $sel = "selected=\"selected\" ";
295 } else {
296 $sel = "";
297 }
298 echo " <option style=\"background:rgb(".$q["basecol"].");\" value=\"".$q["basecol"]."\" $sel>".htmlspecialchars($q["name"])."</option>";
299 }
300 ?>
301 </select>
302 <input type="button" id="loadtheme" name="loadtheme" value="Load" onclick="load_theme();" /><br /><br />
303 Bookmark This Theme:<br />
304 <input type="text" size="40" id="bookmark" name="bookmark" value="http://color.twysted.net/?color=<?=$color;?>" /><br /><br />
305 Create New Theme:<br />
306 <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 />
307 Export:<br />
308 <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" />
309 </p>
310 </form>
311 </div>
312 <div id="sample">
313 <h1 id="sampleh1">This is a sample layout</h1>
314 <h2 id="sampleh2">For your designing pleasure</h2>
315 <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>
316 </div>
317 <div class="spacer"></div>
318 </div>
319
320 <a href="#" onClick="javascript:toggle_display('news',1);">site news</a>
321 <div id="news" style="display: none;">
322 <h1>ColorMatch Remix</h1>
323 <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>
324 <p>You can also download the full source code <a href="colormatch.zip" title="Source Code">here.</a></p>
325 <p><b>What's New:</b></p>
326 <ul>
327 <li>Oct. 03, 2004: First modification by Dobrica Pavlinusic: lighter and darker selections, speedup using getElementById cache</li>
328 <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>
329 <li>Feb. 01, 2004: Added Sample Page rendering, cleaned up code, added config file.</li>
330 <li>Jan. 29, 2004: Woo! <a href="http://zeldman.com" title="The Daily Report">Jeffrey Zeldman</a> has linked to this! Sweet!</li>
331 <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>
332 <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>
333 <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>
334 </ul>
335 </div>
336
337 <p class="footer">
338 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) and <a href="http://www.rot13.org/~dpavlin/">Dobrica Pavlinusic</a> (mail: dpavlin AT rot13 dot org)<br />
339 This page validates as <a href="http://validator.w3.org/check/referer">XHTML 1.0 transitional.</a>
340 </p>
341
342
343
344 <script type="text/javascript">
345
346
347 // init code
348 var r = new Slider(element_id("red-slider"), document.getElementById("red-slider-input"));
349 r.setMaximum(255);
350 var g = new Slider(element_id("green-slider"), document.getElementById("green-slider-input"));
351 g.setMaximum(255);
352 var b = new Slider(element_id("blue-slider"), document.getElementById("blue-slider-input"));
353 b.setMaximum(255);
354
355 var ri = element_id("red-input");
356 ri.onchange = function () {
357 r.setValue(parseInt(this.value));
358 };
359
360 var gi = element_id("green-input");
361 gi.onchange = function () {
362 g.setValue(parseInt(this.value));
363 };
364
365 var bi = element_id("blue-input");
366 bi.onchange = function () {
367 b.setValue(parseInt(this.value));
368 };
369
370 r.onchange = g.onchange = b.onchange = function () {
371 var cr = element_id("color-result");
372 cr.style.backgroundColor = "rgb(" + r.getValue() + "," + g.getValue() + "," + b.getValue() + ")";
373 rg.r = ri.value = r.getValue();
374 rg.g = gi.value = g.getValue();
375 rg.b = bi.value = b.getValue();
376 rg2hs(rg);
377 ud("0",rg);
378 dom();
379 if (typeof window.onchange == "function")
380 window.onchange();
381 };
382
383 r.setValue(<?=$red;?>);
384 g.setValue(<?=$green;?>);
385 b.setValue(<?=$blue;?>);
386
387 // end init
388
389 function setRgb(nRed, nGreen, nBlue) {
390 r.setValue(nRed);
391 g.setValue(nGreen);
392 b.setValue(nBlue);
393 }
394
395 function getRgb() {
396 return {
397 r: r.getValue(),
398 g: g.getValue(),
399 b: b.getValue()
400 };
401 }
402
403 function fixSize() {
404 r.recalculate();
405 g.recalculate();
406 b.recalculate();
407 }
408
409 var step = 8;
410
411 function inc(n) {
412 if (n + step < 255) {
413 n += step;
414 } else {
415 n = 255;
416 }
417 return n;
418 }
419
420 function dec(n) {
421 if (n - step > 0) {
422 n -= step;
423 } else {
424 n = 0;
425 }
426 return n;
427 }
428
429 function light() {
430 r.setValue( inc( r.getValue() ) );
431 g.setValue( inc( g.getValue() ) );
432 b.setValue( inc( b.getValue() ) );
433 }
434
435 function dark() {
436 r.setValue( dec( r.getValue() ) );
437 g.setValue( dec( g.getValue() ) );
438 b.setValue( dec( b.getValue() ) );
439 }
440
441
442 window.onresize = fixSize;
443
444 fixSize();
445
446
447 </script>
448
449 </div>
450 </body>
451 </html>

  ViewVC Help
Powered by ViewVC 1.1.26