/[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 2 - (hide annotations)
Sat Oct 2 23:25:50 2004 UTC (15 years, 6 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 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     <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 dpavlin 2 <div id="news" style="display: none;">
205 dpavlin 1 <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 dpavlin 2 <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 dpavlin 1 </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 dpavlin 2 $db = pg_connect($pg);
303 dpavlin 1 $rgb = "$red,$green,$blue";
304 dpavlin 2 $r = pg_query("select basecol,name from colorpick where approved='1' order by name");
305     while ($q = pg_fetch_assoc($r)) {
306 dpavlin 1 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 dpavlin 2 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 dpavlin 1 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