Версия вёрстки чата в которой добавлено время отправки сообщений
Гобелен - кликните для возврата на главную
Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.
Так почему бы не начать использовать обход блокировки YouTube при том что техническая возможность используя расширение nikolaevevge для браузера Mozilla Firefox уже появилась, а объем полезной(и не очень) информации на видеохостинге YouTube, по мнению некоторых диванных экспертов, меньше не стал.
Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Владимира Вольфовича Жириновского.
Как бы не обстояли дела в области культуры и IT-технологий, Самосвал писал статьи на связанные темы и планирует ещё написать.
На очередном конкурсе танцев, школьница отлично выступила.
Вот та самая информация: программа для продвижения канала YouTube, эта информация выложена уже несколько лет, при этом просмотров не много, а метод который описан в данном видео действительно помогает продвигать видео в YouTube.
Начал разбираться с информацией которая находится в 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;
}
#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%;
}
.message-time {
color: #666666;
font-size: 0.7em;
margin-right: 5px;
}
.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"><span class="message-time">12:37</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>Всё отлично! А у тебя? Я тоже добавил длинное сообщение, чтобы проверить как будет выглядеть фото при многострочном тексте.</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"><span class="message-time">12:41</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>
<script type="text/javascript">
function getCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
}
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";
var timeSpan = document.createElement("span");
timeSpan.className = "message-time";
timeSpan.innerHTML = getCurrentTime() + " ";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
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>Чат для 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;
}
.date-separator {
background: #e6f9ff;
color: #333;
text-align: center;
margin: 15px 0;
padding: 5px 0;
max-width: 98%;
margin-left: 10px;
}
.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%;
}
.message-time {
color: #666666;
font-size: 0.8em;
margin-right: 5px;
}
.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="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>Привет! Как дела?</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>Всё отлично! А у тебя?</div>
</div>
</div>
<div class="date-separator">27 апреля 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">09:15</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>
<script type="text/javascript">
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() + " ";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
input.value = "";
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>
Другие товары
Вы так же можете прочитать следующие статьи:
- Глобальные и локальные изменения климата: что происходит в России и мире?
- Гобелен "Франция. Прованс. Лаванда на закате"
- Гобелен "Голландская весна: Луга с тюльпанами"
- Гобелен "Вилла д'Эсте: Сад и фонтаны в Тиволи"
- Гобелен «Швейцария. Лаутербруннен. Долина водопадов»
- Как в Borland C++ Builder 6 по событию внутри компонента CWebBrowser1 запустить событие в коде C++
- Гобелен "Долина Луары: Величие французских замков"
- Гобелен "Швейцария. Озеро Люцерн и Альпы в лучах заката"
- Гобелен "Свято-Введенский Толгский монастырь, Ярославская область. Тишина веков"
- Гобелен "Сады Принца-Электора: Вечерняя прогулка по Потсдаму"
- Гобелен "Замок Нойшванштайн: Утренний свет в Альпах"
- Гобелен «Голубая мечеть. Стамбул. Архитектурная гармония Востока»
- Гобелен «Швейцария. Альпийское утро у Женевского озера»
- Работа с потоками в Borland C++ Builder 6 (класс TThread, фишки с Terminate, Terminated и Synchronize)
- Гобелен "Сидней. Панорама с Оперным театром на закате"
- Почему «страх» считается главным врагом на пути воина?
- Гобелен "Рассвет в Лапландии: Вихрь северного сияния"
- Гобелен "Музей промышленности и искусства в городе Иваново. Наследие Д.Г. Бурылина"
- Гобелен «Ирландия. Долина Глендалох»
- Гобелен "Амальфи. Утренний свет на побережье"