From ba08080ee1250f616759483f2cc1df62f9ff87b9 Mon Sep 17 00:00:00 2001
From: Raymond Yang <sdc957@gmail.com>
Date: Thu, 29 Jun 2023 10:36:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css     | 100 ++++++++++-------------
 edit.html         | 104 ++++++++++++++----------
 index.html        |   2 +-
 js/index.js       |  28 +++----
 member/edit.html  | 120 ++++++++++++++++------------
 member/index.html |   2 +-
 member/new.html   | 106 +++++++++++++-----------
 new.html          | 200 +++++++++++++++++++++++-----------------------
 8 files changed, 352 insertions(+), 310 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3bb4efa..410437c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -39,49 +39,7 @@ a:active {
 
 /* 滑鼠點選時 */
 
-h1 {
-    text-align: center;
-    font-weight: bold;
-    font-family: 'Arial Black', system-ui;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-h2 {
-    text-align: center;
-    font-weight: bold;
-    font-family: 'Arial Black', system-ui;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-h3 {
-    text-align: center;
-    font-weight: bold;
-    font-family: 'Arial Black', system-ui;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-h4 {
-    text-align: center;
-    font-weight: bold;
-    font-family: 'Arial Black', system-ui;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-h5 {
-    text-align: center;
-    font-weight: bold;
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, label {
     font-family: 'Arial', system-ui;
     margin-top: 0;
     margin-bottom: 0;
@@ -89,14 +47,9 @@ h5 {
     margin-right: 0;
 }
 
-h6 {
+.centerText {
     text-align: center;
-    /*font-weight: bold;*/
-    font-family: 'Arial', system-ui;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
+    font-weight: bold;
 }
 
 p {
@@ -112,7 +65,7 @@ input[type="text"], input[type="number"] {
     font-size: 16px;
     border-width: 1px;
     border-color: #07407d;
-    background-color: #ffffff;
+    background-color: #ffffffe0;
     color: #000000;
     box-sizing: border-box;
     border-style: solid;
@@ -129,12 +82,12 @@ input[type="date"] {
     font-size: 16px;
     border-width: 1px;
     border-color: #07407d;
-    background-color: #ffffff;
+    background-color: #ffffffe0;
     color: #000000;
     border-style: solid;
     border-radius: 5px;
-    box-shadow: 0px 0px 5px rgba(66,66,66,.75);
-    text-shadow: -50px 0px 0px rgba(66,66,66,.0);
+    /*box-shadow: 0px 0px 5px rgba(66,66,66,.75);*/
+    /*text-shadow: -50px 0px 0px rgba(66,66,66,.0);*/
     font-family: 'Arial', system-ui
 }
 
@@ -176,6 +129,40 @@ button:active {
     background: linear-gradient(to bottom, #2c6a99, #0d5da3);
 }
 
+.button_red {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 8px 20px;
+    border: 1px solid #7d0707;
+    border-radius: 8px;
+    background: #ff4a4a;
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#a30d0d));
+    background: -moz-linear-gradient(top, #ff4a4a, #a30d0d);
+    background: linear-gradient(to bottom, #ff4a4a, #a30d0d);
+    text-shadow: #591717 1px 1px 1px;
+    /*font: normal normal bold 15px arial;*/
+    font-family: 'Arial', system-ui;
+    color: #ffffff;
+    text-decoration: none;
+}
+.button_red:hover,
+.button_red:focus {
+    border: 1px solid #c80b0b;
+    background: #ff5959;
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#c41010));
+    background: -moz-linear-gradient(top, #ff5959, #c41010);
+    background: linear-gradient(to bottom, #ff5959, #c41010);
+    color: #ffffff;
+    text-decoration: none;
+}
+.button_red:active {
+    background: #992c2c;
+    background: -webkit-gradient(linear, left top, left bottom, from(#992c2c), to(#a30d0d));
+    background: -moz-linear-gradient(top, #992c2c, #a30d0d);
+    background: linear-gradient(to bottom, #992c2c, #a30d0d);
+}
+
 .center {
     width: fit-content;
     height: 40px;
@@ -185,8 +172,3 @@ button:active {
 html {
     background-image: url("../img/background.jpg");
 }
-
-label {
-    font-family: 'Arial', system-ui;
-    font-weight: bold;
-}
diff --git a/edit.html b/edit.html
index 6a434cb..064f96b 100644
--- a/edit.html
+++ b/edit.html
@@ -14,7 +14,7 @@
   </head>
 
   <body>
-    <h1 id="title">新增/修改紀錄</h1>
+    <h1 class="centerText" id="title">新增/修改紀錄</h1>
     <hr />
     <h4>填寫方式：掉刀填0，正常出刀填X周-Y王。</h4>
     <br />
@@ -23,16 +23,16 @@
     <form id="record-form">
       <table>
         <tr>
-          <td style="width: 15%;">
-            <h5>第1刀<br />正刀</h5>
+          <td style="width: 15%">
+            <h5 class="centerText">第1刀<br />正刀</h5>
           </td>
-          <td style="width: 25%;">
+          <td style="width: 25%">
             <input type="text" id="knife1_boss" placeholder="x周-y王" />
           </td>
-          <td style="width: 20%;">
-            <h5>第1刀<br />正刀傷害</h5>
+          <td style="width: 20%">
+            <h5 class="centerText">第1刀<br />正刀傷害</h5>
           </td>
-          <td style="width: 40%;">
+          <td style="width: 40%">
             <input
               type="number"
               id="knife1_damage"
@@ -41,79 +41,99 @@
           </td>
         </tr>
         <tr>
-          <td style="width: 15%;">
-            <h5>第1刀<br />殘刀</h5>
+          <td style="width: 15%">
+            <h5 class="centerText">第1刀<br />殘刀</h5>
           </td>
-          <td style="width: 25%;">
+          <td style="width: 25%">
             <input type="text" id="knife1c_boss" placeholder="x周-y王" />
           </td>
-          <td style="width: 20%;">
-            <h5>第1刀<br />殘刀傷害</h5>
+          <td style="width: 20%">
+            <h5 class="centerText">第1刀<br />殘刀傷害</h5>
           </td>
-          <td style="width: 40%;">
-            <input type="number" id="knife1c_damage" placeholder="ex: 12000000"/>
+          <td style="width: 40%">
+            <input
+              type="number"
+              id="knife1c_damage"
+              placeholder="ex: 12000000"
+            />
           </td>
         </tr>
       </table>
       <hr />
       <table>
         <tr>
-          <td style="width: 15%;">
-            <h5>第2刀<br />正刀</h5>
+          <td style="width: 15%">
+            <h5 class="centerText">第2刀<br />正刀</h5>
           </td>
-          <td style="width: 25%;">
+          <td style="width: 25%">
             <input type="text" id="knife2_boss" placeholder="x周-y王" />
           </td>
-          <td style="width: 20%;">
-            <h5>第2刀<br />正刀傷害</h5>
+          <td style="width: 20%">
+            <h5 class="centerText">第2刀<br />正刀傷害</h5>
           </td>
-          <td style="width: 40%;">
-            <input type="number" id="knife2_damage" placeholder="ex: 12000000"/>
+          <td style="width: 40%">
+            <input
+              type="number"
+              id="knife2_damage"
+              placeholder="ex: 12000000"
+            />
           </td>
         </tr>
         <tr>
-          <td style="width: 15%;">
-            <h5>第2刀<br />殘刀</h5>
+          <td style="width: 15%">
+            <h5 class="centerText">第2刀<br />殘刀</h5>
           </td>
-          <td style="width: 25%;">
+          <td style="width: 25%">
             <input type="text" id="knife2c_boss" placeholder="x周-y王" />
           </td>
-          <td style="width: 20%;">
-            <h5>第2刀<br />殘刀傷害</h5>
+          <td style="width: 20%">
+            <h5 class="centerText">第2刀<br />殘刀傷害</h5>
           </td>
-          <td style="width: 40%;">
-            <input type="number" id="knife2c_damage" placeholder="ex: 12000000"/>
+          <td style="width: 40%">
+            <input
+              type="number"
+              id="knife2c_damage"
+              placeholder="ex: 12000000"
+            />
           </td>
         </tr>
       </table>
       <hr />
       <table>
         <tr>
-          <td style="width: 15%;">
-            <h5>第3刀<br />正刀</h5>
+          <td style="width: 15%">
+            <h5 class="centerText">第3刀<br />正刀</h5>
           </td>
-          <td style="width: 25%;">
+          <td style="width: 25%">
             <input type="text" id="knife3_boss" placeholder="x周-y王" />
           </td>
-          <td style="width: 20%;">
-            <h5>第3刀<br />正刀傷害</h5>
+          <td style="width: 20%">
+            <h5 class="centerText">第3刀<br />正刀傷害</h5>
           </td>
-          <td style="width: 40%;">
-            <input type="number" id="knife3_damage" placeholder="ex: 12000000"/>
+          <td style="width: 40%">
+            <input
+              type="number"
+              id="knife3_damage"
+              placeholder="ex: 12000000"
+            />
           </td>
         </tr>
         <tr>
-          <td style="width: 15%;">
-            <h5>第3刀<br />殘刀</h5>
+          <td style="width: 15%">
+            <h5 class="centerText">第3刀<br />殘刀</h5>
           </td>
-          <td style="width: 25%;">
+          <td style="width: 25%">
             <input type="text" id="knife3c_boss" placeholder="x周-y王" />
           </td>
-          <td style="width: 20%;">
-            <h5>第3刀<br />殘刀傷害</h5>
+          <td style="width: 20%">
+            <h5 class="centerText">第3刀<br />殘刀傷害</h5>
           </td>
-          <td style="width: 40%;">
-            <input type="number" id="knife3c_damage" placeholder="ex: 12000000"/>
+          <td style="width: 40%">
+            <input
+              type="number"
+              id="knife3c_damage"
+              placeholder="ex: 12000000"
+            />
           </td>
         </tr>
       </table>
diff --git a/index.html b/index.html
index 7069fc0..4172647 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 </head>
 
 <body id="body">
-    <h1>填表系統</h1>
+    <h1 class="centerText">填表系統</h1>
     <hr>
     <!--p>
         <a href="new.html">我要填表</a>
diff --git a/js/index.js b/js/index.js
index 3dd990f..e90819c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -113,21 +113,21 @@ function getDateOfRecords() {
                 const item = data[i];
 
                 if (item.record !== null) {
-                    row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
-                    row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
-                    row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
-                    row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
-                    row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
-                    row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
-                    row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
+                    row_2_data_1.innerHTML = "<h5 class=\"centerText\"><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a></h5>";
+                    row_2_data_2.innerHTML = "<h5 class=\"centerText\">" + item.record.record1.boss + "</h5>";
+                    row_2_data_3.innerHTML = "<h5 class=\"centerText\">" + item.record.record2.boss + "</h5>";
+                    row_2_data_4.innerHTML = "<h5 class=\"centerText\">" + item.record.record3.boss + "</h5>";
+                    row_2_data_5.innerHTML = "<h5 class=\"centerText\">" + item.record.record1c.boss + "</h5>";
+                    row_2_data_6.innerHTML = "<h5 class=\"centerText\">" + item.record.record2c.boss + "</h5>";
+                    row_2_data_7.innerHTML = "<h5 class=\"centerText\">" + item.record.record3c.boss + "</h5>";
                 } else {
-                    row_2_data_1.innerHTML = "<h5>" + item.member.playerName + "</h5>";
-                    row_2_data_2.innerHTML = "<h5>---</h5>";
-                    row_2_data_3.innerHTML = "<h5>---</h5>";
-                    row_2_data_4.innerHTML = "<h5>---</h5>";
-                    row_2_data_5.innerHTML = "<h5>---</h5>";
-                    row_2_data_6.innerHTML = "<h5>---</h5>";
-                    row_2_data_7.innerHTML = "<h5>---</h5>";
+                    row_2_data_1.innerHTML = "<h5 class=\"centerText\">" + item.member.playerName + "</h5>";
+                    row_2_data_2.innerHTML = "<h5 class=\"centerText\">---</h5>";
+                    row_2_data_3.innerHTML = "<h5 class=\"centerText\">---</h5>";
+                    row_2_data_4.innerHTML = "<h5 class=\"centerText\">---</h5>";
+                    row_2_data_5.innerHTML = "<h5 class=\"centerText\">---</h5>";
+                    row_2_data_6.innerHTML = "<h5 class=\"centerText\">---</h5>";
+                    row_2_data_7.innerHTML = "<h5 class=\"centerText\">---</h5>";
                 }
 
                 row_2.appendChild(row_2_data_1);
diff --git a/member/edit.html b/member/edit.html
index e275ee9..f9d8ccb 100644
--- a/member/edit.html
+++ b/member/edit.html
@@ -1,61 +1,83 @@
 <!DOCTYPE html>
-<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
+<html
+  lang="zh-TW"
+  xmlns="http://www.w3.org/1999/html"
+  xmlns="http://www.w3.org/1999/html"
+>
+  <head>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>修改成員</title>
-    <link rel="stylesheet" href="../css/style.css">
-</head>
+    <link rel="stylesheet" href="../css/style.css" />
+  </head>
 
-<body>
-    <h1>修改成員</h1>
-    <hr>
+  <body>
+    <h1 class="centerText">修改成員</h1>
+    <hr />
     <form id="member-form">
-        <table>
-            <tr>
-                <td style="width: 30%;"><h4>成員名稱</h4></td>
-                <td style="width: 70%;">
-                    <input type="text" id="nick_name" placeholder="請輸入成員 Discord 名稱" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>遊戲角色名稱</h4></td>
-                <td>
-                    <input type="text" id="player_name" placeholder="請輸入遊戲主角名稱" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>遊戲UID</h4></td>
-                <td>
-                    <input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>DC ID</h4></td>
-                <td>
-                    <input type="text" id="discord_id" placeholder="請輸入 Discord user ID" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>是否離開戰隊</h4></td>
-                <td>
-                    <input type="radio" id="leave_true" name="is_leave" value="true">
-                        <label for="leave_true">是</label>
-                    <input type="radio" id="leave_false" name="is_leave" value="false">
-                        <label for="leave_true">否</label>
-                </td>
-            </tr>
-        </table>
-        <hr />
-        <!--p><button type="submit">送出</button></p-->
-        <p><button id="submit" type="button">送出</button> <button id="delete" type="button">刪除</button></p>
+      <table>
+        <tr>
+          <td style="width: 30%"><h4>成員名稱</h4></td>
+          <td style="width: 70%">
+            <input
+              type="text"
+              id="nick_name"
+              placeholder="請輸入成員 Discord 名稱"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>遊戲角色名稱</h4></td>
+          <td>
+            <input
+              type="text"
+              id="player_name"
+              placeholder="請輸入遊戲主角名稱"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>遊戲UID</h4></td>
+          <td>
+            <input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>DC ID</h4></td>
+          <td>
+            <input
+              type="text"
+              id="discord_id"
+              placeholder="請輸入 Discord user ID"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>是否離開戰隊</h4></td>
+          <td>
+            <input type="radio" id="leave_true" name="is_leave" value="true" />
+            <label for="leave_true">是</label>
+            <input
+              type="radio"
+              id="leave_false"
+              name="is_leave"
+              value="false"
+            />
+            <label for="leave_true">否</label>
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <!--p><button type="submit">送出</button></p-->
+      <p>
+        <button id="submit" type="button">送出</button>
+        <button class="button_red" id="delete" type="button">刪除</button>
+      </p>
     </form>
 
     <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
     <script src="./js/edit.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/member/index.html b/member/index.html
index 135ed74..27c8615 100644
--- a/member/index.html
+++ b/member/index.html
@@ -12,7 +12,7 @@
 </head>
 
 <body id="body">
-    <h1>成員管理</h1>
+     <h1 class="centerText">成員管理</h1>
     <hr>
     <h4><a href="./new.html">新增成員</a></h4>
     <hr>
diff --git a/member/new.html b/member/new.html
index 2f069bc..bb05689 100644
--- a/member/new.html
+++ b/member/new.html
@@ -1,51 +1,65 @@
 <!DOCTYPE html>
-<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<html
+  lang="zh-TW"
+  xmlns="http://www.w3.org/1999/html"
+  xmlns="http://www.w3.org/1999/html"
+>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-<head>
-  <!-- Required meta tags -->
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>新增成員</title>
+    <link rel="stylesheet" href="../css/style.css" />
+  </head>
 
-  <title>新增成員</title>
-  <link rel="stylesheet" href="../css/style.css">
-</head>
-
-<body id="body">
-  <h1>新增成員</h1>
-  <hr>
-  <form id="member-form">
-    <table>
-        <tr>
-            <td style="width: 30%;"><h4>成員名稱</h4></td>
-            <td style="width: 70%;">
-                <input type="text" id="nick_name" placeholder="請輸入成員 Discord 名稱" />
-            </td>
-        </tr>
-        <tr>
-            <td><h4>遊戲角色名稱</h4></td>
-            <td>
-                <input type="text" id="player_name" placeholder="請輸入遊戲主角名稱" />
-            </td>
-        </tr>
-        <tr>
-            <td><h4>遊戲UID</h4></td>
-            <td>
-                <input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
-            </td>
-        </tr>
-        <tr>
-            <td><h4>DC ID</h4></td>
-            <td>
-                <input type="text" id="discord_id" placeholder="請輸入 Discord user ID" />
-            </td>
-        </tr>
-    </table>
+  <body id="body">
+    <h1 class="centerText">新增成員</h1>
     <hr />
-    <p><button type="submit">送出</button></p>
-</form>
+    <form id="member-form">
+      <table>
+        <tr>
+          <td style="width: 30%"><h4>成員名稱</h4></td>
+          <td style="width: 70%">
+            <input
+              type="text"
+              id="nick_name"
+              placeholder="請輸入成員 Discord 名稱"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>遊戲角色名稱</h4></td>
+          <td>
+            <input
+              type="text"
+              id="player_name"
+              placeholder="請輸入遊戲主角名稱"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>遊戲UID</h4></td>
+          <td>
+            <input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
+          </td>
+        </tr>
+        <tr>
+          <td><h4>DC ID</h4></td>
+          <td>
+            <input
+              type="text"
+              id="discord_id"
+              placeholder="請輸入 Discord user ID"
+            />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <p><button type="submit">送出</button></p>
+    </form>
 
-  <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
-  <script src="./js/new.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <script src="./js/new.js"></script>
+  </body>
+</html>
diff --git a/new.html b/new.html
index 9cd70a7..c77d61c 100644
--- a/new.html
+++ b/new.html
@@ -1,104 +1,108 @@
 <!DOCTYPE html>
-<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<html
+  lang="zh-TW"
+  xmlns="http://www.w3.org/1999/html"
+  xmlns="http://www.w3.org/1999/html"
+>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-<head>
-  <!-- Required meta tags -->
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>新增紀錄</title>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
 
-  <title>新增紀錄</title>
-  <link rel="stylesheet" href="./css/style.css">
-</head>
-
-<body id="body">
-  <h1>新增紀錄</h1>
-  <hr>
-  <h4>填寫方式：掉刀填0，正常出刀填X周-Y王。傷害依照幹部規定要不要填，如不填可留空</h4>
-  <hr>
-  <form id="record-form">
-    <table>
-      <tr>
-        <td>請選擇你的名字</td>
-        <td>
-          <select id="member_select"></select>
-        </td>
-      </tr>
-    </table>
+  <body id="body">
+    <h1 class="centerText">新增紀錄</h1>
     <hr />
-    <table>
-      <tr>
-        <td>第1刀正刀</td>
-        <td>
-          <input type="text" id="knife1_boss" placeholder="x周-y王" />
-        </td>
-        <td>第1刀正刀傷害</td>
-        <td>
-          <input type="text" id="knife1_damage" placeholder="ex: 12000000" />
-        </td>
-      </tr>
-      <tr>
-        <td>第1刀殘刀</td>
-        <td>
-          <input type="text" id="knife1c_boss" placeholder="x周-y王" />
-        </td>
-        <td>第1刀殘刀傷害</td>
-        <td>
-          <input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
-        </td>
-      </tr>
-    </table>
+    <h4>
+      填寫方式：掉刀填0，正常出刀填X周-Y王。傷害依照幹部規定要不要填，如不填可留空
+    </h4>
     <hr />
-    <table>
-      <tr>
-        <td>第2刀正刀</td>
-        <td>
-          <input type="text" id="knife2_boss" placeholder="x周-y王" />
-        </td>
-        <td>第2刀正刀傷害</td>
-        <td>
-          <input type="text" id="knife2_damage" placeholder="ex: 12000000" />
-        </td>
-      </tr>
-      <tr>
-        <td>第2刀殘刀</td>
-        <td>
-          <input type="text" id="knife2c_boss" placeholder="x周-y王" />
-        </td>
-        <td>第2刀殘刀傷害</td>
-        <td>
-          <input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
-        </td>
-      </tr>
-    </table>
-    <hr />
-    <table>
-      <tr>
-        <td>第3刀正刀</td>
-        <td>
-          <input type="text" id="knife3_boss" placeholder="x周-y王" />
-        </td>
-        <td>第3刀正刀傷害</td>
-        <td>
-          <input type="text" id="knife3_damage" placeholder="ex: 12000000" />
-        </td>
-      </tr>
-      <tr>
-        <td>第3刀殘刀</td>
-        <td>
-          <input type="text" id="knife3c_boss" placeholder="x周-y王" />
-        </td>
-        <td>第3刀殘刀傷害</td>
-        <td>
-          <input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
-        </td>
-      </tr>
-    </table>
-    <hr />
-    <p><button type="submit">送出</button></p>
-  </form>
+    <form id="record-form">
+      <table>
+        <tr>
+          <td>請選擇你的名字</td>
+          <td>
+            <select id="member_select"></select>
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>第1刀正刀</td>
+          <td>
+            <input type="text" id="knife1_boss" placeholder="x周-y王" />
+          </td>
+          <td>第1刀正刀傷害</td>
+          <td>
+            <input type="text" id="knife1_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+        <tr>
+          <td>第1刀殘刀</td>
+          <td>
+            <input type="text" id="knife1c_boss" placeholder="x周-y王" />
+          </td>
+          <td>第1刀殘刀傷害</td>
+          <td>
+            <input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>第2刀正刀</td>
+          <td>
+            <input type="text" id="knife2_boss" placeholder="x周-y王" />
+          </td>
+          <td>第2刀正刀傷害</td>
+          <td>
+            <input type="text" id="knife2_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+        <tr>
+          <td>第2刀殘刀</td>
+          <td>
+            <input type="text" id="knife2c_boss" placeholder="x周-y王" />
+          </td>
+          <td>第2刀殘刀傷害</td>
+          <td>
+            <input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>第3刀正刀</td>
+          <td>
+            <input type="text" id="knife3_boss" placeholder="x周-y王" />
+          </td>
+          <td>第3刀正刀傷害</td>
+          <td>
+            <input type="text" id="knife3_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+        <tr>
+          <td>第3刀殘刀</td>
+          <td>
+            <input type="text" id="knife3c_boss" placeholder="x周-y王" />
+          </td>
+          <td>第3刀殘刀傷害</td>
+          <td>
+            <input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <p><button type="submit">送出</button></p>
+    </form>
 
-  <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
-  <script src="./js/new.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <script src="./js/new.js"></script>
+  </body>
+</html>