Add Dashboard-Examples
622
Dashboard-Examples.-.md
Normal file
622
Dashboard-Examples.-.md
Normal file
@@ -0,0 +1,622 @@
|
|||||||
|
# 📱 Dashboard Examples
|
||||||
|
|
||||||
|
Create beautiful and functional dashboards to control your AdGuard Control Hub. These examples provide ready-to-use Lovelace configurations.
|
||||||
|
|
||||||
|
## 🎛️ Main Control Panel
|
||||||
|
|
||||||
|
A comprehensive overview of your AdGuard Home status and controls.
|
||||||
|
|
||||||
|
### Full Control Dashboard
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: vertical-stack
|
||||||
|
title: 🛡️ AdGuard Control Hub
|
||||||
|
cards:
|
||||||
|
# Status Overview
|
||||||
|
- type: glance
|
||||||
|
title: Protection Status
|
||||||
|
columns: 4
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_protection
|
||||||
|
name: Protection
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
- entity: sensor.adguard_blocked_percentage
|
||||||
|
name: Block Rate
|
||||||
|
icon: mdi:percent
|
||||||
|
- entity: sensor.adguard_queries_today
|
||||||
|
name: Queries Today
|
||||||
|
icon: mdi:dns
|
||||||
|
- entity: sensor.adguard_blocked_today
|
||||||
|
name: Blocked Today
|
||||||
|
icon: mdi:block-helper
|
||||||
|
|
||||||
|
# Quick Statistics
|
||||||
|
- type: statistics-graph
|
||||||
|
title: DNS Activity (24h)
|
||||||
|
chart_type: line
|
||||||
|
period: hour
|
||||||
|
stat_types:
|
||||||
|
- sum
|
||||||
|
entities:
|
||||||
|
- sensor.adguard_queries_today
|
||||||
|
- sensor.adguard_blocked_today
|
||||||
|
|
||||||
|
# Device Controls
|
||||||
|
- type: entities
|
||||||
|
title: Network Devices
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- type: section
|
||||||
|
label: "Family Devices"
|
||||||
|
- entity: switch.adguard_client_kids_ipad
|
||||||
|
name: "Kids iPad"
|
||||||
|
icon: mdi:tablet
|
||||||
|
secondary_info: last-updated
|
||||||
|
- entity: switch.adguard_client_kids_laptop
|
||||||
|
name: "Kids Laptop"
|
||||||
|
icon: mdi:laptop
|
||||||
|
secondary_info: last-updated
|
||||||
|
|
||||||
|
- type: section
|
||||||
|
label: "Work Devices"
|
||||||
|
- entity: switch.adguard_client_work_laptop
|
||||||
|
name: "Work Laptop"
|
||||||
|
icon: mdi:briefcase
|
||||||
|
secondary_info: last-updated
|
||||||
|
|
||||||
|
- type: section
|
||||||
|
label: "Smart Home"
|
||||||
|
- entity: switch.adguard_client_living_room_tv
|
||||||
|
name: "Living Room TV"
|
||||||
|
icon: mdi:television
|
||||||
|
secondary_info: last-updated
|
||||||
|
|
||||||
|
# Emergency Controls
|
||||||
|
- type: horizontal-stack
|
||||||
|
cards:
|
||||||
|
- type: button
|
||||||
|
name: "🚨 Emergency Unblock"
|
||||||
|
icon: mdi:shield-off-outline
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.emergency_unblock
|
||||||
|
service_data:
|
||||||
|
duration: 600
|
||||||
|
clients: ["all"]
|
||||||
|
hold_action:
|
||||||
|
action: more-info
|
||||||
|
```
|
||||||
|
|
||||||
|
## 👨👩👧👦 Family Control Dashboard
|
||||||
|
|
||||||
|
Specialized dashboard for managing kids' internet access.
|
||||||
|
|
||||||
|
### Kids Internet Control
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: vertical-stack
|
||||||
|
title: 👪 Family Internet Control
|
||||||
|
cards:
|
||||||
|
# Family Status Overview
|
||||||
|
- type: glance
|
||||||
|
title: Family Devices Status
|
||||||
|
columns: 3
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_kids_ipad
|
||||||
|
name: "iPad"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
- entity: switch.adguard_client_kids_laptop
|
||||||
|
name: "Laptop"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
- entity: switch.adguard_client_kids_phone
|
||||||
|
name: "Phone"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
|
||||||
|
# Parental Control Features
|
||||||
|
- type: entities
|
||||||
|
title: Parental Controls
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_kids_ipad_parental
|
||||||
|
name: "Parental Control - iPad"
|
||||||
|
icon: mdi:account-child
|
||||||
|
- entity: switch.adguard_client_kids_ipad_safesearch
|
||||||
|
name: "Safe Search - iPad"
|
||||||
|
icon: mdi:search-web
|
||||||
|
- entity: switch.adguard_client_kids_ipad_safebrowsing
|
||||||
|
name: "Safe Browsing - iPad"
|
||||||
|
icon: mdi:shield-check
|
||||||
|
|
||||||
|
# Service Blocking Controls
|
||||||
|
- type: entities
|
||||||
|
title: Content Blocking - Kids iPad
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- type: section
|
||||||
|
label: "Entertainment"
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_youtube
|
||||||
|
name: "Block YouTube"
|
||||||
|
icon: mdi:youtube
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_netflix
|
||||||
|
name: "Block Netflix"
|
||||||
|
icon: mdi:netflix
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_disney_plus
|
||||||
|
name: "Block Disney+"
|
||||||
|
icon: mdi:disney
|
||||||
|
|
||||||
|
- type: section
|
||||||
|
label: "Social Media"
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_tiktok
|
||||||
|
name: "Block TikTok"
|
||||||
|
icon: mdi:music-note
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_instagram
|
||||||
|
name: "Block Instagram"
|
||||||
|
icon: mdi:instagram
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_snapchat
|
||||||
|
name: "Block Snapchat"
|
||||||
|
icon: mdi:snapchat
|
||||||
|
|
||||||
|
- type: section
|
||||||
|
label: "Gaming"
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_roblox
|
||||||
|
name: "Block Roblox"
|
||||||
|
icon: mdi:gamepad-variant
|
||||||
|
- entity: switch.adguard_client_kids_ipad_service_gaming
|
||||||
|
name: "Block Gaming Services"
|
||||||
|
icon: mdi:controller-classic
|
||||||
|
|
||||||
|
# Quick Action Buttons
|
||||||
|
- type: grid
|
||||||
|
title: Quick Actions
|
||||||
|
square: false
|
||||||
|
columns: 2
|
||||||
|
cards:
|
||||||
|
- type: button
|
||||||
|
name: "📚 Study Mode"
|
||||||
|
icon: mdi:book-open-variant
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.block_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Kids iPad"
|
||||||
|
services: ["social", "entertainment", "gaming"]
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: linear-gradient(45deg, #2196F3, #21CBF3);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "🎮 Free Time"
|
||||||
|
icon: mdi:play-circle
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.unblock_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Kids iPad"
|
||||||
|
services: ["entertainment"]
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: linear-gradient(45deg, #4CAF50, #8BC34A);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "😴 Bedtime"
|
||||||
|
icon: mdi:sleep
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.block_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Kids iPad"
|
||||||
|
services: ["social", "entertainment", "gaming"]
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: linear-gradient(45deg, #9C27B0, #673AB7);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "✅ Allow All"
|
||||||
|
icon: mdi:check-circle
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.unblock_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Kids iPad"
|
||||||
|
services: ["social", "entertainment", "gaming"]
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: linear-gradient(45deg, #FF9800, #FF5722);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 💼 Work Productivity Dashboard
|
||||||
|
|
||||||
|
Control work devices and eliminate distractions during work hours.
|
||||||
|
|
||||||
|
### Work Focus Dashboard
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: vertical-stack
|
||||||
|
title: 💼 Work Productivity Control
|
||||||
|
cards:
|
||||||
|
# Work Status
|
||||||
|
- type: entities
|
||||||
|
title: Work Environment
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_work_laptop
|
||||||
|
name: "Work Laptop Protection"
|
||||||
|
icon: mdi:laptop
|
||||||
|
- entity: binary_sensor.adguard_client_work_laptop_online
|
||||||
|
name: "Work Laptop Online"
|
||||||
|
icon: mdi:lan-connect
|
||||||
|
- entity: sensor.adguard_client_work_laptop_queries
|
||||||
|
name: "DNS Queries Today"
|
||||||
|
icon: mdi:dns
|
||||||
|
|
||||||
|
# Distraction Controls
|
||||||
|
- type: entities
|
||||||
|
title: Distraction Blocking
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_work_laptop_service_facebook
|
||||||
|
name: "Block Facebook"
|
||||||
|
icon: mdi:facebook
|
||||||
|
- entity: switch.adguard_client_work_laptop_service_twitter
|
||||||
|
name: "Block Twitter"
|
||||||
|
icon: mdi:twitter
|
||||||
|
- entity: switch.adguard_client_work_laptop_service_youtube
|
||||||
|
name: "Block YouTube"
|
||||||
|
icon: mdi:youtube
|
||||||
|
- entity: switch.adguard_client_work_laptop_service_reddit
|
||||||
|
name: "Block Reddit"
|
||||||
|
icon: mdi:reddit
|
||||||
|
- entity: switch.adguard_client_work_laptop_service_netflix
|
||||||
|
name: "Block Netflix"
|
||||||
|
icon: mdi:netflix
|
||||||
|
|
||||||
|
# Focus Mode Controls
|
||||||
|
- type: grid
|
||||||
|
title: Focus Modes
|
||||||
|
square: false
|
||||||
|
columns: 3
|
||||||
|
cards:
|
||||||
|
- type: button
|
||||||
|
name: "🧠 Deep Focus"
|
||||||
|
icon: mdi:brain
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.block_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Work Laptop"
|
||||||
|
services: ["social", "entertainment", "gaming"]
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "☕ Break Time"
|
||||||
|
icon: mdi:coffee
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.emergency_unblock
|
||||||
|
service_data:
|
||||||
|
duration: 900 # 15 minutes
|
||||||
|
clients: ["Work Laptop"]
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "👔 Normal Mode"
|
||||||
|
icon: mdi:account-tie
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.unblock_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Work Laptop"
|
||||||
|
services: ["social"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🏠 Guest Network Dashboard
|
||||||
|
|
||||||
|
Manage guest access and apply appropriate restrictions.
|
||||||
|
|
||||||
|
### Guest Control Panel
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: vertical-stack
|
||||||
|
title: 🌐 Guest Network Management
|
||||||
|
cards:
|
||||||
|
# Guest Status
|
||||||
|
- type: entities
|
||||||
|
title: Guest Network
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_guest_network
|
||||||
|
name: "Guest Protection"
|
||||||
|
icon: mdi:wifi-strength-4
|
||||||
|
- entity: binary_sensor.adguard_client_guest_network_active
|
||||||
|
name: "Guest Network Active"
|
||||||
|
icon: mdi:account-group
|
||||||
|
|
||||||
|
# Guest Restrictions
|
||||||
|
- type: entities
|
||||||
|
title: Guest Access Controls
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_guest_network_service_adult
|
||||||
|
name: "Block Adult Content"
|
||||||
|
icon: mdi:shield-account
|
||||||
|
- entity: switch.adguard_client_guest_network_service_gambling
|
||||||
|
name: "Block Gambling"
|
||||||
|
icon: mdi:cards-playing-outline
|
||||||
|
- entity: switch.adguard_client_guest_network_service_torrents
|
||||||
|
name: "Block Torrents"
|
||||||
|
icon: mdi:download-network
|
||||||
|
|
||||||
|
# Quick Guest Modes
|
||||||
|
- type: horizontal-stack
|
||||||
|
cards:
|
||||||
|
- type: button
|
||||||
|
name: "🔓 Open Access"
|
||||||
|
icon: mdi:wifi-check
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.update_client
|
||||||
|
service_data:
|
||||||
|
name: "Guest Network"
|
||||||
|
blocked_services: []
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "🛡️ Safe Mode"
|
||||||
|
icon: mdi:shield-check
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.update_client
|
||||||
|
service_data:
|
||||||
|
name: "Guest Network"
|
||||||
|
blocked_services: ["adult", "gambling", "torrents"]
|
||||||
|
parental_enabled: true
|
||||||
|
safebrowsing_enabled: true
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📊 Statistics Dashboard
|
||||||
|
|
||||||
|
Monitor your network activity and blocking effectiveness.
|
||||||
|
|
||||||
|
### Network Analytics
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: vertical-stack
|
||||||
|
title: 📊 Network Analytics
|
||||||
|
cards:
|
||||||
|
# Key Metrics
|
||||||
|
- type: glance
|
||||||
|
title: Today's Statistics
|
||||||
|
columns: 4
|
||||||
|
entities:
|
||||||
|
- entity: sensor.adguard_queries_today
|
||||||
|
name: "Total Queries"
|
||||||
|
icon: mdi:dns
|
||||||
|
- entity: sensor.adguard_blocked_today
|
||||||
|
name: "Blocked"
|
||||||
|
icon: mdi:block-helper
|
||||||
|
- entity: sensor.adguard_blocked_percentage
|
||||||
|
name: "Block Rate"
|
||||||
|
icon: mdi:percent
|
||||||
|
- entity: binary_sensor.adguard_filtering_enabled
|
||||||
|
name: "Filtering"
|
||||||
|
icon: mdi:filter
|
||||||
|
|
||||||
|
# Query History
|
||||||
|
- type: history-graph
|
||||||
|
title: DNS Queries (24 Hours)
|
||||||
|
hours_to_show: 24
|
||||||
|
refresh_interval: 60
|
||||||
|
entities:
|
||||||
|
- sensor.adguard_queries_today
|
||||||
|
- sensor.adguard_blocked_today
|
||||||
|
|
||||||
|
# Client Activity
|
||||||
|
- type: entities
|
||||||
|
title: Most Active Clients
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: sensor.adguard_client_kids_ipad_queries
|
||||||
|
name: "Kids iPad"
|
||||||
|
icon: mdi:tablet
|
||||||
|
secondary_info: entity-id
|
||||||
|
- entity: sensor.adguard_client_work_laptop_queries
|
||||||
|
name: "Work Laptop"
|
||||||
|
icon: mdi:laptop
|
||||||
|
secondary_info: entity-id
|
||||||
|
- entity: sensor.adguard_client_living_room_tv_queries
|
||||||
|
name: "Living Room TV"
|
||||||
|
icon: mdi:television
|
||||||
|
secondary_info: entity-id
|
||||||
|
|
||||||
|
# System Health
|
||||||
|
- type: entities
|
||||||
|
title: System Status
|
||||||
|
show_header_toggle: false
|
||||||
|
entities:
|
||||||
|
- entity: binary_sensor.adguard_filtering_enabled
|
||||||
|
name: "DNS Filtering"
|
||||||
|
icon: mdi:dns
|
||||||
|
- entity: switch.adguard_protection
|
||||||
|
name: "Protection Status"
|
||||||
|
icon: mdi:shield
|
||||||
|
- type: attribute
|
||||||
|
entity: switch.adguard_protection
|
||||||
|
attribute: sw_version
|
||||||
|
name: "AdGuard Version"
|
||||||
|
icon: mdi:information
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📱 Mobile-Optimized Dashboard
|
||||||
|
|
||||||
|
Simplified controls perfect for mobile devices.
|
||||||
|
|
||||||
|
### Mobile Quick Controls
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: vertical-stack
|
||||||
|
title: 🛡️ AdGuard Mobile
|
||||||
|
cards:
|
||||||
|
# Emergency Button
|
||||||
|
- type: button
|
||||||
|
name: "🚨 EMERGENCY UNBLOCK"
|
||||||
|
icon: mdi:shield-off
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.emergency_unblock
|
||||||
|
service_data:
|
||||||
|
duration: 600
|
||||||
|
clients: ["all"]
|
||||||
|
hold_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.emergency_unblock
|
||||||
|
service_data:
|
||||||
|
duration: 300 # 5 minutes on hold
|
||||||
|
clients: ["all"]
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: linear-gradient(45deg, #f44336, #e91e63);
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Device Quick Toggle
|
||||||
|
- type: glance
|
||||||
|
title: Family Devices
|
||||||
|
columns: 2
|
||||||
|
show_name: true
|
||||||
|
show_state: false
|
||||||
|
entities:
|
||||||
|
- entity: switch.adguard_client_kids_ipad
|
||||||
|
name: "Kids iPad"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
- entity: switch.adguard_client_kids_laptop
|
||||||
|
name: "Kids Laptop"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
- entity: switch.adguard_client_work_laptop
|
||||||
|
name: "Work"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
- entity: switch.adguard_client_guest_network
|
||||||
|
name: "Guests"
|
||||||
|
tap_action:
|
||||||
|
action: toggle
|
||||||
|
|
||||||
|
# Quick Actions
|
||||||
|
- type: grid
|
||||||
|
columns: 2
|
||||||
|
square: false
|
||||||
|
cards:
|
||||||
|
- type: button
|
||||||
|
name: "Block Gaming"
|
||||||
|
icon: mdi:gamepad-variant-outline
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.block_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Kids iPad"
|
||||||
|
services: ["gaming", "roblox"]
|
||||||
|
|
||||||
|
- type: button
|
||||||
|
name: "Block Social"
|
||||||
|
icon: mdi:account-group-outline
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.block_services
|
||||||
|
service_data:
|
||||||
|
client_name: "Kids iPad"
|
||||||
|
services: ["social", "tiktok", "instagram"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 Custom Styling with card-mod
|
||||||
|
|
||||||
|
Enhance your dashboards with custom CSS styling.
|
||||||
|
|
||||||
|
### Styled Emergency Button
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: button
|
||||||
|
name: "🚨 EMERGENCY ACCESS"
|
||||||
|
icon: mdi:shield-off-outline
|
||||||
|
tap_action:
|
||||||
|
action: call-service
|
||||||
|
service: adguard_hub.emergency_unblock
|
||||||
|
service_data:
|
||||||
|
duration: 600
|
||||||
|
clients: ["all"]
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
||||||
|
border: 2px solid #c44569;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
box-shadow: 0 8px 16px rgba(238, 90, 36, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
ha-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 12px 24px rgba(238, 90, 36, 0.4);
|
||||||
|
}
|
||||||
|
ha-card:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Protection Status with Color
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: entity
|
||||||
|
entity: switch.adguard_protection
|
||||||
|
card_mod:
|
||||||
|
style: |
|
||||||
|
ha-card {
|
||||||
|
background: {% if is_state('switch.adguard_protection', 'on') %}
|
||||||
|
linear-gradient(45deg, #4CAF50, #8BC34A)
|
||||||
|
{% else %}
|
||||||
|
linear-gradient(45deg, #f44336, #ff5722)
|
||||||
|
{% endif %};
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📐 Layout Tips
|
||||||
|
|
||||||
|
### Responsive Design
|
||||||
|
Use different dashboard layouts for different screen sizes:
|
||||||
|
|
||||||
|
- **Desktop**: Vertical stacks with multiple columns
|
||||||
|
- **Tablet**: Mixed horizontal and vertical stacks
|
||||||
|
- **Mobile**: Single column with large touch targets
|
||||||
|
|
||||||
|
### Organization Best Practices
|
||||||
|
1. **Group related controls** together
|
||||||
|
2. **Use sections** to separate different areas
|
||||||
|
3. **Add icons** for visual clarity
|
||||||
|
4. **Use consistent colors** for similar functions
|
||||||
|
5. **Provide visual feedback** for actions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Next**: Set up [Automation Examples](Automation-Examples) to make your network truly smart!
|
||||||
Reference in New Issue
Block a user