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.
173 lines
10 KiB
HTML
173 lines
10 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Container Depot Management System</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #0f4c81 0%, #1a6baf 100%);
|
|
min-height: 100vh;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
.login-container {
|
|
animation: fadeIn 0.8s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.wave {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100px;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
z-index: -1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center p-4">
|
|
<div class="wave"></div>
|
|
|
|
<div class="login-container bg-white rounded-xl shadow-2xl overflow-hidden max-w-4xl w-full flex flex-col md:flex-row">
|
|
<!-- Left side - Login Form -->
|
|
<div class="w-full md:w-1/2 p-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-800">Container Depot</h1>
|
|
<p class="text-gray-600 mt-2">Sign in to access the management system</p>
|
|
</div>
|
|
|
|
<form id="loginForm" class="space-y-6">
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
|
|
<input type="text" id="username" name="username" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
|
<input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
|
|
</div>
|
|
<a href="#" class="text-sm text-blue-600 hover:text-blue-800">Forgot password?</a>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
|
|
<div id="loginMessage" class="text-center hidden"></div>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-600">
|
|
<p>Need help? Contact system administrator</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side - Info -->
|
|
<div class="w-full md:w-1/2 bg-gradient-to-br from-blue-600 to-blue-800 p-8 text-white flex flex-col justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-6">Container Depot Management System</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-start">
|
|
<div class="bg-blue-500 p-2 rounded-full mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">Line Operators</h3>
|
|
<p class="text-blue-100 text-sm">Manage container preinfo and expedition orders</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="bg-blue-500 p-2 rounded-full mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">Barrier Staff</h3>
|
|
<p class="text-blue-100 text-sm">Process container arrivals and departures</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="bg-blue-500 p-2 rounded-full mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">Depot Management</h3>
|
|
<p class="text-blue-100 text-sm">View inventory and generate reports</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<div class="flex items-center space-x-2">
|
|
<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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
|
</svg>
|
|
<span class="text-sm">Version 1.0.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const messageDiv = document.getElementById('loginMessage');
|
|
|
|
// This is a frontend demo - in a real Django app, this would be handled by the backend
|
|
if (username && password) {
|
|
messageDiv.textContent = "Logging in...";
|
|
messageDiv.classList.remove('hidden', 'text-red-500');
|
|
messageDiv.classList.add('text-green-500');
|
|
|
|
// Simulate login process
|
|
setTimeout(() => {
|
|
// In a real app, this would redirect to the appropriate dashboard based on user role
|
|
if (username === 'line_operator') {
|
|
window.location.href = '/line-operator-dashboard';
|
|
} else if (username === 'barrier') {
|
|
window.location.href = '/barrier-dashboard';
|
|
} else if (username === 'depot') {
|
|
window.location.href = '/depot-dashboard';
|
|
} else {
|
|
messageDiv.textContent = "Demo login: Use 'line_operator', 'barrier', or 'depot' as username";
|
|
messageDiv.classList.remove('text-green-500');
|
|
messageDiv.classList.add('text-blue-500');
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
messageDiv.textContent = "Please enter both username and password";
|
|
messageDiv.classList.remove('hidden', 'text-green-500');
|
|
messageDiv.classList.add('text-red-500');
|
|
}
|
|
});
|
|
</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:'947f67b0352e3130',t:'MTc0ODYyMDQxMy4wMDAwMDA='};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>
|
|
</html>
|