-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (99 loc) · 6.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat - iCodeThis.com</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="styles.css" rel="stylesheet" media="all" type="text/css">
</head>
<body>
<div id="container">
<div class="header">
<div class="users">
<img src="https://pbs.twimg.com/profile_images/1602443868527595520/cOjnC2Zh_400x400.jpg" width="50">
<img src="https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok_400x400.jpg" width="50">
<img src="https://pbs.twimg.com/profile_images/923274881197895680/AbHcStkl_400x400.jpg" width="50">
</div>
<div>
Elnora, Leila, Lucinda<br>
<small>We tipically respond in a few minutes</small>
</div>
</div>
<div id="chat">
<div class="chatLine">
<div class="operator">
<img src="https://pbs.twimg.com/profile_images/1602443868527595520/cOjnC2Zh_400x400.jpg" width="50">
</div>
<div>
<div class="bubble">Hi there!<br>Looking to get started? I can help answer your questions!</div>
</div>
</div>
<div class="chatLine">
<div>
<div class="bubble2">I'd like to talk to AOC not with you dumb ass!</div>
</div>
<div>
<img class="reverse" src="https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok_400x400.jpg" width="50">
</div>
</div>
</div>
<div id="text">
<input type="text" name="chat" id="chatText" placeholder="Type your message here...">
<svg onclick="addCode()" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="36" height="36" viewBox="0 0 24 24" stroke-width="1.5" stroke="#b1afad" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="10" y1="14" x2="21" y2="3" />
<path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
</svg>
</div>
<div class="notice">
By using the chat, I confirm that I have read the <a href="#">privacy policy</a> and do not object to the use of my personal data.
<button id="close">I agree</button>
</div>
<script>
document.getElementById("chatText").addEventListener("keyup", function(event) { if (event.key === "Enter") addCode(); });
function addCode() {
const val = document.getElementById("chatText").value;
document.getElementById("chat").innerHTML +=
'<div class="chatLine"><div><div class="bubble2">'+ val +'</div></div><div class="myself"><img class="reverse" src="https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok_400x400.jpg" width="50"></div></div>';
document.getElementById('chatText').value = '';
let objDiv = document.getElementById("chat");
objDiv.scrollTop = objDiv.scrollHeight;
if(document.getElementsByClassName("myself").length == 1) {
document.getElementById("chat").innerHTML +=
'<div class="chatLine"><div class="operator"><img src="https://pbs.twimg.com/profile_images/923274881197895680/AbHcStkl_400x400.jpg" width="50"></div><div class="bubble">Hey babe, will you date me? Cannot wait for a romatic sweet date with you!</div></div></div>';
objDiv.scrollTop = objDiv.scrollHeight;
}
if(document.getElementsByClassName("myself").length == 2) {
document.getElementById("chat").innerHTML +=
'<div class="chatLine"><div class="operator"><img src="https://pbs.twimg.com/profile_images/923274881197895680/AbHcStkl_400x400.jpg" width="50"></div><div class="bubble">Now why would you say that?! I thought you were different!</div></div></div>';
objDiv.scrollTop = objDiv.scrollHeight;
}
if(document.getElementsByClassName("myself").length == 3) {
document.getElementById("chat").innerHTML +=
'<div class="chatLine"><div class="operator"><img src="https://pbs.twimg.com/profile_images/923274881197895680/AbHcStkl_400x400.jpg" width="50"></div><div class="bubble">I want you to try again love!</div></div></div>';
objDiv.scrollTop = objDiv.scrollHeight;
}
if(document.getElementsByClassName("myself").length == 5) {
document.getElementById("chat").innerHTML +=
'<div class="chatLine"><div class="operator"><img src="https://pbs.twimg.com/profile_images/923274881197895680/AbHcStkl_400x400.jpg" width="50"></div><div class="bubble">I do not wanna talk to you anymore!</div></div></div>';
objDiv.scrollTop = objDiv.scrollHeight;
}
if(document.getElementsByClassName("myself").length == 6) {
document.getElementById("chat").innerHTML +=
'<div class="chatLine"><div class="operator"><img src="https://pbs.twimg.com/profile_images/923274881197895680/AbHcStkl_400x400.jpg" width="50"></div><div class="bubble">Fine, you can talk by yourself... have fun!</div></div></div>';
objDiv.scrollTop = objDiv.scrollHeight;
}
}
//$('.notice').hide();
$("#close").click(function(){
$(".notice").slideToggle();
});
</script>
</div>
</body>
</html>