From 15c1b515ad9e17ca89630493a17574b067fb0843 Mon Sep 17 00:00:00 2001
From: Codex <test@test.com>
Date: Sat, 4 Oct 2025 15:36:52 +0100
Subject: [PATCH 1/3] Enhance time mode visuals with HH/MM labels and AM/PM
 indicator

---
 README.md                  |  5 +++++
 large-number-input-card.js | 36 +++++++++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3d07ff9..8c39c1a 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ A Home Assistant Lovelace card that turns any `number` or `input_number` entity
 - Big, high-contrast inputs tailored for wall tablets and touch screens
 - Optional step buttons that respect entity min/max/step constraints
 - Time mode that splits a total-minute value into hour and minute columns with wrap-aware buttons
+- **Visual enhancements in time mode**: HH/MM labels below inputs and AM/PM indicator showing active period
 - Automatic clamping to entity-provided bounds with optional overrides
 - Customisable width, font size and colours via CSS variables
 - Supports both `number` and `input_number` domains (time mode also works with `input_datetime` entities that have time enabled)
@@ -55,6 +56,10 @@ show_buttons: true
 
 When `mode: time` is enabled the card expects the entity to expose a numeric value measured in minutes. You can back this with an `input_number` storing minutes or an `input_datetime` that has time enabled (the card will call `input_datetime.set_datetime` for you). The card handles the hour/minute split, wraps minute increments across hour boundaries, and honours the entity min/max limits.
 
+**Time mode visual features:**
+- **HH/MM labels**: Clear labels appear below each time input to indicate hours and minutes
+- **AM/PM indicator**: A vertical indicator displays both AM and PM, with the active period highlighted (full opacity) and inactive dimmed (30% opacity)
+
 ### Options
 
 | Option | Type | Default | Description |
diff --git a/large-number-input-card.js b/large-number-input-card.js
index e56b40b..b736857 100644
--- a/large-number-input-card.js
+++ b/large-number-input-card.js
@@ -175,12 +175,39 @@ const registerLargeNumberInputCard = async () => {
 
       .time-column {
         display: grid;
-        grid-template-rows: auto auto auto;
+        grid-template-rows: auto auto auto auto;
         align-items: center;
         justify-items: center;
         gap: 8px;
       }
 
+      .time-label {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--secondary-text-color);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .ampm-indicator {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: var(--primary-text-color);
+        align-self: center;
+      }
+
+      .ampm-indicator span {
+        opacity: 0.3;
+        transition: opacity 0.2s ease;
+      }
+
+      .ampm-indicator span.active {
+        opacity: 1;
+      }
+
       .time-button {
         width: var(--lnic-time-button-size, 48px);
         height: var(--lnic-time-button-size, 48px);
@@ -363,11 +390,16 @@ const registerLargeNumberInputCard = async () => {
     _renderTimeControls({ stateObj, disabled, value }) {
       const parts = this._getTimeDisplayParts(value, stateObj);
       const separator = this._config.time_separator ?? ":";
+      const isAM = parts.hours < 12;
       return html`
         <div class="time-grid">
           ${this._renderTimeColumn({ part: "hours", value: parts.hours, disabled, stateObj })}
           <div class="time-separator" aria-hidden="true">${separator}</div>
           ${this._renderTimeColumn({ part: "minutes", value: parts.minutes, disabled, stateObj })}
+          <div class="ampm-indicator">
+            <span class="${isAM ? 'active' : ''}">AM</span>
+            <span class="${!isAM ? 'active' : ''}">PM</span>
+          </div>
         </div>
       `;
     }
@@ -378,6 +410,7 @@ const registerLargeNumberInputCard = async () => {
       const increaseLabel = isHours ? "Increase hours" : "Increase minutes";
       const decreaseLabel = isHours ? "Decrease hours" : "Decrease minutes";
       const displayValue = this._formatTimePart(value);
+      const label = isHours ? "HH" : "MM";
 
       return html`
         <div class="time-column">
@@ -420,6 +453,7 @@ const registerLargeNumberInputCard = async () => {
                 &#9660;
               </button>`
             : null}
+          <div class="time-label">${label}</div>
         </div>
       `;
     }

From c92695b827a61e2754030110d1253a45b02cfdfd Mon Sep 17 00:00:00 2001
From: Codex <test@test.com>
Date: Sat, 4 Oct 2025 15:44:34 +0100
Subject: [PATCH 2/3] Refactor time label rendering in large number input card

---
 large-number-input-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/large-number-input-card.js b/large-number-input-card.js
index b736857..2b5b6da 100644
--- a/large-number-input-card.js
+++ b/large-number-input-card.js
@@ -427,6 +427,7 @@ const registerLargeNumberInputCard = async () => {
                 &#9650;
               </button>`
             : null}
+          <div class="time-label">${label}</div>
           <input
             class="time-input"
             type="text"
@@ -453,7 +454,6 @@ const registerLargeNumberInputCard = async () => {
                 &#9660;
               </button>`
             : null}
-          <div class="time-label">${label}</div>
         </div>
       `;
     }

From dd8d1df68390a8e0a57948c64cc74b5298230218 Mon Sep 17 00:00:00 2001
From: erasma <markerasmus@gmail.com>
Date: Sat, 4 Oct 2025 15:46:33 +0100
Subject: [PATCH 3/3] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index caddf07..1a0bc72 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
  
 A Home Assistant Lovelace card that turns any `number` or `input_number` entity into an oversized numeric or time input with clear, easily-tappable controls.
 
-<img width="541" height="281" alt="image" src="https://github.com/user-attachments/assets/d283229c-c190-4a1a-b5c0-1ec4c8912549" />
+<img width="468" height="261" alt="image" src="https://github.com/user-attachments/assets/874364b1-dc9c-4a02-8708-1e901f1bfbb2" />
 
 
 ## Features