Upload 18 files

app.py

@@ -105,13 +105,12 @@ def handle_save(index: int) -> None:
 load_css()
 initialize_state()
 fetch_cards_once()
+render_add_card_button(add_card)
 render_header()
 
 if st.session_state.status_message:
     getattr(st, st.session_state.status_type)(st.session_state.status_message)
 
-render_add_card_button(add_card)
-
 if not st.session_state.cards:
     st.markdown(
         """

assets/style.css

@@ -71,25 +71,6 @@
   margin: 0;
 }
 
-.card-tone-marker {
-  display: block;
-  height: 0;
-}
-
-[data-testid="element-container"]:has(.card-tone-danger) + div [data-testid="stVerticalBlockBorderWrapper"] {
-  background: linear-gradient(180deg, rgba(255, 235, 235, 0.96), rgba(255, 255, 255, 0.96));
-  border-color: rgba(214, 69, 69, 0.28) !important;
-}
-
-[data-testid="element-container"]:has(.card-tone-success) + div [data-testid="stVerticalBlockBorderWrapper"] {
-  background: linear-gradient(180deg, rgba(235, 251, 242, 0.96), rgba(255, 255, 255, 0.96));
-  border-color: rgba(20, 125, 114, 0.24) !important;
-}
-
-[data-testid="element-container"]:has(.card-tone-default) + div [data-testid="stVerticalBlockBorderWrapper"] {
-  background: rgba(255, 255, 255, 0.9);
-}
-
 [data-testid="stVerticalBlockBorderWrapper"] {
   border-radius: 14px;
   border-color: rgba(18, 32, 51, 0.08) !important;
@@ -103,6 +84,52 @@
   background: transparent !important;
 }
 
+.tone-strip {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+  font-size: 0.64rem;
+  font-weight: 800;
+  margin-bottom: 0.28rem;
+  width: fit-content;
+}
+
+.tone-strip-default {
+  background: rgba(18, 32, 51, 0.06);
+  color: var(--muted);
+}
+
+.tone-strip-success {
+  background: rgba(20, 125, 114, 0.12);
+  color: var(--primary-strong);
+}
+
+.tone-strip-danger {
+  background: rgba(214, 69, 69, 0.12);
+  color: var(--danger);
+}
+
+.tone-dot {
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.tone-dot-default {
+  background: rgba(18, 32, 51, 0.28);
+}
+
+.tone-dot-success {
+  background: var(--primary);
+}
+
+.tone-dot-danger {
+  background: var(--danger);
+}
+
 .card-status {
   display: inline-flex;
   align-items: center;
@@ -119,6 +146,20 @@
 .end-time-inline {
   padding-top: 0.05rem;
   text-align: right;
+  border-radius: 10px;
+  padding: 0.22rem 0.38rem;
+}
+
+.end-time-inline-default {
+  background: rgba(18, 32, 51, 0.05);
+}
+
+.end-time-inline-success {
+  background: rgba(20, 125, 114, 0.12);
+}
+
+.end-time-inline-danger {
+  background: rgba(214, 69, 69, 0.12);
 }
 
 .end-time-inline-label {

components/buttons.py

@@ -2,11 +2,10 @@ import streamlit as st
 
 
 def render_add_card_button(on_click) -> None:
-    left_col, right_col = st.columns([0.14, 0.86])
+    left_col, right_col = st.columns([0.12, 0.88])
     with left_col:
         st.markdown('<div class="primary-action">', unsafe_allow_html=True)
         st.button("+ Add Card", use_container_width=True, on_click=on_click)
         st.markdown("</div>", unsafe_allow_html=True)
     with right_col:
         st.empty()
-

components/card.py

@@ -1,6 +1,6 @@
 import streamlit as st
 
-from utils.time_utils import compute_end_time, format_time, get_card_tone
+from utils.time_utils import compute_end_time, format_time, get_card_tone, get_tone_message
 
 
 def render_card(index: int, on_save, on_delete) -> None:
@@ -15,9 +15,18 @@ def render_card(index: int, on_save, on_delete) -> None:
     card["endHour"] = end_hour
     card["endMinute"] = end_minute
     tone = get_card_tone(end_hour, end_minute)
+    tone_message = get_tone_message(tone)
 
-    st.markdown(f'<div class="card-tone-marker card-tone-{tone}"></div>', unsafe_allow_html=True)
     with st.container(border=True):
+        st.markdown(
+            f"""
+            <div class="tone-strip tone-strip-{tone}">
+                <span class="tone-dot tone-dot-{tone}"></span>
+                <span>{tone_message}</span>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
         title_col, status_col = st.columns([1.8, 0.42])
         with title_col:
             card["title"] = st.text_input(
@@ -64,7 +73,7 @@ def render_card(index: int, on_save, on_delete) -> None:
         with end_col:
             st.markdown(
                 f"""
-                <div class="end-time-inline">
+                <div class="end-time-inline end-time-inline-{tone}">
                     <div class="end-time-inline-label">End</div>
                     <div class="end-time-inline-value">{format_time(end_hour, end_minute)}</div>
                 </div>

utils/time_utils.py

@@ -34,6 +34,14 @@ def get_card_tone(end_hour: str, end_minute: str) -> str:
     return "default"
 
 
+def get_tone_message(tone: str) -> str:
+    if tone == "danger":
+        return "Less than 5 minutes left"
+    if tone == "success":
+        return "Less than 10 minutes left"
+    return "More than 10 minutes left"
+
+
 def build_card_payload() -> dict[str, str]:
     end_hour, end_minute = compute_end_time("08", "00")
     return {