HA-AppleTV-Remote-Card/remote-card.yaml

type: picture-elements
image: https://github.com/HenrySeed/HA-AppleTV-Remote-Card/blob/main/apple-tv-remote_PLUS_MINUS_notRounded.png?raw=true

elements:
    # Exit =================================
    - type: icon
      icon: none
      tap_action:
          action: navigate
          navigation_path: home
      style:
          top: 6%
          left: 14%
          transform: translate(-50%, -50%) scale(380%, 380%)
          opacity: 0
    # Power =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: script.apple_tv_power
      style:
          top: 6%
          left: 85%
          transform: translate(-50%, -50%) scale(380%, 380%)
          opacity: 0
    # Up =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: up
      style:
          top: 23.5%
          left: 50%
          transform: translate(-50%, -50%) scale(600%, 800%)
          opacity: 0
    # Down =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: down
      style:
          top: 62%
          left: 50%
          transform: translate(-50%, -50%) scale(600%, 800%)
          opacity: 0
    # Left =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: left
      style:
          top: 42.6%
          left: 21%
          transform: translate(-50%, -50%) scale(600%, 500%)
          opacity: 0
    # Right =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: right
      style:
          top: 42.6%
          left: 79%
          transform: translate(-50%, -50%) scale(600%, 500%)
          opacity: 0
    # Select =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: select
      style:
          top: 42.4%
          left: 50%
          transform: translate(-50%, -50%) scale(400%, 400%)
          opacity: 0
    # Home =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: top_menu
      hold_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: home_hold
      style:
          top: 80%
          left: 15.5%
          transform: translate(-50%, -50%) scale(380%, 380%)
          opacity: 0
    # Play/Pause ============================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: media_player.media_play_pause
          service_data:
              entity_id: media_player.living_apple_tv
      style:
          top: 91%
          left: 15.5%
          transform: translate(-50%, -50%) scale(380%, 380%)
          opacity: 0
    # Back =================================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: menu
      style:
          top: 85.5%
          left: 50%
          transform: translate(-50%, -50%) scale(750%, 750%)
          opacity: 0
    # Volume Up =============================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: volume_up
      style:
          top: 80%
          left: 84.5%
          transform: translate(-50%, -50%) scale(380%, 380%)
          opacity: 0
    # Volume Down ===========================
    - type: icon
      icon: none
      tap_action:
          action: call-service
          service: remote.send_command
          service_data:
              entity_id: remote.living_apple_tv
              command: volume_down
      style:
          top: 91%
          left: 84.5%
          transform: translate(-50%, -50%) scale(380%, 380%)
          opacity: 0