ติดตามออเดอร์สติ๊กเกอร์ ฉลาก

body { background: var(--bee-brown); min-height: 100vh; } .bee-navbar { background: #4A2A14 !important; border-bottom: none !important; } /* ===== YELLOW STRIPES PAGE ===== */ .track-page { background: var(--bg-yellow-stripes); padding: 180px 20px 80px; margin-top: -2px; position: relative; z-index: 2; } .bee-navbar::after { content: ''; position: absolute; bottom: -33px; left: 0; width: 100%; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40'%3E%3Cpath d='M0,0 L0,6 C0,43.3 72,43.3 72,6 L72,0 Z' fill='%234A2A14'/%3E%3C/svg%3E"); background-size: 72px 40px; background-repeat: round; z-index: 100; pointer-events: none; } /* ===== BROWN FRAME ===== */ .track-frame { background: var(--bee-brown); color: #fff; max-width: 600px; margin: 0 auto; padding: 50px 28px 40px; position: relative; z-index: 10; } .track-frame::before { content: ''; position: absolute; top: -33px; left: 0; width: 100%; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40'%3E%3Cpath d='M0,40 L0,34 C0,-3.3 72,-3.3 72,34 L72,40 Z' fill='%234A2A14'/%3E%3C/svg%3E"); background-size: 72px 40px; background-repeat: round; pointer-events: none; } .track-title { font-family: 'Mitr', sans-serif; font-weight: 800; font-size: 2rem; color: var(--bee-yellow); text-align: center; margin-bottom: 8px; } .track-subtitle { text-align: center; color: rgba(255,255,255,0.7); margin-bottom: 30px; font-size: 0.95rem; } /* ===== INPUT ===== */ .track-input { width: 100%; padding: 14px 20px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #fff; font-family: 'Mitr', sans-serif; font-size: 1.1rem; margin-bottom: 14px; transition: border-color 0.2s; } .track-input::placeholder { color: rgba(255,255,255,0.4); } .track-input:focus { outline: none; border-color: var(--bee-orange); background: rgba(255,255,255,0.12); } .track-btn { width: 100%; padding: 14px; border-radius: 30px; background: var(--bee-orange); color: #fff; font-family: 'Mitr', sans-serif; font-weight: 700; font-size: 1.1rem; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 14px rgba(255,92,0,0.3); } .track-btn:hover:not(:disabled) { background: #e05400; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,92,0,0.4); } .track-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ===== ERROR ===== */ .track-error { margin-top: 16px; padding: 14px 18px; background: rgba(201,74,30,0.15); border: 1px solid rgba(201,74,30,0.4); border-radius: 12px; color: #ff9a7a; font-weight: 500; display: none; font-size: 0.9rem; } .track-error.show { display: block; } /* ===== RESULT ===== */ .track-result { margin-top: 24px; display: none; animation: slideUp 0.5s ease; } .result-title { color: var(--bee-yellow); font-family: 'Mitr', sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; } /* ===== ORDER CARD ===== */ .order-card { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1); padding: 18px; border-radius: 16px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; } .order-card:hover { border-color: var(--bee-orange); background: rgba(255,255,255,0.1); } .job-number { font-family: 'Mitr', sans-serif; font-weight: 800; color: var(--bee-orange); font-size: 1.15rem; } .job-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; } .s-new { background: rgba(96,165,250,0.2); color: #93c5fd; } .s-design { background: rgba(167,139,250,0.2); color: #c4b5fd; } .s-wait { background: rgba(251,191,36,0.2); color: #fcd34d; } .s-cust { background: rgba(34,211,238,0.2); color: #67e8f9; } .s-prod { background: rgba(251,146,60,0.2); color: #fdba74; } .s-fin { background: rgba(74,222,128,0.2); color: #86efac; } .s-del { background: rgba(52,211,153,0.2); color: #6ee7b7; } .order-info { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 6px; line-height: 1.5; } .order-toggle { color: var(--bee-orange); font-size: 0.8rem; font-weight: 600; margin-top: 6px; } /* ===== TIMELINE ===== */ .timeline { list-style: none; padding: 0; margin: 16px 0 24px; } .timeline-item { display: flex; gap: 16px; margin-bottom: 20px; position: relative; } .timeline-item::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: -20px; width: 2px; background: rgba(255,255,255,0.1); z-index: 1; } .timeline-item:last-child::before { display: none; } .tl-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; z-index: 2; flex-shrink: 0; font-size: 0.9rem; } .timeline-item.done .tl-icon { background: rgba(74,222,128,0.2); } .timeline-item.active .tl-icon { background: var(--bee-orange); box-shadow: 0 0 0 5px rgba(255,92,0,0.2); } .tl-text h4 { margin: 0; color: rgba(255,255,255,0.5); font-size: 0.95rem; font-family: 'Mitr', sans-serif; font-weight: 600; } .tl-text p { margin: 2px 0 0; color: rgba(255,255,255,0.3); font-size: 0.82rem; } .timeline-item.done .tl-text h4 { color: rgba(255,255,255,0.7); } .timeline-item.active .tl-text h4 { color: var(--bee-yellow); } .timeline-item.active .tl-text p { color: rgba(255,255,255,0.6); } /* ===== FOOTER SCALLOP ===== */ .cart-footer-scalloped::before { content: ''; position: absolute; top: -33px; left: 0; width: 100%; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40'%3E%3Cpath d='M0,40 L0,34 C0,-3.3 72,-3.3 72,34 L72,40 Z' fill='%234A2A14'/%3E%3C/svg%3E"); background-size: 72px 40px; background-repeat: round; pointer-events: none; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .track-frame { padding: 36px 18px 30px; } .track-title { font-size: 1.5rem; } }

ติดตามสถานะออเดอร์

กรอกเบอร์โทรศัพท์มือถือ หรือ หมายเลขออเดอร์
เพื่อตรวจสอบสถานะงานพิมพ์ของคุณ