garaga page 2

apps/ui/templates/garage.html

@@ -195,28 +195,13 @@
         .phase-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            gap: 16px;
+            gap: 20px;
-            margin-top: 16px;
-        }
-
-        @media (max-width: 600px) {
-            .phase-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .phase-section {
-            background: white;
-            border-radius: 8px;
-            padding: 16px;
-            text-align: center;
         }
 
         .phase-section h4 {
-            font-size: 14px;
-            font-weight: 600;
             color: #333;
-            margin: 0 0 12px 0;
+            margin-bottom: 12px;
+            text-align: center;
         }
 
         .phase-values {
@@ -227,20 +212,26 @@
 
         .phase-value {
             display: flex;
-            align-items: baseline;
+            justify-content: space-between;
-            justify-content: center;
+            padding: 8px 12px;
-            gap: 4px;
+            background: rgba(102, 126, 234, 0.1);
+            border-radius: 8px;
         }
 
         .phase-value .value {
-            font-size: 18px;
             font-weight: 600;
             color: #667eea;
         }
 
         .phase-value .unit {
-            font-size: 14px;
             color: #666;
+            font-size: 14px;
+        }
+
+        @media (max-width: 768px) {
+            .phase-grid {
+                grid-template-columns: 1fr;
+            }
         }
 
         .loading {
@@ -453,11 +444,11 @@
         function renderThreePhasePowerDisplay(container, device) {
             const state = deviceStates[device.device_id] || {};
 
-            // Overview card
+            const card = document.createElement('div');
-            const overviewCard = document.createElement('div');
+            card.className = 'card';
-            overviewCard.className = 'card';
+            card.innerHTML = '<div class="card-title">Leistungsmessung</div>';
-            overviewCard.innerHTML = '<div class="card-title">Leistungsmessung</div>';
 
+            // Übersicht
             const overviewGrid = document.createElement('div');
             overviewGrid.className = 'state-grid';
             overviewGrid.innerHTML = `
@@ -470,13 +461,13 @@
                     <div class="state-label">Energie</div>
                 </div>
             `;
-            overviewCard.appendChild(overviewGrid);
+            card.appendChild(overviewGrid);
-            container.appendChild(overviewCard);
 
-            // Phases card
+            // Phasen Details
-            const phasesCard = document.createElement('div');
+            const phaseCard = document.createElement('div');
-            phasesCard.className = 'card';
+            phaseCard.className = 'card';
-            phasesCard.innerHTML = '<div class="card-title">Phasen</div>';
+            phaseCard.innerHTML = '<div class="card-title">Phasen</div>';
+            phaseCard.style.marginTop = '20px';
 
             const phaseGrid = document.createElement('div');
             phaseGrid.className = 'phase-grid';
@@ -533,8 +524,10 @@
                     </div>
                 </div>
             `;
-            phasesCard.appendChild(phaseGrid);
+            phaseCard.appendChild(phaseGrid);
-            container.appendChild(phasesCard);
+
+            container.appendChild(card);
+            container.appendChild(phaseCard);
         }
 
         async function toggleOutlet(deviceId, newState) {