Версия вёрстки чата с фотографиями пользователей

Гобелен - кликните для возврата на главную

Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.

Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Жладимира Вольфовича Жириновского.

Как бы не обстояли дела в области культуры и IT-технологий, Самосвал писал статьи на связанные темы и планирует ещё написать.

Начал разбираться с информацией которая находится в HTTPS клиентском запросе рукопожатия.

Обратите внимание! Объект изображённый на гобилене может отличаться от общепринятого вида описанного объекта. Тут дело в том что художник видит именно так!

104 549 руб.

Описание товара

Версия вёрстки чата приведённая ниже отличается от предыдущей только тем что в текущей версии версики добавлена фотография пользователей, таким образом что фотография находится слева от сообщения, имеет размер 50px x 50px, в оформлении фотографии не используется скругление, а так же при большом объёме текста(на несколько строк) фотография будет находится внизу рядом с сообщением(этот пункт посмотрел как это реализовано в мессенджере битрикс и сделал аналогично). Предыдущий вариант вёрстки доступен по ссылке.

HTML
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=6">
    <title>Чат для IE6 с фото</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: #e6f2ff;
            font-family: Arial, sans-serif;
            height: 100%;
            overflow: hidden;
        }
        #chat-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 80px;
            overflow-y: scroll;
            padding: 10px;
            scrollbar-face-color: #c0c0c0;
            scrollbar-shadow-color: #808080;
        }
        .message-container {
            margin: 5px 0;
            min-height: 50px;
            position: relative;
        }
        .message-content {
            margin-left: 60px;
            min-height: 50px;
        }
        .user-photo {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 50px;
        }
        .message {
            padding: 5px 10px;
            display: inline-block;
            max-width: 80%;
        }
        .user1 .message {
            background: #ffcccc;
        }
        .user2 .message {
            background: #cce6ff;
        }
        #input-area {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: #d9e6f2;
            border-top: 1px solid #a0a0a0;
        }
        #input-col {
            position: absolute;
            left: 0;
            top: 0;
            right: 150px;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        #button-col {
            position: absolute;
            right: 0;
            top: 0;
            width: 150px;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        #message-input {
            width: 100%;
            height: 100%;
        }
        #send-button {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div class="message-container user1">
            <img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 1">
            <div class="message-content">
                <div class="message">Привет! Как дела? Это тестовое сообщение для демонстрации расположения фотографии. Оно специально сделано длинным, чтобы показать как фото остаётся внизу сообщения.</div>
            </div>
        </div>
        <div class="message-container user2">
            <img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 2">
            <div class="message-content">
                <div class="message">Всё отлично! А у тебя? Я тоже добавил длинное сообщение, чтобы проверить как будет выглядеть фото при многострочном тексте.</div>
            </div>
        </div>
        <div class="message-container user1">
            <img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 1">
            <div class="message-content">
                <div class="message">Тоже неплохо. Что нового?</div>
            </div>
        </div>
    </div>
      
    <div id="input-area">
        <div id="input-col">
            <textarea id="message-input" rows="3"></textarea>
        </div>
        <div id="button-col">
            <button id="send-button" onclick="sendMessage()">Отправить</button>
        </div>
    </div>
      
    <script type="text/javascript">
        function sendMessage() {
            var input = document.getElementById("message-input");
            var message = input.value.trim();
            if (message === "") return;
      
            var chat = document.getElementById("chat-container");
            var newMessage = document.createElement("div");
            newMessage.className = "message-container user1";
            
            var photo = document.createElement("img");
            photo.src = "https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg";
            photo.className = "user-photo";
            photo.alt = "User";
            
            var messageContent = document.createElement("div");
            messageContent.className = "message-content";
            
            var messageDiv = document.createElement("div");
            messageDiv.className = "message";
            messageDiv.innerHTML = message;
            
            messageContent.appendChild(messageDiv);
            newMessage.appendChild(photo);
            newMessage.appendChild(messageContent);
            
            chat.appendChild(newMessage);
      
            input.value = "";
            chat.scrollTop = chat.scrollHeight;
        }
    </script>
</body>
</html>

Другие товары

Вы так же можете прочитать следующие статьи: