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.
68 lines
3.8 KiB
HTML
68 lines
3.8 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">
|
|
<div class="relative">
|
|
<div class="absolute left-0 px-3 h-full flex justify-center items-center top-0 text-secondosiblue">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<input name="guest_name" type="text" placeholder="Name"
|
|
class="w-full border border-gray-300 pl-11 pr-3 py-3 outline-none rounded-md">
|
|
</div>
|
|
|
|
|
|
<div class="relative">
|
|
<div class="absolute left-0 px-3 h-full flex justify-center items-center top-0 text-secondosiblue">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
|
|
</svg>
|
|
</div>
|
|
<input name="guest_mobile_number" type="tel" placeholder="Mobile Number"
|
|
class="w-full border border-gray-300 pl-11 pr-3 py-3 outline-none rounded-md">
|
|
</div>
|
|
|
|
</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 px-3 py-2 rounded-md w-fit justify-start items-center gap-1 text-white bg-secondosiblue border border-secondosiblue cursor-pointer hover:bg-transparent hover:text-secondosiblue mt-2 duration-300">
|
|
Start Conversation
|
|
<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> |