{"html":"

\n \n\n

\n 40-189\n bpm\n

\n\n

10 - 17 Sep 2022

\n\n

Avg. 57

\n\n

\n Today (14:00)\n 125\n

\n Today (13:00)\n 110\n

\n","css":".card {\n background: white;\n border-radius: 20px;\n padding: 18px;\n max-width: 260px;\n width: 100%;\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.title {\n font-size: 16px;\n font-weight: 700;\n color: #1a1a1a;\n}\n\n.full-stats-btn {\n background: white;\n border: 1.5px solid #e0e0e0;\n border-radius: 5px;\n padding: 4px 9px;\n font-size: 10px;\n font-weight: 600;\n color: #1a1a1a;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.full-stats-btn:hover {\n background: #f5f5f5;\n border-color: #d0d0d0;\n}\n\n.range {\n margin-bottom: 4px;\n}\n\n.range-value {\n font-size: 30px;\n font-weight: 700;\n color: #1a1a1a;\n letter-spacing: -0.5px;\n}\n\n.range-unit {\n font-size: 28px;\n font-weight: 300;\n color: #b0b0b0;\n margin-left: 4px;\n}\n\n.date-range {\n font-size: 11px;\n color: #999;\n margin-bottom: 20px;\n}\n\n.chart-container {\n position: relative;\n height: 90px;\n margin-bottom: 20px;\n}\n\n.chart {\n display: flex;\n align-items: flex-end;\n justify-content: space-around;\n height: 100%;\n position: relative;\n padding: 0 14px;\n}\n\n.avg-line {\n position: absolute;\n left: 0;\n right: 0;\n top: 45%;\n height: 1.5px;\n background: #e0e0e0;\n z-index: 1;\n}\n\n.avg-label {\n position: absolute;\n top: -35%;\n right: 0;\n background: #1a1a1a;\n color: white;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n z-index: 2;\n}\n\n.bar-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n flex: 1;\n z-index: 2;\n}\n\n.bar-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\n.bar {\n width: 20px;\n background: linear-gradient(to bottom, #ff5a76 0%, #ff8fa3 100%);\n border-radius: 10px;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.bar:hover {\n transform: scale(1.05);\n}\n\n.dot {\n width: 8px;\n height: 8px;\n background: white;\n border: 1.5px solid #ff5a76;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.dot-top {\n top: -4px;\n}\n\n.dot-bottom {\n bottom: -4px;\n}\n\n.day-label {\n font-size: 9px;\n color: #999;\n font-weight: 500;\n}\n\n/* Bar heights - Monday */\n.bar-mo {\n height: 32px;\n margin-bottom: 8px;\n}\n.bar-tu {\n height: 44px;\n margin-bottom: 14px;\n}\n.bar-we {\n height: 25px;\n margin-bottom: 12px;\n}\n.bar-th {\n height: 32px;\n margin-bottom: 10px;\n}\n.bar-fr {\n height: 44px;\n margin-bottom: 14px;\n}\n.bar-sa {\n height: 38px;\n margin-bottom: 12px;\n}\n.bar-su {\n height: 28px;\n margin-bottom: 13px;\n}\n\n.readings {\n border-top: 1.5px solid #f0f0f0;\n padding-top: 12px;\n}\n\n.reading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 0;\n border-bottom: 1.5px solid #f0f0f0;\n}\n\n.reading:last-child {\n border-bottom: none;\n}\n\n.reading-time {\n font-size: 9px;\n color: #999;\n}\n\n.reading-value {\n font-size: 12px;\n font-weight: 700;\n color: #1a1a1a;\n}\n"}

silly-moth-73

👁 实时预览

📝 源代码