Джим
Код:[html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat Simulation</title> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; } .chat-container { max-width: 600px; margin: 0 auto; padding: 10px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .message { display: flex; align-items: flex-end; margin-bottom: 10px; } .message.incoming { justify-content: flex-start; } .message.outgoing { justify-content: flex-end; } .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .message-content { max-width: 70%; background-color: #e0e0e0; padding: 10px; border-radius: 10px; position: relative; word-wrap: break-word; } .message-content.outgoing { background-color: #d1ffc6; } .message-content:before { content: ''; position: absolute; width: 0; height: 0; top: 10px; border: 10px solid transparent; } .incoming .message-content:before { left: -20px; border-right-color: #e0e0e0; } .outgoing .message-content:before { right: -20px; border-left-color: #d1ffc6; } .message-content img { max-width: 100%; height: auto; border-radius: 10px; } .message-time { font-size: 12px; color: #888; margin-top: 5px; text-align: right; } </style> </head> <body> <div class="chat-container"> <div class="message outgoing"> <div class="message-content outgoing"> ТЕКСТ СООБЩЕНИЯ <div class="message-time">00/00/00 00:00 </div> </div> <img src="https://upforme.ru/uploads/001c/33/07/2/892876.png" alt="Avatar" class="avatar"> </div> </div> </body> </html> [/html]
Айзек
Код:[html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat Simulation</title> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; } .chat-container { max-width: 600px; margin: 0 auto; padding: 10px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .message { display: flex; align-items: flex-end; margin-bottom: 10px; } .message.incoming { justify-content: flex-start; } .message.outgoing { justify-content: flex-end; } .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .message-content { max-width: 70%; background-color: #e0e0e0; padding: 10px; border-radius: 10px; position: relative; word-wrap: break-word; } .message-content.outgoing { background-color: #d1ffc6; } .message-content:before { content: ''; position: absolute; width: 0; height: 0; top: 10px; border: 10px solid transparent; } .incoming .message-content:before { left: -20px; border-right-color: #e0e0e0; } .outgoing .message-content:before { right: -20px; border-left-color: #d1ffc6; } .message-content img { max-width: 100%; height: auto; border-radius: 10px; } .message-time { font-size: 12px; color: #888; margin-top: 5px; text-align: right; } </style> </head> <body> <div class="chat-container"> <div class="message incoming"> <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar"> <div class="message-content"> ТЕКСТ СООБЩЕНИЯ <div class="message-time">00/00/00 00:00</div> </div> </div> </div> </body> </html> [/html]
