diff --git a/miniapp/index.html b/miniapp/index.html index f99c02b6..f2d8a5e7 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -320,6 +320,90 @@ line-height: 1.6; } + /* Empty States */ + .empty-state { + margin: 24px 0; + } + + .empty-state-card { + padding: 28px 24px; + border-radius: var(--radius-xl); + background: var(--bg-secondary); + box-shadow: var(--shadow-sm); + text-align: center; + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + } + + .empty-state-icon { + font-size: 42px; + } + + .empty-state-title { + font-size: 20px; + font-weight: 800; + color: var(--text-primary); + } + + .empty-state-text { + font-size: 15px; + color: var(--text-secondary); + line-height: 1.6; + } + + .empty-state-actions { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; + } + + .empty-state-button { + width: 100%; + padding: 14px 18px; + border: none; + border-radius: var(--radius-lg); + font-size: 15px; + font-weight: 700; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; + background: var(--primary); + color: #fff; + } + + .empty-state-button:hover { + transform: translateY(-1px); + box-shadow: var(--shadow-sm); + } + + .empty-state-button.secondary { + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-primary); + } + + .empty-state-chip { + font-size: 12px; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + padding: 4px 10px; + border-radius: 999px; + background: rgba(var(--primary-rgb), 0.12); + color: var(--primary); + } + + :root[data-theme="dark"] .empty-state-card { + background: rgba(15, 23, 42, 0.75); + box-shadow: var(--shadow-md); + } + + :root[data-theme="dark"] .empty-state-button.secondary { + border-color: rgba(148, 163, 184, 0.4); + } + .error-actions { margin-top: 24px; display: flex; @@ -4223,13 +4307,48 @@ + + +