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.
541 lines
41 KiB
HTML
541 lines
41 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %} Osina {% endblock %}</title>
|
|
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="bg-gray-200">
|
|
<div class="w-full flex">
|
|
<!-- FIXED SIDE NAVBAR -->
|
|
<div class="fixed h-screen w-[300px] bg-osiblue pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
|
|
id="fixedSideHeader">
|
|
|
|
<!-- Menu Items -->
|
|
<div>
|
|
<a href="{% url 'home' %}">
|
|
<div class="mb-10 w-full flex justify-center">
|
|
<img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[180px]">
|
|
</div>
|
|
</a>
|
|
|
|
<div class="w-full px-3 relative">
|
|
<input type="text"
|
|
class="w-full bg-transparent border border-white border-opacity-10 py-2 px-3 text-white outline-none rounded-md"
|
|
placeholder="Search...">
|
|
<div class="inset-y-0 absolute right-5 flex justify-center items-center text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[20px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="w-full flex flex-col items-center px-5 h-[400px] xxlg1:h-[500px] overflow-hidden overflow-y-auto mt-5">
|
|
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
|
|
</svg>
|
|
<p class="">Projects</p>
|
|
</div>
|
|
|
|
<a href="{% url 'customertickets' %}" class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
|
|
</svg>
|
|
<p>Tickets</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'customerorders' %}" class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
|
</svg>
|
|
<p>Orders</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'customerinvoices' %}" class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
|
|
</svg>
|
|
<p>Invoices</p>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
<p class="">Products</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up" style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3">
|
|
<a href="{% url 'osimenuplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Osimenu</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'osicardplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Osicard</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'sharedhostingplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Shared Hosting</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'cloudvpshostingplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Cloud VPS Hosting</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'dedicatedserversplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Dedicated CPU Servers</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
|
|
</svg>
|
|
|
|
<p>Knowledgebase</p>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
|
|
</svg>
|
|
<p>Contact Us</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div
|
|
class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
|
|
<div class="w-full flex flex-col justify-center gap-1 items-center">
|
|
<div class="flex justify-center items-center gap-1">
|
|
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
|
|
<p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
|
|
</div>
|
|
<p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MOBILE FIXED SIDE BAR -->
|
|
<div class="w-full h-[100vh] absolute bg-black bg-opacity-40 z-50 mt-[80px] mobileFixedSideHeader hidden">
|
|
<div class="w-[70%] h-full bg-osiblue flex flex-col gap-3 relative">
|
|
<div class="w-full">
|
|
<!-- USER PROFILE -->
|
|
<div class="w-full flex justify-start items-center gap-2 cursor-pointer border border-white border-opacity-10 py-2 px-3 duration-300 bg-secondosiblue"
|
|
id="mobileUserProfile">
|
|
<div>
|
|
<div
|
|
class="w-[40px] h-[40px] border border-osiblue bg-osiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
|
|
{{ request.user.first_name.0 }}{{ request.user.last_name.0 }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-between items-center gap-2 text-white py-3">
|
|
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
|
|
<i class="fa fa-angle-down"></i>
|
|
<i class="fa fa-angle-up" style="display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USER PROFILE DROPDOWN -->
|
|
<div class="w-full h-fit bg-secondosiblue px-5 flex flex-col hidden" id="mobileUserProfileDropdown">
|
|
<a href="{% url 'signout' %}" class="w-full">
|
|
<div class="w-full py-3 flex items-center gap-2 text-white text-[16px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
|
|
</svg>
|
|
<p>Logout</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- MOBILE MENU ITEMS -->
|
|
<div class="w-full flex flex-col items-center px-3 h-[400px] overflow-hidden overflow-y-auto">
|
|
<div class="w-full">
|
|
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
|
|
</svg>
|
|
<p class="text-white">Projects</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<a href="{% url 'customertickets' %}" class="w-full">
|
|
<div class="w-full">
|
|
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
|
|
</svg>
|
|
<p class="text-white">Tickets</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<div class="w-full">
|
|
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
|
</svg>
|
|
<p class="text-white">Orders</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<a href="{% url 'customerinvoices' %}" class="w-full">
|
|
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
|
|
</svg>
|
|
<p class="text-white">Invoices</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
<p class="">Products</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up" style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3">
|
|
<a href="{% url 'osimenuplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Osimenu</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="{% url 'osicardplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Osicard</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'sharedhostingplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Shared Hosting</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'cloudvpshostingplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Cloud VPS Hosting</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'dedicatedserversplans' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Dedicated CPU Servers</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full">
|
|
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
|
|
</svg>
|
|
<p class="text-white">Knowledgebase</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
|
|
</svg>
|
|
<p class="text-white">Contact Us</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- SCROLL PART -->
|
|
<div class="flex-1 ml-[300px] h-fit bg-gray-200" id="scrollPart">
|
|
<!-- TOP HEADER -->
|
|
<div
|
|
class="w-full h-[100px] bg-white shadow-md px-5 s:px-9 py-5 flex justify-between items-center topHeader">
|
|
<div class="w-fit flex justify-start items-center gap-10">
|
|
<div class="w-fit flex flex-col gap-2 cursor-pointer" id="burgerMenuButton">
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
|
|
</div>
|
|
|
|
<a href="{% url 'products' %}">
|
|
<div class="w-fit flex shadow-md cursor-pointer hover:scale-105 duration-500 transition-transform">
|
|
<div class="text-secondosiblue py-2 px-5 bg-gray-50 border border-gray-100 text-sm">
|
|
<p class="font-poppinsBold">Place an Order</p>
|
|
<p class="font-light">Search Products and Create Order Lines</p>
|
|
</div>
|
|
<div class="py-2 px-3 bg-osiblue border border-secondosiblue flex justify-center items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-white w-[30px]">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="w-fit flex justify-between items-center gap-2 cursor-pointer hover:bg-gray-50 rounded-md hover:p-2 duration-300"
|
|
id="userProfile">
|
|
<div
|
|
class="w-[40px] h-[40px] border border-osiblue bg-osiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
|
|
{{ request.user.first_name.0 }}{{ request.user.last_name.0 }}
|
|
</div>
|
|
|
|
<div class="flex justify-center items-center gap-2 text-gray-500">
|
|
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
|
|
<i class="fa fa-angle-down" id="arrowDown"></i>
|
|
<i class="fa fa-angle-up" style="display: none;" id="arrowUp"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USER PROFILE DROPDOWN -->
|
|
<div class="w-[250px] h-fit bg-osiblue bg-opacity-70 rounded-md shadow-md px-3 absolute right-0 mt-3 flex flex-col"
|
|
style="display: none;" id="userProfileDropdown">
|
|
<a href="{% url 'signout' %}" class="w-full">
|
|
<div
|
|
class="w-full py-3 flex items-center gap-2 text-white hover:text-osiblue duration-300 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-[25px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
|
|
</svg>
|
|
<p>Logout</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- MOBILE TOP HEADER -->
|
|
<div
|
|
class="w-full h-[80px] bg-osiblue shadow-md px-5 s:px-9 py-5 flex xlg1:hidden justify-between items-center mobileTopHeader">
|
|
<a href="{% url 'home' %}">
|
|
<img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[130px] h-auto">
|
|
</a>
|
|
|
|
<div class="w-fit flex flex-col gap-2 cursor-pointer" id="mobileBurgerMenuButton">
|
|
<div class="w-[25px] h-[2px] bg-white duration-300"></div>
|
|
<div class="w-[25px] h-[2px] bg-white duration-300"></div>
|
|
<div class="w-[25px] h-[2px] bg-white duration-300"></div>
|
|
</div>
|
|
|
|
<div class="w-fit cursor-pointer hidden" id="mobileCloseMenuButton">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[40px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{% block modules_section %}
|
|
<!-- MODULES SECTION -->
|
|
<div class="w-full h-fit grid grid-cols-1 xxlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Invoices</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 625.51 595.28" class="w-[55px]">
|
|
<defs>
|
|
<style>
|
|
.cls-1 {
|
|
fill: none;
|
|
stroke: #20336b;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 12px;
|
|
}
|
|
</style>
|
|
</defs>
|
|
<path class="cls-1" d="M176.75,560.48c-3.59,3.77-7.55,7.19-11.68,10.24h326.35c43.13,0,77.63-31.81,82.66-74.22H206.23c-2.34,24.26-12.58,46.72-29.47,63.98Z"/>
|
|
<path class="cls-1" d="M502.56,144.47c-58.22,0-105.67,47.44-105.67,105.67v2.88c1.44,56.97,48.34,102.79,105.67,102.79s105.67-47.44,105.67-105.67-47.44-105.67-105.67-105.67ZM502.56,239.89c21.38,0,38.82,17.43,38.82,38.82,0,17.79-12.22,32.89-28.57,37.56v13.48c0,5.75-4.67,10.24-10.24,10.24s-10.24-4.67-10.24-10.24v-13.48c-16.53-4.49-28.57-19.59-28.57-37.56,0-5.75,4.67-10.24,10.24-10.24s10.24,4.67,10.24,10.24c0,10.06,8.27,18.33,18.33,18.33s18.33-8.27,18.33-18.33-8.27-18.33-18.33-18.33c-21.38,0-38.82-17.43-38.82-38.82,0-17.79,12.22-32.89,28.57-37.56v-13.48c0-5.75,4.67-10.24,10.24-10.24s10.24,4.67,10.24,10.24v13.48c16.53,4.49,28.57,19.59,28.57,37.56,0,5.75-4.67,10.24-10.24,10.24s-10.24-4.67-10.24-10.24c0-10.06-8.27-18.33-18.33-18.33s-18.33,8.27-18.33,18.33,8.09,18.33,18.33,18.33Z"/>
|
|
<path class="cls-1" d="M196.34,476.02h295.8v-99.92c-31.45-2.52-59.66-16.71-80.33-38.1H82.23c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h313.41c-10.06-15.99-16.71-34.32-18.69-54.09H82.23c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h294.18c1.08-19.59,6.83-37.92,15.81-54.09H82.23c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h324.37c21.03-24.62,51.4-40.97,85.54-43.67V30.17H16.64v454.48c0,23,8.99,44.57,25.34,60.92,16.35,16.35,37.92,25.34,60.92,25.34,46.54,0,83.2-37.2,83.2-84.46,0-5.93,4.67-10.42,10.24-10.42ZM82.23,93.25h195.34c5.75,0,10.24,4.67,10.24,10.24s-4.67,10.24-10.24,10.24H82.23c-5.75,0-10.24-4.67-10.24-10.24-.18-5.57,4.49-10.24,10.24-10.24ZM82.23,412.77c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h344.5c5.75,0,10.24,4.67,10.24,10.24s-4.67,10.24-10.24,10.24H82.23Z"/>
|
|
</svg>
|
|
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 625.51 595.28" class="w-[60px]">
|
|
<defs>
|
|
<style>
|
|
.cls-1 {
|
|
fill: none;
|
|
stroke: #20336b;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 12px;
|
|
}
|
|
</style>
|
|
</defs>
|
|
<circle class="cls-1" cx="267.98" cy="343.01" r="245.83" transform="translate(-164.05 289.95) rotate(-45)"/>
|
|
<circle class="cls-1" cx="267.98" cy="343.01" r="190.73"/>
|
|
<circle class="cls-1" cx="267.98" cy="343.01" r="128.57"/>
|
|
<circle class="cls-1" cx="267.98" cy="343.01" r="73.47" transform="translate(-71.91 71.08) rotate(-13.34)"/>
|
|
<circle class="cls-1" cx="267.98" cy="343.01" r="25.43"/>
|
|
<line class="cls-1" x1="267.98" y1="343.01" x2="581.63" y2="46.31"/>
|
|
<polygon class="cls-1" points="467.19 155.1 457.3 81.63 536.41 5.34 547.72 75.98 467.19 155.1"/>
|
|
<polyline class="cls-1" points="467.19 155.1 530.76 173.47 615.53 100 547.72 75.98"/>
|
|
<line class="cls-1" x1="506.75" y1="40.66" x2="516.64" y2="102.83"/>
|
|
<line class="cls-1" x1="481.31" y1="60.44" x2="491.2" y2="126.84"/>
|
|
<line class="cls-1" x1="495.44" y1="133.91" x2="554.78" y2="150.86"/>
|
|
<line class="cls-1" x1="522.29" y1="107.07" x2="588.69" y2="124.02"/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 625.51 595.28" class="w-[60px]">
|
|
<defs>
|
|
<style>
|
|
.cls-1 {
|
|
fill: none;
|
|
stroke: #20336b;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 12px;
|
|
}
|
|
</style>
|
|
</defs>
|
|
<path class="cls-1" d="M592.85,237.81c-3.84,15.46-14.66,25.96-25.44,36.71-99.46,99.26-198.83,198.62-298.14,298.05-15.33,15.35-32.97,20.62-53.38,12.67-6.16-2.4-12.07-6.61-16.8-11.3-58.45-58.1-116.72-116.39-174.92-174.74-20.05-20.1-20.08-48.56-.09-68.57C127.43,227.18,230.88,123.84,334.18,20.36c7.48-7.49,16.48-11.74,26.2-15.02h17.09c15.26,3.79,25.66,14.42,36.27,25.08,51.98,52.23,104.06,104.35,156.33,156.29,10.23,10.17,19.73,20.48,22.78,35.14v15.95Z"/>
|
|
<path class="cls-1" d="M449.31,244.57c-3.71,9.02-7.09,17.22-10.89,26.45,2.6,2.5,5.96,5.5,9.07,8.75,6.93,7.25,7.1,17.86.52,24.56-6.75,6.88-17.06,6.96-24.5-.09-3.28-3.11-6.08-6.73-8.36-9.29-8.95,3.41-16.56,6.17-24.01,9.29-1.32.55-2.67,2.55-2.83,4.01-.42,3.75.01,7.59-.25,11.37-.68,9.69-7.7,16.37-16.98,16.41-9.15.04-17.89-6.95-16.97-16.19,1.18-11.9-3.08-17.48-14.34-19.62-3.93-.75-7.48-3.52-12.15-5.83-2.72,2.9-5.56,6.17-8.66,9.18-7.7,7.47-17.88,7.71-24.91.74-7.03-6.97-6.86-17.27.52-24.91,2.89-3,5.98-5.8,8.59-8.31-3.23-8.49-6.13-16.42-9.35-24.22-.46-1.11-2.47-2.1-3.84-2.23-3.58-.33-7.21-.02-10.81-.19-9.82-.45-16.98-7.67-17.07-17.07-.09-9.45,6.91-17.85,16.71-16.95,11.33,1.03,16.84-2.74,18.89-13.68.77-4.12,3.63-7.85,6.3-13.32-2.96-2.53-6.64-5.23-9.8-8.45-7.2-7.35-7.33-17.58-.62-24.49,6.72-6.92,17.52-6.82,24.94.4,3.12,3.04,5.93,6.39,8.41,9.08,9.27-3.86,17.62-7.34,26.65-11.1,0-3.89-.09-8.62.02-13.34.21-9.49,7.81-17.13,16.98-17.17,9.25-.04,16.88,7.46,17.13,16.99.12,4.73.02,9.46.02,13.59,8.92,3.67,17.28,7.12,26.87,11.07,2.34-2.56,5.23-6.06,8.48-9.19,7.29-7.02,17.76-7.08,24.54-.36,6.77,6.71,6.77,17.17-.19,24.55-3.11,3.3-6.57,6.27-9.21,8.77,3.86,9.28,7.33,17.64,11.07,26.64,4.28,0,9.2-.15,14.11.03,8.88.33,16.08,7.71,16.37,16.56.29,8.8-7.09,16.98-16.1,17.49-4.91.28-9.84.05-14.35.05ZM370.88,272.25c24.96.03,44.86-19.67,45-44.55.14-24.77-20.23-45.25-45.14-45.38-24.72-.12-44.74,19.88-44.8,44.75-.06,25.23,19.75,45.14,44.93,45.18Z"/>
|
|
<path class="cls-1" d="M219.11,279.64c7.76,1.4,13.03,4.55,16.03,11.04,2.99,6.47,2,12.58-2.31,18.13-1.27,1.64-2.86,3.04-4.33,4.52-28.2,28.2-56.4,56.4-84.6,84.6-5.22,5.22-11.23,7.62-18.59,5.11-6.79-2.31-10.57-7.2-11.61-14.13-.85-5.64,1.18-10.5,5.13-14.46,29.37-29.44,58.71-58.93,88.31-88.14,3.13-3.09,7.95-4.49,11.98-6.67Z"/>
|
|
<path class="cls-1" d="M318.5,378.97c-2.18,4.03-3.58,8.83-6.67,11.96-29.2,29.61-58.64,58.99-88.15,88.3-7.28,7.23-17.71,7.11-24.49.33-7.02-7.02-6.91-17.31.61-24.86,29.22-29.33,58.51-58.58,87.81-87.83,5.49-5.48,11.96-7.12,19.28-4.18,6.44,2.59,10.32,8.56,11.62,16.29Z"/>
|
|
<path class="cls-1" d="M173.66,444.32c-10.13-.41-15.6-3.72-18.36-10.53-2.82-6.94-1.61-13.48,3.69-18.91,7.83-8.01,15.81-15.88,23.74-23.8,13.16-13.16,26.3-26.34,39.49-39.47,8.22-8.18,18.42-8.68,25.72-1.35,7.28,7.31,6.78,17.47-1.47,25.75-20.64,20.72-41.24,41.48-62.16,61.92-3.42,3.34-8.4,5.08-10.65,6.39Z"/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock modules_section %}
|
|
|
|
|
|
<!-- BODY -->
|
|
<div class="w-full mb-5">
|
|
{% block content %}
|
|
replace me
|
|
{% endblock content %}
|
|
</div>
|
|
|
|
|
|
<!-- MOBILE FOOTER -->
|
|
<div class="bg-osiblue h-fit py-2 mobileFooter">
|
|
<div class="w-full flex flex-col justify-center items-center gap-1">
|
|
<div class="flex justify-center items-center gap-2">
|
|
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
|
|
<p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
|
|
</div>
|
|
<p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
<!-- SIDE BAR SCRIPT -->
|
|
<script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
|
|
|
|
</body>
|
|
|
|
</html> |