diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..8dee386
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+ 包剪锤
+
+
+
+
+
+
+
+
+
diff --git a/public/paper.png b/public/paper.png
new file mode 100644
index 0000000..75ae028
Binary files /dev/null and b/public/paper.png differ
diff --git a/public/rock.png b/public/rock.png
new file mode 100644
index 0000000..17f4866
Binary files /dev/null and b/public/rock.png differ
diff --git a/public/scissors.png b/public/scissors.png
new file mode 100644
index 0000000..aeef998
Binary files /dev/null and b/public/scissors.png differ
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..507e20a
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,80 @@
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+}
+
+body {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ user-select: none;
+}
+
+#game,
+#player1,
+#player2 {
+ display: flex;
+ gap: 10px;
+}
+
+.score,
+.shape {
+ min-width: 200px;
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.shape {
+ border: 1px solid #777;
+ border-radius: 1rem;
+}
+
+#player1,
+#player2 {
+ position: relative;
+}
+
+.name {
+ font-size: 2rem;
+ font-weight: 600;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+#player2 .name {
+ left: auto;
+ right: 0px;
+}
+
+.score {
+ font-size: 100px;
+ padding: 0 1rem;
+}
+
+#player1 .shape,
+#player2 .shape {
+ background-repeat: no-repeat;
+ background-size: 200px 200px;
+}
+
+.rock {
+ background: url(rock.png);
+}
+
+.paper {
+ background: url(paper.png);
+}
+
+.scissors {
+ background: url(scissors.png);
+}
+
+#player2 .shape {
+ transform: scaleX(-1);
+}