Added navigation buttons

index.css

@@ -20,16 +20,16 @@ body {
 
 #toolbar.toolbar-closed {
   height: 10px;
-  background-color: red;
+  background-color: rgba(255, 255, 255, 0.2);
   transition-duration: 0.5s;
 }
 
 #toolbar.toolbar-open {
   height: 50px;
   background-color: black;
   transition-duration: 0.5s;
-
 }
+
 #toolbar.toolbar-closed>.toolbar-button {
   opacity: 0;
   height: 4px !important;
@@ -44,16 +44,30 @@ body {
 
 .toolbar-button {
   display: inline-block;
-  min-width: 34px;
-  height: 34px;
-  margin: 3px;
-  padding: 5px;
-  border-radius: 10px;
-  background-color: rgba(255, 0, 0, 0.5);
-  line-height: 34px;
+  min-width: 50px;
+  height: 50px;
+  line-height: 50px;
   text-align: center;
+  background-position: center;
+  background-size: 30px;
+  background-repeat: no-repeat;
+  filter: invert(100%);
+  transition-duration: 1s;
 }
 
 .toolbar-button:hover {
-  background-color: rgba(255, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+#back-button {
+  background-image: url("https://image.flaticon.com/icons/svg/126/126492.svg");
+}
+
+#reload-button {
+  background-image: url("https://image.flaticon.com/icons/svg/109/109450.svg");
+}
+
+#forward-button {
+  background-image: url("https://image.flaticon.com/icons/svg/126/126492.svg");
+  transform: rotateY(180deg);
 }

index.html

@@ -10,10 +10,12 @@
 	<link rel="stylesheet" type="text/css" href="./index.css">
 
 	<div id="toolbar">
-		<div class="toolbar-button">Button</div>
+		<div id="back-button" class="toolbar-button"></div>
+		<div id="reload-button" class="toolbar-button"></div>
+		<div id="forward-button" class="toolbar-button"></div>
 	</div>
 
-	<div id="loading-text">
+	<div id="loading-text" style="z-index: 0; z-index: 0; position: absolute; top: 50%; left: 50%; font-size: 32px; transform: translate(-50%, -50%); opacity: 1;">
 		Loading...
 	</div>
 
@@ -29,6 +31,19 @@
 		const loadingText = $("#loading-text");
 		const toolbar = $("#toolbar");
 
+		// Set up the toolbar buttons.
+		var backButton = $("#back-button");
+		backButton.on("click", () => {
+			window.history.back();
+		});
+		var reloadButton = $("#reload-button");
+		reloadButton.on("click", () => {
+			window.location.reload();
+		});
+		var forwardButton = $("#forward-button");
+		forwardButton.on("click", () => {
+			window.history.forward();
+		});
 
 		// Change the height of the webview when the toolbar is hovered.
 		closeToolbar();