Merge pull request #487 from thecodingmachine/website-demo

Update website

website/dist/index.html

@@ -54,8 +54,17 @@
     <link rel="stylesheet" href="main.css">
     <script src="bundle.js"></script>
     <script>
+        function startDemo() {
+            let playUrl = window.location.protocol + "//play."+window.location.host+'/_/global/gparant.github.io/tcm-client/Demo/demo-v1.json';
+            window.open(playUrl, '_blank');
+        }
         function startGame() {
-            let playUrl = window.location.protocol + "//play."+window.location.host+"/_/global/npeguin.github.io/office-map/map.json";
+            let playUrl = window.location.protocol + "//play."+window.location.host+'/_/global/npeguin.github.io/office-map/map.json';
+            window.open(playUrl, '_blank');
+        }
+        function startConsole() {
+            //let playUrl = window.location.protocol + "//admin."+window.location.host;
+            let playUrl = 'https://admin.workadventu.re';
             window.open(playUrl, '_blank');
         }
 		function shareFB() {
@@ -114,13 +123,22 @@
                 </div>
                 <div class="row buttons-row justify-content-md-center pt-5">
                     <div class="col  col-lg-3">
-                        <a class="custom-link start" href="/choose-map.html" title="WORK IN PRIVATE">
+                        <a class="custom-link start"
-                            WORK IN PRIVATE
+                           style="padding-top: 4px;font-size: 18px;"
+                           target="_BLANK" onclick="startConsole()" title="YOUR ADVENTURE!">
+                            CREATE YOUR MAP
                         </a>
                     </div>
                     <div class="col col-lg-3">
-                        <a class="custom-link play" target="_BLANK" onclick="startGame()" title="WORK ONLINE">
+                        <a class="custom-link play" target="_BLANK" onclick="startDemo()" title="DEMO!">
-                            TRY IT NOW!
+                            TUTORIAL
+                        </a>
+                    </div>
+                </div>
+                <div style="min-height: 100px" class="row buttons-row justify-content-md-center pt-5">
+                    <div class="col col-lg-3">
+                        <a class="custom-link anonymous contribute" target="_BLANK" onclick="startGame()" title="FEEDBACK">
+                            DEMO (Anonymous)
                         </a>
                     </div>
                 </div>
@@ -169,9 +187,9 @@
             <div>
                 <p>Remote work? Friend party? Use WorkAdventure as you prefer.</p>
                 <p>Click the button below to come and say hi!</p>
-                <p class="bubble-action"><span onclick="startGame()">
+                <p class="bubble-action"><span onclick="startDemo()">
                     <img src="static/images/playicon.png" />
-                    TRY IT NOW !
+                    DEMO!
                 </span></p>
             </div>
         </div>

website/src/sass/styles.scss

@@ -27,7 +27,12 @@
 
     @return $randomNum;
 }
-
+html{
+    cursor: url('../images/cursor_normal.png'), auto;
+    a{
+        cursor: url('../images/cursor_pointer.png'), auto;
+    }
+}
 header {
     background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
     background-size: 100%;
@@ -75,7 +80,7 @@ header {
         .title {
             z-index: 3;
             position: relative;
-            padding: 5rem 0;
+            padding: 2rem 0 4rem 0;
             color: black;
             h1 {
                 font-family: 'Karmatic Arcade';
@@ -138,7 +143,7 @@ header {
 }
 
 .custom-link{
-    cursor: pointer;
+    cursor: url('../images/cursor_pointer.png'), pointer;
     font-family: "VCR OSD Mono";
     font-size: 1.125rem;
     letter-spacing: 5px;
@@ -172,9 +177,15 @@ header {
 			display: block;
 		}
     }
+    &.anonymous{
+        background-image: none;
+        color: black;
+        text-decoration: underline;
+        font-style: italic;
+    }
     &.play {
         background-image: url('../images/btn-bg-3.png');
-		cursor: pointer;
+        cursor: url('../images/cursor_pointer.png'), pointer;
     }
     &.light{
         background-image: url('../images/btn-bg-light.png');
@@ -188,7 +199,7 @@ header {
 }
 
 .social-links a {
-	cursor: pointer;
+    cursor: url('../images/cursor_pointer.png'), pointer;
 
     &:hover{
         text-decoration: none;
@@ -341,7 +352,7 @@ img{
                     margin: 0;
                 }
                 &.bubble-action {
-                    cursor: pointer;
+                    cursor: url('../images/cursor_pointer.png'), pointer;
                     text-decoration: underline
                 }