mods on starter
authorOscar J. Rodriguez B <josuer08@gmail.com>
Wed, 6 Nov 2019 19:14:54 +0000 (15:14 -0400)
committerOscar J. Rodriguez B <josuer08@gmail.com>
Wed, 6 Nov 2019 19:14:54 +0000 (15:14 -0400)
src/views/starter.ejs
styles/starter.css [new file with mode: 0644]

index 01b83278f1dd3d2eb4a99485b82be695da6886a8..10988092443b910c57c4627afbe4edde0d2c7afd 100644 (file)
@@ -5,58 +5,8 @@
   <title></title>
   <!-- <link rel="stylesheet" type="text/css" href="/styles/main.css" /> -->
   <%include ../../partials/head%>
-  <style media="screen">
-    body {
-      display: flex;
-      flex-flow: row wrap;
-    }
-
-    main {
-      width: 100%;
-      flex-grow: 2;
-    }
-
-    aside {
-      flex-grow: 1;
-    }
-
-    footer {
-      position: absolute;
-      top: 100%;
-    }
-
-    .buttons {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      padding: 0;
-    }
-
-    button {
-      flex-grow: 1;
-      border: 0;
-      border-bottom: 2px black solid;
-      overflow: hidden;
-      width: 15em;
-      background-color: white;
-      transition: background-color 0.3s ease-in, color 0.3s ease-in;
-    }
-
-    button:hover {
-      background-color: darkgrey;
-      color: white
-    }
-
-    textarea {
-      width: 25%;
-      font-size: 1.5em;
-      overflow: auto;
-      height: 15em;
-      background-color: rgba(255, 255, 255, 0.8);
-      padding: 0;
-      margin: 0;
-    }
-  </style>
+  <link rel="stylesheet" type="text/css" href="/styles/starter.css" />
+
 </head>
 <header>
   <%include ../../partials/header%>
 <body>
 
   <main>
-    <div class="buttons">
-      <button type="button" name="button" onclick="startvsorc()">Iniciar VsoRc</button>
-      <button type="button" name="button" onclick="stopvsorc()">Detener VsoRc</button>
-      <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
-      <button type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
+    <div class="side">
+
+      <div class="panel">
+        <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: H1:S1"></textarea>
+        <div class="buttons">
+          <button type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
+          <button type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
+          <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
+          <button type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
+        </div>
+      </div>
+
+      <div class="panel">
+        <textarea class="text" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del sistema de consola"></textarea>
+        <div class="buttons">
+          <button type="button" name="button" onclick="startvsorc()">Ping all</button>
+          <button type="button" name="button" onclick="stopvsorc()">Placement</button>
+          <button type="button" name="button" onclick="startcontroller()">Iperf3</button>
+        </div>
+      </div>
+
     </div>
-    <textarea rows="20" cols="7" id="comandos"></textarea>
+
+    <div class="side">
+
+      <div class="panel">
+        <textarea class="text" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del controlador"></textarea>
+      </div>
+
+      <div class="panel">
+
+      </div>
+
+    </div>
+
     <script type="text/javascript">
       let topo = document.getElementById('comandos') //Donde van escrito el DSL
 
       }
     </script>
   </main>
-  <aside class="">
-    <div class="statuscontroller">
-
-    </div>
-    <div class="statusproyect">
-
-    </div>
-  </aside>
 </body>
 <footer>
   <%include ../../partials/footer%>
diff --git a/styles/starter.css b/styles/starter.css
new file mode 100644 (file)
index 0000000..bec7a31
--- /dev/null
@@ -0,0 +1,57 @@
+
+main {
+  width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+footer {
+  position: absolute;
+  top: 110%;
+}
+.side{
+  width: 50%
+}
+.panel{
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 1em;
+  border: 1px #AA55AA dashed;
+}
+.text{
+  width: 80%
+}
+.buttons {
+
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  justify-content: space-between;
+}
+
+button {
+  flex-grow: 1;
+  border: 0;
+  border-bottom: 2px black solid;
+  overflow: hidden;
+  background-color: white;
+  transition: background-color 0.3s ease-in, color 0.3s ease-in;
+}
+
+button:hover {
+  background-color: darkgrey;
+  color: white
+}
+
+textarea {
+  font-size: 1.5em;
+  overflow: auto;
+  height: 15em;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-right: 2px black solid;
+}