{"html":"

\n \n

\n \n \n \n

Meeting Reminder

now

\n Team standup starts in 15 minutes\n

\n Conference Room A • Zoom Link Available\n

\n\n

\n \n

\n \n \n \n \n

New Email

\n Project update from Sarah Johnson\n

\n\n

\n \n

John Doe

\n Hey! Are we still on for lunch today?\n

\n","css":".notification-container {\n position: relative;\n width: 380px;\n height: 120px;\n margin: 0 auto;\n}\n\n.notification-card {\n position: absolute;\n width: 100%;\n cursor: pointer;\n transition: all 0.3s ease-out;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n}\n\n.notification-card:hover {\n transform: translateY(-4px);\n}\n\n.notification-card:active {\n transform: scale(0.98);\n}\n\n.notification-top {\n z-index: 30;\n top: 0;\n}\n\n.notification-top:hover {\n transform: translateY(-4px) scale(1.01);\n}\n\n.notification-middle {\n z-index: 20;\n top: 20px;\n transform: scale(0.94);\n opacity: 0.75;\n}\n\n.notification-middle:hover {\n transform: translateY(-4px) scale(0.96);\n opacity: 0.85;\n}\n\n.notification-bottom {\n z-index: 10;\n top: 40px;\n transform: scale(0.88);\n opacity: 0.5;\n}\n\n.notification-bottom:hover {\n transform: translateY(-4px) scale(0.9);\n opacity: 0.65;\n}\n\n.notification-svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 80px;\n}\n\n.notification-path {\n transition: all 0.3s ease;\n}\n\n.notification-card:hover .notification-path {\n stroke: rgba(255, 255, 255, 0.25);\n}\n\n.notification-content {\n position: relative;\n padding: 16px 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n height: 80px;\n}\n\n.notification-avatar {\n width: 40px;\n height: 40px;\n border-radius: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: rgba(255, 255, 255, 0.08);\n border: 1px solid rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\n.user-avatar {\n font-size: 14px;\n font-weight: 600;\n color: #ffffff;\n}\n\n.notification-body {\n flex: 1;\n min-width: 0;\n}\n\n.notification-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n}\n\n.notification-title {\n font-size: 15px;\n font-weight: 600;\n color: #ffffff;\n line-height: 1.2;\n}\n\n.notification-time {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.6);\n font-weight: 400;\n}\n\n.notification-message {\n font-size: 13px;\n color: rgba(255, 255, 255, 0.8);\n line-height: 1.3;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.notification-meta {\n display: flex;\n align-items: center;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.5);\n margin-top: 2px;\n}\n\n.notification-meta svg {\n width: 10px;\n height: 10px;\n margin-right: 4px;\n fill: currentColor;\n}\n\n.status-indicators {\n position: absolute;\n bottom: 2rem;\n right: 2rem;\n}\n\n.status-text {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.4);\n margin-bottom: 6px;\n text-align: center;\n}\n\n.status-dots {\n display: flex;\n gap: 6px;\n justify-content: center;\n}\n\n.status-dot-large {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n.status-active {\n background: rgba(255, 255, 255, 0.7);\n}\n\n.status-inactive-1 {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.status-inactive-2 {\n background: rgba(255, 255, 255, 0.1);\n}\n"}

nasty-otter-93

👁 实时预览

📝 源代码