diff options
Diffstat (limited to 'share/frontend/imgradient/index.html')
| -rwxr-xr-x | share/frontend/imgradient/index.html | 329 |
1 files changed, 5 insertions, 324 deletions
diff --git a/share/frontend/imgradient/index.html b/share/frontend/imgradient/index.html index d42b663..75310c3 100755 --- a/share/frontend/imgradient/index.html +++ b/share/frontend/imgradient/index.html @@ -1,21 +1,13 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- - __ __ __ __ __ __ __ -/_/\/\ /_/\/\ /_/\/\ /_/\/\ /_/\/\ /_/\/\ /_/\/\ -\_\ / \_\ / \_\ / \_\ / \_\ / \_\ / \_\ / -/_/ \ /_/ \ /_/ \ /_/ \ /_/ \ /_/ \ /_/ \ -\_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ - \_\/ \_\/ \_\/ \_\/ \_\/ \_\/ \_\/ --> - -<html> <head> <title>GRADIENT PHOTOBLASTER</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta property="og:title" content="GRADIENT PHOTOBLASTER"/> <meta property="og:type" content="website"/> -<meta name=Author content="Pepper .... with help from Jules Welter/LaPlace"/> +<meta name=Author content="Pepper .... with help from Jules LaPlace"/> <meta property="og:url" content="http://asdf.us/imgradient/"/> <meta property="og:image" content="http://asdf.us/g/experiment/whitegreencrazy.jpg" /> <meta property="og:site_name" content="asdf.us"/> @@ -23,165 +15,7 @@ <meta property="fb:admins" content="100001923956223,1709246"/> <link href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="/im/colors/css/jquery.fancybox.css?v=2.1.5" media="screen" /> -<style type="text/css"> -* - { - padding: 0; - margin: 0; - font-family: times; - } -body - { - background-color: #e6e0e0; - color: #696969; - overflow-x:hidden; - } -h1 - { - font-size: 40px; - } -#brightness-slider,#hue-slider,#saturation-slider,#blur-slider - { - margin-top:10px; - margin-bottom:10px; - background-color:#B3B3B3; - } -#stripenumber,#stripeintensity,#percentbeveled - { - height:10px; - width :25px; - font-size:9; - } -#controls,#result - { - padding: 10px; - width: 460px; - } -#controls - { - display:block; - font-size: 14px; - top: 10px; left: 10px; - z-index: 5; - background-color: #fff; - -moz-box-shadow: 0px 0px 9px 3px mediumseagreen; - -webkit-box-shadow: 0px 0px 9px 3px mediumseagreen; - box-shadow: 0px 0px 9px 3px mediumseagreen; - border: 60px outset #777; - } -#result - { - background-color: #d6d0d0; - top: 10px; left: 580px; - z-index: 5; - display: none; - position: fixed; - } -#instructions - { - position: absolute; - bottom: 10px; - left: 10px; - line-height: 18px; - z-index: 1; - } -p - { - background-color: #fff; - padding: 10px; - font-size: 14px; - width: 430px; - display: block; - } -#gallery-link - { - background-color: #fff; - position: absolute; - top: 10px; - right: 10px; - padding: 10px; - z-index: 10; - } -.error - { - color: red; - font-size: 20px; - } -a - { - color: #b4d; - font-weight: bold; - } -label - - { - display: inline-block; - width: 300px; - padding-right: 10px; - text-align: center; - } -input[type=text] - { - width: 50px; - } -#img-url,#output-url,#img-background - { - width: 200px; - } -#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate,#img-blur,#img-tilt - { - width: 50px; - text-align: right; - } -button - { - padding: 2px 5px; - font-size: 16px; - width:200px; - float:right; - font-weight:bold; - color:#222222; - } -#result img - { - max-width: 400px; - max-height: 400px; - } -#output-cmd - { - font-size: 12px; - white-space: pre; - } -.shim - { - height: 10px; - clear: both; - display: block; - } -#output-url - { - width: 320px; - } -#likebutton - { - position: fixed; - bottom: 10px; - right: 10px; - width: 350px; - background-color: #fff; - padding: 10px; - color: #ddd; - font-family: times; - text-transform: uppercase; - } -.arrow - { - float:right; - white-space:inherit; - display:inline; - } - -</style> +<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <body> <div id="error"></div> <div id="controls"> @@ -376,164 +210,11 @@ button </div> <script type="text/javascript" src="/js/jquery.js"></script> -<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> +<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/im/colors/js/jquery.remember-state.js"></script> <script type="text/javascript" src="/im/colors/js/jquery.fancybox.js?v=2.1.5"></script> -<script type="text/javascript" src="colors_iframe.js"></script> -<script type="text/javascript"> - - $(function() { - $( "#blur-slider" ).slider({ - value:0, - min: 0, - max: 20, - step: 1, - slide: function( event, ui ) { - $( "#img-blur" ).val(ui.value); - } - }); - $( "#img-blur" ).val( $( "#blur-slider" ).slider( "value" ) ); - - $( "#brightness-slider" ).slider({ - value:100, - min: 0, - max: 200, - step: 1, - slide: function( event, ui ) { - $( "#img-brightness" ).val(ui.value); - } - }); - $( "#img-brightness" ).val( $( "#brightness-slider" ).slider( "value" ) ); - - $( "#hue-slider" ).slider({ - value:100, - min: 0, - max: 200, - step: 1, - slide: function( event, ui ) { - $( "#img-hue" ).val(ui.value); - } - }); - $( "#img-hue" ).val($( "#hue-slider" ).slider( "value" ) ); - - $( "#saturation-slider" ).slider({ - value:100, - min: 0, - max: 200, - step: 1, - slide: function( event, ui ) { - $( "#img-saturation" ).val(ui.value); - } - }); - $( "#img-saturation" ).val($( "#saturation-slider" ).slider( "value" ) ); - }); - -var Main = - { - API_HEADER: "#@imgradient", - enter: function (e) - { -// console.log("calling enter") - if (e.keyCode === 13){ - Main.go() - } - }, - go: function () - { - $("#output-cmd").html('generating...').show() - $("#result").show() - var data = - { - flip: $('#img-flip:checked').val() !== undefined ? "true" : "false", - flop: $('#img-flop:checked').val() !== undefined ? "true" : "false", - tilt: $('#img-tilt').val(), - rotate: $("#img-rotate").val(), - subtract: $("#img-subtract").val(), - width: $("#img-width").val(), - height: $("#img-height").val(), - color2: $("#img-color2").val(), - color1: $("#img-color1").val(), - brightness: $("#img-brightness").val(), - saturation: $("#img-saturation").val(), - blurriness: $("#img-blur").val(), - hue: $("#img-hue").val(), - contrast: $("#img-contrast").val(), - gradienttype: $('#gradient-type :selected').val(), - bevel: $('#bevel-type :selected').val(), - percentbeveled: $('#percentbeveled').val(), - halftone: $('#halftone-type :selected').val(), - stripes: $('#stripes:checked').val() !== undefined ? "true" : "false", - stripenumber: $('#stripenumber').val(), - stripeintensity: $('#stripeintensity').val(), - format: $('#img-format :selected').text(), - name: $("#img-name").val(), - } - if (data.name.length > 0){ - document.cookie = "imname="+data.name+";path=/;domain=.asdf.us;max-age=1086400" - } - $.post("/im/api/imgradient", data, Main.callback) - $("#controls").css('margin',"") - }, - error: function (s) - { - $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show() - $("#output-url").hide() - $("#output-img").hide() - }, - callback: function (data) - { - if (data.error){ - return Main.error(data.error) - } - $("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"+data.height + " x " + data.width) - $("#output-url").val(data.url) - $("#output-img").hide().attr("src", data.url).fadeIn(700) - }, - filesize: function (size) - { - if (size < 1024) - return size + " bytes" - if (size < 1024 * 1024) - return Math.floor (size/1024) + " KB" - else - return Math.floor (size/(1024*1024)) + " MB" - }, - cookie: function () - { - if (document.cookie) - { - var cookies = document.cookie.split(";") - for (i in cookies) - { - var cookie = cookies[i].split("=") - if (cookie[0].indexOf("imname") !== -1) - { - if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length) - { - return cookie[1] - } - } - } - } - return "" - }, - init: function () - { - var name = Main.cookie () - $("#img-name").val(name) - }, -} - -$(document).ready(function(){ - Main.init () - $('form').submit(function() { - return false; - }); - $(document).keydown(Main.enter) - $("#img-generate").click(Main.go) - document.getElementById("reset").reset() -}) -</script> +<script type="text/javascript" src="js/colors_iframe.js"></script> +<script type="text/javascript" src="js/main.js"></script> <!--<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>--> </body> </html> |
