diff --git a/pwa/index.html b/pwa/index.html index ab5a9c5..9aae987 100644 --- a/pwa/index.html +++ b/pwa/index.html @@ -1,466 +1,937 @@ - + - - - - - - - - - -NotifyPulse - - - + /* Toast */ + .toast { + position: fixed; + bottom: calc(var(--safe-b) + 80px); + left: 50%; + transform: translateX(-50%); + background: var(--green); + color: #000; + padding: 9px 20px; + border-radius: 999px; + font-size: 0.8rem; + font-weight: 700; + white-space: nowrap; + pointer-events: none; + opacity: 0; + transition: 0.3s; + z-index: 99; + } + .toast.show { + opacity: 1; + } + + + + +
+
- -
-
+ +
+
+ +
V3
+
Tap to continue
+
+
- -
-
- -
V3
-
Tap to continue
-
-
+ + - - + + + +
- - -
-
Background Appearance
-
-
Blur 18px
- -
-
-
Darkness 72%
- -
- -
+
- -
+ - - \ No newline at end of file + init(); + + + diff --git a/ui/index.html b/ui/index.html index f147e24..74c5747 100644 --- a/ui/index.html +++ b/ui/index.html @@ -1,863 +1,2260 @@ - + - - - -NotifyPulse - - - + /* ── Toggle pill ── */ + .card-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + } + .display-mode-toggle { + display: flex; + gap: 5px; + } + .toggle-pill { + border: none; + border-radius: 999px; + padding: 4px 10px; + font-size: 0.7rem; + font-weight: 600; + background: var(--bg); + color: var(--muted); + border: 1px solid var(--border); + cursor: pointer; + transition: 0.2s; + } + .toggle-pill.active { + background: var(--accent); + color: #fff; + border-color: var(--accent); + } - -
- -
Select a usecase to start
-
-
Loading…
-
-
+ /* ── Info box ── */ + .info-box { + background: var(--bg); + border: 1px solid var(--border); + border-radius: 8px; + padding: 10px 14px; + margin-bottom: 12px; + } + .info-label { + font-size: 10px; + color: var(--muted); + font-family: var(--mono); + margin-bottom: 4px; + } + .info-val { + font-family: var(--mono); + font-size: 0.82rem; + color: var(--accent); + word-break: break-all; + } - -
-

NotifyPulse

-
-
-
- 0 PWA -
-
-
- Running -
-
-
+ .divider { + border: none; + border-top: 1px solid var(--border); + margin: 16px 0; + } -
- - - -
+ /* ── Usecase cards (Usecases tab) ── */ + .uc-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 12px; + margin-bottom: 14px; + } + .uc-card { + background: var(--bg); + border: 1px solid var(--border); + border-radius: 10px; + padding: 14px 16px; + position: relative; + overflow: hidden; + transition: border-color 0.15s; + } + .uc-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: var(--uc-color, var(--accent)); + } + .uc-card:hover { + border-color: var(--uc-color, var(--accent)); + } + .uc-card.is-active { + border-color: var(--uc-color, var(--accent)); + background: rgba(79, 142, 247, 0.04); + } + .uc-name { + font-size: 0.9rem; + font-weight: 700; + margin-bottom: 6px; + display: flex; + align-items: center; + gap: 6px; + } + .uc-active-tag { + font-size: 0.6rem; + font-family: var(--mono); + font-weight: 700; + color: var(--green); + background: rgba(34, 197, 94, 0.1); + border: 1px solid rgba(34, 197, 94, 0.25); + border-radius: 4px; + padding: 1px 5px; + } + .uc-block-chips { + display: flex; + flex-wrap: wrap; + gap: 4px; + margin-bottom: 8px; + } + .uc-chip { + padding: 2px 7px; + border-radius: 4px; + font-size: 0.68rem; + font-family: var(--mono); + font-weight: 600; + background: rgba(79, 142, 247, 0.1); + color: var(--accent); + border: 1px solid rgba(79, 142, 247, 0.2); + } + .uc-chip.off { + background: transparent; + color: var(--muted); + border-color: var(--border); + } + .uc-meta { + font-size: 0.72rem; + color: var(--muted); + margin-bottom: 10px; + } + .uc-actions { + display: flex; + gap: 6px; + flex-wrap: wrap; + } + .uc-actions .btn { + flex: none; + padding: 5px 10px; + font-size: 0.74rem; + border-radius: 6px; + } - -
-
+ /* ── Block selector ── */ + .block-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 8px; + margin-top: 6px; + } + .block-opt { + border: 1px solid var(--border); + border-radius: 8px; + padding: 11px 12px; + cursor: pointer; + transition: 0.15s; + background: var(--bg); + position: relative; + } + .block-opt:hover { + border-color: var(--accent); + } + .block-opt.sel { + border-color: var(--accent); + background: rgba(79, 142, 247, 0.08); + } + .block-opt-icon { + font-size: 1.2rem; + margin-bottom: 5px; + } + .block-opt-name { + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 2px; + } + .block-opt-desc { + font-size: 0.68rem; + color: var(--muted); + line-height: 1.35; + } + .block-check { + position: absolute; + top: 8px; + right: 8px; + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid var(--border); + transition: 0.15s; + } + .block-opt.sel .block-check { + background: var(--accent); + border-color: var(--accent); + } -
-

