diff --git a/public/index.html b/public/index.html
index 8bd8b64..7ce92c0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,20 +12,18 @@
-
Enable auto scroll
-
Version: WS_2.0
+
Enable auto scroll
+
Version: WS_2.0
Press Ctrl + Enter to send
diff --git a/public/script.js b/public/script.js
index 8c1391c..1282167 100644
--- a/public/script.js
+++ b/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 = `${message}
`;
+ rendered_message = `${message}
`;
}
- renderd_message = DOMPurify.sanitize(renderd_message);
+ rendered_message = DOMPurify.sanitize(rendered_message);
$('#message').append(`
@@ -51,7 +51,7 @@ function write_message(data) {
- ${renderd_message}
+ ${rendered_message}
`
@@ -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) {
- $('#prompt-box-title-text').text(tilte);
+function open_prompt(title) {
+ $('#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());
diff --git a/public/style.css b/public/style.css
index b19b09f..8200ddf 100644
--- a/public/style.css
+++ b/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;
- color: #C0C4CC;
+ font-weight: 400;
+ 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;
- display: block;
- border-radius: 0px;
- color: white;
- font-size: 16px;
-}
-
-#prompt-box-title-text {
- margin-left: 10px;
- margin-right: 10px;
+ color: #0c0c0d;
+ font-size: 15px;
+ font-weight: 500;
}
#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;
- display: block;
- margin-top: 25px;
- padding-top: 5px;
- padding-bottom: 5px;
-}
+ margin-top: 15px;
+}
\ No newline at end of file