admin/SPA-landing
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - docs.artetui.de SPAs (ohne Subprojekte)

Browse Source
This commit is contained in:
Admin
2025-12-14 19:42:32 +00:00
commit d56a39abab
13 changed files with 17994 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
index.html Normal file
View File

@@ -0,0 +1,337 @@
<!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>
</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;">&times;</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;">&times;</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>