summaryrefslogtreecommitdiff
path: root/share/frontend/imgrid/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'share/frontend/imgrid/index.html')
-rwxr-xr-xshare/frontend/imgrid/index.html230
1 files changed, 33 insertions, 197 deletions
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()
{
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-24 12:18:12 +0000