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 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_check_opt').click(function() {
- $('#preview_bg').css('background-image', 'url(checker.gif)');
- });
- $('#bg_image_opt').click(function() {
- $('#preview_bg').css('background-image', 'url(preview_bg.jpg)');
- });
- $('#bg_url_opt').click(function() {
- $('#preview_bg').css('background-image', 'url(' + $('#bg_url').val() + ')');
- });
- });
- -->
- </script>
- <style type="text/css">
- <!--
- #picker_wrapper{
- position:relative;
- width:480px;
- float:left;
- }
- #slider{
- width:333px;
- margin-left:10px;
- }
- #preview_wrapper{
- position:relative;
- width:480px;
- float:left;
- }
- #preview_bg{
- position:relative;
- width:255px;
- height:255px;
- background:transparent url(checker.gif) center repeat, transparent url(preview_bg.jpg) center repeat;
- margin-left: auto;
- margin-right: auto;
- }
- #preview_border{
- position:relative;
- top:75px;
- width:99px;
- height:99px;
- margin:auto;
- background:transparent;
- outline:1px #FF6 solid;
- outline-offset:2px;
- }
- #preview{
- position:relative;
- top:0px;
- width:99px;
- height:99px;
- margin:auto;
- opacity:0.5;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
- filter: alpha(opacity=50);
- background-color:#F00;
- }
- -->
- </style>
- </head>
- <body>
- <div id="picker_wrapper">
- <div id="colorpickerHolder"></div>
- <div id="slider"></div>
- <form action="png.php" method="post">
- <div id="alpha">
- Opacity:
- <input id="a" name="a" type="text" size="3" maxlength="3" value="50" />
- </div>
- <div>
- Output image width
- <input id="w" name="w" type="text" size="3" value="1" />
- height
- <input id="h" name="h" type="text" size="3" value="1" />
- <input id="r" name="r" type="hidden" />
- <input id="g" name="g" type="hidden" />
- <input id="b" name="b" type="hidden" />
- </div>
- <div>
- <input type="submit" value="Generate PNG" />
- </div>
- </form>
- </div>
- <div id="preview_wrapper">
- <div id="preview_bg">
- <div id="preview_border">
- <div id="preview"></div>
- </div>
- </div>
- <div class="bg_opt">Background:</div>
- <div class="bg_opt"><button id="bg_check_opt">Checkered</button></div>
- <div class="bg_opt"><button id="bg_image_opt">Image</button></div>
- <div class="bg_opt">URL: <input id="bg_url" type="text" maxlength="255" size="30" /><button id="bg_url_opt">Update</button> </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement