weather-card

    type: custom:button-card
    entity: weather.dark_sky
    show_name: false
    aspect_ratio: 1/1
    icon: >
      [[[
          var icon = "mdi:weather-" + entity.state;
          switch (entity.state) {
            case "overcast":
              icon = "mdi:weather-cloudy-arrow-right";
            case "clear-night":
              icon = "mdi:weather-night";
              break;
            default:
              break;
          }
          return icon;
      ]]]
    styles:
      card:
        - padding: 0px
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 15%
        - top: 8%
        - height: 24px
        - width: 24px
      custom_fields:
        current:
          - position: absolute
          - left: 55%
          - top: 8%
          - font-size: 12px
          - line-height: 20px
          - font-family: Helvetica
        forecast:
          - position: absolute
          - left: 55%
          - top: 20%
          - font-size: 10px
          - line-height: 20px
          - font-family: Helvetica
        rain:
          - position: absolute
          - left: 12%
          - top: 35%
          - font-size: 10px
          - line-height: 20px
          - font-family: Helvetica
        wind:
          - position: absolute
          - left: 12%
          - top: 50%
          - font-size: 10px
          - line-height: 20px
          - font-family: Helvetica
        sun:
          - position: absolute
          - left: 12%
          - top: 65%
          - font-size: 10px
          - line-height: 20px
          - font-family: Helvetica
    custom_fields:
      current: >
        [[[ 
          return entity.attributes.temperature + '°'
        ]]]
      forecast: >
        [[[
          return entity.attributes.forecast[0].templow + '°/' + entity.attributes.forecast[0].temperature + '°'
        ]]]
      rain: >
        [[[ 
          return '<ha-icon icon="mdi:water" style="width: 16px; color: #03a9f4;"></ha-icon>'
            + (entity.attributes.forecast[0].precipitation || 0) + ' in'
        ]]]
      wind: >
        [[[ 
          var degree = 45;
          var angle = entity.attributes.wind_bearing + 22.5;
          var direction = (angle >= 0 * degree && angle < 1 * degree) ? "N" :
            (angle >= 1 * degree && angle < 2 * degree) ? "NE" : 
            (angle >= 2 * degree && angle < 3 * degree) ? "E" :
            (angle >= 3 * degree && angle < 4 * degree) ? "SE" :
            (angle >= 4 * degree && angle < 5 * degree) ? "S" :
            (angle >= 5 * degree && angle < 6 * degree) ? "W" :
            (angle >= 6 * degree && angle < 7 * degree) ? "NW" : "N";
          return '<ha-icon icon="mdi:weather-windy" style="width: 16px; color: #03a9f4;"></ha-icon>' 
              + direction + ' ' + (Math.round(entity.attributes.wind_speed) || 0) + ' mph'
        ]]]
      sun: >
        [[[ 
          var options = { hour: 'numeric', minute: 'numeric' };
          var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
          var sunrise_time = sunrise_date.toLocaleDateString("en-US", options).split(",")[1];
          var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
          var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
          var time = states['sun.sun'].state === 'below_horizon' ? sunrise_time : sunset_time;
          var icon = states['sun.sun'].state === 'below_horizon' ? 'mdi:weather-sunset-up' : 'mdi:weather-sunset-down';
          return '<ha-icon icon="' + icon + '" style="width: 16px; color: #f4e842;"></ha-icon>'
              +   time
        ]]]
    tap_action:
      action: call-service
      service: browser_mod.command
      service_data:
        command: popup
        title: 'Weather'
        deviceID:
          - this
        card:
          type: custom:swipe-card
          parameters:
            draggable: true
            hide: false
            pagination:
              type: bullets
            scrollbar: null
            snapOnRelease: true
            spaceBetween: 8
          cards:
            - type: iframe
              aspect_ratio: 90%
              url: https://embed.windy.com/embed2.html?lat=41.273&lon=-96.002&zoom=5&level=surface&overlay=rain&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&detailLat=41.273&detailLon=-96.002&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1
            - type: weather-forecast
              entity: weather.hourly
            - type: weather-forecast
              entity: weather.dark_sky