flex/chat_page.html
2018-04-27 12:13:19 +02:00

188 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les gens</title>
<meta charset="UTF-8">
<meta name="descriptions" content="">
<meta name="keywords" content="Les gens">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="container">
<aside>
<div>
<input type="text" placeholder="search">
<a href="#"><img src="assets/images/ico_search.png"></a>
</div>
<ul>
<li>
<a href="#">
<img src="assets/images/chat_avatar_01.jpg"/>
<div>
<h4>Vincent Porter</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_02.jpg"/>
<div><h4>Aiden Chavez</h4>
<p>
<span class="status offline"></span>left 7 min ago
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_03.jpg"/>
<div><h4>Mike Thomas</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_04.jpg"/>
<div><h4>Erika Hughes</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_05.jpg"/>
<div><h4>Ginger Jonston</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_06.jpg"/>
<div><h4>Tracy Carpenter</h4>
<p>
<span class="status offline"></span>left 30 min ago
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_07.jpg"/>
<div><h4>Christian Kelly</h4>
<p>
<span class="status offline"></span>left 10 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_08.jpg"/>
<div><h4>Monica Ward</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_09.jpg"/>
<div><h4>Dean Henry</h4>
<p>
<span class="status offline"></span>offline since Oct 28
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_10.jpg"/>
<div><h4>Peyton Mckinney</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
<li>
<a href="#"> <img src="assets/images/chat_avatar_03.jpg"/>
<div><h4>Robin Llopis</h4>
<p>
<span class="status online"></span>online
</p>
</div>
</a>
</li>
</ul>
</aside>
<main>
<header>
<img src="assets/images/chat_avatar_01.jpg"/>
<div>
<h3>Chat with Vincent Porter</h3>
<p>
<span class="status online"></span>allready 1902 messages
</p>
</div>
<img id="star" src="assets/images/ico_star.png" height="53" width="48"/>
</header>
<div>
<section class="comment interlocutor">
<p>
<span class="status online"></span><strong>Vincent</strong> 10:12 AM, Today
</p>
<p>Are we meeting today? Project has been already
finiched and I have results to show you</p>
</section>
<section class="comment interlocutor">
<p>
<span class="status online"></span><strong>Vincent</strong> 10:12 AM, Today
</p>
<p>Are we meeting today? Project has been already
finiched and I have results to show you</p>
</section>
<section class="comment self">
<p>
10:14 AM, Today <strong>Olia</strong><span class="status blue"></span>
</p>
<p>Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any
problems at the last phase of the project</p>
</section>
<section class="interlocutor">
<p>
<span class="status online"></span><strong>Vincent</strong> 10:20 AM, Today
</p>
<p>Actually everything was fine. I'm very exited to show this our team.</p>
</section>
<section class="interlocutor">
<p>
<span class="status online"></span><strong>Vincent</strong> 10:22 AM, Today
</p>
<span class="waiting green1"></span>
<span class="waiting green2"></span>
<span class="waiting green3"></span>
</section>
</div>
<footer>
<textarea name="post_message"></textarea>
<div>
<a href="#">
<img src="assets/images/ico_picture.png"/>
</a>
<a href="#">
<img src="assets/images/ico_file.png"/>
</a>
<p>send</p>
</div>
</footer>
</main>
</div>
</body>
</html>