|
@@ -0,0 +1,341 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="de" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8"/>
|
|
|
|
|
+ <title>Vergleich – Prototyp</title>
|
|
|
|
|
+ <link rel="stylesheet" href="/css/global.css"/>
|
|
|
|
|
+ <link rel="stylesheet" href="/css/header.css"/>
|
|
|
|
|
+ <link rel="stylesheet" href="/css/footer.css"/>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ .light-header {
|
|
|
|
|
+ background-color: #f8f9fa;
|
|
|
|
|
+ border-bottom: 1px solid #dee2e6;
|
|
|
|
|
+ padding: 1rem 2rem;
|
|
|
|
|
+ margin-bottom: 1rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-row-1 {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .kunde-logo-container {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .kunde-logo-image {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page-title {
|
|
|
|
|
+ font-size: 1.5rem;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ min-height: calc(100vh - 300px);
|
|
|
|
|
+ gap: 1rem;
|
|
|
|
|
+ padding: 0 2rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sidebar {
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ background-color: #f8f9fa;
|
|
|
|
|
+ padding: 1.5rem;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ height: fit-content;
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ top: 1rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .main-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .navigation {
|
|
|
|
|
+ margin-bottom: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .navigation h3 {
|
|
|
|
|
+ margin: 0 0 1rem 0;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-size: 1.1rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nav-links {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 0.5rem;
|
|
|
|
|
+ list-style: none;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nav-links a {
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ color: #007bff;
|
|
|
|
|
+ padding: 0.8rem 1rem;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+ border: 2px solid transparent;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nav-links a:hover {
|
|
|
|
|
+ background-color: #e9ecef;
|
|
|
|
|
+ transform: translateX(5px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nav-links a.active {
|
|
|
|
|
+ background-color: #007bff;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border-color: #0056b3;
|
|
|
|
|
+ box-shadow: 0 2px 4px rgba(0,123,255,0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .controls {
|
|
|
|
|
+ border-top: 1px solid #dee2e6;
|
|
|
|
|
+ padding-top: 1rem;
|
|
|
|
|
+ margin-top: 1rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .controls h3 {
|
|
|
|
|
+ margin: 0 0 0.8rem 0;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .controls label {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-bottom: 0.4rem;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #555;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .controls select {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 0.5rem;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ margin-bottom: 0.8rem;
|
|
|
|
|
+ font-size: 0.85rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .controls select:focus {
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ border-color: #007bff;
|
|
|
|
|
+ box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .screenshot-container {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border: 2px solid #dee2e6;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .screenshot {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .screenshot img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .watermark {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 50px;
|
|
|
|
|
+ right: 20px;
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ color: #ff0000;
|
|
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ z-index: 5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .compare-button {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 100px;
|
|
|
|
|
+ right: 200px;
|
|
|
|
|
+ background-color: #28a745;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 0.8rem 1.5rem;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ box-shadow: 0 3px 6px rgba(0,0,0,0.2);
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .compare-button:hover {
|
|
|
|
|
+ background-color: #218838;
|
|
|
|
|
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <!-- Light Header -->
|
|
|
|
|
+ <header class="light-header">
|
|
|
|
|
+ <div class="header-row-1">
|
|
|
|
|
+ <div class="kunde-logo">
|
|
|
|
|
+ <div th:if="${activeKunde != null and !#strings.isEmpty(activeKunde)}" class="kunde-logo-container">
|
|
|
|
|
+ <img th:src="@{'/images/' + ${#strings.toLowerCase(activeKunde)} + '.jpg'}"
|
|
|
|
|
+ th:alt="${activeKunde != null and !#strings.isEmpty(activeKunde) ? activeKunde + ' Logo' : 'Kunden-Logo'}"
|
|
|
|
|
+ class="kunde-logo-image"
|
|
|
|
|
+ th:onerror="'this.style.display=\\'none\\''"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="page-title" role="heading" aria-level="2" th:text="${pageTitle ?: 'Vergleich'}">Prototyp</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </header>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="container">
|
|
|
|
|
+ <aside class="sidebar">
|
|
|
|
|
+ <nav class="navigation">
|
|
|
|
|
+ <h3>Navigation</h3>
|
|
|
|
|
+ <ul class="nav-links">
|
|
|
|
|
+ <li><a href="#" id="nav-hhm" class="nav-link active" onclick="switchView('hhm')">Haushaltsmitglieder/Einkommen</a></li>
|
|
|
|
|
+ <li><a href="#" id="nav-miete" class="nav-link" onclick="switchView('miete')">Miete</a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </nav>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="controls">
|
|
|
|
|
+ <h3>Einstellungen</h3>
|
|
|
|
|
+ <label for="exampleTypeSelect">Beispieltyp:</label>
|
|
|
|
|
+ <select id="exampleTypeSelect" onchange="updateExampleType()">
|
|
|
|
|
+ <option value="realistic">Realistische Änderungen</option>
|
|
|
|
|
+ <option value="many">Viele Änderungen</option>
|
|
|
|
|
+ </select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </aside>
|
|
|
|
|
+
|
|
|
|
|
+ <main class="main-content">
|
|
|
|
|
+ <div class="screenshot-container">
|
|
|
|
|
+ <div class="watermark">Bildschirmfoto</div>
|
|
|
|
|
+ <button class="compare-button" onclick="openCompareView()">Vergleichsansicht</button>
|
|
|
|
|
+ <div class="screenshot" id="screenshot">
|
|
|
|
|
+ <img src="/images/hhm-einkommen-diwo.jpg" alt="Screenshot Haushaltsmitglieder/Einkommen" id="screenshotImage">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </main>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ let currentView = 'hhm';
|
|
|
|
|
+ let currentExampleType = 'realistic';
|
|
|
|
|
+ let compareWindow = null;
|
|
|
|
|
+
|
|
|
|
|
+ function switchView(view) {
|
|
|
|
|
+ currentView = view;
|
|
|
|
|
+
|
|
|
|
|
+ // Navigation updaten
|
|
|
|
|
+ document.querySelectorAll('.nav-link').forEach(link => {
|
|
|
|
|
+ link.classList.remove('active');
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('nav-' + view).classList.add('active');
|
|
|
|
|
+
|
|
|
|
|
+ // Screenshot updaten
|
|
|
|
|
+ updateScreenshot();
|
|
|
|
|
+
|
|
|
|
|
+ // Wenn Vergleichsfenster offen ist, auch dort wechseln
|
|
|
|
|
+ if (compareWindow && !compareWindow.closed) {
|
|
|
|
|
+ updateCompareWindow();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function updateExampleType() {
|
|
|
|
|
+ currentExampleType = document.getElementById('exampleTypeSelect').value;
|
|
|
|
|
+
|
|
|
|
|
+ // Wenn Vergleichsfenster offen ist, auch dort updaten
|
|
|
|
|
+ if (compareWindow && !compareWindow.closed) {
|
|
|
|
|
+ updateCompareWindow();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function updateScreenshot() {
|
|
|
|
|
+ const screenshotImage = document.getElementById('screenshotImage');
|
|
|
|
|
+
|
|
|
|
|
+ if (currentView === 'hhm') {
|
|
|
|
|
+ screenshotImage.src = '/images/hhm-einkommen-diwo.jpg';
|
|
|
|
|
+ screenshotImage.alt = 'Screenshot Haushaltsmitglieder/Einkommen';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ screenshotImage.src = '/images/miete-diwo.jpg';
|
|
|
|
|
+ screenshotImage.alt = 'Screenshot Miete';
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function openCompareView() {
|
|
|
|
|
+ if (compareWindow && !compareWindow.closed) {
|
|
|
|
|
+ compareWindow.focus();
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const url = getCompareUrl();
|
|
|
|
|
+ compareWindow = window.open(url, 'compareView', 'width=1400,height=900,scrollbars=yes,resizable=yes');
|
|
|
|
|
+
|
|
|
|
|
+ if (compareWindow) {
|
|
|
|
|
+ compareWindow.focus();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function updateCompareWindow() {
|
|
|
|
|
+ if (compareWindow && !compareWindow.closed) {
|
|
|
|
|
+ const url = getCompareUrl();
|
|
|
|
|
+ compareWindow.location.href = url;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function getCompareUrl() {
|
|
|
|
|
+ const baseUrl = currentView === 'hhm' ? '/hhm-einkommen' : '/miete';
|
|
|
|
|
+
|
|
|
|
|
+ // URL mit vorgeladenen JSON-Daten erstellen
|
|
|
|
|
+ const params = new URLSearchParams();
|
|
|
|
|
+ params.append('loadExample', 'true');
|
|
|
|
|
+ params.append('exampleType', currentExampleType);
|
|
|
|
|
+ params.append('validate', 'true');
|
|
|
|
|
+ params.append('kunde', 'Berlin');
|
|
|
|
|
+
|
|
|
|
|
+ return `${baseUrl}?${params.toString()}`;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // Initial setup
|
|
|
|
|
+ window.addEventListener('load', function() {
|
|
|
|
|
+ updateScreenshot();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // Überprüfen, ob Popup-Fenster noch offen ist
|
|
|
|
|
+ setInterval(function() {
|
|
|
|
|
+ if (compareWindow && compareWindow.closed) {
|
|
|
|
|
+ compareWindow = null;
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Footer-Fragment einbinden -->
|
|
|
|
|
+ <div th:replace="~{fragments/footer :: footer}"></div>
|
|
|
|
|
+
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|