This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

PNG Generator v0.2 - UI

By: a guest on Nov 13th, 2010  |  syntax: HTML  |  size: 4.86 KB  |  views: 546  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
This paste has a previous version, view the difference. Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!--
  2. //////////////////////////////////////
  3. //  .•:*¨¨*:•..•:*¨¨*:•..•:*¨¨*:•.  //
  4. //    Transparent PNG Generator     //
  5. //          User Interface          //
  6. //     David Benson - 12/10/2010    //
  7. //     dmbenson1978-at-gmail.com    //
  8. // absolutedisaster.co.uk/png-maker //
  9. //    Released under GPL License    //
  10. //   www.gnu.org/licenses/gpl.html  //
  11. //  *•:.__.:•**•:.__.:•**•:.__.:•*  //
  12. //////////////////////////////////////
  13.  
  14. /*
  15. This application utilises:
  16. jQuery: The Write Less, Do More, JavaScript Library (http://jquery.com/)
  17. jQuery UI - Slider (http://jqueryui.com/demos/slider/)
  18. Stefan Petre's jQuery ColorPicker plugin (http://www.eyecon.ro/colorpicker/)<br />
  19. */
  20.  
  21. -->
  22. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  23. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  24. <head>
  25.         <link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
  26.         <link href='http://fonts.googleapis.com/css?family=Philosopher&subset=latin' rel='stylesheet' type='text/css'>
  27.         <link rel="stylesheet" href="/inc/css/blog.css" />
  28.         <link rel="stylesheet" href="/inc/js/jq/css/colorpicker.css" type="text/css" />
  29.         <link rel="stylesheet" href="/inc/js/jq/css/ui-darkness/jquery-ui-1.8.6.custom.css" />
  30.         <title>DisasterMan's Transparent PNG Generator v0.1</title>
  31.         <script type="text/javascript" src="/inc/js/jq/jquery-1.4.3.min.js"></script>
  32.         <script type="text/javascript" src="/inc/js/jq/colorpicker.js"></script>
  33.         <script type="text/javascript" src="/inc/js/jq/jquery-ui-1.8.6.custom.min.js"></script>
  34.         <script type="text/javascript">
  35.         <!--
  36.         $(document).ready(function(){
  37.                 $('#colorpickerHolder').ColorPicker({
  38.                         flat: true,
  39.                         color: 'ff0000',
  40.                         onChange: function(hsb, hex, rgb) {
  41.                                 $('#preview').css('background-color', '#' + hex);
  42.                         }
  43.                 });
  44.                 $( "#slider" ).slider({
  45.                         max: 100,
  46.                         value: 50,
  47.                         slide: function( event, ui ) {
  48.                                 $('#a').val( ui.value );
  49.                                 $('#preview').css('opacity', ui.value/100);
  50.                         }
  51.                 });
  52.                 $('#bg_opt_check').click(function() {
  53.                                 $('#preview_bg').css('background-image', 'url(images/checker.gif)');
  54.                 });
  55.                 $('#bg_opt_image').click(function() {
  56.                                 $('#preview_bg').css('background-image', 'url(images/preview_bg.jpg)');
  57.                 });
  58.                 $('#bg_button_url').click(function() {
  59.                                 $('#preview_bg').css('background-image', 'url(' + $('#bg_opt_url').val() + ')');
  60.                 });
  61.         });
  62.         -->
  63.         </script>
  64. </head>
  65. <body>
  66. <div class="header">
  67.         <h1>Transparent PNG Generator v0.1</h1>
  68.         <h3>A free web utility by DaveDisaster</h3>
  69. </div>
  70. <div class="container">
  71.         <form action="png.php" method="post">
  72.                 <div id="picker_wrapper">
  73.                         <h3>Define:</h3>
  74.                         <div id="colorpickerHolder"></div>
  75.                         <div id="slider"></div>
  76.                                 <div class="form_fields">
  77.                                         Opacity: &nbsp;
  78.                                         <input id="a" name="a" type="text" size="3" maxlength="3" value="50" />
  79.                                         &nbsp;Output size: &nbsp;
  80.                                         <input id="w" name="w" type="text" size="3" value="1" />
  81.                                         w&nbsp;x &nbsp;
  82.                                         <input id="h" name="h" type="text" size="3" value="1" />
  83.                                         h
  84.                                 </div>
  85.                 </div>
  86.                 <div id="generate_wrapper">
  87.                         <div>
  88.                                 <h3>Generate:</h3>
  89.                         </div>
  90.                         <div>
  91.                                 <input id="r" name="r" type="hidden" />
  92.                                 <input id="g" name="g" type="hidden" />
  93.                                 <input id="b" name="b" type="hidden" />
  94.                                 <input type="submit" class="button" value="Make it so..." />
  95.                         </div>
  96.                 </div>
  97.         </form>
  98.         <div id="preview_wrapper">
  99.                 <h3>Preview:</h3>
  100.                 <div id="preview_bg">
  101.                         <div id="preview_border">
  102.                                 <div id="preview"></div>
  103.                         </div>
  104.                 </div>
  105.                 <div id="options">
  106.                         <div id="label_bg" class="opt_label">
  107.                                 Background:
  108.                         </div>
  109.                         <button id="bg_opt_check" class="opt_bg">Checkered</button>
  110.                         <button id="bg_opt_image" class="opt_bg">Image</button>
  111.                         <div id="label_url" class="opt_label">
  112.                                 Image URL:
  113.                         </div>
  114.                         <input id="bg_opt_url" class="opt_url" type="text" maxlength="255" size="30" />
  115.                         <button id="bg_button_url" class="opt_url">Update</button>
  116.                 </div>
  117.         </div>
  118.         <div class="footer">
  119.                 <div class="footer_left">
  120.                         <h4><a href="http://blog.absolutedisaster.co.uk/instant-tranparent-png-generator" target="_new">Blog, comments &amp; source code</a></h4>
  121.                 </div>
  122.                 <div class="footer_right">
  123.                         <div class="jq_icon"><a href="http://www.eyecon.ro/colorpicker/" target="_new" title="jQuery Color Picker" ><img src="../inc/js/jq/colorpicker_logo.png" width="100" height="25" /></a></div>
  124.                         <div class="jq_icon"><a href="http://jqueryui.com/" target="_new" title="jQuery User Interface" ><img src="../inc/js/jq/jqui_logo.png" width="100" height="25" /></a></div>
  125.                         <div class="jq_icon"><a href="http://jquery.com" target="_new" title="jQuery - The Write Less, Do More, JavaScript Library" ><img src="../inc/js/jq/jq_logo.png" width="100" height="25" /></a></div>
  126.                         <h4>Built with:</h4>
  127.                 </div>
  128.         </div>
  129. </div>
  130. </body>
  131. </html>
clone this paste RAW Paste Data