-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (107 loc) · 4.34 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
138
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bate Papo</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Import socket.io.js -->
<script src="/socket.io/socket.io.js"></script>
<!-- Import jquery-1.11.1.js -->
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>
#bottom-menu { background-color: white; position: fixed; bottom: 0; width: 100%;}
#messages {list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background-color: gray; }
</style>
</head>
<body>
<section id="login-menu">
<div class="container">
<h2>Entrar</h2>
<input type="text" id="username" placeholder="Entre com o nome">
<input type="text" id="room" placeholder="Entre com o nome da sala">
<a id="btnLogin" class="waves-effect waves-light btn green">Entrar</a>
</div>
</section>
<section id="chat">
<!-- nav menu -->
<nav>
<div class="nav-wrapper green">
<a href="#" class="brand-logo">Bate Papo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a id="btnExitAfter10sec"><i class="material-icons right">exit_to_app</i>+10 segundos</a></li>
<li><a id="btnExit" href=""><i class="material-icons right">exit_to_app</i>Sair</a></li>
</ul>
</div>
</nav>
<ul id="messages"></ul>
<div id="bottom-menu" class="row">
<div class="col s11 m11 l11">
<input id="m" autocomplete="off" />
</div>
<div class="col s1 m1 l1">
<a id="btnSend" class="waves-effect waves-light btn green">Enviar</a>
</div>
</div>
</section>
<script>
$(function () {
if(sessionStorage.getItem("logging") == "true") {
var socket = io();
socket.emit('connection', sessionStorage.getItem("username"), sessionStorage.getItem("room"));
$("#btnSend").click(function(){
socket.emit('chat message', sessionStorage.getItem("username"), $('#m').val(), sessionStorage.getItem("room"));
$('#m').val('');
return false;
});
function exit() {
socket.emit('exit', sessionStorage.getItem("username"), sessionStorage.getItem("room"));
$('#m').val('');
sessionStorage.setItem("username", "");
sessionStorage.setItem("room", "");
sessionStorage.setItem("logging", "false");
window.location.replace("http://127.0.0.1:3000");
}
$("#btnExit").click(function(){
exit();
});
$("#btnExitAfter10sec").click(function(){
setTimeout(function() {
exit();
}, 3000);
});
socket.on('chat message', function(username, msg, room){
$('#messages').append($('<li>').text(username +" > " + msg));
});
}
});
</script>
<script type="text/javascript">
if(sessionStorage.getItem("logging") == "true") {
var loginMenu = document.getElementById("login-menu");
loginMenu.style.display = "None";
} else {
var chat = document.getElementById("chat");
chat.style.display = "None";
}
var btnLogin = document.getElementById("btnLogin");
btnLogin.addEventListener("click", function(event) {
var username = document.getElementById("username").value;
var room = document.getElementById("room").value;
sessionStorage.setItem("username", username);
sessionStorage.setItem("room", room);
sessionStorage.setItem("logging", true);
var loginMenu = document.getElementById("login-menu");
var chat = document.getElementById("chat");
loginMenu.style.display = "None";
chat.style.display = "block";
window.location.replace("http://127.0.0.1:3000");
});
</script>
</body>
</html>