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.
197 lines
8.9 KiB
HTML
197 lines
8.9 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Line Operator Dashboard | Container Depot</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.sidebar {
|
|
background: linear-gradient(180deg, #0f4c81 0%, #1a6baf 100%);
|
|
transition: all 0.3s;
|
|
}
|
|
.content-area {
|
|
transition: all 0.3s;
|
|
}
|
|
.nav-item {
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.nav-item.active {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-left: 4px solid white;
|
|
}
|
|
.card {
|
|
transition: all 0.3s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.tab {
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.form-section {
|
|
animation: slideIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="{% static 'styles/forms.css' %}">
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden">
|
|
<!-- Sidebar -->
|
|
{% include 'client-sidebar.html' %}
|
|
<!-- Main Content -->
|
|
<main class="content-area flex-1 overflow-y-auto">
|
|
<!-- Top Navigation -->
|
|
<header class="bg-white shadow-sm">
|
|
<div class="flex items-center justify-between px-6 py-4">
|
|
<div class="flex items-center">
|
|
<h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="text-gray-500 hover:text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-gray-500 hover:text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div class="p-6">
|
|
{% block content %}
|
|
{# {% include 'client-dashboard-content.html' %}#}
|
|
{# {% include 'client-preinfo-content.html' %}#}
|
|
{# {% include 'client-orders-content.html' %}#}
|
|
{% endblock content %}
|
|
</div>
|
|
</main>
|
|
|
|
{# <script>#}
|
|
{# // Tab Navigation#}
|
|
{# const dashboardContent = document.getElementById('dashboardContent');#}
|
|
{# const preinfoContent = document.getElementById('preinfoContent');#}
|
|
{# const ordersContent = document.getElementById('ordersContent');#}
|
|
{# #}
|
|
{# const preinfoNav = document.getElementById('preinfoNav');#}
|
|
{# const ordersNav = document.getElementById('ordersNav');#}
|
|
{# #}
|
|
{# preinfoNav.addEventListener('click', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // Update content visibility#}
|
|
{# dashboardContent.classList.remove('active');#}
|
|
{# preinfoContent.classList.add('active');#}
|
|
{# ordersContent.classList.remove('active');#}
|
|
{# #}
|
|
{# // Update navigation styling#}
|
|
{# document.querySelector('.nav-item.active').classList.remove('active');#}
|
|
{# preinfoNav.classList.add('active');#}
|
|
{# #}
|
|
{# // Update header title#}
|
|
{# document.querySelector('header h2').textContent = 'Container Preinfo';#}
|
|
{# });#}
|
|
{# #}
|
|
{# ordersNav.addEventListener('click', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // Update content visibility#}
|
|
{# dashboardContent.classList.remove('active');#}
|
|
{# preinfoContent.classList.remove('active');#}
|
|
{# ordersContent.classList.add('active');#}
|
|
{# #}
|
|
{# // Update navigation styling#}
|
|
{# document.querySelector('.nav-item.active').classList.remove('active');#}
|
|
{# ordersNav.classList.add('active');#}
|
|
{# #}
|
|
{# // Update header title#}
|
|
{# document.querySelector('header h2').textContent = 'Expedition Orders';#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Damage checkbox toggle#}
|
|
{# const damageCheck = document.getElementById('damageCheck');#}
|
|
{# const damageDetails = document.getElementById('damageDetails');#}
|
|
{# #}
|
|
{# damageCheck.addEventListener('change', function() {#}
|
|
{# if (this.checked) {#}
|
|
{# damageDetails.classList.remove('hidden');#}
|
|
{# } else {#}
|
|
{# damageDetails.classList.add('hidden');#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Order type toggle#}
|
|
{# const specificContainer = document.getElementById('specificContainer');#}
|
|
{# const anyContainer = document.getElementById('anyContainer');#}
|
|
{# const specificContainerFields = document.getElementById('specificContainerFields');#}
|
|
{# const anyContainerFields = document.getElementById('anyContainerFields');#}
|
|
{# #}
|
|
{# specificContainer.addEventListener('change', function() {#}
|
|
{# if (this.checked) {#}
|
|
{# specificContainerFields.classList.remove('hidden');#}
|
|
{# anyContainerFields.classList.add('hidden');#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# anyContainer.addEventListener('change', function() {#}
|
|
{# if (this.checked) {#}
|
|
{# specificContainerFields.classList.add('hidden');#}
|
|
{# anyContainerFields.classList.remove('hidden');#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Form submissions#}
|
|
{# document.getElementById('preinfoForm').addEventListener('submit', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // In a real app, this would send data to the server#}
|
|
{# alert('Preinfo submitted successfully!');#}
|
|
{# this.reset();#}
|
|
{# });#}
|
|
{# #}
|
|
{# document.getElementById('orderForm').addEventListener('submit', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // In a real app, this would send data to the server#}
|
|
{# alert('Expedition order submitted successfully!');#}
|
|
{# this.reset();#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Add more container button#}
|
|
{# document.getElementById('addMoreContainer').addEventListener('click', function() {#}
|
|
{# alert('In a real app, this would add fields for another container');#}
|
|
{# });#}
|
|
{# </script>#}
|
|
{#<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>#}
|
|
</body>
|
|
</html>
|