Hugging Face's logo

Spaces:
chiminaca
/
shipbroker-legal-tech-navigator
Running

App Files Community
chiminaca commited on
Commit
92984ab
·
verified ·
1 Parent(s): a917cbc

thanks, noe please on same page with same instrucion as bevor but now this card "Vertragsgenerator

Browse files

Erstellen Sie maßgeschneiderte Kaufverträge gemäß deutschem Schifffahrtsrecht

Standardisiert
Starten"

Files changed (3) hide show
  1. index.html +8 -8
  2. tools.html +3 -4
  3. vertragsgenerator.html +304 -0
index.html CHANGED
@@ -55,14 +55,14 @@
55
 
56
  <!-- Desktop menu -->
57
  <div class="hidden md:flex items-center space-x-6">
58
- <div class="hidden md:flex space-x-6">
59
- <a href="#" class="hover:text-blue-200 transition-colors">Dashboard</a>
60
- <a href="dokumente.html" class="hover:text-blue-200 transition-colors">Dokumente</a>
61
- <a href="analysen.html" class="hover:text-blue-200 transition-colors">Analysen</a>
62
- <a href="tools.html" class="hover:text-blue-200 transition-colors">Tools</a>
63
- <a href="user.html" class="hover:text-blue-200 transition-colors">Profil</a>
64
- </div>
65
- <button id="dark-mode-toggle" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors">
66
  <i data-feather="moon" class="w-4 h-4"></i>
67
  </button>
68
  <a href="user.html" class="flex items-center space-x-2 hover:text-blue-200 transition-colors">
 
55
 
56
  <!-- Desktop menu -->
57
  <div class="hidden md:flex items-center space-x-6">
58
+ <div class="hidden md:flex space-x-6">
59
+ <a href="#" class="hover:text-blue-200 transition-colors">Dashboard</a>
60
+ <a href="dokumente.html" class="hover:text-blue-200 transition-colors">Dokumente</a>
61
+ <a href="analysen.html" class="hover:text-blue-200 transition-colors">Analysen</a>
62
+ <a href="tools.html" class="hover:text-blue-200 transition-colors">Tools</a>
63
+ <a href="user.html" class="hover:text-blue-200 transition-colors">Profil</a>
64
+ </div>
65
+ <button id="dark-mode-toggle" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors">
66
  <i data-feather="moon" class="w-4 h-4"></i>
67
  </button>
68
  <a href="user.html" class="flex items-center space-x-2 hover:text-blue-200 transition-colors">
tools.html CHANGED
@@ -82,13 +82,12 @@
82
  <p class="text-gray-600 mb-4">Erstellen Sie maßgeschneiderte Kaufverträge gemäß deutschem Schifffahrtsrecht</p>
83
  <div class="flex justify-between items-center">
84
  <span class="text-sm text-gray-500">Standardisiert</span>
85
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors">
86
  Starten
87
- </button>
88
  </div>
89
  </div>
90
-
91
- <!-- Risikokalkulator -->
92
  <div class="bg-white rounded-xl shadow-md p-6 tool-card border-l-4 border-red-500">
93
  <div class="flex items-center mb-4">
94
  <div class="bg-red-100 p-3 rounded-lg">
 
82
  <p class="text-gray-600 mb-4">Erstellen Sie maßgeschneiderte Kaufverträge gemäß deutschem Schifffahrtsrecht</p>
83
  <div class="flex justify-between items-center">
84
  <span class="text-sm text-gray-500">Standardisiert</span>
85
+ <a href="vertragsgenerator.html" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors">
86
  Starten
87
+ </a>
88
  </div>
89
  </div>
90
+ <!-- Risikokalkulator -->
 
91
  <div class="bg-white rounded-xl shadow-md p-6 tool-card border-l-4 border-red-500">
92
  <div class="flex items-center mb-4">
93
  <div class="bg-red-100 p-3 rounded-lg">
