/[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

Annotation of /trunk/index.php

Parent Directory Parent Directory | Revision Log Revision Log


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

1 dpavlin 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 dpavlin 3 <script type="text/javascript" src="hide.js"></script>
198 dpavlin 1 <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 dpavlin 2 <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 dpavlin 1 </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 dpavlin 2 $db = pg_connect($pg);
290 dpavlin 1 $rgb = "$red,$green,$blue";
291 dpavlin 2 $r = pg_query("select basecol,name from colorpick where approved='1' order by name");
292     while ($q = pg_fetch_assoc($r)) {
293 dpavlin 1 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 dpavlin 3
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 dpavlin 1 <p class="footer">
338 dpavlin 3 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 dpavlin 1 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 dpavlin 3 var r = new Slider(element_id("red-slider"), document.getElementById("red-slider-input"));
349 dpavlin 1 r.setMaximum(255);
350 dpavlin 3 var g = new Slider(element_id("green-slider"), document.getElementById("green-slider-input"));
351 dpavlin 1 g.setMaximum(255);
352 dpavlin 3 var b = new Slider(element_id("blue-slider"), document.getElementById("blue-slider-input"));
353 dpavlin 1 b.setMaximum(255);
354    
355 dpavlin 3 var ri = element_id("red-input");
356 dpavlin 1 ri.onchange = function () {
357     r.setValue(parseInt(this.value));
358     };
359    
360 dpavlin 3 var gi = element_id("green-input");
361 dpavlin 1 gi.onchange = function () {
362     g.setValue(parseInt(this.value));
363     };
364    
365 dpavlin 3 var bi = element_id("blue-input");
366 dpavlin 1 bi.onchange = function () {
367     b.setValue(parseInt(this.value));
368     };
369    
370     r.onchange = g.onchange = b.onchange = function () {
371 dpavlin 3 var cr = element_id("color-result");
372 dpavlin 1 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 dpavlin 2 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 dpavlin 1 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