|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dokumente - ShipBroker Navigator</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.nav-gradient { |
|
|
background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%); |
|
|
} |
|
|
.document-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.document-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="nav-gradient text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="anchor" class="text-blue-300"></i> |
|
|
<span class="text-xl font-bold">ShipBroker Navigator</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="index.html" class="hover:text-blue-200 transition-colors">Dashboard</a> |
|
|
<a href="#" class="text-blue-200 font-semibold">Dokumente</a> |
|
|
<a href="analysen.html" class="hover:text-blue-200 transition-colors">Analysen</a> |
|
|
<a href="tools.html" class="hover:text-blue-200 transition-colors">Tools</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-blue-500 rounded-full p-2"> |
|
|
<i data-feather="user" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="hidden md:inline">Manfred Nachtigal</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-800">Dokumentenverwaltung</h1> |
|
|
<p class="text-gray-600 mt-2">Verwalten und analysieren Sie Ihre Schiffsdokumente</p> |
|
|
</div> |
|
|
<button class="mt-4 md:mt-0 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors flex items-center"> |
|
|
<i data-feather="plus" class="mr-2"></i> |
|
|
Neues Dokument |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 mb-8"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0"> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Alle Schiffstypen</option> |
|
|
<option>Fahrgastschiff</option> |
|
|
<option>Frachtschiff</option> |
|
|
<option>Spezialschiff</option> |
|
|
</select> |
|
|
<select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Alle Dokumenttypen</option> |
|
|
<option>Kaufvertrag</option> |
|
|
<option>Technisches Gutachten</option> |
|
|
<option>Versicherung</option> |
|
|
<option>Rechtsdokumente</option> |
|
|
</select> |
|
|
<select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Alle Status</option> |
|
|
<option>In Bearbeitung</option> |
|
|
<option>Abgeschlossen</option> |
|
|
<option>Archiviert</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Dokument suchen..." class="border border-gray-300 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64"> |
|
|
<i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md document-card p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg"> |
|
|
<i data-feather="file-text" class="text-blue-600"></i> |
|
|
</div> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800"> |
|
|
In Bearbeitung |
|
|
</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">MS Loreley - Kaufvertrag</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Entwurf des Kaufvertrags für Fahrgastschiff MS Loreley mit Anhängen</p> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>15.12.2024</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="user" class="w-4 h-4 mr-1"></i> |
|
|
<span>M. Nachtigal</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2 mt-4"> |
|
|
<a href="analysen-loreley.html" class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm font-semibold transition-colors flex items-center justify-center"> |
|
|
Analysieren |
|
|
</a> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition-colors"> |
|
|
<i data-feather="more-vertical" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md document-card p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-lg"> |
|
|
<i data-feather="clipboard" class="text-green-600"></i> |
|
|
</div> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800"> |
|
|
Abgeschlossen |
|
|
</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">FGS Rheinprinzessin - Gutachten</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Technisches Gutachten mit Schwerpunkt Antriebsanlage und Sicherheit</p> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>10.12.2024</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="user" class="w-4 h-4 mr-1"></i> |
|
|
<span>M. Nachtigal</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2 mt-4"> |
|
|
<button class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg text-sm font-semibold transition-colors"> |
|
|
Ansehen |
|
|
</button> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition-colors"> |
|
|
<i data-feather="more-vertical" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md document-card p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-lg"> |
|
|
<i data-feather="shield" class="text-purple-600"></i> |
|
|
</div> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800"> |
|
|
Überprüfung |
|
|
</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">MS Donauperle - Versicherung</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Versicherungsvertrag mit Haftungs- und Risikobewertung</p> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>08.12.2024</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="user" class="w-4 h-4 mr-1"></i> |
|
|
<span>M. Nachtigal</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2 mt-4"> |
|
|
<button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white py-2 rounded-lg text-sm font-semibold transition-colors"> |
|
|
Prüfen |
|
|
</button> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition-colors"> |
|
|
<i data-feather="more-vertical" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 bg-white rounded-xl shadow-md p-8 text-center border-2 border-dashed border-gray-300"> |
|
|
<i data-feather="upload-cloud" class="w-16 h-16 text-gray-400 mx-auto mb-4"></i> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Neues Dokument hochladen</h3> |
|
|
<p class="text-gray-600 mb-6">Ziehen Sie Dateien hierher oder klicken Sie zum Auswählen</p> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center"> |
|
|
<i data-feather="upload" class="mr-2"></i> |
|
|
Dateien auswählen |
|
|
</button> |
|
|
<p class="text-sm text-gray-500 mt-4">PDF, DOC, DOCX bis 50MB</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
