{"html":"

\n \n \n \n \n \n\n

\n\n

9:41

100%

\n\n

\n ☀️\n 22°\n

\n 🧭\n NW\n

\n\n

09:41

\n\n

\n WORKOUT\n 12.4 KM\n

\n\n

MOVE

450 / 600 KCAL

EXERCISE

32 / 30 MIN

STAND

10 / 12 HRS

\n\n

HEART RATE

❤️

BPM

\n\n

🎧

Starboy

The Weeknd

⏮

⏭

\n\n

📞

✉️

🎵

🧭

⚙️

❤️

🏃

📱

📸

\n\n

\n \n \n \n \n \n

\n","css":".pro-watch-experience .main-wrapper {\n --bg-deep: #000000;\n --titanium-raw: #8e8e93;\n --titanium-dark: #1c1c1e;\n --accent-orange: #ff4500;\n --glass: rgba(255, 255, 255, 0.1);\n --glass-border: rgba(255, 255, 255, 0.15);\n --ease-out: cubic-bezier(0.23, 1, 0.32, 1);\n\n margin: 0;\n padding: 140px 140px;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, #111, #000);\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\",\n \"Helvetica Neue\", sans-serif;\n overflow: hidden;\n user-select: none;\n}\n\n.pro-watch-experience input {\n display: none;\n}\n\n.pro-watch-experience .watch-assembly {\n position: relative;\n width: 320px;\n height: 380px;\n}\n\n.pro-watch-experience .strap-piece {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 150px;\n height: 200px;\n background: #111;\n border-radius: 24px;\n z-index: 1;\n box-shadow:\n inset 0 0 40px rgba(0, 0, 0, 0.8),\n 0 20px 40px rgba(0, 0, 0, 0.4);\n}\n\n.pro-watch-experience .strap-top {\n top: -160px;\n background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);\n}\n\n.pro-watch-experience .strap-bottom {\n bottom: -160px;\n background: linear-gradient(0deg, #1a1a1a 0%, #2a2a2a 100%);\n}\n\n.pro-watch-experience .ultra-chassis {\n position: relative;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #d1d1d6 0%, #8e8e93 50%, #48484a 100%);\n border-radius: 68px;\n z-index: 10;\n padding: 10px;\n box-sizing: border-box;\n box-shadow:\n 0 40px 80px rgba(0, 0, 0, 0.6),\n inset 0 2px 2px rgba(255, 255, 255, 0.5);\n}\n\n.pro-watch-experience .crown-mechanism {\n position: absolute;\n right: -8px;\n top: 75px;\n width: 22px;\n height: 55px;\n background: linear-gradient(to bottom, #8e8e93, #48484a, #8e8e93);\n border-radius: 8px;\n z-index: 15;\n border-left: 2px solid #000;\n}\n\n.pro-watch-experience .crown-mechanism::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 6px;\n background: var(--accent-orange);\n transform: translateY(-50%);\n filter: blur(1px);\n box-shadow: 0 0 10px var(--accent-orange);\n}\n\n.pro-watch-experience .action-trigger {\n position: absolute;\n left: -4px;\n top: 130px;\n width: 8px;\n height: 90px;\n background: var(--accent-orange);\n border-radius: 6px;\n z-index: 12;\n border: 1.5px solid #000;\n}\n\n.pro-watch-experience .sapphire-glass {\n width: 100%;\n height: 100%;\n background: #000;\n border-radius: 58px;\n overflow: hidden;\n position: relative;\n box-shadow: inset 0 0 30px rgba(0, 0, 0, 1);\n}\n\n.pro-watch-experience .os-overlay {\n position: absolute;\n top: 22px;\n left: 0;\n right: 0;\n padding: 0 50px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 100;\n font-weight: 700;\n font-size: 11px;\n color: #fff;\n}\n\n.pro-watch-experience .bat-percent {\n font-size: 10px;\n color: #4cd964;\n margin-right: 4px;\n}\n\n.pro-watch-experience .viewport-canvas {\n width: 500%;\n height: 100%;\n display: flex;\n transition: transform 0.7s var(--ease-out);\n}\n\n.pro-watch-experience .ui-view {\n width: 20%;\n height: 100%;\n padding: 55px 30px 40px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.pro-watch-experience .complication-top {\n display: flex;\n width: 100%;\n justify-content: space-between;\n margin-bottom: 25px;\n}\n\n.pro-watch-experience .comp-pill {\n background: var(--glass);\n border: 1px solid var(--glass-border);\n padding: 6px 10px;\n border-radius: 20px;\n display: flex;\n align-items: center;\n gap: 5px;\n backdrop-filter: blur(8px);\n}\n\n.pro-watch-experience .comp-pill .val {\n font-size: 10px;\n font-weight: 800;\n color: #fff;\n}\n\n.pro-watch-experience .hero-time {\n text-align: center;\n}\n\n.pro-watch-experience .h-digits {\n font-family: \"JetBrains Mono\", monospace;\n font-size: 76px;\n font-weight: 800;\n color: #fff;\n line-height: 1;\n letter-spacing: -3px;\n}\n\n.pro-watch-experience .h-seconds {\n color: var(--accent-orange);\n font-weight: 900;\n font-size: 20px;\n letter-spacing: 2px;\n}\n\n.pro-watch-experience .complication-bottom {\n margin-top: auto;\n width: 100%;\n}\n\n.pro-watch-experience .wide-pill {\n background: var(--glass);\n border: 1px solid var(--glass-border);\n border-radius: 16px;\n padding: 12px;\n backdrop-filter: blur(10px);\n}\n\n.pro-watch-experience .pill-info {\n display: flex;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n\n.pro-watch-experience .pill-info .label {\n font-size: 8px;\n opacity: 0.6;\n color: #fff;\n font-weight: 800;\n}\n.pro-watch-experience .pill-info .data {\n font-size: 11px;\n color: #fff;\n font-weight: 800;\n}\n\n.pro-watch-experience .pill-gauge {\n height: 4px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 2px;\n}\n\n.pro-watch-experience .gauge-fill {\n width: 72%;\n height: 100%;\n background: var(--accent-orange);\n border-radius: 2px;\n box-shadow: 0 0 10px var(--accent-orange);\n}\n\n.pro-watch-experience .ring-stack {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 15px;\n}\n\n.pro-watch-experience .ring-item {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n padding: 12px;\n border-left: 4px solid var(--c);\n}\n\n.pro-watch-experience .ring-label {\n font-size: 9px;\n font-weight: 800;\n color: var(--c);\n margin-bottom: 2px;\n}\n.pro-watch-experience .ring-stats {\n font-size: 14px;\n font-weight: 800;\n color: #fff;\n}\n.pro-watch-experience .ring-stats small {\n font-size: 9px;\n opacity: 0.5;\n}\n\n.pro-watch-experience .face-vitals-pro {\n justify-content: center;\n}\n\n.pro-watch-experience .vital-header {\n font-size: 10px;\n font-weight: 800;\n letter-spacing: 1px;\n color: #ff3b30;\n margin-bottom: 10px;\n}\n\n.pro-watch-experience .pulse-container {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 80px;\n}\n\n.pro-watch-experience .heart-icon {\n font-size: 40px;\n z-index: 2;\n animation: beat 0.8s infinite;\n}\n\n@keyframes beat {\n 0% {\n transform: scale(1);\n }\n 15% {\n transform: scale(1.2);\n }\n 30% {\n transform: scale(1);\n }\n 45% {\n transform: scale(1.1);\n }\n 60% {\n transform: scale(1);\n }\n}\n\n.pro-watch-experience .vital-value {\n font-size: 60px;\n font-weight: 800;\n color: #fff;\n font-family: \"JetBrains Mono\";\n line-height: 1;\n}\n.pro-watch-experience .vital-unit {\n font-size: 14px;\n font-weight: 800;\n opacity: 0.5;\n color: #fff;\n}\n\n.pro-watch-experience .media-card {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.pro-watch-experience .media-art {\n width: 110px;\n height: 110px;\n background: linear-gradient(135deg, #333, #111);\n border-radius: 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 48px;\n margin-bottom: 20px;\n border: 1px solid var(--glass-border);\n}\n\n.pro-watch-experience .m-title {\n font-size: 18px;\n font-weight: 800;\n color: #fff;\n text-align: center;\n}\n.pro-watch-experience .m-artist {\n font-size: 13px;\n opacity: 0.5;\n color: #fff;\n text-align: center;\n}\n\n.pro-watch-experience .media-controls {\n display: flex;\n align-items: center;\n gap: 30px;\n margin-top: 25px;\n font-size: 24px;\n color: #fff;\n}\n\n.pro-watch-experience .ctrl-play {\n width: 0;\n height: 0;\n border-top: 12px solid transparent;\n border-bottom: 12px solid transparent;\n border-left: 20px solid #fff;\n margin-left: 5px;\n}\n\n.pro-watch-experience .app-honeycomb {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n padding-top: 40px;\n}\n\n.pro-watch-experience .app-node {\n width: 52px;\n height: 52px;\n background: #1c1c1e;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n border: 1px solid rgba(255, 255, 255, 0.05);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n}\n\n.pro-watch-experience .page-indicator {\n position: absolute;\n bottom: 22px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n gap: 8px;\n z-index: 110;\n}\n\n.pro-watch-experience .dot-btn {\n width: 6px;\n height: 6px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n cursor: pointer;\n transition: 0.3s;\n}\n\n.pro-watch-experience #face1:checked ~ .watch-assembly .viewport-canvas {\n transform: translateX(0);\n}\n.pro-watch-experience #face2:checked ~ .watch-assembly .viewport-canvas {\n transform: translateX(-20%);\n}\n.pro-watch-experience #face3:checked ~ .watch-assembly .viewport-canvas {\n transform: translateX(-40%);\n}\n.pro-watch-experience #face4:checked ~ .watch-assembly .viewport-canvas {\n transform: translateX(-60%);\n}\n.pro-watch-experience #face5:checked ~ .watch-assembly .viewport-canvas {\n transform: translateX(-80%);\n}\n\n.pro-watch-experience #face1:checked ~ .watch-assembly .b1,\n.pro-watch-experience #face2:checked ~ .watch-assembly .b2,\n.pro-watch-experience #face3:checked ~ .watch-assembly .b3,\n.pro-watch-experience #face4:checked ~ .watch-assembly .b4,\n.pro-watch-experience #face5:checked ~ .watch-assembly .b5 {\n background: #fff;\n width: 16px;\n border-radius: 4px;\n}\n"}

calm-bobcat-35

👁 实时预览

📝 源代码