1. <html>
  2. <head>
  3. <title>Web Badge Maker on yoursite.com</title>
  4. <style type="text/css">
  5. body {text-align: center; font-family: verdana; font-size: 10pt; background-color: #ccffcc;}
  6. a{color: blue;}
  7. td{text-align: left;}
  8. input{width: 100px;}
  9. .preview{width: 100px; border: 1px solid black;}
  10. </style>
  11. <SCRIPT LANGUAGE="Javascript" SRC="http://pksml.net/button/ColorPicker2.js"></SCRIPT>
  12. <SCRIPT LANGUAGE="Javascript" SRC="http://pksml.net/button/ext_site.js"></SCRIPT>
  13. </head>
  14. <body>
  15. <h1>JavaScript + PHP Web Badge Maker</h1>
  16.  
  17. <center>
  18. <table style="" cellspacing="5">
  19. <tr>
  20. <form action="javascript:handler(document.getElementById('myform'));" name="myform" id="myform">
  21. <td>Left Text</td><td>Right Text</td>
  22. </tr>
  23. <tr>
  24. <td><input type="text" id="leftText" name="leftText" value="RSS" onblur="document.getElementById('prevL').innerHTML = this.value.toUpperCase();"></td>
  25. <td><input type="text" id="rightText" name="rightText" value="VALID" onblur="document.getElementById('prevR').innerHTML = this.value.toUpperCase();"></td>
  26. </tr>
  27. <tr>
  28. <td>Text Color</td><td>Text Color</td>
  29. </tr>
  30. <tr>
  31. <td><input type="text" id="leftTextColor" name="leftTextColor" value="ffffff" onblur="document.getElementById('prevL').style.color = this.value;"> <A HREF="#" onClick="cp1.select(document.forms[0].leftTextColor,'pick', 'prevL', 'fg');return false;" NAME="pick" ID="pick"><img border=0 src="http://pksml.net/button/palette.gif"></A</td>
  32. <td><input type="text" id="rightTextColor" name="rightTextColor" value="ffffff" onblur="document.getElementById('prevR').style.color = this.value;"> <A HREF="#" onClick="cp2.select(document.forms[0].rightTextColor,'pick2', 'prevR', 'fg');return false;" NAME="pick2" ID="pick2"><img border=0 src="http://pksml.net/button/palette.gif"></A></td>
  33. </tr>
  34. <tr>
  35. <td>Fill</td><td>Fill</td>
  36. </tr>
  37. <tr>
  38. <td><input type="text" id="leftFill" name="leftFill" value="ff6600" onblur="document.getElementById('prevL').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp5.select(document.forms[0].leftFill,'pick5', 'prevL', 'bg');return false;" NAME="pick5" ID="pick5"><img border=0 src="http://pksml.net/button/palette.gif"></A></td>
  39. <td><input type="text" id="rightFill" name="rightFill" value="898e79" onblur="document.getElementById('prevR').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp6.select(document.forms[0].rightFill,'pick6', 'prevR', 'bg');return false;" NAME="pick6" ID="pick6"><img border=0 src="http://pksml.net/button/palette.gif"></A></td>
  40. </tr>
  41.  
  42. <tr>
  43. <td>Preview</td><td>Preview</td>
  44. </tr>
  45. <tr>
  46. <td><span class="preview" id="prevL" style="background-color: #ff6600; color: #ffffff;">RSS</span></td>
  47. <td><span class="preview" id="prevR" style="background-color: #898e79; color: #ffffff;">VALID</span></td>
  48. </tr>
  49.  
  50. <tr>
  51. <td>Text Position</td><td>Text Position</td>
  52. </tr>
  53. <tr>
  54. <td><input type="text" id="leftTextPosition" name="leftTextPosition" value="5"></td>
  55. <td><input type="text" id="rightTextPosition" name="rightTextPosition" value="4"></td>
  56. </tr>
  57. <tr>
  58. <td>Bar Position</td><td><b>Button Width</b></td>
  59. </tr>
  60. <tr>
  61. <td><input type="text" id="barPosition" name="barPosition" value="25"></td>
  62. <td><input type="text" id="buttonWidth" name="buttonWidth" value="80"></td>
  63. </tr>
  64. <tr>
  65. <td>
  66. Outer Border Color</td><td>Inner Border Color</td>
  67. </tr>
  68. <tr>
  69. <td><input type="text" id="outerBorder" name="outerBorder" value="666666" onblur="document.getElementById('bg3').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp3.select(document.forms[0].outerBorder,'pick3', 'bg3', 'bg');return false;" NAME="pick3" ID="pick3"><img border=0 src="http://pksml.net/button/palette.gif"></A> <span id="bg3" style="width: 20px; background-color: #666666;">&nbsp;</span></td>
  70. <td><input type="text" id="innerBorder" name="innerBorder" value="ffffff" onblur="document.getElementById('bg4').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp4.select(document.forms[0].innerBorder,'pick4', 'bg4', 'bg');return false;" NAME="pick4" ID="pick4"><img border=0 src="http://pksml.net/button/palette.gif"></A> <span id="bg4" style="width: 20px; background-color: #ffffff;">&nbsp;</span></td>
  71. </tr>
  72. <tr>
  73. <td colspan="2" style="text-align: center;"><BR><input type="submit" name="button" value="Make it!"></td>
  74. </tr>
  75. </table>
  76. </form>
  77. <div name="buttonHTML" id="buttonHTML" style="height: 30px;"></div>
  78. <img name="buttonIMG" id="buttonIMG" src="http://pksml.net/button">
  79. <img style="display: none;" src="http://pksml.net/button/loading.gif">
  80. </center>
  81. </body>
  82. </html>