snowchat/index.html at master · ehomesprite/snowchat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ajichat</title>

	<!--CSS-->
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
	<!--<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.css"/>-->
	<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="lib/custom scroll/jquery.mCustomScrollbar.css" />
	<link rel="stylesheet" href="css/style.css" />

	<!--JAVASCRIPT-->
	<script src="lib/bootstrap/js/jquery-3.1.1.js"></script>
	<script src="lib/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="js/vue.js" ></script>
	<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
	<!--[if lte IE 9]>
      <script src="lib/bootstrap/js/html5shiv.min.js"></script>
      <script src="lib/bootstrap/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!--header-->
	<header id="header">
		<nav class="navbar" role="navigation">
			<div class="container">

				<div class="navbar-header">
					<a class="navbar-brand" href="javascript:void(0)">
						<!--logo-->
						无名聊天室
					</a>
				</div>

				<div class="nav navbar-right">
					hello {{username}}
				</div>

			</div>
		</nav>
	</header>

	<!--main-->
	<div id="main">
		<div class="container">
			<div class="row">

				<!--chating viewport-->
				<div class="col-sm-8">
					<section class="chatWindow panel">
						<div class="panel-heading">
							聊天窗口
						</div>
						<div class="panel-body box">
							<div class="wrap">
								<div class="message" :class="{myMessage:obj.self,console:obj.isConsole}" v-for="obj in msg" v-cloak>
									<div class="messageUserLogo">
										<img src="" alt="logo" />
									</div>
									<div class="messageText bg-primary">
										{{obj.msg}}
									</div>
									<div class="messageUserName">
										{{obj.username}}
									</div>
								</div>
							</div>
						</div>
					</section>

					<!--input-->
					<section class="inputWindow panel">
						<div class="toolbar">
							<a href="javascript:void(0)" class="btn" @click="emojiListTrigger">表情</a>
							<div class="toolSubContent emojiList" v-show="emojiListShow">
								<div class="container-fluid">
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" v-for="obj in emojiList"><a :href="'#'+obj.category" role="tab" data-toggle="tab">{{obj.category}}</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active container-fluid" role="tabpanel" :id="obj.category" v-for="obj in emojiList">
											<div class="row">
												<div class="col-custom" v-for="emoji in obj.emoji">
													<a href="javascript:void(0)" :title="emoji.desc" @click="emojiInsert(obj.category,emoji.name)"><img :src="'img/'+obj.category+'/'+emoji.name+'.png'" alt="emoji" class="img-responsive"/></a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<textarea id="sendText"></textarea>
						<button class="btn  btn-primary pull-right" v-on:click="send">发送</button>
					</section>
				</div>

				<!--online user-->
				<div class="col-sm-4">
					<section class="onlineUserList panel hidden-xs">
						<div class="panel-heading">
							在线用户
						</div>
						<div class="panel-body">
							<p class="onlineUser" v-cloak v-for="obj in userlist">
								{{obj.username}}
							</p>
						</div>
					</section>
				</div>
			</div>
		</div>
	</div>

	<!--footer-->
	<footer>
		<div class="container">
			<p class="text-center"> snowchat with boostrap & vue.  Copyright &copy; 2017 by ehomesprite(snowdrop) & Lidy. All Rights Reserved. </p>
		</div>
	</footer>

<!--My js-->
<script src="lib/custom scroll/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="js/setting.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script>
	$(".box").mCustomScrollbar({
		theme:'dark',
	});
</script>
</body>
</html>