PageRenderTime 43ms CodeModel.GetById 10ms RepoModel.GetById 0ms app.codeStats 0ms

/websocket/webroot/chat.html

https://gitlab.com/lcp0578/zphpdemo
HTML | 137 lines | 90 code | 21 blank | 26 comment | 0 complexity | d03b8d8ddeb91602997ef748d7f79d0e MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5. <title>swoole websocket chatroom</title>
    6. 

  6. <link href="static/css/bootstrap.css" rel="stylesheet">
    7. 

  7. <link href="static/css/chat.css" rel="stylesheet">
    8. 

  8. <style>
    9. 

  9. body {
    10. 

  10. 	padding-top: 60px;
    11. 

  11. }
    12. 

  12. </style>
    13. 

  13. <!-- <link href="/static/css/bootstrap-responsive.css" rel="stylesheet"> -->
    14. 

  14. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    15. 

  15. <!--[if lt IE 9]>
    16. 

  16.    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    17. 

  17. <![endif]-->
    18. 

  18. 

  19. 

  20. </head>
    21. 

  21. <body>
    22. 

  22. 	<div class="navbar navbar-fixed-top">
    23. 

  23. 		<div class="navbar-inner">
    24. 

  24. 			<div class="container-fluid">
    25. 

  25. 				<a class="brand" href="/">zphp webscoket Chatting--技术测试项目</a>
    26. 

  26. 			
    27. 

  27. 				<div class="nav-collapse">
    28. 

  28. 					<!--             <ul class="nav">
    29. 

  29. 		  <li class="active"><a href="/">Lobby</a></li>
    30. 

  30. 		</ul> -->
    31. 

  31. 					<ul class="nav pull-right">
    32. 

  32. 

  33. 					</ul>
    34. 

  34. 				</div>
    35. 

  35. 				<!--/.nav-collapse -->
    36. 

  36. 			</div>
    37. 

  37. 		</div>
    38. 

  38. 	</div>
    39. 

  39. 

  40. 	<div class="container">
    41. 

  41. 		<div class="container"  >
    42. 

  42. 			<div class="row" >
    43. 

  43. 			
    44. 

  44. 				<!--主聊天区-->
    45. 

  45. 				<div id="chat-column" class="span8">
    46. 

  46. 				
    47. 

  47. 					<!-- 
    48. 

  48. 					<div id="chat-tool" style="height:100px;border:0px solid #ccc;">
    49. 

  49. 						个人资料区
    50. 

  50. 					</div>
    51. 

  51. 					-->
    52. 

  52. 					
    53. 

  53. 					<!--消息显示区-->
    54. 

  54. 					<div id="chat-messages"  style="border:0px solid #ccc;">
    55. 

  55. 						<div class="message-container">
    56. 

  56. 						</div>
    57. 

  57. 					</div>
    58. 

  58. 					
    59. 

  59. 					
    60. 

  60. 					
    61. 

  61. 					<!--工具栏区-->
    62. 

  62. 					<div id="chat-tool" style="padding-left:10px;height:30px;border:0px solid #ccc;background-color:#F5F5F5;">
    63. 

  63. 						<select id="userlist" style="float: left; width: 90px;">
    64. 

  64. 							<option value=0>所有人</option>
    65. 

  65. 						</select>
    66. 

  66. 						
    67. 

  67. 						<!-- 聊天表情 -->
    68. 

  68. 						<a  onclick="toggleFace()" id="chat_face" class="chat_face" >
    69. 

  69. 							<img src="static/img/face/15.gif" />
    70. 

  70. 						</a>
    71. 

  71. 					</div>
    72. 

  72. 					<!--工具栏结束-->
    73. 

  73. 

  74. 

  75. 					<!--聊天表情弹出层-->
    76. 

  76. 					<div id="show_face" class="show_face" >
    77. 

  77. 					</div>
    78. 

  78. 					<!--聊天表情弹出层结束-->
    79. 

  79. 					
    80. 

  80. 

  81. 					<!--发送消息区-->
    82. 

  82. 					<div id="input-msg" style="height:110px;border:0px solid #ccc;">
    83. 

  83. 						<form id="msgform" class="form-horizontal post-form">
    84. 

  84. 							<div class="input-append" >
    85. 

  85. 									<textarea id="msg_content" style="width:500px;height:80px;" rows="3" cols="500" contentEditable="true"></textarea>
    86. 

  86. 									<img style="width:80px;height:90px;"  onclick="sendMsg()" style="" src="static/img/button.gif" />
    87. 

  87. 							</div>
    88. 

  88. 						</form>
    89. 

  89. 					</div>
    90. 

  90. 				</div>
    91. 

  91. 				<!--主聊天区结束-->
    92. 

  92. 				
    93. 

  93. 				
    94. 

  94. 				<!--左边栏-->
    95. 

  95. 				
    96. 

  96. 				<div id="left-column" class="span3">
    97. 

  97. 					<div class="well c-sidebar-nav">
    98. 

  98. 						<ul class="nav nav-list">
    99. 

  99. 							<li class="nav-header">Chats</li>
    100. 

  100. 							<li class="active"><a href="javascript:void(0)">In Room</a>
    101. 

  101. 							</li>
    102. 

  102. 						</ul>
    103. 

  103. 					   <ul id="left-userlist">
    104. 

  104. 					   </ul>
    105. 

  105. 					   <div style="clear: both"></div>
    106. 

  106. 					</div>
    107. 

  107. 				</div>		
    108. 

  108. 				
    109. 

  109. 			</div>
    110. 

  110. 		</div>
    111. 

  111. 		<!-- /container -->
    112. 

  112. 		<div id="msg-template" style="display: none">
    113. 

  113. 			<div class="message-container">
    114. 

  114. 				<div class="userpic"></div>
    115. 

  115. 				<div class="message">
    116. 

  116. 					<span class="user"></span>
    117. 

  117. 					<div class="cloud cloudText">
    118. 

  118. 						<div style="" class="cloudPannel">
    119. 

  119. 							<div class="sendStatus"></div>
    120. 

  120. 							<div class="cloudBody">
    121. 

  121. 								<div class="content" ></div>
    122. 

  122. 							</div>
    123. 

  123. 							<div class="cloudArrow "></div>
    124. 

  124. 						</div>
    125. 

  125. 					</div>
    126. 

  126. 				</div>
    127. 

  127. 				<div class="msg-time"></div>
    128. 

  128. 			</div>
    129. 

  129. 		</div>
    130. 

  130. 		<!-- / -->
    131. 

  131. 	</div>
    132. 

  132. </body>
    133. 

  133. <script type="text/javascript" src="static/js/jquery.js"></script>
    134. 

  134. <script type="text/javascript" src="static/js/jquery.json.js" ></script>
    135. 

  135. <script type="text/javascript" src="static/js/chat.js"></script>
    136. 

  136. </html>
    137. 

  137. 

  138.