summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--share/frontend/imgrid/css/style.css16
-rwxr-xr-xshare/frontend/imgrid/jeremy.html159
2 files changed, 106 insertions, 69 deletions
diff --git a/share/frontend/imgrid/css/style.css b/share/frontend/imgrid/css/style.css
index 8c89c5d..403e54b 100644
--- a/share/frontend/imgrid/css/style.css
+++ b/share/frontend/imgrid/css/style.css
@@ -205,3 +205,19 @@ table
#bg-table{
width:150px;
}
+.j-blurb{
+ font-size: 30px;
+ margin-top: 20px;
+ margin-left: 20px;
+}
+.j-blurb-lower{
+ font-size:12px;
+ margin-left:20px;
+ margin-bottom:20px;
+}
+table.dimensions > tbody > .slider{
+ width: 100%;
+}
+#genbutton-wrapper > button{
+ margin-left: 2em;
+}
diff --git a/share/frontend/imgrid/jeremy.html b/share/frontend/imgrid/jeremy.html
index e32fdb4..48a764b 100755
--- a/share/frontend/imgrid/jeremy.html
+++ b/share/frontend/imgrid/jeremy.html
@@ -46,7 +46,7 @@
<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' />
+<!-- <link href='css/jeremy.css' rel='stylesheet' type='text/css' />-->
</head>
<body>
<div id='intro'>
@@ -56,18 +56,22 @@
</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 class="blurb" >IMGRID</div>
-<div class="blurb-lower">3D-GRID-PLANE GENERATOR</div>
+<div class="j-blurb" >IMGRID</div>
+<div class="j-blurb-lower">3D-GRID-PLANE GENERATOR</div>
+
+<div id='genbutton-wrapper'><button id='generate'>GENERATE</button></div>
+</div>
+
<form id='theform'>
<div id="flatcontrols">
<table>
<tr>
- <td class='dimensionsmore'>3D OPTIONS</td>
+ <td class='dimensionsmore'>PERSPECTIVE OPTIONS</td>
+
<td> <div id='dimensionsplug' class='dimensionsmore'>+</div></td></tr>
- </tr>
-</table>
-<br/>
-<table class="dimensions">
+ </table>
+ <div id='thedimensions'>
+<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>
@@ -77,104 +81,123 @@
<tr><td>ZOOM&nbsp (in/out) &nbsp<input id='zoom' type='text' value='0'></input></td></tr>
<tr id="zoomslider" class="slider" value='0'></tr>
+ <tr class="buffer">
+ <td>&nbsp</tr>
+ <td>
</table>
-<br/>
-<br/>
+ </div>
<table>
-<tr class="options"><td>GRAPHIC OPTIONS</td>
+<tr><td class='gridmore'>GRID OPTIONS</td>
- <td> <div id='threedmore'>+</div></td></tr>
+ <td> <div id='gridplug' class='gridmore'>+</div></td></tr>
</table>
- <table>
-
- <tr class='gridadj'><td>GRID THICKNESS:</td>
- <td><input id='line-thickness' type='text' value='1'></td><td><span style="font-size:12px">PX&nbsp&nbsp</span></input></td></tr>
+
+ <div id='thegrid'>
+ <table class='gridadj'>
+ <tr><td>GRID THICKNESS:</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>
- <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>
+ <td><input id='line-color' type='text' class="color_input line-color" value='MISTYROSE4'></input></td>
+ <td><a href="http://asdf.us/im/colors" class="color_input line-color" target="_blank">COLOR LIST</a></td>
</tr>
-
+ </table>
+ <table>
<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>
+ <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>
<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='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='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 class='gridadj'><td>GRID BACKGROUND COLOR <input type="text" class="color_input bg-color" id="bg-color" value="transparent"></td>
+ <td><a href="http://asdf.us/im/colors" class="color_input bg-color" target="_blank">COLOR LIST</a></input></td>
</table>
- <table>
- <tr class='gridadj'><td>OR GRID BACKGROUND IMAGE</td>
+ <table class='gridadj'>
+ <tr><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='gridadj'><td>GRID-TRANSITION</td>
+<table class='gridadj'>
+ <tr><td>GRID-TRANSITION</td>
<td><select id="transition">
<option selected="selected" value='background'>none</option>
<option value="dither">dithered</option>
+ <option value="random">noise</option>
<option value="tile">infinite</option>
+ <option value="edge">extended-edge</option>
</select></td></tr>
</table>
- <table>
- <tr class='gridadj'><td>DROP SHADOW</td><td><input type='checkbox' id='shadow' value='false'</input></td></tr>
-
-
-</table>
+</div>
-<br>
-
- <table>
- <tr style="background-color:white"><td>IMAGE OPTIONS</td>
- <td><div id="imageoptionsmore">+</div></td>
+ <table id="bg-table" >
+ <tr><td class="backgroundmore">IMAGE OPTIONS</td>
+ <td><div id="backgroundplug" class="backgroundmore">+</div></td>
</tr>
</table>
- <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>
+<div id='thebackground'>
+ <table class='background'>
+ <tr><td>HEIGHT</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 class="big">PX</span>
+ </input>
+ </td>
+<!-- </td>-->
+ </table>
+ <table class='background'>
+ <tr><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='background'><td>BACKGROUND COLOR</td><td><input type="text" value="transparent" class="color_input planebgcolor" id="planebgcolor"></input></td>
+ <td><a href="http://asdf.us/im/colors" class="color_input planebgcolor" target="_blank">COLOR LIST</a></td> </table>
+ <table class="background">
- <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>
+ <tr><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>
+ <table class='background'>
+ <tr><td>DROP SHADOW</td><td><input type='checkbox' id='shadow' value='false'</input></td></tr>
+</table>
+ <table class='background'><tr><td>SKYCOLOR</td><td><input type="text" class="color_input skycolor" value="none" id="skycolor">for the area above the horizon-line</input></td>
+ <td><a href="http://asdf.us/im/colors" class="color_input skycolor" 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>CROP WHITESPACE</td><td><input type="checkbox" id="trim" value="false"></input></td></tr>
- <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>-->
+ <table class='background'>
+ <tr><td>CROP WHITESPACE</td><td><input type="checkbox" id="trim" value="false"></input></td></tr>
+ </table>
+ <table class='background'>
+ <tr><td>IMAGE FORMAT</td><td>
+ <select id='format'>
+ <option selected='selected' value=''></option>
+ <option value='png'>PNG</option>
+ <option value='gif'>GIF</option>
+ <option value='jpg'>JPG</option>
+ </select></td></tr></table>
+ </table>
+
+</div>
<table>
<tr><td>&nbsp</td></tr>
<tr><td>USERNAME</td><td><input type=text value="" id='username'></input></td><td><div class='linksmore' id='linksplug'>+</div></td>
@@ -189,8 +212,6 @@
</td></tr></table>
<br>
-<table>
-<button id="generate">GENERATE</button>
</div>
@@ -199,8 +220,8 @@
</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'>
+</span>
<span id="output-img" class='results'></span>
<input id="output-url" class='results'></input>
<div id="output-info" class='results'></div>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-21 06:37:31 +0000