diff options
| -rw-r--r-- | share/frontend/imgrid/colors_iframe.js | 45 | ||||
| -rw-r--r-- | share/frontend/imgrid/css/style.css | 4 | ||||
| -rwxr-xr-x | share/frontend/imgrid/index.html | 25 | ||||
| -rwxr-xr-x | share/frontend/imgrid/jeremy.html | 348 | ||||
| -rwxr-xr-x | share/frontend/imgrid/jmd.html | 346 | ||||
| -rwxr-xr-x | share/frontend/imgrid/js/main.js | 2 |
6 files changed, 156 insertions, 614 deletions
diff --git a/share/frontend/imgrid/colors_iframe.js b/share/frontend/imgrid/colors_iframe.js deleted file mode 100644 index 5e6d5b2..0000000 --- a/share/frontend/imgrid/colors_iframe.js +++ /dev/null @@ -1,45 +0,0 @@ - - - - -function launch_iframe(input_target){ - $.fancybox.open({ - href : '/im/colors/index.html', - width : 1100, // set the width - height : 710, - fitToView : true, - autoDimensions:false, - autoSize:false, - type : 'iframe', - closeBtn : false, - padding : 5, - beforeShow : function(){ - $('.fancybox-iframe').contents().find('#submitvalue').click(function(){ - $('.fancybox-iframe').contents().find('form').submit(); - $.fancybox.close(); - }); - }, - beforeClose : function(){ - x = $('.fancybox-iframe').contents().find('#namespace').val(); - }, - afterClose: function(){ - $(input_target).val(x); - } - }); -} -$(document).ready(function(){ - if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { - return; - } - var element_list = [".bg-color", ".line-color", ".planebgcolor", ".skycolor"] - element_list.forEach( - function(l){ - console.log("a"+l) - $("a"+l).click(function(event){ - event.preventDefault(); - launch_iframe("input"+l) - }); - } - ) - -}) diff --git a/share/frontend/imgrid/css/style.css b/share/frontend/imgrid/css/style.css index f55185e..8c89c5d 100644 --- a/share/frontend/imgrid/css/style.css +++ b/share/frontend/imgrid/css/style.css @@ -150,11 +150,11 @@ table left:0px; width:100%; height:100%; - background-image:url(img/background.gif); + background-image:url(../img/background.gif); } #intro-inner { - background-image:url(img/background.gif); + background-image:url(../img/background.gif); z-index:1000; height:inherit; width:inherit; diff --git a/share/frontend/imgrid/index.html b/share/frontend/imgrid/index.html index beac798..c60da1e 100755 --- a/share/frontend/imgrid/index.html +++ b/share/frontend/imgrid/index.html @@ -31,9 +31,9 @@ <meta name="description" content="IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows" > <meta name="keywords" content="photoblaster, 3D" > <meta name=Author content="Pepper - 2011 www.facebook.com/AAAFFF"> - <link rel="shortcut icon" href="http://asdf.us/imgrid/img/favicon.ico"> + <link rel="shortcut icon" href="http://asdf.us/imgrid/img/favicon.ico"> <link rel="image_src" href="http://asdf.us/imgrid/greatgrids/images/gg7.png" > - <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> + <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <meta property="og:title" content="imgrid" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows" /> @@ -45,7 +45,7 @@ <link href='css/jquery-ui-1.8.16.custom.css' rel='stylesheet' type='text/css' /> <link href='css/cssreset.css' rel='stylesheet' type='text/css'/> <link href='css/style.css' rel='stylesheet' type='text/css'/> - <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> + <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> </head> <body> <div id='intro'> @@ -71,7 +71,8 @@ hit enter or click GENERATE to get your perspective-plane <form id='theform'> <div id="flatcontrols"> <table> -<tr><td class='dimensionsmore'>DIMENSIONS</td> + <tr> + <td class='dimensionsmore'>DIMENSIONS</td> <td> <div id='dimensionsplug' class='dimensionsmore'>+</div></td></tr> </table> @@ -235,26 +236,14 @@ hit enter or click GENERATE to get your perspective-plane <input id="output-url" class='results'></input> <div id="output-info" class='results'></div> </div> - - - - <span class='copyright' style="position:fixed; bottom:10px; left:10px;">COPYRIGHT 2011 PEPPER</span><a href='http://asdf.us/imgrid/greatgrids/index.html'><img class='copyright' style='display:inline; position:fixed; bottom:10px; left:290px; width:100px' src="img/blackplant.png"></img></a> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> -<script type="text/javascript" src="js/css/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> <link rel="stylesheet" type="text/css" href="/im/colors/css/jquery.fancybox.css?v=2.1.5" media="screen" /> <script type="text/javascript" src="js/colors_iframe.js"></script> -<script type='text/javascript'> -$(document).ready(function() - { - $('#intro').fadeOut(1000,function() - { - $('#intro').remove() - }) - }); -</script> +<script type='text/javascript' src="js/intro.js"></script> <script type="text/javascript" src="js/sliders.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type='text/javascript'> diff --git a/share/frontend/imgrid/jeremy.html b/share/frontend/imgrid/jeremy.html index 31e171a..e32fdb4 100755 --- a/share/frontend/imgrid/jeremy.html +++ b/share/frontend/imgrid/jeremy.html @@ -28,223 +28,105 @@ --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - <meta name="description" content="IMGRID A 3D GRID-PLANE GENERATOR" > + <meta name="description" content="IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows" > <meta name="keywords" content="photoblaster, 3D" > - <meta name=Author content="Pepper Dreamteamer - 2011 www.facebook.com/AAAFFF"> - <link rel="shortcut icon" href="http://asdf.us/imgrid/favicon.ico"> - <link rel="image_src" href="http://vfile.com/public/img/1.png" > - <!--FACEBOOK<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">--> + <meta name=Author content="Pepper - 2011 www.facebook.com/AAAFFF"> + <link rel="shortcut icon" href="http://asdf.us/imgrid/img/favicon.ico"> + <link rel="image_src" href="http://asdf.us/imgrid/greatgrids/images/gg7.png" > + <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <meta property="og:title" content="imgrid" /> <meta property="og:type" content="website" /> - <meta property="og:url" content="http://asdf.us/imgrid" /> - <meta property="og:site_name" content="IMGRID - A 3D-GRID-PLANE GENERATOR" /> - <title>IMGRID - a 3D GRID-PLANE GENERATOR</title> + <meta property="og:site_name" content="IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows" /> + <meta property="og:image" content="http://asdf.us/imgrid/img/facebookimage.png"/> + <meta property="fb:admins" content="100001923956223,1709246"/> + <title>IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows</title> <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" /> - <link href="colorpixx.css" rel="stylesheet" type="text/css" /> - <link href='main2.css' rel='stylesheet' type='text/css' /> <link href='css/jquery-ui-1.8.16.custom.css' rel='stylesheet' type='text/css' /> - <link href='cssreset.css' rel='stylesheet' type='text/css'/> - <style type='text/css'> - body - { - font-family:georgia, Arial; - font-size:10pt; - } - h1 - { - font-size:18px; - // font-weight:bold; - width:50%; - margin:10px; - padding:10px; -// box-shadow: 0px 0px 9px 4px #8B7D7B; - } - #flatcontrols - { - // background-color:#CDC5BF; - // box-shadow: 0px 0px 9px 3px #00EEEE; - width:40%; - margin:10px; - padding:10px; - } - .lineadj{display:none;} - .threedadj{display:none;} - .gridbgadj{display:none;} - .imageoptions{display:none;} - .results - { - display:none; - position:relative; - z-index:-100; - } - #output-url - { - z-index:100; - width:500px; - } - .slider - { - background-color:#eee5de; - display:inline-block; - width:50%; - } - #opacity-slider - { - width:100%; - display:inline-block; - margin-right:0; - margin-left:0; - } - input - { - width:70px; - } - .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default - { - background-color:#555; - } - #result - { - position:fixed; - right:20%; - top:20px; - } - #output-url - { - width:100%; - } - .urlinput - { - width:60%; - } - a - { - background-color:white; - max-width:100px; - } - a:link - { - color: black; - } - a:visited - { - COLOR: black; - } - a:hover - { - COLOR: black; - } - a:active - { - COLOR: black; - } - table td - { - padding:4px; -// border:solid 2px; - } - table tr - { -// border: solid 2px; - } - #threedmore, #imageoptionsmore - { - background-color:white; - cursor:pointer; - font-size:20px; - text-align:center; - } -button { - background: white; - color: #000000; - font-size: 18px; - font-family: Georgia, serif; - text-decoration: none; - vertical-align: middle; - } -.button:hover { - border-top-color: #78e072; - background: #78e072; - color: #000000; - } - </style> + <link href='css/cssreset.css' rel='stylesheet' type='text/css'/> + <link href='css/style.css' rel='stylesheet' type='text/css'/> + <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> + <link href='css/jeremy.css' rel='stylesheet' type='text/css' /> </head> <body> + <div id='intro'> + <div id='intro-inner'> + <img src="img/athena.gif" /> + </div> + </div> <img src='http://asdf.us/im/8d/imgrid_1324285217_imgrid_1324210455_imgrid_1324210353_gradient_darkseagreencyan_1317343959___.png' style='position:fixed; top:-200px; z-index:-100;'></img> -<div style='font-size:30px; margin-top:20px;margin-left:20px;'>IMGRID</div> -<div style="font-size:12px;margin-left:20px;margin-bottom:20px;">3D-GRID-PLANE GENERATOR</div> - -<!--<h2 id="use">USE:</h2> - <div id="controls"> - <h2>I. THE FLAT PLANE - <span id="swingleft" >II. THE 3D PLANE (forthcoming) - <br> CLICK TO OPEN JAVA APPLET</span></h2>--> - +<div class="blurb" >IMGRID</div> +<div class="blurb-lower">3D-GRID-PLANE GENERATOR</div> +<form id='theform'> <div id="flatcontrols"> -<table><tr><td style="background-color:white">3D OPTIONS</td></tr></table> -<br> -<table style="width:100%"> +<table> + <tr> + <td class='dimensionsmore'>3D OPTIONS</td> + <td> <div id='dimensionsplug' class='dimensionsmore'>+</div></td></tr> + </tr> +</table> +<br/> +<table class="dimensions"> <tr><td>SWING <input id='swing' type='text' value='0'></input></td></tr> <tr id="swingslider" class="slider"></tr> <tr><td>TILT <input id='tilt' type='text' value='0'></input></td></tr> <tr id="tiltslider" class="slider"></tr> <tr><td>ROLL <input id='roll' type='text' value='0'></input></td></tr> <tr id="rollslider" class="slider"></tr> - <tr><td>ZOOM <input id='zoom' type='text' value='0'></input></td></tr> - <tr id="zoomslider" class="slider" value='0'></tr></table><table> + <tr><td>ZOOM  (in/out)  <input id='zoom' type='text' value='0'></input></td></tr> + <tr id="zoomslider" class="slider" value='0'></tr> </table> -<br> -<br> +<br/> +<br/> <table> -<tr style="background-color:white"><td>GRAPHIC OPTIONS</td> +<tr class="options"><td>GRAPHIC OPTIONS</td> <td> <div id='threedmore'>+</div></td></tr> </table> <table> - <tr class='threedadj'><td>GRID THICKNESS:</td> + <tr class='gridadj'><td>GRID THICKNESS:</td> <td><input id='line-thickness' type='text' value='1'></td><td><span style="font-size:12px">PX  </span></input></td></tr> - <tr class='threedadj'><td>GRID COLOR:</td> + <tr class='gridadj'><td>GRID COLOR:</td> <td><input id='line-color' type='text' value='BLACK'></input></td> <td><a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></td> </tr> - <tr class='threedadj'> + <tr class='gridadj'> <td>GRID OPACITY: </td> <td><input id='line-opacity' type='text' value='1'></input></td> <td class="slider" style="margin:0;padding:0;"id="opacity-slider"></td> </tr> - <tr class='threedadj'> + <tr class='gridadj'> <td>GRID SPACING: </td> <td><input id='line-spacing' type='text' value='0'></input></td> <td class="slider" style="margin:0;padding:0;" id="spacing-slider"></td></tr> - <tr class='threedadj'><td>USE ONLY VERTICAL LINES</td><td><input type="checkbox" id="v-lines" value="false"></input></td></tr> + <tr class='gridadj'><td>USE ONLY VERTICAL LINES</td><td><input type="checkbox" id="v-lines" value="false"></input></td></tr> - <tr class='threedadj'><td>USE ONLY HORIZONTAL LINES</td><td><input type="checkbox" id="h-lines" value="false" ></input></td></tr> + <tr class='gridadj'><td>USE ONLY HORIZONTAL LINES</td><td><input type="checkbox" id="h-lines" value="false" ></input></td></tr> </table> <table> - <tr class='threedadj'><td>USE IMAGE INSTEAD OF GRID</td> + <tr class='gridadj'><td>USE IMAGE INSTEAD OF GRID</td> <td><input type="text" class="urlinput" type="text" id="imageinstead" value="">IMG URL eg:http://ww...</input></td> </tr></table> -<table class='threedadj'><td>GRID BACKGROUND COLOR <input type="text" id="bg-color" value="none"></td><td><a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></input></td> +<table class='gridadj'><td>GRID BACKGROUND COLOR <input type="text" id="bg-color" value="none"></td><td><a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></input></td> </table> <table> - <tr class='threedadj'><td>OR GRID BACKGROUND IMAGE</td> + <tr class='gridadj'><td>OR GRID BACKGROUND IMAGE</td> <td><input class="urlinput" type="text" id="bg-image" value="">IMG URL eg:http://ww...</input></td></tr> </table> <table> - <tr class='threedadj'><td>GRID-TRANSITION</td> + <tr class='gridadj'><td>GRID-TRANSITION</td> <td><select id="transition"> <option selected="selected" value='background'>none</option> <option value="dither">dithered</option> @@ -253,7 +135,7 @@ button { </table> <table> - <tr class='threedadj'><td>DROP SHADOW</td><td><input type='checkbox' id='shadow' value='false'</input></td></tr> + <tr class='gridadj'><td>DROP SHADOW</td><td><input type='checkbox' id='shadow' value='false'</input></td></tr> </table> @@ -290,73 +172,125 @@ button { <option value='jpg'>JPG</option> </select></td></tr></table> <br> +<!--<table>--> +<!-- <tr><td>USERNAME</td><td><input type=text value="" id='username'></input></td></tr>--> +<!--</table>--> <table> + <tr><td> </td></tr> + <tr><td>USERNAME</td><td><input type=text value="" id='username'></input></td><td><div class='linksmore' id='linksplug'>+</div></td> +<td> <div id='links' class='links'> + <a class='links' href="http://asdf.us/im/gallery">PHOTOBLASTER GALLERY</a><br> + <a class='links' href="http://asdf.us/imgrid/greatgrids/">THE GREAT GRIDS GALLERY</a><br> + <a class='links' href="http://asdf.us/im">MAIN PHOTOBLASTER EDITOR</a></br> +<div id="fb-root"></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="false" colorscheme="light" font="" style="background-color: transparent;"></fb:like> + + </div> + +</td></tr></table> - <tr><td>USERNAME</td><td><input type=text value="" id='username'></input></td></tr> -</table> <br> <table> <button id="generate">GENERATE</button> -<!--<input type="reset" value="Reset Form">--> </div> </div> +</form> <div id='result'> - <span id="output-cmd" class='results'>click generate or hit enter to get your 2D plane</span> + <span id="output-cmd" class='results'>click generate or hit enter to get your 2D plane + </span> <span id="output-img" class='results'></span> <input id="output-url" class='results'></input> <div id="output-info" class='results'></div> </div> -<div id="likebutton"> -<br> -<!--<div id="fb-root" style="position:fixed; bottom:10px; right:10px;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="false" colorscheme="light" font="" style="background-color: transparent;"></fb:like> ---> - - - -<h5 style="position:fixed; bottom:10px; left:10px;">COPYRIGHT 2011 PEPPER DREAMTEAMER</h5> -<div id="intro" style="background-color:white"> -<div id="athena"><img src="img/athena.gif"></img></div> -</div> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> -<script type="text/javascript" src="js/css/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> +<link rel="stylesheet" type="text/css" href="/im/colors/css/jquery.fancybox.css?v=2.1.5" media="screen" /> +<script type="text/javascript" src="js/colors_iframe.js"></script> +<script type='text/javascript' src="js/intro.js"></script> <script type="text/javascript" src="js/sliders.js"></script> -<script type="text/javascript">$('#intro').remove();</script> -<!--<script type="text/javascript" src="intro.js">--> <script type="text/javascript" src="js/main.js"></script> -<!--<script src="popup.js" type="text/javascript"></script>--> -<!--<script type="text/javascript" src="picker.js"></script>--> <script type='text/javascript'> - threedmoreclicked = 'false'; - $('#threedmore').click(function(){ - $('.threedadj').toggle('300') + linksclicked = 'false'; + $('#linksplug').click(function(){ + $('.links').toggle('300') + + if(linksclicked === 'false'){ + $('#linksplug').html('-') + $('.links').css({'min-width':'275px','word-space':'nowrap','min-height':'100px'}) + linksclicked = 'true' + } + else{ + $('#linksplug').html('+') + $('#links').css('padding','0px'); + linksclicked = 'false' + } + $('.copyright').hide() + $("body,html").scrollTop(5000); + }) + + gridmoreclicked = 'false'; + $('.gridmore').click(function(){ + $('.gridadj').toggle('300') - if(threedmoreclicked === 'false'){ - $('#threedmore').html('-') - threedmoreclicked = 'true' + if(gridmoreclicked === 'false'){ + $('#gridplug').html('-') + $('#thegrid').css('padding','5px'); + gridmoreclicked = 'true' + $("html,body").scrollTop(1000); } else{ - $('#threedmore').html('+') - threedmoreclicked = 'false' + $('#gridplug').html('+') + $('#thegrid').css('padding','0px'); + gridmoreclicked = 'false' } - }) - imageoptionsmoreclicked = 'false'; - $('#imageoptionsmore').html('+'); - $('#imageoptionsmore').click(function(){ - $('.imageoptions').toggle('300') - if(imageoptionsmoreclicked === 'false'){ - $('#imageoptionsmore').html('-') - imageoptionsmoreclicked = 'true' + $('.copyright').hide() + }) + + + + backgroundmoreclicked = 'false'; + $('#backgroundplug').html('+'); + $('.backgroundmore').click(function(){ + $('.background').toggle('300') + if(backgroundmoreclicked === 'false'){ + $('#thebackground').css('padding','5px'); + $('#backgroundplug').html('-') + $("html,body").scrollTop(1000); + backgroundmoreclicked = 'true' } else{ - $('#imageoptionsmore').html('+') - imageoptionsmoreclicked = 'false' + $('#backgroundplug').html('+') + $('#thebackground').css('padding','0px'); + backgroundmoreclicked = 'false' } - + $('.copyright').hide() }); + + + dimensionsmoreclicked = 'false'; + $('#dimensionsplug').html('+'); + $('.dimensionsmore').click(function(){ + $('.dimensions').toggle('300') + if(dimensionsmoreclicked === 'false'){ + $('#dimensionsplug').html('-') + $('#thedimensions').css('padding','5px'); + $("html,body").scrollTop(1000); + dimensionsmoreclicked = 'true' + } + else{ + $('#dimensionsplug').html('+') + $('#thedimensions').css('padding','0px'); + dimensionsmoreclicked = 'false' + } + $('.copyright').hide() + }); + + $('#bg-color').click(function(){ nonecheck = $('#bg-color').val() if(nonecheck === 'none') @@ -364,6 +298,16 @@ button { $('#bg-color').val('') } }); + function clearbg() + { + $('#planebgcolor').val(""); + } + $('#planebgimage, #planebgcolor').click(function(){clearbg()}); + $('#planebgcolor').click(function(){clearbg}); +$('#line-color, #bg-color, #skycolor').click(function(){ + $(this).val(""); +}) </script> +<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script> </body> </html> diff --git a/share/frontend/imgrid/jmd.html b/share/frontend/imgrid/jmd.html deleted file mode 100755 index 62bd743..0000000 --- a/share/frontend/imgrid/jmd.html +++ /dev/null @@ -1,346 +0,0 @@ -<!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" dir="ltr"> -<html> -<!--JMD DOT HTML --> -<!-- - * pepper * - *** and *** - **** JMD **** - * ****** internet CHAMPIONS ****** * - * *************************************** * - ** * ______*______ * ** - ***** * ______*______ * ***** - ******* ______*______ ******* - *** **** * **** *** - ****** *oo******* *** *******oo* ****** - * *o********* *********o* * - * * * * - * * _ _ * * - * * -_ _- * * - * * -_ _- * * - * * -___- * * - * * - ********************* - * ** ** * - * ** ** * - * _-----_ * - ********* - ---> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - <meta name="description" content="IMGRID A 3D GRID-PLANE GENERATOR" > - <meta name="keywords" content="photoblaster, 3D" > - <meta name=Author content="Pepper Dreamteamer - 2011 www.facebook.com/AAAFFF"> - <link rel="shortcut icon" href="http://asdf.us/imgrid/favicon.ico"> - <link rel="image_src" href="http://vfile.com/public/img/1.png" > - <meta property="og:title" content="imgrid" /> - <meta property="og:type" content="website" /> - <meta property="og:url" content="http://asdf.us/imgrid" /> - <meta property="og:site_name" content="IMGRID - A 3D-GRID-PLANE GENERATOR" /> - <title>IMGRID - a 3D GRID-PLANE GENERATOR</title> - - <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" /> - <link href="colorpixx.css" rel="stylesheet" type="text/css" /> - <link href='main2.css' rel='stylesheet' type='text/css' /> - <link href='css/jquery-ui-1.8.16.custom.css' rel='stylesheet' type='text/css' /> - <link href='cssreset.css' rel='stylesheet' type='text/css'/> - <style type='text/css'> - body - { - font-family:georgia, Arial; - font-size:10pt; - } - h1 - { - font-size:18px; - width:50%; - margin:10px; - padding:10px; - } - #flatcontrols - { - width:40%; - margin:10px; - padding:10px; - } - .lineadj{display:none;} - .threedadj{display:none;} - .gridbgadj{display:none;} - .imageoptions{display:none;} - .results - { - display:none; - position:relative; - z-index:-100; - } - #output-url - { - z-index:100; - width:500px; - } - .slider - { - background-color:#eee5de; - display:inline-block; - width:50%; - } - #opacity-slider - { - width:100%; - display:inline-block; - margin-right:0; - margin-left:0; - } - input - { - width:70px; - } - .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default - { - background-color:#555; - } - #result - { - position:fixed; - left:50%; - top:20px; - } - #output-url - { - width:100%; - } - .urlinput - { - width:60%; - } - a - { - background-color:white; - max-width:100px; - } - a:link - { - color: black; - } - a:visited - { - COLOR: black; - } - a:hover - { - COLOR: black; - } - a:active - { - COLOR: black; - } - #threedplug, #imageoptionsplug - { - font-size:20px; - text-align:center; - } - .threedmore, .imageoptionsmore - { - cursor:pointer; - } - table - { - empty-cells: show; - } -button { - background: white; - color: #000000; - font-size: 18px; - font-family: Georgia, serif; - text-decoration: none; - vertical-align: middle; - } -.button:hover { - border-top-color: #78e072; - background: #78e072; - color: #000000; - } - </style> -</head> -<body> -<img src='http://asdf.us/im/8d/imgrid_1324285217_imgrid_1324210455_imgrid_1324210353_gradient_darkseagreencyan_1317343959___.png' style='position:fixed; top:-200px; z-index:-100;'></img> -<div style='font-size:30px; margin-top:20px;margin-left:20px;'>IMGRID</div> -<div style="font-size:12px;margin-left:20px;margin-bottom:20px;">3D-GRID-PLANE GENERATOR</div> - - <div id="flatcontrols"> -<table><tr><td>3D OPTIONS</td></tr></table> -<br> -<table style="width:100%"> - <tr><td>SWING <input id='swing' type='text' value='0'></input></td></tr> - <tr id="swingslider" class="slider"></tr> - <tr><td>TILT <input id='tilt' type='text' value='0'></input></td></tr> - <tr id="tiltslider" class="slider"></tr> - <tr><td>ROLL <input id='roll' type='text' value='0'></input></td></tr> - <tr id="rollslider" class="slider"></tr> - <tr><td>ZOOM <input id='zoom' type='text' value='0'></input></td></tr> - <tr id="zoomslider" class="slider" value='0'></tr></table><table> - <tr><td> </td></tr> - <tr><td>CROP WHITESPACE</td><td><input type="checkbox" id="trim" value="false"></input></td></tr> - -</table> -<br> -<br> -<table> -<tr><td class='threedmore'>GRAPHIC OPTIONS  </td> - <td> <div id='threedplug' class='threedmore'>+</div></td></tr> - </table> - <table> - <tr><td> </td></tr> - - <tr class='threedadj'><td>GRID THICKNESS:</td> - <td><input id='line-thickness' type='text' value='1'></td><td><span style="font-size:12px">PX  </span></input></td></tr> - - <tr class='threedadj'><td>GRID COLOR:</td> - <td><input id='line-color' type='text' value='BLACK'></input></td> - <td><a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></td> - </tr> - - - <tr class='threedadj'> - <td>GRID OPACITY: </td> - <td><input id='line-opacity' type='text' value='1'></input></td> - <td class="slider" style="margin:0;padding:0;"id="opacity-slider"></td> - </tr> - - <tr class='threedadj'> - <td>GRID SPACING: </td> - <td><input id='line-spacing' type='text' value='0'></input></td> - <td class="slider" style="margin:0;padding:0;" id="spacing-slider"></td></tr> - - <tr class='threedadj'><td>USE ONLY VERTICAL LINES</td><td><input type="checkbox" id="v-lines" value="false"></input></td></tr> - - <tr class='threedadj'><td>USE ONLY HORIZONTAL LINES</td><td><input type="checkbox" id="h-lines" value="false" ></input></td></tr> - </table> - - -<table> - <tr class='threedadj'><td>USE IMAGE INSTEAD OF GRID</td> - <td><input type="text" class="urlinput" type="text" id="imageinstead" value="">IMG URL eg:http://ww...</input></td> - </tr></table> -<table class='threedadj'><td>GRID BACKGROUND COLOR <input type="text" id="bg-color" value="none"></td><td><a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></input></td> - - </table> - <table> - <tr class='threedadj'><td>OR GRID BACKGROUND IMAGE</td> - <td><input class="urlinput" type="text" id="bg-image" value="">IMG URL eg:http://ww...</input></td></tr> - </table> - -<table> - <tr class='threedadj'><td>GRID-TRANSITION</td> - <td><select id="transition"> - <option selected="selected" value='background'>none</option> - <option value="dither">dithered</option> - <option value="noise">noise</option> - <option value="tile">infinite</option> - </select></td></tr> - -</table> - <table> - <tr class='threedadj'><td>DROP SHADOW</td><td><input type='checkbox' id='shadow' value='false'</input></td></tr> - - -</table> - - -<br> - - <table> - <tr><td class="imageoptionsmore">IMAGE OPTIONS  </td> - <td><div id="imageoptionsplug" class="imageoptionsmore">+</div></td> - </tr> - </table> - <tr><td> </td></tr> - <table class='imageoptions'><td>BACKGROUND COLOR  </td><td><input type="text" value="transparent" id="planebgcolor"></input></td> - <td>  <a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></td> </table> - <table> - - <tr class='imageoptions'><td>OR BACKGROUND IMAGE  </td><td><input class='urlinput' type="text" value="" id="planebgimage">IMG URL eg:http://ww...</input></td></tr> - </table> - - <table><tr class='imageoptions'><td>SKYCOLOR  </td><td><input type="text" value="none" id="skycolor"> for the area above the horizon-line</input>  </td> - <td><a href="http://asdf.us/im/colors.html" target="_blank">COLOR LIST</a></td> - </tr> - <tr class="imageoptions"><td>HEIGHT</td> - <td> <input id='img-height' type='text' value='500'><span style="font-size:12px">PX</span></input></td></td> - - <tr class="imageoptions"><td>WIDTH</td> - <td><input id='img-width' type='text' value='700'><span style="font-size:12px">PX</span></input></td></td></table> -<table> - <tr class="imageoptions"><td>IMAGE FORMAT</td><td> - <select id='format'> - <option selected='selected' value='png'>PNG</option> - <option value='gif'>GIF</option> - <option value='jpg'>JPG</option> - </select></td></tr></table> - <br> -<table> - - <tr><td>USERNAME   </td><td><input type=text value="" id='username'></input></td></tr> -</table> -<br> -<table> -<button id="generate">GENERATE</button> - -</div> - -<div id='result'> - <span id="output-cmd" class='results'>click generate or hit enter to get your 2D plane</span> - <span id="output-img" class='results'></span> - <input id="output-url" class='results'></input> - <div id="output-info" class='results'></div> -</div> -<div id="likebutton"> -<br> - - - -<h5 style="position:fixed; bottom:10px; left:10px;" id='copyright'>COPYRIGHT 2011 PEPPER DREAMTEAMER</h5> -<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> -<script type="text/javascript" src="js/css/jquery-ui-1.8.16.custom.min.js"></script> -<script type="text/javascript" src="js/sliders.js"></script> -<script type="text/javascript" src="js/main.js"></script> -<script type='text/javascript'> - threedmoreclicked = 'false'; - $('.threedmore').click(function(){ - $('.threedadj').toggle('300') - - if(threedmoreclicked === 'false'){ - $('#threedplug').html('-') - threedmoreclicked = 'true' - } - else{ - $('#threedplug').html('+') - threedmoreclicked = 'false' - } - $('#copyright').hide(); - }) - imageoptionsmoreclicked = 'false'; - $('#imageoptionsplug').html('+'); - $('.imageoptionsmore').click(function(){ - $('.imageoptions').toggle('300') - if(imageoptionsmoreclicked === 'false'){ - $('#imageoptionsplug').html('-') - imageoptionsmoreclicked = 'true' - } - else{ - $('#imageoptionsplug').html('+') - imageoptionsmoreclicked = 'false' - } - $('#copyright').hide(); - }); - $('#bg-color').click(function(){ - nonecheck = $('#bg-color').val() - if(nonecheck === 'none') - { - $('#bg-color').val('') - } - }); -</script> -</body> -</html> diff --git a/share/frontend/imgrid/js/main.js b/share/frontend/imgrid/js/main.js index fc130e4..f8141eb 100755 --- a/share/frontend/imgrid/js/main.js +++ b/share/frontend/imgrid/js/main.js @@ -14,7 +14,7 @@ var Main = if (Main.generating) return Main.generating = true - var theloader = '<span style="width:100%;margin-right:40%"><img style="width:140px;height:120px;display:inline;" src="../img/generating.gif"></img></span>' + var theloader = '<span style="width:100%;margin-right:40%"><img style="width:140px;height:120px;display:inline;" src="img/generating.gif"></img></span>' $("#output-cmd").html(theloader).show() if($('#transition :selected').val() === 'tile'||$('#transition :selected').val()=== 'random') { |