{"html":"

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

\n\n

\n Wednesday\n

16:45

\n \n JAN 07\n

\n\n

\n \n

12,450

\n \n DAILY STEPS\n

\n\n

\n \n

\n \n \n

\n \n

\n \n \n

\n \n

\n\n

\n \n \n

SUNNY

\n \n 22° CELSIUS\n

\n \n\n

\n \n \n SETTINGS\n

\n \n AIRPLANE\n OFF\n \n \n WIFI\n CONNECTED\n \n \n BLUETOOTH\n ACTIVE\n \n \n \n \n\n

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

\n \n \n \n\n","css":".container {\n --bg: #f8fafc;\n --metal: #cbd5e1;\n --metal-light: #f1f5f9;\n --metal-dark: #64748b;\n --screen-bg: #ffffff;\n --ring-red: #ff3b30;\n --ring-green: #10b981;\n --ring-blue: #0ea5e9;\n --accent: #10b981;\n --text-main: #0f172a;\n --text-dim: #94a3b8;\n --case-shadow: rgba(0, 0, 0, 0.12);\n\n --watch-size: 340px;\n --screen-size: 300px;\n --ease: cubic-bezier(0.16, 1, 0.3, 1);\n\n margin: 0;\n min-height: 100%;\n\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 20% 20%,\n #ecfdf5 0%,\n transparent 40%\n ),\n radial-gradient(circle at 80% 80%, #f0fdf4 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-size);\n height: var(--watch-size);\n perspective: 2000px;\n}\n\n.strap {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 140px;\n height: 200px;\n background: #e2e8f0;\n border-radius: 10px;\n z-index: 1;\n box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.05);\n}\n.strap.top {\n top: -160px;\n background: linear-gradient(to top, #e2e8f0, #f8fafc);\n}\n.strap.bottom {\n bottom: -160px;\n background: linear-gradient(to bottom, #e2e8f0, #f8fafc);\n}\n\n.watch-case {\n position: relative;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n var(--metal-light) 0%,\n var(--metal) 70%,\n var(--metal-dark) 100%\n );\n border-radius: 50%;\n z-index: 10;\n box-shadow:\n 0 40px 80px var(--case-shadow),\n inset 0 2px 2px rgba(255, 255, 255, 0.8),\n inset 0 -4px 10px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px;\n box-sizing: border-box;\n border: 2px solid #94a3b8;\n}\n\n.pusher {\n position: absolute;\n width: 14px;\n height: 28px;\n background: linear-gradient(to right, #cbd5e1, #f1f5f9);\n border: 1px solid #64748b;\n border-radius: 4px;\n z-index: 5;\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);\n}\n.p-top {\n top: 20%;\n right: 2%;\n transform: rotate(45deg);\n}\n.p-bottom {\n bottom: 20%;\n right: 2%;\n transform: rotate(-45deg);\n}\n\n.main-crown {\n position: absolute;\n right: -10px;\n top: 50%;\n transform: translateY(-50%);\n width: 22px;\n height: 44px;\n background: linear-gradient(to bottom, #94a3b8, #f1f5f9, #94a3b8);\n border: 1.5px solid #64748b;\n border-radius: 6px;\n z-index: 15;\n box-shadow: 3px 0 8px rgba(0, 0, 0, 0.1);\n}\n.main-crown::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.1) 0,\n rgba(0, 0, 0, 0.1) 1px,\n transparent 1px,\n transparent 3px\n );\n border-radius: 4px;\n}\n\n.display-unit {\n width: var(--screen-size);\n height: var(--screen-size);\n background: var(--screen-bg);\n border-radius: 50%;\n overflow: hidden;\n position: relative;\n box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);\n border: 6px solid #4d608fdb;\n}\n\n.display-unit::after {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.6) 0%,\n transparent 40%,\n transparent 60%,\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\n.bezel-ring {\n position: absolute;\n inset: 0;\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 50%;\n z-index: 90;\n pointer-events: none;\n}\n\n.view-wrapper {\n width: 500%;\n height: 100%;\n display: flex;\n transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.view {\n width: 20%;\n height: 100%;\n padding: 50px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n color: var(--text-main);\n text-align: center;\n}\n\n.complication-arc {\n position: absolute;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n border: 6px solid #f1f5f9;\n}\n.arc-fill {\n position: absolute;\n inset: -6px;\n border-radius: 50%;\n border: 6px solid transparent;\n border-top-color: var(--accent);\n transform: rotate(-45deg);\n}\n\n.solar-time .h2 {\n font-family: \"JetBrains Mono\", monospace;\n font-size: 64px;\n margin: 0;\n font-weight: 800;\n letter-spacing: -4px;\n color: var(--text-main);\n}\n.solar-time span {\n color: var(--accent);\n font-size: 14px;\n font-weight: 800;\n letter-spacing: 4px;\n text-transform: uppercase;\n}\n\n.grid-circle {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n padding: 20px;\n width: 100%;\n max-width: 200px;\n}\n.circular-app {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);\n border: 1px solid #f1f5f9;\n}\n.circular-app svg {\n width: 24px;\n height: 24px;\n}\n\n.health-hero {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.health-ring {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n border: 10px solid #f1f5f9;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.health-ring svg {\n width: 40px;\n height: 40px;\n fill: var(--ring-green);\n}\n\n.nav {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 6px;\n z-index: 150;\n}\n.dot {\n width: 6px;\n height: 6px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n cursor: pointer;\n transition: 0.4s var(--ease);\n}\n\n#v1:checked ~ .watch-container .view-wrapper {\n transform: translateX(0);\n}\n#v2:checked ~ .watch-container .view-wrapper {\n transform: translateX(-20%);\n}\n#v3:checked ~ .watch-container .view-wrapper {\n transform: translateX(-40%);\n}\n#v4:checked ~ .watch-container .view-wrapper {\n transform: translateX(-60%);\n}\n#v5:checked ~ .watch-container .view-wrapper {\n transform: translateX(-80%);\n}\n\n#v1:checked ~ .watch-container .d1 {\n background: var(--text-main);\n width: 14px;\n border-radius: 3px;\n}\n#v2:checked ~ .watch-container .d2 {\n background: var(--text-main);\n width: 14px;\n border-radius: 3px;\n}\n#v3:checked ~ .watch-container .d3 {\n background: var(--text-main);\n width: 14px;\n border-radius: 3px;\n}\n#v4:checked ~ .watch-container .d4 {\n background: var(--text-main);\n width: 14px;\n border-radius: 3px;\n}\n#v5:checked ~ .watch-container .d5 {\n background: var(--text-main);\n width: 14px;\n border-radius: 3px;\n}\n\n.container svg {\n fill: currentColor;\n}\n"}

tough-fish-36

👁 实时预览

📝 源代码