diff --git a/assets/css/chat.css b/assets/css/chat.css new file mode 100644 index 0000000..d408af1 --- /dev/null +++ b/assets/css/chat.css @@ -0,0 +1,103 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #e5e5e5; +} + +.chat-container { + width: 100%; + max-width: 800px; + height: 90vh; + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + border-radius: 8px; + overflow: hidden; +} + +.chat-header { + background-color: #0088cc; + color: white; + padding: 15px; + text-align: center; + font-size: 20px; +} + +.chat-messages { + flex: 1; + padding: 15px; + overflow-y: auto; + background-color: #f7f7f7; +} + +.chat-message { + display: flex; + align-items: flex-start; + margin-bottom: 15px; +} + +.chat-message .avatar { + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; + margin-right: 10px; +} + +.chat-message .avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.chat-message .message-content { + max-width: 70%; + background-color: white; + padding: 10px; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.chat-message .message-content .username { + font-weight: bold; + margin-bottom: 5px; +} + +.chat-message .message-content .text { + word-wrap: break-word; +} + +.chat-footer { + display: flex; + padding: 15px; + padding-left: 50px; + border-top: 1px solid #ddd; +} + +.chat-input { + flex: 1; + padding: 10px; + border: 1px solid #ddd; + border-radius: 20px; + margin-right: 10px; + outline: none; +} + +.chat-send-button { + padding: 10px 20px; + border: none; + background-color: #0088cc; + color: white; + border-radius: 20px; + cursor: pointer; + outline: none; +} + +.chat-send-button:hover { + background-color: #007bb5; +} \ No newline at end of file diff --git a/assets/css/test.css b/assets/css/test.css deleted file mode 100644 index 75b73f1..0000000 --- a/assets/css/test.css +++ /dev/null @@ -1,9 +0,0 @@ -.aaa {font-size: 50px} - -.ccc .aaa { - color: yellow; -} - -.ccc #bbb { - color: green; -} \ No newline at end of file diff --git a/assets/html/chat.html b/assets/html/chat.html index bf4014f..7fd9441 100644 --- a/assets/html/chat.html +++ b/assets/html/chat.html @@ -4,98 +4,7 @@