# Trash Day Badge — appears every Monday, tap to dismiss, disappears at midnight

A simple dashboard badge that shows a pulsing red trash can icon every Monday. Tap it when you've taken the bins out and it turns green and disappears. Resets automatically at midnight.

No LLM, no camera — just a boolean, a template sensor, one automation, and a button-card.

---

## Prerequisites

- [button-card](https://github.com/custom-cards/button-card) (HACS)

---

## configuration.yaml

### Binary sensor — is it Monday?

```yaml
template:
  - binary_sensor:
      - name: "Trash Day Monday"
        unique_id: trash_day_monday
        state: "{{ now().isoweekday() == 1 }}"
```

### Input boolean — the dismissed flag

```yaml
input_boolean:
  trash_day_dismissed:
    name: "Trash Day Dismissed"
    icon: mdi:trash-can
```

---

## automations.yaml

Resets the flag at 11:59 PM every Monday so it's ready for next week.

```yaml
- id: 'trash_day_reset'
  alias: Reset Trash Dismissal Monday Night
  triggers:
  - at: '23:59:00'
    trigger: time
  conditions:
  - condition: time
    weekday:
    - mon
  actions:
  - target:
      entity_id: input_boolean.trash_day_dismissed
    action: input_boolean.turn_off
  mode: single
```

---

## Dashboard card

Uses `custom:button-card`. Drop this anywhere on your dashboard.

**Behavior:**
- **Not Monday** — invisible and non-interactive (opacity 0, no pointer events)
- **Monday, not dismissed** — red trash can icon with a pulsing red glow, clickable
- **Dismissed** — fades to a green check, then vanishes (opacity 0)
- Smooth 0.8s fade/scale transition between all states

```yaml
type: custom:button-card
entity: input_boolean.trash_day_dismissed
icon: mdi:trash-can
show_name: false
show_state: false
tap_action:
  action: toggle
extra_styles: |
  @keyframes trash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,0,0,.7); }
    50%  { box-shadow: 0 0 0 6px rgba(255,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,0,0,.7); }
  }
styles:
  card:
    - min-height: 40px
    - border-radius: 12px
    - padding: 0
    - display: flex
    - align-items: center
    - justify-content: center
    - transition: opacity 0.8s ease, transform 0.8s ease
    - opacity: >
        [[[
          const m = states["binary_sensor.trash_day_monday"]?.state === "on";
          if (!m) return 0;
          return (entity.state === "on") ? 0 : 1;
        ]]]
    - transform: >
        [[[
          const m = states["binary_sensor.trash_day_monday"]?.state === "on";
          if (!m) return "scale(0.95)";
          return (entity.state === "on") ? "scale(0.95)" : "scale(1)";
        ]]]
    - pointer-events: >
        [[[
          const m = states["binary_sensor.trash_day_monday"]?.state === "on";
          if (!m) return "none";
          return (entity.state === "on") ? "none" : "auto";
        ]]]
    - animation: >
        [[[
          const m = states["binary_sensor.trash_day_monday"]?.state === "on";
          return (m && entity.state === "off")
            ? "trash-pulse 1.5s ease-in-out infinite"
            : "none";
        ]]]
    - border: >
        [[[
          return (entity.state === "on")
            ? "1.5px solid green"
            : "1.5px solid red";
        ]]]
  grid:
    - grid-template-areas: '"i"'
    - grid-template-rows: 1fr
    - grid-template-columns: 1fr
  icon:
    - --mdc-icon-size: 30px
    - color: >
        [[[
          return (entity.state === "on") ? "green" : "red";
        ]]]
state:
  - value: on
    icon: mdi:check-circle
```

---

## How the visibility logic works

The card is always present in the DOM but uses CSS to hide/show it, which gives the smooth fade transition. Three states:

| Condition | opacity | pointer-events | animation |
|---|---|---|---|
| Not Monday | `0` | `none` | none |
| Monday, not dismissed | `1` | `auto` | pulsing red glow |
| Monday, dismissed | `0` | `none` | none |

The `pointer-events: none` when hidden ensures it doesn't accidentally intercept taps on cards behind it.