API tools faq
paste
Ultizin

codigo bala 10 mil

Ultizin
Oct 19th, 2023
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.38 KB | None | 0 0
raw download clone embed print report
  1. dsdasd
  2.  
  3. html
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.  
  8. <meta charset="UTF-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.  
  11. <link rel="stylesheet" href="style.css">
  12. <link href="https://fonts.cdnfonts.com/css/lilita-one" rel="stylesheet">
  13.  
  14. <!-- <link rel="icon" href="logodosite"> -->
  15. <title>Início | Mensageiro</title>
  16.  
  17. </head>
  18. <body>
  19.  
  20. <div class="app">
  21. <div class="screen join-screen active">
  22. <div class="form">
  23. <h2>Bate-Papo</h2>
  24. <div class="form-input">
  25. <label>Usuário</label>
  26. <input type="text" id="username">
  27. </div>
  28. <div class="form-input">
  29. <button id="join-user">Entrar</button>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="screen chat-screen">
  34. <div class="header">
  35. <div class="logo">Bate-Papo</div>
  36. <button id="exit-chat">Sair</button>
  37. </div>
  38. <div class="messages">
  39. </div>
  40. <div class="typebox">
  41. <input type="text" id="message-input">
  42. <button id="send-message">Enviar</button>
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. <script type="text/javascript" src="socket.io/socket.io.js"></script>
  48. <script type="text/javascript" src="code.js"></script>
  49.  
  50. </body>
  51. </html>
  52.  
  53. css
  54. @import url('https://fonts.cdnfonts.com/css/lilita-one');
  55.  
  56. * {
  57. margin: 0px;
  58. padding: 0px;
  59. box-sizing: border-box;
  60. }
  61.  
  62. body {
  63. font-family: 'Lilita One', Arial, Helvetica, sans-serif;
  64. height: 100vh;
  65. display: flex;
  66. justify-content: center;
  67. }
  68.  
  69. .app {
  70. position: fixed;
  71. width: 100%;
  72. height: 100%;
  73. max-width: 600px;
  74. background: #ffffff;
  75. border-left: 1px solid #eeeeee;
  76. border-right: 1px solid #eeeeee;
  77. }
  78.  
  79. .app > .screen {
  80. display: none;
  81. }
  82.  
  83. .app > .screen.active {
  84. display: block;
  85. width: 100%;
  86. height: 100%;
  87. }
  88.  
  89. .screen .form {
  90. position: absolute;
  91. top: 50%;
  92. left: 50%;
  93. transform: translate(-50%, -50%);
  94. width: 80%;
  95. max-width: 400px;
  96. }
  97.  
  98. .screen .form-input {
  99. width: 100%;
  100. margin: 20px 0px;
  101. }
  102.  
  103. .screen h2 {
  104. margin-bottom: 20px;
  105. font-size: 30px;
  106. color: #111111;
  107. border-bottom: 4px solid #444444;
  108. padding: 5px 0px;
  109. display: inline-block;
  110. }
  111.  
  112. .screen .form-input label {
  113. display: block;
  114. margin-bottom: 5px;
  115. }
  116.  
  117. .screen .form-input input {
  118. width: 100%;
  119. padding: 10px;
  120. border: 1px solid #555555;
  121. font-size: 16px;
  122. }
  123.  
  124. .screen .form-input button {
  125. padding: 10px 20px;
  126. background: #111111;
  127. color: #eeeeee;
  128. font-size: 16px;
  129. cursor: pointer;
  130. outline: none;
  131. border: none;
  132. }
  133.  
  134. .chat-screen .header {
  135. background: #111111;
  136. height: 50px;
  137. display: flex;
  138. justify-content: space-between;
  139. align-items: center;
  140. padding: 0px 20px;
  141. }
  142.  
  143. .chat-screen .header .logo {
  144. font-size: 18px;
  145. color: #eeeeee;
  146. font-weight: 600;
  147.  
  148. }
  149.  
  150. .chat-screen .header button {
  151. padding: 5px 10px;
  152. border: 1px solid #eeeeee;
  153. background: transparent;
  154. color: #eeeeee;
  155. font-size: 15px;
  156. cursor: pointer;
  157. outline: none;
  158. }
  159.  
  160. .chat-screen .messages {
  161. width: 100%;
  162. height: calc(100% - 100px);
  163. background: #f5f5f5;
  164. overflow: auto;
  165. }
  166.  
  167. .chat-screen .messages .message {
  168. display: flex;
  169. padding: 10px;
  170. }
  171.  
  172. .chat-screen .messages .message > div {
  173. max-width: 80%;
  174. background: #ffffff;
  175. box-shadow: 0px 0px 20px 5px #0000000d;
  176. padding: 10px;
  177. }
  178.  
  179. .chat-screen .messages .message.my-message {
  180. justify-content: flex-end;
  181. }
  182.  
  183. .chat-screen .messages .message.other-message {
  184. justify-content: flex-start;
  185. }
  186.  
  187. .chat-screen .messages .message .name {
  188. font-size: 13px;
  189. color: #555555;
  190. margin-bottom: 5px;
  191. }
  192.  
  193. .chat-screen .messages .message .text {
  194. word-wrap: break-word;
  195. }
  196.  
  197. .chat-screen .messages .update {
  198. text-align: center;
  199. padding: 10px;
  200. font-style: italic;
  201. }
  202.  
  203. .chat-screen .typebox {
  204. width: 100%;
  205. height: 50px;
  206. display: flex;
  207. }
  208.  
  209. .chat-screen .typebox input {
  210. flex: 1;
  211. height: 50px;
  212. font-size: 18px;
  213. }
  214.  
  215. .chat-screen .typebox button {
  216. width: 80px;
  217. height: 100%;
  218. background: #111111;
  219. color: #eeeeee;
  220. font-size: 16px;
  221. outline: none;
  222. border: none;
  223. cursor: pointer;
  224. }
  225.  
  226. js
  227. (function() {
  228.  
  229. const app = document.querySelector(".app");
  230. const socket = io();
  231.  
  232. let uname;
  233.  
  234. app.querySelector(".join-screen #join-user").addEventListener("click", function() {
  235. let username = app.querySelector(".join-screen #username").value;
  236.  
  237. if(username.length == 0) {
  238. return;
  239. }
  240.  
  241. socket.emit("newuser", username);
  242. uname = username;
  243.  
  244. app.querySelector(".join-screen").classList.remove("active");
  245. app.querySelector(".chat-screen").classList.add("active");
  246. });
  247.  
  248. app.querySelector(".chat-screen #send-message").addEventListener("click", function() {
  249. let message = app.querySelector(".chat-screen #message-input").value;
  250.  
  251. if(message.length == 0) {
  252. return;
  253. }
  254.  
  255. renderMessage("my", {
  256. username:uname,
  257. text:message
  258. });
  259.  
  260. socket.emit("chat", {
  261. username:uname,
  262. text:message
  263. });
  264.  
  265. app.querySelector(".chat-screen #message-input").value = "";
  266.  
  267. });
  268.  
  269. app.querySelector(".chat-screen #exit-chat").addEventListener("click", function() {
  270. socket.emit("exituser", uname);
  271. window.location.href = window.location.href;
  272.  
  273. });
  274.  
  275. socket.on("update", function(update) {
  276. renderMessage("update", update);
  277. });
  278.  
  279. socket.on("chat", function(message) {
  280. renderMessage("other", message);
  281. });
  282.  
  283. function renderMessage(type,message) {
  284. let messageContainer = app.querySelector(".chat-screen .messages");
  285.  
  286. if(type == "my") {
  287.  
  288. let el = document.createElement("div");
  289. el.setAttribute("class", "message my-message");
  290. el.innerHTML = `
  291. <div>
  292. <div class="name">Você</div>
  293. <div class="text">${message.text}</div>
  294. </div>
  295. `;
  296. messageContainer.appendChild(el);
  297.  
  298. }
  299.  
  300. else if(type == "other") {
  301.  
  302. let el = document.createElement("div");
  303. el.setAttribute("class", "message other-message");
  304. el.innerHTML = `
  305. <div>
  306. <div class="name">${message.username}</div>
  307. <div class="text">${message.text}</div>
  308. </div>
  309. `;
  310. messageContainer.appendChild(el);
  311. }
  312.  
  313. else if(type == "update") {
  314.  
  315. let el = document.createElement("div");
  316. el.setAttribute("class", "update");
  317. el.innerText = message;
  318. messageContainer.appendChild(el);
  319.  
  320. }
  321.  
  322. // Arrasta pro Chat pro Final
  323. messageContainer.scrollTop = messageContainer.scrollHeight - messageContainer.clientHeight;
  324.  
  325. }
  326.  
  327. })();
  328.  
  329. server.js
  330. const express = require("express");
  331. const path = require("path");
  332.  
  333. const app = express();
  334. const PORT = process.env.PORT || 5000;
  335. const server = require("http").createServer(app);
  336.  
  337. const io = require("socket.io")(server);
  338.  
  339. app.use(express.static(path.join(__dirname+"/public")));
  340.  
  341. io.on("connection", function(socket){
  342. socket.on("newuser", function(username){
  343. socket.broadcast.emit("update", username + " Entrou na Conversa!")
  344. });
  345. socket.on("exituser", function(username){
  346. socket.broadcast.emit("update", username + " Saiu da Conversa!")
  347. });
  348. socket.on("chat", function(message){
  349. socket.broadcast.emit("chat", message);
  350. });
  351. });
  352.  
  353. server.listen(PORT, () => {
  354. console.log(`⠀`);
  355. console.log(`Servidor Iniciado com Sucesso!`);
  356. console.log(`Porta do Servidor: ${PORT}`);
  357. console.log(`⠀`);
  358. // console.log(`------------------------------------------`);
  359. // console.log(`⠀`);
  360. // console.log(`Para entrar clique aqui: <http://localhost:${PORT}/>`)
  361. // console.log(`⠀`);
  362. });
  363.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!