diff --git a/public/prototype.html b/public/prototype.html index 6e8ce2c..d7591af 100644 --- a/public/prototype.html +++ b/public/prototype.html @@ -76,14 +76,14 @@ width: 10%; background: linear-gradient(90deg, #1a4d7a, #3f7fb0); border-radius: inherit; - transition: width 0.35s ease; + transition: width 0.6s ease; } .card { background: rgba(255, 255, 255, 0.92); border-radius: 18px; border: 1px solid rgba(23, 23, 23, 0.08); - padding: 14px; + padding: 16px; box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08); } @@ -91,14 +91,7 @@ flex: 1; display: flex; flex-direction: column; - gap: 10px; - } - - .eyebrow { - font-size: 10px; - letter-spacing: 0.16em; - text-transform: uppercase; - color: rgba(23, 23, 23, 0.5); + gap: 12px; } .title { @@ -115,7 +108,7 @@ .list { display: grid; gap: 8px; - margin-top: 4px; + margin-top: 2px; } .item { @@ -160,48 +153,67 @@ line-height: 1.4; } - .actions { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - } - - .actions .btn { + .action { border: none; border-radius: 14px; - padding: 10px 12px; - font-size: 12px; + padding: 12px 14px; + font-size: 13px; font-weight: 600; cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; - } - - .actions .btn:active { - transform: scale(0.98); - } - - .btn.primary { background: #1a4d7a; color: #fff; box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3); - grid-column: span 2; + transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } - .btn.secondary { + .action:active { + transform: scale(0.98); + } + + .action[disabled] { + opacity: 0.5; + cursor: not-allowed; + box-shadow: none; + transform: none; + } + + .loading { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 6px; + } + + .loader { + height: 10px; + background: rgba(26, 77, 122, 0.12); + border-radius: 999px; + overflow: hidden; + } + + .loader__bar { + height: 100%; + width: 0; + background: linear-gradient(90deg, #1a4d7a, #3f7fb0); + border-radius: inherit; + transition: width 0.4s ease; + } + + .hint { + font-size: 11px; + color: rgba(23, 23, 23, 0.55); + } + + .bubble { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + border-radius: 999px; background: rgba(26, 77, 122, 0.12); color: #1a4d7a; - } - - .btn.ghost { - background: rgba(23, 23, 23, 0.06); - color: rgba(23, 23, 23, 0.75); - } - - .btn[disabled] { - opacity: 0.45; - cursor: not-allowed; - transform: none; - box-shadow: none; + font-size: 11px; + font-weight: 600; } @@ -220,289 +232,145 @@
-
-
-

-
+
+

+
-
- - - -
+