{"html":"

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

\n\n

\n 9:41\n 100% ⚡\n

\n\n

\n \n \n \n 22°\n

\n \n \n \n NW\n

\n\n

09:41

\n 35\n

\n\n

\n \n TRAINING\n 12.4 KM\n

\n\n

\n \n \n \n

\n MOVE\n

450/600 CAL

\n \n \n \n

\n EXERCISE\n

32/30 MIN

\n \n \n \n

\n STAND\n

10/12 HRS

\n\n

\n \n \n 72\n

\n BPM\n

\n\n

\n \n \n \n

BANANA BEATS

\n \n FRUIT SQUAD\n

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

\n\n

\n \n

\n \n \n

\n \n

\n \n \n

\n \n

\n \n \n

\n \n

\n \n \n

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

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

\n \n \n \n\n","css":".container {\n --bg: #fdfcf0;\n --titanium: #d1d5db;\n --titanium-light: #f9fafb;\n --titanium-dark: #9ca3af;\n --screen-bg: #fffef2;\n --ring-red: #ff3b30;\n --ring-green: #34c759;\n --ring-blue: #007aff;\n --banana: #eab308;\n --banana-light: #fef9c3;\n --text-main: #1c1c1e;\n --text-dim: #8e8e93;\n --case-shadow: rgba(0, 0, 0, 0.15);\n\n --watch-w: 310px;\n --watch-h: 375px;\n --ease: cubic-bezier(0.2, 1, 0.2, 1);\n\n margin: 0;\n min-height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg);\n background-image: radial-gradient(\n circle at 10% 10%,\n #fef9c3 0%,\n transparent 40%\n ),\n radial-gradient(circle at 90% 90%, #fef08a 0%, transparent 40%);\n font-family:\n \"Inter\",\n -apple-system,\n sans-serif;\n overflow: hidden;\n user-select: none;\n}\n\n.container input[type=\"radio\"] {\n display: none;\n}\n\n.watch-container {\n position: relative;\n width: var(--watch-w);\n height: var(--watch-h);\n perspective: 2000px;\n}\n\n.strap {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 148px;\n height: 180px;\n background: #e2e4e9;\n border-radius: 18px;\n z-index: 1;\n box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.08);\n}\n.strap.top {\n top: -150px;\n background: linear-gradient(to top, #e2e4e9, #f3f4f6);\n}\n.strap.bottom {\n bottom: -150px;\n background: linear-gradient(to bottom, #e2e4e9, #f3f4f6);\n}\n\n.watch-case {\n position: relative;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 145deg,\n var(--titanium-light),\n var(--titanium),\n var(--titanium-dark)\n );\n border-radius: 68px;\n z-index: 10;\n box-shadow:\n 0 60px 100px var(--case-shadow),\n inset 0 1px 1px rgba(255, 255, 255, 0.9),\n inset 0 -3px 10px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n box-sizing: border-box;\n border: 1px solid #c2c6cc;\n}\n\n.crown-well {\n position: absolute;\n right: -2px;\n top: 55px;\n width: 12px;\n height: 90px;\n background: rgba(0, 0, 0, 0.15);\n border-radius: 10px;\n z-index: 8;\n box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.2);\n}\n\n.crown {\n position: absolute;\n right: -12px;\n top: 75px;\n width: 20px;\n height: 50px;\n background: linear-gradient(to right, #d1d5db, #f3f4f6, #9ca3af);\n border-radius: 6px;\n z-index: 20;\n box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.15);\n}\n.crown::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n background: radial-gradient(circle, #f3f4f6 30%, #9ca3af 100%);\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.1);\n z-index: 21;\n}\n.crown::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.08) 0,\n rgba(0, 0, 0, 0.08) 1px,\n transparent 1px,\n transparent 3px\n );\n border-radius: 6px;\n}\n\n.side-btn-well {\n position: absolute;\n right: -2px;\n top: 155px;\n width: 8px;\n height: 65px;\n background: rgba(0, 0, 0, 0.15);\n border-radius: 10px;\n z-index: 8;\n box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.1);\n}\n\n.side-btn {\n position: absolute;\n right: -6px;\n top: 162px;\n width: 9px;\n height: 50px;\n background: linear-gradient(to right, #9ca3af, #d1d5db);\n border-radius: 4px;\n z-index: 15;\n border: 1px solid #8e939c;\n box-shadow:\n inset 0 1px 1px rgba(255, 255, 255, 0.6),\n 1px 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.action-btn-well {\n position: absolute;\n left: -2px;\n top: 125px;\n width: 8px;\n height: 90px;\n background: rgba(0, 0, 0, 0.15);\n border-radius: 10px;\n z-index: 8;\n box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.1);\n}\n\n.action-btn {\n position: absolute;\n left: -6px;\n top: 135px;\n width: 9px;\n height: 70px;\n background: linear-gradient(to left, var(--banana), #facc15);\n border-radius: 4px;\n z-index: 15;\n border: 1px solid #ca8a04;\n box-shadow:\n inset 0 1px 2px rgba(255, 255, 255, 0.6),\n -1px 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.display-unit {\n width: 100%;\n height: 100%;\n background: var(--screen-bg);\n border-radius: 58px;\n overflow: hidden;\n position: relative;\n box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.02);\n border: 5px solid #000;\n}\n\n.display-unit::after {\n content: \"\";\n position: absolute;\n top: -40%;\n left: -40%;\n width: 150%;\n height: 150%;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.4) 0%,\n transparent 35%,\n transparent 65%,\n rgba(255, 255, 255, 0.1) 100%\n );\n z-index: 100;\n pointer-events: none;\n transition: 0.8s var(--ease);\n}\n.watch-case:hover .display-unit::after {\n transform: translate(20px, 20px);\n}\n\n.status-bar {\n position: absolute;\n top: 24px;\n left: 0;\n right: 0;\n padding: 0 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 11px;\n font-weight: 800;\n color: var(--text-main);\n z-index: 80;\n}\n\n.view-wrapper {\n width: 500%;\n height: 100%;\n display: flex;\n transition: transform 0.8s var(--ease);\n}\n\n.view {\n width: 20%;\n height: 100%;\n padding: 55px 35px 25px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n position: relative;\n color: var(--text-main);\n}\n\n.face-ultra {\n align-items: center;\n justify-content: center;\n}\n\n.main-time {\n text-align: center;\n margin-top: 10px;\n}\n.main-time .h2 {\n font-family: \"JetBrains Mono\", monospace;\n font-size: 74px;\n margin: 0;\n font-weight: 800;\n letter-spacing: -5px;\n color: var(--text-main);\n line-height: 0.85;\n}\n.main-time span {\n color: var(--banana);\n font-size: 22px;\n font-weight: 800;\n letter-spacing: 2px;\n}\n\n.comp {\n position: absolute;\n background: rgba(0, 0, 0, 0.04);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 700;\n}\n.comp-top-left {\n top: 72px;\n left: 45px;\n width: 52px;\n height: 52px;\n}\n.comp-top-right {\n top: 72px;\n right: 45px;\n width: 52px;\n height: 52px;\n}\n.comp-bottom {\n bottom: 65px;\n left: 45px;\n right: 45px;\n height: 48px;\n flex-direction: row;\n justify-content: space-between;\n padding: 0 15px;\n}\n\n.progress {\n width: 100%;\n height: 6px;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 10px;\n margin-top: 6px;\n overflow: hidden;\n}\n.bar {\n height: 100%;\n background: var(--banana);\n width: 75%;\n}\n\n.activity-view {\n justify-content: center;\n gap: 24px;\n}\n.act-row {\n display: flex;\n align-items: center;\n gap: 18px;\n}\n.act-circle {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.hr-view {\n align-items: center;\n justify-content: center;\n}\n.heart-svg {\n width: 50px;\n height: 50px;\n fill: var(--ring-red);\n animation: beat 0.8s infinite;\n}\n@keyframes beat {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.1);\n filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3));\n }\n}\n\n.player-view {\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n.cover {\n width: 120px;\n height: 120px;\n background: var(--banana-light);\n border-radius: 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 25px;\n border: 1px solid rgba(0, 0, 0, 0.05);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\n}\n\n.grid-view {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 15px;\n padding-top: 40px;\n width: 100%;\n max-width: 210px;\n margin: 0 auto;\n}\n.app {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.icon-box {\n width: 52px;\n height: 52px;\n border-radius: 16px;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n border: 1px solid #f1f5f9;\n}\n.icon-box svg {\n width: 28px;\n height: 28px;\n}\n\n.nav {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 8px;\n z-index: 150;\n}\n.dot {\n width: 7px;\n height: 7px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n cursor: pointer;\n transition: 0.4s var(--ease);\n}\n\n#f1:checked ~ .watch-container .view-wrapper {\n transform: translateX(0);\n}\n#f2:checked ~ .watch-container .view-wrapper {\n transform: translateX(-20%);\n}\n#f3:checked ~ .watch-container .view-wrapper {\n transform: translateX(-40%);\n}\n#f4:checked ~ .watch-container .view-wrapper {\n transform: translateX(-60%);\n}\n#f5:checked ~ .watch-container .view-wrapper {\n transform: translateX(-80%);\n}\n\n#f1:checked ~ .watch-container .d1 {\n background: var(--text-main);\n width: 18px;\n border-radius: 4px;\n}\n#f2:checked ~ .watch-container .d2 {\n background: var(--text-main);\n width: 18px;\n border-radius: 4px;\n}\n#f3:checked ~ .watch-container .d3 {\n background: var(--text-main);\n width: 18px;\n border-radius: 4px;\n}\n#f4:checked ~ .watch-container .d4 {\n background: var(--text-main);\n width: 18px;\n border-radius: 4px;\n}\n#f5:checked ~ .watch-container .d5 {\n background: var(--text-main);\n width: 18px;\n border-radius: 4px;\n}\n\n.container svg {\n fill: currentColor;\n}\n"}

warm-chicken-23

👁 实时预览

📝 源代码