You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
5.7 KiB
HTML
74 lines
5.7 KiB
HTML
{%load static%}
|
|
<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="chatContainer">
|
|
<div class="w-ful h-full flex flex-col justify-between p-5">
|
|
<div class="w-full flex flex-col gap-5">
|
|
|
|
<div class="flex items-end gap-2">
|
|
<div>
|
|
<div
|
|
class="w-[40px] h-[40px] rounded-full shadow-md text-white flex justify-center items-center bg-secondosiblue">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
|
|
<path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M7 7L7 4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<path d="M17 7L17 4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<circle cx="7" cy="3" r="1" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<circle cx="17" cy="3" r="1" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<path d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<path d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M9.00896 11H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M15.009 11H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-full bg-gray-50 p-2 rounded-md text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
|
|
<p>Hello {{chat_room.chatroomguest.name}}, the support department is notified about your request to start a conversation. It usually takes few minutes for you to receieve a reply.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="messages">
|
|
{% for message in chat_room_messages %}
|
|
<div class="w-full bg-osiblue bg-opacity-80 p-2 rounded-md text-white shadow-md text-sm leading-7">
|
|
<p>{{message.content}}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<form class="flex gap-1" id="sendMessage">
|
|
<input type="text" name="message" class="w-full border border-gray-300 rounded-md px-3 py-3 outline-none" placeholder="Write your message...">
|
|
<button class="w-[50px] rounded-md p-1 flex justify-center items-center bg-osiblue">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 text-white notFilledSvg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 gap-2 text-white text-sm border-4 border-white" id="openChatContainer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
|
|
<path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
|
|
<p>Chat with us</p>
|
|
</div>
|
|
|
|
<div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 text-white text-sm border-4 border-white hidden" id="closeChatContainer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
|
|
<path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
|