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.
175 lines
9.9 KiB
HTML
175 lines
9.9 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
|
|
{% block content %}
|
|
|
|
<div class="w-full px-5 s:px-9 flex flex-col gap-3">
|
|
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
|
<div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
|
|
<p class="text-secondosiblue text-xl">Ticket: <span class="font-semibold">#2226663535</span></p>
|
|
|
|
<div class="flex justify-start items-center gap-1">
|
|
<div class="w-[16px] h-[16px] rounded-full bg-red-200 border border-red-500 shadow-md"></div>
|
|
<p class="text-secondosiblue font-light">Closed by Linode at 20-4-24 16:30</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex flex-col gap-8 mt-5 s:mt-10">
|
|
<!-- REPLY 1 -->
|
|
<div class="flex gap-3">
|
|
<div>
|
|
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
|
<img src="{% static 'images/ositcom_logos/full-logo.png' %}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full replyContainer shadow-md">
|
|
<div
|
|
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
|
<p class="text-secondosiblue font-light text-sm s:text-base"><span class="font-semibold">Ositcom
|
|
Ltd</span>
|
|
commented 2024-04-17 12:19</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
|
</svg>
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="w-full bg-white p-5 flex flex-col gap-3 reply">
|
|
<p class="text-gray-500 font-light leading-8 text-[15px]">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
|
|
magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
|
|
varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
|
|
a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
|
|
turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
|
|
et purus. Aliquam at nunc sit amet tortor lacinia porttitor. Proin auctor, eros ac
|
|
sollicitudin iaculis, felis quam vulputate ante, eu varius dolor arcu non enim. Vestibulum
|
|
ornare dapibus risus, id eleifend ipsum. Aliquam metus urna, bibendum quis cursus vitae,
|
|
placerat sit amet felis. Aliquam tellus ex, pretium id gravida id, vulputate et velit.
|
|
Phasellus leo felis, lobortis ut dolor eget, viverra aliquet ligula. Aliquam molestie ac
|
|
eros et fermentum.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- CUSTOMER SUPPORT REPLY 2 -->
|
|
<div class="flex gap-3">
|
|
<div>
|
|
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
|
<img src="{% static 'images/netcommerce-logo.png' %}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full replyContainer shadow-md">
|
|
<div
|
|
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
|
<p class="text-secondosiblue font-light text-sm s:text-base"><span
|
|
class="font-semibold">Scott</span>
|
|
Customer Support commented 2024-04-17 12:19</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
|
</svg>
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="w-full bg-white flex flex-col gap-5 p-5 reply">
|
|
<p class="text-gray-500 font-light leading-8 text-[15px]">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
|
|
magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
|
|
varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
|
|
a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
|
|
turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
|
|
et purus.
|
|
</p>
|
|
|
|
<div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3">
|
|
<a class="text-secondosiblue font-light cursor-pointer hover:text-gray-500 duration-300">How
|
|
did I do?</a>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<div class="w-fit h-fit rounded-full border-4 border-secondosiblue">
|
|
<img src="{% static 'images/icons/happy-icon.png' %}" class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
|
</div>
|
|
|
|
<div class="w-fit h-fit rounded-full">
|
|
<img src="{% static 'images/icons/neutral-icon.png' %}" class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
|
</div>
|
|
|
|
<div class="w-fit h-fit rounded-full">
|
|
<img src="{% static 'images/icons/unhappy-icon.png' %}" class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- REPLYING SECTION -->
|
|
<div class="flex gap-3">
|
|
<div>
|
|
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
|
<img src="{% static 'images/ositcom_logos/full-logo.png' %}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex flex-col gap-3">
|
|
<textarea
|
|
class="w-full bg-white px-3 py-3 border border-gray-200 rounded-md outline-none text-gray-500 resize-none"
|
|
rows="8" placeholder="Reply to Ositcom Ltd..."></textarea>
|
|
|
|
|
|
<div class="w-full flex flex-col s:flex-row justify-end items-center gap-3">
|
|
<div class="w-full s:w-[50px] h-[50px] rounded-md bg-gray-50 shadow-md border border-gray-100 flex justify-center items-center p-2 cursor-pointer relative hover:scale-105 duration-300 transition-transform">
|
|
<input type="file" name="file" id="fileInput" class="opacity-0">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-secondosiblue z-10 absolute pointer-events-none">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
</svg>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full s:w-fit bg-secondosiblue border border-secondosiblue text-white rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300 px-9 py-3">
|
|
Send
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
|
|
<script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
|
|
|
|
|
|
|
|
{% endblock %} |