From e5a6bd25bdd4d55bb76ccbae0b92659e9d267a27 Mon Sep 17 00:00:00 2001
From: pepperpepperpepper <pepper@scannerjammer.com>
Date: Thu, 19 Nov 2015 10:27:57 -0800
Subject: still cleaning...about to review

---
 share/frontend/imgrid/index.html | 230 ++++++---------------------------------
 1 file changed, 33 insertions(+), 197 deletions(-)

(limited to 'share/frontend/imgrid/index.html')

diff --git a/share/frontend/imgrid/index.html b/share/frontend/imgrid/index.html
index 81c1d40..beac798 100755
--- a/share/frontend/imgrid/index.html
+++ b/share/frontend/imgrid/index.html
@@ -42,187 +42,10 @@
 		<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='jquery-ui-1.8.16.custom.css' rel='stylesheet' type='text/css' />
-		<link href='cssreset.css' rel='stylesheet' type='text/css'/>
+		<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'>
-		<style type='text/css'>
-			body
-				{
-				font-family: 'Varela Round', sans-serif;
-				font-size:10pt;
-				}
-				h1
-				{
-				font-size:18px;
-				width:50%;
-				margin:10px;
-				padding:10px;
-				}
-			#flatcontrols
-				{
-				width:40%;
-				margin:10px;
-				padding:10px;
-				}
-			.gridadj,.background,.dimensions,.links
-				{
-				display:none;
-				}
-			#thegrid,#thedimensions,#thebackground,#links
-				{
-				background-color:whitesmoke;
-				margin-left:20px;
-				-moz-box-shadow: 0px 0px 9px 3px #8B7D7B;
-				-webkit-box-shadow: 0px 0px 9px 3px #8B7D7B;
-				box-shadow: 0px 0px 9px 3px  #8B7D7B;
-				}
-			#links
-				{
-				line-height:2;
-				padding:10px;
-				}
-			.results
-				{
-				display:none;
-				position:relative;
-				}
-				#result
-					{
-					position:fixed;
-					left:50%;
-					top:20px;
-					padding-right:15px;
-					}
-				#output-img img
-					{
-					max-height:70%;
-					max-width:100%;
-					}
-				#output-url
-					{
-					width:100%;
-					}
-				.slider
-					{
-					background-color:#eee5de;
-					display:inline-block;
-					width:50%;
-					}
-				#opacity-slider, #spacing-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;
-				}
-			.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;
-					}
-				table tr
-					{
-//					border: solid 2px;
-					}
-				.gridmore, .backgroundmore, .dimensionsmore, .linksmore
-					{
-					cursor:pointer;
-					}
-				#gridplug,#backgroundplug,#dimensionsplug,#linksplug
-					{
-					font-size:20px;
-					text-align:center;
-					}
-button {
-   background: white;
-	 cursor:pointer;
-   color: #000000;
-   font-size: 18px;
-   font-family: Georgia, serif;
-   text-decoration: none;
-   vertical-align: middle;
-   }
-.button:hover {
-	 cursor:pointer;
-   border-top-color: #78e072;
-   background: #78e072;
-   color: #000000;
-   }
-table
-		{
-		empty-cells:show;
-		}
-.generate
-		{
-		position:absolute;
-		left:320px;
-		top:240px;
-				-moz-box-shadow: 0px 0px 9px 3px pink;
-				-webkit-box-shadow: 0px 0px 9px 3px pink;
-				box-shadow: 0px 0px 9px 3px pink;
-		}
-#intro
-    {
-    position:absolute;
-    top:0px;
-    left:0px;
-    width:100%;
-    height:100%;
-    background-image:url(img/background.gif);
-    }
-#intro-inner
-    {
-    background-image:url(img/background.gif);
-    z-index:1000;
-    height:inherit;
-    width:inherit;
-    position:fixed;
-    left:50%;
-    top:20px;
-    }
-#bros-pic-wrapper
-    {
-    cursor: pointer;
-    }
-#bros-pic
-    {
-    position:fixed;
-    top:-200px;
-    z-index:-100;
-    }
-		</style>
 </head>
 <body>
 			<div id='intro'>
@@ -231,14 +54,14 @@ table
 			  </div>
       </div>
 
