<!--
//////////////////////////////////////
// .•:*¨¨*:•..•:*¨¨*:•..•:*¨¨*:•. //
// 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>