-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchat.html
150 lines (149 loc) · 4.77 KB
/
chat.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
138
139
140
141
142
143
144
145
146
147
148
149
150
// jQuery based front end to dfisplay a UI to the user. This will allow both the input and retrieval of messages
// This code has been borrowed from the book: 'PHP and MySQL Web Development' 5th Edition by Luke Welling and Laura Thomson
// Chapter 23 'Integrating JavaScript and PHP' pg 511-514
// 'Bubbler' used for CSS by John Clifford https://www.ilikepixels.co.uk/bubbler-css-speech-bubble-generator/
<!DOCTYPE html>
<html>
<head>
<title>AJAX Chat</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<style>
.bubble-recv
{
position: relative;
width: 330px;
height: 75px;
padding: 10px;
background: #AEE5FF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #000000 solid 1px;
margin-bottom: 10px;
}
.bubble-recv:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #AEE5FF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 12px;
}
.bubble-recv:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 0;
left: -16px;
top: 12px;
}
.bubble-sent
{
position: relative;
width: 330px;
height: 75px;
padding: 10px;
background: #00E500;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #000000 solid 1px;
margin-bottom: 10px;
}
.bubble-sent:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #00E500;
display: block;
width: 0;
z-index: 1;
right: -15px;
top: 12px;
}
.bubble-sent:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 0;
right: -16px;
top: 12px;
}
.spinner {
display: inline-block;
opacity: 0;
width: 0;
-webkit-transition: opacity 0.25s, width 0.25s;
-moz-transition: opacity 0.25s, width 0.25s;
-o-transition: opacity 0.25s, width 0.25s;
transition: opacity 0.25s, width 0.25s;
}
.has-spinner.active {
cursor:progress;
}
.has-spinner.active .spinner {
opacity: 1;
width: auto;
}
.has-spinner.btn-mini.active .spinner {
width: 10px;
}
.has-spinner.btn-small.active .spinner {
width: 13px;
}
.has-spinner.btn.active .spinner {
width: 16px;
}
.has-spinner.btn-large.active .spinner {
width: 19px;
}
.panel-body {
padding-right: 35px;
padding-left: 35px;
}
</style>
</head>
<body>
<h1 style="text-align:center">AJAX Chat</h1>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Let's Chat</h2>
</div>
<div class="panel-body" id="chatPanel">
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control" id="chatMessage" placeholder="Send a message here..."/>
<span class="input-group-btn">
<button id="sendMessageBtn" class="btn btn-primary has-spinner" type="button">
<span class="spinner"><i class="icon-spin icon-refresh"></i></span>
Send
</button>
</span>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="client.js"></script>
</body>
</html>