Skip to content

Commit 4e3204d

Browse files
tomFlidrtomFlidr
committed
base
1 parent 2cb4a44 commit 4e3204d

15 files changed

Lines changed: 2455 additions & 2 deletions

‎.gitignore‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Windows image file caches
2+
Thumbs.db
3+
ehthumbs.db
4+
5+
# Folder config file
6+
Desktop.ini
7+
8+
# Recycle Bin used on file shares
9+
$RECYCLE.BIN/
10+
11+
# Windows Installer files
12+
*.cab
13+
*.msi
14+
*.msm
15+
*.msp
16+
17+
# Windows shortcuts
18+
*.lnk
19+
20+
# =========================
21+
# Operating System Files
22+
# =========================
23+
24+
# OSX
25+
# =========================
26+
27+
.DS_Store
28+
.AppleDouble
29+
.LSOverride
30+
31+
# Thumbnails
32+
._*
33+
34+
# Files that might appear in the root of a volume
35+
.DocumentRevisions-V100
36+
.fseventsd
37+
.Spotlight-V100
38+
.TemporaryItems
39+
.Trashes
40+
.VolumeIcon.icns
41+
42+
# Directories potentially created on remote AFP share
43+
.AppleDB
44+
.AppleDesktop
45+
Network Trash Folder
46+
Temporary Items
47+
.apdisk
48+
49+
# subversion
50+
.svn
51+
.svnignore
52+
53+
# mercurial
54+
.hg
55+
.hgignore
56+
.hgtags
57+
58+
# third party node modules
59+
node_modules

