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.
61 lines
3.7 KiB
HTML
61 lines
3.7 KiB
HTML
{% load static %}
|
|
|
|
<div class="w-full h-full md:h-fit md:w-[400px] flex flex-col fixed z-50 right-0 md:right-5 bottom-0 md:bottom-24 shadow-md duration-500 hidden"
|
|
id="chatWidget">
|
|
<!-- HEADER -->
|
|
<div class="w-full rounded-t-none md:rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
|
|
<div class="flex gap-3 items-center">
|
|
<div id="closeMobileChatContainer" class="md:hidden cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 text-white notFilledSvg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
<img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
|
|
<div class="flex flex-col">
|
|
<p class="text-white">Ositcom</p>
|
|
<p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
|
|
</div>
|
|
</div>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
|
|
<path
|
|
d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
<path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
<div id="roomContainer" class="flex-l overflow-hidden h-full">
|
|
{% if chat_room %}
|
|
{% include 'chat-room.html' %}
|
|
{% else %}
|
|
{% include 'start-chat.html' %}
|
|
{% endif %}
|
|
</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 hover:shadow-2xl duration-500 cursor-pointer"
|
|
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 hover:shadow-2xl duration-500 cursor-pointer"
|
|
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> |