[feature] new design

public/index.html

@@ -12,20 +12,18 @@
     <textarea id="send" placeholder="Say something or run a command..." spellcheck="false"></textarea>
     <div class="top-box">
         <button class="send-button" onclick="clear_message()">Clear</button>
-        <p><input id="scroll-option" type="checkbox" checked /> Enable auto scroll</p>
+        <p class="note"><input id="scroll-option" type="checkbox" checked /> Enable auto scroll</p>
-        <p>Version: WS_2.0</p>
+        <p class="note">Version: WS_2.0</p>
     </div>
     <div class="bottom-box">
         <span class="note">Press Ctrl + Enter to send </span>
         <button class="send-button" onclick="send()">Send</button>
     </div>
     <div id="prompt-box" hidden>
-        <div id="prompt-box-title">
+        <div id="prompt-box-title"></div>
-            <soan id="prompt-box-title-text"></soan>
-        </div>
         <div id="prompt-box-content">
             <input type="text" id="prompt-data" />
-            <input type="button" value="OK" id="comfirm-prompt" />
+            <input type="button" value="OK" id="confirm-prompt" />
         </div>
     </div>
 

public/script.js

@@ -35,13 +35,13 @@ function write_message(data) {
         message_source = 'COMMAND BLOCK';
     }
 
-    let renderd_message;
+    let rendered_message;
     if (!data.plain) {
-        renderd_message = md.render(message);
+        rendered_message = md.render(message);
     } else {
-        renderd_message = `<pre>${message}</pre>`;
+        rendered_message = `<pre>${message}</pre>`;
     }
-    renderd_message = DOMPurify.sanitize(renderd_message);
+    rendered_message = DOMPurify.sanitize(rendered_message);
 
     $('#message').append(`
 <div class="msg">
@@ -51,7 +51,7 @@ function write_message(data) {
     </span>
     <br>
     <span class="msg-content">
-        ${renderd_message}
+        ${rendered_message}
     </span>
 </div>
 `
@@ -61,7 +61,7 @@ function write_message(data) {
 
 async function init() {
     $('#prompt-data').on('keyup', (e) => {
-        if (e.key === 'Enter') { $('#comfirm-prompt').click(); }
+        if (e.key === 'Enter') { $('#confirm-prompt').click(); }
     });
 
     clear_message();
@@ -132,8 +132,8 @@ async function init() {
     return ws;
 }
 
-function open_prompt(tilte) {
+function open_prompt(title) {
-    $('#prompt-box-title-text').text(tilte);
+    $('#prompt-box-title').text(title);
     $('#prompt-data').val('');
     $('#prompt-box').show('fast', () => { $('#prompt-data').focus(); });
 
@@ -142,7 +142,7 @@ function open_prompt(tilte) {
         resolve_callback = resolve;
     });
 
-    $('#comfirm-prompt').one('click', () => {
+    $('#confirm-prompt').one('click', () => {
         if (resolve_callback) {
             $('#prompt-box').hide('fast');
             resolve_callback($('#prompt-data').val());

public/style.css

@@ -12,12 +12,24 @@ input[type=checkbox] {
     background-color: #fcd363;
 }
 
-button, input[type=button] {
+button,
+input[type=button] {
     border: none;
-    padding: 10px;
+    padding: 10px 25px 10px 25px;
     border-radius: 2px;
-    background-color: #5bb2ec;
+    background-color: #0a84ff;
     color: #fff;
+    border-radius: 5px;
+}
+
+button:hover,
+input[type=button]:hover {
+    border: none;
+    padding: 10px 25px 10px 25px;
+    border-radius: 2px;
+    background-color: #0060df;
+    color: #fff;
+    border-radius: 5px;
 }
 
 pre {
@@ -26,17 +38,17 @@ pre {
 
 .note {
     margin-right: 5px;
-    color: #888888;
+    color: #737373;
 }
 
 #message {
-    background-color: #f2f2f2;
+    background-color: #f9f9fa;
     margin: 0;
-    font-size: 20px;
+    font-size: 17px;
     padding: 20px;
     height: 70vh;
     width: calc(100vw - 20px);
-    color: #000;
+    color: #38383d;
     font-family: 'Fira Code', Consolas, monospace;
     overflow-y: scroll;
     word-wrap: break-word;
@@ -45,10 +57,12 @@ pre {
 #send {
     background-color: #fff;
     margin: 0;
-    font-size: 20px;
+    font-size: 17px;
     padding: 30px;
     width: 100vw;
     height: 30vh;
+
+    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
 }
 
 .send-button {
@@ -72,22 +86,23 @@ pre {
 }
 
 .msg-content {
-    color: #606266;
+    font-weight: 400;
+    color: #737373;
 }
 
 .msg-private::after {
     content: " PRIVATE";
-    color: #F7BA2A;
+    color: #ff9400;
 }
 
 .msg-from {
     font-weight: 600;
-    color: #303133;
+    color: #0c0c0d;
 }
 
 .msg-time {
-    font-weight: normal;
+    font-weight: 400;
-    color: #C0C4CC;
+    color: #b1b1b3;
 }
 
 .msg-from::before {
@@ -95,41 +110,38 @@ pre {
 }
 
 .msg-from-info {
-    color: #5bb2ec;
+    color: #0a84ff;
 }
 
 .msg-from-cb {
-    color: #000000;
+    color: #0c0c0d;
 }
 
 #prompt-box {
     width: fit-content;
     min-width: 300px;
-    height: 120px;
+    min-height: 120px;
     position: absolute;
     top: calc(50% - 180px);
     left: calc(45% - 150px);
+
+    background-color: #FFFFFF;
+    padding: 20px;
+    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
+    border-radius: 5px;
 }
 
 #prompt-box-title {
     width: 100%;
     height: 30px;
-    background-color: #606266;
+    color: #0c0c0d;
-    display: block;
+    font-size: 15px;
-    border-radius: 0px;
+    font-weight: 500;
-    color: white;
-    font-size: 16px;
-}
-
-#prompt-box-title-text {
-    margin-left: 10px;
-    margin-right: 10px;
 }
 
 #prompt-box-content {
     height: 90px;
     display: block;
-    background-color: #C0C4CC;
     padding-top: 10px;
 }
 
@@ -137,16 +149,16 @@ pre {
     width: calc(100% - 20px);
     margin: 0 auto;
     border-radius: 2px;
-    border: 1px solid #606266;
+    border-radius: 5px;
+    padding: 8px;
+    color: #737373;
+    border: none;
     display: block;
-    font-size: 18px;
+    font-size: 15px;
+    border: #0a84ff 2px solid;
 }
 
-#comfirm-prompt {
+#confirm-prompt {
     float: right;
-    margin-right: 10px;
+    margin-top: 15px;
-    display: block;
+}
-    margin-top: 25px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-}