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 '0593f7c9e1'
${ noResults }
newosinadjango/osinaweb/templates/main.html

335 lines
17 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-slate-700 pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
id="fixedSideHeader">
<!-- Menu Items -->
<div class="w-full h-fit flex flex-col justify-center items-center px-5">
<div class="mb-14 w-full">
<h1 class="text-white text-4xl text-center"><a href="{% url 'home' %}">OSINA</a></h1>
</div>
<div class="mb-5 w-full relative">
<input type="text" placeholder="Search..."
class="border border-gray-500 rounded-md py-2 px-3 bg-transparent w-full outline-none text-white">
<i class="fa fa-search absolute right-3 top-3 text-gray-500" style="font-size: 20px;"></i>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<i class="fa fa-home" style="font-size: 22px; color: white;"></i>
<a href="{% url 'home' %}" class="text-white text-xl">Home</a>
</div>
<!-- CUSTOMERS -->
{% if user.is_superuser %}
<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">
<i class="fas fa-users" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">Accounts</p>
</div>
<div>
<i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
<i class="angleUp fa fa-angle-up" style="font-size: 25px; color: white; display: none;"></i>
</div>
</div>
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
<a href="{% url 'customers' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Customers</p>
</div>
</a>
<a href="{% url 'businesses' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Businesses</p>
</div>
</a>
<a href="{% url 'users' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Staffs</p>
</div>
</a>
</div>
</div>
{% endif %}
<!-- MY WORK DROPDOWN -->
<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">
<i class="fa fa-tasks" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">My Work</p>
</div>
<div>
<i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
<i class="angleUp fa fa-angle-up" style="font-size: 25px; color: white; display: none;"></i>
</div>
</div>
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
<a href="{% url 'my-projects' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">My Projects</p>
</div>
</a>
<a href="{% url 'my-tasks' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
<p class="text-white">My Tasks</p>
</div>
</a>
<a>
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
<p class="text-white">My Tickets</p>
</div>
</a>
<a href="{% url 'dailyreports' %}">
<div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
<p class="text-white">Daily Reports</p>
</div>
</a>
</div>
</div>
<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">
<i class="fas fa-comment-alt" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">Support</p>
</div>
<div>
<i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
</div>
</div>
{% if user.is_superuser %}
<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">
<i class="fas fa-cash-register" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">Billing</p>
</div>
<div>
<i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
</div>
</div>
{% endif %}
<!-- UTILITIES -->
<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">
<i class="fas fa-cogs" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">Utilities</p>
</div>
<div>
<i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
<i class="angleUp fa fa-angle-up" style="font-size: 25px; color: white; display: none;"></i>
</div>
</div>
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
<a href="{% url 'projecttypes' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Project Types</p>
</div>
</a>
<a href="{% url 'references' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">References</p>
</div>
</a>
<a href="{% url 'tags' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Tags</p>
</div>
</a>
<a href="{% url 'staffpositions' %}">
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Staff Positions</p>
</div>
</a>
<a>
<div
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
<p class="text-white">Countries</p>
</div>
</a>
</div>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<i class="fa fa-check-square" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">Activity</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<i class="fa fa-power-off" style="font-size: 22px; color: white;"></i>
<a href="{% url 'signout' %}" class="text-white text-xl">Logout</a>
</div>
</div>
<!-- Footer -->
<div
class="w-[300px] h-fit bg-slate-800 flex flex-col items-center justify-center gap-2 py-2 fixed bottom-0 inset-x-0">
<div class="w-full flex flex-col justify-center items-center">
<p class="text-gray-500 font-light text-sm">Powered By Ositcom</p>
<p class="text-gray-500 font-light text-sm">Copyrights © 2023 All Rights Reserved</p>
</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-10 py-5 flex justify-between items-center">
<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-slate-800 duration-300"></div>
<div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
<div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
</div>
<div class="flex justify-start items-center gap-5">
<div id="statusContainer">
{% include 'recent-status.html' %}
</div>
<button
class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton"
data-modal-url="{% url 'addstatus' %}">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div>
<div class="w-fit flex justify-between items-center gap-3">
<div class="flex justify-center items-center gap-2">
<p class="text-gray-400">{{request.user.first_name}}
{{request.user.last_name}}</p>
<i class="fa fa-angle-down" style="color: grey;"></i>
</div>
<div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
<img src='{{request.user.staffprofile.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
</div>
</div>
</div>
<!-- MODULES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 py-5">
<div class="w-[23%] h-[150px] 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-slate-800 font-bold">TASKS</p>
<i class="fa fa-tasks" style="font-size: 30px; color: green;"></i>
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
<p class="text-green-700 text-xl font-semibold">{{total_tasks}}</p>
</div>
</div>
</div>
<div class="w-[23%] h-[150px] 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-slate-800 font-bold">NOTIFICATIONS</p>
<i class="fa fa-bell" style="font-size: 30px; color: orangered;"></i>
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-orange-700 flex justify-center items-center">
<p class="text-orange-700 text-xl font-semibold">2</p>
</div>
</div>
</div>
<div class="w-[23%] h-[150px] 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-slate-800 font-bold">TICKETS</p>
<i class="fas fa-ticket-alt" style="font-size: 30px; color: cornflowerblue;"></i>
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-blue-500 flex justify-center items-center">
<p class="text-blue-500 text-xl font-semibold">2</p>
</div>
</div>
</div>
<div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center">
<p class="text-[22px] text-slate-800 font-bold">30 Aug 2023</p>
<!-- <i class="fas fa-comment" style="font-size: 30px; color: salmon;"></i> -->
<img src='{% static "images/clockicon.png" %}' alt="" class="w-[30px] h-[30px]">
</div>
<p class="text-gray-500">12:09:33 PM</p>
<div>
<div class="flex justify-start items-center gap-2">
<p>Available</p>
<img src='{% static "images/yes.png" %}' alt="" class="w-[15px] h-[15px]">
</div>
</div>
</div>
</div>
{% block content %}
replace me
{% endblock content %}
<!---------------------- JS SCRIPTS -------------------->
<!-- SIDE BAR SCRIPT -->
<script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
<!-- TO RELOAD THE STATUS CONTAINER -->
<script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
<!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
<script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink