diff --git a/tomcat/webapps/Trawl/about.html b/tomcat/webapps/Trawl/about.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e5b1c7bb61002993ccff95ff4a508a77d1c6d9d
--- /dev/null
+++ b/tomcat/webapps/Trawl/about.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="keywords" content="insert, some, keywords"> <!--TODO-->
+ <meta name="description" content="insert a description"> <!--TODO-->
+ <title>About|TrawlTool</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+
+ <!--Fonts-->
+ <!--Open Sans Rg-400/Semi-600/Bd-700-->
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+</head>
+<body>
+ <header>
+ <div class="headerWrapper">
+ <a href="index.jsp" >TrawlTool</a>
+ <span class="nav-bar">
+ <a href="about.html">About</a> |
+ <a href="index.jsp" target="_blank">Gitlab/Github Nonfunc!</a>
+ </span>
+ </div>
+ </header>
+
+ <section>
+ Insert some info about the project, blah blah blah.<br>
+ Add photo credit if applicable
+ </section>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index da43e5220270a050411b058855ccf427ef9bcdd0..1403ebcd0f0e3e8d8e10f4ad80f263aa1e6d07f7 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/tomcat/webapps/Trawl/index.jsp
@@ -13,7 +13,6 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
<title>TrawlTool</title>
<link rel="stylesheet" type="text/css" href="style.css">
-
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@@ -30,82 +29,70 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
</head>
<body>
<header>
- <a href="index.html" >TrawlTool</a>
+ <div class="headerWrapper">
+ <a href="index.jsp" >TrawlTool</a>
+ <span class="nav-bar">
+ <a href="about.html">About</a> |
+ <a href="index.html" target="_blank">Gitlab/Github Nonfunc!</a>
+ </span>
+ </div>
</header>
- <span id="menu-bar">
- <a href="index.html">About</a> |
- <a href="index.html" target="_blank">Gitlab/Github</a>
- </span>
- <section id="formWrapper">
- <section id="pickSciRanks">
- <%--<form method="POST" action="doBioLookup.do"> <!--.do extension is not necessary. This field is the servlet's url in web.xml-->--%>
- <form>
+ <section id="main">
+ <section id="formWrapper">
+ <section id="pickSciRanks">
Phylum:
- <%--<select name="pickPhy" size="1" onChange="this.form.submit()">--%>
- <select name="pickSciR" id="pickPhylum" size="1" onChange="changedSciR('phylum')">
-
- </select>
+ <select name="pickSciR" id="pickPhylum" size="1" onChange="changedSciR('phylum')"><!--Dynamically Filled--></select>
Class:
- <select name="pickSciR" id="class" size="1" onChange="changedSciR('class')">
- <option>SomeClass</option>
- </select>
-
- Order:
- <select name="order" size="1" onChange="alert()">
+ <select name="pickSciR" id="pickClass" size="1" onChange="changedSciR('class')">
<option value="00">Arthropoda</option>
<option value="01">Chordata</option>
<option value="03">Mollusca</option>
</select>
-
+ Order:
+ <select name="pickSciR" size="1" onChange="alert()"><!--Dynamically Filled--></select>
Family:
- <select name="family" size="1">
- </select>
-
+ <select name="pickSciR" size="1"><!--Dynamically Filled--></select>
Genus:
- <select name="genus" size="1">
- </select>
-
+ <select name="pickSciR" size="1"><!--Dynamically Filled--></select>
Species:
- <select name="species" size="1">
-
- </select>
- <!--<input type="SUBMIT">-->
- </form>
+ <select name="pickSciR" size="1"><!--Dynamically Filled--></select>
+ </section>
+
+ <section id="yearIn">
+ Year Range:
+ <span id="fromtoYear">InnerHtml</span>
+ <form>
+ <div id="slider-range"></div>
+ </form>
+ </section>
+
+ <section id="outputIn">
+ <%--Map and Histogram must have the same name for default checkbox to function correctly--%>
+ <input type="radio" name="pickOutput" value="map"> Map
+ <input type="radio" name="pickOutput" value="histogram" checked> Histogram
+ <button type="button" onclick="">Load</button>
+ <button type="button" onclick="">View Individual Records</button> <!--To records.html-->
+ </section>
</section>
- <section id="yearIn">
- Year Range:
- <span id="fromtoYear">InnerHtml</span>
- <form>
- <!--<input type="number" id="fromYear" class="yearN" value="2000" min="1960" max="2016" oninput="brightN()">-->
- <div id="slider-range"></div>
- </form>
- </section>
- <section id="outputIn">
- <form>
- <!--TODO: Set Default button entered-->
- <input type="radio" value="map"> Map
- <input type="radio" value="histogram"> Histogram
- <input type="submit">
- </form>
- <form method="POST" action=""">
- <input type="submit" value="Individual Records"> <!--To records.html-->
- </form>
+ <section id="outputWrapper">
+ <section id="outputDetails">Stuff like population count, entries found, etc. go here</section>
+ <section id="outputBox">Map, Histogram Box. Histogram selected by default but we might want to have a loading screen instead.
+ <div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>
+ </section>
</section>
</section>
-
- <section id="outputWrapper">
- <section id="outputDetails">Stuff like population count, entries found, etc. go here</section>
- <section id="outputBox">Map, Histogram Box</section>
- <section id="console">~~~ PSEUDO-CONSOLE ~~~<br></section>
- </section>
-
<%--<footer>--%>
<%--Footer--%>
<%--</footer>--%>
</body>
</html>
+
+ <%--Notes--%>
+ <%--http://www.color-hex.com/color/002856--%>
+ <%--http://www.color-hex.com/color-palette/58262--%>
+
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index b72c722a718f9ba5240e343b21cb94506c309697..971596ece4fbcc2657e34f8c46c9dd84254db6c3 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/tomcat/webapps/Trawl/script.js
@@ -41,11 +41,11 @@ function post(path, params) {
function getChildren(id) {
document.getElementById("console").innerHTML += "In | getChildren()<br>"; //TODO: Console REMOVEME
var nodeList;
- // nodeList = {
- // "taxonId":[1821,51,1065],
- // "taxonName":["Chordata","Mollusca","Arthropoda"]
- // };
- nodeList = post('doBioLookup.do', { taxid: id}); // {taxid: intID}
+ nodeList = {
+ "taxonId":[1821,51,1065],
+ "taxonName":["Chordata","Mollusca","Arthropoda"]
+ };
+ //nodeList = post('doBioLookup.do', { taxid: id}); // {taxid: intID}
return nodeList;
}
diff --git a/tomcat/webapps/Trawl/style.css b/tomcat/webapps/Trawl/style.css
index 1ee1b8825188212affe40fdcd0a3dfd03e6b02e0..133e068a5bb6922116eda9b73127c441a6a5ed92 100644
--- a/tomcat/webapps/Trawl/style.css
+++ b/tomcat/webapps/Trawl/style.css
@@ -1,34 +1,76 @@
+#console{
+ border: 1px solid grey;
+ background-color: lightgrey;
+ /*display: none;*/
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-decoration: none;
+}
+html{
+ min-height: 100%;
+ background-image: url("res/background2-2.jpg");
+ background-size: cover; /*Covers the page, some parts of the image may be hidden*/
+ background-position: center; /*Centers image vertically and horizontally*/
+ background-attachment: fixed; /*Whether the background scrolls with the page*/
}
header{
- font-size: 28px;
- font-weight: 600;
+ font-size: 28px;
+ font-weight: 700;
+ border: 1px solid #002856; /*TODO: Replace this Hack which fills the whole box w. background color*/
+ background-color: #002856;
+ color: #74acd8;
}
+.headerWrapper{
+ margin: 0.5% 4%;
+ position: relative;
+}
+
+.nav-bar{
+ border: 1px solid white;
+ font-size: 18px;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+}
+
+.nav-bar>*{
+ border: 1px solid orange;
+}
+
body{
font-size: 16px;
color: #00365a;
+ width: 100%;
+ min-height: 100%;
+}
+
+#main{
+ margin: 0% 5%;
}
a{
- color: #00243c;
- font-weight: 600;
+ color: #74acd8;
+ font-weight: 700;
}
a:hover{
font-weight: 700;
- color: #004878;
+ color: #9ca8c5;
+
}
#formWrapper{
border: 1px solid;
+ margin-top: 1%;
}
#pickSci{
@@ -36,11 +78,7 @@ a:hover{
}
#yearIn{
- border: 1px solid sandybrown;
-}
-
-.yearN{
-
+ width: 80%;
}
#outputIn{
@@ -49,6 +87,8 @@ a:hover{
#outputWrapper{
border: 1px solid grey;
+ height: 100%;
+ margin-top: 3%;
}
#outputDetails{
@@ -57,6 +97,7 @@ a:hover{
#outputBox{
border: 1px solid darkred;
+ min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/
}
/*300/400/600/700*/