chiminaca commited on
Commit
b7f03aa
·
verified ·
1 Parent(s): b4be35d

please now generate a subpage when klicking on "Analysieren" inside the card MS Loreley - Kaufvertrag

Browse files

Entwurf des Kaufvertrags für Fahrgastschiff MS Loreley mit Anhängen

15.12.2024
M. Nachtigal
"

with all usefull needfull features and context fitting sample data

Files changed (2) hide show
  1. analysen-loreley.html +291 -0
  2. dokumente.html +3 -3
analysen-loreley.html ADDED
@@ -0,0 +1,291 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MS Loreley Analyse - ShipBroker Navigator</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+ .nav-gradient {
17
+ background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
18
+ }
19
+ .analysis-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .analysis-card:hover {
23
+ transform: translateY(-2px);
24
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
25
+ }
26
+ .risk-high { background-color: #fef2f2; border-left-color: #dc2626; }
27
+ .risk-medium { background-color: #fffbeb; border-left-color: #d97706; }
28
+ .risk-low { background-color: #f0fdf4; border-left-color: #16a34a; }
29
+ .progress-bar {
30
+ background: linear-gradient(90deg, #dc2626 0%, #d97706 50%, #16a34a 100%);
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50">
35
+ <!-- Navigation -->
36
+ <nav class="nav-gradient text-white shadow-lg">
37
+ <div class="container mx-auto px-4 py-4">
38
+ <div class="flex justify-between items-center">
39
+ <div class="flex items-center space-x-2">
40
+ <i data-feather="anchor" class="text-blue-300"></i>
41
+ <span class="text-xl font-bold">ShipBroker Navigator</span>
42
+ </div>
43
+ <div class="hidden md:flex space-x-6">
44
+ <a href="index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
45
+ <a href="dokumente.html" class="hover:text-blue-200 transition-colors">Dokumente</a>
46
+ <a href="#" class="text-blue-200 font-semibold">Analysen</a>
47
+ <a href="tools.html" class="hover:text-blue-200 transition-colors">Tools</a>
48
+ </div>
49
+ <div class="flex items-center space-x-4">
50
+ <div class="bg-blue-500 rounded-full p-2">
51
+ <i data-feather="user" class="w-5 h-5"></i>
52
+ </div>
53
+ <span class="hidden md:inline">Manfred Nachtigal</span>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+
59
+ <!-- Header -->
60
+ <div class="bg-white shadow-sm">
61
+ <div class="container mx-auto px-4 py-8">
62
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
63
+ <div>
64
+ <h1 class="text-3xl font-bold text-gray-800">MS Loreley - Vertragsanalyse</h1>
65
+ <p class="text-gray-600 mt-2">Komplette rechtliche und technische Bewertung des Kaufvertrags</p>
66
+ </div>
67
+ <div class="flex space-x-3 mt-4 md:mt-0">
68
+ <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors flex items-center">
69
+ <i data-feather="download" class="mr-2"></i>
70
+ Bericht exportieren
71
+ </button>
72
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors flex items-center">
73
+ <i data-feather="share-2" class="mr-2"></i>
74
+ Teilen
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Analysis Content -->
81
+ <div class="container mx-auto px-4 py-8">
82
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
83
+ <!-- Main Analysis -->
84
+ <div class="lg:col-span-2 space-y-6">
85
+ <!-- Summary Card -->
86
+ <div class="bg-white rounded-xl shadow-md p-6 analysis-card">
87
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Zusammenfassung</h2>
88
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
89
+ <div class="text-center p-4 bg-blue-50 rounded-lg">
90
+ <div class="text-2xl font-bold text-blue-600">78%</div>
91
+ <div class="text-sm text-gray-600">Analyse-Qualität</div>
92
+ </div>
93
+ <div class="text-center p-4 bg-yellow-50 rounded-lg">
94
+ <div class="text-2xl font-bold text-yellow-600">12</div>
95
+ <div class="text-sm text-gray-600">Geprüfte Klauseln</div>
96
+ </div>
97
+ <div class="text-center p-4 bg-red-50 rounded-lg">
98
+ <div class="text-2xl font-bold text-red-600">3</div>
99
+ <div class="text-sm text-gray-600">Kritische Punkte</div>
100
+ </div>
101
+ </div>
102
+ <p class="text-gray-700">Der Kaufvertragsentwurf für die MS Loreley zeigt insgesamt eine solide rechtliche Struktur. Es wurden 3 kritische Bereiche identifiziert, die vor Vertragsabschluss angepasst werden sollten.</p>
103
+ </div>
104
+
105
+ <!-- Risk Assessment -->
106
+ <div class="bg-white rounded-xl shadow-md p-6 analysis-card">
107
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Risikobewertung</h2>
108
+ <div class="space-y-4">
109
+ <div class="risk-high p-4 rounded-lg border-l-4">
110
+ <div class="flex items-center justify-between">
111
+ <h3 class="font-semibold text-gray-800">Haftungsbeschränkungen</h3>
112
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
113
+ HOCH
114
+ </span>
115
+ </div>
116
+ <p class="text-gray-600 mt-2">Die Klauseln 8.3-8.5 enthalten ungewöhnlich weitreichende Haftungsausschlüsse für den Verkäufer.</p>
117
+ <div class="mt-3 text-sm">
118
+ <span class="font-medium">Empfehlung:</span> Nachverhandlung der Haftungsgrenzen gemäß § 309 BGB</p>
119
+ </div>
120
+
121
+ <div class="risk-medium p-4 rounded-lg border-l-4">
122
+ <div class="flex items-center justify-between">
123
+ <h3 class="font-semibold text-gray-800">Gewährleistungsregelungen</h3>
124
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
125
+ MITTEL
126
+ </span>
127
+ </div>
128
+ <p class="text-gray-600 mt-2">Die vereinbarten Gewährleistungsfristen liegen unter branchenüblichen Standards.</p>
129
+ </div>
130
+
131
+ <div class="risk-low p-4 rounded-lg border-l-4">
132
+ <div class="flex items-center justify-between">
133
+ <h3 class="font-semibold text-gray-800">Preisanpassungsklausel</h3>
134
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
135
+ NIEDRIG
136
+ </span>
137
+ </div>
138
+ <p class="text-gray-600 mt-2">Die Klausel 4.2 ermöglicht Preisänderungen bei Nachrüstungen, jedoch ohne ausreichende Transparenz.</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Technical Analysis -->
144
+ <div class="bg-white rounded-xl shadow-md p-6 analysis-card">
145
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Technische Bewertung</h2>
146
+ <div class="space-y-4">
147
+ <div class="flex justify-between items-center">
148
+ <span class="font-medium">Antriebsanlage</span>
149
+ <span class="text-green-600 font-semibold">✓ Zufriedenstellend</span>
150
+ </div>
151
+ <div class="flex justify-between items-center">
152
+ <span class="font-medium">Sicherheitssysteme</span>
153
+ <span class="text-yellow-600 font-semibold">⚠️ Überprüfung empfohlen</span>
154
+ </div>
155
+ <div class="flex justify-between items-center">
156
+ <span class="font-medium">Umweltstandards</span>
157
+ <span class="text-green-600 font-semibold">✓ Konform</span>
158
+ </div>
159
+ <div class="flex justify-between items-center">
160
+ <span class="font-medium">Innenausstattung</span>
161
+ <span class="text-red-600 font-semibold">✗ Verbesserungsbedarf</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Sidebar -->
168
+ <div class="space-y-6">
169
+ <!-- Document Info -->
170
+ <div class="bg-white rounded-xl shadow-md p-6">
171
+ <h3 class="font-semibold text-gray-800 mb-4">Dokumentinformationen</h3>
172
+ <div class="space-y-3">
173
+ <div class="flex justify-between">
174
+ <span class="text-gray-600">Schiffstyp:</span>
175
+ <span class="font-medium">Fahrgastschiff</span>
176
+ </div>
177
+ <div class="flex justify-between">
178
+ <span class="text-gray-600">Baujahr:</span>
179
+ <span class="font-medium">2018</span>
180
+ </div>
181
+ <div class="flex justify-between">
182
+ <span class="text-gray-600">Länge:</span>
183
+ <span class="font-medium">85 m</span>
184
+ </div>
185
+ <div class="flex justify-between">
186
+ <span class="text-gray-600">Passagiere:</span>
187
+ <span class="font-medium">250</span>
188
+ </div>
189
+ <div class="flex justify-between">
190
+ <span class="text-gray-600">Besatzung:</span>
191
+ <span class="font-medium">15</span>
192
+ </div>
193
+ <div class="flex justify-between">
194
+ <span class="text-gray-600">Analyse erstellt:</span>
195
+ <span class="font-medium">16.12.2024</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Actions -->
201
+ <div class="bg-white rounded-xl shadow-md p-6">
202
+ <h3 class="font-semibold text-gray-800 mb-4">Aktionen</h3>
203
+ <div class="space-y-3">
204
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg font-semibold transition-colors flex items-center justify-center">
205
+ <i data-feather="edit" class="mr-2"></i>
206
+ Kommentar hinzufügen
207
+ </button>
208
+ <button class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg font-semibold transition-colors flex items-center justify-center">
209
+ <i data-feather="check-circle" class="mr-2"></i>
210
+ Als geprüft markieren
211
+ </button>
212
+ <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded-lg font-semibold transition-colors flex items-center justify-center">
213
+ <i data-feather="flag" class="mr-2"></i>
214
+ Als Vorlage speichern
215
+ </button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Analysis Progress -->
221
+ <div class="mt-8 bg-white rounded-xl shadow-md p-6">
222
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Analyse-Fortschritt</h2>
223
+ <div class="space-y-4">
224
+ <div>
225
+ <div class="flex justify-between mb-1">
226
+ <span class="text-sm font-medium text-gray-700">Rechtliche Prüfung</span>
227
+ <span class="text-sm font-medium text-gray-700">95%</span>
228
+ </div>
229
+ <div class="w-full bg-gray-200 rounded-full h-2">
230
+ <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
231
+ </div>
232
+ <div>
233
+ <div class="flex justify-between mb-1">
234
+ <span class="text-sm font-medium text-gray-700">Technische Bewertung</span>
235
+ <span class="text-sm font-medium text-gray-700">78%</span>
236
+ </div>
237
+ <div class="w-full bg-gray-200 rounded-full h-2">
238
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 78%"></div>
239
+ </div>
240
+ <div>
241
+ <div class="flex justify-between mb-1">
242
+ <span class="text-sm font-medium text-gray-700">Marktanalyse</span>
243
+ <span class="text-sm font-medium text-gray-700">65%</span>
244
+ </div>
245
+ <div class="w-full bg-gray-200 rounded-full h-2">
246
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Recommendations -->
252
+ <div class="bg-white rounded-xl shadow-md p-6 mt-8">
253
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Empfehlungen</h2>
254
+ <div class="space-y-4">
255
+ <div class="flex items-start space-x-3">
256
+ <i data-feather="alert-triangle" class="text-red-500 mt-1 flex-shrink-0">
257
+ <div class="bg-red-100 p-2 rounded-lg">
258
+ <i data-feather="file-text" class="text-red-600"></i>
259
+ </div>
260
+ <div>
261
+ <h3 class="font-semibold text-gray-800">Haftungsklauseln anpassen</h3>
262
+ <p class="text-gray-600 mt-1">Die Haftungsausschlüsse in Klausel 8.3-8.5 sollten auf branchenübliche Standards reduziert werden.</p>
263
+ </div>
264
+ </div>
265
+ <div class="flex items-start space-x-3">
266
+ <div class="bg-yellow-100 p-2 rounded-lg">
267
+ <i data-feather="scale" class="text-yellow-600"></i>
268
+ </div>
269
+ <div>
270
+ <h3 class="font-semibold text-gray-800">Gewährleistungsfristen verlängern</h3>
271
+ <p class="text-gray-600 mt-1">Empfohlen: Verlängerung der Gewährleistung auf 24 Monate für Hauptkomponenten</p>
272
+ </div>
273
+ </div>
274
+ <div class="flex items-start space-x-3">
275
+ <div class="bg-green-100 p-2 rounded-lg">
276
+ <i data-feather="check-circle" class="text-green-600"></i>
277
+ </div>
278
+ <div>
279
+ <h3 class="font-semibold text-gray-800">Preisanpassung transparenter gestalten</h3>
280
+ <p class="text-gray-600 mt-1">Klare Kriterien für Preisänderungen bei Nachrüstungen definieren.</p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <script>
288
+ feather.replace();
289
+ </script>
290
+ </body>
291
+ </html>
dokumente.html CHANGED
@@ -124,14 +124,14 @@
124
  </div>
125
  </div>
126
  <div class="flex space-x-2 mt-4">
127
- <button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm font-semibold transition-colors">
128
  Analysieren
129
- </button>
130
  <button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition-colors">
131
  <i data-feather="more-vertical" class="w-4 h-4"></i>
132
  </button>
133
  </div>
134
- </div>
135
 
136
  <!-- Document Card 2 -->
137
  <div class="bg-white rounded-xl shadow-md document-card p-6">
 
124
  </div>
125
  </div>
126
  <div class="flex space-x-2 mt-4">
127
+ <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">
128
  Analysieren
129
+ </a>
130
  <button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition-colors">
131
  <i data-feather="more-vertical" class="w-4 h-4"></i>
132
  </button>
133
  </div>
134
+ </div>
135
 
136
  <!-- Document Card 2 -->
137
  <div class="bg-white rounded-xl shadow-md document-card p-6">