Initial commit: Projektübersicht - Docker GANT

public/Test.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Projektübersicht Elektro</title>
+<link rel="stylesheet" href="styles.css?v=3">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+ </head>
+<body>
+<div class="dept-tabs">
+  <button class="menu-corner-btn" onclick="toggleHeader()" title="Menü öffnen/schließen" aria-expanded="false" aria-controls="headerMenu">
+    <span class="header-toggle-icon">☰</span>
+  </button>
+  <div class="dept-tabs-center">
+    <button class="dept-tab active" data-dept="ELT" onclick="switchDepartment('ELT')">ELT</button>
+    <button class="dept-tab" data-dept="HLS" onclick="switchDepartment('HLS')">HLS</button>
+    <button class="dept-tab" data-dept="ARCH" onclick="switchDepartment('ARCH')">Architektur</button>
+  </div>
+</div>
+
+<header>
+  <div class="header-bar">
+    <h1 id="pageTitle">Projektübersicht Elektro</h1>
+    <img src="dein_bild.ico" alt="Logo" class="header-logo">
+  </div>
+</header>
+
+<div id="headerMenu" class="side-menu" aria-hidden="true">
+  <div class="side-menu-header">
+    <span>Menü</span>
+    <div class="side-menu-header-actions">
+      <button class="theme-toggle-circle" id="themeToggle" onclick="toggleTheme()" title="Hell/Dunkel umschalten">
+        <span id="themeIcon">🌙</span>
+      </button>
+      <button class="header-toggle secondary" onclick="toggleHeader()" title="Menü schließen">
+        <span class="header-toggle-icon">✕</span>
+      </button>
+    </div>
+  </div>
+  <div class="side-menu-content">
+    <div class="menu-section">
+      <div class="menu-label">Sitzung (KW)</div>
+      <select id="weekSelect" onchange="switchWeek(this.value)"></select>
+      <div id="weekDateDisplay" class="week-date"></div>
+    </div>
+
+    <hr class="menu-divider">
+
+    <div class="menu-section">
+      <div class="menu-label">Sitzungen verwalten</div>
+      <button onclick="newWeek()">+ Neue Sitzung</button>
+      <button class="secondary" onclick="cloneWeek()">Sitzung duplizieren</button>
+      <button class="danger" onclick="deleteWeek()">Sitzung löschen</button>
+    </div>
+
+    <hr class="menu-divider">
+
+    <div class="menu-section">
+      <div class="menu-label">Präsentation</div>
+      <button class="secondary" onclick="exportPDF()">PDF Export</button>
+      <button class="secondary" onclick="startShowMode()">Show Mode</button>
+    </div>
+  </div>
+</div>
+
+<!-- Show Mode Overlay -->
+<div id="showModeOverlay" class="show-mode-overlay" style="display:none;" onclick="pauseShowMode()">
+  <div class="show-mode-header">
+    <span id="showModeTitle">Show Mode</span>
+    <button class="secondary" onclick="stopShowMode()">Beenden</button>
+  </div>
+  <div id="showModeContent" class="show-mode-content"></div>
+  <div id="showModePaused" class="show-mode-paused" style="display:none;">Pausiert – berühre zum Fortsetzen</div>
+</div>
+<div id="sideMenuBackdrop" class="side-menu-backdrop" onclick="toggleHeader()"></div>
+
+<div class="tabs">
+  <button class="tab active" data-tab="board" onclick="showTab('board')">Projektboard</button>
+  <button class="tab" data-tab="load" onclick="showTab('load')">Auslastung</button>
+  <button class="tab" data-tab="projects" onclick="showTab('projects')">Projekte</button>
+  <button class="tab" data-tab="people" onclick="showTab('people')">Projektbeteiligte</button>
+</div>
+
+<div class="container">
+  <!-- BOARD -->
+  <div id="board">
+    <div class="legend">
+      <span><span class="swatch" style="background:#2f855a"></span> Beteiligt X</span>
+      <span><span class="swatch" style="background:#d69e2e"></span> Optional (X)</span>
+      </div>
+    <div class="table-wrap">
+      <table id="boardTable"></table>
+    </div>
+    <div id="boardLegend" style="margin-top:16px; padding:12px; background:#f7fafc; border-radius:6px; font-size:12px;"></div>
+  </div>
+
+  <!-- LOAD -->
+  <div id="load" style="display:none">
+    <div class="section-title">Auslastung der Projektbeteiligten</div>
+    <div class="toolbar" style="margin-bottom:12px">
+      <label>Auswertung:</label>
+      <select id="loadScope" onchange="renderLoad()">
+        <option value="current">Aktuelle Sitzung</option>
+        <option value="all">Alle Sitzungen (Historie)</option>
+      </select>
+      <span class="hint">Zählt Projektzuordnungen (Haupt=1 · Optional=0,5 · Kleine Projekte=0,3 · In Anbahnung wird nicht gezählt).</span>
+    </div>
+    <div class="load-grid" id="loadGrid"></div>
+  </div>
+
+  <!-- PROJECTS -->
+  <div id="projects" style="display:none">
+    <div class="section-title">Projekte verwalten</div>
+    <div class="toolbar" style="margin-bottom:12px">
+      <input type="text" id="newProjNr" placeholder="Projekt-Nr. (z.B. 26-4001)">
+      <input type="text" id="newProjName" placeholder="Projektbezeichnung">
+      <select id="newProjGroup">
+        <option>Aktive Projekte</option>
+        <option>Kleine Projekte</option>
+        <option>In Anbahnung</option>
+        <option>Allgemein</option>
+      </select>
+      <button onclick="addProjectToList()">+ Projekt hinzufügen</button>
+    </div>
+    <div id="projectsList"></div>
+  </div>
+
+  <!-- PEOPLE -->
+  <div id="people" style="display:none">
+    <div class="section-title">Projektbeteiligte verwalten</div>
+    <div class="toolbar" style="margin-bottom:12px; align-items: flex-start;">
+      <input type="text" id="newPersonName" placeholder="Kürzel (z.B. AP)" style="width:100px">
+      <input type="text" id="newPersonFullName" placeholder="Voller Name (z.B. Anton Peters)">
+      <input type="text" id="newPersonEmail" placeholder="E-Mail (z.B. anton.peters@rauschenberg-ing.de)">
+      <div class="role-checkboxes">
+        <label><input type="checkbox" name="newPersonRoles" value="Planung"> Planung</label>
+        <label><input type="checkbox" name="newPersonRoles" value="Projektleitung"> Projektleitung</label>
+        <label><input type="checkbox" name="newPersonRoles" value="Bauüberwachung"> Bauüberwachung</label>
+      </div>
+      <button onclick="addPerson()">+ Person hinzufügen</button>
+    </div>
+    <div id="peopleList"></div>
+  </div>
+</div>
+
+<!-- Passwort Modal -->
+<div class="modal-bg" id="passwordModal">
+  <div class="modal">
+    <h2>Zugriff erforderlich</h2>
+    <p style="color:#666;margin-bottom:12px">Bitte geben Sie das Passwort ein, um auf diesen Bereich zuzugreifen.</p>
+    <div class="form-row">
+      <label>Passwort</label>
+      <input type="password" id="passwordInput" placeholder="Passwort eingeben" onkeypress="if(event.key==='Enter') confirmPassword()">
+    </div>
+    <div class="toolbar">
+      <button onclick="confirmPassword()">Bestätigen</button>
+      <button class="secondary" onclick="closePasswordModal()">Abbrechen</button>
+    </div>
+  </div>
+</div>
+
+<script src="main.v2.js"></script>
+</body>
+</html>