summaryrefslogtreecommitdiff
path: root/share/frontend/imgradient/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'share/frontend/imgradient/index.html')
-rwxr-xr-xshare/frontend/imgradient/index.html329
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 + "&nbsp;x&nbsp;" + 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>