Skip to content

Instantly share code, notes, and snippets.

@soon

soon/messages.html

Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save soon/adfe7237d305ebe0c08a to your computer and use it in GitHub Desktop.
Save soon/adfe7237d305ebe0c08a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
messages.html
<!DOCTYPE html>
<!-- saved from url=(0072)http://planfact.ru/project.html?executedFunction=article&articleId=24126 -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Статья</title>
<link href="http://planfact.ru/custom.css" rel="stylesheet">
<link href="http://planfact.ru/osans.css" rel="stylesheet">
<style>
.update-button {
text-align: right;
padding: 5px 10px 5px 5px;
}
.update-button a {
text-decoration: blink;
}
.update-button a, .update-button a:link, .update-button a:visited {
color: #00A2E8;
}
.update-button a:hover {
color: #006b97;
}
.update-button a:active {
color: #00486a;
}
.contacts-list {
width: 30%;
float: left;
}
.messages-block {
width: 68%;
height: 60vh;
min-height: 500px;
border: 1px solid #a9a9a9;
float: right;
position: relative;
}
.contact {
border: 1px solid #a9a9a9;
padding: 5px;
margin-bottom: 5px;
}
.contact .last-entry {
padding: 10px;
padding-bottom: 5px;
font-size: 10pt;
color: #3f3f3f;
}
img.contact-img {
max-height: 50px;
max-width: 50px;
}
.messages-list .im-message {
padding: 5px;
}
.incoming {
background-color: #D3F5E2;
}
.sent {
background-color: #CCE5F6;
}
.message-username {
padding: 5px;;
font-weight: bold;
}
.incoming .message-username {
color: #2ECC71;
padding-left: 20px;
}
.sent .message-username {
color: #2980B9;
text-align: right;
padding-right: 20px;
}
.im-message .message-body {
padding: 10px 10px 0 40px;
}
.im-message .date {
text-align: right;
padding-bottom: 5px;
padding-right: 40px;
font-size: 10px;
}
.im-controls {
position: absolute;
bottom: 0;
}
.new-message-text {
float: left;
}
.new-message-text textarea {
width: 380px;
max-height: 100px;
min-height: 50px;
resize: vertical;
}
.send-button {
position: absolute;
bottom: 0;
right: -100px;
margin: 10px;
}
.send-button button {
width: 80px;
}
</style>
</head>
<body>
<div class="container"><div class="test">Тестовая версия</div>
<div class="main-search">
<div class="input">
<input class="main-input" type="text" id="searchText">
<select class="heading" id="searchCategory">
<option value="22974">Ремонт офисного помещения</option><option value="1">Дизайн</option><option value="2">Проектирование</option><option value="3">Строительство</option><option value="4">Ремонт жилого помещения</option></select>
<select class="location" id="searchCity">
<option value="4720">Пермь</option><option value="4713">Ныроб</option><option value="4690">Барда</option><option value="4691">Березники</option><option value="4692">Большая Соснова</option><option value="4693">Верещагино</option><option value="4694">Гайны</option><option value="4695">Горнозаводск</option><option value="4696">Гремячинск</option><option value="4697">Губаха</option><option value="4698">Добрянка</option><option value="4699">Елово</option><option value="4700">Зюкайка</option><option value="4701">Ильинский</option><option value="4702">Карагай</option><option value="4703">Керчевский</option><option value="4704">Кизел</option><option value="4705">Коса</option><option value="4706">Кочево</option><option value="4707">Красновишерск</option><option value="4708">Краснокамск</option><option value="4709">Кудымкар</option><option value="4710">Куеда</option><option value="4711">Кунгур</option><option value="4712">Лысьва</option><option value="4714">Нытва</option><option value="4715">Октябрьский</option><option value="4716">Орда</option><option value="4717">Оса</option><option value="4718">Оханск</option><option value="4719">Очер</option><option value="4721">Соликамск</option><option value="4722">Суксун</option><option value="4723">Уинское</option><option value="4724">Усолье</option><option value="4725">Усть-Кишерть</option><option value="4726">Чайковский</option><option value="4727">Частые</option><option value="4728">Чердынь</option><option value="4729">Чернореченский</option><option value="4730">Чернушка</option><option value="4731">Чусовой</option><option value="4732">Юрла</option><option value="4733">Юсьва</option></select>
<input type="button" value="Поиск" id="search" onclick="search()">
</div>
<div class="settings">
<label>
<input type="checkbox" id="searchInService">
Искать в услугах
</label>
<label>
<input type="checkbox" id="searchExecutive">
Искать исполнителя
</label>
<a id="advanced-search" href="http://planfact.ru/project.html?executedFunction=article&articleId=24126#">Расширенный поиск</a>
</div>
</div>
<div class="clear"></div>
<div class="content-place">
<div class="left-col">
<ul id="left-menu" hidden="hidden">
<li><a href="http://planfact.ru/index.html">Главная</a></li>
<li><a href="http://planfact.ru/myProfile.html?executedFunction=getMyProfile">Мой профиль</a></li>
<li><a href="http://planfact.ru/myMessages.html?executedFunction=myMessages">Мои сообщения</a></li>
<li><a href="http://planfact.ru/myFeedbacks.html?param=myFeedbacks" id="myFeedbacks">Мои отзывы</a></li>
</ul>
<form class="sign-in" id="auth">
<input type="text" id="login">
<input type="password" id="pass">
<p><input type="checkbox" id="stayLoggedIn">оставаться в системе</p>
<input type="button" value="Войти" onclick="auth()">
<a href="http://planfact.ru/reg.html?executedFunction=registration" class="registration-link">Регистрация</a>
</form>
<form class="sign-in" id="user" hidden="hidden">
</form>
</div>
<div class="right-col">
<div class="im">
<div class="update-button">
<a href="">Обновить</a>
</div>
<div class="contacts-list">
<div class="contact" id="contact_1">
<div class="contact-info">
<span class="contact-photo" >
<img src="http://planfact.ru/image/24153" alt="" class="contact-img"/>
</span>
<span class="contact-name">
Вася Пупкин
</span>
</div>
<div class="last-entry">
Был на сайте: 08.04.2015 00:00
</div>
</div>
<div class="contact" id="contact_2">
<div class="contact-info">
<span class="contact-photo" >
<img src="http://planfact.ru/image/24153" alt="" class="contact-img"/>
</span>
<span class="contact-name">
Вася Пупкин
</span>
</div>
<div class="last-entry">
Был на сайте: 05.04.2015 00:00
</div>
</div>
<div class="contact" id="contact_3">
<div class="contact-info">
<span class="contact-photo" >
<img src="http://planfact.ru/image/24153" alt="" class="contact-img"/>
</span>
<span class="contact-name">
Вася Пупкин
</span>
</div>
<div class="last-entry">
Был на сайте: 02.04.2015 00:00
</div>
</div>
</div>
<div class="messages-block">
<div class="messages-list">
<div class="incoming im-message">
<div class="message-username">
Анна
</div>
<div class="message-body">Предлагаю недорогой дизайн вашей квартиры</div>
<div class="date">23:44 20.04.15</div>
</div>
<div class="sent im-message">
<div class="message-username">
Андрей Мастер
</div>
<div class="message-body">Спасибо, уже есть!</div>
<div class="date">23:48 20.04.15</div>
</div>
</div>
<div class="im-controls">
<div class="new-message-text">
<textarea></textarea>
</div>
<div class="send-button">
<button>Отправить</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment