diff --git a/public/web/subscribe.html b/public/web/subscribe.html index 3037141..a584e41 100644 --- a/public/web/subscribe.html +++ b/public/web/subscribe.html @@ -86,6 +86,64 @@ margin: 0; } + .section-title { + font-size: 0.875rem; + font-weight: 600; + color: #475569; + margin-bottom: 12px; + } + + .type-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + margin-bottom: 24px; + } + + @media (max-width: 600px) { + .type-grid { + grid-template-columns: 1fr; + } + } + + .type-card { + background: #fff; + border: 2px solid #e2e8f0; + border-radius: 10px; + padding: 14px 16px; + cursor: pointer; + transition: all 0.2s ease; + text-align: center; + position: relative; + } + + .type-card:hover { + border-color: #10b981; + background: #f0fdf4; + } + + .type-card.selected { + border-color: #10b981; + background: #ecfdf5; + } + + .type-card.selected::after { + content: ''; + position: absolute; + top: 8px; + right: 8px; + width: 18px; + height: 18px; + background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/12px no-repeat; + border-radius: 50%; + } + + .type-card .type-name { + font-size: 0.95rem; + font-weight: 500; + color: #334155; + } + .sku-grid { display: grid; grid-template-columns: repeat(2, 1fr); @@ -292,7 +350,7 @@