|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ShipBroker Navigator - Manfred Nachtigal</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
} |
|
|
</script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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%); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.task-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
</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="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-white hover:text-blue-200 transition-colors"> |
|
|
<i data-feather="menu" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex items-center space-x-6"> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="hover:text-blue-200 transition-colors">Dashboard</a> |
|
|
<a href="dokumente.html" class="hover:text-blue-200 transition-colors">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> |
|
|
<a href="user.html" class="hover:text-blue-200 transition-colors">Profil</a> |
|
|
</div> |
|
|
<button id="dark-mode-toggle" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors"> |
|
|
<i data-feather="moon" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<a href="user.html" class="flex items-center space-x-2 hover:text-blue-200 transition-colors"> |
|
|
<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> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="md:hidden hidden mt-4 pb-4 space-y-4"> |
|
|
<a href="#" class="block hover:text-blue-200 transition-colors py-2">Dashboard</a> |
|
|
<a href="dokumente.html" class="block hover:text-blue-200 transition-colors py-2">Dokumente</a> |
|
|
<a href="analysen.html" class="block hover:text-blue-200 transition-colors py-2">Analysen</a> |
|
|
<a href="tools.html" class="block hover:text-blue-200 transition-colors py-2">Tools</a> |
|
|
<a href="user.html" class="block hover:text-blue-200 transition-colors py-2">Profil</a> |
|
|
<div class="pt-4 border-t border-blue-600"> |
|
|
<button id="dark-mode-toggle-mobile" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors flex items-center justify-center"> |
|
|
<i data-feather="moon" class="mr-2 w-4 h-4"></i> |
|
|
Dark Mode |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div id="vanta-background" class="relative bg-gradient-to-br from-blue-900 to-gray-900 text-white py-20"> |
|
|
<div class="container mx-auto px-4 text-center relative z-10"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Willkommen an Bord</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 text-blue-100">Ihr KI-Assistent für rechtliche und technische Schiffsbewertungen</p> |
|
|
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center justify-center"> |
|
|
<i data-feather="upload" class="mr-2"></i> |
|
|
Dokument hochladen |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center justify-center"> |
|
|
<i data-feather="search" class="mr-2"></i> |
|
|
Bestehende Analyse |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-16"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Schnellzugriff</h2> |
|
|
<div class="task-grid"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover border-l-4 border-blue-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg"> |
|
|
<i data-feather="file-text" class="text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Vertragsanalyse</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Komplette rechtliche Prüfung von Kaufverträgen nach deutschem Schifffahrtsrecht</p> |
|
|
<button class="text-blue-500 font-semibold flex items-center"> |
|
|
Dokument analysieren |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover border-l-4 border-green-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-lg"> |
|
|
<i data-feather="scale" class="text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Rechtsprüfung</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Umfassende Compliance-Prüfung gemäß aktueller Rechtslage</p> |
|
|
<button class="text-green-500 font-semibold flex items-center"> |
|
|
Prüfung starten |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover border-l-4 border-purple-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-lg"> |
|
|
<i data-feather="tool" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Technische Bewertung</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Detailierte Analyse der Schiffstechnik und -ausstattung</p> |
|
|
<button class="text-purple-500 font-semibold flex items-center"> |
|
|
Bewertung anfordern |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover border-l-4 border-yellow-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 p-3 rounded-lg"> |
|
|
<i data-feather="dollar-sign" class="text-yellow-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Preisanalyse</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Marktgerechte Bewertung und Preisempfehlungen</p> |
|
|
<button class="text-yellow-500 font-semibold flex items-center"> |
|
|
Analyse durchführen |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-gray-800">Aktuelle Projekte</h2> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Schiff</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Letzte Aktivität</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="ship" class="text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">MS Loreley</div> |
|
|
<div class="text-sm text-gray-500">Kaufvertragsentwurf</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> |
|
|
In Bearbeitung |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vor 2 Stunden</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-900 mr-4">Ansehen</a> |
|
|
<a href="#" class="text-green-600 hover:text-green-900">Bearbeiten</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="ship" class="text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">FGS Rheinprinzessin</div> |
|
|
<div class="text-sm text-gray-500">Technisches Gutachten</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
|
|
Abgeschlossen |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gestern</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-900 mr-4">Ansehen</a> |
|
|
<a href="#" class="text-green-600 hover:text-green-900">Exportieren</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="anchor" class="text-blue-300"></i> |
|
|
<span class="text-lg font-bold">ShipBroker Navigator</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mt-2">Spezialisiert auf rechtliche und technische Schiffsbewertungen</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">Impressum</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">Datenschutz</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">Kontakt</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2024 ShipBroker Legal Tech Navigator. Alle Rechte vorbehalten.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-background", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x1a365d, |
|
|
size: 1.00 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle'); |
|
|
const darkModeToggleMobile = document.getElementById('dark-mode-toggle-mobile'); |
|
|
|
|
|
function toggleDarkMode() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
const isDarkMode = document.documentElement.classList.contains('dark'); |
|
|
localStorage.setItem('darkMode', isDarkMode); |
|
|
|
|
|
|
|
|
const icons = document.querySelectorAll('[data-feather]'); |
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
darkModeToggle.addEventListener('click', toggleDarkMode); |
|
|
darkModeToggleMobile.addEventListener('click', toggleDarkMode); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true') { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
