{
"version": 1,
"minor_version": 1,
"key": "lovelace.morning_hub",
"data": {
"config": {
"title": "Morning Hub",
"views": [
{
"title": "Morning",
"path": "morning",
"icon": "mdi:weather-sunset-up",
"type": "sections",
"max_columns": 3,
"sections": [
{
"cards": [
{
"type": "heading",
"heading": "Overview"
},
{
"type": "custom:clock-weather-card",
"entity": "weather.pirateweather"
},
{
"type": "vertical-stack",
"cards": [
{
"type": "custom:button-card",
"name": "Commute",
"icon": "mdi:car",
"styles": {
"card": [
{
"border-radius": "16px 16px 0px 0px"
},
{
"padding": "12px 16px"
},
{
"border-bottom": "1px solid #f1f2f6"
}
],
"grid": [
{
"grid-template-areas": "\"i n\""
},
{
"grid-template-columns": "30px 1fr"
}
],
"name": [
{
"font-weight": "bold"
},
{
"font-size": "16px"
}
],
"icon": [
{
"color": "#1e90ff"
}
]
}
},
{
"type": "custom:button-card",
"entity": "sensor.google_travel_time_work",
"show_name": true,
"show_label": true,
"name": "Google Maps",
"label": "via Autoroute 13 S",
"styles": {
"card": [
{
"border-radius": "0px"
},
{
"padding": "12px 16px"
},
{
"border-bottom": "1px solid #f1f2f6"
}
],
"grid": [
{
"grid-template-areas": "\"i n stat b\""
},
{
"grid-template-columns": "40px 1fr auto auto"
}
],
"icon": [
{
"color": "#4285F4"
}
],
"name": [
{
"font-weight": "bold"
},
{
"justify-self": "start"
}
],
"label": [
{
"font-size": "12px"
},
{
"color": "gray"
},
{
"justify-self": "start"
}
]
},
"custom_fields": {
"stat": "[[[ return Math.round(parseFloat(entity.state)) + ' min'; ]]]",
"b": "[[[\n var val = parseFloat(entity.state);\n var txt = val < 35 ? 'Good' : (val < 45 ? 'Fair' : 'Heavy');\n var bg = val < 35 ? '#e6f4ea' : (val < 45 ? '#ffe0b2' : '#fce8e6');\n var clr = val < 35 ? '#137333' : (val < 45 ? '#b06000' : '#c5221f');\n return `${txt}`;\n]]]\n"
}
},
{
"type": "custom:button-card",
"entity": "sensor.waze_time_waze_to_work_travel_time",
"show_name": true,
"show_label": true,
"name": "Waze",
"label": "via Autoroute 13 S",
"styles": {
"card": [
{
"border-radius": "0px"
},
{
"padding": "12px 16px"
},
{
"border-bottom": "1px solid #f1f2f6"
}
],
"grid": [
{
"grid-template-areas": "\"i n stat b\""
},
{
"grid-template-columns": "40px 1fr auto auto"
}
],
"icon": [
{
"color": "#33ccff"
}
],
"name": [
{
"font-weight": "bold"
},
{
"justify-self": "start"
}
],
"label": [
{
"font-size": "12px"
},
{
"color": "gray"
},
{
"justify-self": "start"
}
]
},
"custom_fields": {
"stat": "[[[ return Math.round(parseFloat(entity.state)) + ' min'; ]]]",
"b": "[[[\n var val = parseFloat(entity.state);\n var txt = val < 35 ? 'Good' : (val < 45 ? 'Fair' : 'Heavy');\n var bg = val < 35 ? '#e6f4ea' : (val < 45 ? '#ffe0b2' : '#fce8e6');\n var clr = val < 35 ? '#137333' : (val < 45 ? '#b06000' : '#c5221f');\n return `${txt}`;\n]]]\n"
}
},
{
"type": "custom:button-card",
"entity": "sensor.google_travel_time_work",
"show_name": true,
"show_label": true,
"name": "[[[ \n var mins = Math.round(parseFloat(entity.state));\n var status = mins < 35 ? 'Traffic is flowing normally' : (mins < 45 ? 'Minor traffic delays' : 'Heavy traffic alerts');\n return `${status} • ${mins} min`;\n]]]\n",
"label": "Typical commute: ~25 min",
"icon": "[[[ return parseFloat(entity.state) < 35 ? 'mdi:check-circle' : (parseFloat(entity.state) < 45 ? 'mdi:alert-circle' : 'mdi:alert-octagon'); ]]]",
"styles": {
"card": [
{
"border-radius": "0px 0px 16px 16px"
},
{
"padding": "12px 16px"
}
],
"grid": [
{
"grid-template-areas": "\"i n\""
},
{
"grid-template-columns": "40px 1fr"
}
],
"icon": [
{
"color": "[[[ return parseFloat(entity.state) < 35 ? '#2ecc71' : (parseFloat(entity.state) < 45 ? '#e67e22' : '#e74c3c'); ]]]"
}
],
"name": [
{
"font-weight": "500"
},
{
"justify-self": "start"
}
],
"label": [
{
"font-size": "12px"
},
{
"color": "gray"
},
{
"justify-self": "start"
}
]
}
}
]
},
{
"type": "heading",
"heading": "Control"
},
{
"type": "vertical-stack",
"cards": [
{
"type": "custom:button-card",
"name": "Quick Actions",
"icon": "mdi:rocket-launch",
"styles": {
"card": [
{
"background": "none"
},
{
"box-shadow": "none"
},
{
"padding": "4px 0px"
}
],
"grid": [
{
"grid-template-areas": "\"i n\""
},
{
"grid-template-columns": "30px 1fr"
}
],
"name": [
{
"font-weight": "bold"
},
{
"font-size": "16px"
}
],
"icon": [
{
"color": "#9b59b6"
}
]
}
},
{
"type": "grid",
"square": false,
"columns": 1,
"cards": [
{
"type": "custom:button-card",
"name": "Open Waze",
"icon": "mdi:waze",
"tap_action": {
"action": "url",
"url_path": "https://waze.com/ul"
},
"styles": {
"card": [
{
"background-color": "#3498db"
},
{
"border-radius": "16px"
},
{
"color": "white"
},
{
"padding": "18px 16px"
}
],
"grid": [
{
"grid-template-areas": "\"i n\""
},
{
"grid-template-columns": "40px 1fr"
},
{
"justify-items": "start"
}
],
"name": [
{
"font-weight": "bold"
},
{
"font-size": "16px"
}
],
"icon": [
{
"width": "26px"
}
]
}
},
{
"type": "custom:button-card",
"name": "Open Google Maps",
"icon": "mdi:google-maps",
"tap_action": {
"action": "url",
"url_path": "https://maps.google.com"
},
"styles": {
"card": [
{
"background-color": "#2ecc71"
},
{
"border-radius": "16px"
},
{
"color": "white"
},
{
"padding": "18px 16px"
}
],
"grid": [
{
"grid-template-areas": "\"i n\""
},
{
"grid-template-columns": "40px 1fr"
},
{
"justify-items": "start"
}
],
"name": [
{
"font-weight": "bold"
},
{
"font-size": "16px"
}
],
"icon": [
{
"width": "26px"
}
]
}
}
]
}
]
}
]
},
{
"cards": [
{
"type": "heading",
"heading": "Schedule"
},
{
"title": "Today's Calendar",
"entities": [
"calendar.family_calendar"
],
"default_view": "agenda",
"first_day_of_week": 0,
"week_days": [
0,
1,
2,
3,
4,
5,
6
],
"week_start_hour": 0,
"week_end_hour": 23,
"lock_schedule_hours": false,
"hide_the_past": false,
"past_event_mode": "none",
"disable_swipe_controls": false,
"show_all_events_month": false,
"show_all_details_month": false,
"hide_empty_days": true,
"agenda_compact_events": false,
"shorten_event_times": false,
"time_zone": "",
"display_full_weekday_names": false,
"compact_width": false,
"show_current_time_bar": false,
"show_event_location": false,
"use_short_location": false,
"event_location_font_size": 9,
"background_opacity": 0,
"header_background_opacity": 0,
"event_calendar_friendly_name": false,
"event_title_prefix": "none",
"combine_style": "bars",
"combine_background": "primary",
"event_color_mode": "classic",
"event_neutral_background": "#F8F3E9",
"event_tint_opacity": 80,
"event_color_bar_width": 18,
"day_badges": [],
"day_badge_layout_week": "inline",
"hide_calendars": true,
"hide_header": true,
"hide_year": false,
"hide_controls": false,
"hide_navigation_buttons": false,
"hide_add_event_button": false,
"hide_view_selector": false,
"hide_dark_mode_toggle": false,
"show_dashboard_nav_button": false,
"header_dashboard_path": null,
"header_weather_sensor": "",
"calendar_person_entities": {},
"default_hidden_calendars": [],
"color_scheme": "auto",
"enable_event_management": true,
"event_modal_size": "medium",
"type": "custom:daylight-calendar-card",
"rolling_days": 7,
"compact_height": true,
"card_mod": {
"style": "ha-card {\n border-radius: 18px !important;\n padding: 16px !important;\n background-color: transparent !important;\n box-shadow: none !important;\n border: none !important;\n}\n.daylight-header-title {\n font-weight: bold !important;\n font-size: 18px !important;\n color: var(--primary-text-color) !important;\n}\n.daylight-event-wrapper {\n background: #ffffff !important;\n border: 1px solid #e1e4e8 !important;\n border-radius: 14px !important;\n margin-bottom: 12px !important;\n padding: 14px 16px !important;\n box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;\n border-left: 5px solid var(--daylight-event-color, #2196f3) !important;\n}\n.daylight-event-title {\n font-weight: bold !important;\n font-size: 15px !important;\n color: #2c3e50 !important;\n}\n.daylight-event-time {\n font-size: 12px !important;\n color: #95a5a6 !important;\n margin-bottom: 2px !important;\n}\n"
},
"hide_calendar_names": false,
"grid_options": {
"rows": 5,
"columns": 12
}
},
{
"type": "statistics-graph",
"entities": [
"sensor.google_travel_time_work"
],
"days_to_show": 1,
"period": "hour",
"chart_type": "line",
"stat_types": [
"mean"
]
},
{
"type": "statistics-graph",
"entities": [
"sensor.waze_time_waze_to_parents"
],
"days_to_show": 1,
"period": "hour",
"chart_type": "line",
"stat_types": [
"mean"
]
}
]
},
{
"type": "grid",
"cards": [
{
"type": "custom:button-card",
"name": "[[[\n const hour = new Date().getHours();\n if (hour >= 5 && hour < 12) {\n return \"Good Morning, Franco!\";\n } else if (hour >= 12 && hour < 17) {\n return \"Good Afternoon, Franco!\";\n } else {\n return \"Good Evening, Franco!\";\n }\n]]]",
"label": "[[[ const lnow = new Date(); return lnow.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); ]]]",
"show_label": true,
"styles": {
"card": [
{
"background": "[[[\n const hour = new Date().getHours();\n \n if (hour >= 5 && hour < 11) {\n // Sunrise: Soft orange to warm pink dawn gradient\n return 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #feada6 100%)';\n } else if (hour >= 11 && hour < 16) {\n // Mid-day: Bright, vibrant clear sky blue gradient\n return 'linear-gradient(135deg, #2980b9 0%, #6dd5fa 50%, #ffffff 100%)';\n } else if (hour >= 16 && hour < 21) {\n // Sunset: Deep twilight purple to vibrant orange gradient\n return 'linear-gradient(135deg, #111827 0%, #701a75 40%, #f59e0b 100%)';\n } else {\n // Night: Deep cosmic midnight blue and space gray gradient\n return 'linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%)';\n }\n]]]"
},
{
"background-size": "cover"
},
{
"background-position": "center"
},
{
"height": "110px"
},
{
"border-radius": "18px"
},
{
"padding": "16px"
}
],
"name": [
{
"justify-self": "start"
},
{
"font-weight": "bold"
},
{
"font-size": "22px"
},
{
"color": "white"
},
{
"text-shadow": "0px 2px 4px rgba(0,0,0,0.2)"
}
],
"label": [
{
"justify-self": "start"
},
{
"font-size": "14px"
},
{
"color": "white"
},
{
"opacity": "0.9"
},
{
"text-shadow": "0px 1px 3px rgba(0,0,0,0.2)"
}
]
}
},
{
"show_state": false,
"show_name": false,
"camera_view": "auto",
"fit_mode": "cover",
"type": "picture-entity",
"entity": "camera.album_slideshow_google_screensaver",
"camera_image": "camera.album_slideshow_google_screensaver"
}
]
},
{
"type": "grid",
"cards": [
{
"type": "heading",
"heading": "New section"
},
{
"type": "custom:power-gauge-card",
"entity": "sensor.meter00_power",
"max": 10000,
"grid_options": {
"columns": 9,
"rows": 1
}
}
]
}
]
}
]
}
}
}