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

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

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

Так почему бы не начать использовать обход блокировки YouTube при том что техническая возможность используя расширение nikolaevevge для браузера Mozilla Firefox уже появилась, а объем полезной(и не очень) информации на видеохостинге YouTube, по мнению некоторых диванных экспертов, меньше не стал.

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

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

На очередном конкурсе танцев, школьница отлично выступила.

Что использовать вместо Юбуст

Вот та самая информация: программа для продвижения канала YouTube, эта информация выложена уже несколько лет, при этом просмотров не много, а метод который описан в данном видео действительно помогает продвигать видео в YouTube.

Начал разбираться с информацией которая находится в 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>

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

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