add blinking buttons and navigation

TimBorowy · May 3, 2019 · 2d94a0d · 2d94a0d
1 parent 7a196e2
commit 2d94a0d
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 3 deletions.
diff --git a/public/css/instructions.css b/public/css/instructions.css
@@ -1,16 +1,15 @@
 * {
     box-sizing: border-box;
-    color: white;
     font-family: sans-serif;
 }
 body {
     margin: 0;
 }
 
 header {
+    color: white;
     margin: 0;
     background: rgb(93, 138, 168);
-    //box-shadow: 0px 2px 2px 0px black;
     padding: 20px 30px;
 }
 header h1{
@@ -21,6 +20,44 @@ main{
     margin: 30px;
 }
 
+footer{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+}
+
+.flex-container{
+    display: flex;
+    align-content: center;
+    justify-content: center;
+}
+
+#continue, #back{
+    margin: 10px;
+    width: 100px;
+    text-align: center;
+}
+
+#continue{
+    opacity: 1;
+    animation: blink 2s ease-in-out infinite;
+}
+
+
+@keyframes blink {
+    0%{
+        opacity: 1;
+    }
+    50%{
+        opacity: 0.3;
+    }
+    100%{
+        opacity: 1;
+    }
+}
+
 .st0 {
     fill: none;
 }
@@ -58,4 +95,16 @@ main{
 
 .st8 {
     font-size: 14px;
+}
+
+.continue-btn {
+    fill: #FFFFFF;
+    stroke: #454241;
+    stroke-width: 1.4173;
+    stroke-miterlimit: 10;
+}
+
+
+.back-btn {
+    fill: #F7DB21;
 }
diff --git a/views/instructions.hbs b/views/instructions.hbs
@@ -244,20 +244,63 @@
                 <text transform="matrix(1 0 0 1 463.5246 380.6668)" class="st1 st5">8</text>
             </svg>
         </main>
+        <footer class="flex-container">
+
+            <div id="back">
+
+
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px" y="0px" viewBox="0 0 69.8 34.5" style="enable-background:new 0 0 69.8 34.5;" xml:space="preserve">
+                    <g>
+                        <path class="back-btn" d="M65.3,26.1H4.7c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8h60.6c2.1,0,3.8-1.7,3.8-3.8
+		C69.1,27.8,67.4,26.1,65.3,26.1z" />
+                        <path class="back-btn" d="M16.9,22.6h36.2c1.9,0,3.5-1.6,3.5-3.5v-1.9c0-9.2-7.4-16.6-16.6-16.6H30c-9.2,0-16.6,7.4-16.6,16.6v1.9
+		C13.4,21.1,15,22.6,16.9,22.6z" />
+                    </g>
+                </svg>
+                <p>Terug</p>
+
+            </div>
+
+            <div id="continue">
+
+
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px" y="0px" viewBox="0 0 69.8 34.5" style="enable-background:new 0 0 69.8 34.5;" xml:space="preserve">
+                    <g>
+                        <path class="continue-btn" d="M65.3,26.1H4.7c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8h60.6c2.1,0,3.8-1.7,3.8-3.8
+		C69.1,27.8,67.4,26.1,65.3,26.1z" />
+                        <path class="continue-btn" d="M16.9,22.6h36.2c1.9,0,3.5-1.6,3.5-3.5v-1.9c0-9.2-7.4-16.6-16.6-16.6H30c-9.2,0-16.6,7.4-16.6,16.6v1.9
+		C13.4,21.1,15,22.6,16.9,22.6z" />
+                    </g>
+                </svg>
+                <p>Doorgaan</p>
+
+            </div>
+        </footer>
     </div>
 </body>
 
 <script>
+    var map = [];
     document.onkeypress = function (e) {
         e = e || window.event;
         var charCode = e.keyCode || e.which;
         var charStr = String.fromCharCode(charCode);
 
         // If one of the keys are pressed, redirect to the
-        if (charStr == 'p' || charStr == 'b') {
+        if (charStr == 'e' || charStr == 'k') {
             window.location.replace('{{ game.url }}');
         }
+
+        // If one of the keys are pressed, redirect to the
+        if (charStr == 'f' || charStr == 'l') {
+            window.location.replace('http://localhost:8080')
+        }
+
     };
+
+
 </script>
 
 </html>