Версия вёрстки чата в которую добавлен список пользователей слева для возможности их выбора
Гобелен - кликните для возврата на главную
Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.
Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Жладимира Вольфовича Жириновского.
Как бы не обстояли дела в области культуры и IT-технологий, Самосвал писал статьи на связанные темы и планирует ещё написать.
Начал разбираться с информацией которая находится в HTTPS клиентском запросе рукопожатия.
Обратите внимание! Объект изображённый на гобилене может отличаться от общепринятого вида описанного объекта. Тут дело в том что художник видит именно так!
104 549 руб.
Описание товара
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;
}
#contacts {
position: absolute;
left: 0;
top: 0;
width: 150px;
bottom: 0;
background: #d9e6f2;
border-right: 1px solid #a0a0a0;
overflow-y: auto;
}
.contact {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #c0c0c0;
}
.contact.active {
background: #b3cce6;
font-weight: bold;
}
.contact-photo {
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: 5px;
}
#chat-area {
position: absolute;
left: 151px;
top: 0;
right: 0;
bottom: 0;
}
#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;
}
.date-separator {
background: #d9d9d9;
color: #333;
text-align: center;
margin: 15px 0;
padding: 5px 0;
max-width: 80%;
margin-left: 60px;
}
.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 25px 5px 10px;
display: inline-block;
max-width: 80%;
position: relative;
}
.message-time {
color: #666666;
font-size: 0.8em;
margin-right: 5px;
}
.read-indicator {
position: absolute;
right: 5px;
bottom: -5px;
width: 16px;
height: 10px;
background: url('https://blog.ivru.net/10-11/messageRead.png') no-repeat;
}
.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="contacts">
<div class="contact active" onclick="switchChat(1)">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Иван">
Иван
</div>
<div class="contact" onclick="switchChat(2)">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Мария">
Мария
</div>
<div class="contact" onclick="switchChat(3)">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Алексей">
Алексей
</div>
</div>
<div id="chat-area">
<div id="chat-container">
<div class="date-separator">26 апреля 2025 года</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">
<span class="message-time">12:37</span>Привет! Как дела?
<span class="read-indicator"></span>
</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">
<span class="message-time">12:39</span>Всё отлично! А у тебя?
<span class="read-indicator"></span>
</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>
</div>
<script type="text/javascript">
var currentChat = 1;
var chats = {
1: document.getElementById('chat-container').innerHTML,
2: '<div class="date-separator">26 апреля 2025 года</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">' +
'<span class="message-time">14:20</span>Привет, Мария!<span class="read-indicator"></span></div></div></div>',
3: '<div class="date-separator">25 апреля 2025 года</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">' +
'<span class="message-time">10:15</span>Доброе утро, Алексей!<span class="read-indicator"></span></div></div></div>'
};
function switchChat(chatId) {
currentChat = chatId;
document.getElementById('chat-container').innerHTML = chats[chatId];
// Обновляем активный контакт
var contacts = document.getElementsByClassName('contact');
for (var i = 0; i < contacts.length; i++) {
contacts[i].className = 'contact';
}
contacts[chatId-1].className = 'contact active';
}
function getCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
}
function getCurrentDate() {
var months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
var now = new Date();
return now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear() + ' года';
}
var lastDate = '';
function sendMessage() {
var input = document.getElementById("message-input");
var message = input.value.trim();
if (message === "") return;
var chat = document.getElementById("chat-container");
var currentDate = getCurrentDate();
if (currentDate != lastDate) {
var dateSeparator = document.createElement("div");
dateSeparator.className = "date-separator";
dateSeparator.innerHTML = currentDate;
chat.appendChild(dateSeparator);
lastDate = currentDate;
}
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";
var timeSpan = document.createElement("span");
timeSpan.className = "message-time";
timeSpan.innerHTML = getCurrentTime() + " ";
var readIndicator = document.createElement("span");
readIndicator.className = "read-indicator";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageDiv.appendChild(readIndicator);
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
// Сохраняем сообщение в истории чата
chats[currentChat] = document.getElementById('chat-container').innerHTML;
input.value = "";
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>
В следующей версии кода представлена только возможность изменять пользователю размер области списка пользователей, которая отделяется от списка сообщений отчёркиванием. В этой версии нет списка сообщений и формы и кнопки отправки сообщений. При этом далее будет приведена версия кода содержащая и возможность изменения размера области и прочие указанные в этом абзаце функции.
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>Чат с изменяемым размером</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e6f2ff;
font-family: Arial, sans-serif;
height: 100%;
overflow: hidden;
}
#contacts {
position: absolute;
left: 0;
top: 0;
width: 150px;
bottom: 0;
background: #d9e6f2;
border-right: 1px solid #a0a0a0;
overflow-y: auto;
}
.contact {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #c0c0c0;
}
.contact.active {
background: #b3cce6;
font-weight: bold;
}
.contact-photo {
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: 5px;
}
#resize-handle {
position: absolute;
left: 150px;
top: 0;
width: 5px;
bottom: 0;
background: #c0c0c0;
cursor: col-resize;
z-index: 100;
}
#chat-area {
position: absolute;
left: 155px; /* 150px + 5px handle */
top: 0;
right: 0;
bottom: 0;
}
#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;
}
/* Остальные стили остаются без изменений */
</style>
</head>
<body>
<div id="contacts">
<div class="contact active">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Иван">
Иван
</div>
<div class="contact">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Мария">
Мария
</div>
</div>
<div id="resize-handle"></div>
<div id="chat-area">
<!-- Содержимое чата -->
</div>
<script type="text/javascript">
var handle = document.getElementById('resize-handle');
var contacts = document.getElementById('contacts');
var chatArea = document.getElementById('chat-area');
var isResizing = false;
handle.onmousedown = function(e) {
isResizing = true;
document.body.style.cursor = 'col-resize';
return false;
};
document.onmousemove = function(e) {
if (!isResizing) return;
var newWidth = e.clientX;
if (newWidth < 100) newWidth = 100;
if (newWidth > 300) newWidth = 300;
contacts.style.width = newWidth + 'px';
handle.style.left = newWidth + 'px';
chatArea.style.left = (newWidth + 5) + 'px';
};
document.onmouseup = function() {
isResizing = false;
document.body.style.cursor = '';
};
</script>
</body>
</html>
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>Чат с изменяемым размером</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e6f2ff;
font-family: Arial, sans-serif;
height: 100%;
overflow: hidden;
}
#contacts {
position: absolute;
left: 0;
top: 0;
width: 150px;
bottom: 0;
background: #d9e6f2;
border-right: 1px solid #a0a0a0;
overflow-y: auto;
}
.contact {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #c0c0c0;
}
.contact.active {
background: #b3cce6;
font-weight: bold;
}
.contact-photo {
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: 5px;
}
#resize-handle {
position: absolute;
left: 150px;
top: 0;
width: 5px;
bottom: 0;
background: #c0c0c0;
cursor: col-resize;
z-index: 100;
}
#chat-area {
position: absolute;
left: 155px;
top: 0;
right: 0;
bottom: 0;
}
#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;
}
.date-separator {
background: #d9d9d9;
color: #333;
text-align: center;
margin: 15px 0;
padding: 5px 0;
max-width: 80%;
margin-left: 60px;
}
.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 25px 5px 10px;
display: inline-block;
max-width: 80%;
position: relative;
}
.message-time {
color: #666666;
font-size: 0.8em;
margin-right: 5px;
}
.read-indicator {
position: absolute;
right: 5px;
bottom: -5px;
width: 16px;
height: 10px;
background: url('https://blog.ivru.net/10-11/messageRead.png') no-repeat;
}
.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="contacts">
<div class="contact active" onclick="switchChat(1)">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Иван">
Иван
</div>
<div class="contact" onclick="switchChat(2)">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="contact-photo" alt="Мария">
Мария
</div>
</div>
<div id="resize-handle"></div>
<div id="chat-area">
<div id="chat-container">
<div class="date-separator">26 апреля 2025 года</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">
<span class="message-time">12:37</span>Привет! Как дела?
<span class="read-indicator"></span>
</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">
<span class="message-time">12:39</span>Всё отлично! А у тебя?
<span class="read-indicator"></span>
</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>
</div>
<script type="text/javascript">
// Функционал изменения ширины
var handle = document.getElementById('resize-handle');
var contacts = document.getElementById('contacts');
var chatArea = document.getElementById('chat-area');
var isResizing = false;
handle.onmousedown = function(e) {
isResizing = true;
document.body.style.cursor = 'col-resize';
return false;
};
document.onmousemove = function(e) {
if (!isResizing) return;
var newWidth = e.clientX;
if (newWidth < 100) newWidth = 100;
if (newWidth > 500) newWidth = 500;
contacts.style.width = newWidth + 'px';
handle.style.left = newWidth + 'px';
chatArea.style.left = (newWidth + 5) + 'px';
};
document.onmouseup = function() {
isResizing = false;
document.body.style.cursor = '';
};
// Функционал чата
var currentChat = 1;
var chats = {
1: document.getElementById('chat-container').innerHTML,
2: '<div class="date-separator">26 апреля 2025 года</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">' +
'<span class="message-time">14:20</span>Привет, Мария!<span class="read-indicator"></span></div></div></div>'
};
function switchChat(chatId) {
currentChat = chatId;
document.getElementById('chat-container').innerHTML = chats[chatId];
var contacts = document.getElementsByClassName('contact');
for (var i = 0; i < contacts.length; i++) {
contacts[i].className = 'contact';
}
contacts[chatId-1].className = 'contact active';
}
function getCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
}
function getCurrentDate() {
var months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
var now = new Date();
return now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear() + ' года';
}
var lastDate = '';
function sendMessage() {
var input = document.getElementById("message-input");
var message = input.value.trim();
if (message === "") return;
var chat = document.getElementById("chat-container");
var currentDate = getCurrentDate();
if (currentDate != lastDate) {
var dateSeparator = document.createElement("div");
dateSeparator.className = "date-separator";
dateSeparator.innerHTML = currentDate;
chat.appendChild(dateSeparator);
lastDate = currentDate;
}
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";
var timeSpan = document.createElement("span");
timeSpan.className = "message-time";
timeSpan.innerHTML = getCurrentTime() + " ";
var readIndicator = document.createElement("span");
readIndicator.className = "read-indicator";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageDiv.appendChild(readIndicator);
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
chats[currentChat] = document.getElementById('chat-container').innerHTML;
input.value = "";
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>
Финальная версия вёрстки начального этапа(сделано за сутки) в изменениями некоторых стилей доступна по ссылке.
Другие товары
Вы так же можете прочитать следующие статьи:
- Гобелен «Рим. Колизей в свете рассвета»
- Гобелен "Волжская набережная, Ярославская область. Прогулки по берегу Волги"
- Перчатки ХБ малобензостойкие(МБС) "Гранат"
- Почему в учении дона Хуана так важны животные-проводники (вроде ворона)?
- Гобелен «Канада. Озеро Морейн. Горное отражение»
- Гобелен "Церковь Петра Митрополита, Ярославская область. Наследие веков"
- Что значит «быть безупречным» с точки зрения дона Хуана?
- Гобелен "Церковь Ильи Пророка. Шедевр Ярославской архитектуры"
- Написание TCP-сервера на WinSock на Borland C++ Builder 6 с возможностью видеть сообщения от клиентов и отправлять им
- Гобелен "Музей первого Совета, город Иваново. Эхо революции 1905 года"
- Гобелен "Щудровская палатка, город Иваново Окно в историю XVII века"
- Как называется сертификат Let's Encrypt в Firefox и один ли он там или несколько?
- Гобелен "Озеро Неро, Ярославская область. Живописная гармония Ростова"
- Гобелен "Музей советского автопрома, город Иваново. Наследие скорости и инженерии"
- Гобелен «Амстердам. Каналы и старинные дома в вечернем свете»
- Гобелен "Сад Кенroku-en: Японская гармония природы"
- Гобелен "Музей хитрости и смекалки. Переславль-Залесский", Ярославская область
- Гобелен «Нью-Йорк. Вид на Центральный парк в осенний день»
- Гобелен «Швейцария. Альпийская деревня у подножия гор»
- Гобелен "Рассвет в Лапландии: Вихрь северного сияния"