/[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 1 - (hide annotations)
Sat Oct 2 23:24:01 2004 UTC (15 years, 6 months ago) by dpavlin
File size: 13999 byte(s)
imported original ColorMatch

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     <div id="news">
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     <form id="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
218     <p>
219     <input type="hidden" name="cmd" value="_xclick" />
220     <input type="hidden" name="business" value="twyst@twysted.net" />
221     <input type="hidden" name="no_note" value="1" />
222     <input type="hidden" name="currency_code" value="USD" />
223     <input type="hidden" name="tax" value="0" />
224     <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
225     </p>
226     </form>
227     </div>
228     <div id="allsliders">
229     <div class="spacer"></div>
230     <div id="slideleft">
231     <div class="row">
232     <label class="slider-caption" for="red-slider">Red:</label>
233     <div class="slider" id="red-slider">
234     <input class="slider-input" id="red-slider-input" />
235     </div>
236     <input class="sl-input" id="red-input" maxlength="3" tabindex="1" />
237     </div>
238     <div class="spacer"></div>
239     <div class="row">
240     <label class="slider-caption" for="green-slider">Green:</label>
241     <div class="slider" id="green-slider">
242     <input class="slider-input" id="green-slider-input" />
243     </div>
244     <input class="sl-input" id="green-input" maxlength="3" tabindex="2" />
245     </div>
246     <div class="spacer"></div>
247     <div class="row">
248     <label class="slider-caption" for="blue-slider">Blue:</label>
249     <div class="slider" id="blue-slider">
250     <input class="slider-input" id="blue-slider-input" />
251     </div>
252     <input class="sl-input" id="blue-input" maxlength="3" tabindex="3" />
253     </div>
254     </div>
255     <div id="slideright">
256     <div id="color-result"></div>
257     </div>
258     <div class="spacer"></div>
259     </div>
260     <div id="collist">
261     <div class="spacer"></div>
262     <div class="s" id="sw0" onclick="c2r('sw0')" title="Click to promote to primary color">1</div>
263     <div class="s" id="sw1" onclick="c2r('sw1')" title="Click to promote to primary color">2</div>
264     <div class="s" id="sw2" onclick="c2r('sw2')" title="Click to promote to primary color">3</div>
265     <div class="s" id="sw3" onclick="c2r('sw3')" title="Click to promote to primary color">4</div>
266     <div class="s" id="sw4" onclick="c2r('sw4')" title="Click to promote to primary color">5</div>
267     <div class="s" id="sw5" onclick="c2r('sw5')" title="Click to promote to primary color">6</div>
268     <div class="s" id="sw6" onclick="c2r('sw6')" title="Click to promote to primary color">7</div>
269     <div class="s" id="sw7" onclick="c2r('sw7')" title="Click to promote to primary color">8</div>
270     <div class="s" id="sw8" onclick="c2r('sw8')" title="Click to promote to primary color">9</div>
271     <div class="spacer"></div>
272     </div>
273     <div>
274     <div class="spacer"></div>
275     <div class="t" id="hc0">000000<br />R: 0<br />G: 0<br />B: 0</div>
276     <div class="t" id="hc1">000000<br />R: 0<br />G: 0<br />B: 0</div>
277     <div class="t" id="hc2">000000<br />R: 0<br />G: 0<br />B: 0</div>
278     <div class="t" id="hc3">000000<br />R: 0<br />G: 0<br />B: 0</div>
279     <div class="t" id="hc4">000000<br />R: 0<br />G: 0<br />B: 0</div>
280     <div class="t" id="hc5">000000<br />R: 0<br />G: 0<br />B: 0</div>
281     <div class="t" id="hc6">000000<br />R: 0<br />G: 0<br />B: 0</div>
282     <div class="t" id="hc7">000000<br />R: 0<br />G: 0<br />B: 0</div>
283     <div class="t" id="hc8">000000<br />R: 0<br />G: 0<br />B: 0</div>
284     <div class="spacer"></div>
285     </div>
286     <div id="row2">
287     <div class="spacer"></div>
288     <div id="forms">
289     <form action="export.php" method="post">
290     <p>
291     <input type="hidden" id="col0" name="col0" value="#000000" />
292     <input type="hidden" id="col1" name="col1" value="#000000" />
293     <input type="hidden" id="col2" name="col2" value="#000000" />
294     <input type="hidden" id="col3" name="col3" value="#000000" />
295     <input type="hidden" id="col4" name="col4" value="#000000" />
296     <input type="hidden" id="col5" name="col5" value="#000000" />
297     <input type="hidden" id="col6" name="col6" value="#000000" />
298     <input type="hidden" id="col7" name="col7" value="#000000" />
299     <input type="hidden" id="col8" name="col8" value="#000000" />
300     <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 />
301     Load Predefined Theme:<br />
302     <select id="coltheme" name="coltheme" onchange="load_theme();">
303     <?
304     include("config.php");
305     $db = mysql_connect($dbhost,$dbuser,$dbpass);
306     mysql_select_db($dbtable);
307     $rgb = "$red,$green,$blue";
308     $r = mysql_query("Select basecol,name from colorpick where approved='1' order by name");
309     while ($q = mysql_fetch_assoc($r)) {
310     if($q["basecol"] == $rgb) {
311     $sel = "selected=\"selected\" ";
312     } else {
313     $sel = "";
314     }
315     echo " <option style=\"background:rgb(".$q["basecol"].");\" value=\"".$q["basecol"]."\" $sel>".htmlspecialchars($q["name"])."</option>";
316     }
317     ?>
318     </select>
319     <input type="button" id="loadtheme" name="loadtheme" value="Load" onclick="load_theme();" /><br /><br />
320     Bookmark This Theme:<br />
321     <input type="text" size="40" id="bookmark" name="bookmark" value="http://color.twysted.net/?color=<?=$color;?>" /><br /><br />
322     Create New Theme:<br />
323     <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 />
324     Export:<br />
325     <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" />
326     </p>
327     </form>
328     </div>
329     <div id="sample">
330     <h1 id="sampleh1">This is a sample layout</h1>
331     <h2 id="sampleh2">For your designing pleasure</h2>
332     <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>
333     </div>
334     <div class="spacer"></div>
335     </div>
336     <p class="footer">
337     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 />
338     This page validates as <a href="http://validator.w3.org/check/referer">XHTML 1.0 transitional.</a>
339     </p>
340    
341    
342    
343     <script type="text/javascript">
344    
345    
346     // init code
347     var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input"));
348     r.setMaximum(255);
349     var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input"));
350     g.setMaximum(255);
351     var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input"));
352     b.setMaximum(255);
353    
354     var ri = document.getElementById("red-input");
355     ri.onchange = function () {
356     r.setValue(parseInt(this.value));
357     };
358    
359     var gi = document.getElementById("green-input");
360     gi.onchange = function () {
361     g.setValue(parseInt(this.value));
362     };
363    
364     var bi = document.getElementById("blue-input");
365     bi.onchange = function () {
366     b.setValue(parseInt(this.value));
367     };
368    
369     r.onchange = g.onchange = b.onchange = function () {
370     var cr = document.getElementById("color-result");
371     cr.style.backgroundColor = "rgb(" + r.getValue() + "," + g.getValue() + "," + b.getValue() + ")";
372     rg.r = ri.value = r.getValue();
373     rg.g = gi.value = g.getValue();
374     rg.b = bi.value = b.getValue();
375     rg2hs(rg);
376     ud("0",rg);
377     dom();
378     if (typeof window.onchange == "function")
379     window.onchange();
380     };
381    
382     r.setValue(<?=$red;?>);
383     g.setValue(<?=$green;?>);
384     b.setValue(<?=$blue;?>);
385    
386     // end init
387    
388     function setRgb(nRed, nGreen, nBlue) {
389     r.setValue(nRed);
390     g.setValue(nGreen);
391     b.setValue(nBlue);
392     }
393    
394     function getRgb() {
395     return {
396     r: r.getValue(),
397     g: g.getValue(),
398     b: b.getValue()
399     };
400     }
401    
402     function fixSize() {
403     r.recalculate();
404     g.recalculate();
405     b.recalculate();
406     }
407    
408     window.onresize = fixSize;
409    
410     fixSize();
411    
412    
413     </script>
414    
415     </div>
416     </body>
417     </html>

  ViewVC Help
Powered by ViewVC 1.1.26