adasd

public/assets/app.css

@@ -119,9 +119,8 @@ button, input, select {
 
 .workspace {
   display: grid;
-  grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr) minmax(320px, 390px);
+  grid-template-columns: 1fr;
   gap: 24px;
-  align-items: start;
 }
 
 .panel {
@@ -140,12 +139,33 @@ button, input, select {
   color: var(--muted);
 }
 
-.panel--controls,
+.panel--dashboard {
-.panel--sidebar {
   display: grid;
   gap: 18px;
 }
 
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 1.15fr) minmax(320px, 1fr);
+  gap: 18px;
+}
+
+.dashboard-block {
+  display: grid;
+  gap: 16px;
+}
+
+.dashboard-controls {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  align-items: end;
+}
+
+.dashboard-block--library {
+  padding-top: 8px;
+}
+
 .field {
   display: grid;
   gap: 8px;
@@ -184,6 +204,11 @@ button, input, select {
   padding-right: 4px;
 }
 
+.library--wide {
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  max-height: 420px;
+}
+
 .component-card,
 .rack-item,
 .subpanel,
@@ -263,20 +288,14 @@ button, input, select {
 
 .rack-stage {
   display: grid;
-  gap: 18px;
+  gap: 0;
 }
 
-.rack-summary,
 .stat-grid {
   display: grid;
   gap: 12px;
 }
 
-.rack-summary {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.summary-card,
 .stat-card {
   padding: 16px;
   border-radius: var(--radius-md);
@@ -284,7 +303,6 @@ button, input, select {
   border: 1px solid rgba(75, 57, 37, 0.12);
 }
 
-.summary-card strong,
 .stat-card strong {
   display: block;
   margin-top: 6px;
@@ -297,7 +315,7 @@ button, input, select {
   border: 1px solid rgba(105, 108, 115, 0.14);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 232, 214, 0.88));
-  padding: 16px;
+  padding: 6px;
   overflow: hidden;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.7),
@@ -306,9 +324,9 @@ button, input, select {
 
 .rack-shell {
   position: relative;
-  width: min(100%, 1180px);
+  width: min(100%, 1380px);
   margin: 0 auto;
-  aspect-ratio: 3 / 2;
+  aspect-ratio: 3.1 / 2;
   border-radius: 28px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16)),
@@ -330,34 +348,34 @@ button, input, select {
 
 .rack-shell__frame--top,
 .rack-shell__frame--bottom {
-  left: 9%;
+  left: 5.1%;
-  right: 9%;
+  right: 5.1%;
-  height: 8%;
+  height: 4.8%;
-  border-radius: 14px;
+  border-radius: 12px;
 }
 
 .rack-shell__frame--top {
-  top: 6%;
+  top: 3.6%;
 }
 
 .rack-shell__frame--bottom {
-  bottom: 6%;
+  bottom: 3.6%;
 }
 
 .rack-shell__frame--left,
 .rack-shell__frame--right {
-  top: 8%;
+  top: 4.7%;
-  bottom: 8%;
+  bottom: 4.7%;
-  width: 6.8%;
+  width: 3.2%;
-  border-radius: 24px;
+  border-radius: 18px;
 }
 
 .rack-shell__frame--left {
-  left: 0.5%;
+  left: 0.6%;
 }
 
 .rack-shell__frame--right {
-  right: 0.5%;
+  right: 0.6%;
 }
 
 .rack-shell__screw {
@@ -395,17 +413,17 @@ button, input, select {
   height: 58%;
 }
 
-.rack-shell__screw--tl { top: 7.4%; left: 10.6%; }
+.rack-shell__screw--tl { top: 4.2%; left: 5.8%; }
-.rack-shell__screw--tr { top: 7.4%; right: 10.6%; }
+.rack-shell__screw--tr { top: 4.2%; right: 5.8%; }
-.rack-shell__screw--bl { bottom: 7.4%; left: 10.6%; }
+.rack-shell__screw--bl { bottom: 4.2%; left: 5.8%; }
-.rack-shell__screw--br { bottom: 7.4%; right: 10.6%; }
+.rack-shell__screw--br { bottom: 4.2%; right: 5.8%; }
 
 .rack-core {
   position: absolute;
-  inset: 15% 12.8% 14% 12.8%;
+  inset: 8.7% 6.2% 8.3% 6.2%;
   display: grid;
-  grid-template-columns: 10% 1fr 10%;
+  grid-template-columns: 5.5% 1fr 5.5%;
-  gap: 0;
+  gap: 0.8%;
   z-index: 2;
 }
 
@@ -442,11 +460,11 @@ button, input, select {
 }
 
 .rack-rail__label--left {
-  left: -2.1rem;
+  left: -1.65rem;
 }
 
 .rack-rail__label--right {
-  right: -1.6rem;
+  right: -1.35rem;
 }
 
 .rack-rail__tick {
@@ -494,6 +512,7 @@ button, input, select {
 .rack-bay {
   position: relative;
   overflow: hidden;
+  border-radius: 4px;
   background:
     radial-gradient(circle at center, rgba(96, 99, 108, 0.22), transparent 48%),
     linear-gradient(180deg, #181a1f, #2a2d34 36%, #22252c 68%, #17191d 100%);
@@ -562,24 +581,24 @@ button, input, select {
 
 .rack-grid__header-badge {
   position: absolute;
-  top: 1.7%;
+  top: 0.9%;
   z-index: 6;
-  padding: 14px 18px;
+  padding: 10px 14px;
   border-radius: 16px;
   background: rgba(17, 19, 24, 0.84);
   color: #f6f7f9;
-  font-size: 1.05rem;
+  font-size: 0.98rem;
   box-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, 0.12),
     0 10px 20px rgba(20, 22, 28, 0.18);
 }
 
 .rack-grid__header-badge--left {
-  left: 1.8%;
+  left: 0.9%;
 }
 
 .rack-grid__header-badge--right {
-  right: 1.8%;
+  right: 0.9%;
 }
 
 .rack-items-layer {
@@ -693,12 +712,14 @@ button, input, select {
   padding: 0;
   user-select: none;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 14px;
-  border: 1px solid rgba(32, 36, 42, 0.8);
+  border: 1px solid rgba(30, 34, 40, 0.84);
-  background: linear-gradient(180deg, rgba(235, 239, 244, 0.98), rgba(191, 200, 211, 0.98));
+  background:
+    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(209, 215, 224, 0.98) 58%, rgba(187, 194, 204, 0.98));
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.94),
+    inset 0 1px 0 rgba(255, 255, 255, 0.96),
-    0 8px 14px rgba(5, 6, 7, 0.24);
+    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
+    0 12px 18px rgba(5, 6, 7, 0.28);
   touch-action: none;
   cursor: grab;
 }
@@ -721,15 +742,16 @@ button, input, select {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 6px 10px 6px 10px;
+  padding: 8px 12px 8px 12px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 28%),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0.18));
+    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.16));
 }
 
 .rack-item__face {
   position: absolute;
   inset: 0;
+  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.18));
 }
 
 .rack-item__meta,
@@ -745,7 +767,7 @@ button, input, select {
 }
 
 .rack-item__drag-hint {
-  align-self: start;
+  align-self: end;
   padding: 5px 8px;
   border-radius: 999px;
   background: rgba(19, 23, 28, 0.78);
@@ -791,7 +813,7 @@ button, input, select {
 }
 
 .stat-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .field-row {
@@ -1114,7 +1136,8 @@ button, input, select {
 }
 
 @media (max-width: 1280px) {
-  .workspace {
+  .dashboard-grid,
+  .dashboard-controls {
     grid-template-columns: 1fr;
   }
 
@@ -1128,15 +1151,14 @@ button, input, select {
     padding: 18px;
   }
 
-  .rack-summary,
   .stat-grid,
-  .field-row {
+  .field-row,
+  .dashboard-controls {
     grid-template-columns: 1fr;
   }
 
   .rack-grid {
-    padding-left: 62px;
+    padding: 8px;
-    padding-right: 26px;
   }
 
   .rack-shell,

public/assets/app.js

@@ -30,7 +30,6 @@ function cacheDom() {
   ui.componentFilter = document.getElementById("component-filter");
   ui.pluginInput = document.getElementById("plugin-input");
   ui.componentLibrary = document.getElementById("component-library");
-  ui.rackSummary = document.getElementById("rack-summary");
   ui.rackGrid = document.getElementById("rack-grid");
   ui.projectStats = document.getElementById("project-stats");
   ui.bomOutput = document.getElementById("bom-output");
@@ -51,7 +50,7 @@ function bindEvents() {
 
   ui.projectName.addEventListener("input", () => {
     state.projectName = ui.projectName.value.trim() || "Neues Rack-Projekt";
-    renderSummary();
+    renderStats();
   });
   ui.rackColor.addEventListener("input", () => {
     state.rackColor = ui.rackColor.value;
@@ -89,7 +88,6 @@ async function loadBootstrap() {
 }
 
 function renderAll() {
-  renderSummary();
   renderLibrary();
   renderSelectionInfo();
   renderRack();
@@ -112,26 +110,7 @@ function renderTemplateOptions() {
 }
 
 function renderSummary() {
-  const rack = getCurrentRackTemplate();
+  renderStats();
-  if (!rack) {
-    ui.rackSummary.innerHTML = "";
-    return;
-  }
-
-  ui.rackSummary.innerHTML = `
-    <div class="summary-card">
-      <span>Projekt</span>
-      <strong>${escapeHtml(state.projectName)}</strong>
-    </div>
-    <div class="summary-card">
-      <span>Rack-Standard</span>
-      <strong>${rack.rackStandard === "19_inch" ? "19 inch" : "10 inch"}</strong>
-    </div>
-    <div class="summary-card">
-      <span>Kapazitaet</span>
-      <strong>${rack.totalU}U / ${rack.usableDepthMm} mm</strong>
-    </div>
-  `;
 }
 
 function renderLibrary() {
@@ -384,6 +363,18 @@ function renderStats() {
   }, 0);
 
   ui.projectStats.innerHTML = `
+    <div class="stat-card">
+      <span>Projekt</span>
+      <strong>${escapeHtml(state.projectName)}</strong>
+    </div>
+    <div class="stat-card">
+      <span>Rack</span>
+      <strong>${rack.rackStandard === "19_inch" ? '19"' : '10"'} · ${rack.totalU}U</strong>
+    </div>
+    <div class="stat-card">
+      <span>Tiefe</span>
+      <strong>${rack.usableDepthMm} mm</strong>
+    </div>
     <div class="stat-card">
       <span>Belegte U</span>
       <strong>${usedU} / ${rack.totalU}</strong>

public/index.php

@@ -42,45 +42,100 @@ $apiBase = $publicBase === '' ? '' : $publicBase;
         </header>
 
         <main class="workspace">
-            <section class="panel panel--controls">
+            <section class="panel panel--dashboard">
-                <div class="panel__heading">
+                <div class="dashboard-grid">
-                    <h2>Projekt</h2>
+                    <section class="dashboard-block dashboard-block--controls">
-                    <p>Rack-Vorlage, Bibliothek und Plugin-Import.</p>
+                        <div class="panel__heading">
+                            <h2>Projekt</h2>
+                            <p>Rack-Vorlage, Bibliothek und Plugin-Import.</p>
+                        </div>
+
+                        <div class="dashboard-controls">
+                            <label class="field">
+                                <span>Rack-Vorlage</span>
+                                <select id="rack-template-select"></select>
+                            </label>
+
+                            <label class="field">
+                                <span>Projektname</span>
+                                <input id="project-name" type="text" value="Neues Rack-Projekt">
+                            </label>
+
+                            <label class="field">
+                                <span>Rack-Farbe</span>
+                                <input id="rack-color" type="color" value="#50545c">
+                            </label>
+
+                            <label class="field">
+                                <span>Komponenten filtern</span>
+                                <input id="component-filter" type="search" placeholder="z. B. Switch, UPS, Patch Panel">
+                            </label>
+
+                            <label class="field">
+                                <span>Plugin-Pack laden</span>
+                                <input id="plugin-input" type="file" accept=".json,application/json">
+                            </label>
+
+                            <div class="field field--status">
+                                <span>Einsteckmodus</span>
+                                <div id="selected-component-info" class="selection-info">Kein Element ausgewaehlt</div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="dashboard-block dashboard-block--stats">
+                        <div class="panel__heading">
+                            <h2>Auswertung</h2>
+                            <p>Stueckliste, Platzreserve und Kabelschaetzung.</p>
+                        </div>
+
+                        <div class="stat-grid" id="project-stats"></div>
+
+                        <section class="subpanel">
+                            <div class="subpanel__header">
+                                <h3>Stueckliste</h3>
+                                <button id="export-bom" type="button">CSV kopieren</button>
+                            </div>
+                            <div id="bom-output" class="list-output"></div>
+                        </section>
+
+                        <section class="subpanel">
+                            <div class="subpanel__header">
+                                <h3>Kabel</h3>
+                            </div>
+                            <div class="field-row">
+                                <label class="field">
+                                    <span>Von</span>
+                                    <select id="cable-from"></select>
+                                </label>
+                                <label class="field">
+                                    <span>Zu</span>
+                                    <select id="cable-to"></select>
+                                </label>
+                            </div>
+                            <label class="field">
+                                <span>Reserve in %</span>
+                                <input id="cable-slack" type="number" min="0" max="100" step="5" value="20">
+                            </label>
+                            <div id="cable-output" class="notice"></div>
+                        </section>
+
+                        <section class="subpanel">
+                            <div class="subpanel__header">
+                                <h3>Hinweise</h3>
+                            </div>
+                            <ul class="notes" id="validation-output"></ul>
+                        </section>
+                    </section>
                 </div>
 
-                <label class="field">
+                <section class="dashboard-block dashboard-block--library">
-                    <span>Rack-Vorlage</span>
+                    <div class="panel__heading">
-                    <select id="rack-template-select"></select>
+                        <h2>Bibliothek</h2>
-                </label>
+                        <p>Module per Drag-and-Drop direkt aus der Liste ins Rack ziehen.</p>
-
-                <label class="field">
-                    <span>Projektname</span>
-                    <input id="project-name" type="text" value="Neues Rack-Projekt">
-                </label>
-
-                <div class="field-row">
-                    <label class="field">
-                        <span>Rack-Farbe</span>
-                        <input id="rack-color" type="color" value="#50545c">
-                    </label>
-                    <div class="field field--status">
-                        <span>Einsteckmodus</span>
-                        <div id="selected-component-info" class="selection-info">Kein Element ausgewaehlt</div>
                     </div>
-                </div>
+                    <div class="library library--wide" id="component-library"></div>
-
+                </section>
-                <div class="library-toolbar">
-                    <label class="field">
-                        <span>Komponenten filtern</span>
-                        <input id="component-filter" type="search" placeholder="z. B. Switch, UPS, Patch Panel">
-                    </label>
-                    <label class="field">
-                        <span>Plugin-Pack laden</span>
-                        <input id="plugin-input" type="file" accept=".json,application/json">
-                    </label>
-                </div>
-
-                <div class="library" id="component-library"></div>
             </section>
 
             <section class="panel panel--editor">
@@ -90,55 +145,9 @@ $apiBase = $publicBase === '' ? '' : $publicBase;
                 </div>
 
                 <div class="rack-stage">
-                    <div class="rack-summary" id="rack-summary"></div>
                     <div class="rack-grid" id="rack-grid" aria-live="polite"></div>
                 </div>
             </section>
-
-            <aside class="panel panel--sidebar">
-                <div class="panel__heading">
-                    <h2>Auswertung</h2>
-                    <p>Stueckliste, Platzreserve und Kabelschaetzung.</p>
-                </div>
-
-                <div class="stat-grid" id="project-stats"></div>
-
-                <section class="subpanel">
-                    <div class="subpanel__header">
-                        <h3>Stueckliste</h3>
-                        <button id="export-bom" type="button">CSV kopieren</button>
-                    </div>
-                    <div id="bom-output" class="list-output"></div>
-                </section>
-
-                <section class="subpanel">
-                    <div class="subpanel__header">
-                        <h3>Kabel</h3>
-                    </div>
-                    <div class="field-row">
-                        <label class="field">
-                            <span>Von</span>
-                            <select id="cable-from"></select>
-                        </label>
-                        <label class="field">
-                            <span>Zu</span>
-                            <select id="cable-to"></select>
-                        </label>
-                    </div>
-                    <label class="field">
-                        <span>Reserve in %</span>
-                        <input id="cable-slack" type="number" min="0" max="100" step="5" value="20">
-                    </label>
-                    <div id="cable-output" class="notice"></div>
-                </section>
-
-                <section class="subpanel">
-                    <div class="subpanel__header">
-                        <h3>Hinweise</h3>
-                    </div>
-                    <ul class="notes" id="validation-output"></ul>
-                </section>
-            </aside>
         </main>
     </div>