From d610bf2958051aab3003e27511530afe5aaf1633 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sat, 5 Sep 2020 18:38:17 +0200
Subject: [PATCH] Tutorials

---
 WebServer/index.html | 56 ++++++++------------------------------------
 WebServer/main.css   | 40 +++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/WebServer/index.html b/WebServer/index.html
index bf5e33c25..8748033ad 100644
--- a/WebServer/index.html
+++ b/WebServer/index.html
@@ -48,59 +48,23 @@
     <div id="inputDiv" style="font-family:saira condensed;">&nbsp;</div>
 
     <!-- Tutorial Step Template -->
-    <div id="tutorialStepDiv" class="tutorial-step" style="position:fixed; top:100000px; left:100000px;">
-
-        <div>
-            <h1 class="tutorial-saira-large">Trading Engine</h1>
-        </div>
-        <div>
-            <div class="tutorial-summary">Summary</div>
-            <h2 class="tutorial-saira-medium">Sub-Title</h2>
-            <table class="tutorial-definitionTable">
+    <div id="tutorialDiv" class="tutorial-step" style="position:fixed; top:100000px; left:100000px;"></div>
+    <div id="tutorialFormDiv" class="tutorial-form" style="position:fixed; top:100000px; left:100000px;">
+        <form>
+            <table class="tutorial-buttonsTable">
                 <tr>
                     <td>
-                        <img width="150" height="150" src="Images/Icons/style-01/crypto-exchanges.png" />
+                        <label class="tutorial-stop-button" onclick="canvas.tutorialSpace.stop()" value="">Stop Tutorial</label>
                     </td>
                     <td>
-                        <strong class="tutorial-saira-bold-small">The trading engine hierarchy is t ible and exposed to others.</strong>
+                        <label class="tutorial-skip-button" onclick="canvas.tutorialSpace.skip()" value="">Skip / Later</label>
+                    </td>
+                    <td>
+                        <label class="tutorial-done-button" onclick="canvas.tutorialSpace.done()" value="">Done / Next</label>
                     </td>
                 </tr>
             </table>
-            <p class="tutorial-saira-small">You will use th purposes:</p>
-            <ul>
-                <li>
-                    <p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">To let your trading systems:</strong> This allows stratrunning.</p>
-                </li>
-                <li>
-                    <p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">To keep track of the actions:</strong> By analyzing runtiading session.</p>
-                </li>
-            </ul>
-            <p class="tutorial-saira-small">The hierarchyusers.</p>
-            <div class="tutorial-saira-bold-small tutorial-callout" > callout text.</div>
-            <p class="tutorial-saira-small">The hiera feedback capabilities to users.</p>
-            <div class="tutorial-saira-bold-small tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> Esto es una nota, algonoteworthy.</div>
-            <div class="tutorial-saira-bold-small tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> Esto es un tip. </div>
-            <div class="tutorial-saira-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> Esto es  algo importante.</div>
-            <div class="tutorial-saira-bold-small tutorial-alert-danger" role="alert"><i class="tutorial-fa tutorial-exclamation-circle"></i> <b>Warning:</b>  Esto es una aviso de alerta.</div>
-            <form>
-                <table class="tutorial-buttonsTable">
-                    <tr>
-                        <td>
-                            <label class="tutorial-stop-button" id="stopTutorial" onclick="canvas.tutorialSpace.stopTutorial()" value="">Stop Tutorial</label>
-                        </td>
-                        <td>
-                            <input id="skipTopic" type="submit" formaction="/action_two" value="Skip Topic">
-                        </td>
-                        <td>
-                            <input id="skipStep" type="submit" formaction="/action_three" value="Skip Step">
-                        </td>
-                        <td>
-                            <input id="tutotialStepDone" type="submit" formaction="/action_four" value="Done">
-                        </td>
-                    </tr>
-                </table>
-              </form>
-        </div>
+          </form>
     </div>
 </body>
 
diff --git a/WebServer/main.css b/WebServer/main.css
index 4767aecc0..e36a3c9a9 100644
--- a/WebServer/main.css
+++ b/WebServer/main.css
@@ -24,6 +24,12 @@
   background-color: #fdfdfd;
 }
 
+.tutorial-form {
+  padding: 15px;
+  margin-bottom: 20px;
+  width: 115%;
+}
+
 .tutorial-summary {
   font-size:120%;
   color: #808080;
@@ -177,4 +183,38 @@
   margin: 20px 0;
   border-top-color: #e4b9c0;
   width: 20%;
+}
+
+.tutorial-skip-button {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #f7e1b5;
+  width: 20%;
+}
+
+.tutorial-done-button {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #c9e2b3;
+  width: 20%;
+}
+
+.tutorial-buttonsTable {
+  border-top-color: #a6e1ec;
+  padding: 15px;
+  margin: 20px 0;
+  border: solid 0px;
+  vertical-align: middle;
+  min-width: 100px;
+  width: 115%;
 }
\ No newline at end of file