From 579de95fc68f39d085c6b41c9aa49458c06f4de4 Mon Sep 17 00:00:00 2001
From: Doveliyuchen <yl6394@nyu.edu>
Date: Wed, 8 Mar 2023 15:03:17 +0800
Subject: [PATCH] Update GameTutorial.html

---
 templates/GameTutorial.html | 49 ++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 12 deletions(-)
diff --git a/templates/GameTutorial.html b/templates/GameTutorial.html
index d0b94bf..a05917e 100644
--- a/templates/GameTutorial.html
+++ b/templates/GameTutorial.html
@@ -3,7 +3,8 @@
 <html lang="en">
 <script
   id="allow-copy_script">(function t() { var t = !1; document.addEventListener("allow_copy", (function (n) { t = n.detail.unlock })); var n = ["copy", "cut", "contextmenu", "selectstart", "mousedown", "mouseup", "mousemove", "keydown", "keypress", "keyup"], e = function (n) { t && (n.stopPropagation(), n.stopImmediatePropagation && n.stopImmediatePropagation()) }; n.forEach((function (t) { document.documentElement.addEventListener(t, e, { capture: !0 }) })) })()</script>
-  <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
@@ -138,11 +139,22 @@
       font-weight: 500;
       color: #1967ab;
     }
+
+    #mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0);
+      z-index: 99;
+    }
   </style>
 
 </head>
 
-<body id="aingames"><svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
+<body id="aingames">
+  <svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
     <symbol id="icon-more" viewBox="0 0 1789 1024">
       <path
         d="M658.96035216 613.49779716h-602.64317146c-5.28634405 9.51541883-9.51541883 21.14537441-13.74449354 30.66079315h602.64317154c3.17180628-9.51541883 7.40088094-20.08810594 13.74449346-30.66079315zM54.20264274 801.69162966c7.40088094 10.57268718 14.80176191 21.14537441 24.31718079 30.66079315h602.64317241c-9.51541883-10.57268718-16.91629967-20.08810594-24.31718063-30.66079315h-602.64317257zM794.29074875 425.30396468h-602.64317156c-9.51541883 9.51541883-19.03083652 20.08810594-28.54625532 30.66079311h602.6431716c9.51541883-9.51541883 19.03083652-20.08810594 28.54625528-30.66079311zM1396.93392025 484.51101309c12.687225 0 24.31718064-10.57268718 24.31718064-24.31718062 0-13.74449341-11.62995564-24.31718064-24.31718054-24.31718059-13.74449341 0-24.31718064 10.57268718-24.31718069 24.31718059 0 13.74449341 11.62995564 24.31718064 24.31718069 24.31718062z">
@@ -196,9 +208,10 @@
   </nav>
 
 
-  <section id="news">
+  <section style="background-color: rgba(255,255,255,0.5);">
 
-    <div class="container">
+    <div class="container" style="font-weight: 600;
+    background-color: rgba(255,255,255,0.7);">
 
       <div class="row clearfix">
 
@@ -212,7 +225,16 @@
           </div>
 
 
-          
+          <div id="mask" onclick="replay()"></div>
+          <script>
+            function replay(){
+            
+              $("#windowshow:hidden").show();
+
+            
+            
+            }
+          </script>
 
           <div align="center" id="GameWindow">
 
@@ -269,9 +291,12 @@
             <h3>Play Game</h3>
           </button>
         </div>
-        <div id="countdown" style="z-index:999; position:absolute; left:50px; bottom: 20px; color: #ffffff; font-size: xx-large; background-color: rgba(0, 0, 0, 0.3);"></div>
+        <div id="countdown"
+          style="z-index:999; position:absolute; left:50px; bottom: 20px; color: #ffffff; font-size: xx-large; background-color: rgba(0, 0, 0, 0.3);">
+        </div>
         <img style=" height: 90vh;bottom: 3.5vh; left: 0vw;
-            position: absolute;z-index: 900; visibility: visible; width: 100%;" src="../templates/Web/pic.png" id="windowshow">
+            position: absolute;z-index: 900; visibility: visible; width: 100%;" src="../templates/Web/pic.png"
+          id="windowshow">
         <script>
           function countdown() {
             var count = 10; // 设置倒计时秒数
@@ -281,13 +306,13 @@
                 clearInterval(timer);
                 $("#countdown").hide();
                 $("#windowshow:visible").hide(); // 倒计时结束后隐藏倒计时容器
-                
+
               } else {
-                $("#countdown").html("This instruction will close in "+ count +"s. <br>Or click to close."); // 更新倒计时容器内容
-                $("#windowshow").click(function(){
+                $("#countdown").html("This instruction will close in " + count + "s. <br>Or click to close."); // 更新倒计时容器内容
+                $("#windowshow").click(function () {
                   $("#windowshow").hide();
                   $("#countdown").hide();
-                  });
+                });
               }
             }, 1000);
           }
@@ -300,7 +325,7 @@
         <script>
           //Init Cheerpj Framework
           cheerpjInit();
-          
+
 
           var divElement = document.getElementById("GameWindow");
           var tutorialId = parseInt("{{tutorial}}")
