<!DOCTYPE html>
<html lang="zxx">

<!-- Mirrored from demo.dashboardpack.com/marketing-html/index_2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 May 2023 10:14:44 GMT -->
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>RFID</title>

<style>
    .hover-element {
        color: #fff;
    }
    
    .hover-element::before {
      content: " InProgress/Completed/Total ";
      position: absolute;
      top: -30px; /* Adjust the distance from the cursor */
      left: 40%;
      transform: translateX(-50%);
      background-color: #000;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      opacity: 0;
      pointer-events: none; /* Ensure the pseudo-element doesn't interfere with clicks */
      transition: opacity 0.3s;
    }
    
    .hover-element:hover::before {
      opacity: 1;
    }
    .operator-hover-element {
        color: #fff;
    }
    
    .operator-hover-element::before {
      content: " Active/Total ";
      position: absolute;
      top: -30px; /* Adjust the distance from the cursor */
      left: 40%;
      transform: translateX(-50%);
      background-color: #000;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      opacity: 0;
      pointer-events: none; /* Ensure the pseudo-element doesn't interfere with clicks */
      transition: opacity 0.3s;
    }
    
    .operator-hover-element:hover::before {
      opacity: 1;
    }

    /* Styles for the overlay background */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* semi-transparent black overlay */
    }

    /* Styles for the popup */
    .popup {
    display: none;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1; /* Ensure the popup is above the overlay */
    }

    /* Style for the close button */
    .popup-close {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #333;
    }

    </style>

 <!-- Other head elements -->
<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->

<link rel="icon" href="img/logo.png" type="image/png">

<link rel="stylesheet" href="/static/css/bootstrap1.min.css" />

<link rel="stylesheet" href="/static/vendors/themefy_icon/themify-icons.css" />

<link rel="stylesheet" href="/static/vendors/niceselect/css/nice-select.css" />

<link rel="stylesheet" href="/static/vendors/owl_carousel/css/owl.carousel.css" />

<link rel="stylesheet" href="/static/vendors/gijgo/gijgo.min.css" />

<link rel="stylesheet" href="/static/vendors/font_awesome/css/all.min.css" />
<link rel="stylesheet" href="/static/vendors/tagsinput/tagsinput.css" />

<link rel="stylesheet" href="/static/vendors/datepicker/date-picker.css" />

<link rel="stylesheet" href="/static/vendors/scroll/scrollable.css" />

<link rel="stylesheet" href="/static/vendors/datatable/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="/static/vendors/datatable/css/responsive.dataTables.min.css" />
<link rel="stylesheet" href="/static/vendors/datatable/css/buttons.dataTables.min.css" />

<link rel="stylesheet" href="/static/vendors/text_editor/summernote-bs4.css" />

<link rel="stylesheet" href="/static/vendors/morris/morris.css">

<link rel="stylesheet" href="/static/vendors/material_icon/material-icons.css" />

<link rel="stylesheet" href="/static/css/metisMenu.css">

<link rel="stylesheet" type="text/css" href="../../static/css/style1.css" />
<link rel="stylesheet" href="/static/css/colors/default.css" id="colorSkinCSS">

</head>
<body class="crm_body_bg">



<nav class="sidebar vertical-scroll  ps-container ps-theme-default ps-active-y">
<div class="logo d-flex justify-content-between">
<a href="index.html"><img src="/img/logo.png" alt>RFID</a>
<div class="sidebar_close_icon d-lg-none">
<i class="ti-close"></i>
</div>
</div>
<ul id="sidebar_menu">
<!-- <li class="mm-active"> -->
<li>
<a class="has-arrow" href="{% url 'index'%}">
<div class="icon_menu">
<img src="/static/img/menu-icon/dashboard.svg" alt>
</div>
<span>Dashboard</span>
</a>
</li>
{% comment %} <li>
    <a class="has-arrow" href="{% url 'articlegroup_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/2.svg" alt>
    </div>
    <span>Article Group</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'operations_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/2.svg" alt>
    </div>
    <span>Operations</span>
    </a>
</li> {% endcomment %}
<li>
    <a class="has-arrow" href="{% url 'article_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/2.svg" alt>
    </div>
    <span>Article</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'getMachinebundle' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/2.svg" alt>
    </div>
    <span>Article Machines</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'step_page'%}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Bundle Steps</span>
    </a>
</li>

<li>
    <a class="has-arrow"href="{% url 'bundle_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Bundle</span>
    </a>
</li>

<li>
    <a class="has-arrow" href="{% url 'operator_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Operator</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'machine_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Machine</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'MoperatorBundle_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Machine Operator Bundle</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'mOperator_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Machine Operator</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'skill_page' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Skill</span>
    </a>
</li>
<li>
    <a class="has-arrow" href="{% url 'get_reporting' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Reporting</span>
    </a>
</li>

<!-- <li>
    <a class="has-arrow" href="{% url 'previouWagesPage' %}">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Previous wages</span>
    </a>
</li> -->


{% comment %} <li>
    <a class="has-arrow" href="#">
    <div class="icon_menu">
    <img src="/static/img/menu-icon/dashboard.svg" alt>
    </div>
    <span>Operator bundle</span>
    </a>
</li> {% endcomment %}

