File: /home/django/apps/cargochains/templates/adminbase.html
{% load static %}
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cargochains Dashboard</title>
<!--begin::Accessibility Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
<!--end::Accessibility Meta Tags-->
<!--begin::Primary Meta Tags-->
<meta name="title" content="AdminLTE 4 | Sidebar Mini" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
/>
<meta
name="keywords"
content="cargochains"
/>
<!--end::Primary Meta Tags-->
<!--begin::Accessibility Features-->
<!-- Skip links will be dynamically added by accessibility.js -->
<meta name="supported-color-schemes" content="light dark" />
<!--end::Accessibility Features-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
media="print"
onload="this.media='all'"
/>
<!--end::Fonts-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="{% static 'adminlte4/css/adminlte.css' %}" />
<link rel="stylesheet" href="{% static 'adminlte4/css/mystyle.css' %}" as="style" />
<link rel="stylesheet" href="{% static 'adminlte4/css/cargochains.css' %}" as="style" />
<!--end::Required Plugin(AdminLTE)-->
{% block extra_css %}{% endblock %}
<style>
.alert {
display: flex;
align-items: center; /* vertical center */
}
.alert .btn-close {
transform: scale(0.7);
margin-left: .5rem;
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
{% include 'partials/navbar.html' %}
</nav>
<aside class="app-sidebar bg-dark" data-bs-theme="dark" >
{% block sidebar %}
{% include 'partials/sidebar.html' %}
{% endblock %}
</aside>
<main class="app-main">
{% if messages %}
<div id="django-messages" class="d-none">
{% for m in messages %}
<div data-tags="{{ m.tags }}" data-text="{{ m|escape }}"></div>
{% endfor %}
</div>
{% endif %}
{% block content_header %}{% endblock %}
{% block content %}
<!-- Default content -->
{% endblock %}
</main>
<!-- Modal confirm -->
<!-- Global alert host (inline alerts) -->
<div id="global-alert-host"
class="position-fixed top-0 start-50 translate-middle-x p-3"
style="z-index: 1080; width: min(720px, 95vw);">
</div>
<!-- Toast host -->
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1090;">
<div id="global-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto" id="toast-title">Notice</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="toast-body"></div>
</div>
</div>
<!-- Modal alert -->
<div class="modal fade" id="global-alert-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Alert</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="global-confirm-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirm-title">Confirm</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="confirm-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" id="confirm-cancel">
Cancel
</button>
<button type="button" class="btn btn-danger" id="confirm-ok">
OK
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="profileModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-md modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">My Profile</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="profileModalBody">
<div class="text-secondary small">Loading...</div>
</div>
</div>
</div>
</div>
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">PT. Dakara Samudera Hanasta </div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright © 2025
<a href="https://adminlte.io" class="text-decoration-none">CARGOCHAINS</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<script src="{% static 'vendor/js/global_alert.js' %}"> </script>
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
crossorigin="anonymous"
>
</script>
<script src="{% static 'vendor/js/user_profile_modal.js' %}"></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="{% static 'adminlte4/js/adminlte.js' %}"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
// Disable OverlayScrollbars on mobile devices to prevent touch interference
const isMobile = window.innerWidth <= 992;
if (
sidebarWrapper &&
OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
!isMobile
) {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
{% block extra_js %}{% endblock %}
</body>
<!--end::Body-->
</html>