Next Notification

-
-
- - - - -
- -- - -
+ /* ── Modal ── */ + .modal-backdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.75); + display: none; + align-items: center; + justify-content: center; + z-index: 100; + backdrop-filter: blur(3px); + } + .modal-backdrop.open { + display: flex; + } + .modal { + background: var(--card); + border: 1px solid var(--border); + border-radius: 14px; + width: 560px; + max-width: 95vw; + max-height: 90vh; + overflow-y: auto; + padding: 22px; + } + .modal-hdr { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 18px; + } + .modal-title { + font-size: 0.95rem; + font-weight: 700; + } + .modal-close { + background: none; + border: none; + color: var(--muted); + cursor: pointer; + font-size: 1.1rem; + padding: 4px 6px; + border-radius: 4px; + } + .modal-close:hover { + background: var(--bg); + color: var(--text); + } + .modal-footer { + display: flex; + gap: 8px; + justify-content: flex-end; + margin-top: 18px; + padding-top: 14px; + border-top: 1px solid var(--border); + } + + ::-webkit-scrollbar { + width: 5px; + } + ::-webkit-scrollbar-track { + background: transparent; + } + ::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 3px; + } + + + + +
+ +
Select a usecase to start
+
+
Loading…
+
+
+ + +
+

NotifyPulse

+
+
+
+ 0 PWA +
+
+
+ Running +
+
+
+ +
+ + + +
+ + +
+
+
+

Next Notification

+
+
+ + + + +
+ -- + +
+
+
Select a usecase to begin
+
+
+
+
STATUS
+
Idle
+
+
+
USECASE
+
+ — +
+
+
+
ENTRIES
+
—
+
+
+
+ +
+

Controls

+
+ + + +
+ +
+
+ 🖥️ Desktop Tests +
+
+ + + + +
+
+ +
+
+

Mobile PWA

+
+
+ PWA URL — open on your phone (same network) +
+
Loading…
+
+
+
CONNECTED CLIENTS
+
0
+
+
+
+ +
+
+

Active Entries

+
+ + +
+
+
    +
    + +
    +

    Prognosis — next hour

    +
    +
    +
    –
    +
    estimated notifications
    +
    +
    +
    +
    +
    +
    Random
    +
    –
    +
    +
    +
    Timed (this hour)
    +
    –
    +
    +
    +
    + +
    +
    +

    Log

    + +
    +
      +
      +
      +
      + + +
      +
      +
      +
      +

      Usecases

      + +
      +
      Loading…
      +
      + + +
      +
      + + +
      +
      +
      +

      General

      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
      + Startup toast + +
      +
      + Notification sound + +
      +
      + Auto-open browser on start + +
      +
      + Minimize to tray (instead of closing) + +
      +
      + Run on Windows startup + +
      +
      + Confirm before deleting usecases + +
      +
      +
      + + +
      + +
      +
      + +
      +

      Notifications

      +
      + + +
      +
      + +
      +
      +
      + +
      +

      Overlay Settings

      +
      +
      + + +
      +
      + + +
      +
      +
      + + +
      +
      + Stretch to fill (vs letterbox fit) + +
      +
      + + +
      +
      +
      + +
      +

      Wallpaper Settings

      +
      + + +
      +
      + +
      +
      +
      +
      +
      + + + + - - \ No newline at end of file + init(); + setInterval(fetchState, 1000); + + +