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.
66 lines
3.5 KiB
HTML
66 lines
3.5 KiB
HTML
{% load static %}
|
|
<div id="startChatContainer">
|
|
<form
|
|
class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="startChat">
|
|
|
|
<div class="">
|
|
<div class="w-full rounded-t-md bg-osiblue flex gap-3 items-center px-5 py-3">
|
|
<img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
|
|
<p class="text-white">Welcome to Ositcom</p>
|
|
</div>
|
|
|
|
<div class="p-5 flex flex-col gap-10">
|
|
<p class="text-gray-500">
|
|
We are here 24/7/365 to help with sales or support queries. To start your conversation enter your
|
|
name
|
|
and mobile number below.
|
|
</p>
|
|
|
|
<div class="w-full flex flex-col gap-3">
|
|
<input name="guest_name" type="text" placeholder="Name"
|
|
class="w-full border border-gray-300 px-3 py-3 outline-none rounded-md">
|
|
<input name="guest_mobile_number" type="number" placeholder="Mobile Number"
|
|
class="w-full border border-gray-300 px-3 py-3 outline-none rounded-md">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-5">
|
|
<div class="w-full bg-gray-50 rounded-md p-3 flex flex-col gap-1 shadow-md border border-gray-100">
|
|
<p class="text-osiblue font-poppinsBold">We are online</p>
|
|
|
|
<p class="text-gray-500 text-sm">Typically replies in a few minutes</p>
|
|
|
|
<button type="submit"
|
|
class="flex justify-start items-center gap-1 text-secondosiblue cursor-pointer hover:text-gray-400 duration-300">
|
|
<p class="">Start Conversation</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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> |