Mercurial > laserkard
comparison buy.html @ 40:1ac1409ea68c laserkard
[svn r41] implemented dynamic text.
author | rlm |
---|---|
date | Mon, 25 Jan 2010 03:42:08 -0500 |
parents | 07c19a58ba5a |
children | c4747d955ac8 |
comparison
equal
deleted
inserted
replaced
39:8b3b5753ad41 | 40:1ac1409ea68c |
---|---|
8 | 8 |
9 <title>Laserkard | Design Studio</title> | 9 <title>Laserkard | Design Studio</title> |
10 | 10 |
11 <script type="text/javascript" src="./buycode.js"></script> | 11 <script type="text/javascript" src="./buycode.js"></script> |
12 <script type="text/javascript" src="./awesome_js/raphael.js"></script> | 12 <script type="text/javascript" src="./awesome_js/raphael.js"></script> |
13 | 13 <script type="text/javascript" src="./awesome_js/robert.js"></script> |
14 <script type="text/javascript" src="./awesome_js/cufon-yui.js"></script> | 14 <script type="text/javascript" src="./awesome_js/cufon-yui.js"></script> |
15 <script type="text/javascript" src="./awesome_js/HelveticaNeue_LT_55_Roman_700-HelveticaNeue_LT_55_Roman_700-HelveticaNeue_LT_55_Roman_italic_700-HelveticaNeue_LT_55_Roman_italic_700.font.js"></script> | 15 <script type="text/javascript" src="./awesome_js/HelveticaNeue_LT_55_Roman_700-HelveticaNeue_LT_55_Roman_700-HelveticaNeue_LT_55_Roman_italic_700-HelveticaNeue_LT_55_Roman_italic_700.font.js"></script> |
16 | 16 |
17 | 17 |
18 | 18 |
50 | 50 |
51 <div id = "disp_contain"></div> | 51 <div id = "disp_contain"></div> |
52 | 52 |
53 <div id="display">PERL-REPLACE::DISPLAY</div> | 53 <div id="display">PERL-REPLACE::DISPLAY</div> |
54 | 54 |
55 | |
56 | |
57 | |
58 </div> | |
59 | |
60 <div id="pokedex">PERL-REPLACE::POKEDEX</div> | |
61 | |
62 | |
63 | |
64 </div> | |
65 | |
66 | |
67 <div id="inputbox" >PERL-REPLACE::INPUTBOX</div> | |
68 | |
69 | |
70 | |
71 | |
72 | |
73 <div id="materials" onmouseover="pokedex(['args__materials'],['pokedex']);">PERL-REPLACE::MATERIALS</div> | |
74 | |
75 | |
76 </div> | |
77 | |
78 | |
79 | |
80 <div id = "copyright">© 2010 LaserKard, LLC</div> | |
81 | |
82 | |
55 <script language="javascript"> | 83 <script language="javascript"> |
56 | 84 //this is the main painting object, established here and created with default painting values |
57 | |
58 var raphe = Raphael("disp_contain", 515, 318); | 85 var raphe = Raphael("disp_contain", 515, 318); |
59 | 86 |
60 var c = raphe.rect(0, 0, 514, 317); | 87 |
61 c.attr("stroke", "#00f"); | 88 |
62 tt = raphe.print(10, 150, "Kevin Rustagi", raphe.getFont("HelveticaNeue", 700), 75); | 89 function drawElement(obj) |
63 | 90 { |
64 | 91 |
65 tt.attr("stroke", "#f00"); | 92 } |
66 tt.attr("fill", "RED"); | 93 |
94 | |
95 | |
96 | |
97 function redraw(style) | |
98 { | |
99 | |
100 if (style == "bold") | |
101 { | |
102 | |
103 | |
104 | |
105 if(typeof alias != 'undefined' ){alias.remove();} | |
106 if(typeof email != 'undefined' ){email.remove();} | |
107 if(typeof occupation != 'undefined' ){occupation.remove();} | |
108 if(typeof company != 'undefined' ){company.remove();} | |
109 if(typeof phone != 'undefined' ){phone.remove();} | |
110 if(typeof website != 'undefined' ){website.remove();} | |
111 if(typeof lnn != 'undefined' ){lnn.remove();} | |
112 | |
113 | |
114 | |
115 var oText = document.getElementById('Name'); | |
116 var text_val = oText.value; | |
117 alias = raphe.print(10, 160, text_val, raphe.getFont('HelveticaNeue', 700), 75); | |
118 alias.attr('stroke', '#6a6a6a'); | |
119 alias.attr('fill', 'none') | |
120 var c = alias.getBBox().width; | |
121 alias.translate((485 - c)/2,0); | |
122 | |
123 | |
124 var oText = document.getElementById('Email'); | |
125 var text_val = oText.value; | |
126 | |
127 email = raphe.print(280, 270, text_val, raphe.getFont("HelveticaNeue", 700), 25); | |
128 email.attr('stroke', '#6a6a6a'); | |
129 email.attr('fill', 'TRANSPARENT'); | |
130 | |
131 | |
132 | |
133 | |
134 } | |
135 | |
136 | |
137 if (style == "arrow") | |
138 { | |
139 | |
140 if(typeof alias != 'undefined' ){alias.remove();} | |
141 if(typeof email != 'undefined' ){email.remove();} | |
142 if(typeof occupation != 'undefined' ){occupation.remove();} | |
143 if(typeof company != 'undefined' ){company.remove();} | |
144 if(typeof phone != 'undefined' ){phone.remove();} | |
145 if(typeof website != 'undefined' ){website.remove();} | |
146 if(typeof lnn != 'undefined' ){lnn.remove();} | |
147 | |
148 | |
149 var oText = document.getElementById('Name'); | |
150 var text_val = oText.value; | |
151 alias = raphe.print(40, 110, text_val, raphe.getFont('HelveticaNeue', 700), 64); | |
152 alias.attr('stroke', '#6a6a6a'); | |
153 alias.attr('fill', 'none') | |
154 | |
155 | |
156 | |
157 var oText = document.getElementById('Company'); | |
158 var text_val = oText.value; | |
159 | |
160 company = raphe.print(40, 155, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
161 company.attr('stroke', '#6a6a6a'); | |
162 company.attr('fill', 'TRANSPARENT'); | |
163 | |
164 | |
165 var oText = document.getElementById('Occupation'); | |
166 var text_val = oText.value; | |
167 | |
168 occupation = raphe.print(40, 190, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
169 occupation.attr('stroke', '#6a6a6a'); | |
170 occupation.attr('fill', 'TRANSPARENT'); | |
171 | |
172 | |
173 var oText = document.getElementById('Email'); | |
174 var text_val = oText.value; | |
175 | |
176 email = raphe.print(280, 270, text_val, raphe.getFont("HelveticaNeue", 700), 25); | |
177 email.attr('stroke', '#6a6a6a'); | |
178 email.attr('fill', 'TRANSPARENT'); | |
179 | |
180 | |
181 lnn = raphe.path("M 2 272 L 258 272"); | |
182 lnn.attr('stroke', '#6a6a6a'); | |
183 | |
184 } | |
185 | |
186 | |
187 if (style == "classic") | |
188 { | |
189 | |
190 if(typeof alias != 'undefined' ){alias.remove();} | |
191 if(typeof email != 'undefined' ){email.remove();} | |
192 if(typeof occupation != 'undefined' ){occupation.remove();} | |
193 if(typeof company != 'undefined' ){company.remove();} | |
194 if(typeof phone != 'undefined' ){phone.remove();} | |
195 if(typeof website != 'undefined' ){website.remove();} | |
196 if(typeof lnn != 'undefined' ){lnn.remove();} | |
197 | |
198 | |
199 var oText = document.getElementById('Email'); | |
200 var text_val = oText.value; | |
201 | |
202 email = raphe.print(0, 42, text_val, raphe.getFont("HelveticaNeue", 700), 29); | |
203 email.attr('stroke', '#6a6a6a'); | |
204 email.attr('fill', 'TRANSPARENT'); | |
205 var c = email.getBBox().width; | |
206 email.translate((510 - c)/2,0); | |
207 | |
208 | |
209 var oText = document.getElementById('Phone'); | |
210 var text_val = oText.value; | |
211 | |
212 phone = raphe.print(0, 75, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
213 phone.attr('stroke', '#6a6a6a'); | |
214 phone.attr('fill', 'TRANSPARENT'); | |
215 var c = phone.getBBox().width; | |
216 phone.translate((510 - c)/2,0); | |
217 | |
218 | |
219 | |
220 | |
221 var oText = document.getElementById('Name'); | |
222 var text_val = oText.value; | |
223 alias = raphe.print(0, 164, text_val, raphe.getFont('HelveticaNeue', 800), 55); | |
224 alias.attr('stroke', '#6a6a6a'); | |
225 alias.attr('fill', 'none') | |
226 var c = alias.getBBox().width; | |
227 alias.translate((510 - c)/2,0); | |
228 | |
229 | |
230 var oText = document.getElementById('Company'); | |
231 var text_val = oText.value; | |
232 company = raphe.print(0, 247, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
233 company.attr('stroke', '#6a6a6a'); | |
234 company.attr('fill', 'TRANSPARENT'); | |
235 var c = company.getBBox().width; | |
236 company.translate((510 - c)/2,0); | |
237 | |
238 | |
239 var oText = document.getElementById('Occupation'); | |
240 var text_val = oText.value; | |
241 | |
242 occupation = raphe.print(0, 278, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
243 occupation.attr('stroke', '#6a6a6a'); | |
244 occupation.attr('fill', 'TRANSPARENT'); | |
245 var c = occupation.getBBox().width; | |
246 occupation.translate((510 - c)/2,0); | |
247 | |
248 | |
249 | |
250 | |
251 var oText = document.getElementById('Website'); | |
252 var text_val = oText.value; | |
253 | |
254 website = raphe.print(0, 0, text_val, raphe.getFont("HelveticaNeue", 700), 21); | |
255 website.attr('stroke', '#6a6a6a'); | |
256 website.attr('fill', 'TRANSPARENT'); | |
257 | |
258 var c = website.getBBox().width; | |
259 website.translate((317 - c)/2,0); | |
260 | |
261 website.translate(0, -490); | |
262 website.rotate(90,0,0); | |
263 } | |
264 | |
265 | |
266 if (style == "direct") | |
267 { | |
268 | |
269 if(typeof alias != 'undefined' ){alias.remove();} | |
270 if(typeof email != 'undefined' ){email.remove();} | |
271 if(typeof occupation != 'undefined' ){occupation.remove();} | |
272 if(typeof company != 'undefined' ){company.remove();} | |
273 if(typeof phone != 'undefined' ){phone.remove();} | |
274 if(typeof website != 'undefined' ){website.remove();} | |
275 if(typeof lnn != 'undefined' ){lnn.remove();} | |
276 | |
277 | |
278 | |
279 var oText = document.getElementById('Name'); | |
280 var text_val = oText.value; | |
281 alias = raphe.print(37, 70, text_val, raphe.getFont('HelveticaNeue', 700), 65); | |
282 alias.attr('stroke', '#6a6a6a'); | |
283 alias.attr('fill', 'none') | |
284 | |
285 | |
286 var oText = document.getElementById('Occupation'); | |
287 var text_val = oText.value; | |
288 occupation = raphe.print(37, 120, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
289 occupation.attr('stroke', '#6a6a6a'); | |
290 occupation.attr('fill', 'TRANSPARENT'); | |
291 | |
292 | |
293 var oText = document.getElementById('Company'); | |
294 var text_val = oText.value; | |
295 company = raphe.print(37, 178, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
296 company.attr('stroke', '#6a6a6a'); | |
297 company.attr('fill', 'TRANSPARENT'); | |
298 | |
299 | |
300 | |
301 var oText = document.getElementById('Phone'); | |
302 var text_val = oText.value; | |
303 phone = raphe.print(37, 210, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
304 phone.attr('stroke', '#6a6a6a'); | |
305 phone.attr('fill', 'TRANSPARENT'); | |
306 | |
307 | |
308 var oText = document.getElementById('Email'); | |
309 var text_val = oText.value; | |
310 email = raphe.print(37, 240, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
311 email.attr('stroke', '#6a6a6a'); | |
312 email.attr('fill', 'TRANSPARENT'); | |
313 | |
314 | |
315 var oText = document.getElementById('Website'); | |
316 var text_val = oText.value; | |
317 website = raphe.print(37, 270, text_val, raphe.getFont("HelveticaNeue", 700), 27); | |
318 website.attr('stroke', '#6a6a6a'); | |
319 website.attr('fill', 'TRANSPARENT'); | |
320 | |
321 lnn = raphe.path("M 350 165 L 512 165 M 350 173 L 512 173 M 350 181 L 512 181 M 350 189 L 512 189 M 350 197 L 512 197 M 350 213 L 512 213 M 350 205 L 512 205 M 350 221 L 512 221"); | |
322 lnn.attr('stroke', '#6a6a6a'); | |
323 | |
324 | |
325 | |
326 } | |
327 | |
328 | |
329 | |
330 | |
331 | |
332 } | |
333 | |
334 | |
335 | |
67 | 336 |
68 | 337 |
69 </script> | 338 </script> |
70 | 339 |
71 | 340 |
72 </div> | 341 |
73 | 342 <script language="javascript"> |
74 <div id="pokedex">PERL-REPLACE::POKEDEX</div> | 343 |
75 | 344 |
76 | 345 redraw("bold"); |
77 | 346 |
78 </div> | 347 </script> |
79 | |
80 | |
81 <div id="inputbox" >PERL-REPLACE::INPUTBOX</div> | |
82 | |
83 | |
84 | |
85 | |
86 | |
87 <div id="materials" onmouseover="pokedex(['args__materials'],['pokedex']);">PERL-REPLACE::MATERIALS</div> | |
88 | |
89 | |
90 </div> | |
91 | |
92 | |
93 | |
94 <div id = "copyright">© 2010 LaserKard, LLC</div> | |
95 | |
96 | |
97 | |
98 | 348 |
99 </body> | 349 </body> |
100 | 350 |
101 </html> | 351 </html> |
102 | 352 |