diff options
Diffstat (limited to 'share/frontend/im/asdf.html')
| -rwxr-xr-x | share/frontend/im/asdf.html | 462 |
1 files changed, 462 insertions, 0 deletions
diff --git a/share/frontend/im/asdf.html b/share/frontend/im/asdf.html new file mode 100755 index 0000000..e8b8687 --- /dev/null +++ b/share/frontend/im/asdf.html @@ -0,0 +1,462 @@ +<!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="Paste a link into the first box, then use the other settings to colorize, distort, add transparency and a background."/> +<meta property="fb:admins" content="100001923956223,1709246"/> +<style type="text/css"> +* + { + padding: 0; + margin: 0; + font-family: sans-serif; + } +body + { + overflow: hidden; + background-color: #e6e0e0; + // background-color: #838388; + color: #555; + } +#controls,#result + { + display: inline-block; + padding: 10px; + width: 430px; + position: absolute; + } +#controls + { + font-size: 14px; + top: 0; left: 0; + z-index: 5; + } +#result + { + background-color: #d6d0d0; +// background-color: #131412; + top: 10px; left: 480px; + display: none; + z-index: 5; + } +#instructions + { + position: absolute; + bottom: 10px; + left: 10px; + line-height: 18px; + z-index: 1; + } +p,form + { +// background-color: #010101; + background-color: #fff; + background-image: url(imcupbg.jpg); + background-position: center center; + padding: 10px; + font-size: 14px; + width: 430px; + display: block; + } +#gallery-link + { + background-color: #fff; + background-image: url(imcupbg.jpg); + background-position: center center; + position: absolute; + top: 10px; + right: 10px; + padding: 10px; + z-index: 10; + } +.error + { + color: red; + font-size: 20px; + } +a + { +// color: #b4d; + color: #a39; + font-weight: bold; + } +label + { + display: inline-block; + width: 190px; + padding-right: 10px; + text-align: right; + } +small + { + color: #777; + } +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 + { + display: none; + position: absolute; + bottom: 10px; + right: 10px; + width: 350px; + background-color: #fff; + background-image: url(imcupbg.jpg); + padding: 10px; + color: #ddd; + font-family: trebuchet ms, sans-serif; + } +div#controls, span#userlink { + display: none; +} span#userlink a { + text-transform: capitalize; +} +</style> +<body> +<div id="controls"> +<form id="imform" action="javascript:return false"> + <label id="img-url-label">IMAGE URL</label> + <input type="text" id="img-url" /> + <br/> + <label id="background-url-label">background URL</label> + <input type="text" id="img-background" value="" /> + <br/> + + <label>compose operator</label> + <select id="img-compose"> + <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> +<!-- <br> + <label>tile foreground?</label> + + <input type="checkbox" id="img-tile" value="1" /> + <br/> --> + +<!-- + <label>merge before recolor?</label> + <input type="checkbox" id="img-merge_early" value="1" /> + <br/> + +--> + <span class="shim"></span> + + + <span class="shim"></span> + + <label>make transparent?</label> + <input type="checkbox" id="img-transparent" value="1" checked="true" /> + <br/> + + <label>remove color</label> + <input type="text" id="img-subtract" value="white" /> + <br/> + + <label>transparency fuzz</label> + <input type="text" id="img-fuzz" value="5" />% + <br/> + + <span class="shim"></span> + + <label>resize width</label> + <input type="text" id="img-width" /><small>px</small> + <br/> + + <label>resize height</label> + <input type="text" id="img-height" /><small>px</small> + <br/> + + <span class="shim"></span> + + <label>recolor white</label> + <input type="text" id="img-white" value="white" /> + <a href="colors/index.html" style="font-size: 10px">List of Color Names</a> + <br/> + + <label>recolor black</label> + <input type="text" id="img-black" value="black" /> + <br/> + + <span class="shim"></span> + + <label>hue <small>(0-200)</small></label> + <input type="text" id="img-hue" value="" /> + <br/> +<!-- + <label>saturation <small>(0-200)</small></label> + <input type="text" id="img-saturation" value="" /> + <br/> +--> +<!-- + <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/> + + <span class="shim"></span> + + <label>output format</label> + <select id="img-format"> + <option selected="selected">gif</option> + <option>jpg</option> + <option>png</option> + </select> + <!-- <input type="reset" id="reset-button" value="reset-button"></input>--> + + + <span class="shim"></span> + + <label>put your name here >>></label> + <input type="text" id="img-name" value="" /> + <br/> + + <span class="shim"></span> + + <label> </label> + <button id="img-generate">GENERATE</button> + + </form> + + <span class="shim"></span> + <p> + <img src="new.gif" width="32" height="16" /> + Oh now it's on....payback time → <a href="/imbreak/">FOTO FUCKER</a> + <span class="shim"></span> + <img src="new.gif" width="32" height="16" /> + Transform images in 3D → <a href="/imgrid/">Grid Generator</a> + <span class="shim"></span> + Gradients make everything better → <a href="/imgradient/">Gradient Generator</a> + </p> + <span class="shim"></span> + <p> + See what people are making → <a href="/im/gallery/">Image Gallery</a><br/> + <span class="shim"></span> + The best ones go here → <a href="http://photoblaster.tumblr.com/">Photoblaster Tumblr</a> + <span class="shim"></span> + View a random selection → <a href="/im/gallery/?random=1">Random Gallery</a><br/> + <span id="userlink"> + <span class="shim"></span> + Things you've made → <a href="/im/gallery/?random=1">Your Gallery</a><br/> + </span> + </p> +</div> + +<div id="result"> + → <input type="text" id="output-url"/><br/> + <span id="output-cmd"></span><br/> + + <img id="output-img" /> +</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", + generating: false, + enter: function (e) + { + if (Main.generating) + return + if (e.keyCode === 13) + Main.go() + }, + go: function () + { + if (Main.generating) + return + Main.generating = true + $("#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) + { + Main.generating = false + 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 "" + }, + preloadSize: function(url,label,tag){ + console.log(url) + var img = new Image() + img.onload = function(){ $(label).html( tag + ": " + img.naturalWidth + " x " + img.naturalHeight ) } + img.src = url + }, + init: function () + { + var name = Main.cookie () + $("#img-name").val(name) + if (name) + { + $("#userlink").show() + $("#userlink a").attr("href", "/im/gallery/?name="+name).html(name+"'s photoblasts") + } + $("#likebutton,#controls").fadeIn(0) + $("#img-generate").bind("click", Main.go) + $("div input[type=text]").bind("keydown", Main.enter) + $("#img-url").change(function(){Main.preloadSize(this.value,"#img-url-label","image")}) + $("#img-background").change(function(){Main.preloadSize(this.value,"#background-url-label","bg")}) + }, + } +document.getElementById('imform').reset(); +Main.init () +</script> +</html> + |