Scribd
Upload
14 views

Codigo Chat Java Script

Uploaded by

jogadordewow94
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

Codigo Chat Java Script

Uploaded by

jogadordewow94
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}

table, th, td {
border: 1px solid black;
}

th, td {
padding: 15px;
text-align: center;
}

img {
width: 100px;
height: 100px;
}

.chatModal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 9999;
}

.closeChat {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
}

.mensagens {
max-height: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>

<table>
<tr>
<td>
<p>Johnny Sins</p>
</td>
<td>
<img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUWFRgSFRUYGBgYGBk
YGBgYGBgYGBIYGBgZGRkYGBgcIS4lHB4rHxgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QGhISGjQhIS
ExMTE0NDE0NDQ0MTQxNDE0NDQ0NDQ0MTQ0NDQ0MTQ0MTQ0MTQ0PzQ0MTE0NDQxPzExMf/
AABEIALcBEwMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAACAAEDBAUGB//
EADsQAAIBAgQEAwYEBgEEAwAAAAECAAMRBBIhMQVBUWEicYEGEzKRobFC0fDxB1JigsHhchSiw9IjM5L/
xAAZAQADAQEBAAAAAAAAAAAAAAAAAQIDBAX/
xAAhEQEBAQEAAwACAwEBAAAAAAAAAQIRAyExEkEiMmEUE//
aAAwDAQACEQMRAD8A9SMaKKYLCY0cxoEUUUV4AojGJiJgCYyFhfSSEx6K3YdtflFRFTEvrlHKZGLfXymjWb
xtMmudf1rMtV14iq5gR33jZZDYxjGEFg5IAxjZoTIIDJ3gFqhWPM6S4jlvhPp+UzsPRVt3IPlcH6y/
TwBvdaoHmrD6gmXnqdSL+HVtypB53H+Y+I9fW+seiKi80I+v1iq+LWa34y/
auDHzRMkYSRWtwirqU67ek0WfX/UwMM5DAjlrOiRwdRsRea5nXJ5ZwAW/IescGwOm/
TeSWJOn2jVD+81znjC/
Oqi8jJA+7dB+0IJK+JeynvYX8pX4yDNZ7LeA2kT1LSq9QmS0kO9SQO0cmDEZoo8UA6gwTCMYzFYTGMKCYA0
URijBRjFBiBGSYUeI/wDE/wCJGZNgviPl/kRUT6wcY5zNbcn6TOqMBoT5n8pqcTTxG2gv/
iYz5f3nPXdj4iaqNgCfKCxfoPUyXN3iKc4loLP1X7wcj82HoJMyt2gkGB9R+7PNjH9yP5j85Iq9YSkdLwA8
PRTmWv8A0i80qdIjY6d73lKnibbSU402mkvEalrWROZb6af6iqU+hvM2njustUsUDsfTlL/
Jnc1L7uA6ydal4zJEVpqK6zToYgKACNufaZ9May5SOs2w5vJOrqY5DztHasp5j7SoUHMQWpL5es3YWLqsP2
mfxWrbKva/z/
aRVGK8zKNZyTcwtGco3a8AwjBIkLCYrQrR7QALRQ7RQDpjAMkgETJYYJhmCYAJjRzGiBQYUGAIyXBnxeYMj
MegbMIhGfxNPivteYjMOlpr8XrWuL9zOefEDqJhZ7duL6TPY8hGsJUq4tRfX5SOnxAEw5V9i6bwT0jrVBEc
RK6iAj3g1biUK1RgDY8hKkK3jRvE1QDnOYStUBJLMfTaRYjGONfhHU6X9I+IunT+
+EsUXO4NxOTp8RvuRNPB1SfhO/
SPiLp0+HxRE18O4YXnIjEPzF7TX4biyLSp6TfbZKfST4c+KADfWM1QLZukuXntlrPfS27hdzaAlQMLic9xP
GM7XGw+3SR8ExbGuyliQymw5C2u0P8A2/lxf/L/
AAuv3GviTKhlnESsZu5YG0bLHiiBsse0eKANaKFaKAdJBMKMZksBgNDMBogYwTCMEwBRRRQBjHp7+hP0gky
viKrK9Ow8BNm8ybG8VPM7XKe0OLOc66DlOZrO7Dw3I+n1nbe0vCwAanIGcVjqbXVCGJcBkproSp1DOeWmsm
546M3sUDUsfEw+d/
tNDBOGJysD5HUekysdTembNkSwubC9h5ytTcsAwYEXte1jfz3lfjeF+eeu4wz2GstI19pyWC4i6tkc5h33H
kec6zBEEXH0mOo3zerGS4lY4cX2mig0lDEsQDbflFBWTxPF5PAgGY9tFHUznXQk5rF7n422PW01cdQf+UW6
k6t+QguSyBCACuoI01l54z3Lz0xKGMZqhpIqswv+Am9t+
+k18NUcIKj0gUubun4Sp1uNwOcBMC5fOFQMb+LNqbjXbWbuDwByLTJ8Ive2lydTea6ueMczVvsOGq5gGRsy
Hkd19ZpUdxAXConwqB5Wh0hMbfbeR0+DcMgkfEPhMi4bppLOOAK5e807/
FnzmnP1GNxppzg8KS2JQcwreumkg4hSak4OYlX1Gux5iWcDc16LjcqwP9v+jMZ/aOv5i/
7G5iDKxk1dpAZ315JRCNCEQKPaIRxAGtFCtFAOitGIkloBmS0ZEAiSkSMiIAMYwiIJEAaKPGMAEyrxAHIzL
unjHe24PYi8tQWGhB8vSKnLyys32lqkoFtowDH5TASl7pTVKFveDIxJBanly5CNOg2nR+0Q8CW5XHoNpkUM
UMjU2Fwf0JF1eunOexy3H8P7w+8XK1xZ1sAbb3ExUwZAChcig31Op56CdVicOnfta8oPhxyB8zK/
P0J4Z3rMw+CzNnZvpOu4elkFutpm4PA63PKb1KnZF8zMta61zOCQytiU5ywR0iK307xT4qz2x8TTLSFKdt1
B8xNl6UrtSiLivSUfy2tLfvDbQWgBLcoYWPo/ENiZbw1HnAVJaQxZHONDCrFj2+0HDPAx539B87zb9Mb/
AGYPHXJFMDVrtoOhtaanBqOuYjVEt6ufyEt4GkEbMTmLchyHISWnTCBrcz+h9ovHnuuq8u+YuUNUyMx3MGd
defDwhBEIRGcQoMJYA9ooVooB0hgESQiCRMloiIDCSGDaIGNB+g+f+pE6kGxmiZQqm7E95esyQkZjGEYJkG
YwCYRMjMAh4tTzU1O9ricu6WnaGnmQjt9es5XFUrEjvMty9dXh1LOKLLGSjeT+7khS0zbmoLbS00MUgCqvS
VsDTLOqjqPkNTJsU93PaHC/
YQIsoiUR2XQ2lQUDrISskRWgs0mnkwSEKcJd5KBCQ6Bado8TQZfE9WcM0bHtmuBz0P8AbIUextL2Hw2dwhN
gb6je9rjQypO+mOrM3qlhyRYc7i01sQLD9b85Zo8ORNbljyJG3pIcSs6PHj8frm83lmvjOaDJHSDaacZQwh
LGCxwIjEIaiCIaCICihZYoB0REEyQiA0zWjaMo1EJpG8kLLVF6iZzQ2kZMd10uGMEmOxkbGIzExiYxMSnWE
+kuYdrH6TK4vhRcsOZ1mgplDiGI+n2tb01leST9tPDb1jEa/
SR1JdVAxuu1r+UpV+05q7c3roeEYZVRHuLst/VhMnFLZz5n7yqmIcKBc+H4fLpBfiAc+LwvzB/F3B5w/
RZzZe1ZQ66S0lgNpRSr2PnK/EMaqizE2O9jr5aR5g1etMOvIj5ypiB4jaYeCqorHIoAJ7/
ObFN76xaOcEplhGvIpKgih2ndZE8tJqJUqDW0pPUatre/66ibGBqeNDzuAfkZjD4vQmaPDm/
+RB1bl2F9flNMfYx8s9Vv1WlNzeXqglV1nY4FRqYgGmJOyQGWI0OWLLJMsfLBSMLDRIYWSIsngDlikuWPGG
0YLQjAYzGrA8iaG5kLtJAGMBjHYyJmi6DMYDGJmkTNJtHBEwUbWRs8FH1l4+i/F5DKPGU8JP7m/
wCjJXxKIMzsFHVjb95jt7R06r+7S+WxGc6A+Qmnkzbmn49c0n4M2rIf5bj03+kDEYawVv5rmR0agWoCLkAh
T5NoZPxStZEF9hb6mcldkvtn13C7kTluKuXfc2v0+gmnjazkbTK92Sw+f5xSr+rWAxNtNR5aaSPFVc1wTz/
X67SKouXXl99JBhnzvt/
rnKKxZwrlefLfoZq0cQQBfz5ayj7jt6dessYbDMdLaW2PWFEnF9sW2lra7am1vPrLNLF31A9JSOFIHb9fMQ
0o5RcjvpqfnELW3hn2YbH7ys985H6EbDvp9tNYn1bXXvKjPpZNieUtez9MtWzZfCisb9STZdPnM3EVvCQN7
29eU6ngmFyUwT8T2Y/
09B9TNvHn31j5t+uLriQNJ3MruZ0uXiJoEJoMR8PFaOFj5YGQEICCBDWIHtFHigGsWkTtEzStUxKDd1//
AEv5zD2tIzSB2gisG+FgfIg/aVsTiFQFmNgIrKaV3lTF4tEGZ3VR/UbX8hznMcZ9pX1FMhB13Y/
lOMxONLsWZixPNjeaY8PfpWu+xPtVRW+QO/cDKvzb8piYn22e9kpL/
czG3ytOa94GUjYyqwyrbmZ0Tw4k+M7qutoe1dUjM3ux/SqsT8y0gxnta/4AqdxqfrOQTEBQRzg5idTJ/
HMvqG0MRxF3JLOSTuWNz5dpe4bXy63mHaWaNe2kf+B3OD4itQA3HcA63mri9VViTYr52JM8t4ZxQ03ZWPgY
66/
Ce2k9DwGOD4cqCLpuTvbr9pweXH412ePXYrV0Xmbc5T97QW4zqT5gyylFnN2sy9OvnJTw5DrlA9BIzI2ypN
Vw9gC45/iHOR0/+mp+MOvob/QS3U4eh3A+Ui/
6Kkuthp5S2skJOMIfhRj08NvqY44jWY2SmoHVrn7SzRSn0E0adMctJItyoUqNU6u/
9qqAPzlhKbc5cVZIyjnBlfatTqAHKRBxVQ30+0Gowvm3tfUcvO0B3LdzawPIj02lZjLVPwulmqqz/
CXBAOt2HK/
TT6zu6ji5A6BrdAdvsZ59xHFik1JRoWzN6goJv+1GMakmHxifhfI45PTdc1j6qLec6PF79ObyxusZA8WHxS
ui1EN1YXH5HuIDmbMwtEIJMEtFaEuaK8izQryegd44MAGOIgkvGiigHmmJ4tUc+N3b/
kxMrDFLztM+pUlWrVM3DcXiNIcj6R8T7Qgi3ia212uBOaJgmSfF3F48uekrB5EIs0IFpHleviNLcxEryHEj
nKtLiJTc3hF4wMa0kzFzDSpprIysjZoEjxGt+89K9nUz4SlWW2YJlqC3x5fCST1Fp5u09C/
hzib0Hp80ckeTi/3vM/
Jns4rF5eteg4BkzmZuNQ06lrGxPh1Nsp2+WvylynUJAP79pw6zyu7GuxWxD2ub7fWZPiLdb/
aa2NsAf1vMKoatwEQ6G/
reVKd6tUqhViDqdbeYIP5ib2Br5lB6626TmkwlbMGsN9ZtYNmAINtNvLTeFKStpHgVK3TTvylbObXJsRoT1
7yJ2YHw2vcX7/6iPVMEN/C1jvYHQ97jS8lwy3Ja+g6aXPORHWy7FtNOXfvaNxDEijT05CX3jOTtc/
x7HZsZTpj8CH/uI/8AWdb7Y4sHhQf+ugAe+ZQfpmnn3szw+rjscwTQKoLudRTUEi/mTsJ2H8W7UcDhqCGy+
+Ve7ZKbkE+pBnR4p+3P5dTvGFhvaOvQompSNwhzMh2ZfxEaaEbzc4H7f0q48a5GG4BBO17gX1+k4zg+JzKL
66WI5EbEGR4v2PQsHpVii7gMC2X/
AIuCDbznRvFv8oxmpPVev4fFI6iojBlOxGu8kvOE9j6TUMtP3rPqb3Rlsp1sb8gddes7cNMO9VYlDRwZGDC
DQJIpkimQqZIpgEl48CKAeKs0iaDeCxmxnJgkwSYJaIxEwC0EtBLQCTNGY30MjzRg8CRFshsduR/
xJQ8GqgYWP7QVp5Ra5MATNBMeCxgRiZ0vsDjMmJKE6VFt/cuo+l5zMnwOIKVEqD8DBvQb/
S8VnYb2PieCWonK41DG+nymDSZxYE7ddD01E6bCVQ6Kw2IBmfxjhuYNUQeO2w/HtObyY/
bbx756VKdYNzEFqI1IAuNjM3DViST0tfttLtKuOu97GYOrO4lUnUffnJB/KPQ+UqMGv4ddL+sH3zL/
ALgd0vI5trpr+resCtVHI+YHK1tucrJVLnwa8wP3k7oqWdzbLsOQ2+escRfazhibe8bQ9P5R+ZnP8RSpian
uaSliQbAaAcszHkO8u0674moKFHQfjfXKg536ntO94VwunQTKi6m2Zz8dQjmx6dhNc4/
JG9zM5FL2S9n0wNH3anNUc5qr2tna1go6KOQ7kzk/4zi9HDL/AFVWH/IBAPoTPSFWee/xeS6Ycdqv/
jnTJyOO3teccEqja86/
DPdOpH2nBYBirHtv+867hWLHpzE6cX0jTTw+KembofDzU6idDwzjCPZScpPI7X7GctW8LW6yNtNeX2j14s6
TLXot44M43h3GnSwJzL0O48jynUYLGpUF0OvMcx+fnObXj1lc11eVoatIFMkRpmpYvFIrxQDxJm1jXiimxg
IkbGKKBhjGKKARuY6mKKKEKARFFGQYDRooA14hFFEHq/
sVjM+GQHdfCfTT7WnSiKKZ6+qUcTwik92K2uLHLpfvbrKVP2cAP/
2kjoRsNefyiikWRUtQ8R4Waa+8VyQNGG1hyYevKUFCNuL+d/tHimO5JW/
jts9lieJpSB076DczEp1amKcgHKg+LXUDt3iik5+qt9PSPZfhi000UD9c+pm8RFFOrHxy6+ivOA/ifqaC/
wBFQ/Nk/
KKKXfiHlVJbOy+vzmjRYqbg2iim2PidN9Kuenf8S7wKT6EGKKboRu2U9jtJ8JiyrBgSDyI5RopROhwvHKg+
KzDodD6MP8zfwWMWquZb6aEHcH7GKKYeXGZ+l5q1eKKKcq3/2Q==" alt="Imagem 1">
</td>
<td>
<button onclick="conversar(1)">Conversar</button>
</td>
</tr>
<tr>
<td>
<p>Ramon Dino</p>
</td>
<td>
<img src="https://scontent.flis7-1.fna.fbcdn.net/v/t1.6435-
9/103797780_3544415622253569_5265206368874102297_n.jpg?_nc_cat=100&ccb=1-
7&_nc_sid=810d5f&_nc_ohc=W0iQz9720m8AX-DvCW7&_nc_ht=scontent.flis7-
1.fna&oh=00_AfDR1lhPrXfi6tx9oTFIJUOzazo8XvKHCzVysaSFb4RqAw&oe=65C64E13" alt="Imagem
2">
</td>
<td>
<button onclick="conversar(2)">Conversar</button>
</td>
</tr>
<tr>
<td>
<p>Jair Bolsonaro</p>
</td>
<td>
<img
src="https://s2-oglobo.glbimg.com/6rNnAUp_5I1MqKcr4TGfjbmdLzw=/0x122:477x556/888x0/
smart/filters:strip_icc()/i.s3.glbimg.com/v1/
AUTH_da025474c0c44edd99332dddb09cabe8/internal_photos/bs/2023/p/n/
UELFQuTjWnfAnFLVmHuQ/bolsonaro-selfie-ribeirao-preto.png" alt="Imagem 3">
</td>
<td>
<button onclick="conversar(3)">Conversar</button>
</td>
</tr>
<tr>
<td>
<p>Harvey Specter</p>
</td>
<td>
<img src="https://cdn-fnknc.nitrocdn.com/jwqHRGAzpUgGskUSHlppNQzwuXgXIKwg/
assets/images/optimized/rev-e9e6d6c/www.fashionbeans.com/wp-content/uploads/
2021/07/harveyspec-img-1.jpg" alt="Imagem 4">
</td>
<td>
<button onclick="conversar(4)">Conversar</button>
</td>
</tr>
</table>

<div id="chatModal1" class="chatModal">


<div class="closeChat" onclick="fecharChat(1)">X</div>
<h2>Chat com Johnny Sins</h2>
<div id="mensagens1" class="mensagens"></div>
<input type="text" id="mensagemInput1" placeholder="Digite sua mensagem">
<button onclick="enviarMensagem(1)">Enviar</button>
</div>

<div id="chatModal2" class="chatModal">


<div class="closeChat" onclick="fecharChat(2)">X</div>
<h2>Chat com Ramon Dino</h2>
<div id="mensagens2" class="mensagens"></div>
<input type="text" id="mensagemInput2" placeholder="Digite sua mensagem">
<button onclick="enviarMensagem(2)">Enviar</button>
</div>

<div id="chatModal3" class="chatModal">


<div class="closeChat" onclick="fecharChat(3)">X</div>
<h2>Chat com Jair Bolsonaro</h2>
<div id="mensagens3" class="mensagens"></div>
<input type="text" id="mensagemInput3" placeholder="Digite sua mensagem">
<button onclick="enviarMensagem(3)">Enviar</button>
</div>

<div id="chatModal4" class="chatModal">


<div class="closeChat" onclick="fecharChat(4)">X</div>
<h2>Chat com Harvey Specter</h2>
<div id="mensagens4" class="mensagens"></div>
<input type="text" id="mensagemInput4" placeholder="Digite sua mensagem">
<button onclick="enviarMensagem(4)">Enviar</button>
</div>

<script>
function conversar(numero) {
abrirChat(numero);
// Adicione aqui o código para iniciar a conversa com a pessoa correspondente
ao botão clicado
// Você pode carregar o histórico de mensagens ou iniciar uma nova conversa
}

function abrirChat(numero) {
document.getElementById('chatModal' + numero).style.display = 'block';
}

function fecharChat(numero) {
document.getElementById('chatModal' + numero).style.display = 'none';
}

function enviarMensagem(numero) {
var mensagemInput = document.getElementById('mensagemInput' + numero).value;
var mensagensDiv = document.getElementById('mensagens' + numero);
mensagensDiv.innerHTML += '<p>Você: ' + mensagemInput + '</p>';
document.getElementById('mensagemInput' + numero).value = '';
}
</script>

</body>
</html>

You might also like