vertragsgenerator.html ADDED
@@ -0,0 +1,304 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Vertragsgenerator - 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
+ .form-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .form-card:hover {
23
+ transform: translateY(-2px);
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-50">
29
+ <!-- Navigation -->
30
+ <nav class="nav-gradient text-white shadow-lg">
31
+ <div class="container mx-auto px-4 py-4">
32
+ <div class="flex justify-between items-center">
33
+ <div class="flex items-center space-x-2">
34
+ <i data-feather="anchor" class="text-blue-300"></i>
35
+ <span class="text-xl font-bold">ShipBroker Navigator</span>
36
+ </div>
37
+ <div class="hidden md:flex space-x-6">
38
+ <a href="index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
39
+ <a href="dokumente.html" class="hover:text-blue-200 transition-colors">Dokumente</a>
40
+ <a href="analysen.html" class="hover:text-blue-200 transition-colors">Analysen</a>
41
+ <a href="tools.html" class="text-blue-200 font-semibold">Tools</a>
42
+ </div>
43
+ <div class="flex items-center space-x-4">
44
+ <div class="bg-blue-500 rounded-full p-2">
45
+ <i data-feather="user" class="w-5 h-5"></i>
46
+ </div>
47
+ <span class="hidden md:inline">Manfred Nachtigal</span>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </nav>
52
+
53
+ <!-- Header -->
54
+ <div class="bg-white shadow-sm">
55
+ <div class="container mx-auto px-4 py-8">
56
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
57
+ <div>
58
+ <h1 class="text-3xl font-bold text-gray-800">Vertragsgenerator</h1>
59
+ <p class="text-gray-600 mt-2">Erstellen Sie maßgeschneiderte Kaufverträge gemäß deutschem Schifffahrtsrecht</p>
60
+ </div>
61
+ <div class="mt-4 md:mt-0">
62
+ <button onclick="generateContract()" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold transition-colors flex items-center">
63
+ <i data-feather="file-text" class="mr-2"></i>
64
+ Vertrag generieren
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Main Content -->
72
+ <div class="container mx-auto px-4 py-8">
73
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
74
+ <!-- Form Section -->
75
+ <div class="lg:col-span-2 space-y-6">
76
+ <!-- Schiffsinformationen -->
77
+ <div class="bg-white rounded-xl shadow-md p-6 form-card">
78
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
79
+ <i data-feather="ship" class="mr-2 text-blue-500"></i>
80
+ Schiffsinformationen
81
+ </h2>
82
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
83
+ <div>
84
+ <label class="block text-sm font-medium text-gray-700 mb-2">Schiffsname</label>
85
+ <input type="text" id="shipName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
86
+ </div>
87
+ <div>
88
+ <label class="block text-sm font-medium text-gray-700 mb-2">IMO-Nummer</label>
89
+ <input type="text" id="imoNumber" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
90
+ </div>
91
+ <div>
92
+ <label class="block text-sm font-medium text-gray-700 mb-2">Baujahr</label>
93
+ <input type="number" id="buildYear" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
94
+ </div>
95
+ <div>
96
+ <label class="block text-sm font-medium text-gray-700 mb-2">Schiffstyp</label>
97
+ <select id="shipType" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
98
+ <option value="">Bitte auswählen</option>
99
+ <option value="containerschiff">Containerschiff</option>
100
+ <option value="tanker">Tanker</option>
101
+ <option value="bulkcarrier">Bulkcarrier</option>
102
+ <option value="kreuzfahrtschiff">Kreuzfahrtschiff</option>
103
+ <option value="binnenschiff">Binnenschiff</option>
104
+ </select>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Vertragsparteien -->
110
+ <div class="bg-white rounded-xl shadow-md p-6 form-card">
111
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
112
+ <i data-feather="users" class="mr-2 text-green-500"></i>
113
+ Vertragsparteien
114
+ </h2>
115
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
116
+ <!-- Verkäufer -->
117
+ <div>
118
+ <h3 class="text-lg font-medium mb-3 text-gray-700">Verkäufer</h3>
119
+ <div class="space-y-4">
120
+ <div>
121
+ <label class="block text-sm font-medium text-gray-700 mb-2">Name/Firma</label>
122
+ <input type="text" id="sellerName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
123
+ </div>
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-700 mb-2">Adresse</label>
126
+ <textarea id="sellerAddress" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <!-- Käufer -->
131
+ <div>
132
+ <h3 class="text-lg font-medium mb-3 text-gray-700">Käufer</h3>
133
+ <div class="space-y-4">
134
+ <div>
135
+ <label class="block text-sm font-medium text-gray-700 mb-2">Name/Firma</label>
136
+ <input type="text" id="buyerName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
137
+ </div>
138
+ <div>
139
+ <label class="block text-sm font-medium text-gray-700 mb-2">Adresse</label>
140
+ <textarea id="buyerAddress" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Vertragsbedingungen -->
148
+ <div class="bg-white rounded-xl shadow-md p-6 form-card">
149
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
150
+ <i data-feather="file-text" class="mr-2 text-purple-500"></i>
151
+ Vertragsbedingungen
152
+ </h2>
153
+ <div class="space-y-4">
154
+ <div>
155
+ <label class="block text-sm font-medium text-gray-700 mb-2">Kaufpreis (€)</label>
156
+ <input type="number" id="price" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
157
+ </div>
158
+ <div>
159
+ <label class="block text-sm font-medium text-gray-700 mb-2">Zahlungsmodalitäten</label>
160
+ <select id="paymentTerms" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
161
+ <option value="sofort">Sofortzahlung</option>
162
+ <option value="teilzahlung">Teilzahlung</option>
163
+ <option value="finanzierung">Finanzierung</option>
164
+ </select>
165
+ </div>
166
+ <div>
167
+ <label class="block text-sm font-medium text-gray-700 mb-2">Übergabeort</label>
168
+ <input type="text" id="deliveryPlace" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
169
+ </div>
170
+ <div>
171
+ <label class="block text-sm font-medium text-gray-700 mb-2">Übergabetermin</label>
172
+ <input type="date" id="deliveryDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Preview Section -->
179
+ <div class="lg:col-span-1">
180
+ <div class="bg-white rounded-xl shadow-md p-6 sticky top-6">
181
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
182
+ <i data-feather="eye" class="mr-2 text-yellow-500"></i>
183
+ Vertragsvorschau
184
+ </h2>
185
+ <div class="bg-gray-50 rounded-lg p-4 h-96 overflow-y-auto">
186
+ <div id="contractPreview" class="text-sm text-gray-600 space-y-2">
187
+ <p class="text-center font-semibold">Vertragsdaten werden hier angezeigt</p>
188
+ <p>Bitte füllen Sie das Formular aus, um eine Vorschau des Vertrags zu sehen.</p>
189
+ </div>
190
+ </div>
191
+ <div class="mt-4 p-4 bg-blue-50 rounded-lg">
192
+ <h3 class="font-semibold text-blue-800 mb-2">Hinweis</h3>
193
+ <p class="text-sm text-blue-700">Dieser Vertragsgenerator erstellt standardisierte Kaufverträge gemäß deutschem Schifffahrtsrecht. Bitte überprüfen Sie den generierten Vertrag vor der Verwendung mit einem Rechtsanwalt.</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Footer -->
201
+ <footer class="bg-gray-800 text-white py-8 mt-16">
202
+ <div class="container mx-auto px-4">
203
+ <div class="flex flex-col md:flex-row justify-between items-center">
204
+ <div class="mb-4 md:mb-0">
205
+ <div class="flex items-center space-x-2">
206
+ <i data-feather="anchor" class="text-blue-300"></i>
207
+ <span class="text-lg font-bold">ShipBroker Navigator</span>
208
+ </div>
209
+ <p class="text-gray-400 mt-2">Spezialisiert auf rechtliche und technische Schiffsbewertungen</p>
210
+ </div>
211
+ <div class="flex space-x-6">
212
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">Impressum</a>
213
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">Datenschutz</a>
214
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">Kontakt</a>
215
+ </div>
216
+ </div>
217
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
218
+ <p>&copy; 2024 ShipBroker Legal Tech Navigator. Alle Rechte vorbehalten.</p>
219
+ </div>
220
+ </div>
221
+ </footer>
222
+
223
+ <script>
224
+ feather.replace();
225
+
226
+ function updatePreview() {
227
+ const shipName = document.getElementById('shipName').value || '[Schiffsname]';
228
+ const imoNumber = document.getElementById('imoNumber').value || '[IMO-Nummer]';
229
+ const buildYear = document.getElementById('buildYear').value || '[Baujahr]';
230
+ const shipType = document.getElementById('shipType').value || '[Schiffstyp]';
231
+ const sellerName = document.getElementById('sellerName').value || '[Verkäufer]';
232
+ const buyerName = document.getElementById('buyerName').value || '[Käufer]';
233
+ const price = document.getElementById('price').value || '[Kaufpreis]';
234
+ const deliveryPlace = document.getElementById('deliveryPlace').value || '[Übergabeort]';
235
+ const deliveryDate = document.getElementById('deliveryDate').value || '[Übergabetermin]';
236
+
237
+ const preview = document.getElementById('contractPreview');
238
+ preview.innerHTML = `
239
+ <h3 class="font-bold text-center text-lg mb-4">KAUFVERTRAG</h3>
240
+ <p><strong>Schiffsname:</strong> ${shipName}</p>
241
+ <p><strong>IMO-Nummer:</strong> ${imoNumber}</p>
242
+ <p><strong>Baujahr:</strong> ${buildYear}</p>
243
+ <p><strong>Schiffstyp:</strong> ${shipType}</p>
244
+ <br>
245
+ <p><strong>Verkäufer:</strong> ${sellerName}</p>
246
+ <p><strong>Käufer:</strong> ${buyerName}</p>
247
+ <br>
248
+ <p><strong>Kaufpreis:</strong> € ${price}</p>
249
+ <p><strong>Übergabeort:</strong> ${deliveryPlace}</p>
250
+ <p><strong>Übergabetermin:</strong> ${deliveryDate}</p>
251
+ <br>
252
+ <p class="text-xs text-gray-500">Dies ist eine Vorschau des standardisierten Vertrags. Der vollständige Vertrag wird nach dem Generieren mit allen rechtlichen Klauseln verfügbar sein.</p>
253
+ `;
254
+ }
255
+
256
+ function generateContract() {
257
+ // Collect all form data
258
+ const formData = {
259
+ shipName: document.getElementById('shipName').value,
260
+ imoNumber: document.getElementById('imoNumber').value,
261
+ buildYear: document.getElementById('buildYear').value,
262
+ shipType: document.getElementById('shipType').value,
263
+ sellerName: document.getElementById('sellerName').value,
264
+ sellerAddress: document.getElementById('sellerAddress').value,
265
+ buyerName: document.getElementById('buyerName').value,
266
+ buyerAddress: document.getElementById('buyerAddress').value,
267
+ price: document.getElementById('price').value,
268
+ paymentTerms: document.getElementById('paymentTerms').value,
269
+ deliveryPlace: document.getElementById('deliveryPlace').value,
270
+ deliveryDate: document.getElementById('deliveryDate').value
271
+ };
272
+
273
+ // Basic validation
274
+ const requiredFields = ['shipName', 'sellerName', 'buyerName', 'price'];
275
+ const missingFields = requiredFields.filter(field => !formData[field]);
276
+
277
+ if (missingFields.length > 0) {
278
+ alert('Bitte füllen Sie alle erforderlichen Felder aus: Schiffsname, Verkäufer, Käufer und Kaufpreis.');
279
+ return;
280
+ }
281
+
282
+ // Simulate contract generation
283
+ alert('Vertrag wurde erfolgreich generiert! Der Vertrag wird als PDF heruntergeladen.');
284
+
285
+ // In a real application, this would generate and download a PDF
286
+ // For now, we'll just show a success message
287
+ const downloadLink = document.createElement('a');
288
+ downloadLink.href = '#';
289
+ downloadLink.download = `Kaufvertrag_${formData.shipName}.pdf`;
290
+ downloadLink.click();
291
+ }
292
+
293
+ // Add event listeners for real-time preview updates
294
+ const formInputs = document.querySelectorAll('input, select, textarea');
295
+ formInputs.forEach(input => {
296
+ input.addEventListener('input', updatePreview);
297
+ input.addEventListener('change', updatePreview);
298
+ });
299
+
300
+ // Initial preview update
301
+ updatePreview();
302
+ </script>
303
+ </body>
304
+ </html>