-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
137 lines (120 loc) · 7.12 KB
/
index.html
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
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat-O</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body style="background-color:#eee">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Welcome to Chat-O <small>One place for all</small></h3>
<h4 class="text-center"><a href="/howto" target="_blank">TCP Client : How to</a></h4>
<div class="row" style="padding:20px">
<div class="col-md-4">
<button id="idChatRoomButton" class="btn btn-danger btn-sm" type="button" data-toggle="collapse" data-target="#collapseRooms" aria-expanded="false" aria-controls="collapseRooms">
Show available chat rooms
</button>
<button id="idAddChatRoomButton" class="btn btn-danger btn-sm" type="button" data-toggle="collapse" data-target="#addRooms" aria-expanded="false" aria-controls="addRooms">
Add Chat Room
</button>
<div class="collapse well" id="addRooms">
<b style="font-size:11px">Add a room here</b>
<form id="newRoomSubmit" class="form-inline">
<div class="form-group">
<label for="newRoom">Room</label>
<input type="text" required="true" class="form-control" id="newRoom" placeholder="Adding a new Fort?">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
<div class="collapse" id="collapseRooms">
<b style="font-size:11px"> Showing Available Chat Rooms(Press button again to refresh) </b>
<div class="well">
<ul id="idChatRoomList">
</ul>
</div>
<h4 ><span class="label label-primary" id="userRoom"></span></h4>
<h4 ><span class="label label-primary" id="userPrivateChat"></span></h4>
</div>
</div>
<div class="col-md-4">
<div id="privateChatModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">A fellow from gryffindor wants to chat with you</h4>
</div>
<div class="modal-body">
<p id="privateChatRequest"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Duh,I like Slytherins!</button>
<button type="button" id="acceptRequestButton" class="btn btn-primary">I love gryffindor!</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">A door does not unlock without the key...</h4>
</div>
<div class="modal-body">
<form id="enterLoginNameForm" style="padding:30px" >
<div class="form-group">
<label for="loginName">Login with a nickname</label>
<div id="nameExistsId" class="alert alert-warning alert-dismissible hidden" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>The house of elrond apologizes!</strong> That name seems to be taken!! </div>
<input type="message" class="form-control" id="loginName" placeholder="Are you Ara.....gorn?" />
</div>
<button type="submit" class="btn btn-primary pull-right">Enter Chat-O</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="refresh" class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Refreshing the window will log you out !! </div>
<textarea style="border-color:#4f9fcf; font-size:11px; font-style:bold" class="form-control" id="messages" rows="16" readonly="true" placeholder="No messages yet"></textarea>
<form id="sendMessageForm" style="padding:30px" >
<h4 ><span class="label label-primary" id="userLoggedIn"></span></h4>
<div class="form-group">
<label for="messageByUser">Message</label>
<input type="message" class="form-control" id="messageByUser" placeholder="Start Typing....">
</div>
<button type="submit" class="btn btn-success pull-right">Send</button>
</form>
<div class="row">
<div class="col-md-4" style="margin-left:50px ;margin-top:50px">
<img src="images/node.png" alt="NodeJS" width="120px" height="60px" class="img-responsive img-circle">
<img src="images/socketio.png" alt="SocketIO" width="120px" height="60px" class="img-responsive img-circle">
</div>
<div class="col-md-4" style="margin-left:50px ; margin-top:50px">
<img src="images/bootstrap.png" alt="Bootstrap" width="120px" height="60px" class="img-responsive img-circle">
<img src="images/jquery.png" alt="jQuery" width="120px" height="60px" class="img-responsive img-circle">
</div>
</div>
</div>
<div class="col-md-4">
<h4 ><span style="margin-bottom:20px" class="label label-primary" id="totalUsersOnline"></span></h4>
<div id="usersDiv" class="hidden">
<h4 ><span style="margin-bottom:20px" class="label label-primary" id="totalUsersOnline">Available users in chat room</span></h4>
<div class="collapse" id="collapseUsers">
<div class="well">
<ul id="idUserList">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>