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 @@ Веб-Чат - +
@@ -111,51 +20,6 @@
- + - + \ No newline at end of file diff --git a/assets/html/test.html b/assets/html/test.html deleted file mode 100644 index 51da777..0000000 --- a/assets/html/test.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - This is a test - - - -

Test Test Test

-

Test Test asdasdsa Test

-
-

Inside aaaa

-

Iside bbbb

-
- -
- - - - - -
- - - - - - - - - -
- - - - - - - -
-

Lmao, get ready to handle file input:

- -
- - -
- -

Ok, ima try that again

-
-
- - -
-
- -
-
- - - \ No newline at end of file diff --git a/assets/js/chat.js b/assets/js/chat.js new file mode 100644 index 0000000..12cb5a4 --- /dev/null +++ b/assets/js/chat.js @@ -0,0 +1,44 @@ +function sendMessage() { + const chatMessages = document.getElementById('chat-messages'); + const chatInput = document.getElementById('chat-input'); + const message = chatInput.value; + if (message.trim() !== '') { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message'); + + const avatarElement = document.createElement('div'); + avatarElement.classList.add('avatar'); + + const avatarImage = document.createElement('img'); + avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album'; + avatarElement.appendChild(avatarImage); + + const messageContentElement = document.createElement('div'); + messageContentElement.classList.add('message-content'); + + const usernameElement = document.createElement('div'); + usernameElement.classList.add('username'); + usernameElement.textContent = 'Адель'; + + const textElement = document.createElement('div'); + textElement.classList.add('text'); + textElement.textContent = message; + + messageContentElement.appendChild(usernameElement); + messageContentElement.appendChild(textElement); + + messageElement.appendChild(avatarElement); + messageElement.appendChild(messageContentElement); + + chatMessages.appendChild(messageElement); + + chatInput.value = ''; + chatMessages.scrollTop = chatMessages.scrollHeight; + } +} + +document.getElementById('chat-input').addEventListener('keydown', function (event) { + if (event.key === 'Enter') { + sendMessage(); + } +}); \ No newline at end of file