</ul>
</nav>

<div class="container-fluid g-0">
<div class="row">
<div class="col-lg-12 p-0 ">
<div class="header_iner default_header d-flex justify-content-between align-items-center">
<div class="sidebar_icon d-lg-none">
<i class="ti-menu"></i>
</div>
<div class="serach_field-area d-flex align-items-center">
<div class="search_inner">
<form action="#">
<div class="search_field">
<input type="text" placeholder="Search here...">
</div>
<button type="submit"> <img src="/static/img/icon/icon_search.svg" alt> </button>
</form>
</div>
<span class="f_s_14 f_w_400 ml_25 white_text text_white">Apps</span>
</div>
<div class="header_right d-flex justify-content-between align-items-center">
<div class="header_notification_warp d-flex align-items-center">
<li>
<a class="bell_notification_clicker nav-link-notify" href="#"> <img src="/static/img/icon/bell.svg" alt>
</a>

<div class="Menu_NOtification_Wrap">
<div class="notification_Header">
<h4>Notifications</h4>
</div>
<div class="Notification_body">

<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="#"><img src="/static/img/staf/2.png" alt></a>
</div>
<div class="notify_content">
<a href="#"><h5>Cool Marketing </h5></a>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="#"><img src="/static/img/staf/4.png" alt></a>
</div>
<div class="notify_content">
<a href="#"><h5>Awesome packages</h5></a>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="#"><img src="/static/img/staf/3.png" alt></a>
</div>
<div class="notify_content">
<a href="#"><h5>what a packages</h5></a>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="#"><img src="/staticimg/staf/2.png" alt></a>
</div>
<div class="notify_content">
<a href="#"><h5>Cool Marketing </h5></a>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="#"><img src="/static/img/staf/4.png" alt></a>
</div>
<div class="notify_content">
<a href="#"><h5>Awesome packages</h5></a>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="#"><img src="/static/img/staf/3.png" alt></a>
</div>
<div class="notify_content">
<a href="#"><h5>what a packages</h5></a>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="nofity_footer">
<div class="submit_button text-center pt_20">
<a href="#" class="btn_1">See More</a>
</div>
</div>
</div>

</li>
<li>
<a class="CHATBOX_open nav-link-notify" href="#"> <img src="/static/img/icon/msg.svg" alt> </a>
</li>
</div>
<div class="profile_info">
<img src="/static/img/client_img.png" alt="#">
<div class="profile_info_iner">
<div class="profile_author_name">
<p style="font-size:11px;important">{{request.user}}</p>
</div>
<div class="profile_info_details">
<a href="#">My Profile </a>
<a href="#">Settings</a>
<a href="/logout/">Log Out </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



    {% block start %}

    {% endblock %}


<script src="/static/js/jquery1-3.4.1.min.js"></script>

<script src="/static/js/popper1.min.js"></script>



<script src="/static/js/bootstrap1.min.js"></script>

<script src="/static/js/metisMenu.js"></script>

<script src="/static/vendors/count_up/jquery.waypoints.min.js"></script>

<script src="/static/vendors/chartlist/Chart.min.js"></script>

<script src="/static/vendors/count_up/jquery.counterup.min.js"></script>

<script src="/static/vendors/niceselect/js/jquery.nice-select.min.js"></script>

<script src="/static/vendors/owl_carousel/js/owl.carousel.min.js"></script>

<script src="/static/vendors/datatable/js/jquery.dataTables.min.js"></script>
<script src="/static/vendors/datatable/js/dataTables.responsive.min.js"></script>
<script src="/static/vendors/datatable/js/dataTables.buttons.min.js"></script>
<script src="/static/vendors/datatable/js/buttons.flash.min.js"></script>
<script src="/static/vendors/datatable/js/jszip.min.js"></script>
<script src="/static/vendors/datatable/js/pdfmake.min.js"></script>
<script src="/static/vendors/datatable/js/vfs_fonts.js"></script>
<script src="/static/vendors/datatable/js/buttons.html5.min.js"></script>
<script src="/static/vendors/datatable/js/buttons.print.min.js"></script>
<script src="/static/js/chart.min.js"></script>

<script src="/static/vendors/progressbar/jquery.barfiller.js"></script>

<script src="/static/vendors/tagsinput/tagsinput.js"></script>

<script src="/static/vendors/text_editor/summernote-bs4.js"></script>
<script src="/static/vendors/am_chart/amcharts.js"></script>
<script src="/static/vendors/apex_chart/apexcharts.js"></script>
<script src="/static/vendors/apex_chart/apex_dashboard.js"></script>

<script src="/static/vendors/scroll/perfect-scrollbar.min.js"></script>
<script src="/static/vendors/scroll/scrollable-custom.js"></script>
<script src="/static/vendors/chart_am/core.js"></script>
<script src="/static/vendors/chart_am/charts.js"></script>
<script src="/static/vendors/chart_am/animated.js"></script>
<script src="/static/vendors/chart_am/kelly.js"></script>
<script src="/static/vendors/chart_am/chart-custom.js"></script>

<script src="/static/js/custom.js"></script>


</body>

<!-- Mirrored from demo.dashboardpack.com/marketing-html/index_2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 May 2023 10:14:45 GMT -->
</html>