html/ui.html

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>WE ui.CK.Huang</title>
	<link rel="stylesheet" href="../public/bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/all.css">
</head>
<body>
	
	<div class="top">
	
	<ul class="top-nav f-r">
		<li class="drop-down">
			<a href="#" class="account">
				<span>HELLO的帐号</span>
				<span class="arrow"></span>
			</a>
			<div class="drop-down-items">
				<ul>
					<li><a href="javascript:;" id="username">修改昵称</a></li>
					
						<li><a href="javascript:;" id="bindmail">绑定Email</a></li> 
					
					<li><a href="javascript:;" id="chatme">我参与过的对话</a></li>
					<li><a href="/sys/login">切换用户</a></li>
				</ul>
			</div>
		</li>
	</ul>
	
	<ul class="top-nav">
		<li><a href="/">Vchat</a></li>
		<li><a href="/">创建对话</a></li>
	</ul>
</div>
	
	<div class="container">
		<div class="bd">
			<div class="side">
				
				<div class="room">
					<h1 class="topic">Vchat开发讨论 <span class="icon icon-edit" title="修改"></span></h1>
					<p class="des">
						记录webChat开发过程，和一些想法。期待您的建议 , 需要测试请移步
						<a href="http://vchat.co/test">http://vchat.co/test</a>
					</p>
					
					
				</div>
				
				<div class="">
					<p>创建者：<a href="#">lujun</a></p>
					<p>地址：<a href="#">http://vchat.co/test</a></p>
				</div>
				
				<div class="user-list">
					<div class="title">Online</div>
					<div class="list">
						<ul class="reset clear-fix" id="userlist"><li id="uid_5146769b054d718b86000001"><a href="#" title="HELLO"> <img src="http://www.gravatar.com/avatar/c0c877a97bda6226a02bfae0e8e91771.jpg?s=48&amp;d=monsterid" width="32"> </a></li></ul>
					</div>
				</div>
				
				<div class="user-list">
					<div class="title">Offline</div>
					<div class="list">
						<ul class="reset clear-fix" id="userlist"><li id="uid_5146769b054d718b86000001"><a href="#" title="HELLO"> <img src="http://www.gravatar.com/avatar/c0c877a97bda6226a02bfae0e8e91771.jpg?s=48&amp;d=monsterid" width="32"> </a></li></ul>
					</div>
				</div>
				
			</div>
			<div class="main">
				
				
				<div class="chats">
					
					
					<div class="timeline"></div>
					<div class="chat">
						<div class="dot my"></div>
						<div class="photo">
							<a href="#" title="点击换一个头像" >
								<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
							</a>
						</div>
							
						<div class="info">	
							<div class="post-box">
								<div class="post-box-in" id="postboxIn">
									<div class="post-text-box">
										<textarea class="post-text" id="postText" name="text"></textarea>
									</div>
									<div class="btns">
										<div class="btn-group" id="postTypeGroup">
											<button class="btn" disabled tabindex="-1" type="submit">发送中...</button>
										</div> 
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="chat-list">
						<div class="time-search-box">
							<div class="time-search">
								<ul>
									<li><a href="#" class="time-name on">Now</a></li>
									<li><a href="#" class="time-name">10:00</a></li>
									<li><a href="#" class="time-name">9:00</a></li>
									<li><a href="#" class="time-name">更早</a></li>
								</ul>
							</div>
						</div>
						
						<div class="chat" style="margin-bottom:20px;">
							<div class="dot"></div>
							<div class="time-tag"><h4>2009年</h4></div>
						</div>
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#" >
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#" class="name">lujun</a>
								</div>
								<div class="context">
									<div class="reply-quote">
										2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
										2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
										2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
										2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
									</div>
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						<div class="chat">
							<div class="dot my"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
									<p>
										<a href="#">回应</a>
									</p>
								</div>
							</div>
						</div>
						
						<div class="chat" style="margin-bottom:20px;">
							<div class="time-tag"><h4>1月</h4></div>
						</div>
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
						
						<div class="chat">
							<div class="dot"></div>
							<div class="photo">
								<a href="#">
									<img src="http://img3.douban.com/icon/u67009572-6.jpg" alt="hello" />
								</a>
							</div>
							<div class="info">
								<div class="head">
									<a href="#">lujun</a>
								</div>
								<div class="context">
									2013.3.7星期四。山西 晴。上海 晴。北京 多云转晴。╮(╯▽╰)╭啦儿啦儿啦。 再见。深藏功与名！！！
								</div>
							</div>
						</div>
						
					</div>
					
				</div>
				
				
			</div>
		</div>
	</div>
	
	<div class="footer">
		
	</div>
</body>
</html>