📱 Mobile preview
Mobile version trong phone frame
E1m · Unified mobile (375×740)
Mobile-first redesign · Horizontal scroll-snap day strip · 3-col slot grid touch-friendly · Sticky bottom CTA thumb-zone · Slot reveal animation 0.3s. Test thật bằng DevTools 375px hoặc scan QR.
⬢ Đặt lịch Meet
● Live7 ngày tới · 98 slot trống
Miễn phí · 20 phút · Google Meet
iPhone preview · 375×740
⭐ Recommend (desktop · NEW)
Desktop ticket - schedule + form trong 1 vé ngang
F1 · Desktop unified ticket
Big horizontal ticket · vertical dashed perforation @58% chia trái-phải · 2 notches semicircle top+bottom · Left: 7-day strip + 4-col slot grid + selected summary · Right: form 4-field + needs + consent + CTA · Tech vibe (grid backdrop + 4 corner brackets).
⬢ Booking Ticket · #M-260514
Đặt lịch Meet · Tài AI Automation
Chọn ngày
7 ngày tớiLock 7 ngày kể từ hôm nay · timezone Asia/Ho_Chi_Minh
Chọn Giờ
16 slot · 30 phútThông Tin Booking3 bước
Liên Hệ
↳ Tôi sẽ Zalo xác nhận lịch
Nhu Cầu
Chọn 1 hoặc nhiềuXác Nhận
Miễn phí · 20 phút · Google Meet
Desktop variant cũ
Unified schedule (date + slot trong 1 widget)
E1 · Unified schedule picker
Date + slot tích hợp 1 widget · Lock 7 ngày từ thời gian mở form · Heatmap-bar visualize availability · Period color bands · Glass card + grid backdrop tech vibe. Tap day → slot reveal smooth trong cùng card.
Lịch của bạn
7 ngày tới · 112 slot trống
Slots trong T5 14/05
Bước 1 (legacy split)
Chọn ngày - variants cũ
A1 · Horizontal scroll chips
Swipe sang ngang, scroll-snap, chip lớn - cảm giác "schedule strip".
Chọn Ngày Phù Hợp
Vuốt sang ngang để xem thêm ngày →
A2 · Compact week grid
Tất cả ngày visible một lúc trong grid 4-col, không scroll.
Chọn Ngày Phù Hợp
Tất cả ngày visible - không cần cuộn
Bước 2 (legacy split)
Chọn giờ - variants cũ
B1 · Period-grouped
Group theo time-of-day với emoji header, 2-col button cards.
Chọn Giờ - T6 15/05
B2 · Flat sorted list
List theo thứ tự thời gian, period tag bên phải, compact.
Chọn Giờ - T6 15/05
Bước 4
Thông tin liên hệ
C1 · Single column
One field per row, sequential flow, classic UX.
Thông Tin Liên Hệ
↳ Tôi sẽ liên hệ Zalo xác nhận lịch
↳ Để gửi calendar invite Google Meet
C2 · Sectioned cards
3 card sections (Liên hệ / Nhu cầu / Xác nhận), chunked.
Thông Tin Liên Hệ
1. Liên Hệ
2. Nhu Cầu
Chọn 1 hoặc nhiều3. Xác Nhận
Sau submit
Thank-you
D1 · Inline card
Compact card với checkmark + detail rows, tối giản.
Đã Nhận Lịch Meet
Tôi sẽ liên hệ Zalo xác nhận trong 24 giờ.
D2 · Celebration
Aurora gradient + confetti dots + animated checkmark - "wow" warm.
🎉 Đặt Lịch Thành Công!
Cảm ơn anh/chị. Tôi sẽ liên hệ Zalo xác nhận trong 24 giờ.
Lịch hẹn
T6, 15/05/2026
14:00 – 14:20 (20 phút)
Nền tảng
Google Meet
Link sẽ gửi qua Zalo 0912 xxx 5678
D3 · Tech HUD (new)
Dark mesh gradient bg + sonar pulse rings + scanning line + corner brackets - AI automation vibe.
⬢ Booking confirmed
Đã nhận lịch
Tôi sẽ liên hệ Zalo xác nhận trong 24 giờ.
ID: preview-mock…
Powered by Tài AI Automation