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

261 lines
14 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">
</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" 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>
<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="fa fa-user" style="font-size: 22px; color: white;"></i>
<p class="text-white text-xl">Sales</p>
</div>
<div>
<i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
</div>
</div>
<!-- CUSTOMERS -->
<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-list" 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">
<i class='fa fa-user' style="font-size: 16px;"></i>
<p class="text-white">Customers</p>
</div>
</a>
</div>
</div>
<!-- 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">
<i class='fas fa-project-diagram' style="font-size: 16px;"></i>
<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]">
<i class='fas fa-tasks' style="font-size: 19px;"></i>
<p class="text-white">My Tasks</p>
</div>
</a>
<a href="tickets.html">
<div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
<i class='fas fa-ticket-alt'></i>
<p class="text-white">My Tickets</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>
<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="fa fa-euro" 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>
<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-full h-fit bg-slate-800 flex flex-col items-center justify-center gap-2 py-2">
<div class="w-full flex flex-col justify-center items-center">
<!-- <img src="{% static 'images/footer-logo.png' %}" alt="Ositcom Web Development in Lebanon" class="w-[90px] h-[50px]"> -->
<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>
<p class="text-sm text-gray-500">Your last update: 2023-08-31 08:13:31, 32 mins ago</p>
<p class="text-sm text-gray-500">Recent Status: <span
class="text-slate-700 font-semibold">Working on Osina</span></p>
</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"
id="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">{{ user.get_full_name|default:user.username }}</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='{% static "images/avatar.svg" %}' 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">5</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>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink