{"html":"

Notifications

\n\n \n \n

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

\n Push Notifications\n \n\n \n \n

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

\n Email Updates\n \n\n \n \n

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

\n Monthly Newsletter\n \n\n \n \n

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

\n Promotional Offers\n \n

\n","css":".toggle-container {\n --bg-top: #ffffff;\n --bg-btm: #182235;\n --bg: #f7f7f7;\n --card: #acb3bf;\n --card-2: #59616c;\n\n --shadow-dark: #515151;\n --shadow-light: #526d91;\n\n --primary: #d7f63b;\n --primary-2: #ebdb25;\n --primary-3: #d8b91d;\n\n --success: #10b981;\n --warning: #f59e0b;\n --danger: #ef4444;\n\n --text: #e2e8f0;\n --muted: #a59c9c;\n --muted-2: #242d3b;\n --ring: rgba(59, 130, 246, 0.55);\n\n --elev-outer-a: 18px 18px 36px var(--shadow-dark);\n --elev-outer-b: -18px -18px 36px rgba(255, 255, 255, 0.08);\n\n --card-outer-a: 12px 12px 24px rgba(0, 0, 0, 0.5);\n --card-outer-b: -12px -12px 24px rgba(255, 255, 255, 0.06);\n\n --switch-outer-a: 6px 6px 12px rgba(0, 0, 0, 0.45);\n --switch-outer-b: -6px -6px 12px rgba(255, 255, 255, 0.07);\n\n --ao-rim: inset 0 0 0.5px 1px rgba(255, 255, 255, 0.04);\n --shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.25);\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 310px;\n padding: 35px 25px;\n position: relative;\n\n background: radial-gradient(\n 120% 100% at 0% 0%,\n rgba(255, 255, 255, 0.05) 0%,\n transparent 50%\n ),\n linear-gradient(145deg, var(--bg-top), var(--bg-btm));\n box-shadow:\n inset 2px 2px 2px rgba(0, 0, 0, 0.416),\n -2px -2px 2px rgba(255, 255, 255, 0.438) inset;\n border: 2px solid rgba(255, 255, 255, 0.06);\n backdrop-filter: saturate(110%) blur(0.4px);\n overflow: hidden;\n}\n\n.toggle-container::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-image: radial-gradient(\n 1px 1px at 25% 30%,\n rgba(255, 255, 255, 0.03) 0,\n transparent 60%\n ),\n radial-gradient(1px 1px at 60% 70%, rgba(0, 0, 0, 0.06) 0, transparent 60%);\n background-size:\n 140px 140px,\n 180px 180px;\n mix-blend-mode: soft-light;\n opacity: 0.35;\n}\n\n.toggle-container::before {\n content: \"\";\n position: absolute;\n inset: 2px 2px auto 2px;\n height: 44px;\n border-radius: 18px 18px 12px 12px;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.1),\n rgba(255, 255, 255, 0)\n );\n pointer-events: none;\n}\n\n.toggle-title {\n color: gray;\n font-size: 22px;\n font-weight: 800;\n letter-spacing: 0.2px;\n margin-bottom: 14px;\n}\n\n.toggle-label {\n display: flex;\n align-items: center;\n gap: 14px;\n cursor: pointer;\n padding: 14px 16px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(0, 0, 0, 0.06)\n ),\n linear-gradient(145deg, var(--card), var(--card-2));\n\n border: 1px solid rgba(255, 255, 255, 0.06);\n transition:\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.toggle-label:hover {\n /* transform: translateY(-1px); */\n box-shadow:\n 1px 1px 2px rgba(0, 0, 0, 0.21) inset,\n -1px -1px 2px rgba(255, 255, 255, 0.333) inset,\n var(--shadow-ring);\n}\n\n.toggle-input {\n position: absolute;\n opacity: 0;\n width: 1px;\n height: 1px;\n margin: 0;\n}\n\n.toggle-input:focus-visible + .toggle-switch,\n.toggle-input:focus-visible ~ .toggle-text {\n outline: 0;\n box-shadow:\n 0 0 0 3px var(--ring),\n 0 0 0 6px rgba(59, 130, 246, 0.15),\n var(--card-outer-a),\n var(--card-outer-b);\n border-radius: 16px;\n}\n\n.toggle-switch {\n width: 56px;\n height: 32px;\n border-radius: 999px;\n position: relative;\n flex-shrink: 0;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.06),\n rgba(0, 0, 0, 0.08)\n ),\n linear-gradient(145deg, #2b3b58, #192337);\n box-shadow:\n var(--switch-outer-a),\n var(--switch-outer-b),\n inset 0 0 0 rgba(0, 0, 0, 0);\n transition:\n background 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.toggle-switch::before {\n content: \"\";\n position: absolute;\n inset: 2px 2px auto 2px;\n height: 10px;\n border-radius: 999px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.18),\n rgba(255, 255, 255, 0)\n );\n}\n\n.toggle-handle {\n width: 24px;\n height: 24px;\n position: absolute;\n top: 4px;\n left: 4px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: radial-gradient(\n 120% 120% at 30% 30%,\n rgba(255, 255, 255, 0.85),\n rgba(255, 255, 255, 0.6) 45%,\n rgba(210, 220, 235, 0.4) 60%,\n rgba(140, 150, 170, 0.18) 80%,\n rgba(100, 110, 130, 0.1) 100%\n ),\n linear-gradient(145deg, #cfd8e3, #aeb9c9);\n box-shadow:\n 2px 2px 4px rgba(0, 0, 0, 0.35),\n -2px -2px 4px rgba(255, 255, 255, 0.25),\n inset 0 1px 2px rgba(255, 255, 255, 0.65);\n transition:\n transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.toggle-handle::after {\n content: \"\";\n position: absolute;\n inset: -20% -20%;\n border-radius: 50%;\n background: conic-gradient(\n from 210deg,\n rgba(255, 255, 255, 0) 0 40%,\n rgba(255, 255, 255, 0.5) 55%,\n rgba(255, 255, 255, 0) 70% 100%\n );\n opacity: 0;\n transform: rotate(0deg);\n transition: opacity 0.25s ease;\n}\n\n.toggle-icon {\n position: absolute;\n width: 13px;\n height: 13px;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n transition:\n opacity 0.25s ease,\n transform 0.25s ease,\n filter 0.25s ease;\n}\n.icon-cross {\n stroke: #4f5d75;\n opacity: 1;\n transform: scale(1);\n filter: drop-shadow(0.5px 1px 0 rgba(0, 0, 0, 0.35));\n}\n.icon-check {\n stroke: #ffffff;\n opacity: 0;\n transform: scale(0.6);\n filter: drop-shadow(0.5px 1px 0 rgba(0, 0, 0, 0.35));\n}\n\n.toggle-text {\n color: var(--text);\n font-size: 16px;\n letter-spacing: 0.2px;\n position: relative;\n text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);\n transition: color 0.35s ease;\n}\n\n.toggle-text::after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 52%;\n height: 2px;\n width: 100%;\n background-color: var(--muted);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.35s ease;\n opacity: 0.9;\n}\n\n.toggle-input:checked + .toggle-switch {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.1),\n rgba(0, 0, 0, 0.12)\n ),\n linear-gradient(145deg, var(--primary), var(--primary-2));\n box-shadow:\n inset 8px 8px 16px rgba(0, 0, 0, 0.4),\n inset -8px -8px 16px rgba(255, 255, 255, 0.2),\n 2px 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.toggle-input:checked + .toggle-switch .toggle-handle {\n transform: translateX(24px);\n background: radial-gradient(\n 120% 120% at 30% 30%,\n rgba(255, 255, 255, 0.92),\n rgba(255, 255, 255, 0.72) 45%,\n rgba(220, 228, 240, 0.5) 60%,\n rgba(140, 150, 170, 0.22) 80%,\n rgba(100, 110, 130, 0.12) 100%\n ),\n linear-gradient(145deg, #ffffff, #e7eef8);\n}\n\n@keyframes sheen-sweep {\n 0% {\n transform: rotate(0deg);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 60% {\n transform: rotate(340deg);\n opacity: 1;\n }\n 100% {\n transform: rotate(420deg);\n opacity: 0;\n }\n}\n.toggle-input:checked + .toggle-switch .toggle-handle::after {\n animation: sheen-sweep 800ms ease-out 1;\n}\n\n.toggle-input:checked + .toggle-switch .icon-cross {\n opacity: 0;\n transform: scale(0.5);\n}\n.toggle-input:checked + .toggle-switch .icon-check {\n opacity: 1;\n transform: scale(1);\n}\n\n.toggle-input:checked ~ .toggle-text {\n color: var(--muted-2);\n}\n.toggle-input:checked ~ .toggle-text::after {\n transform: scaleX(1);\n}\n\n.toggle-label:active {\n transform: translateY(0);\n filter: saturate(1.02);\n}\n\n.toggle-label[aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.toggle-label.is-danger .toggle-switch {\n background: linear-gradient(145deg, #7f1d1d, #3f0e0e);\n}\n.toggle-label.is-success .toggle-switch {\n background: linear-gradient(145deg, #065f46, #064e3b);\n}\n\n.theme--clay .toggle-label {\n background: linear-gradient(145deg, #243756, #1b2840);\n box-shadow:\n 0 12px 24px rgba(0, 0, 0, 0.45),\n inset 6px 6px 12px rgba(0, 0, 0, 0.3),\n inset -6px -6px 12px rgba(255, 255, 255, 0.1);\n border: none;\n}\n.theme--clay .toggle-switch {\n box-shadow:\n 0 10px 18px rgba(0, 0, 0, 0.45),\n inset 6px 6px 12px rgba(0, 0, 0, 0.32),\n inset -6px -6px 12px rgba(255, 255, 255, 0.12);\n}\n\n.theme--glass {\n background: radial-gradient(\n 120% 100% at 0% 0%,\n rgba(255, 255, 255, 0.05) 0%,\n transparent 50%\n ),\n linear-gradient(145deg, rgba(34, 49, 73, 0.55), rgba(24, 34, 53, 0.55));\n backdrop-filter: blur(10px) saturate(120%);\n border: 1px solid rgba(255, 255, 255, 0.18);\n box-shadow:\n 0 10px 30px rgba(0, 0, 0, 0.35),\n inset 0 0 0 1px rgba(255, 255, 255, 0.05);\n}\n.theme--glass .toggle-label {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.06),\n rgba(0, 0, 0, 0.1)\n ),\n rgba(34, 49, 73, 0.35);\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n.theme--glass .toggle-switch {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.14),\n rgba(0, 0, 0, 0.12)\n ),\n rgba(43, 59, 88, 0.45);\n border: 1px solid rgba(255, 255, 255, 0.22);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toggle-label,\n .toggle-switch,\n .toggle-handle,\n .toggle-icon,\n .toggle-text::after,\n .toggle-handle::after {\n transition-duration: 0.01ms !important;\n transition-delay: 0ms !important;\n animation: none !important;\n }\n}\n\n@media (forced-colors: active) {\n .toggle-container,\n .toggle-label,\n .toggle-switch,\n .toggle-handle {\n box-shadow: none !important;\n background: Canvas !important;\n border: 1px solid ButtonText;\n }\n .toggle-text {\n color: ButtonText !important;\n }\n .toggle-input:focus-visible + .toggle-switch {\n outline: 2px solid Highlight;\n }\n}\n\n@media (max-width: 360px) {\n .toggle-container {\n padding: 16px;\n width: 100%;\n }\n .toggle-label {\n gap: 12px;\n padding: 12px 14px;\n }\n .toggle-switch {\n width: 52px;\n height: 28px;\n }\n .toggle-handle {\n width: 20px;\n height: 20px;\n }\n .toggle-title {\n font-size: 20px;\n }\n}\n"}

clever-starfish-28

👁 实时预览

📝 源代码