Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- //////////////////////////////////////
- // .•:*¨¨*:•..•:*¨¨*:•..•:*¨¨*:•. //
- // Transparent PNG Generator //
- // User Interface //
- // David Benson - 12/10/2010 //
- // dmbenson1978-at-gmail.com //
- // absolutedisaster.co.uk/png-maker //
- // Released under GPL License //
- // www.gnu.org/licenses/gpl.html //
- // *•:.__.:•**•:.__.:•**•:.__.:•* //
- //////////////////////////////////////
- /*
- This application utilises:
- jQuery: The Write Less, Do More, JavaScript Library (http://jquery.com/)
- jQuery UI - Slider (http://jqueryui.com/demos/slider/)
- Stefan Petre's jQuery ColorPicker plugin (http://www.eyecon.ro/colorpicker/)<br />
- */
- -->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Philosopher&subset=latin' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="/inc/css/blog.css" />
- <link rel="stylesheet" href="/inc/js/jq/css/colorpicker.css" type="text/css" />
- <link rel="stylesheet" href="/inc/js/jq/css/ui-darkness/jquery-ui-1.8.6.custom.css" />
- <title>DisasterMan's Transparent PNG Generator v0.1</title>
- <script type="text/javascript" src="/inc/js/jq/jquery-1.4.3.min.js"></script>
- <script type="text/javascript" src="/inc/js/jq/colorpicker.js"></script>
- <script type="text/javascript" src="/inc/js/jq/jquery-ui-1.8.6.custom.min.js"></script>
- <script type="text/javascript">
- <!--
- $(document).ready(function(){
- $('#colorpickerHolder').ColorPicker({
- flat: true,
- color: 'ff0000',
- onChange: function(hsb, hex, rgb) {
- $('#preview').css('background-color', '#' + hex);
- }
- });
- $( "#slider" ).slider({
- max: 100,
- value: 50,
- slide: function( event, ui ) {
- $('#a').val( ui.value );
- $('#preview').css('opacity', ui.value/100);
- }
- });
- $('#bg_opt_check').click(function() {
- $('#preview_bg').css('background-image', 'url(images/checker.gif)');
- });
- $('#bg_opt_image').click(function() {
- $('#preview_bg').css('background-image', 'url(images/preview_bg.jpg)');
- });
- $('#bg_button_url').click(function() {
- $('#preview_bg').css('background-image', 'url(' + $('#bg_opt_url').val() + ')');
- });
- });
- -->
- </script>
- </head>
- <body>
- <div class="header">
- <h1>Transparent PNG Generator v0.1</h1>
- <h3>A free web utility by DaveDisaster</h3>
- </div>
- <div class="container">
- <form action="png.php" method="post">
- <div id="picker_wrapper">
- <h3>Define:</h3>
- <div id="colorpickerHolder"></div>
- <div id="slider"></div>
- <div class="form_fields">
- Opacity:
- <input id="a" name="a" type="text" size="3" maxlength="3" value="50" />
- Output size:
- <input id="w" name="w" type="text" size="3" value="1" />
- w x
- <input id="h" name="h" type="text" size="3" value="1" />
- h
- </div>
- </div>
- <div id="generate_wrapper">
- <div>
- <h3>Generate:</h3>
- </div>
- <div>
- <input id="r" name="r" type="hidden" />
- <input id="g" name="g" type="hidden" />
- <input id="b" name="b" type="hidden" />
- <input type="submit" class="button" value="Make it so..." />
- </div>
- </div>
- </form>
- <div id="preview_wrapper">
- <h3>Preview:</h3>
- <div id="preview_bg">
- <div id="preview_border">
- <div id="preview"></div>
- </div>
- </div>
- <div id="options">
- <div id="label_bg" class="opt_label">
- Background:
- </div>
- <button id="bg_opt_check" class="opt_bg">Checkered</button>
- <button id="bg_opt_image" class="opt_bg">Image</button>
- <div id="label_url" class="opt_label">
- Image URL:
- </div>
- <input id="bg_opt_url" class="opt_url" type="text" maxlength="255" size="30" />
- <button id="bg_button_url" class="opt_url">Update</button>
- </div>
- </div>
- <div class="footer">
- <div class="footer_left">
- <h4><a href="http://blog.absolutedisaster.co.uk/instant-tranparent-png-generator" target="_new">Blog, comments & source code</a></h4>
- </div>
- <div class="footer_right">
- <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>
- <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>
- <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>
- <h4>Built with:</h4>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement