/[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 2 - (show annotations)
Sat Oct 2 23:25:50 2004 UTC (14 years, 9 months ago) by dpavlin
File size: 14128 byte(s)
ported to PostgreSQL (but it still doesn't work for me), added light and
dark options, hide site news.

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>

  ViewVC Help
Powered by ViewVC 1.1.26