Hugging Face's logo

Spaces:
Douass2
/
yas-dos
Running

App Files Community
yas-dos / index.html
Douass2's picture
Douass2
I thought of a logistics application to organize transit, inspection at the port, inventory of trucks and saving of guest data in arabe, protected and transmitted by Telegram and Gmail. - Initial Deployment
c86d36e verified
raw
history blame contribute delete
30.3 kB
 <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نظام الخدمات اللوجستية</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
body {
font-family: 'Tajawal', sans-serif;
}
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 80px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar.collapsed .logo-text {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.rtl-input {
direction: rtl;
text-align: right;
}
.arabic-font {
font-family: 'Tajawal', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 arabic-font">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
<div class="p-4 flex items-center space-x-2 border-b border-blue-700">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-blue-800 font-bold">
<i class="fas fa-truck-moving text-xl"></i>
</div>
<span class="logo-text text-xl font-bold">نظام اللوجستيات</span>
</div>
<div class="flex-1 overflow-y-auto py-4">
<nav>
<div class="px-4 mb-8">
<h3 class="sidebar-text text-xs uppercase tracking-wider text-blue-300 mb-4">القائمة الرئيسية</h3>
<ul class="space-y-2">
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg bg-blue-700 text-white">
<i class="fas fa-tachometer-alt ml-3"></i>
<span class="sidebar-text">لوحة التحكم</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-truck ml-3"></i>
<span class="sidebar-text">إدارة الشاحنات</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-ship ml-3"></i>
<span class="sidebar-text">فحص الموانئ</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-route ml-3"></i>
<span class="sidebar-text">تنظيم العبور</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-users ml-3"></i>
<span class="sidebar-text">بيانات الضيوف</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-chart-bar ml-3"></i>
<span class="sidebar-text">التقارير</span>
</a>
</li>
</ul>
</div>
<div class="px-4 mb-8">
<h3 class="sidebar-text text-xs uppercase tracking-wider text-blue-300 mb-4">الإعدادات</h3>
<ul class="space-y-2">
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-cog ml-3"></i>
<span class="sidebar-text">الإعدادات</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fab fa-telegram ml-3"></i>
<span class="sidebar-text">ربط تلجرام</span>
</a>
</li>
<li>
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700 text-white">
<i class="fas fa-envelope ml-3"></i>
<span class="sidebar-text">ربط جيميل</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="p-4 border-t border-blue-700">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
<div class="mr-3 sidebar-text">
<div class="font-medium">مسؤول النظام</div>
<div class="text-xs text-blue-300">admin@example.com</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center">
<button id="sidebarToggle" class="text-gray-500 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
<h1 class="text-xl font-bold mr-4">لوحة التحكم</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="text-gray-500 focus:outline-none">
<i class="fas fa-bell text-xl"></i>
<span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span>
</button>
</div>
<div class="relative">
<button class="text-gray-500 focus:outline-none">
<i class="fas fa-envelope text-xl"></i>
<span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span>
</button>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<main class="p-6">
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">إجمالي الشاحنات</p>
<h3 class="text-2xl font-bold">142</h3>
</div>
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
<i class="fas fa-truck text-xl"></i>
</div>
</div>
<div class="mt-4">
<span class="text-green-500 text-sm font-medium">+5.2% عن الشهر الماضي</span>
</div>
</div>
<div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">عمليات الفحص اليوم</p>
<h3 class="text-2xl font-bold">24</h3>
</div>
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
<i class="fas fa-clipboard-check text-xl"></i>
</div>
</div>
<div class="mt-4">
<span class="text-red-500 text-sm font-medium">-2.1% عن الأمس</span>
</div>
</div>
<div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">عمليات العبور النشطة</p>
<h3 class="text-2xl font-bold">18</h3>
</div>
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-route text-xl"></i>
</div>
</div>
<div class="mt-4">
<span class="text-green-500 text-sm font-medium">+12.7% عن الأسبوع الماضي</span>
</div>
</div>
<div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">الضيوف المسجلين</p>
<h3 class="text-2xl font-bold">327</h3>
</div>
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
<i class="fas fa-users text-xl"></i>
</div>
</div>
<div class="mt-4">
<span class="text-green-500 text-sm font-medium">+8.3% عن الشهر الماضي</span>
</div>
</div>
</div>
<!-- Recent Activities and Truck Inventory -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Recent Activities -->
<div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="font-bold text-lg">الأنشطة الأخيرة</h3>
</div>
<div class="divide-y divide-gray-200">
<div class="p-6 flex items-start">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<p class="font-medium">تمت الموافقة على الشاحنة #TRK-4872</p>
<p class="text-sm text-gray-500 mt-1">تم فحص الشاحنة واعتمادها للعبور عبر ميناء جدة</p>
<p class="text-xs text-gray-400 mt-2">منذ 15 دقيقة</p>
</div>
</div>
<div class="p-6 flex items-start">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
<i class="fas fa-shipping-fast"></i>
</div>
<div>
<p class="font-medium">بدأت رحلة الشاحنة #TRK-5621</p>
<p class="text-sm text-gray-500 mt-1">الشاحنة في طريقها من الرياض إلى دبي</p>
<p class="text-xs text-gray-400 mt-2">منذ 42 دقيقة</p>
</div>
</div>
<div class="p-6 flex items-start">
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
<i class="fas fa-exclamation"></i>
</div>
<div>
<p class="font-medium">تحذير: تأخير في الشاحنة #TRK-3891</p>
<p class="text-sm text-gray-500 mt-1">تأخير متوقع لمدة ساعتين بسبب ظروف جوية</p>
<p class="text-xs text-gray-400 mt-2">منذ ساعتين</p>
</div>
</div>
<div class="p-6 flex items-start">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
<i class="fas fa-user-plus"></i>
</div>
<div>
<p class="font-medium">تم تسجيل ضيف جديد</p>
<p class="text-sm text-gray-500 mt-1">السيد أحمد محمد - جواز سفر رقم 458762</p>
<p class="text-xs text-gray-400 mt-2">منذ 3 ساعات</p>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-gray-200 text-center">
<a href="#" class="text-blue-600 font-medium">عرض كل الأنشطة</a>
</div>
</div>
<!-- Truck Inventory Status -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="font-bold text-lg">حالة مخزون الشاحنات</h3>
</div>
<div class="p-6">
<div class="mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">الشاحنات النشطة</span>
<span class="text-sm font-medium">86%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 86%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">في الصيانة</span>
<span class="text-sm font-medium">9%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 9%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">غير متاحة</span>
<span class="text-sm font-medium">5%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-red-500 h-2.5 rounded-full" style="width: 5%"></div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium mb-3">توزيع الشاحنات حسب النوع</h4>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-blue-600 mr-2"></div>
<span class="text-sm">شاحنات ثقيلة</span>
<span class="text-sm font-medium mr-auto">64</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
<span class="text-sm">شاحنات متوسطة</span>
<span class="text-sm font-medium mr-auto">48</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
<span class="text-sm">شاحنات خفيفة</span>
<span class="text-sm font-medium mr-auto">30</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Port Inspection and Guest Data Forms -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Port Inspection Form -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="font-bold text-lg">نموذج فحص الميناء</h3>
</div>
<div class="p-6">
<form>
<div class="mb-4">
<label class="block text-gray-700 mb-2">رقم الشاحنة</label>
<input type="text" class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="أدخل رقم الشاحنة">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">تاريخ الفحص</label>
<input type="date" class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">حالة الفحص</label>
<select class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>اختر الحالة</option>
<option>مكتمل</option>
<option>قيد الانتظار</option>
<option>مرفوض</option>
<option>بحاجة إلى إصلاح</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">ملاحظات</label>
<textarea class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="أدخل أي ملاحظات حول الفحص"></textarea>
</div>
<div class="flex justify-end">
<button type="button" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
حفظ الفحص
</button>
</div>
</form>
</div>
</div>
<!-- Guest Data Form -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="font-bold text-lg">تسجيل بيانات الضيف</h3>
</div>
<div class="p-6">
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700 mb-2">الاسم الأول</label>
<input type="text" class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="الاسم الأول">
</div>
<div>
<label class="block text-gray-700 mb-2">اسم العائلة</label>
<input type="text" class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="اسم العائلة">
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">رقم الجواز</label>
<input type="text" class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="رقم جواز السفر">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">الجنسية</label>
<select class="rtl-input w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>اختر الجنسية</option>
<option>سعودي</option>
<option>إماراتي</option>
<option>مصري</option>
<option>أردني</option>
<option>آخر</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">طريقة الإشعار</label>
<div class="flex space-x-4 space-x-reverse">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="mr-2">تلجرام</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="mr-2">جيميل</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="mr-2">رسالة نصية</span>
</label>
</div>
</div>
<div class="flex justify-end">
<button type="button" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
حفظ البيانات
</button>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// Toggle sidebar
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('collapsed');
});
// Sample data for charts (would be replaced with real data in production)
document.addEventListener('DOMContentLoaded', function() {
// This is where you would initialize charts with Chart.js or similar
// For now, we'll just log that the page is loaded
console.log('Logistics Dashboard loaded');
// Sample function to show a notification
function showNotification(message, type = 'info') {
// In a real app, this would show a toast notification
console.log(`Notification (${type}): ${message}`);
}
// Example usage:
showNotification('تم تحميل لوحة التحكم بنجاح', 'success');
});
// Form submission handlers
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('تم حفظ البيانات بنجاح!');
// In a real app, this would send data to the server
});
});
// Telegram integration simulation
function sendToTelegram(data) {
console.log('Sending to Telegram:', data);
// In a real app, this would use the Telegram Bot API
return new Promise(resolve => {
setTimeout(() => resolve(true), 1000);
});
}
// Gmail integration simulation
function sendToGmail(data) {
console.log('Sending to Gmail:', data);
// In a real app, this would use the Gmail API
return new Promise(resolve => {
setTimeout(() => resolve(true), 1000);
});
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Douass2/yas-dos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>