-<a id="bros-pic-wrapper" href="http://asdf.us/imgrid/index.html" style:'cursor:pointer'>
-  <img id="bros-pic" src='img/bros.png' style='' />
-  <div style='font-size:30px;'>
-    <img style="width:500px" src="img/imgrid.png" />
+<a id="bros-pic-wrapper" href="http://asdf.us/imgrid/index.html">
+  <img id="bros-pic" src='img/bros.png'  />
+  <div>
+    <img class="banner" src="img/imgrid.png" />
   </div>
 </a>
 
-<div style="font-size:12px;margin-left:20px;margin-bottom:20px;">IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows
+<div class="blurb">IMGRID - stretch images from the web in 3 dimensions, draw lines and make drop shadows
 <br>
 hit enter or click GENERATE to get your perspective-plane
 
@@ -255,12 +78,20 @@ hit enter or click GENERATE to get your perspective-plane
 			<div id='thedimensions'>
 			<table class='dimensions'>
 					<tr><td>HEIGHT</td>
-					<td>	<input id='img-height' type='text' value='500'><span style="font-size:12px">PX</span></input></td></td>
+					<td>	<input id='img-height' type='text' value='500'><span class="big">PX</span></input></td></td>
+
 					<tr><td>WIDTH</td>
-					<td><input id='img-width' type='text' value='700'><span style="font-size:12px">PX</span></input></td></td>
-			<tr style="line-height:10px"><td>&nbsp</tr><td>
+					<td>
+            <input id='img-width' type='text' value='700'>
+              <span class="big">PX</span>
+            </input>
+          </td>
+<!--          </td>-->
+			<tr class="buffer">
+        <td>&nbsp</tr>
+      <td>
 			</table>
-<table style="width:100%" class="dimensions">
+<table  class="dimensions">
 			<tr><td>SWING&nbsp<input id='swing' type='text' value='0'></input></td></tr>
 				<tr id="swingslider" class="slider"></tr>
 			<tr><td>TILT&nbsp<input id='tilt' type='text' value='0'></input></td></tr>
@@ -298,8 +129,13 @@ hit enter or click GENERATE to get your perspective-plane
 			</tr></table>
 	<table class='gridadj'>
 			<tr><td>GRID THICKNESS:</td>
-			<td><input id='line-thickness' type='text' value='1'></input></td><td>PX</td>
-					<td style="width:140px; height: .8em; margin:0; padding:0;" class="slider" style="margin:0;padding:0;" id="line-thickness-slider"></td>
+			<td>
+        <input id='line-thickness' type='text' value='1'></input>
+      </td>
+      <td>PX
+      </td>
+			<td class="slider"  id="line-thickness-slider">
+      </td>
 					</tr>
 			
 					<tr class='gridadj'><td>GRID COLOR:</td>
@@ -312,13 +148,13 @@ hit enter or click GENERATE to get your perspective-plane
 						<tr class='gridadj'>
 							<td>GRID OPACITY: </td>
 						<td><input id='line-opacity' type='text' value='1'></input></td>
-						<td style="width:140px; height: .8em; margin:0; padding:0;" class="slider" style="margin:0;padding:0;"id="opacity-slider"></td>
+						<td  class="slider" id="opacity-slider"></td>
 						</tr>
 
 						<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>
+						<td class="slider" id="spacing-slider"></td></tr>
 								
 						<tr class='gridadj'><td>USE ONLY VERTICAL LINES</td><td><input type="checkbox" id="v-lines" value="false"></input></td></tr>
 									
@@ -352,7 +188,7 @@ hit enter or click GENERATE to get your perspective-plane
 </div>
 
 
-		<table style='width:150px;'>
+		<table id="bg-table" >
 				<tr><td class="backgroundmore">BACKGROUND</td>
 					<td><div id="backgroundplug" class="backgroundmore">+</div></td>
 					</tr>
@@ -378,7 +214,7 @@ hit enter or click GENERATE to get your perspective-plane
 	<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" style="position:fixed; bottom:10px; right:10px;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="false" colorscheme="light" font="" style="background-color: transparent;"></fb:like>
+<div id="fb-root"></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="false" colorscheme="light" font="" style="background-color: transparent;"></fb:like>
 	
 	</div>
 
@@ -405,11 +241,11 @@ hit enter or click GENERATE to get your perspective-plane
 
 <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/jquery-ui-1.8.16.custom.min.js"></script>
+<script type="text/javascript" src="js/css/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="colors_iframe.js"></script>
+<script type="text/javascript" src="js/colors_iframe.js"></script>
 <script type='text/javascript'> 
 $(document).ready(function()
 	{
-- 
cgit v1.2.3-70-g09d2