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.
481 lines
33 KiB
HTML
481 lines
33 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>
|
|
|
|
<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 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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<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>
|
|
<img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
|
|
</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>
|
|
<img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
|
|
</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>
|
|
<img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
|
|
</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> |