diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index 6e5289a..07ff414 100644
--- a/SmearcarDB/static/index.css
+++ b/SmearcarDB/static/index.css
@@ -1,3 +1,4 @@
+/* Layout Elements and General Formatting */
html {
width: 100%;
height: 100%;
@@ -12,17 +13,18 @@ body {
display: grid;
grid-template-columns: 13% auto;
grid-template-rows: 8% auto;
+ overflow: hidden;
}
h1,h2,h3,h4,h5,p {
margin: 0;
}
-.colorFade {
- -webkit-transition: background-color 0.3s ease;
- -moz-transition: background-color 0.3s ease;
- -ms-transition: background-color 0.3s ease;
- transition: background-color 0.3s ease;
+.transition {
+ -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+ -moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+ -ms-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+ transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
#header1 {
@@ -64,7 +66,7 @@ h1,h2,h3,h4,h5,p {
}
.navi:hover {
- background-color: rgba(255,255,255,0.1);
+ background-color: rgba(255,255,255,0.1) !important;
}
.navi i {
@@ -83,5 +85,52 @@ h1,h2,h3,h4,h5,p {
#mainContainer {
grid-column: 2;
grid-row: 2;
- background-color: #FEFEFF;
+ padding: 2vh;
+ background-color: #F8F3F0;
+ overflow-y: auto;
}
+
+.card {
+ background-color: #FEFEFE;
+ box-shadow: 1px 1px 1px 1px #000;
+ border-radius: 2px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.card:hover {
+ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+/* Main Body */
+
+#home, #dataValues, #files, #updates {
+ width: 100%;
+ height: 100%;
+ display: none;
+ opacity: 0;
+ grid-gap: 2vh;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 2fr 4fr 4fr;
+ transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+#home {
+ display: grid;
+ opacity: 1;
+}
+
+#langSelect {
+ grid-column: 1;
+ grid-row: 1;
+}
+
+#dataInfo {
+ grid-column: 2;
+ grid-row: 1;
+}
+
+#dataTable {
+ grid-column: 1 / 3;
+ grid-row: 2;
+}
\ No newline at end of file
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index 36a85b0..a35e8ca 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -1,13 +1,22 @@
-var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text].
- ["bar-chart", "Data Values"],
- ["database", "Database and Files"],
- ["bell", "Updates and Progress"]
+var navSelect = "home";
+
+var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
+ ["home", "Home", "home"],
+ ["bar-chart", "Data Values", "dataValues"],
+ ["database", "Database and Files", "files"],
+ ["bell", "Updates and Progress", "updates"]
];
for(var i = 0; i < navi.length; i++) { // Create navigation tabs.
var side = document.getElementById("sidebar");
var div = document.createElement("div");
- div.className = "navi colorFade";
+ div.className = "navi transition";
+ div.setAttribute("option", navi[i][2]);
+ div.onclick = function() {
+ var op = this.getAttribute("option");
+ if(navSelect === op) return;
+ updateMain(op);
+ };
var ic = document.createElement("i");
ic.className = "fa fa-"+navi[i][0];
ic["aria-hidden"] = true;
@@ -18,3 +27,26 @@ for(var i = 0; i < navi.length; i++) { // Create navigation tabs.
side.appendChild(div);
}
+updateNav(navSelect);
+
+function updateMain(op) {
+ updateNav(op);
+ document.getElementById(navSelect).style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById(navSelect).style.display = "none";
+ document.getElementById(op).style.display = "grid";
+ setTimeout(function() {
+ document.getElementById(op).style.opacity = "1";
+ }, 30);
+ navSelect = op;
+ }, 300);
+}
+
+function updateNav(op) {
+ var oldNav = document.querySelectorAll("[option="+navSelect+"]")[0];
+ var newNav = document.querySelectorAll("[option="+op+"]")[0];
+ oldNav.style.backgroundColor = "rgba(0,0,0,0)";
+ oldNav.style.color = "white";
+ newNav.style.backgroundColor = "#F8F3F0";
+ newNav.style.color = "#F47922";
+}
diff --git a/SmearcarDB/static/resources/favicon.ico b/SmearcarDB/static/resources/favicon.ico
new file mode 100644
index 0000000..5bcf53d
Binary files /dev/null and b/SmearcarDB/static/resources/favicon.ico differ
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index 09d338b..bd05af7 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -3,10 +3,13 @@
SmearcarDB
-
+
+
+
+