newosinadjango/osinaweb/osichat/templates/chat-widget.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">

    <!-- LOADER -->
    <div class="w-full h-full inset-0 absolute flex justify-center items-center p-2 bg-black z-20 bg-opacity-50 rounded-none md:rounded-md hidden"
        id="osichatLoader">
        <div role="status">
            <svg aria-hidden="true" class="w-14 h-14 text-gray-200 animate-spin fill-secondosiblue"
                viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                    fill="currentColor" />
                <path
                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                    fill="currentFill" />
            </svg>
        </div>
    </div>

    <!-- 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>

        <div id="endChat" class="{% if not chat_room  or chat_room.date_terminated %} hidden {% endif %}">
            <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 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>


    <!-- CLOSE CHAT CONFIRMATION MESSAGE -->
    <div class="w-full h-full absolute inset-0 rounded-none md:rounded-md bg-black bg-opacity-50 flex justify-center items-center p-5 z-20 hidden"
        id="endChatConfirmationContainer">
        <div
            class="w-full h-fit p-5 bg-white rounded-md shadow-md flex flex-col justify-center items-center gap-3 relative">

            <div id="closeConfirmationMessage">
                <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-secondosiblue absolute top-3 right-3 hover:text-fifthosiblue duration-300 cursor-pointer">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
            </div>

            <p class="text-center text-secondosiblue">Are you sure you want to end this chat?</p>

            <div class="px-5 py-2 flex items-center gap-2 bg-gray-100 rounded-md shadow-md flex justify-center items-center text-secondosiblue text-sm cursor-pointer hover:scale-105 duration-500" id="endChatComfirmed">
                End

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 notFilledSvg"
                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>
    </div>
    <!-- END CLOSE CHAT CONFIRMATION MESSAGE -->



    <div id="roomContainer" class="flex-l overflow-hidden h-full">
        {% if chat_room %}
            {% if not chat_room.date_terminated %}
            {% include 'chat-room.html' %}
            {% else %}
            {% include 'ended-chat.html' %}
            {% endif %}
        {% else %}
        {% include 'start-chat.html' %}
        {% endif %}
    </div>
</div>


<!-- UNREAD MESSAGE POPUP -->
<div id="unreadMessages">
</div>


<!-- OPEN WIDGET BUTTON -->
<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>


<!-- CLOSE WIDGET BUTTON -->
<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>