ADD file via upload

index.css

@@ -0,0 +1,107 @@
+* {
+  font-family: '正楷';
+  /* transition-duration: ; */
+}
+
+body {
+  padding: 0 50px;
+  background: linear-gradient(135deg, #fff3e0, #fffaf0);
+  font-size: 16px;
+}
+
+h1,
+h2 {
+  animation: textGlow 2s infinite alternate;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  padding: 20px 0;
+  background-color: #ffecb3;
+  color: #333;
+  text-align: center;
+  border-radius: 5px;
+}
+
+h2 {
+  color: #ffa000;
+}
+
+#content > div {
+  float: left;
+  width: 120px;
+  height: 60px;
+  margin: 10px;
+  font-size: 18px;
+  line-height: 60px;
+  text-align: center;
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  transition: transform 0.3s ease-in-out;
+}
+
+#content > div:hover {
+  transform: scale(1.05);
+}
+
+#content .cell {
+  background-color: #fff;
+  color: #333;
+  font-weight: 700;
+}
+
+#content .cell.active {
+  background: linear-gradient(135deg, #ffecb3, #ffe082);
+  color: #333;
+}
+
+#content .selected {
+  box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
+}
+
+button {
+  display: block;
+  padding: 12px 24px;
+  background-color: #ffa000;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  margin: 20px auto;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+  background-color: #e68a00;
+  transform: translateY(-2px);
+}
+
+button:active {
+  background-color: #cc7000;
+  transform: translateY(2px);
+}
+
+select {
+  display: inline-block;
+  height: 35px;
+  width: 120px;
+  border: 1px solid #ffd54f;
+  background-color: #fff;
+  color: #333;
+  font-size: 14px;
+  margin: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes textGlow {
+  from {
+      text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+  to {
+      text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+  }
+}