<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%>
--- /dev/null
+
+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;
+}