Navbar for the GUI

bae78463 · Franco (nextime) Lanza · 2308deed · bae78463
Commit bae78463 authored Jan 13, 2018 by Franco (nextime) Lanza
Hide whitespace changes
Inline Side-by-side

Showing with 123 additions and 3 deletions

page.html Web/resources/page.html +123 -3

No files found.
--- a/Web/resources/page.html
+++ b/Web/resources/page.html
@@ -2,14 +2,14 @@
 <head>
 <title>Penguidom GUI</title>
   <meta charset="UTF-8" />
-   <meta name="viewport" content="width=device-width, initial-scale=0.85, maximum-scale=0.85, minimum-scale=0.85, user-scalable=no" />
-   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=0.85" />
+   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

 <style>
 body {
    background: none repeat scroll 0 0 #FBFBFB;
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
-    font-size: 12px;
+    font-size: 18px;
    height: 100%;
    line-height: 1.4em;
    margin: 0;
@@ -21,11 +21,131 @@ body {
   background-color: #000 !important;
 }

+/* Style the navbar */
+#navbar {
+  overflow: hidden;
+  background-color: #333;
+}
+
+/* Navbar links */
+#navbar a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px;
+  text-decoration: none;
+}
+
+/* Page content */
+.content {
+  padding: 16px;
+}
+
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+  padding-top: 60px;
+}
+
+
+.column {
+    float: left;
+    width: 33.33%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+    content: "";
+    display: table;
+}
+
+#navbar #navbtnl {
+   float: left;
+   width: 115px;
+   height: 38px;
+   border: solid 1px #f2f2f2;
+   border-radius: 10px;
+   margin: 6px 6px 6px 6px;
+}
+
+#navbar #navbtnl a {
+   position: fixed;
+   margin-left:30px;
+   top: 0px;
+}
+
+#navbar #navbtnr a {
+   position: fixed;
+   margin-right:30px;
+   top: 0px;
+}
+
+#navbar #navbtnr {
+   float: right; 
+   width: 115px;
+   height: 38px;
+   border: solid 1px #f2f2f2;
+   border-radius: 10px;
+   margin: 6px 6px 6px 6px;
+}
+
+#navbar #navcntr {
+   position: fixed;
+   width: 100%;
+   margin-right: 90px;
+   margin-left: 90px;
+   left: -105px;
+   text-align: center;
+   color: #f2f2f2;
+   padding: 14px;
+
+}
+
+div .menubtn {
+   padding-top: 6px;
+   padding-right: 8px;
+   padding-left: 8px;
+}
+
+div .menubtn div {
+    width: 25px;
+    height: 3px;
+    background-color: #f2f2f2;
+    margin: 4px 0; 
+}

 </style>
 @SCRIPT@
 </head>
 <body class="tblack">
+<div id="navbar" class="row">
+  <div id="navbtnl">
+      <div class="menubtn">
+         <div></div>
+         <div></div>
+         <div></div>
+      </div>
+      <a href="#">plugins</a>
+   </div>
+   <div id="navcntr">
+      <b>Penguidom 0.1</b>
+   </div>
+   <div id="navbtnr">
+      <div class="menubtn" style="float:right;">
+         <div></div>
+         <div></div>
+         <div></div>
+      </div>
+      <a href="#">options</a>
+   </div>
+</div>
 <div id="content" class="tblack" >
   @CONTENT@
 </div>