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

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