Spaces:

Yusf12
/

https-huggingface-co-spaces-enzostvs-deepsite

Running

App Files Files Community

https-huggingface-co-spaces-enzostvs-deepsite / index.html

Yusf12

undefined - Initial Deployment

472ff6c verified 10 months ago

raw

history blame contribute delete

35.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">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#0d9488',
	secondary: '#0f766e',
	accent: '#f59e0b',
	light: '#f0fdfa',
	dark: '#134e4a'
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

	body {
	font-family: 'Tajawal', sans-serif;
	}

	input::placeholder {
	text-align: right;
	}

	.table-container {
	max-height: 400px;
	overflow-y: auto;
	}

	.report-table {
	min-width: 1000px;
	}

	.scrollbar-hide::-webkit-scrollbar {
	display: none;
	}

	.fade-in {
	animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}
	</style>
	</head>
	<body class="bg-gray-50 text-gray-800">
	<div class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="bg-primary text-white shadow-md">
	<div class="container mx-auto px-4 py-6">
	<div class="flex flex-col lg:flex-row justify-between items-center">
	<div class="flex items-center space-x-3">
	<i class="fas fa-charging-station text-3xl text-accent"></i>
	<div>
	<h1 class="text-2xl font-bold">نظام إدارة تقارير المولدات</h1>
	<p class="text-light opacity-80">تتبع صيانة المولدات وإدارة التقارير اليومية</p>
	</div>
	</div>
	<div class="mt-4 lg:mt-0">
	<div class="text-sm bg-secondary px-3 py-1 rounded-full">آخر تحديث: <span id="current-date"></span></div>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-grow container mx-auto px-4 py-8">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
	<!-- Data Entry Form -->
	<div class="lg:col-span-2 space-y-8">
	<div class="bg-white rounded-lg shadow-lg p-6 fade-in">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">نموذج إدخال البيانات</h2>
	<button id="reset-form" class="text-secondary hover:text-primary">
	<i class="fas fa-redo-alt mr-1"></i> إعادة تعيين
	</button>
	</div>

	<form id="report-form" class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- Date and Employee -->
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">التاريخ</label>
	<input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">اسم الموظف</label>
	<input type="text" id="employee" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل اسم الموظف">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">اسم المولد</label>
	<select id="generator-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	<option value="">اختر اسم المولد</option>
	<option value="المولد 1">المولد 1</option>
	<option value="المولد 2">المولد 2</option>
	<option value="المولد 3">المولد 3</option>
	<option value="المولد 4">المولد 4</option>
	</select>
	</div>
	</div>

	<!-- Process and Oil -->
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">العملية</label>
	<select id="process" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	<option value="">اختر العملية</option>
	<option value="تغيير الزيت">تغيير الزيت</option>
	<option value="صيانة دورية">صيانة دورية</option>
	<option value="تزويد بالوقود">تزويد بالوقود</option>
	<option value="فحص طارئ">فحص طارئ</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">نوع الزيت</label>
	<select id="oil-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	<option value="">اختر نوع الزيت</option>
	<option value="زيت محرك 10W-30">زيت محرك 10W-30</option>
	<option value="زيت محرك 15W-40">زيت محرك 15W-40</option>
	<option value="زيت محرك اصطناعي">زيت محرك اصطناعي</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">عدد ساعات العمل</label>
	<input type="number" id="working-hours" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل عدد الساعات">
	</div>
	</div>

	<!-- Liters Section -->
	<div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-6 bg-light p-4 rounded-lg">
	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات (داخل)</label>
	<input type="number" id="liters-in" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل عدد اللترات">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات الإضافية</label>
	<input type="number" id="supply-liters" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل اللترات الإضافية">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">إجمالي اللترات</label>
	<input type="number" id="total-liters" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات (خارج)</label>
	<input type="number" id="liters-out" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل اللترات المستهلكة">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">الفرق في اللترات</label>
	<input type="number" id="liters-diff" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">الفرق في ساعات العمل</label>
	<input type="number" id="hours-diff" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
	</div>
	</div>

	<!-- Submit Button -->
	<div class="md:col-span-2 flex justify-center">
	<button type="submit" class="w-full md:w-64 py-3 bg-primary hover:bg-secondary text-white font-medium rounded-lg transition duration-300 flex items-center justify-center">
	<i class="fas fa-save ml-2"></i> حفظ التقرير
	</button>
	</div>
	</form>
	</div>

	<!-- Recent Reports -->
	<div class="bg-white rounded-lg shadow-lg p-6 fade-in">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">آخر التقارير</h2>
	<button id="refresh-reports" class="text-secondary hover:text-primary">
	<i class="fas fa-sync-alt mr-1"></i> تحديث
	</button>
	</div>

	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المولد</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العملية</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي اللترات</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق</th>
	</tr>
	</thead>
	<tbody id="recent-reports" class="bg-white divide-y divide-gray-200">
	<!-- Reports will be inserted here -->
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Reports Section -->
	<div class="space-y-8">
	<!-- Report Generator -->
	<div class="bg-white rounded-lg shadow-lg p-6 fade-in">
	<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3 mb-6">إنشاء تقرير</h2>

	<form id="report-generator" class="space-y-5">
	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">اسم المولد</label>
	<select id="report-generator-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	<option value="all">جميع المولدات</option>
	<option value="المولد 1">المولد 1</option>
	<option value="المولد 2">المولد 2</option>
	<option value="المولد 3">المولد 3</option>
	<option value="المولد 4">المولد 4</option>
	</select>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">من تاريخ</label>
	<input type="date" id="start-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	</div>

	<div>
	<label class="block text-sm font-medium mb-1 text-gray-600">إلى تاريخ</label>
	<input type="date" id="end-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
	</div>
	</div>

	<div class="flex justify-center pt-2">
	<button type="submit" class="w-full py-3 bg-accent hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300 flex items-center justify-center">
	<i class="fas fa-file-alt ml-2"></i> إنشاء تقرير
	</button>
	</div>
	</form>
	</div>

	<!-- Report Result -->
	<div class="bg-white rounded-lg shadow-lg p-6 fade-in">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">نتيجة التقرير</h2>
	<button id="export-report" class="text-secondary hover:text-primary disabled:opacity-50" disabled>
	<i class="fas fa-file-export mr-1"></i> تصدير
	</button>
	</div>

	<div id="report-result" class="table-container scrollbar-hide">
	<p class="text-center text-gray-500 py-8">لم يتم إنشاء أي تقرير بعد. استخدم نموذج إنشاء التقرير لإنشاء تقرير جديد.</p>
	</div>
	</div>

	<!-- Statistics -->
	<div class="bg-white rounded-lg shadow-lg p-6 fade-in">
	<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3 mb-6">إحصائيات</h2>

	<div class="grid grid-cols-2 gap-4">
	<div class="bg-light p-4 rounded-lg text-center">
	<div class="text-3xl font-bold text-primary" id="total-reports">0</div>
	<div class="text-sm text-gray-600 mt-1">إجمالي التقارير</div>
	</div>

	<div class="bg-light p-4 rounded-lg text-center">
	<div class="text-3xl font-bold text-primary" id="oil-changes">0</div>
	<div class="text-sm text-gray-600 mt-1">عمليات تغيير الزيت</div>
	</div>

	<div class="bg-light p-4 rounded-lg text-center">
	<div class="text-3xl font-bold text-primary" id="total-liters-stats">0</div>
	<div class="text-sm text-gray-6 00 mt-1">إجمالي اللترات</div>
	</div>

	<div class="bg-light p-4 rounded-lg text-center">
	<div class="text-3xl font-bold text-primary" id="avg-hours">0</div>
	<div class="text-sm text-gray-600 mt-1">متوسط ساعات التشغيل</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-dark text-white py-6 mt-12">
	<div class="container mx-auto px-4 text-center">
	<p>نظام تقارير المولدات © <span id="current-year"></span> - جميع الحقوق محفوظة</p>
	<p class="text-light opacity-80 mt-2">تم التطوير باستخدام HTML, CSS, JavaScript</p>
	</div>
	</footer>
	</div>

	<script>
	// Initialize the application
	document.addEventListener('DOMContentLoaded', function() {
	// Set current date and year
	const now = new Date();
	document.getElementById('current-date').textContent = now.toLocaleDateString('ar-EG');
	document.getElementById('current-year').textContent = now.getFullYear();

	// Set default dates for report
	const today = new Date().toISOString().split('T')[0];
	document.getElementById('date').value = today;
	document.getElementById('start-date').value = today;
	document.getElementById('end-date').value = today;

	// Generate sample data if no data exists
	if (!localStorage.getItem('generatorReports')) {
	generateSampleData();
	}

	// Calculate and update statistics
	updateStatistics();

	// Load recent reports
	loadRecentReports();

	// Add event listeners
	setupEventListeners();
	});

	// Generate sample data
	function generateSampleData() {
	const sampleData = [
	{
	date: '2023-10-01',
	employee: 'أحمد محمد',
	generatorName: 'المولد 1',
	process: 'تغيير الزيت',
	oilType: 'زيت محرك 10W-30',
	litersIn: 50,
	supplyLiters: 10,
	totalLiters: 60,
	litersOut: 45,
	litersDiff: 15,
	workingHours: 120,
	hoursDiff: 120
	},
	{
	date: '2023-10-03',
	employee: 'علي حسن',
	generatorName: 'المولد 2',
	process: 'تزويد بالوقود',
	oilType: '',
	litersIn: 30,
	supplyLiters: 0,
	totalLiters: 30,
	litersOut: 25,
	litersDiff: 5,
	workingHours: 80,
	hoursDiff: 80
	},
	{
	date: '2023-10-05',
	employee: 'محمد خالد',
	generatorName: 'المولد 3',
	process: 'صيانة دورية',
	oilType: 'زيت محرك 15W-40',
	litersIn: 40,
	supplyLiters: 5,
	totalLiters: 45,
	litersOut: 30,
	litersDiff: 15,
	workingHours: 150,
	hoursDiff: 150
	}
	];

	localStorage.setItem('generatorReports', JSON.stringify(sampleData));
	}

	// Update statistics
	function updateStatistics() {
	const reports = JSON.parse(localStorage.getItem('generatorReports')) \|\| [];

	document.getElementById('total-reports').textContent = reports.length;

	const oilChanges = reports.filter(report => report.process === 'تغيير الزيت').length;
	document.getElementById('oil-changes').textContent = oilChanges;

	const totalLiters = reports.reduce((sum, report) => sum + report.totalLiters, 0);
	document.getElementById('total-liters-stats').textContent = totalLiters;

	const avgHours = reports.length > 0
	? (reports.reduce((sum, report) => sum + report.workingHours, 0) / reports.length).toFixed(1)
	: 0;
	document.getElementById('avg-hours').textContent = avgHours;
	}

	// Load recent reports
	function loadRecentReports() {
	const reports = JSON.parse(localStorage.getItem('generatorReports')) \|\| [];
	const container = document.getElementById('recent-reports');
	container.innerHTML = '';

	// Show only last 5 reports
	const recentReports = reports.slice(-5).reverse();

	if (recentReports.length === 0) {
	container.innerHTML = `
	<tr>
	<td colspan="5" class="px-4 py-4 text-center text-gray-500">
	لا توجد تقارير متاحة
	</td>
	</tr>
	`;
	return;
	}

	recentReports.forEach(report => {
	const row = document.createElement('tr');
	row.innerHTML = `
	<td class="px-4 py-2 text-sm">${report.date}</td>
	<td class="px-4 py-2 text-sm font-medium">${report.generatorName}</td>
	<td class="px-4 py-2 text-sm">${report.process}</td>
	<td class="px-4 py-2 text-sm">${report.totalLiters} لتر</td>
	<td class="px-4 py-2 text-sm font-medium ${report.litersDiff >= 0 ? 'text-green-600' : 'text-red-600'}">${report.litersDiff} لتر</td>
	`;
	container.appendChild(row);
	});
	}

	// Setup event listeners
	function setupEventListeners() {
	// Calculate total liters
	document.getElementById('liters-in').addEventListener('input', calculateTotalLiters);
	document.getElementById('supply-liters').addEventListener('input', calculateTotalLiters);

	// Calculate liters difference
	document.getElementById('liters-out').addEventListener('input', calculateLitersDiff);

	// Form submission
	document.getElementById('report-form').addEventListener('submit', function(e) {
	e.preventDefault();
	saveReport();
	});

	// Report generator submission
	document.getElementById('report-generator').addEventListener('submit', function(e) {
	e.preventDefault();
	generateReport();
	});

	// Reset form
	document.getElementById('reset-form').addEventListener('click', function() {
	document.getElementById('report-form').reset();
	document.getElementById('total-liters').value = '';
	document.getElementById('liters-diff').value = '';
	document.getElementById('hours-diff').value = '';
	});

	// Refresh reports
	document.getElementById('refresh-reports').addEventListener('click', function() {
	loadRecentReports();
	updateStatistics();
	});

	// Export report
	document.getElementById('export-report').addEventListener('click', function() {
	exportToExcel();
	});
	}

	// Calculate total liters
	function calculateTotalLiters() {
	const litersIn = parseFloat(document.getElementById('liters-in').value) \|\| 0;
	const supplyLiters = parseFloat(document.getElementById('supply-liters').value) \|\| 0;
	const totalLiters = litersIn + supplyLiters;
	document.getElementById('total-liters').value = totalLiters;
	calculateLitersDiff();
	}

	// Calculate liters difference
	function calculateLitersDiff() {
	const totalLiters = parseFloat(document.getElementById('total-liters').value) \|\| 0;
	const litersOut = parseFloat(document.getElementById('liters-out').value) \|\| 0;
	const litersDiff = totalLiters - litersOut;
	document.getElementById('liters-diff').value = litersDiff;
	}

	// Save report
	function saveReport() {
	// Get form values
	const date = document.getElementById('date').value;
	const employee = document.getElementById('employee').value;
	const generatorName = document.getElementById('generator-name').value;
	const process = document.getElementById('process').value;
	const oilType = document.getElementById('oil-type').value;
	const litersIn = parseFloat(document.getElementById('liters-in').value) \|\| 0;
	const supplyLiters = parseFloat(document.getElementById('supply-liters').value) \|\| 0;
	const totalLiters = parseFloat(document.getElementById('total-liters').value) \|\| 0;
	const litersOut = parseFloat(document.getElementById('liters-out').value) \|\| 0;
	const litersDiff = parseFloat(document.getElementById('liters-diff').value) \|\| 0;
	const workingHours = parseFloat(document.getElementById('working-hours').value) \|\| 0;

	// Calculate hours difference (for demo purposes)
	// In a real system, this would be calculated based on previous records
	const hoursDiff = workingHours;

	// Create report object
	const report = {
	date,
	employee,
	generatorName,
	process,
	oilType,
	litersIn,
	supplyLiters,
	totalLiters,
	litersOut,
	litersDiff,
	workingHours,
	hoursDiff
	};

	// Save to localStorage
	const reports = JSON.parse(localStorage.getItem('generatorReports')) \|\| [];
	reports.push(report);
	localStorage.setItem('generatorReports', JSON.stringify(reports));

	// Show success message
	alert('تم حفظ التقرير بنجاح!');

	// Reset form
	document.getElementById('report-form').reset();
	document.getElementById('total-liters').value = '';
	document.getElementById('liters-diff').value = '';
	document.getElementById('hours-diff').value = '';

	// Update UI
	updateStatistics();
	loadRecentReports();
	}

	// Generate report
	function generateReport() {
	const generatorName = document.getElementById('report-generator-name').value;
	const startDate = document.getElementById('start-date').value;
	const endDate = document.getElementById('end-date').value;

	const reports = JSON.parse(localStorage.getItem('generatorReports')) \|\| [];

	// Filter reports
	let filteredReports = reports.filter(report => {
	const reportDate = new Date(report.date);
	const start = new Date(startDate);
	const end = new Date(endDate);

	const dateInRange = reportDate >= start && reportDate <= end;
	const generatorMatch = generatorName === 'all' \|\| report.generatorName === generatorName;

	return dateInRange && generatorMatch;
	});

	// Sort by date descending
	filteredReports.sort((a, b) => new Date(b.date) - new Date(a.date));

	// Display results
	const container = document.getElementById('report-result');

	if (filteredReports.length === 0) {
	container.innerHTML = `
	<p class="text-center text-gray-500 py-8">
	لا توجد نتائج للتقارير في الفترة المحددة
	</p>
	`;
	document.getElementById('export-report').disabled = true;
	return;
	}

	let tableHTML = `
	<table class="min-w-full divide-y divide-gray-200 report-table">
	<thead class="bg-gray-50 sticky top-0">
	<tr>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الموظف</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المولد</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العملية</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي اللترات</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق في اللترات</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">ساعات العمل</th>
	<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق في الساعات</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	`;

	filteredReports.forEach(report => {
	tableHTML += `
	<tr>
	<td class="px-4 py-2 text-sm">${report.date}</td>
	<td class="px-4 py-2 text-sm">${report.employee}</td>
	<td class="px-4 py-2 text-sm font-medium">${report.generatorName}</td>
	<td class="px-4 py-2 text-sm">${report.process}</td>
	<td class="px-4 py-2 text-sm">${report.totalLiters} لتر</td>
	<td class="px-4 py-2 text-sm font-medium ${report.litersDiff >= 0 ? 'text-green-600' : 'text-red-600'}">${report.litersDiff} لتر</td>
	<td class="px-4 py-2 text-sm">${report.workingHours}</td>
	<td class="px-4 py-2 text-sm">${report.hoursDiff}</td>
	</tr>
	`;
	});

	tableHTML += `
	</tbody>
	</table>
	`;

	container.innerHTML = tableHTML;
	document.getElementById('export-report').disabled = false;
	}

	// Export to Excel
	function exportToExcel() {
	alert('في نظام حقيقي، سيتم تنزيل التقرير كملف Excel. هذه مجرد محاكاة.');
	}
	</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=Yusf12/https-huggingface-co-spaces-enzostvs-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>