added jquery, animations, favicon

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 {
+.transition {
-	-webkit-transition: background-color 0.3s ease;  
+	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);  
-	-moz-transition: background-color 0.3s ease; 
+	-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
-	-ms-transition: background-color 0.3s ease;
+	-ms-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-	transition: background-color 0.3s ease; 
+	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;
 }

SmearcarDB/static/index.js

@@ -1,13 +1,22 @@
-var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text].
+var navSelect = "home";
-	["bar-chart", "Data Values"],
+
-	["database", "Database and Files"],
+var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
-	["bell", "Updates and Progress"]
+	["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";
+}

SmearcarDB/templates/index.html

@@ -3,10 +3,13 @@
 		<meta charset="utf-8">
 	    <meta http-equiv="X-UA-Compatible" content="chrome=1">
 	    <title>SmearcarDB</title>
-	    <link rel="icon" href="{{ url_for('static', filename='resources/ico/favicon.png') }}">
+	    <link rel="icon" href="{{ url_for('static', filename='resources/favicon.ico') }}">
 	    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
 	    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
 	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+	    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+	    <script src="{{ url_for('static', filename='velocity.min.js') }}"></script>
+		<script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
 	</head>
 	<body>
 		<div id="header1" class="colorFade">
@@ -17,8 +20,39 @@
 		<div id="sidebar">
 		</div>
 		<div id="mainContainer">
+			<div id="home" class="optionContainer">
+				<div id="langSelect" class="card">
+				</div>
+				<div id="dataInfo" class="card">
+				</div>
+				<div id="dataTable" class="card">
+				</div>
+			</div>
+			<div id="dataValues" class="optionContainer">
+				<div id="langSelect" class="card">
+				</div>
+				<div id="dataInfo" class="card">
+				</div>
+				<div id="dataTable" class="card">
+				</div>
+			</div>
+			<div id="files" class="optionContainer">
+				<div id="langSelect" class="card">
+				</div>
+				<div id="dataInfo" class="card">
+				</div>
+				<div id="dataTable" class="card">
+				</div>
+			</div>
+			<div id="updates" class="optionContainer">
+				<div id="langSelect" class="card">
+				</div>
+				<div id="dataInfo" class="card">
+				</div>
+				<div id="dataTable" class="card">
+				</div>
+			</div>
 		</div>
 	</body>
 	<script src="{{ url_for('static', filename='index.js') }}"></script>
-	<script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
 </html>