minor changes for preliminar test

diff --git a/partials/footer.ejs b/partials/footer.ejs
new file mode 100644 (file)
index 0000000..fe010e6
--- /dev/null
+++ b/partials/footer.ejs
@@ -0,0 +1,2 @@
+<!-- views/partials/footer.ejs -->
+<p class="text-center text-muted">© Copyright 2020 Oscar Josue Rodriguez Blanco</p>

diff --git a/partials/head.ejs b/partials/head.ejs
new file mode 100644 (file)
index 0000000..91b80ed
--- /dev/null
+++ b/partials/head.ejs
@@ -0,0 +1,145 @@
+<!-- views/partials/head.ejs -->
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="UTF-8">
+<title>VSoRC</title>
+<!-- CSS (load bootstrap from a CDN) -->
+<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
+<title>Oscar J Rodriguez B</title>
+<link rel='stylesheet' href='/stylesheets/style.css' />
+<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
+<style>
+  body {
+    padding-bottom: 50px;
+  }
+ /* de aca para abajo es para el hamburguer*/
+  a {
+    text-decoration: none;
+    color: #232323;
+
+    transition: color 0.3s ease;
+  }
+
+  a:hover {
+    color: tomato;
+  }
+
+  #menuToggle {
+    display: block;
+    position: relative;
+    top: 5px;
+    left: 15px;
+
+    z-index: 1;
+
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  #menuToggle input {
+    display: block;
+    width: 40px;
+    height: 32px;
+    position: absolute;
+    top: -7px;
+    left: -5px;
+
+    cursor: pointer;
+
+    opacity: 0;
+    /* hide this */
+    z-index: 2;
+    /* and place it over the hamburger */
+
+    -webkit-touch-callout: none;
+  }
+
+  /*
+ * Just a quick hamburger
+ */
+  #menuToggle span {
+    display: block;
+    width: 33px;
+    height: 4px;
+    margin-bottom: 5px;
+    position: relative;
+
+    background: #cdcdcd;
+    border-radius: 3px;
+
+    z-index: 1;
+
+    transform-origin: 4px 0px;
+
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+      background 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+      opacity 0.55s ease;
+  }
+
+  #menuToggle span:first-child {
+    transform-origin: 0% 0%;
+  }
+
+  #menuToggle span:nth-last-child(2) {
+    transform-origin: 0% 100%;
+  }
+
+  /*
+ * Transform all the slices of hamburger
+ * into a crossmark.
+ */
+  #menuToggle input:checked~span:nth-last-child(4) {
+    transform: translate(-6px, 8px) rotate(-45deg) scale(0.4, 0.8);
+    background: #ffcdcd;
+  }
+
+  /*
+ * But let's hide the middle one.
+ */
+  #menuToggle input:checked~span:nth-last-child(3) {
+    transform: translate(-5px, 0px) rotate(0deg) scale(0.7, 0.7);
+    background: #ffcdcd;
+  }
+
+  /*
+ * Ohyeah and the last one should go the other direction
+ */
+   #menuToggle input:checked~span:nth-last-child(2) {
+    transform: translate(-4px, -11px) rotate(45deg) scale(0.4, 0.8);
+    background: #ffcdcd;
+  }
+
+  /*
+ * Make this absolute positioned
+ * at the top left of the screen
+ */
+  #menu {
+    position: absolute;
+    width: 300px;
+    margin: -100px 0 0 -50px;
+    padding: 50px;
+    padding-top: 125px;
+    height:120vh;
+    background: #343a40;
+    list-style-type: none;
+    -webkit-font-smoothing: antialiased;
+    /* to stop flickering of text in safari */
+
+    transform-origin: 0% 0%;
+    transform: translate(-100%, 0);
+
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+  }
+
+  #menu li {
+    padding: 0.5rem 0;
+    font-size: 1.5rem;
+    color: white;
+  }
+
+  /*
+ * And let's slide it in from the left
+ */
+  #menuToggle input:checked~ul {
+    transform: none;
+  }
+</style>

diff --git a/partials/header.ejs b/partials/header.ejs
new file mode 100644 (file)
index 0000000..ad5fc2d
--- /dev/null
+++ b/partials/header.ejs
@@ -0,0 +1,23 @@
+<nav role="navigation" class="navbar">
+<div id="menuToggle">
+  <input type="checkbox" />
+
+  <span></span>
+  <span></span>
+  <span></span>
+
+  <ul id="menu">
+    <a href="/health"><li>Health</li></a>
+    <a href="/topology"><li>View topology</li></a>
+    <a href="/stats"><li>Flow Tables</li></a>
+    <a href="/"><li>Topology Starter</li></a>
+    <a href="/access"><li>Documentation</li></a>
+    <a style= "display: flex;" href="https://github.com/josuer08/VSoRC" target="_blank"><li>GitHub web</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a>
+    <a style= "display: flex;" href="https://github.com/josuer08/vsorcdistro" target="_blank"><li>GitHub distro</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a>
+
+  </ul>
+</div>
+<form class="form-inline">
+  <button class="btn-outline-success" type="button" onclick="location.href = '/';">VSoRC</button>
+</form>
+</nav>

diff --git a/views/index.ejs b/views/index.ejs
index 2233b277c7368bc07e7ca021d11d33c45cdab517..96d9ac63d1646db333205587185a9b0470e0ab66 100644 (file)
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Oscar J Rodriguez B</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <%include ../partials/head%>
   </head>
   <body>
+    <header>
+      <%include ../partials/header%>
+    </header>
+    <div class="jumbo">
+
+    </div>
     <h1><%= title %></h1>
     <p>Welcome to <%= title %></p>
   </body>
+  <footer>
+    <%include ../partials/footer%>
+  </footer>
 </html>