223 lines
7.2 KiB
HTML
223 lines
7.2 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>{% block title %}{% trans "PX360 - Patient Experience Management" %}{% endblock %}</title>
|
|
|
|
<!-- TailwindCSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<!-- Google Fonts - Inter -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- ApexCharts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.1/dist/apexcharts.min.js"></script>
|
|
|
|
<!-- HTMX for dynamic updates -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
<!-- Tailwind Config -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'inter': ['Inter', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
'navy': '#005696', /* Primary Al Hammadi Blue */
|
|
'blue': '#007bbd', /* Accent Blue */
|
|
'light': '#eef6fb', /* Background Soft Blue */
|
|
'slate': '#64748b', /* Secondary text */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f5f9;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
/* RTL adjustments */
|
|
[dir="rtl"] .main-content {
|
|
margin-left: 0;
|
|
margin-right: 5rem;
|
|
}
|
|
|
|
[dir="rtl"] #sidebar {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
/* Main content margin for narrow sidebar */
|
|
.main-content {
|
|
margin-left: 5rem;
|
|
transition: margin-left 0.3s ease;
|
|
}
|
|
|
|
/* When sidebar expands on hover */
|
|
#sidebar:hover ~ .main-content,
|
|
#sidebar:hover + .main-content {
|
|
margin-left: 16rem;
|
|
}
|
|
|
|
[dir="rtl"] #sidebar:hover ~ .main-content,
|
|
[dir="rtl"] #sidebar:hover + .main-content {
|
|
margin-left: 0;
|
|
margin-right: 16rem;
|
|
}
|
|
|
|
/* Responsive sidebar */
|
|
@media (max-width: 1024px) {
|
|
#sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
width: 16rem !important;
|
|
}
|
|
#sidebar.show {
|
|
transform: translateX(0);
|
|
}
|
|
[dir="rtl"] #sidebar {
|
|
transform: translateX(100%);
|
|
}
|
|
[dir="rtl"] #sidebar.show {
|
|
transform: translateX(0);
|
|
}
|
|
.main-content {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Form styles */
|
|
.form-input {
|
|
@apply w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-medium text-gray-700 mb-1.5;
|
|
}
|
|
|
|
.form-select {
|
|
@apply w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white;
|
|
}
|
|
|
|
/* Card hover effects */
|
|
.card-hover {
|
|
@apply transition duration-200 hover:shadow-lg hover:-translate-y-0.5;
|
|
}
|
|
|
|
/* Button transitions */
|
|
.btn-transition {
|
|
@apply transition duration-200 ease-in-out;
|
|
}
|
|
|
|
/* Toast notifications */
|
|
.toast {
|
|
@apply fixed top-4 right-4 z-50 p-4 rounded-xl shadow-lg transform transition-all duration-300;
|
|
}
|
|
.toast.success {
|
|
@apply bg-green-50 text-green-800 border border-green-200;
|
|
}
|
|
.toast.error {
|
|
@apply bg-red-50 text-red-800 border border-red-200;
|
|
}
|
|
.toast.warning {
|
|
@apply bg-yellow-50 text-yellow-800 border border-yellow-200;
|
|
}
|
|
</style>
|
|
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body class="bg-slate-50 text-gray-800 min-h-screen">
|
|
|
|
<div class="flex h-screen">
|
|
<!-- Sidebar -->
|
|
{% include 'layouts/partials/sidebar.html' %}
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="flex-1 flex flex-col main-content overflow-hidden">
|
|
<!-- Page Content -->
|
|
<main class="flex-1 overflow-y-auto p-8">
|
|
<!-- Flash Messages -->
|
|
{% include 'layouts/partials/flash_messages.html' %}
|
|
|
|
<!-- Page Content Block -->
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile sidebar toggle button -->
|
|
<button onclick="toggleSidebar()" class="fixed bottom-4 right-4 z-50 lg:hidden bg-navy text-white p-3 rounded-full shadow-lg">
|
|
<i data-lucide="menu" class="w-6 h-6"></i>
|
|
</button>
|
|
|
|
<!-- CSRF Token for JavaScript -->
|
|
{% csrf_token %}
|
|
<script>
|
|
// Get CSRF token for AJAX requests
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Mobile sidebar toggle
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('show');
|
|
}
|
|
|
|
// Close sidebar when clicking outside on mobile
|
|
document.addEventListener('click', function(e) {
|
|
if (window.innerWidth < 1024) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggleBtn = document.querySelector('[onclick="toggleSidebar()"]');
|
|
if (sidebar && !sidebar.contains(e.target) && !toggleBtn?.contains(e.target)) {
|
|
sidebar.classList.remove('show');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|