diff --git a/wwwroot/poc-booking-v2.html b/wwwroot/poc-booking-v2.html index 7549d06..fef90fb 100644 --- a/wwwroot/poc-booking-v2.html +++ b/wwwroot/poc-booking-v2.html @@ -504,6 +504,192 @@ text-decoration: line-through; } + /* ========================================== + WAITLIST + ========================================== */ + .waitlist-trigger { + display: flex; + align-items: center; + gap: 8px; + margin-top: 20px; + padding: 12px 16px; + width: 100%; + background: transparent; + border: 1px dashed var(--color-border); + border-radius: 8px; + font-size: 13px; + font-family: var(--font-family); + color: var(--color-text-secondary); + cursor: pointer; + transition: all 150ms ease; + } + + .waitlist-trigger:hover { + border-color: var(--color-teal); + color: var(--color-teal); + background: var(--color-teal-light); + } + + .waitlist-trigger i { + font-size: 18px; + } + + .waitlist-section { + overflow: hidden; + height: 0; + } + + .waitlist-content { + padding-top: 20px; + } + + .waitlist-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; + } + + .waitlist-title { + font-size: 14px; + font-weight: 600; + color: var(--color-text); + } + + .waitlist-close { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: transparent; + border: none; + border-radius: 6px; + color: var(--color-text-secondary); + cursor: pointer; + transition: all 150ms ease; + } + + .waitlist-close:hover { + background: var(--color-background); + color: var(--color-text); + } + + .waitlist-close i { + font-size: 18px; + } + + .waitlist-desc { + font-size: 13px; + color: var(--color-text-secondary); + margin-bottom: 20px; + line-height: 1.5; + } + + .waitlist-field { + margin-bottom: 16px; + } + + .waitlist-field:last-child { + margin-bottom: 0; + } + + .waitlist-label { + display: block; + font-size: 13px; + font-weight: 500; + color: var(--color-text); + margin-bottom: 6px; + } + + .waitlist-periods { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .period-option { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 14px; + background: var(--color-surface); + border: 2px solid transparent; + border-radius: 8px; + cursor: pointer; + transition: all 150ms ease; + } + + .period-option:hover { + border-color: var(--color-border); + } + + .period-option.selected { + border-color: var(--color-teal); + background: var(--color-teal-light); + } + + .period-check { + width: 20px; + height: 20px; + border-radius: 4px; + border: 2px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: white; + transition: all 150ms ease; + flex-shrink: 0; + } + + .period-option.selected .period-check { + background: var(--color-teal); + border-color: var(--color-teal); + } + + .period-check i { + opacity: 0; + transition: opacity 150ms ease; + } + + .period-option.selected .period-check i { + opacity: 1; + } + + .period-info { + flex: 1; + } + + .period-name { + font-size: 13px; + font-weight: 500; + } + + .period-time { + font-size: 11px; + color: var(--color-text-secondary); + } + + .waitlist-submit { + margin-top: 20px; + width: 100%; + padding: 12px 20px; + background: var(--color-teal); + color: white; + font-size: 14px; + font-weight: 500; + font-family: var(--font-family); + border: none; + border-radius: 8px; + cursor: pointer; + transition: background 150ms ease; + } + + .waitlist-submit:hover { + background: #00695c; + } + /* ========================================== FORM ========================================== */ @@ -847,6 +1033,39 @@ line-height: 1.5; } + .success-icon.waitlist { + background: rgba(0, 137, 123, 0.12); + } + + .success-icon.waitlist i { + color: var(--color-teal); + } + + .success-btn { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 20px; + padding: 12px 24px; + background: var(--color-teal); + color: white; + font-size: 14px; + font-weight: 500; + font-family: var(--font-family); + border: none; + border-radius: 8px; + cursor: pointer; + transition: background 150ms ease; + } + + .success-btn:hover { + background: #00695c; + } + + .success-btn i { + font-size: 16px; + } + /* ========================================== LANDING VIEW ========================================== */ @@ -1318,7 +1537,7 @@