diff --git a/public/prototype.html b/public/prototype.html index 570ee60..e3c6c68 100644 --- a/public/prototype.html +++ b/public/prototype.html @@ -18,42 +18,31 @@ height: 100%; font-family: 'Manrope', system-ui, sans-serif; color: #1b1f23; - background: #f4f5f7; + background: #eef1f4; } .app { height: 100%; display: flex; flex-direction: column; - gap: 12px; - padding: 18px 14px 16px; - background: #f4f5f7; + gap: 10px; + padding: 14px 12px 16px; + background: #eef1f4; } .card { background: #ffffff; - border-radius: 14px; - border: 1px solid rgba(27, 31, 35, 0.08); - padding: 16px; - box-shadow: 0 10px 24px rgba(27, 31, 35, 0.08); + border-radius: 12px; + border: 1px solid rgba(27, 31, 35, 0.1); + padding: 14px; + box-shadow: 0 8px 18px rgba(27, 31, 35, 0.08); } .card.main { flex: 1; display: flex; flex-direction: column; - gap: 12px; - } - - .title { - font-size: 18px; - font-weight: 700; - } - - .subtitle { - font-size: 12px; - color: rgba(27, 31, 35, 0.6); - margin: 0; + gap: 10px; } .section-title { @@ -61,79 +50,6 @@ text-transform: uppercase; letter-spacing: 0.12em; color: rgba(27, 31, 35, 0.45); - margin-top: 6px; - } - - .list { - display: grid; - gap: 8px; - margin-top: 4px; - } - - .item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 10px; - border-radius: 10px; - background: #f0f2f4; - font-size: 12px; - } - - .item strong { - font-weight: 600; - } - - .tag { - padding: 2px 8px; - border-radius: 999px; - font-size: 10px; - font-weight: 600; - } - - .tag.success { - background: rgba(31, 129, 84, 0.14); - color: #1f8154; - } - - .tag.pending { - background: rgba(211, 135, 32, 0.15); - color: #b7741c; - } - - .tag.info { - background: rgba(26, 77, 122, 0.14); - color: #1a4d7a; - } - - .info-card { - font-size: 12px; - color: rgba(27, 31, 35, 0.65); - line-height: 1.4; - } - - .action { - border: none; - border-radius: 12px; - padding: 12px 14px; - font-size: 13px; - font-weight: 600; - cursor: pointer; - background: #0f4c81; - color: #fff; - box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25); - transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; - } - - .action:active { - transform: scale(0.98); - } - - .action[disabled] { - opacity: 0.5; - cursor: not-allowed; - box-shadow: none; - transform: none; } .media-count { @@ -226,7 +142,7 @@ .table th, .table td { - padding: 6px 8px; + padding: 6px 6px; text-align: left; border-bottom: 1px solid rgba(27, 31, 35, 0.08); } @@ -236,6 +152,17 @@ font-weight: 600; } + .total { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + border-radius: 10px; + background: #f0f2f4; + font-size: 12px; + font-weight: 700; + } + .q { display: inline-flex; align-items: center; @@ -250,88 +177,186 @@ font-weight: 700; } - .toast { - position: relative; - background: #0f4c81; - color: #fff; - padding: 10px 12px; + .accept-card { + display: grid; + grid-template-columns: 54px 1fr; + gap: 10px; + align-items: center; + padding: 10px; border-radius: 12px; + background: #f0f2f4; + } + + .accept-photo { + width: 54px; + height: 54px; + border-radius: 10px; + background-size: cover; + background-position: center; + border: 1px solid rgba(27, 31, 35, 0.08); + } + + .accept-title { font-size: 12px; - box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25); - animation: slideDown 0.5s ease; + font-weight: 600; } - .toast small { - display: block; - opacity: 0.8; - margin-top: 4px; + .accept-meta { + font-size: 11px; + color: rgba(27, 31, 35, 0.6); } - .skeleton { + .tag { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: 999px; + font-size: 10px; + font-weight: 600; + } + + .tag.success { + background: rgba(31, 129, 84, 0.14); + color: #1f8154; + } + + .tag.pending { + background: rgba(211, 135, 32, 0.15); + color: #b7741c; + } + + .tag.info { + background: rgba(26, 77, 122, 0.14); + color: #1a4d7a; + } + + .toggle-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 8px; + padding: 8px 10px; + border-radius: 10px; + background: #f0f2f4; + font-size: 12px; + font-weight: 600; + } + + .switch { + position: relative; + width: 42px; + height: 22px; + } + + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + .slider { + position: absolute; + cursor: pointer; + inset: 0; + background-color: #c7ced6; + transition: 0.2s; + border-radius: 999px; + } + + .slider:before { + position: absolute; + content: ''; + height: 18px; + width: 18px; + left: 2px; + top: 2px; + background-color: white; + transition: 0.2s; + border-radius: 50%; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + .switch input:checked + .slider { + background-color: #0f4c81; + } + + .switch input:checked + .slider:before { + transform: translateX(20px); + } + + .list { display: grid; gap: 8px; + margin-top: 8px; } - .skeleton-line { - height: 10px; - border-radius: 999px; - background: linear-gradient(90deg, #eef1f4 0%, #e4e7eb 50%, #eef1f4 100%); - background-size: 200% 100%; - animation: shimmer 1.4s infinite; + .item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + border-radius: 10px; + background: #f0f2f4; + font-size: 12px; } - .skeleton-line.wide { - height: 12px; + .action { + border: none; + border-radius: 12px; + padding: 12px 14px; + font-size: 18px; + font-weight: 700; + cursor: pointer; + background: #0f4c81; + color: #fff; + box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25); + transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } - @keyframes shimmer { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } + .action:active { + transform: scale(0.98); } - @keyframes slideDown { - from { transform: translateY(-10px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } + .action[disabled] { + opacity: 0.5; + cursor: not-allowed; + box-shadow: none; + transform: none; }