diff --git a/apps/ui/templates/garage.html b/apps/ui/templates/garage.html
index 8a6fb14..8e7e856 100644
--- a/apps/ui/templates/garage.html
+++ b/apps/ui/templates/garage.html
@@ -132,34 +132,55 @@
gap: 8px;
}
- .control-button {
- flex: 1;
- padding: 12px 16px;
- border: none;
- border-radius: 8px;
- font-size: 16px;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .control-button.on {
- background: #34c759;
- color: white;
- }
-
- .control-button.off {
+ .toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 100px;
+ height: 50px;
background: #e0e0e0;
- color: #666;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ border: none;
+ outline: none;
}
- .control-button:hover {
- transform: translateY(-2px);
+ .toggle-switch.on {
+ background: #34c759;
+ }
+
+ .toggle-switch::after {
+ content: '';
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ width: 42px;
+ height: 42px;
+ background: white;
+ border-radius: 50%;
+ transition: transform 0.3s ease;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ }
+
+ .toggle-switch.on::after {
+ transform: translateX(50px);
+ }
+
+ .toggle-switch:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
- .control-button:active {
- transform: translateY(0);
+ .toggle-switch:active::after {
+ width: 50px;
+ }
+
+ .toggle-label {
+ display: block;
+ text-align: center;
+ margin-top: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #666;
}
.phase-grid {
@@ -219,6 +240,10 @@
text-align: center;
margin-bottom: 20px;
}
+
+ #error-container:empty {
+ margin-bottom: 0;
+ }
@@ -375,32 +400,21 @@
const controlGroup = document.createElement('div');
controlGroup.className = 'control-group';
-
- const label = document.createElement('label');
- label.className = 'control-label';
- label.textContent = 'Status';
-
- const buttonGroup = document.createElement('div');
- buttonGroup.className = 'button-group';
+ controlGroup.style.textAlign = 'center';
const state = deviceStates[device.device_id];
const currentPower = state?.power === 'on';
- const onButton = document.createElement('button');
- onButton.className = `control-button ${currentPower ? 'on' : 'off'}`;
- onButton.textContent = 'Ein';
- onButton.onclick = () => toggleOutlet(device.device_id, 'on');
+ const toggleSwitch = document.createElement('button');
+ toggleSwitch.className = `toggle-switch ${currentPower ? 'on' : ''}`;
+ toggleSwitch.onclick = () => toggleOutlet(device.device_id, currentPower ? 'off' : 'on');
- const offButton = document.createElement('button');
- offButton.className = `control-button ${!currentPower ? 'on' : 'off'}`;
- offButton.textContent = 'Aus';
- offButton.onclick = () => toggleOutlet(device.device_id, 'off');
-
- buttonGroup.appendChild(onButton);
- buttonGroup.appendChild(offButton);
+ const label = document.createElement('div');
+ label.className = 'toggle-label';
+ label.textContent = currentPower ? 'Ein' : 'Aus';
+ controlGroup.appendChild(toggleSwitch);
controlGroup.appendChild(label);
- controlGroup.appendChild(buttonGroup);
card.appendChild(controlGroup);
container.appendChild(card);
@@ -544,13 +558,13 @@
const section = document.querySelector(`[data-device-id="${deviceId}"]`);
if (!section) return;
- const onButton = section.querySelector('.control-button:nth-child(1)');
- const offButton = section.querySelector('.control-button:nth-child(2)');
+ const toggleSwitch = section.querySelector('.toggle-switch');
+ const label = section.querySelector('.toggle-label');
- if (onButton && offButton && state.power) {
+ if (toggleSwitch && label && state.power) {
const isOn = state.power === 'on';
- onButton.className = `control-button ${isOn ? 'on' : 'off'}`;
- offButton.className = `control-button ${!isOn ? 'on' : 'off'}`;
+ toggleSwitch.className = `toggle-switch ${isOn ? 'on' : ''}`;
+ label.textContent = isOn ? 'Ein' : 'Aus';
}
}