summaryrefslogtreecommitdiff
path: root/share/frontend/im/index.html
diff options
context:
space:
mode:
authorpepperpepperpepper <pepper@scannerjammer.com>2015-11-18 11:57:32 -0800
committerpepperpepperpepper <pepper@scannerjammer.com>2015-11-18 11:57:32 -0800
commit893c31e004891701c88ddeb585a925cec32a8f0e (patch)
treea7b69bbf032b732842cdca26c47c2017a14af887 /share/frontend/im/index.html
parent87f6c2a5b777bd8b676d03a86606adba3c5af416 (diff)
the great cleanup, the legend continues
Diffstat (limited to 'share/frontend/im/index.html')
-rwxr-xr-xshare/frontend/im/index.html322
1 files changed, 5 insertions, 317 deletions
diff --git a/share/frontend/im/index.html b/share/frontend/im/index.html
index c19770f..313fe04 100755
--- a/share/frontend/im/index.html
+++ b/share/frontend/im/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PHOTOBLASTER</title>
@@ -13,179 +13,7 @@
<!--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>
+<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
@@ -372,7 +200,7 @@ div#controls, span#userlink {
<span class="shim"></span>
<p>
- <img src="new.gif" width="32" height="16" />
+ <img src="img/new.gif" width="32" height="16" />
Draw color codes &rarr; <a href="/ascii/">Ascii</a>
<span class="shim"></span>
Mess around with heightmaps and textures &rarr; <a href="/imlandscape">ImLandscape</a>
@@ -383,7 +211,6 @@ div#controls, span#userlink {
<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>
@@ -417,149 +244,10 @@ div#controls, span#userlink {
-->
<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 (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="js/main.js"></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="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>