Admin
28df130da0
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
339 lines
15 KiB
HTML
339 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SPA Platform - artetui.de</title>
|
|
<style>
|
|
:root {
|
|
--bg-primary: #f5f1e8;
|
|
--bg-secondary: #ffffff;
|
|
--bg-card: #ffffff;
|
|
--text-primary: #3e3126;
|
|
--text-secondary: #6b5d4f;
|
|
--text-muted: #9d8b7a;
|
|
--accent-primary: #c47b5a;
|
|
--accent-secondary: #d4a574;
|
|
--accent-hover: #b36848;
|
|
--border: #e6dfd5;
|
|
--shadow: rgba(62, 49, 38, 0.08);
|
|
--shadow-hover: rgba(62, 49, 38, 0.15);
|
|
}
|
|
[data-theme="dark"] {
|
|
--bg-primary: #1a1612;
|
|
--bg-secondary: #2a2319;
|
|
--bg-card: #2a2319;
|
|
--text-primary: #f5f1e8;
|
|
--text-secondary: #c9bfb3;
|
|
--text-muted: #9d8b7a;
|
|
--accent-primary: #d4a574;
|
|
--accent-secondary: #c47b5a;
|
|
--accent-hover: #e6b889;
|
|
--border: #3e3126;
|
|
--shadow: rgba(0, 0, 0, 0.3);
|
|
--shadow-hover: rgba(0, 0, 0, 0.5);
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
.header {
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 1.5rem 2rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
}
|
|
.header-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.logo-section h1 { font-size: 2rem; font-weight: 700; }
|
|
.logo-section p { color: var(--text-secondary); font-size: 0.95rem; }
|
|
.theme-toggle {
|
|
background: var(--bg-card);
|
|
border: 2px solid var(--border);
|
|
border-radius: 2rem;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|
|
.container { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
|
|
.apps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
.app-card {
|
|
background: var(--bg-card);
|
|
border-radius: 1rem;
|
|
border: 1px solid var(--border);
|
|
padding: 2rem;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
}
|
|
.app-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px var(--shadow-hover);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
.app-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
|
|
.app-icon {
|
|
width: 3rem; height: 3rem;
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
|
border-radius: 0.75rem;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
.app-card h2 { font-size: 1.5rem; font-weight: 600; }
|
|
.app-card p { color: var(--text-secondary); line-height: 1.7; margin: 1rem 0; flex-grow: 1; }
|
|
.app-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.875rem;
|
|
}
|
|
.app-status {
|
|
background: linear-gradient(135deg, #4ade80, #22c55e);
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 1rem;
|
|
font-weight: 500;
|
|
font-size: 0.8rem;
|
|
}
|
|
.app-version { color: var(--text-muted); }
|
|
.doc-link {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
background: #007acc;
|
|
color: white !important;
|
|
border-radius: 0.5rem;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
.doc-link:hover { background: #005fa3; }
|
|
.info-section {
|
|
background: var(--bg-card);
|
|
border-radius: 1rem;
|
|
border: 1px solid var(--border);
|
|
padding: 2rem;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
}
|
|
.info-section h3 {
|
|
color: var(--accent-primary);
|
|
font-size: 1.25rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
.info-item {
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.info-item strong { display: block; margin-bottom: 0.5rem; }
|
|
.info-item p { color: var(--text-secondary); font-size: 0.9rem; }
|
|
.footer {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 3rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="logo-section">
|
|
<h1>SPA Platform</h1>
|
|
<p>Zentrale Anwendungsplattform</p>
|
|
</div>
|
|
<button class="theme-toggle" onclick="toggleTheme()">🌓 Theme</button>
|
|
</div>
|
|
</header>
|
|
<main class="container">
|
|
<div class="apps-grid">
|
|
<a href="/schadendokumentation/" class="app-card">
|
|
<div class="app-header">
|
|
<div class="app-icon">📋</div>
|
|
<h2>Schadendokumentation</h2>
|
|
</div>
|
|
<p>Erfassung und Verwaltung von Schadenfällen mit umfassender Dokumentation, Bildverwaltung und Exportfunktionen.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">Build 24.11.2025</span>
|
|
</div>
|
|
</a>
|
|
<a href="/kostenschaetzung/" class="app-card">
|
|
<div class="app-header">
|
|
<div class="app-icon">💰</div>
|
|
<h2>Kostenschätzung</h2>
|
|
</div>
|
|
<p>Professionelles Tool zur Erstellung und Verwaltung von Kostenschätzungen für Bauprojekte und Sanierungen.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">Build 09.11.2025</span>
|
|
</div>
|
|
</a>
|
|
<a href="/zeitwert/" class="app-card">
|
|
<div class="app-header">
|
|
<div class="app-icon">⏱️</div>
|
|
<h2>Zeitwert</h2>
|
|
</div>
|
|
<p>Berechnung und Dokumentation von Zeitwerten für Versicherungen und Gutachten mit automatischer Wertermittlung.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">Build 22.11.2025</span>
|
|
</div>
|
|
</a>
|
|
<a href="/angebotsdatenbank/" class="app-card">
|
|
<div class="app-header">
|
|
<div class="app-icon">💼</div>
|
|
<h2>Angebotsdatenbank</h2>
|
|
</div>
|
|
<p>Intelligente Positionsverwaltung mit STLB-Codes, DIN 276 Klassifikation und umfassender Suchfunktion für Bauleistungen.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">Build 25.11.2025</span>
|
|
</div>
|
|
</a>
|
|
<a href="/zeitutility/" class="app-card">
|
|
<div class="app-header">
|
|
<div class="app-icon">🕐</div>
|
|
<h2>ZeitUtility</h2>
|
|
</div>
|
|
<p>Zeit- und Datumsmanagement mit Zeitstempel-Generator, Zeitzonen-Konverter und Datumsrechner für präzise Zeitberechnungen.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">Build 25.11.2025</span>
|
|
</div>
|
|
</a>
|
|
<div class="app-card" style="cursor:default;">
|
|
<a href="/geo-calc/" style="text-decoration:none;color:inherit;">
|
|
<div class="app-header">
|
|
<div class="app-icon">📐</div>
|
|
<h2>GEO-Calc</h2>
|
|
</div>
|
|
<p>3D Geometrie-Rechner für rechtwinklige Dreiecke mit interaktiver Visualisierung und automatischer Berechnung aller Maße.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">V7</span>
|
|
</div>
|
|
</a>
|
|
<a href="/geo-calc/dokumentation.pdf" target="_blank" class="doc-link">📄 Anleitung (PDF)</a>
|
|
</div>
|
|
<a href="/symbols/" class="app-card">
|
|
<div class="app-header">
|
|
<div class="app-icon">🔣</div>
|
|
<h2>Symbolbibliothek</h2>
|
|
</div>
|
|
<p>148+ SVG & DXF Symbole für Schadensgutachten und Vermessung. Kategorien: Schäden, Werkzeuge, Bauteile, Möbel, Vermessung und mehr.</p>
|
|
<div class="app-meta">
|
|
<span class="app-status">Aktiv</span>
|
|
<span class="app-version">v2.0</span>
|
|
</div>
|
|
</a>
|
|
<a href="/schadenprotokoll/" class="app-card"> <div class="app-header"> <div class="app-icon">📝</div> <h2>Schadenprotokoll</h2> </div> <p>Automatisierte Verarbeitung von Schadenprotokollen. Laufzettel zu PDF, PDF-Analyse und Vorbericht-Generierung.</p> <div class="app-meta"> <span class="app-status">Aktiv</span> <span class="app-version">v1.0</span> </div> </a>
|
|
</div>
|
|
<section class="info-section">
|
|
<h3>📦 Backup & Datenverwaltung</h3>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<strong>Lokale Speicherung</strong>
|
|
<p>Alle Daten werden sicher in deinem Browser gespeichert (IndexedDB). Niemand außer dir hat Zugriff auf deine Daten.</p>
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Export & Backup</strong>
|
|
<p>Nutze die Export-Funktion in jeder App, um Backups herunterzuladen. Daten als JSON oder CSV exportierbar.</p>
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Import & Restore</strong>
|
|
<p>Lade Backups direkt in der App hoch, um Daten wiederherzustellen. Vollständiger Datenimport möglich.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer class="footer">
|
|
<p>artetui.de · SPA Platform · Alle Daten werden lokal gespeichert</p>
|
|
<p style="text-align:center;margin-top:0.5rem;font-size:0.85rem;">
|
|
<a href="#" onclick="openImpressum();return false;" style="color:#6b7280;text-decoration:none;">Impressum</a>
|
|
<span style="color:#d1d5db;margin:0 0.5rem;">|</span>
|
|
<a href="#" onclick="openDatenschutz();return false;" style="color:#6b7280;text-decoration:none;">Datenschutz</a>
|
|
</p>
|
|
</footer>
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const newTheme = html.getAttribute("data-theme") === "light" ? "dark" : "light";
|
|
html.setAttribute("data-theme", newTheme);
|
|
localStorage.setItem("theme", newTheme);
|
|
}
|
|
(function() {
|
|
const savedTheme = localStorage.getItem("theme") || "light";
|
|
document.documentElement.setAttribute("data-theme", savedTheme);
|
|
})();
|
|
</script>
|
|
|
|
|
|
<!-- IMPRESSUM MODAL -->
|
|
<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
|
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
|
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
|
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
|
|
<button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
|
</div>
|
|
<iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DATENSCHUTZ MODAL -->
|
|
<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
|
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
|
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
|
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
|
|
<button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
|
</div>
|
|
<iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
|
|
function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
|
|
function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
|
|
function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
|
|
document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
|
|
["impressumModal","datenschutzModal"].forEach(function(id){
|
|
var el=document.getElementById(id);
|
|
if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|