Финальная версия вёрстки чата на первом этапе
Гобелен - кликните для возврата на главную
Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.
Так почему бы не начать использовать обход блокировки 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;
}
#contacts {
position: absolute;
left: 0;
top: 0;
width: 150px;
bottom: 0;
background: #d9e6f2;
border-right: 1px solid #a0a0a0;
overflow-y: auto;
}
.contact {
padding: 8px 10px;
cursor: pointer;
border-bottom: 1px solid #c0c0c0;
position: relative;
min-height: 50px;
}
.contact.active {
background: #b3cce6;
font-weight: bold;
}
.contact-photo {
position: absolute;
left: 10px;
top: 8px;
width: 40px;
height: 40px;
}
.contact-info {
margin-left: 50px;
}
.contact-name {
display: block;
font-weight: bold;
margin-bottom: 2px;
}
.contact-department {
display: block;
font-size: 0.8em;
color: #555;
}
#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: 98%;
margin-left: 20px;
}
.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: 96%;
position: relative;
}
.message-time {
color: #666666;
font-size: 0.7em;
margin-right: 5px;
}
.read-indicator {
position: absolute;
right: 5px;
bottom: -5px;
width: 16px;
height: 10px;
background: url('http://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="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="contact-photo" alt="Иван">
<div class="contact-info">
<span class="contact-name">Евгений Сергеевич Николаев</span>
<span class="contact-department">Информационные технологии</span>
</div>
</div>
<div class="contact" onclick="switchChat(2)">
<img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="contact-photo" alt="Мария">
<div class="contact-info">
<span class="contact-name">Евгений Сергеевич Николаев2</span>
<span class="contact-department">Отдел кадров</span>
</div>
</div>
<div class="contact" onclick="switchChat(3)">
<img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="contact-photo" alt="Алексей">
<div class="contact-info">
<span class="contact-name">Евгений Сергеевич Николаев3</span>
<span class="contact-department">Бухгалтерия</span>
</div>
</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="http://blog.ivru.net/10-11/chatUserPhoto.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="http://blog.ivru.net/10-11/chatUserPhoto.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="http://blog.ivru.net/10-11/chatUserPhoto.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="http://blog.ivru.net/10-11/chatUserPhoto.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>'
};
// Функционал изменения ширины
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 < 150) newWidth = 150;
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 = '';
};
function switchChat(chatId) {
currentChat = chatId;
document.getElementById('chat-container').innerHTML = chats[chatId];
// Обновляем активный контакт
var contactElements = document.getElementsByClassName('contact');
for (var i = 0; i < contactElements.length; i++) {
contactElements[i].className = 'contact';
}
contactElements[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 = "http://blog.ivru.net/10-11/chatUserPhoto.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>
Другие товары
Вы так же можете прочитать следующие статьи:
- Гобелен "Загадочные сады Эдинбурга"
- Гобелен "Италия. Венеция. Каналы на закате"
- Гобелен "Дом-музей семьи Бубновых, город Иваново. История революционного прошлого"
- Гобелен "Исландия. Вулканическая долина с гейзерами"
- Гобелен «Шотландия. Замок Эйлен Донан на берегу озера Лох-Дуйх»
- Гобелен "Сад Кенroku-en: Японская гармония природы"
- Как работает концепция «точки сборки» и можно ли её смещать без наркотиков?
- Гобелен «Швейцария. Вид на Женевское озеро»
- Гобелен "Шотландия. Озеро Лох-Несс и древний замок Уркарт"
- Расширение Firefox передача информации о странице в случаи если для неё применяется проксирование
- Гобелен «Париж. Вид на Эйфелеву башню с Сены»
- Гобелен "Величие Сфинкса и Пирамид"
- Гобелен "Северное сияние в Исландии: Вечер в Ледниковой долине"
- Гобелен "Музей денег. Переславль-Залесский", Ярославская область
- Гобелен «Австралия. Великая Океанская Дорога. Скалы Двенадцать Апостолов»
- Почему учение дона Хуана стало популярным именно в 60-70-е годы?
- Гобелен «Венеция. Канал Гранде и Палаццо Дукале»
- Гобелен "Долина Луары: Величие французских замков"
- Гобелен «Швейцария. Озеро Люцерн и Альпы»
- Чем учение дона Хуана похоже на дзен-буддизм?