buttons in table footer
This commit is contained in:
+33
-180
@@ -5,192 +5,45 @@
|
||||
<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/tables.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'styles/forms.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'styles/sidebar.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'styles/base.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'styles/dashboard-content.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">
|
||||
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
{% include 'client-sidebar.html' %}
|
||||
</aside>
|
||||
|
||||
<main class="content-area">
|
||||
{# <header class="top-nav">#}
|
||||
{# <div class="nav-container">#}
|
||||
{# <div class="nav-left">#}
|
||||
{# <h2 class="page-title">Dashboard</h2>#}
|
||||
{# </div>#}
|
||||
{# <div class="nav-right">#}
|
||||
{# <button class="icon-button">#}
|
||||
{# <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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="icon-button">#}
|
||||
{# <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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>#}
|
||||
|
||||
<div class="content">
|
||||
{% 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>
|
||||
|
||||
Reference in New Issue
Block a user