API tools faq
paste
Advertisement
Guest User

PNG Generator v0.2 - UI

a guest
Nov 13th, 2010
819
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.86 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!