salim
/
newosinadjango
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2d7cc7b4ba'
${ noResults }
newosinadjango/osinaweb/customercore/templates/customer_main.html

316 lines
16 KiB
HTML
Raw Blame History

{% 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/osinaw.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">
<i class="fa fa-search"></i>
</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">
<img src="{% static 'images/icons/projectswhite.svg' %}" class="w-[28px]">
<p class="text-white">My Projects</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="{% static 'images/icons/ticket.svg' %}" src="" class="w-[30px]">
<p class="text-white">Tickets</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="{% static 'images/icons/invoice.svg' %}" src="" class="w-[30px]">
<p class="text-white">Invoices</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="{% static 'images/icons/products.svg' %}" class="w-[30px]">
<p class="text-white">Products</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="{% static 'images/icons/about.svg' %}" class="w-[30px]">
<p class="text-white">Knowledgebase</p>
</div>
<div class="w-full flex justify-start items-center gap-3 py-3">
<img src="{% static 'images/icons/support.svg' %}" class="w-[30px]">
<p class="text-white">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/banner-logo.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]">
<img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
<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">
<img src="" class="w-[30px]">
<p class="text-white">My 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">
<img src="" class="w-[30px]">
<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">
<img src="" class="w-[30px]">
<p class="text-white">Invoices</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">
<img src="" class="w-[30px]">
<p class="text-white">Products</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">
<img src="" class="w-[30px]">
<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">
<img src="" class="w-[30px]">
<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-center 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>
</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">
<img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
<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/osinaw.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">
<img src="{% static 'images/closeicon.png' %}" class="w-[25px]">
</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 %}
{% block content %}
replace me
{% endblock content %}
<!-- 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/banner-logo.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>
Reference in New Issue View Git Blame Copy Permalink