API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 30th, 2025
889
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 86.01 KB | None | 0 0
raw download clone embed print report
  1. button_card_templates:
  2. navbar:
  3. show_icon: true
  4. show_name: true
  5. show_state: true
  6. layout: vertical
  7. styles:
  8. card:
  9. - background: var(--card-background-color)
  10. - border-radius: 16px
  11. - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2)
  12. - padding: 16px
  13. - margin: 8px
  14. - color: var(--primary-text-color)
  15. - text-align: center
  16. name:
  17. - font-weight: bold
  18. - font-size: 16px
  19. - margin-bottom: 4px
  20. state:
  21. - font-size: 14px
  22. - color: var(--secondary-text-color)
  23. icon:
  24. - width: 28px
  25. - height: 28px
  26. views:
  27. - title: Home
  28. icon: mdi:home
  29. type: sections
  30. cards: []
  31. sections:
  32. - type: grid
  33. cards:
  34. - type: custom:mod-card
  35. card:
  36. type: vertical-stack
  37. cards:
  38. - type: custom:clock-weather-card
  39. entity: weather.forecast_home
  40. card_mod:
  41. style: |
  42. ha-card {
  43. background: none;
  44. box-shadow: none;
  45. }
  46. - type: custom:mini-graph-card
  47. name: Last Week's Temperature Summary
  48. entities:
  49. - entity: sensor.kckv_temperature
  50. aggregate_func: max
  51. name: Max
  52. color: '#20fa5a'
  53. fill: false
  54. - entity: sensor.kckv_temperature
  55. aggregate_func: min
  56. name: Min
  57. color: '#ffd991'
  58. fill: false
  59. - entity: sensor.kckv_temperature
  60. aggregate_func: avg
  61. name: Avg
  62. color: '#11c4fa'
  63. fill: false
  64. name_adaptive_color: true
  65. state_adaptive_color: true
  66. icon_adaptive_color: true
  67. hours_to_show: 168
  68. group_by: date
  69. align_state: center
  70. line_width: 3
  71. align_icon: left
  72. font_size_header: 16
  73. animate: true
  74. show:
  75. name_adaptive_color: true
  76. icon_adaptive_color: true
  77. state_adaptive_color: true
  78. icon: false
  79. legend: true
  80. fill: false
  81. card_mod:
  82. style: |
  83. ha-card {
  84. background: none;
  85. box-shadow: none;
  86. }
  87. .header {
  88. justify-content: center !important;
  89. text-align: center !important;
  90. }
  91. style: |
  92. ha-card {
  93. background: rgba(30, 30, 30, 0.2);
  94. border-radius: 16px;
  95. box-shadow: none;
  96. padding: 16px;
  97. }
  98. - type: custom:mini-graph-card
  99. entities:
  100. - entity: sensor.total_sleep_0d_ago
  101. show_state: true
  102. name: Total Sleep
  103. color: '#885ce7'
  104. fill: false
  105. - entity: sensor.deep_sleep_0d_ago
  106. name: Deep Sleep
  107. color: '#00b894'
  108. fill: false
  109. - entity: sensor.light_sleep_0d_ago
  110. name: Light Sleep
  111. color: '#e17055'
  112. fill: false
  113. - entity: sensor.rem_sleep_0d_ago
  114. name: REM Sleep
  115. color: '#0984e3'
  116. fill: false
  117. - entity: sensor.time_in_bed_0d_ago
  118. name: Time In Bed
  119. color: '#d92877'
  120. fill: false
  121. name: Weekly Sleep Summary
  122. hours_to_show: 168
  123. points_per_hour: 6
  124. group_by: date
  125. align_icon: left
  126. height: 150
  127. align_state: center
  128. font_size_header: 20
  129. line_width: 4
  130. animate: true
  131. show:
  132. fill: false
  133. state: last
  134. name_adaptive_color: true
  135. state_adaptive_color: true
  136. icon_adaptive_color: true
  137. legend: true
  138. extrema: true
  139. labels_secondary: true
  140. labels: false
  141. - type: horizontal-stack
  142. cards:
  143. - type: custom:button-card
  144. entity: sensor.iphone_battery_level
  145. unit_of_measurement: '%'
  146. device_class: battery
  147. icon: mdi:cellphone
  148. name: iPhone
  149. styles:
  150. card:
  151. - height: 90px
  152. icon:
  153. - color: |
  154. [[[
  155. if (entity.state < 30) return '#d94348';
  156. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  157. if (entity.state >= 80) return '#58e081';
  158. ]]]
  159. name:
  160. - color: |
  161. [[[
  162. if (entity.state < 30) return '#d94348';
  163. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  164. if (entity.state >= 80) return '#58e081';
  165. ]]]
  166. state:
  167. - color: |
  168. [[[
  169. if (entity.state < 30) return '#858179';
  170. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  171. if (entity.state >= 80) return '#58e081';
  172. ]]]
  173. show_state: true
  174. - type: custom:button-card
  175. entity: sensor.ipad_battery_level
  176. unit_of_measurement: '%'
  177. device_class: battery
  178. icon: mdi:tablet
  179. name: iPad
  180. styles:
  181. card:
  182. - height: 90px
  183. name:
  184. - color: |
  185. [[[
  186. if (entity.state < 30) return '#d94348';
  187. if ((entity.state >=50) && (entity.state < 80)) return '#e0b558'
  188. if (entity.state >= 75) return '#58e081';
  189. ]]]
  190. icon:
  191. - color: |
  192. [[[
  193. if (entity.state < 30) return '#d94348';
  194. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  195. if (entity.state >= 80) return 'lime';
  196. ]]]
  197. state:
  198. - color: |
  199. [[[
  200. if (entity.state < 30) return '#858179';
  201. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  202. if (entity.state >= 80) return '#858179';
  203. ]]]
  204. show_state: true
  205. - type: custom:button-card
  206. entity: sensor.iphone_watch_battery_level
  207. unit_of_measurement: '%'
  208. device_class: battery
  209. icon: mdi:watch
  210. name: Watch
  211. styles:
  212. card:
  213. - height: 90px
  214. name:
  215. - color: |
  216. [[[
  217. if (entity.state < 30) return '#d94348';
  218. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  219. if (entity.state >= 80) return '#58e081';
  220. ]]]
  221. icon:
  222. - color: |
  223. [[[
  224. if (entity.state < 30) return '#d94348';
  225. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  226. if (entity.state >= 80) return '#58e081';
  227. ]]]
  228. state:
  229. - color: |
  230. [[[
  231. if (entity.state < 30) return '#858179';
  232. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  233. if (entity.state >= 80) return '#858179';
  234. ]]]
  235. show_state: true
  236. - type: custom:button-card
  237. entity: sensor.10_0_0_27_battery_charge
  238. unit_of_measurement: '%'
  239. device_class: battery
  240. icon: mdi:laptop
  241. name: Winux
  242. styles:
  243. card:
  244. - height: 90px
  245. name:
  246. - color: |
  247. [[[
  248. if (entity.state < 30) return '#d94348';
  249. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  250. if (entity.state >= 80) return '#58e081';
  251. ]]]
  252. icon:
  253. - color: |
  254. [[[
  255. if (entity.state < 30) return '#d94348';
  256. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  257. if (entity.state >= 80) return '#58e081';
  258. ]]]
  259. state:
  260. - color: |
  261. [[[
  262. if (entity.state < 30) return '#858179';
  263. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  264. if (entity.state >= 80) return '#858179';
  265. ]]]
  266. show_state: true
  267. - type: custom:button-card
  268. entity: sensor.freedomphone_battery_level
  269. unit_of_measurement: '%'
  270. device_class: battery
  271. icon: mdi:cellphone
  272. name:
  273. styles:
  274. card:
  275. - height: 90px
  276. name:
  277. - color: |
  278. [[[
  279. if (entity.state < 30) return '#d94348';
  280. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  281. if (entity.state >= 80) return '#58e081';
  282. ]]]
  283. icon:
  284. - color: |
  285. [[[
  286. if (entity.state < 30) return '#d94348';
  287. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  288. if (entity.state >= 80) return '#58e081';
  289. ]]]
  290. state:
  291. - color: |
  292. [[[
  293. if (entity.state < 30) return '#858179';
  294. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  295. if (entity.state >= 80) return '#858179';
  296. ]]]
  297. show_state: true
  298. - type: custom:button-card
  299. entity: sensor._iphone_battery_level
  300. unit_of_measurement: '%'
  301. device_class: battery
  302. icon: mdi:cellphone
  303. name: REDACTED
  304. styles:
  305. card:
  306. - height: 90px
  307. - width: 62px
  308. name:
  309. - color: |
  310. [[[
  311. if (entity.state < 30) return '#d94348';
  312. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  313. if (entity.state >= 80) return '#58e081';
  314. ]]]
  315. icon:
  316. - color: |
  317. [[[
  318. if (entity.state < 30) return '#d94348';
  319. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  320. if (entity.state >= 80) return '#58e081';
  321. ]]]
  322. state:
  323. - color: |
  324. [[[
  325. if (entity.state < 30) return '#858179';
  326. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  327. if (entity.state >= 80) return '#858179';
  328. ]]]
  329. show_state: true
  330. - type: custom:button-card
  331. entity: sensor.front_door_battery
  332. unit_of_measurement: '%'
  333. device_class: battery
  334. icon: mdi:cctv
  335. name: Ring
  336. styles:
  337. card:
  338. - height: 90px
  339. name:
  340. - color: |
  341. [[[
  342. if (entity.state < 30) return '#d94348';
  343. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  344. if (entity.state >= 80) return '#58e081';
  345. ]]]
  346. icon:
  347. - color: |
  348. [[[
  349. if (entity.state < 30) return '#d94348';
  350. if ((entity.state >= 30) && (entity.state < 80)) return '#e0b558'
  351. if (entity.state >= 80) return '#58e081';
  352. ]]]
  353. state:
  354. - color: |
  355. [[[
  356. if (entity.state < 30) return '#858179';
  357. if ((entity.state >= 30) && (entity.state < 80)) return '#858179'
  358. if (entity.state >= 80) return '#858179';
  359. ]]]
  360. show_state: true
  361. - type: custom:mod-card
  362. style: |
  363. ha-card {
  364. position: fixed;
  365. top: 20%;
  366. right: 1%;
  367. width: 5%;
  368. z-index: 1000;
  369. background: transparent;
  370. box-shadow: none;
  371. border: none;
  372. }
  373. card:
  374. type: vertical-stack
  375. cards:
  376. - type: custom:button-card
  377. template: navbar
  378. entity: sensor.speedtest_ping
  379. name: Ping
  380. icon: mdi:speedometer
  381. show_state: true
  382. state_display: |
  383. [[[ return (entity.state * 1).toFixed(0) + ' ms'; ]]]
  384. styles:
  385. icon:
  386. - width: 40px
  387. - height: 40px
  388. - background-image: >-
  389. url("https://images.vexels.com/media/users/3/199980/isolated/preview/4c910ee68a0f4fe8029f72e40bc10fe6-internet-browsing-icon-stroke-pink.png")
  390. - background-size: contain
  391. - background-repeat: no-repeat
  392. - background-position: center
  393. - color: transparent
  394. card:
  395. - border-radius: 15px
  396. - padding: 10px
  397. - margin-bottom: 10px
  398. - background: rgba(0, 0, 0, 0.4)
  399. - type: custom:button-card
  400. template: navbar
  401. entity: sensor.firewall_gateway_proton_status
  402. name: Proton VPN
  403. icon: mdi:shield-home
  404. styles:
  405. icon:
  406. - width: 40px
  407. - height: 40px
  408. - background-image: url("/local/community/proton-vpn-seeklogo.png")
  409. - background-size: contain
  410. - background-repeat: no-repeat
  411. - background-position: center
  412. - color: transparent
  413. card:
  414. - border-radius: 15px
  415. - padding: 10px
  416. - margin-bottom: 10px
  417. - background: rgba(0, 0, 0, 0.4)
  418. - type: custom:button-card
  419. template: navbar
  420. entity: sensor.speedtest_download
  421. name: Download
  422. icon: mdi:download
  423. styles:
  424. icon:
  425. - width: 40px
  426. - height: 40px
  427. - background-image: >-
  428. url("https://cdn-icons-png.flaticon.com/512/4225/4225688.png")
  429. - background-size: contain
  430. - background-repeat: no-repeat
  431. - background-position: center
  432. - color: transparent
  433. card:
  434. - border-radius: 15px
  435. - padding: 10px
  436. - margin-bottom: 10px
  437. - background: rgba(0, 0, 0, 0.4)
  438. - type: custom:button-card
  439. template: navbar
  440. entity: sensor.speedtest_upload
  441. name: Upload
  442. icon: mdi:upload
  443. styles:
  444. icon:
  445. - width: 40px
  446. - height: 40px
  447. - background-image: >-
  448. url("https://media.lordicon.com/icons/wired/gradient/2-cloud-upload.svg")
  449. - background-size: contain
  450. - background-repeat: no-repeat
  451. - background-position: center
  452. - color: transparent
  453. card:
  454. - border-radius: 15px
  455. - padding: 10px
  456. - margin-bottom: 10px
  457. - background: rgba(0, 0, 0, 0.5)
  458. - type: custom:button-card
  459. template: navbar
  460. entity: sensor.overseerr_pending_requests_2
  461. name: Overseerr
  462. icon: mdi:movie-star
  463. show_state: true
  464. state_display: |
  465. [[[ return entity.state; ]]]
  466. styles:
  467. icon:
  468. - width: 40px
  469. - height: 40px
  470. - background-image: >-
  471. url("https://coolify.io/docs/images/services/overseerr.svg")
  472. - background-size: contain
  473. - background-repeat: no-repeat
  474. - background-position: center
  475. - color: transparent
  476. card:
  477. - border-radius: 15px
  478. - padding: 10px
  479. - margin-bottom: 10px
  480. state:
  481. - value: 0
  482. styles:
  483. card: null
  484. - operator: '!='
  485. value: 0
  486. styles:
  487. card: null
  488. - type: custom:button-card
  489. template: navbar
  490. entity: binary_sensor.firewall_pending_notices_present
  491. name: Firewall
  492. icon: mdi:shield-check
  493. styles:
  494. icon:
  495. - width: 40px
  496. - height: 40px
  497. - background-image: url("")
  498. - background-size: contain
  499. - background-repeat: no-repeat
  500. - background-position: center
  501. - color: green
  502. card:
  503. - border-radius: 15px
  504. - padding: 10px
  505. - margin-bottom: 10px
  506. - background: rgba(0, 0, 0, 0.4)
  507. state:
  508. - value: 'off'
  509. styles:
  510. icon:
  511. - color: green
  512. - operator: '!='
  513. value: 'off'
  514. styles:
  515. icon:
  516. - color: red
  517. - type: custom:mod-card
  518. style: |
  519. :host {
  520. position: fixed;
  521. top: 243px;
  522. right: 422px;
  523. z-index: 1000;
  524. }
  525. ha-card {
  526. display: flex;
  527. flex-direction: row-reverse;
  528. align-items: center;
  529. justify-content: space-between;
  530. padding: 5px;
  531. background-color: transparent !important;
  532. color: transparent !important;
  533. border-radius: 0 !important;
  534. box-shadow: none !important;
  535. transform: scale(0.14);
  536. transform-origin: top right;
  537. }
  538. card:
  539. type: horizontal-stack
  540. cards:
  541. - type: picture
  542. image: >-
  543. https://dashboard.snapcraft.io/site_media/appmedia/2024/05/glances-logo.png
  544. tap_action:
  545. action: url
  546. url_path: http://100.125.7.36:61208
  547. card_mod:
  548. style: |
  549. ha-card {
  550. background: none !important;
  551. box-shadow: none !important;
  552. }
  553. img {
  554. opacity: 0.7 !important;
  555. transition: opacity 0.3s ease;
  556. }
  557. img:hover {
  558. opacity: 1 !important;
  559. }
  560. - type: grid
  561. cards:
  562. - type: custom:mini-graph-card
  563. entities:
  564. - sensor.10_0_0_56_core_0_temperature
  565. show:
  566. name_adaptive_color: true
  567. icon_adaptive_color: true
  568. state_adaptive_color: true
  569. state: la
  570. labels: false
  571. name: Ubuntu Server Temp
  572. hours_to_show: 1
  573. points_per_hour: 200
  574. height: 80
  575. color_thresholds:
  576. - value: 55
  577. color: '#00FF00'
  578. - value: 70
  579. color: '#FFFF00'
  580. - value: 86
  581. color: '#FF0000'
  582. animate: true
  583. line_width: 2
  584. - type: custom:mini-graph-card
  585. entities:
  586. - sensor.10_0_0_56_cpu_usage
  587. show:
  588. name_adaptive_color: true
  589. icon_adaptive_color: true
  590. state_adaptive_color: true
  591. state: last
  592. labels: false
  593. name: Ubuntu Server Usage
  594. hours_to_show: 1
  595. points_per_hour: 200
  596. color_thresholds:
  597. - value: 20
  598. color: '#00FF00'
  599. - value: 40
  600. color: '#FFFF00'
  601. - value: 80
  602. color: '#FF0000'
  603. animate: true
  604. line_width: 2
  605. height: 80
  606. - type: custom:mini-graph-card
  607. entities:
  608. - sensor.10_0_0_56_memory_usage
  609. show:
  610. name_adaptive_color: true
  611. icon_adaptive_color: true
  612. state_adaptive_color: true
  613. state: la
  614. labels: false
  615. name: Ubuntu Server Memory Usage
  616. hours_to_show: 1
  617. points_per_hour: 160
  618. height: 80
  619. color_thresholds:
  620. - value: 20
  621. color: '#00FF00'
  622. - value: 50
  623. color: '#FFFF00'
  624. - value: 70
  625. color: '#FF0000'
  626. show: null
  627. labels: false
  628. animate: true
  629. line_width: 2
  630. - type: custom:mini-graph-card
  631. entities:
  632. - sensor.10_0_0_56_containers_cpu_usage
  633. show:
  634. name_adaptive_color: true
  635. icon_adaptive_color: true
  636. state_adaptive_color: true
  637. state: last
  638. labels: false
  639. name: Container Usage
  640. hours_to_show: 1
  641. points_per_hour: 160
  642. color_thresholds:
  643. - value: 50
  644. color: '#00FF00'
  645. - value: 70
  646. color: '#FFFF00'
  647. - value: 90
  648. color: '#FF0000'
  649. animate: true
  650. height: 80
  651. line_width: 2
  652. - type: custom:mini-graph-card
  653. entities:
  654. - sensor.10_0_0_56_containers_memory_used
  655. show:
  656. name_adaptive_color: true
  657. icon_adaptive_color: true
  658. state_adaptive_color: true
  659. state: last
  660. labels: false
  661. name: Container Memory Usage
  662. hours_to_show: 1
  663. points_per_hour: 160
  664. color_thresholds:
  665. - value: 4000
  666. color: '#00FF00'
  667. - value: 5000
  668. color: '#FFFF00'
  669. - value: 6000
  670. color: '#FF0000'
  671. animate: true
  672. height: 80
  673. line_width: 2
  674. - type: custom:mini-graph-card
  675. entities:
  676. - sensor.firewall_system_temperature
  677. show:
  678. name_adaptive_color: true
  679. icon_adaptive_color: true
  680. state_adaptive_color: true
  681. state: last
  682. labels: false
  683. name: PFSense Firewall Temperature
  684. hours_to_show: 1
  685. points_per_hour: 200
  686. color_thresholds:
  687. - value: 50
  688. color: '#00FF00'
  689. - value: 60
  690. color: '#FFFF00'
  691. - value: 70
  692. color: '#FF0000'
  693. animate: true
  694. line_width: 2
  695. height: 80
  696. - type: grid
  697. cards:
  698. - type: custom:mini-graph-card
  699. entities:
  700. - sensor.pandora_amd_ryzen_7_7800x3d_load_cpu_total
  701. show:
  702. name_adaptive_color: true
  703. icon_adaptive_color: true
  704. state_adaptive_color: true
  705. state: la
  706. labels: false
  707. name: 7800X3D Usage
  708. hours_to_show: 1
  709. points_per_hour: 200
  710. color_thresholds:
  711. - value: 20
  712. color: '#00FF00'
  713. - value: 50
  714. color: '#FFFF00'
  715. - value: 70
  716. color: '#FF0000'
  717. animate: true
  718. line_width: 2
  719. height: 80
  720. - type: custom:mini-graph-card
  721. entities:
  722. - sensor.pandora_amd_ryzen_7_7800x3d_temperatures_cpu_package
  723. show:
  724. name_adaptive_color: true
  725. icon_adaptive_color: true
  726. state_adaptive_color: true
  727. state: la
  728. labels: false
  729. name: 7800X3D Temp
  730. hours_to_show: 1
  731. height: 80
  732. line_width: 2
  733. points_per_hour: 200
  734. color_thresholds:
  735. - value: 40
  736. color: '#00FF00'
  737. - value: 60
  738. color: '#FFFF00'
  739. - value: 70
  740. color: '#FF0000'
  741. animate: true
  742. - type: custom:mini-graph-card
  743. entities:
  744. - >-
  745. sensor.pandora_nvidia_nvidia_geforce_rtx_5080_temperatures_gpu_core
  746. show:
  747. name_adaptive_color: true
  748. icon_adaptive_color: true
  749. state_adaptive_color: true
  750. state: la
  751. labels: false
  752. name: RTX 5080 Temp
  753. hours_to_show: 1
  754. points_per_hour: 200
  755. color_thresholds:
  756. - value: 30
  757. color: '#00FF00'
  758. - value: 50
  759. color: '#FFFF00'
  760. - value: 70
  761. color: '#FF0000'
  762. animate: true
  763. line_width: 2
  764. height: 80
  765. - type: custom:mini-graph-card
  766. entities:
  767. - >-
  768. sensor.pandora_nvidia_nvidia_geforce_rtx_5080_data_gpu_memory_used
  769. show:
  770. name_adaptive_color: true
  771. icon_adaptive_color: true
  772. state_adaptive_color: true
  773. state: la
  774. labels: false
  775. name: RTX 5080 Memory Usage
  776. hours_to_show: 1
  777. points_per_hour: 200
  778. height: 80
  779. color_thresholds:
  780. - value: 5000
  781. color: '#00FF00'
  782. - value: 10000
  783. color: '#FFFF00'
  784. - value: 15000
  785. color: '#FF0000'
  786. animate: true
  787. line_width: 2
  788. - type: custom:mini-graph-card
  789. entities:
  790. - sensor.pandora_generic_memory_load_memory
  791. show:
  792. name_adaptive_color: true
  793. icon_adaptive_color: true
  794. state_adaptive_color: true
  795. labels: false
  796. state: la
  797. name: Gaming PC Memory Usage
  798. color_thresholds:
  799. - value: 30
  800. color: '#00FF00'
  801. - value: 50
  802. color: '#FFFF00'
  803. - value: 70
  804. color: '#FF0000'
  805. hours_to_show: 1
  806. points_per_hour: 200
  807. animate: true
  808. line_width: 2
  809. height: 80
  810. - type: custom:mini-graph-card
  811. entities:
  812. - sensor.10_0_0_56_enp2s0_rx
  813. show:
  814. name_adaptive_color: true
  815. icon_adaptive_color: true
  816. state_adaptive_color: true
  817. state: last
  818. labels: false
  819. name: Ubuntu Server Downloading
  820. hours_to_show: 1
  821. points_per_hour: 200
  822. color_thresholds:
  823. - value: 2000
  824. color: '#00FF00'
  825. - value: 4000
  826. color: '#FFFF00'
  827. - value: 6000
  828. color: '#FF0000'
  829. animate: true
  830. height: 80
  831. line_width: 2
  832. - type: vertical-stack
  833. cards:
  834. - type: custom:stack-in-card
  835. cards:
  836. - type: custom:navbar-card
  837. routes:
  838. - icon: mdi:power
  839. label: Restart
  840. tap_action:
  841. action: call-service
  842. service: homeassistant.restart
  843. confirmation:
  844. text: Are you sure you want to restart Home Assistant?
  845. - icon: mdi:reload
  846. label: Reload
  847. tap_action:
  848. action: call-service
  849. service: homeassistant.reload_all
  850. confirmation:
  851. text: Are you sure you want to reload Home Assistant?
  852. card_mod:
  853. style: |
  854. :host {
  855. position: fixed;
  856. top: 68%;
  857. right: 45px;
  858. transform: translateY(-50%);
  859. z-index: 99;
  860. }
  861. .navbar,
  862. .navbar-inner,
  863. .navbar-row,
  864. .navbar-container {
  865. display: flex !important;
  866. position: relative !important;
  867. flex-direction: column !important;
  868. align-items: center !important;
  869. gap: 1px !important;
  870. margin-top: 800px;
  871. width: 100%;
  872. }
  873. /* Targeting the ha-icon specifically */
  874. .route.selected ha-icon,
  875. .route.active ha-icon {
  876. color: blue !important; /* Force white color */
  877. filter: drop-shadow(0 0 6px blue) !important; /* Optional: Add white shadow */
  878. }
  879. .route ha-icon {
  880. color: white !important; /* Ensures icons not selected are also white */
  881. }
  882. - type: custom:mod-card
  883. style: |
  884. :host {
  885. position: fixed;
  886. top: 870px;
  887. right: 380px;
  888. z-index: 1000;
  889. }
  890. ha-card {
  891. display: flex;
  892. flex-direction: row-reverse;
  893. align-items: center;
  894. justify-content: space-between;
  895. padding: 5px;
  896. background-color: transparent !important;
  897. color: white;
  898. border-radius: 10px;
  899. box-shadow: none;
  900. transform: scale(0.5);
  901. transform-origin: top right;
  902. }
  903. card:
  904. type: horizontal-stack
  905. cards:
  906. - type: picture
  907. image: >-
  908. https://static-00.iconduck.com/assets.00/sabnzbd-text-icon-256x256-k89vgimn.png
  909. tap_action:
  910. action: url
  911. url_path: https://REDACTED
  912. card_mod:
  913. style: |
  914. img {
  915. opacity: 0.7 !important;
  916. transition: opacity 0.3s ease;
  917. }
  918. img:hover {
  919. opacity: 1 !important;
  920. }
  921. - type: grid
  922. cards:
  923. - type: custom:apexcharts-card
  924. header:
  925. title: Drive Usage
  926. show: true
  927. show_states: true
  928. colorize_states: true
  929. chart_type: radialBar
  930. apex_config:
  931. chart:
  932. height: 320
  933. legend:
  934. show: false
  935. plotOptions:
  936. radialBar:
  937. columns: 12
  938. rows: 12
  939. show: true
  940. showAlways: true
  941. series:
  942. - entity: sensor.10_0_0_56_etc_hosts_disk_usage
  943. name: Ubuntu OS
  944. - entity: sensor.10_0_0_56_disks_plex2_disk_usage
  945. name: Plex 20tb
  946. - entity: sensor.10_0_0_56_disks_plex2t_disk_usage
  947. name: Plex 20tb
  948. - entity: sensor.10_0_0_56_disks_plex3_disk_usage
  949. name: Plex 20tb
  950. - entity: sensor.10_0_0_27_disk_usage
  951. name: Laptop
  952. - type: custom:uptime-card
  953. entity: binary_sensor.docker
  954. title_template: Docker Uptime
  955. icon: mdi:web
  956. ko_icon: mdi:weather-sunny-off
  957. ko: below_horizon
  958. icon_adaptive_color: true
  959. title_adaptive_color: true
  960. color:
  961. ok: '#0db7ed'
  962. ko: '#053752'
  963. half: '#AAAF00'
  964. bar:
  965. spacing: 6
  966. height: 20
  967. round: 3
  968. show:
  969. average: true
  970. status: false
  971. alignment:
  972. status: spaced
  973. header: center
  974. icon_first: true
  975. tap_action:
  976. action: more-info
  977. duration:
  978. quantity: 1
  979. unit: hour
  980. card_mod:
  981. style: |
  982. ha-card {
  983. padding: 4px 8px !important;
  984. margin: 0 !important;
  985. }
  986. .header {
  987. padding: 0 6px !important;
  988. font-size: 12px !important;
  989. margin-bottom: 2px !important;
  990. }
  991. .bar {
  992. margin-bottom: 1px !important;
  993. }
  994. .footer, .average {
  995. font-size: 11px !important;
  996. color: rgba(25, 25, 25, 0.7) !important;
  997. }
  998. - type: custom:uptime-card
  999. entity: binary_sensor.100_100_100_100
  1000. title_template: Tailscale Uptime
  1001. icon: mdi:web
  1002. ko_icon: mdi:weather-sunny-off
  1003. ko: below_horizon
  1004. icon_adaptive_color: true
  1005. title_adaptive_color: true
  1006. color:
  1007. ok: '#1E1E1E'
  1008. ko: '#053752'
  1009. half: '#AAAF00'
  1010. bar:
  1011. spacing: 6
  1012. height: 20
  1013. round: 3
  1014. show:
  1015. average: true
  1016. status: false
  1017. alignment:
  1018. status: spaced
  1019. header: center
  1020. icon_first: true
  1021. tap_action:
  1022. action: more-info
  1023. duration:
  1024. quantity: 1
  1025. unit: hour
  1026. card_mod:
  1027. style: |
  1028. ha-card {
  1029. padding: 4px 8px !important;
  1030. margin: 0 !important;
  1031. }
  1032. .header {
  1033. padding: 0 6px !important;
  1034. font-size: 12px !important;
  1035. margin-bottom: 2px !important;
  1036. }
  1037. .bar {
  1038. margin-bottom: 1px !important;
  1039. }
  1040. .footer, .average {
  1041. font-size: 11px !important;
  1042. color: rgba(25, 25, 25, 0.7) !important;
  1043. }
  1044. - type: custom:uptime-card
  1045. entity: sensor.10_0_0_56_uptime
  1046. title_template: Ubuntu Server Uptime
  1047. icon: mdi:web
  1048. ko_icon: mdi:weather-sunny-off
  1049. ko: below_horizon
  1050. icon_adaptive_color: true
  1051. title_adaptive_color: true
  1052. color:
  1053. ok: '#e95420'
  1054. ko: '#053752'
  1055. half: '#AAAF00'
  1056. bar:
  1057. spacing: 6
  1058. height: 20
  1059. round: 2
  1060. show:
  1061. average: true
  1062. status: false
  1063. alignment:
  1064. status: spaced
  1065. header: center
  1066. icon_first: true
  1067. tap_action:
  1068. action: more-info
  1069. duration:
  1070. quantity: 1
  1071. unit: day
  1072. card_mod:
  1073. style: |
  1074. ha-card {
  1075. padding: 4px 8px !important;
  1076. margin: 0 !important;
  1077. }
  1078. .header {
  1079. padding: 0 6px !important;
  1080. font-size: 12px !important;
  1081. margin-bottom: 2px !important;
  1082. }
  1083. .bar {
  1084. margin-bottom: 1px !important;
  1085. }
  1086. .footer, .average {
  1087. font-size: 11px !important;
  1088. color: rgba(25, 25, 25, 0.7) !important;
  1089. }
  1090. - type: horizontal-stack
  1091. cards:
  1092. - type: custom:button-card
  1093. entity: sensor.REDACTED
  1094. unit_of_measurement: '%'
  1095. device_class: battery
  1096. icon: mdi:plex
  1097. name: REDACTED
  1098. styles:
  1099. card:
  1100. - height: 80px
  1101. icon:
  1102. - color: |
  1103. [[[
  1104. if (entity.state < 2) return '#f1941c';
  1105. if ((entity.state >= 2) && (entity.state < 80)) return 'orange'
  1106. if (entity.state >= 80) return 'lime';
  1107. ]]]
  1108. name:
  1109. - color: |
  1110. [[[
  1111. if (entity.state < 30) return '#f1941c';
  1112. if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
  1113. if (entity.state >= 80) return 'lime';
  1114. ]]]
  1115. state:
  1116. - color: |
  1117. [[[
  1118. if (entity.state < 30) return '#858179';
  1119. if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
  1120. if (entity.state >= 80) return 'lime';
  1121. ]]]
  1122. show_state: true
  1123. - type: custom:button-card
  1124. entity: sensor.REDACTED_library_movies
  1125. unit_of_measurement: items
  1126. device_class: battery
  1127. icon: mdi:movie
  1128. name: Movies
  1129. styles:
  1130. card:
  1131. - height: 80px
  1132. name:
  1133. - color: |
  1134. [[[
  1135. if (entity.state < 30) return 'red';
  1136. if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
  1137. if (entity.state >= 80) return 'lime';
  1138. ]]]
  1139. icon:
  1140. - color: |
  1141. [[[
  1142. if (entity.state < 30) return 'red';
  1143. if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
  1144. if (entity.state >= 80) return 'lime';
  1145. ]]]
  1146. state:
  1147. - color: |
  1148. [[[
  1149. if (entity.state > 30) return '#858179';
  1150. if ((entity.state < 30) && (entity.state < 80)) return 'orange'
  1151. if (entity.state >= 80) return 'lime';
  1152. ]]]
  1153. show_state: true
  1154. - type: custom:button-card
  1155. entity: sensor.REDACTED_library_tv_shows
  1156. unit_of_measurement: '%'
  1157. device_class: battery
  1158. icon: mdi:television
  1159. name: TV Shows
  1160. styles:
  1161. card:
  1162. - height: 80px
  1163. name:
  1164. - color: |
  1165. [[[
  1166. if (entity.state < 30) return 'red';
  1167. if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
  1168. if (entity.state >= 80) return '#05c5ff';
  1169. ]]]
  1170. icon:
  1171. - color: |
  1172. [[[
  1173. if (entity.state < 30) return 'red';
  1174. if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
  1175. if (entity.state >= 80) return '#05c5ff';
  1176. ]]]
  1177. state:
  1178. - color: |
  1179. [[[
  1180. if (entity.state > 30) return '#858179';
  1181. if ((entity.state < 30) && (entity.state < 80)) return 'orange'
  1182. if (entity.state >= 80) return 'lime';
  1183. ]]]
  1184. show_state: true
  1185. - type: custom:stack-in-card
  1186. cards:
  1187. - type: entities
  1188. show_header_toggle: false
  1189. entities:
  1190. ###REDACTED
  1191. name: Download Speed
  1192. - type: custom:mini-graph-card
  1193. name: WAN Inbound
  1194. entities:
  1195. - sensor.firewall_wan_in_mbps
  1196. hours_to_show: 1
  1197. points_per_hour: 100
  1198. height: 60
  1199. line_width: 2
  1200. animate: true
  1201. show:
  1202. state: last
  1203. labels: false
  1204. name_adaptive_color: true
  1205. icon_adaptive_color: true
  1206. state_adaptive_color: true
  1207. color_thresholds:
  1208. - value: 2000
  1209. color: '#00FF00'
  1210. - value: 4000
  1211. color: '#FFFF00'
  1212. - value: 6000
  1213. color: '#FF0000'
  1214. background:
  1215. opacity: 83
  1216. alignment: center
  1217. size: cover
  1218. repeat: repeat
  1219. attachment: scroll
  1220. badges: []
  1221. - type: sections
  1222. max_columns: 4
  1223. icon: mdi:remote
  1224. path: ''
  1225. sections:
  1226. - type: grid
  1227. cards:
  1228. - type: custom:android-tv-card
  1229. remote_id: remote.shield
  1230. rows:
  1231. - - power
  1232. - home
  1233. - appletv
  1234. - plex
  1235. - - touchpad
  1236. - - volume
  1237. - - back
  1238. - rewind
  1239. - play_pause
  1240. - fast_forward
  1241. - volume_mute
  1242. custom_actions:
  1243. - type: slider
  1244. name: volume
  1245. entity: media_player.q_series_soundbar_2
  1246. value_attribute: volume_level
  1247. range:
  1248. - 0
  1249. - 0.3
  1250. step: 0.01
  1251. tap_action:
  1252. action: call-service
  1253. service: media_player.volume_set
  1254. data:
  1255. volume_level: '{{ value | round(2) }}'
  1256. target:
  1257. entity_id: media_player.q_series_soundbar_2
  1258. styles: |-
  1259. :host {
  1260. height: 40px;
  1261. --background-height: 5px;
  1262. --background: rgba(0, 0, 0, 0.4);
  1263. --color: rgba(255, 255, 255, 1);
  1264. --thumb-size: 18px;
  1265. --thumb-color: #ff9f09;
  1266. --thumb-border-radius: 50%;
  1267. --tooltip-display: block;
  1268. --tooltip-label: "{{ [((value / 0.3) * 30), 30] | min | round(0) }}/30";
  1269. }
  1270. - type: touchpad
  1271. name: touchpad
  1272. tap_action:
  1273. action: key
  1274. key: DPAD_CENTER
  1275. up:
  1276. tap_action:
  1277. action: key
  1278. key: DPAD_UP
  1279. hold_action:
  1280. action: repeat
  1281. down:
  1282. tap_action:
  1283. action: key
  1284. key: DPAD_DOWN
  1285. hold_action:
  1286. action: repeat
  1287. left:
  1288. tap_action:
  1289. action: key
  1290. key: DPAD_LEFT
  1291. hold_action:
  1292. action: repeat
  1293. right:
  1294. tap_action:
  1295. action: key
  1296. key: DPAD_RIGHT
  1297. hold_action:
  1298. action: repeat
  1299. icon: mdi:gesture-tap
  1300. styles: ':host { background: transparent; }'
  1301. haptics: true
  1302. value_attribute: state
  1303. grid_options:
  1304. columns: full
  1305. rows: null
  1306. hold_time: 100
  1307. media_player_id: media_player.q_series_soundbar_2
  1308. - type: custom:android-tv-card
  1309. rows:
  1310. - - dpad
  1311. custom_actions:
  1312. - type: button
  1313. name: center
  1314. tap_action:
  1315. action: key
  1316. key: DPAD_CENTER
  1317. icon: ''
  1318. styles: |-
  1319. :host {
  1320. border-radius: 50%;
  1321. z-index: 2;
  1322. pointer-events: none;
  1323. width: 200px;
  1324. height: 200px;
  1325. top: -75px;
  1326. left: -75px;
  1327. opacity: .15
  1328. }
  1329. button {
  1330. height: 80%;
  1331. width: 80%;
  1332. border-radius: 50%;
  1333. background: rgb(105, 105, 105);
  1334. pointer-events: all;
  1335. }
  1336. - type: button
  1337. name: up
  1338. tap_action:
  1339. action: key
  1340. key: DPAD_UP
  1341. hold_action:
  1342. action: repeat
  1343. icon: mdi:chevron-up
  1344. styles: |-
  1345. button {
  1346. top: 10%;
  1347. left: 10%;
  1348. border-radius: 0;
  1349. }
  1350. .icon {
  1351. transform: rotate(-45deg);
  1352. color: rgb(197, 199, 197);
  1353. }
  1354. - type: button
  1355. name: down
  1356. tap_action:
  1357. action: key
  1358. key: DPAD_DOWN
  1359. hold_action:
  1360. action: repeat
  1361. icon: mdi:chevron-down
  1362. styles: |-
  1363. button {
  1364. bottom: 10%;
  1365. right: 10%;
  1366. border-radius: 0;
  1367. }
  1368. .icon {
  1369. transform: rotate(-45deg);
  1370. color: rgb(197, 199, 197);
  1371. }
  1372. - type: button
  1373. name: left
  1374. tap_action:
  1375. action: key
  1376. key: DPAD_LEFT
  1377. hold_action:
  1378. action: repeat
  1379. icon: mdi:chevron-left
  1380. styles: |-
  1381. button {
  1382. bottom: 10%;
  1383. left: 10%;
  1384. border-radius: 0;
  1385. }
  1386. .icon {
  1387. transform: rotate(-45deg);
  1388. color: rgb(197, 199, 197);
  1389. }
  1390. - type: button
  1391. name: right
  1392. tap_action:
  1393. action: key
  1394. key: DPAD_RIGHT
  1395. hold_action:
  1396. action: repeat
  1397. icon: mdi:chevron-right
  1398. styles: |-
  1399. button {
  1400. top: 10%;
  1401. right: 10%;
  1402. border-radius: 0;
  1403. }
  1404. .icon {
  1405. transform: rotate(-45deg);
  1406. color: rgb(197, 199, 197);
  1407. }
  1408. styles: |-
  1409. .button-pad {
  1410. gap: 98px;
  1411. border-radius: 50%;
  1412. overflow: hidden;
  1413. background: rgb(, , );
  1414. opacity:
  1415. }
  1416. .button-pad .empty-button {
  1417. width: 0;
  1418. height: 0;
  1419. }
  1420. .button-pad remote-button {
  1421. top: -125%;
  1422. left: -125%;
  1423. width: 170px;
  1424. height: 170px;
  1425. transform: rotate(45deg);
  1426. z-index: 1;
  1427.  
  1428. }
  1429. #row-1 {
  1430. width: fit-content;
  1431. }
  1432. custom_icons: []
  1433. remote_id: remote.shield
  1434. media_player_id: media_player.q_series_soundbar
  1435. keyboard_id: media_player.shield_2
  1436. grid_options:
  1437. columns: full
  1438. - type: vertical-stack
  1439. cards:
  1440. - type: custom:stack-in-card
  1441. cards:
  1442. - type: custom:navbar-card
  1443. routes:
  1444. - url: /dashboard-dashboard/0
  1445. icon: mdi:home
  1446. label: Home
  1447. - url: /profile/general
  1448. icon: mdi:information-variant-circle-outline
  1449. label: Devices
  1450. hold_action:
  1451. action: navigate
  1452. navigation_path: /config/devices/dashboard
  1453. - url: /config/integrations/dashboard
  1454. icon: mdi:devices
  1455. label: Automations
  1456. - url: /config/dashboard
  1457. icon: mdi:cog
  1458. label: Settings
  1459. - url: /hacs/dashboard
  1460. icon: mdi:home-assistant
  1461. label: Settings
  1462. - icon: mdi:power
  1463. label: Restart
  1464. tap_action:
  1465. action: call-service
  1466. service: homeassistant.restart
  1467. confirmation:
  1468. text: Are you sure you want to restart Home Assistant?
  1469. - icon: mdi:reload
  1470. label: Reload
  1471. tap_action:
  1472. action: call-service
  1473. service: homeassistant.reload_all
  1474. confirmation:
  1475. text: Are you sure you want to reload Home Assistant?
  1476. card_mod:
  1477. style: |
  1478. :host {
  1479. position: fixed;
  1480. top: 50%;
  1481. right: 40px;
  1482. transform: translateY(-50%);
  1483. z-index: 99;
  1484. }
  1485. .navbar,
  1486. .navbar-inner,
  1487. .navbar-row,
  1488. .navbar-container {
  1489. display: flex !important;
  1490. position: relative !important;
  1491. flex-direction: column !important;
  1492. align-items: center !important;
  1493. gap: 10px !important;
  1494. margin-top: 800px;
  1495. width: 100%;
  1496. }
  1497. /* Targeting the ha-icon specifically */
  1498. .route.selected ha-icon,
  1499. .route.active ha-icon {
  1500. color: blue !important; /* Force white color */
  1501. filter: drop-shadow(0 0 6px blue) !important; /* Optional: Add white shadow */
  1502. }
  1503. .route ha-icon {
  1504. color: white !important; /* Ensures icons not selected are also white */
  1505. }
  1506. - type: grid
  1507. cards: []
  1508. - type: sections
  1509. max_columns: 4
  1510. icon: mdi:lightbulb-group
  1511. path: ''
  1512. sections:
  1513. - type: grid
  1514. cards:
  1515. - type: vertical-stack
  1516. cards:
  1517. - type: custom:bubble-card
  1518. card_type: button
  1519. button_type: slider
  1520. entity: light.game_room_lamp
  1521. - type: custom:bubble-card
  1522. card_type: button
  1523. button_type: slider
  1524. entity: light.game_room_bathroom
  1525. name: Game Room Bathroom
  1526. - type: custom:bubble-card
  1527. card_type: button
  1528. button_type: slider
  1529. entity: light.game_room_3
  1530. - type: custom:bubble-card
  1531. card_type: button
  1532. button_type: slider
  1533. entity: light.top_left
  1534. name: Top Left
  1535. - type: custom:bubble-card
  1536. card_type: button
  1537. button_type: slider
  1538. entity: light.bottom_left
  1539. name: Bottom Left
  1540. - type: custom:bubble-card
  1541. card_type: button
  1542. button_type: slider
  1543. entity: light.top_right
  1544. name: Top Right
  1545. - type: custom:bubble-card
  1546. card_type: button
  1547. button_type: slider
  1548. entity: light.bottom_right
  1549. name: Bottom Right
  1550. card_mod:
  1551. style:
  1552. .: |
  1553. ha-card {
  1554. background: rgba(0, 0, 0, 0) !important;
  1555. box-shadow: none !important;
  1556. }
  1557. - type: vertical-stack
  1558. cards:
  1559. - type: custom:button-card
  1560. entity: input_boolean.game_room_3_color_picker
  1561. name: Show Color Picker
  1562. tap_action:
  1563. action: toggle
  1564. show_icon: false
  1565. styles:
  1566. card:
  1567. - padding: 6px
  1568. - height: 70px
  1569. - font-size: 30px
  1570. - border-radius: 112px
  1571. - background-color: rgba(25, 25, 25, 0.3)
  1572. - display: flex
  1573. - align-items: center
  1574. - justify-content: center
  1575. name:
  1576. - background: >-
  1577. linear-gradient(90deg, rgba(173,216,230,0.8),
  1578. rgba(0,191,255,0.8), rgba(173,216,230, 0.8))
  1579. - '-webkit-background-clip': text
  1580. - '-webkit-text-fill-color': transparent
  1581. - font-style: italic
  1582. - font-weight: bold
  1583. - text-align: center
  1584. - justify-self: center
  1585. card_mod:
  1586. style: |
  1587. ha-select.mdc-select--filled .mdc-select__anchor,
  1588. mwc-select.mdc-select--filled .mdc-select__anchor {
  1589. background: transparent !important;
  1590. background-image: none !important;
  1591. box-shadow: none !important;
  1592. outline: none !important;
  1593. }
  1594. ha-select .mdc-floating-label,
  1595. mwc-select .mdc-floating-label {
  1596. color: var(--primary-text-color) !important;
  1597. z-index: 1;
  1598. }
  1599. mwc-menu.mdc-menu-surface {
  1600. background: rgba(20,20,20,0.2) !important;
  1601. }
  1602. - type: conditional
  1603. conditions:
  1604. - condition: state
  1605. entity: input_boolean.game_room_3_color_picker
  1606. state: 'on'
  1607. card:
  1608. type: custom:light-entity-card
  1609. entity: light.game_room_3
  1610. color_picker: true
  1611. persist_features: true
  1612. brightness: true
  1613. color_temp: true
  1614. white_value: true
  1615. full_width_sliders: true
  1616. show_slider_percent: true
  1617. - type: grid
  1618. cards:
  1619. - type: vertical-stack
  1620. cards:
  1621. - type: custom:bubble-card
  1622. card_type: button
  1623. button_type: slider
  1624. entity: light.left_side_nightstand
  1625. - type: custom:bubble-card
  1626. card_type: button
  1627. button_type: slider
  1628. entity: light.right_side_nightstand
  1629. name: Right side Nightstand
  1630. - type: light
  1631. entity: light.rgbic_tv_backlight
  1632. icon: mdi:television-ambient-light
  1633. - type: vertical-stack
  1634. cards:
  1635. - type: custom:stack-in-card
  1636. cards:
  1637. - type: custom:navbar-card
  1638. routes:
  1639. - url: /dashboard-dashboard/0
  1640. icon: mdi:home
  1641. label: Home
  1642. - url: /profile/general
  1643. icon: mdi:information-variant-circle-outline
  1644. label: Devices
  1645. hold_action:
  1646. action: navigate
  1647. navigation_path: /config/devices/dashboard
  1648. - url: /config/integrations/dashboard
  1649. icon: mdi:devices
  1650. label: Automations
  1651. - url: /config/dashboard
  1652. icon: mdi:cog
  1653. label: Settings
  1654. - url: /hacs/dashboard
  1655. icon: mdi:home-assistant
  1656. label: Settings
  1657. - icon: mdi:power
  1658. label: Restart
  1659. tap_action:
  1660. action: call-service
  1661. service: homeassistant.restart
  1662. confirmation:
  1663. text: Are you sure you want to restart Home Assistant?
  1664. - icon: mdi:reload
  1665. label: Reload
  1666. tap_action:
  1667. action: call-service
  1668. service: homeassistant.reload_all
  1669. confirmation:
  1670. text: Are you sure you want to reload Home Assistant?
  1671. card_mod:
  1672. style: |
  1673. :host {
  1674. position: fixed;
  1675. top: 50%;
  1676. right: 40px;
  1677. transform: translateY(-50%);
  1678. z-index: 99;
  1679. }
  1680. .navbar,
  1681. .navbar-inner,
  1682. .navbar-row,
  1683. .navbar-container {
  1684. display: flex !important;
  1685. position: relative !important;
  1686. flex-direction: column !important;
  1687. align-items: center !important;
  1688. gap: 10px !important;
  1689. margin-top: 800px;
  1690. width: 100%;
  1691. }
  1692. /* Targeting the ha-icon specifically */
  1693. .route.selected ha-icon,
  1694. .route.active ha-icon {
  1695. color: blue !important; /* Force white color */
  1696. filter: drop-shadow(0 0 6px blue) !important; /* Optional: Add white shadow */
  1697. }
  1698. .route ha-icon {
  1699. color: white !important; /* Ensures icons not selected are also white */
  1700. }
  1701. - type: grid
  1702. cards: []
  1703. - type: sections
  1704. icon: mdi:cctv
  1705. cards: []
  1706. max_columns: 4
  1707. subview: true
  1708. top_margin: false
  1709. dense_section_placement: false
  1710. sections:
  1711. - type: grid
  1712. cards:
  1713. - type: heading
  1714. heading: New section
  1715. - type: vertical-stack
  1716. cards:
  1717. - type: custom:advanced-camera-card
  1718. cameras:
  1719. - camera_entity: camera.front_door_live_view
  1720. - camera_entity: camera.living_room_live_view
  1721. - type: sections
  1722. max_columns: 4
  1723. icon: mdi:robot-vacuum
  1724. path: ''
  1725. sections:
  1726. - type: grid
  1727. cards:
  1728. - type: custom:mushroom-vacuum-card
  1729. entity: vacuum.roborock_q5_max
  1730. icon: mdi:vacuum
  1731. commands:
  1732. - on_off
  1733. - start_pause
  1734. - stop
  1735. - locate
  1736. - clean_spot
  1737. - return_home
  1738. fill_container: true
  1739. icon_animation: true
  1740. grid_options:
  1741. columns: 12
  1742. rows: 2
  1743. - type: entities
  1744. entities:
  1745. - fan.air_circulator
  1746. - entity: number.air_circulator_horizontal_angle
  1747. name: Horizontal Angle
  1748. - entity: number.air_circulator_horizontal_oscillation_angle_left
  1749. name: Horizontal Oscillation Angle Left
  1750. - entity: number.air_circulator_horizontal_oscillation_angle_right
  1751. name: Horizontal Oscillation Angle Right
  1752. - entity: switch.air_circulator_horizontally_oscillating
  1753. name: Horizontally Oscillating
  1754. - entity: switch.air_circulator_panel_sound
  1755. name: Panel Sound
  1756. - entity: number.air_circulator_vertical_angle
  1757. name: Vertical Angle
  1758. - entity: number.air_circulator_vertical_oscillation_angle_bottom
  1759. name: Vertical Oscillation Angle Bottom
  1760. - entity: number.air_circulator_vertical_oscillation_angle_top
  1761. name: Vertical Oscillation Angle Top
  1762. - entity: switch.air_circulator_vertically_oscillating
  1763. name: Vertically Oscillating
  1764. title: Air Circulator
  1765. - type: tile
  1766. entity: fan.winix_living_room
  1767. name: Winix Air Purifier
  1768. grid_options:
  1769. columns: 12
  1770. rows: 1
  1771. show_entity_picture: false
  1772. features:
  1773. - type: fan-speed
  1774. style: dropdown
  1775. - type: fan-preset-modes
  1776. - type: vertical-stack
  1777. cards:
  1778. - type: custom:stack-in-card
  1779. cards:
  1780. - type: custom:navbar-card
  1781. routes:
  1782. - url: /dashboard-dashboard/0
  1783. icon: mdi:home
  1784. label: Home
  1785. - url: /profile/general
  1786. icon: mdi:information-variant-circle-outline
  1787. label: Devices
  1788. hold_action:
  1789. action: navigate
  1790. navigation_path: /config/devices/dashboard
  1791. - url: /config/integrations/dashboard
  1792. icon: mdi:devices
  1793. label: Automations
  1794. - url: /config/dashboard
  1795. icon: mdi:cog
  1796. label: Settings
  1797. - url: /hacs/dashboard
  1798. icon: mdi:home-assistant
  1799. label: Settings
  1800. - icon: mdi:power
  1801. label: Restart
  1802. tap_action:
  1803. action: call-service
  1804. service: homeassistant.restart
  1805. confirmation:
  1806. text: Are you sure you want to restart Home Assistant?
  1807. - icon: mdi:reload
  1808. label: Reload
  1809. tap_action:
  1810. action: call-service
  1811. service: homeassistant.reload_all
  1812. confirmation:
  1813. text: Are you sure you want to reload Home Assistant?
  1814. card_mod:
  1815. style: |
  1816. :host {
  1817. position: fixed;
  1818. top: 50%;
  1819. right: 40px;
  1820. transform: translateY(-50%);
  1821. z-index: 99;
  1822. }
  1823. .navbar,
  1824. .navbar-inner,
  1825. .navbar-row,
  1826. .navbar-container {
  1827. display: flex !important;
  1828. position: relative !important;
  1829. flex-direction: column !important;
  1830. align-items: center !important;
  1831. gap: 10px !important;
  1832. margin-top: 800px;
  1833. width: 100%;
  1834. }
  1835. /* Targeting the ha-icon specifically */
  1836. .route.selected ha-icon,
  1837. .route.active ha-icon {
  1838. color: blue !important; /* Force white color */
  1839. filter: drop-shadow(0 0 6px blue) !important; /* Optional: Add white shadow */
  1840. }
  1841. .route ha-icon {
  1842. color: white !important; /* Ensures icons not selected are also white */
  1843. }
  1844. - type: panel
  1845. path: ''
  1846. icon: mdi:bell-badge-outline
  1847. cards:
  1848. - type: custom:notify-card
  1849. label: Message
  1850. card_title: Send notification to all users
  1851. notification_title:
  1852. input: Title
  1853. action: notify.notify
  1854. data:
  1855. message: $MSG
  1856. title: $TITLE
  1857. styles:
  1858. card:
  1859. - padding: 10px
  1860. - border-radius: 12px
  1861. - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)
  1862. .card-header:
  1863. - background: >-
  1864. linear-gradient(135deg, rgba(0, 191, 255, 1), rgba(173, 216,
  1865. 230, 1))
  1866. - color: white
  1867. - font-weight: bold
  1868. - font-size: 20px
  1869. - padding: 10px
  1870. - border-radius: 8px
  1871. - text-align: center
  1872. - type: sections
  1873. max_columns: 4
  1874. icon: mdi:home-heart
  1875. path: ''
  1876. sections:
  1877. - type: grid
  1878. cards:
  1879. - type: custom:mini-graph-card
  1880. name: Oura Heart Rate (Today)
  1881. icon: mdi:heart-pulse
  1882. entities:
  1883. - entity: sensor.oura_heart_rate_latest_0d_ago
  1884. name: BPM
  1885. show:
  1886. graph: line
  1887. points: true
  1888. extrema: true
  1889. average: true
  1890. labels: false
  1891. legend: true
  1892. name_adaptive_color: true
  1893. icon_adaptive_color: true
  1894. state_adaptive_color: true
  1895. hours_to_show: 12
  1896. points_per_hour: 2.5
  1897. line_width: 4
  1898. color_thresholds:
  1899. - value: 80
  1900. color: '#5CADFF'
  1901. - value: 120
  1902. color: '#FF9F43'
  1903. - value: 160
  1904. color: '#FF5252'
  1905. animate: true
  1906. align_state: center
  1907. align_header: center
  1908. card_mod:
  1909. style: |
  1910. ha-icon {
  1911. color: lightblue;
  1912. }
  1913. - type: custom:mini-graph-card
  1914. entities:
  1915. - entity: sensor.total_sleep_0d_ago
  1916. show_state: true
  1917. name: Total Sleep
  1918. color: '#744275'
  1919. fill: false
  1920. - entity: sensor.deep_sleep_0d_ago
  1921. name: Deep Sleep
  1922. color: '#fff0a3'
  1923. fill: false
  1924. - entity: sensor.light_sleep_0d_ago
  1925. name: Light Sleep
  1926. color: '#754242'
  1927. fill: false
  1928. - entity: sensor.rem_sleep_0d_ago
  1929. name: REM Sleep
  1930. color: '#ffa3bf'
  1931. fill: false
  1932. - entity: sensor.time_in_bed_0d_ago
  1933. name: Time In Bed
  1934. color: '#6794db'
  1935. fill: false
  1936. name: Weekly Sleep Summary
  1937. hours_to_show: 168
  1938. points_per_hour: 6
  1939. group_by: date
  1940. height: 150
  1941. align_state: center
  1942. font_size_header: 20
  1943. line_width: 3
  1944. animate: true
  1945. show:
  1946. fill: false
  1947. state: last
  1948. name_adaptive_color: true
  1949. state_adaptive_color: true
  1950. icon_adaptive_color: true
  1951. legend: true
  1952. extrema: true
  1953. labels_secondary: true
  1954. labels: false
  1955. align_header: center
  1956. - type: custom:mini-graph-card
  1957. name: Oura Calories Burned (Today)
  1958. icon: mdi:fire
  1959. entities:
  1960. - entity: sensor.oura_activity_total_calories
  1961. name: Calories
  1962. color: lightblue
  1963. show:
  1964. graph: line
  1965. points: true
  1966. extrema: true
  1967. average: true
  1968. labels: false
  1969. legend: true
  1970. name: true
  1971. icon: true
  1972. name_adaptive_color: true
  1973. icon_adaptive_color: true
  1974. state_adaptive_color: true
  1975. colorize: true
  1976. hours_to_show: 24
  1977. points_per_hour: 0.5
  1978. line_width: 4
  1979. animate: true
  1980. align_state: center
  1981. align_header: center
  1982. - type: custom:mini-graph-card
  1983. name: Daily Steps
  1984. icon: mdi:stairs-up
  1985. entities:
  1986. - entity: sensor.myphone_steps
  1987. name: Steps
  1988. show:
  1989. graph: bar
  1990. points: true
  1991. extrema: true
  1992. average: true
  1993. labels: false
  1994. legend: true
  1995. name_adaptive_color: true
  1996. icon_adaptive_color: true
  1997. state_adaptive_color: true
  1998. icon: true
  1999. hours_to_show: 12
  2000. points_per_hour: 2
  2001. color_thresholds:
  2002. - value: 5000
  2003. color: '#5CADFF'
  2004. - value: 10000
  2005. color: '#FF9F43'
  2006. - value: 15000
  2007. color: '#FF5252'
  2008. animate: true
  2009. align_state: center
  2010. align_header: center
  2011. style: |
  2012. ha-icon {
  2013. width: 40px;
  2014. height: 40px;
  2015. }
  2016. - type: custom:mini-graph-card
  2017. name: Total Sleep (Last Week)
  2018. icon: mdi:sleep
  2019. entities:
  2020. - entity: sensor.total_sleep_0d_ago
  2021. name: Sleep Duration
  2022. show:
  2023. graph: bar
  2024. points: false
  2025. extrema: true
  2026. average: false
  2027. labels: null
  2028. legend: true
  2029. name_adaptive_color: true
  2030. icon_adaptive_color: true
  2031. state_adaptive_color: true
  2032. hours_to_show: 168
  2033. points_per_hour: 0.04
  2034. color_thresholds:
  2035. - value: 4
  2036. color: '#7d2231'
  2037. - value: 6
  2038. color: '#9b76c2'
  2039. - value: 10
  2040. color: '#FF5252'
  2041. animate: true
  2042. align_state: center
  2043. align_header: center
  2044. - type: custom:mini-graph-card
  2045. name: Temperature Comparison
  2046. icon: mdi:thermometer
  2047. entities:
  2048. - entity: sensor.air_circulator_temperature
  2049. name: Indoor Temp
  2050. color: '#FF9F99'
  2051. show_state: true
  2052. - entity: sensor.REDACTED_temperature
  2053. name: Outdoor Temp
  2054. color: '#5CAA42'
  2055. show_state: true
  2056. show:
  2057. graph: graph
  2058. points: false
  2059. extrema: true
  2060. average: true
  2061. labels: false
  2062. legend: true
  2063. smoothing: true
  2064. name_adaptive_color: true
  2065. icon_adaptive_color: true
  2066. state_adaptive_color: true
  2067. icon: true
  2068. hours_to_show: 168
  2069. points_per_hour: 1
  2070. animate: true
  2071. align_state: center
  2072. line_width: 3
  2073. height: 150
  2074. state_adaptive_color: true
  2075. align_header: center
  2076. color_thresholds:
  2077. - value: 0
  2078. color: '#4CAF50'
  2079. - value: 20
  2080. color: '#FFEB3B'
  2081. - value: 30
  2082. color: '#FF9800'
  2083. - value: 40
  2084. color: '#F44336'
  2085. - type: vertical-stack
  2086. cards:
  2087. - type: custom:stack-in-card
  2088. cards:
  2089. - type: custom:navbar-card
  2090. routes:
  2091. - url: /dashboard-dashboard/0
  2092. icon: mdi:home
  2093. label: Home
  2094. - url: /profile/general
  2095. icon: mdi:information-variant-circle-outline
  2096. label: Devices
  2097. hold_action:
  2098. action: navigate
  2099. navigation_path: /config/devices/dashboard
  2100. - url: /config/integrations/dashboard
  2101. icon: mdi:devices
  2102. label: Automations
  2103. - url: /config/dashboard
  2104. icon: mdi:cog
  2105. label: Settings
  2106. - url: /hacs/dashboard
  2107. icon: mdi:home-assistant
  2108. label: Settings
  2109. - icon: mdi:power
  2110. label: Restart
  2111. tap_action:
  2112. action: call-service
  2113. service: homeassistant.restart
  2114. confirmation:
  2115. text: Are you sure you want to restart Home Assistant?
  2116. - icon: mdi:reload
  2117. label: Reload
  2118. tap_action:
  2119. action: call-service
  2120. service: homeassistant.reload_all
  2121. confirmation:
  2122. text: Are you sure you want to reload Home Assistant?
  2123. card_mod:
  2124. style: |
  2125. :host {
  2126. position: fixed;
  2127. top: 50%;
  2128. right: 40px;
  2129. transform: translateY(-50%);
  2130. z-index: 99;
  2131. }
  2132. .navbar,
  2133. .navbar-inner,
  2134. .navbar-row,
  2135. .navbar-container {
  2136. display: flex !important;
  2137. position: relative !important;
  2138. flex-direction: column !important;
  2139. align-items: center !important;
  2140. gap: 10px !important;
  2141. margin-top: 800px;
  2142. width: 100%;
  2143. }
  2144. /* Targeting the ha-icon specifically */
  2145. .route.selected ha-icon,
  2146. .route.active ha-icon {
  2147. color: blue !important; /* Force white color */
  2148. filter: drop-shadow(0 0 6px blue) !important; /* Optional: Add white shadow */
  2149. }
  2150. .route ha-icon {
  2151. color: white !important; /* Ensures icons not selected are also white */
  2152. }
  2153. - type: sidebar
  2154. path: ''
  2155. icon: mdi:download-multiple
  2156. cards:
  2157. - type: iframe
  2158. url: REDACTED
  2159. aspect_ratio: 50%
  2160. card_mod:
  2161. style: |
  2162. ha-card {
  2163. height: 2000px !important;
  2164. max-width: 768px;
  2165. margin: 0 auto;
  2166. }
  2167. - type: sections
  2168. max_columns: 4
  2169. icon: mdi:test-tube
  2170. path: ''
  2171. sections:
  2172. - type: grid
  2173. cards:
  2174. - type: custom:mod-card
  2175. style: |
  2176. ha-card {
  2177. position: fixed;
  2178. top: 20%;
  2179. right: 1%;
  2180. width: 5%;
  2181. z-index: 1000;
  2182. background: transparent;
  2183. box-shadow: none;
  2184. border: none;
  2185. }
  2186. card:
  2187. type: vertical-stack
  2188. cards:
  2189. - type: custom:button-card
  2190. template: navbar
  2191. entity: sensor.speedtest_ping
  2192. name: Ping
  2193. icon: mdi:speedometer
  2194. show_state: true
  2195. state_display: |
  2196. [[[ return (entity.state * 1).toFixed(0) + ' ms'; ]]]
  2197. styles:
  2198. icon:
  2199. - width: 40px
  2200. - height: 40px
  2201. - background-image: >-
  2202. url("https://images.vexels.com/media/users/3/199980/isolated/preview/4c910ee68a0f4fe8029f72e40bc10fe6-internet-browsing-icon-stroke-pink.png")
  2203. - background-size: contain
  2204. - background-repeat: no-repeat
  2205. - background-position: center
  2206. - color: transparent
  2207. card:
  2208. - border-radius: 15px
  2209. - padding: 10px
  2210. - margin-bottom: 10px
  2211. - background: rgba(0, 0, 0, 0.4)
  2212. - type: custom:button-card
  2213. template: navbar
  2214. entity: sensor.firewall_gateway_proton_status
  2215. name: Proton GW
  2216. icon: mdi:shield-home
  2217. styles:
  2218. icon:
  2219. - width: 40px
  2220. - height: 40px
  2221. - background-image: url("/local/community/proton-vpn-seeklogo.png")
  2222. - background-size: contain
  2223. - background-repeat: no-repeat
  2224. - background-position: center
  2225. - color: transparent
  2226. card:
  2227. - border-radius: 15px
  2228. - padding: 10px
  2229. - margin-bottom: 10px
  2230. - background: rgba(0, 0, 0, 0.4)
  2231. - type: custom:button-card
  2232. template: navbar
  2233. entity: sensor.speedtest_download
  2234. name: Download
  2235. icon: mdi:download
  2236. styles:
  2237. icon:
  2238. - width: 40px
  2239. - height: 40px
  2240. - background-image: >-
  2241. url("https://cdn-icons-png.flaticon.com/512/4225/4225688.png")
  2242. - background-size: contain
  2243. - background-repeat: no-repeat
  2244. - background-position: center
  2245. - color: transparent
  2246. card:
  2247. - border-radius: 15px
  2248. - padding: 10px
  2249. - margin-bottom: 10px
  2250. - background: rgba(0, 0, 0, 0.4)
  2251. - type: custom:button-card
  2252. template: navbar
  2253. entity: sensor.speedtest_upload
  2254. name: Upload
  2255. icon: mdi:upload
  2256. styles:
  2257. icon:
  2258. - width: 40px
  2259. - height: 40px
  2260. - background-image: >-
  2261. url("https://media.lordicon.com/icons/wired/gradient/2-cloud-upload.svg")
  2262. - background-size: contain
  2263. - background-repeat: no-repeat
  2264. - background-position: center
  2265. - color: transparent
  2266. card:
  2267. - border-radius: 15px
  2268. - padding: 10px
  2269. - margin-bottom: 10px
  2270. - background: rgba(0, 0, 0, 0.5)
  2271. - type: custom:button-card
  2272. template: navbar
  2273. entity: sensor.overseerr_pending_requests_2
  2274. name: Overseerr
  2275. icon: mdi:movie-star
  2276. show_state: true
  2277. state_display: |
  2278. [[[ return entity.state; ]]]
  2279. styles:
  2280. icon:
  2281. - width: 40px
  2282. - height: 40px
  2283. - background-image: >-
  2284. url("https://coolify.io/docs/images/services/overseerr.svg")
  2285. - background-size: contain
  2286. - background-repeat: no-repeat
  2287. - background-position: center
  2288. - color: transparent
  2289. card:
  2290. - border-radius: 15px
  2291. - padding: 10px
  2292. - margin-bottom: 10px
  2293. state:
  2294. - value: 0
  2295. styles:
  2296. card: null
  2297. - operator: '!='
  2298. value: 0
  2299. styles:
  2300. card: null
  2301. - type: custom:button-card
  2302. template: navbar
  2303. entity: binary_sensor.firewall_pending_notices_present
  2304. name: Firewall
  2305. icon: mdi:shield-check
  2306. styles:
  2307. icon:
  2308. - width: 40px
  2309. - height: 40px
  2310. - background-image: url("")
  2311. - background-size: contain
  2312. - background-repeat: no-repeat
  2313. - background-position: center
  2314. - color: green
  2315. card:
  2316. - border-radius: 15px
  2317. - padding: 10px
  2318. - margin-bottom: 10px
  2319. - background: rgba(0, 0, 0, 0.4)
  2320. state:
  2321. - value: 'off'
  2322. styles:
  2323. icon:
  2324. - color: green
  2325. - operator: '!='
  2326. value: 'off'
  2327. styles:
  2328. icon:
  2329. - color: red
  2330.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!