summaryrefslogtreecommitdiff
path: root/share/frontend/im/index.html
diff options
context:
space:
mode:
authoryo mama <pepper@scannerjammer.com>2015-09-22 00:51:40 -0700
committeryo mama <pepper@scannerjammer.com>2015-09-22 00:51:40 -0700
commitd3e7b5708deffbed864c916de22663f48333c58b (patch)
treeef76784a7827baff88c03670bf22832a3f146b17 /share/frontend/im/index.html
parent86c79f4372d7b2e7640a26473c7a4d331cdf7d16 (diff)
finishing server
Diffstat (limited to 'share/frontend/im/index.html')
-rwxr-xr-xshare/frontend/im/index.html569
1 files changed, 569 insertions, 0 deletions
diff --git a/share/frontend/im/index.html b/share/frontend/im/index.html
new file mode 100755
index 0000000..9a14e27
--- /dev/null
+++ b/share/frontend/im/index.html
@@ -0,0 +1,569 @@
+<!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"/>
+<!--FOR THE COLORS IFRAME-->
+<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: sans-serif;
+ }
+body
+ {
+ background-color: #efedee;
+ // background-color: #838388;
+ color: #555;
+ }
+#down_for_maintenance{
+ position: absolute;
+ background: url("http://asdf.us/impattern/patterns/38.png");
+ z-index:2000;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left:0;
+ display: none;
+}
+#down_for_maintenance > span{
+ background: white;
+}
+#controls,#result
+ {
+ display: inline-block;
+ margin: 10px;
+ width: 430px;
+ float: left;
+ }
+#controls
+ {
+ font-size: 14px;
+ top: 0; left: 0;
+ z-index: 5;
+ }
+#result
+ {
+ background-color: #d6d0d0;
+// background-color: #131412;
+ margin-left: 20px;
+ padding: 10px;
+ display: none;
+ z-index: 5;
+ }
+#sendtoinput
+ {
+ font-size: 10px;
+ }
+#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;
+ }
+#bgswitcheroo, #colorswitcheroo
+ {
+ width: 19px;
+ height:38px;
+ display: inline-block;
+ position: absolute;
+ background-image: url(http://i.asdf.us/im/7e/user_convo_1353562627_1355449919.png);
+ //background-image: url( http://i.asdf.us/im/7b/user_convo_1353562627.png);
+ background-repeat:no-repeat;
+ background-position: 3px 10px;
+ cursor: pointer;
+ }
+#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>
+
+</head>
+<body>
+<div id="down_for_maintenance">
+ <span>SORRY, this photoblaster page is down for maintenance. Will be back in an hour or so...</span>
+</div>
+<div id="controls">
+<form id="imform" action="javascript:return false">
+ <label id="img-url-label">IMAGE URL</label>
+ <input type="text" id="img-url" /><div id="bgswitcheroo"></div>
+ <!--<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>gravity</label>
+ <select id="img-gravity">
+ <option selected="selected">Center</option>
+ <option>East</option>
+ <option>NorthEast</option>
+ <option>North</option>
+ <option>NorthWest</option>
+ <option>West</option>
+ <option>SouthWest</option>
+ <option>South</option>
+ <option>SouthEast</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 semi-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" class="img-subtract"/>&nbsp;
+<a href="colors/" class="img-subtract pick-color">pick color</a>
+ <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/>
+
+ <label>nearest neighbor?</label>
+ <input type="checkbox" id="img-nearest" value="1" />
+ <br/>
+
+ <span class="shim"></span>
+
+ <label>recolor white</label>
+ <input type="text" id="img-white" class="img-white" value="white" />&nbsp;
+<a href="colors/" class="img-white pick-color">pick color</a>
+ <div id="colorswitcheroo"></div>
+ <br/>
+
+ <label>recolor black</label>
+ <input type="text" id="img-black" class="img-black" value="black" />&nbsp;
+<a href="colors/" class="img-black pick-color">pick color</a>
+ <br />
+<!-- <label><a href="colors/index.html" target="_blank" style="font-size: 10px">-->
+<!-- List of Color Names</a></label>-->
+
+ <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="" />&deg;
+ <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>
+<!--
+ <span id="gif-options">
+ <label>dispose</label>
+ <select id="dispose">
+ <option value="none" selected>None</option>
+ <option value="previous">Previous</option>
+ <option value="background">Background</option>
+ </select>
+ </span>
+-->
+
+ <!-- <input type="reset" id="reset-button" value="reset-button"></input>-->
+
+ <span class="shim"></span>
+
+ <label>put your name here &gt;&gt;&gt;</label>
+ <input type="text" id="img-name" value="" />
+ <br/>
+
+ <span class="shim"></span>
+
+ <label>&nbsp;</label>
+ <button id="img-generate">GENERATE</button>
+
+ </form>
+
+ <span class="shim"></span>
+ <p>
+ <img src="new.gif" width="32" height="16" />
+ Mess around with heightmaps and textures <a href="/imlandscape">Landscape</a>
+ <span class="shim"></span>
+ <img src="new.gif" width="32" height="16" />
+ Overlay patterns onto your gifs <a href="/impattern">pattern</a>
+ <span class="shim"></span>
+ Write your own effects &rarr; <a href="/shader/">Shaderblaster</a> &amp; <a href="/dither/">Dither</a>
+ <span class="shim"></span>
+ Oh now it's on....payback time &rarr; <a href="/imbreak/">FOTO FUCKER</a>
+ <span class="shim"></span>
+ <!--<img src="new.gif" width="32" height="16" />-->
+ Transform images in 3D &rarr; <a href="/imgrid/">Grid Generator</a>
+ <span class="shim"></span>
+ Gradients make everything better &rarr; <a href="/imgradient/">Gradient Generator</a>
+ </p>
+ <span class="shim"></span>
+ <p>
+ See what people are making &rarr; <a href="/im/gallery/">Image Gallery</a><br/>
+ <span class="shim"></span>
+ The best ones go here &rarr; <a href="http://photoblaster.tumblr.com/">Photoblaster Tumblr</a>
+ <span class="shim"></span>
+ View a random selection &rarr; <a href="/im/gallery/?random=1">Random Gallery</a><br/>
+ <span id="userlink">
+ <span class="shim"></span>
+ Things you've made &rarr; <a href="/im/gallery/?random=1">Your Gallery</a><br/>
+ </span>
+ </p>
+</div>
+
+<div id="result">
+ &rarr; <input type="text" id="output-url"/><br/>
+ <span id="output-cmd"></span><br/>
+
+ <img id="output-img" />
+ <br/><span id="sendtoinput"></span>
+</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&amp;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>
+-->
+
+<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",
+ nearest: $('#img-nearest: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(),
+ gravity: $('#img-gravity :selected').text(),
+ // tile: $('#img-tile:checked').val() !== undefined ? "true" : "false",
+ format: $('#img-format :selected').text(),
+ dispose: $('#dispose').val(),
+ username: $("#img-name").val(),
+ }
+ if (data.rotate.match(/-/)){ data.rotate=360-parseInt(data.rotate.replace("-","")); };
+ $("#img-rotate").val("");
+ if (data.username.length > 0)
+ document.cookie = "imname="+data.username+";path=/;domain=.asdf.us;max-age=1086400"
+ $.post("/im/api/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)
+ {
+ data = JSON.parse(raw)
+ console.log(data)
+ Main.generating = false
+ $("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"
+ + data.width + " x " + data.height);
+
+ $("#output-url").val(data.url);
+ $("#output-img").hide().attr("src", data.url).fadeIn(700)
+ $("#sendtoinput").html("&nbsp;send to input <img src=\"arrow_pointing_left.png\"/>&nbsp;").css({"border": "1px solid gray", "cursor" : "pointer"}).click(function(){
+ $("#img-url").val(data.url);
+ });
+
+ },
+ 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")})
+ $("#bgswitcheroo").click(function() {
+ a = $("#img-url").val();
+ b = $("#img-background").val();
+ $("#img-url").val(b);
+ $("#img-background").val(a);
+ });
+ $("#colorswitcheroo").click(function() {
+ a = $("#img-white").val();
+ b = $("#img-black").val();
+ $("#img-white").val(b);
+ $("#img-black").val(a);
+ });
+ $("#img-format").change(function(){
+ $("#gif-options").css( "visibility", $("#img-format").val() === "gif" ? "visible" : "hidden")
+ })
+
+ },
+ }
+document.getElementById('imform').reset();
+Main.init ()
+</script>
+<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>
+<!--for the colors iframe-->
+<script type="text/javascript" src="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>
+</body>
+</html>
+
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 11:18:44 +0000