-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (99 loc) · 5.04 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
<!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>Site</title>
<script>
(function(source, token, config){
var js = document.getElementsByName('script')[0];
if( document.getElementById('omnichat-script') ) { return; }
js = document.createElement('script')
js.id = 'omnichat-script';
js.src = '//localhost:3333/omnichat.js'
js.type = 'text/javascript';
document.head.appendChild(js);
window.onload = () => omnichat(source, token, config);
}('source', '9aa9e5a1-1409-5669-b2f4-0b1bb7f3bc43', {theme: 'dark'}))
</script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="relative">
<h1 class="bg-red-500 text-center text-3xl font-bold p-4 text-white">Site de teste</h1>
<div id="chat-container" class="hidden grid-rows-[60px,460px] fixed bottom-0 right-3 w-[320px] translate-y-[90%] hover:translate-y-0 transition-all duration-500">
<div id="chat-header" class="flex items-center gap-3 px-4 py-2 rounded-t-lg cursor-pointer bg-[#35495e]">
<div class="relative">
<img src="#" alt="Dummy" class="rounded-full w-8 h-8 object-cover bg-black">
<div class="w-2 h-2 rounded-full ring-white absolute bottom-0 -right-1 bg-green-500"></div>
</div>
<span class="text-white">OmniChat</span>
</div>
<div id="chat-auth" class="grid grid-rows-[400px,60px]">
<ul id="chat-messages" class="p-2 flex flex-col overflow-y-auto h-[400px] bg-slate-100/20 border border-slate-200">
<li class="flex items-start gap-4 mt-8 first:mt-0">
<img src="#" alt="Dummy" class="min-w-[26px] min-h-[26px] rounded-full overflow-hidden object-cover block bg-black">
<div class="grid">
<div class="flex items-center mb-4 gap-2">
<h5 class="font-bold text-sm">Atendente</h5>
<span class="text-gray-400 text-xs">19:43</span>
</div>
<p class="p-2 rounded-b-xl max-w-1/2 w-fit relative bg-slate-100 text-slate-800 text-sm">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, voluptates.
</p>
</div>
</li>
<li class="flex items-start gap-4 mt-8 first:mt-0 flex-row-reverse">
<img src="#" alt="Dummy" class="min-w-[36px] min-h-[36px] rounded-full overflow-hidden object-cover block bg-black">
<div class="grid">
<div class="flex items-center mb-4 flex-row-reverse gap-2">
<h5 class="font-bold text-sm">Hebert Lima</h5>
<span class="text-gray-400 text-xs">19:45</span>
</div>
<p class="p-3 rounded-b-xl max-w-1/2 w-fit relative text-white bg-black ml-auto text-sm">
Saepe facilis, non consequuntur culpa reprehenderit placeat dolor distinctio vel aliquid velit. Illum, molestiae blanditiis facilis dicta nisi soluta natus.
</p>
</div>
</li>
<li class="flex items-start gap-4 mt-8 first:mt-0">
<img src="#" alt="Dummy" class="min-w-[26px] min-h-[26px] rounded-full overflow-hidden object-cover block bg-black">
<div class="grid">
<div class="flex items-center mb-4 gap-2">
<h5 class="font-bold text-sm">Atendente</h5>
<span class="text-gray-400 text-xs">19:43</span>
</div>
<p class="p-2 rounded-b-xl max-w-1/2 w-fit relative bg-slate-100 text-slate-800 text-sm">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, voluptates.
</p>
</div>
</li>
<li class="flex items-start gap-4 mt-8 first:mt-0 flex-row-reverse">
<img src="#" alt="Dummy" class="min-w-[36px] min-h-[36px] rounded-full overflow-hidden object-cover block bg-black">
<div class="grid">
<div class="flex items-center mb-4 flex-row-reverse gap-2">
<h5 class="font-bold text-sm">Hebert Lima</h5>
<span class="text-gray-400 text-xs">19:45</span>
</div>
<p class="p-3 rounded-b-xl max-w-1/2 w-fit relative text-white bg-black ml-auto text-sm">
Saepe facilis, non consequuntur culpa reprehenderit placeat dolor distinctio vel aliquid velit. Illum, molestiae blanditiis facilis dicta nisi soluta natus.
</p>
</div>
</li>
</ul>
<div id="chat-controls" class="flex items-center bg-slate-100 px-3">
<input type="text" class="bg-transparent border-0 placeholder:text-slate-400 text-slate-800 flex-1 outline-none" placeholder="Yout message">
<button class="w-8 grid place-items-center my-3 min-w-fit" >
<svg class="w-4 mx-auto rotate-45 relative -top-[2px]" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
</button>
</div>
</div>
<div id="chat-form" class="hidden place-content-center bg-slate-500">
<div class="grid w-[12.5rem] gap-4">
<input type="text" class="p-2 w-full outline-none" placeholder="nome" />
<input type="text" class="p-2 w-full outline-none" placeholder="numero" />
<button type="button" class="bg-black text-white p-2 rounded-lg w-full">Entrar</button>
</div>
</div>
</div>
</body>
</html>