Increase Program Efficiency

s956142 · Apr 18, 2024 · dff0057 · dff0057
1 parent f178d90
commit dff0057
Show file tree

Hide file tree

Showing 2 changed files with 225 additions and 111 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,18 @@
         margin: 0px auto;
         padding: 5px;
         position: relative;
+        background-color: #FFFFF4;
+
+      }
+      .flex-row{
+        display: flex;
+        flex-direction: row;
+      }
+      .align-center{
+        align-items: center;
+
       }
+
       .ta-l {
         text-align: left;
       }
@@ -31,6 +42,9 @@
       .fs-16 {
         font-size: 16px;
       }
+      .fs-20 {
+        font-size: 20px;
+      }
       .inline-div {
         display: inline-block;
         position: relative;
@@ -44,15 +58,23 @@
         display: none;
       }
       .score-board {
-        background-color: #FFFFF4;
-        height: 620px;
-        width: 110px;
         vertical-align: top;
       }
 
       .mt-10 {
         margin-top: 10px;
       }
+      .mr-2 {
+        margin-right: 2px;
+      }
+      .operation-intro{
+        display:flex;
+        flex-direction: column;
+        border: 1px solid #181804;
+        border-radius: 4px;
+        padding: 10px;
+
+      }
     </style>
   </head>
 
@@ -71,15 +93,44 @@
         <div class="inline-div score-board fs-16 ta-l">
           <div class="mt-10">分數: <span id="score-number">0</span></div>
           <div class="mt-10">Combo: <span id="combo-number">0</span></div>
-          <span>Next</span>
+
+
+
+          <div class="mt-10">Next</div>
           <div class="preview ta-c">
             <canvas class="mt-10" id="preview-canvas" width="100" height="100"></canvas>
           </div>
-          <span>Hold</span>
+          <div class="mt-10">Hold</div>
           <div class="preview ta-c">
             <canvas class="mt-10" id="hold-canvas" width="100" height="100"></canvas>
           </div>
+
+          <div class="operation-intro mt-10">
+            <div class="flex-row align-center">
+              <span class="mr-2">移動:</span>
+              <div class="fs-20 flex-row">
+                <span class="mr-2">↓ </span>
+                <span class="mr-2">←</span>
+                <span class="mr-2">→</span>
+              </div>
+            </div>
+            <div class="mt-10 flex-row align-center">
+              <span class="mr-2"> hold/pause:</span>
+
+              <div class="fs-20 flex-row">
+                <span class="mr-2">⇧</span>
+                <span class="mr-2">/</span>
+                <span class="mr-2">P</span>
+              </div>
+            </div>
+            <div class="mt-10 flex-row align-center  ">
+
+              <span class="mr-2">速降:</span>
+              <span>  space</span>
+            </div>
+          </div>
         </div>
+
       </div>
     </div>
     <script src="index.js"></script>