New changes.
parent
bd2c077637
commit
3dabc36f2a
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,316 +0,0 @@
|
|||||||
{% 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>
|
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
{% extends "customer_main.html" %}
|
||||||
|
{%load static%}
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
<div class="w-full px-5 s:px-9 flex flex-col gap-5">
|
||||||
|
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
||||||
|
<h1 class="text-secondosiblue text-[30px] font-semibold">Solutions</h1>
|
||||||
|
|
||||||
|
<div class="w-full mt-4 flex flex-wrap gap-5 items-center">
|
||||||
|
<div class="px-5 py-3 bg-osiblue rounded-md shadow-md">
|
||||||
|
<img src="{% static 'images/ositcom_logos/osimenuwhite.png' %}" class="w-[150px]">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-5 py-3 bg-osiblue rounded-md shadow-md">
|
||||||
|
<img src="{% static 'images/ositcom_logos/osicardwhite.png' %}" class="w-[150px]">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
||||||
|
<h1 class="text-secondosiblue text-[30px] font-semibold">Hosting Plans</h1>
|
||||||
|
|
||||||
|
<div class="w-full mt-4 flex flex-wrap gap-5 items-center">
|
||||||
|
<div class="w-[230px] border border-osiblue rounded-md flex justify-center items-center text-osiblue px-5 py-2">
|
||||||
|
<p>Shared Hosting</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[230px] border border-osiblue rounded-md flex justify-center items-center text-osiblue px-5 py-2">
|
||||||
|
<p>Cloud VPS Hosting</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[230px] border border-osiblue rounded-md flex justify-center items-center text-osiblue px-5 py-2">
|
||||||
|
<p>Dedicated CPU Servers</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
||||||
|
<h1 class="text-secondosiblue text-[30px] font-semibold">Domain Name Registration</h1>
|
||||||
|
|
||||||
|
<div class="w-full bg-gray-100 rounded-md px-5 py-3 shadow-md mt-4">
|
||||||
|
<div class="w-fit relative">
|
||||||
|
<input type="text" class="px-3 py-2 bg-white border border-gray-200 rounded-md w-[300px]" placeholder="Search...">
|
||||||
|
<div class="absolute px-3 right-0 top-0 inset-y-0 text-secondosiblue flex justify-center items-center">
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue