Skip to content

Commit f9ae7e6

Browse files
mariosantosdevmariosantosdev
committed
create html template
1 parent 2387228 commit f9ae7e6

File tree

1 file changed

+148
-0
lines changed

1 file changed

+148
-0
lines changed

‎templates/index.html

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Chat em Tempo Real</title>
7+
8+
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
10+
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
16+
font-family: "Roboto", sans-serif;
17+
font-weight: 400;
18+
font-style: normal;
19+
}
20+
21+
body {
22+
display: flex;
23+
flex-direction: column;
24+
25+
min-width: 100vw;
26+
min-height: 100vh;
27+
28+
justify-content: center;
29+
align-items: center;
30+
background-color: #3498dd;
31+
}
32+
33+
body h1 {
34+
color: white;
35+
}
36+
37+
.chat {
38+
display: flex;
39+
flex-direction: column;
40+
41+
width: 50%;
42+
height: 60vh;
43+
44+
background-color: #ffffff;
45+
border-radius: 16px;
46+
}
47+
48+
.chat form {
49+
display: flex;
50+
flex-direction: row;
51+
gap: 1rem;
52+
}
53+
54+
.chat form input {
55+
width: 100%;
56+
57+
border: 0;
58+
border-radius: 8px;
59+
height: 2rem;
60+
}
61+
62+
.chat button {
63+
padding: 0 0.5rem;
64+
cursor: pointer;
65+
66+
border: 0;
67+
border-radius: 4px;
68+
69+
background-color: rgb(47, 255, 54);
70+
}
71+
72+
.chat footer {
73+
background-color: #f0eced;
74+
padding: 1rem;
75+
}
76+
77+
#messages {
78+
display: flex;
79+
flex-direction: column;
80+
flex-grow: 1;
81+
gap: 0.75rem;
82+
list-style: none;
83+
84+
padding: 1rem;
85+
86+
margin-bottom: 2rem;
87+
overflow-y: auto;
88+
}
89+
90+
#messages li {
91+
background-color: #ededed;
92+
width: fit-content;
93+
padding: 0.5rem;
94+
border-radius: 0.75rem;
95+
}
96+
97+
#messages .my-message {
98+
margin-left: auto;
99+
background-color: #79b5f5;
100+
color: white;
101+
}
102+
</style>
103+
</head>
104+
<body>
105+
<h1>PyChat</h1>
106+
<main class="chat">
107+
<ul id="messages"></ul>
108+
109+
<footer>
110+
<form id="form" action="">
111+
<input
112+
id="input"
113+
autocomplete="off"
114+
placeholder="Digite sua mensagem aqui..."
115+
/>
116+
<button>Enviar</button>
117+
</form>
118+
</footer>
119+
</main>
120+
121+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
122+
<script>
123+
var socket = io.connect(
124+
"http://" + document.domain + ":" + location.port
125+
);
126+
var myLastMsg = null
127+
128+
socket.on("message", function (msg) {
129+
var ul = document.getElementById("messages");
130+
var li = document.createElement("li");
131+
if(msg === myLastMsg){
132+
li.classList.add("my-message")
133+
myLastMsg = null
134+
}
135+
136+
li.appendChild(document.createTextNode(msg));
137+
ul.appendChild(li);
138+
});
139+
140+
document.getElementById("form").onsubmit = function () {
141+
myLastMsg = document.getElementById("input").value
142+
socket.emit("message", myLastMsg);
143+
document.getElementById("input").value = "";
144+
return false;
145+
};
146+
</script>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)