diff --git a/public/index.html b/public/index.html
index ed8265c..eeed98b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,14 +5,61 @@
+
+
+
- 陆战棋游戏
+ 陆战棋
- 陆战棋游戏
-
-
+
diff --git a/public/style.css b/public/style.css
index 280f266..772e6fe 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,13 +1,84 @@
-button {
- padding: 0.5rem;
- color: lightgray;
- cursor: pointer;
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+ font-family: 'Noto Serif SC', serif;
+}
+
+body {
+ width: 1280px;
+ padding: 1rem;
+ margin: 0 auto;
+ background-color: #6a6;
+}
+
+#game {
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+}
+
+#gameboard {
+ width: 982px;
+ height: 1248px;
+ background-image: url(board.png);
+}
+
+#sidebar {
+}
+
+#display {
+ width: 240px;
+ height: 440px;
+ color: #030;
+ display: flex;
+ flex-flow: column;
+ gap: 20px;
+}
+
+#buttons-container,
+#pieces-container {
+ width: 240px;
+ padding: 20px;
+ gap: 20px;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+ border: 4px #363 dashed;
}
.player1 {
- color: black;
+ color: #333;
}
.player2 {
- color: red;
+ color: #833;
+}
+
+button,
+.piece {
+ width: 80px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 24px;
+ font-weight: 900;
+ border-radius: 4px;
+ border: double 3px black;
+ text-shadow: 0 1px 0px white;
+ box-shadow: 1px 1px 2px black;
+ background: linear-gradient(to bottom, #fff, #ccc, #ddd);
+}
+
+.title {
+ width: 80px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: 900;
}