feat: 💄 add button and style

Author: shengyuan

css/main.css

@@ -329,6 +329,52 @@ body {
   pointer-events: none;
 }
 
+#main02 .input-group {
+  display: inline-flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 77%;
+  margin-bottom: 2rem;
+}
+
+#main02 .input-group-input {
+  display: block;
+  font-size: 1.5rem;
+  line-height: 1;
+  width: 1%;
+  flex: 1 1 auto;
+  background: none;
+  color: #ddd;
+  margin: 0 auto;
+  padding: 10px 1rem;
+  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  border-radius: 10px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#main02 .input-group-button {
+  display: inline-block;
+  font-size: 1.5rem;
+  line-height: 1;
+  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .1);
+  color: #fff;
+  vertical-align: top;
+  transition:.3s;
+  padding: 10px 1rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin: 0 0 0 3px;
+}
+
+#main02 .input-group-button.click {
+  background: rgba(255, 255, 255, .4);
+  box-shadow:inset #ccc 0 0 0 3px, #ccc 0 0 0 0;
+}
+
 #main02 .btn {
   display: inline-block;
   width: 38%;

index.html

@@ -371,6 +371,10 @@
       </footer>
     </div>
     <div id="main02" class="panel hide">
+      <div class="input-group">
+        <input type="text" class="input-group-input" id="sendMessage">
+        <button class="input-group-button">傳送</button>
+      </div>
       <div id="btn0n" msg="btn0" class="btn"></div>
       <div id="btn1n" msg="btn1" class="btn"></div>
       <div id="btn2n" msg="btn2" class="btn"></div>

js/main.js

@@ -225,6 +225,14 @@
     });
   });
 
+  const sendButton = document.querySelector('.input-group-button');
+  sendButton.addEventListener('click', () => {
+    sendButton.classList.add('click');
+    setTimeout(() => {
+      sendButton.classList.remove('click');
+    }, 100);
+  });
+
   let send = {
     center: false,
     top: false,