diff options
Diffstat (limited to 'share/frontend/im/gradient.html')
| -rwxr-xr-x | share/frontend/im/gradient.html | 402 |
1 files changed, 402 insertions, 0 deletions
diff --git a/share/frontend/im/gradient.html b/share/frontend/im/gradient.html new file mode 100755 index 0000000..6b451bb --- /dev/null +++ b/share/frontend/im/gradient.html @@ -0,0 +1,402 @@ +<!doctype html> +<html> +<head> +<title>PHOTOBLASTER</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<meta property="og:title" content="PHOTOBLASTER"/> +<meta property="og:type" content="website"/> +<meta property="og:url" content="http://asdf.us/im/"/> +<meta property="og:image" content="http://asdf.us/im/6e/sparklebling1_1310021111_1310071704.gif" /> +<meta property="og:site_name" content="asdf.us"/> +<meta property="og:description" content=""/> +<meta property="fb:admins" content="100001923956223,1709246"/> +<style type="text/css"> +* + { + padding: 0; + margin: 0; + font-family: serif; + font-size: 16px; +background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.01, #480925), + color-stop(0.51, #7E8585) +); +background-image: -moz-linear-gradient( + center bottom, + #480925 1%, + #7E8585 51% +); + + + } +body + { +// overflow: hidden; +background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.01, #480925), + color-stop(0.51, #7E8585) +); +background-image: -moz-linear-gradient( + center bottom, + #480925 1%, + #7E8585 51% +); + + +// background-color: red; + } +#controls,#result + { + display: inline-block; + padding: 10px; + width: 430px; + position: absolute; + } +#controls + { + font-size: 14px; + top: 0; left: 0; + max-height: 450px; + z-index: 5; + } +#result + { + background-color: #d6d0d0; + top: 10px; left: 480px; + display: none; + z-index: 5; + } +#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: 190px; + padding-right: 10px; + text-align: right; + } +input[type=text] + { + width: 100px; + } +#img-url,#output-url,#img-background + { + width: 200px; + } +#img-fuzz,#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate + { + width: 50px; + text-align: right; + } +button + { + padding: 2px 5px; + font-size: 16px; + } +#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: absolute; + bottom: 10px; + right: 10px; + width: 350px; + background-color: #fff; + padding: 10px; + color: #ddd; + font-family: trebuchet ms, sans-serif; + } +</style> +<body> +<div id="controls"> +<p> + <label>IMAGE URL</label> + <input type="text" id="img-url" /> + <br/> + + + <label>define a width</label> + <input type="text" id="img-width" /><small>px</small> + <br/> + + <label>define a height</label> + <input type="text" id="img-height" /><small>px</small> + <br/> + + <span class="shim"></span> + + <label>first color</label> + <input type="text" id="first-color" value="" /> + <br/> + + <label>second color</label> + <input type="text" id="second-color" value="" /> + <br/> + + <span class="shim"></span> + + + <label>brightness <small>(0-200)</small></label> + <input type="text" id="img-brightness" value="" /> + <br/> + +<!-- + <label>contrast <small>(0-200)</small></label> + <input type="text" id="img-contrast" value="" /> + <br/> +--> + + <span class="shim"></span> + + <label>flip horizontally?</label> + <input type="checkbox" id="img-flop" value="1" /> + <br/> + + <label>flip vertically?</label> + <input type="checkbox" id="img-flip" value="1" /> + <br/> + + <label>rotate <small>(0-360)</small></label> + <input type="text" id="img-rotate" value="" />° + <br/> + + <label>gradient type</label> + <select id="gradient-type"> + <option selected="selected">Over</option> + <option>ATop</option> + <option>Dst_Over</option> + <option>Dst_In</option> + <option>Dst_Out</option> + <option>Multiply</option> + <option>Screen</option> + <option>Divide</option> + <option>Plus</option> + <option>Difference</option> + <option>Exclusion</option> + <option>Lighten</option> + <option>Darken</option> + <option>Overlay</option> + <option>Hard_Light</option> + <option>Soft_Light</option> + <option>Pegtop_Light</option> + <option>Linear_Light</option> + <option>Vivid_Light</option> + <option>Pin_Light</option> + <option>Linear_Dodge</option> + <option>Linear_Burn</option> + <option>Color_Dodge</option> + <option>Color_Burn</option> + </select> + + <label>output format</label> + <select id="img-format"> + <option selected="selected">gif</option> + <option>jpg</option> + <option>png</option> + </select> +--> + + <span class="shim"></span> + + <label>your name</label> + <input type="text" id="img-name" /> + <br/> + + <span class="shim"></span> + + <label> </label> + <button id="img-generate">GENERATE</button> +</p> + + <span class="shim"></span> + <p> + See what people are making → <a href="/im/gallery/">Image Gallery</a><br/> + <span class="shim"></span> + Some really cool photoblasts → <a href="http://photoblaster.tumblr.com/">Photoblaster Tumblr</a> + </p> +<br> + <p> + <span class="shim"></span> + Go back to the editor → <a href"/im/">Photoblaster Editor</a></br> +</div> + + +<div id="result"> + → <input type="text" id="output-url"/><br/> + <span id="output-cmd"></span><br/> + + <img id="output-img" /> +</div> + +<div id="instructions"> + <p> + Define a width and height, and choose colors for the gradient. You can also choose the gradient style. + <span class="shim"></span> + Specify colors using hex codes, or consult the list of <a href="colors.html" target="_blank">Color Names</a>. + </p> +</div> + +<div id="likebutton"> +<div id="fb-root" style="background-color: transparent;"></div><script src="http://connect.facebook.net/en_US/all.js#appId=236917449658413&xfbml=1"></script><fb:like href="http://asdf.us/im/" send="false" width="347" show_faces="true" colorscheme="light" font="" style="background-color: transparent;"></fb:like> +</div> + +</body> +<script type="text/javascript" src="/js/jquery.js"></script> +<script type="text/javascript"> +var Main = + { + API_HEADER: "#@im", + enter: function (e) + { + if (e.keyCode === 13) + Main.go() + }, + go: function () + { + $("#output-cmd").html('generating...').show() + $("#result").show() + var data = + { + url: $("#img-url").val(), + transparent: $('#img-transparent:checked').val() !== undefined ? "true" : "false", + flip: $('#img-flip:checked').val() !== undefined ? "true" : "false", + flop: $('#img-flop:checked').val() !== undefined ? "true" : "false", + rotate: $("#img-rotate").val(), + subtract: $("#img-subtract").val(), + fuzz: $("#img-fuzz").val(), + width: $("#img-width").val(), + height: $("#img-height").val(), + black: $("#img-black").val(), + white: $("#img-white").val(), + brightness: $("#img-brightness").val(), + saturation: $("#img-saturation").val(), + hue: $("#img-hue").val(), + contrast: $("#img-contrast").val(), + background: $("#img-background").val(), + // merge_early: $('#img-merge_early:checked').val() !== undefined ? "true" : "false", + compose: $('#img-compose :selected').text(), + // tile: $('#img-tile:checked').val() !== undefined ? "true" : "false", + 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("/cgi-bin/im/generate", data, Main.callback) + }, + error: function (s) + { + $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show() + $("#output-url").hide() + $("#output-img").hide() + }, + callback: function (raw) + { + lines = raw.split("\n") + if (lines[0] !== Main.API_HEADER) + return Main.error("problem loading API") + if (lines[1].indexOf("ERROR\t") === 0) + return Main.error(lines[1].split("\t")[1]) + + // $("#output-cmd").html(lines[1]+"<br/>"+lines[2]) + // $("#output-cmd").hide() + $("#output-cmd").html("size: "+Main.filesize(lines[4])+"<br/>"+(lines[5].replace(" ", " x ").replace(/'/g,"").replace(',',""))) + $("#output-url").val(lines[3]) + $("#output-img").hide().attr("src", lines[3]).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) + $("#img-generate").bind("click", Main.go) + $("div input[type=text]").bind("keydown", Main.enter) + }, + } +Main.init () +</script> +</html> + |