‎LICENCE.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
BSD 3-Clause License
2+
3+
Copyright (c) 2017, Web Development Node.js Server
4+
All rights reserved.
5+
6+
Redistribution and use in source and binary forms, with or without
7+
modification, are permitted provided that the following conditions are met:
8+
9+
* Redistributions of source code must retain the above copyright notice, this
10+
list of conditions and the following disclaimer.
11+
12+
* Redistributions in binary form must reproduce the above copyright notice,
13+
this list of conditions and the following disclaimer in the documentation
14+
and/or other materials provided with the distribution.
15+
16+
* Neither the name of the copyright holder nor the names of its
17+
contributors may be used to endorse or promote products derived from
18+
this software without specific prior written permission.
19+
20+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
1-
# chat-example-pure-js
2-
Chat example with session authentication in pure Javascript.
1+
# Example - Chat
2+
3+
[![Latest Stable Version](https://img.shields.io/badge/Stable-v1.0.0-brightgreen.svg?style=plastic)](https://github.com/web-dev-server/example-chat/releases)
4+
[![License](https://img.shields.io/badge/Licence-BSD-brightgreen.svg?style=plastic)](https://mvccore.github.io/docs/mvccore/4.0.0/LICENCE.md)
5+
6+
Chat example with session authentication. Client scripts written with pure Javascript, no framework needed.
7+
8+
## Instalation
9+
```shell
10+
npm install web-dev-server/chat-example-pure-js
11+
```
12+
13+
## Usage
14+
```shell
15+
node run-server.js
16+
```
17+
- open your first web browser on:
18+
- http://localhost:8000/chat/
19+
- login with any user and password located in `chat/data/login-data.csv`
20+
- open your second web browser on:
21+
- http://localhost:8000/chat/
22+
- login with any user and password located in `chat/data/login-data.csv`
23+
- chat between browsers

‎chat/css/style.css‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
html,body,input,select,label,td,th{
2+
font-family:Arial,helvetica;
3+
font-size:14px;
4+
line-height:1.4em;
5+
}
6+
html,body {
7+
margin:0;
8+
min-height:100%;
9+
background-color:#efeff4;
10+
}
11+
*:focus {
12+
outline:none;
13+
}
14+
15+
form.login-form{
16+
position:absolute;
17+
top:calc(50% - (140px / 2));
18+
left:calc(50% - ((340px + 20px + 20px) / 2));
19+
display:block;
20+
width:340px;
21+
padding:20px;
22+
background:#3d3d3d;
23+
border-radius:5px;
24+
}
25+
form.login-form label{
26+
display:block;
27+
margin:0 0 10px 0;
28+
color:#fff;
29+
}
30+
form.login-form input[type=text]{
31+
width:220px;
32+
border-radius:4px;
33+
border:1px solid #c5c5c9;
34+
padding:3px 5px;
35+
margin:5px 0 0 0;
36+
}
37+
form.login-form input[type=submit]{
38+
width:100px;
39+
border-radius:4px;
40+
border:1px solid #c5c5c9;
41+
padding:3px 5px;
42+
}
43+
44+
.chat-room{
45+
display:none;
46+
}
47+
.chat-room .header{
48+
position:absolute;
49+
top:0;
50+
height:30px;
51+
width:100%;
52+
background:#3d3d3d;
53+
font-size:12px;
54+
line-height: 28px;
55+
color:#fff;
56+
}
57+
.chat-room .header b{
58+
text-align:left;
59+
margin-left:10px;
60+
}
61+
.chat-room .header span {
62+
float:right;
63+
margin-right:10px;
64+
}
65+
.chat-room .header a {
66+
float:right;
67+
margin-right:10px;
68+
color:#fff;
69+
}
70+
.chat-room .header a span{
71+
float:none;
72+
margin-right:0;
73+
color:#000;
74+
}
75+
76+
.chat-content{
77+
position:absolute;
78+
top:30px;
79+
bottom:120px;
80+
width:100%;
81+
}
82+
.online-users{
83+
font-size:80%;
84+
margin:10px;
85+
}
86+
.messages{
87+
overflow-y: auto;
88+
position: absolute;
89+
top: 0px;
90+
bottom: 0px;
91+
width: 100%;
92+
height: 100%;
93+
overflow-x: hidden;
94+
}
95+
96+
.message.notify{
97+
clear:both;
98+
margin: 5px 0;
99+
color:#888;
100+
font-size: 10px;
101+
font-style: italic;
102+
text-align: center;
103+
}
104+
.message.content.current{
105+
float: right;
106+
text-align: right;
107+
margin: 5px 10px 5px 0;
108+
}
109+
.message.content.other{
110+
float: left;
111+
text-align: left;
112+
margin: 5px 0 5px 10px;
113+
}
114+
.message.content{
115+
clear:both;
116+
}
117+
.message.content div{
118+
max-width: 225px;
119+
position: relative;
120+
display: inline-block;
121+
padding: 8px;
122+
text-align: left;
123+
border-radius: 10px;
124+
color: #fff;
125+
vertical-align: top;
126+
word-break: break-all;
127+
}
128+
.message.content.current div{
129+
box-shadow: inset 0 0 1px #007aff;
130+
background-color: #007aff;
131+
}
132+
.message.content.other div{
133+
box-shadow: inset 0 0 1px #00a617;
134+
background-color: #00a617;
135+
}
136+
.message.content div:before{
137+
content: "";
138+
position: absolute;
139+
top: 4px;
140+
width: 0;
141+
height: 0;
142+
border-top: solid transparent;
143+
border-bottom: 4px solid transparent;
144+
}
145+
.message.content.current div:before{
146+
right: -5px;
147+
border-left: 7px solid #007aff;
148+
}
149+
.message.content.other div:before{
150+
left: -5px;
151+
border-right: 7px solid #00a617;
152+
}
153+
.message.content span{
154+
font-weight: normal;
155+
font-size: 10px;
156+
color: #f60;
157+
overflow: hidden;
158+
display: block;
159+
}
160+
.message.notify span{
161+
display: hidden;
162+
}
163+
164+
form.message-form{
165+
position:absolute;
166+
bottom:0;
167+
height:120px;
168+
width:100%;
169+
background:#3d3d3d;
170+
}
171+
form.message-form .message-cont{
172+
position:absolute;
173+
left:10px;
174+
top:10px;
175+
bottom:50px;
176+
right:calc(150px + 10px + 10px + 10px);
177+
}
178+
form.message-form .message-cont textarea{
179+
width:calc(100% - 10px);
180+
height:calc(100% - 10px);
181+
padding:5px 10px;
182+
border-radius:4px;
183+
}
184+
form.message-form .recepients{
185+
position: absolute;
186+
color: #fff;
187+
bottom: 13px;
188+
left: 10px;
189+
overflow:hidden;
190+
}
191+
form.message-form .recepients div{
192+
float: left;
193+
margin-right: 20px;
194+
}
195+
form.message-form button{
196+
position:absolute;
197+
top:10px;
198+
right:10px;
199+
bottom:10px;
200+
width:150px;
201+
border:1px solid #c5c5c9;
202+
border-radius:4px;
203+
font-size:130%;
204+
}

0 commit comments

Comments
 (0)