{"html":"

\n\n

\n\n \n\n

\n Status\n Active\n

\n Efficiency\n 99.8%\n

\n Latency\n 0.02ms\n

\n Load\n Nominal\n

\n\n

\n The next evolution of light-based interfaces. Ethereal Core uses\n photon-trapping glass to provide crystal clear clarity and zero-latency\n interactions in 2050 environments.\n

\n\n

\n \n

\n","css":".body {\n background-color: #f8f9fa;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Inter\", sans-serif;\n overflow: hidden;\n perspective: 2000px;\n color: #1a1a1e;\n}\n\n.body::before {\n content: \"\";\n position: absolute;\n width: 140%;\n height: 140%;\n background: radial-gradient(\n circle at 20% 30%,\n rgba(0, 229, 255, 0.08) 0%,\n transparent 40%\n ),\n radial-gradient(\n circle at 80% 70%,\n rgba(112, 0, 255, 0.08) 0%,\n transparent 40%\n );\n animation: nebula-float 20s ease-in-out infinite alternate;\n z-index: -1;\n}\n\n@keyframes nebula-float {\n from {\n transform: translate(-10%, -10%) rotate(0deg);\n }\n to {\n transform: translate(5%, 5%) rotate(5deg);\n }\n}\n\n.card-frame {\n position: relative;\n width: 360px;\n height: 480px;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n transform-style: preserve-3d;\n}\n\n.card-frame:hover {\n transform: rotateY(10deg) rotateX(5deg) scale(1.02);\n}\n\n.laser-border {\n position: absolute;\n inset: -2px;\n border-radius: 32px;\n z-index: 1;\n overflow: hidden;\n}\n\n.laser-border::before {\n content: \"\";\n position: absolute;\n width: 200%;\n height: 200%;\n top: -50%;\n left: -50%;\n background: conic-gradient(\n transparent 70%,\n #00d2ff,\n #9d50bb,\n transparent 90%\n );\n animation: rotate-border 3s linear infinite;\n}\n\n.laser-border::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: inherit;\n filter: blur(15px);\n opacity: 0.2;\n animation: pulse-glow 4s ease-in-out infinite;\n}\n\n.card-body {\n position: relative;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.7);\n border-radius: 30px;\n padding: 30px;\n z-index: 2;\n overflow: hidden;\n border: 1px solid rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(40px) saturate(200%);\n display: flex;\n flex-direction: column;\n box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.08);\n}\n\n.header {\n margin-bottom: 50px;\n}\n\n.system-tag {\n font-size: 0.6rem;\n text-transform: uppercase;\n letter-spacing: 5px;\n color: #7000ff;\n margin-bottom: 8px;\n display: block;\n font-weight: 700;\n}\n\n.main-title {\n font-size: 2.5rem;\n font-weight: 100;\n letter-spacing: -1px;\n line-height: 1;\n color: #000;\n}\n\n.main-title b {\n font-weight: 700;\n}\n\n.metrics {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 40px;\n}\n\n.metric-box {\n border-left: 1px solid rgba(0, 0, 0, 0.05);\n padding-left: 15px;\n position: relative;\n}\n\n.metric-box::before {\n content: \"\";\n position: absolute;\n left: -1px;\n top: 0;\n width: 1px;\n height: 0%;\n background: #00e5ff;\n transition: height 0.5s ease;\n}\n\n.card-frame:hover .metric-box::before {\n height: 100%;\n}\n\n.metric-label {\n font-size: 0.65rem;\n text-transform: uppercase;\n color: rgba(0, 0, 0, 0.4);\n margin-bottom: 4px;\n display: block;\n}\n\n.metric-value {\n font-size: 1.1rem;\n font-weight: 400;\n color: #333;\n}\n\n.description {\n font-size: 0.85rem;\n color: rgba(0, 0, 0, 0.6);\n line-height: 1.6;\n font-weight: 400;\n margin-bottom: auto;\n}\n\n.btn-container {\n margin-top: 30px;\n}\n\n.action-btn {\n width: 100%;\n background: #000;\n border: none;\n color: #fff;\n padding: 18px;\n border-radius: 15px;\n cursor: pointer;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n transition: all 0.4s ease;\n position: relative;\n overflow: hidden;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n\n.action-btn:hover {\n letter-spacing: 5px;\n transform: translateY(-2px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n}\n\n.grid-overlay {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);\n background-size: 30px 30px;\n pointer-events: none;\n opacity: 1;\n}\n\n@keyframes rotate-border {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse-glow {\n 0%,\n 100% {\n opacity: 0.1;\n }\n 50% {\n opacity: 0.3;\n }\n}\n\n.sweep {\n position: absolute;\n top: 0;\n left: -100%;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.6),\n transparent\n );\n transform: skewX(-25deg);\n transition: 0.8s;\n pointer-events: none;\n}\n\n.card-frame:hover .sweep {\n left: 150%;\n}\n"}

spicy-panther-38

👁 实时预览

📝 源代码