{"html":"

\n 12:02:58\n

\n\n

Track Your Delivery

\n Monitor your shipment status in real-time. Stay informed about your\n delivery's progress every step of the way.\n

\n\n \n

\n","css":".card {\n background: white;\n border-radius: 18px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n max-width: 350px;\n width: 100%;\n padding: 25px;\n position: relative;\n overflow: hidden;\n}\n\n.time-badge {\n position: absolute;\n top: 10px;\n right: 10px;\n background: #1a1a1a;\n color: white;\n padding: 6px 8px;\n border-radius: 50px;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n z-index: 10;\n}\n\n.clock-icon {\n width: 16px;\n height: 16px;\n border: 1.5px solid white;\n border-radius: 50%;\n position: relative;\n}\n\n.clock-icon::before {\n content: \"\";\n position: absolute;\n width: 1.5px;\n height: 6px;\n background: white;\n top: 2px;\n left: 50%;\n transform: translateX(-50%);\n transform-origin: bottom;\n animation: clockHand 2s infinite linear;\n}\n\n@keyframes clockHand {\n 0% {\n transform: translateX(-50%) rotate(0deg);\n }\n 100% {\n transform: translateX(-50%) rotate(360deg);\n }\n}\n\n.illustration {\n width: 100%;\n height: 180px;\n margin-bottom: 25px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.conveyor-belt {\n position: absolute;\n width: 100%;\n height: 70px;\n background: #e0e0e0;\n border-radius: 6px;\n overflow: hidden;\n top: 80px;\n}\n\n.conveyor-belt::before {\n content: \"\";\n position: absolute;\n width: 200%;\n height: 100%;\n background: repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 30px,\n #d0d0d0 30px,\n #d0d0d0 35px\n );\n animation: conveyorMove 3s linear infinite;\n}\n\n@keyframes conveyorMove {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n.package {\n position: relative;\n width: 100px;\n height: 100px;\n animation: packageSlide 4s ease-in-out infinite;\n z-index: 5;\n}\n\n@keyframes packageSlide {\n 0%,\n 100% {\n transform: translateX(-100px);\n }\n 50% {\n transform: translateX(100px);\n }\n}\n\n.box {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n animation: boxRotate 4s ease-in-out infinite;\n}\n\n@keyframes boxRotate {\n 0%,\n 100% {\n transform: rotateY(0deg);\n }\n 25% {\n transform: rotateY(-10deg);\n }\n 75% {\n transform: rotateY(10deg);\n }\n}\n\n.box-face {\n position: absolute;\n width: 100px;\n height: 100px;\n background: white;\n border: 2px solid #ddd;\n border-radius: 6px;\n}\n\n.box-top {\n background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);\n transform: translateY(-12px);\n}\n\n.tape {\n position: absolute;\n width: 30px;\n height: 100%;\n background: #c8ff5c;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0.9;\n}\n\n.tape-horizontal {\n width: 100%;\n height: 30px;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n}\n\n.content {\n position: relative;\n z-index: 2;\n transform: translateY(-30px);\n}\n\n.card-title {\n font-size: 1.25rem;\n color: #1a1a1a;\n margin-bottom: 12px;\n font-weight: 700;\n}\n\n.card-description {\n font-size: 0.8rem;\n color: #666;\n line-height: 1.4;\n margin-bottom: 25px;\n max-width: 500px;\n margin: 0;\n padding: 0;\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 15px;\n padding-top: 18px;\n border-top: 1px solid #e8e8e8;\n}\n\n.view-status-btn {\n background: white;\n color: #1a1a1a;\n border: 1.5px solid #e0e0e0;\n padding: 10px 32px;\n border-radius: 50px;\n font-size: 0.9rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n\n.view-status-btn::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.8),\n transparent\n );\n transition: left 0.5s ease;\n}\n\n.view-status-btn:hover::before {\n left: 100%;\n}\n\n.view-status-btn:hover {\n background: #1a1a1a;\n color: white;\n border-color: #1a1a1a;\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n}\n\n.view-status-btn:active {\n transform: translateY(0);\n}\n\n.status-message {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #666;\n font-size: 0.85rem;\n width: 100%;\n justify-content: center;\n}\n\n.package-icon {\n width: 24px;\n height: 24px;\n background: #f5f5f5;\n border: 1.5px solid #ddd;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.package-icon::after {\n content: \"\";\n width: 12px;\n height: 2px;\n background: #ddd;\n}\n\n.package-icon::before {\n content: \"\";\n width: 2px;\n height: 12px;\n background: #ddd;\n position: absolute;\n}\n\n@media (max-width: 768px) {\n .card {\n padding: 30px 20px;\n }\n\n .time-badge {\n top: 20px;\n right: 20px;\n padding: 10px 20px;\n font-size: 16px;\n }\n\n .illustration {\n height: 250px;\n }\n\n .package {\n width: 140px;\n height: 140px;\n }\n\n .box-face {\n width: 140px;\n height: 140px;\n }\n\n .card-title {\n font-size: 2rem;\n }\n\n .card-description {\n font-size: 1rem;\n }\n\n .footer {\n flex-direction: column;\n align-items: stretch;\n }\n\n .view-status-btn {\n width: 100%;\n text-align: center;\n }\n\n .status-message {\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .card-title {\n font-size: 1.75rem;\n }\n\n .time-badge {\n font-size: 14px;\n padding: 8px 16px;\n }\n\n .illustration {\n height: 200px;\n }\n\n .package {\n width: 120px;\n height: 120px;\n }\n\n .box-face {\n width: 120px;\n height: 120px;\n }\n}\n"}

fat-goose-73

👁 实时预览

📝 源代码