{"html":"\n\n

\n \n

\n\n

Mar

\n\n

MARCH

\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 \n \n \n \n \n \n \n \n \n \n \n

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

\n\n

Friday

Lunar Feb 9th

\n","css":"#night-mode-toggle {\n display: none;\n}\n.calendar {\n width: 180px;\n position: relative;\n box-shadow: -10px 5px 10px rgba(0, 0, 0, 0.2);\n background: #fff;\n}\n\n.calendar::after {\n content: \"\";\n display: block;\n position: absolute;\n top: -2px;\n left: -8px;\n width: 8px;\n height: 100%;\n background: #bbb;\n transform: skew(0, 20deg);\n border-left: 1px solid #999;\n}\n\n.header {\n padding: 5px 10px;\n background: #e3e3e3;\n color: #aaa;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 2;\n}\n.header p {\n margin: 0;\n font-size: 11px;\n font-weight: bold;\n}\n.pin {\n width: 15px;\n height: 15px;\n background: #f6f6f6;\n border-radius: 50%;\n}\n\n.hook {\n width: 80%;\n height: 25px;\n background: linear-gradient(0deg, rgba(163, 163, 163, 0.3) 0%, #e3e3e3 100%);\n position: absolute;\n z-index: 1;\n left: 7%;\n top: -28px;\n border-radius: 4px 4px 0 0;\n}\n.hook::before {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 10px;\n height: 12px;\n background: var(--bgLight);\n border-radius: 100%;\n}\n\n.body {\n background: linear-gradient(-30deg, #fff 20%, #f8f8f8 70%);\n padding: 15px 15px 10px;\n color: var(--mainColor);\n position: relative;\n z-index: 3;\n}\n.body::before,\n.body::after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 50%;\n width: 4px;\n height: 10px;\n}\n.body::before {\n background: var(--secondColor);\n margin-top: -10px;\n}\n.body::after {\n background: var(--mainColor);\n}\n\n.month {\n font-weight: bold;\n font-size: 11px;\n text-transform: uppercase;\n}\n.month p {\n margin: 0;\n}\n\n.date {\n font-size: 110px;\n font-weight: 700;\n text-align: center;\n color: var(--secondColor);\n font-family: \"Anton\";\n margin: -20px 0 0 5px;\n transform: scale(1, 0.9);\n letter-spacing: 2px;\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n}\n\n.fullMonth {\n width: 35%;\n}\n.fullMonth .title {\n font-size: 7px;\n font-weight: bold;\n color: #888;\n}\n.fullMonth table {\n font-size: 6px;\n border-collapse: collapse;\n transform: scale(0.95);\n transform-origin: left top;\n color: #666;\n}\n.fullMonth th {\n color: var(--secondColor);\n}\n.fullMonth .now {\n background: var(--secondColor);\n color: #000;\n border-radius: 50%;\n}\n\n.week {\n text-align: center;\n flex: 1;\n}\n.week .day {\n font-size: 18px;\n font-weight: bold;\n margin: 0;\n color: #333;\n}\n.week .lunar {\n font-family: \"Oswald\";\n font-size: 9px;\n color: #999;\n}\n\n.icons {\n display: flex;\n flex-direction: column;\n gap: 3px;\n color: var(--mainColor);\n opacity: 0.6;\n}\n.material-icons {\n font-size: 12px;\n}\n"}

yellow-kangaroo-18

👁 实时预览

📝 源代码