{"html":"

\n \n UIVERSE\n

Dev Pass

Syntax
Error '26

Global Developer Conference

\n NameAlex Developer\n

\n DateOct 24, 2026\n

\n VenueNeon Nexus Arena\n

\n GatewaySector 7G\n

\n \n

UI-77-9X04-DEV

Seat

\n\n","css":".ticket-canvas {\n min-height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2em;\n}\n\n.ticket-wrapper {\n --t-bg: #1e1e24;\n --t-bg-light: #2b2b36;\n --t-accent: #7c3aed;\n --t-accent-glow: rgba(124, 58, 237, 0.5);\n --t-text-main: #f8fafc;\n --t-text-muted: #94a3b8;\n font-size: 10px;\n perspective: 1000px;\n display: inline-block;\n}\n\n.ticket {\n position: relative;\n width: 22em;\n color: var(--t-text-main);\n font-family: \"Space Grotesk\", \"Segoe UI\", system-ui, sans-serif;\n transform-style: preserve-3d;\n transition:\n transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),\n box-shadow 0.6s ease;\n box-shadow:\n 0 20px 40px rgba(0, 0, 0, 0.8),\n 0 0 0 1px rgba(255, 255, 255, 0.05);\n background: transparent;\n filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));\n}\n\n.ticket-wrapper:hover .ticket {\n transform: rotateX(5deg) rotateY(-10deg) scale(1.02);\n box-shadow:\n 20px 20px 40px rgba(0, 0, 0, 0.6),\n 0 0 0 1px rgba(255, 255, 255, 0.1),\n -5px -5px 20px var(--t-accent-glow);\n}\n\n.ticket::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 1em;\n pointer-events: none;\n background: linear-gradient(\n 115deg,\n transparent 0%,\n transparent 40%,\n rgba(255, 255, 255, 0.1) 45%,\n rgba(255, 255, 255, 0.3) 50%,\n rgba(255, 255, 255, 0.1) 55%,\n transparent 60%,\n transparent 100%\n );\n z-index: 10;\n background-size: 250% 250%;\n background-position: 100% 100%;\n transition: background-position 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n mix-blend-mode: overlay;\n}\n\n.ticket-wrapper:hover .ticket::after {\n background-position: 0% 0%;\n}\n\n.t-main {\n padding: 2em;\n position: relative;\n overflow: hidden;\n background: radial-gradient(\n circle at bottom left,\n transparent 1em,\n var(--t-bg) 1.05em\n ),\n radial-gradient(circle at bottom right, transparent 1em, var(--t-bg) 1.05em);\n background-size: 51% 100%;\n background-position:\n bottom left,\n bottom right;\n background-repeat: no-repeat;\n border-top-left-radius: 1em;\n border-top-right-radius: 1em;\n}\n\n.t-main::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: linear-gradient(\n rgba(124, 58, 237, 0.15) 1px,\n transparent 1px\n ),\n linear-gradient(90deg, rgba(124, 58, 237, 0.15) 1px, transparent 1px);\n background-size: 2em 2em;\n opacity: 0.6;\n z-index: 0;\n pointer-events: none;\n transform: perspective(500px) rotateX(20deg) scale(1.5);\n animation: grid-scroll 20s linear infinite;\n}\n\n@keyframes grid-scroll {\n 0% {\n background-position: 0 0;\n }\n\n 100% {\n background-position: 0 4em;\n }\n}\n\n.t-content {\n position: relative;\n z-index: 1;\n}\n\n.t-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 2em;\n}\n\n.t-logo {\n display: flex;\n align-items: center;\n gap: 0.5em;\n font-weight: 900;\n font-size: 1.2em;\n letter-spacing: -0.05em;\n color: #fff;\n}\n\n.t-logo svg {\n width: 1.5em;\n height: 1.5em;\n fill: var(--t-accent);\n filter: drop-shadow(0 0 5px var(--t-accent));\n animation: logo-pulse 3s ease-in-out infinite alternate;\n}\n\n@keyframes logo-pulse {\n 0% {\n filter: drop-shadow(0 0 2px var(--t-accent));\n }\n\n 100% {\n filter: drop-shadow(0 0 10px var(--t-accent)) brightness(1.2);\n }\n}\n\n.t-type {\n font-size: 0.6em;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--t-accent);\n border: 1px solid var(--t-accent);\n padding: 0.4em 0.8em;\n border-radius: 99em;\n font-weight: 700;\n}\n\n.t-title {\n font-size: 2.5em;\n font-weight: 900;\n line-height: 1.1;\n margin-bottom: 0.2em;\n text-transform: uppercase;\n background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.t-subtitle {\n color: var(--t-text-muted);\n font-size: 0.9em;\n margin-bottom: 2.5em;\n}\n\n.t-details {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.5em;\n margin-bottom: 1em;\n}\n\n.t-detail-item {\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n}\n\n.t-label {\n font-size: 0.6em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--t-text-muted);\n}\n\n.t-value {\n font-size: 1.1em;\n font-weight: 700;\n color: var(--t-text-main);\n}\n\n.t-perforation {\n display: flex;\n justify-content: space-between;\n height: 1em;\n align-items: center;\n position: relative;\n z-index: 2;\n}\n\n.t-perf-line {\n flex-grow: 1;\n height: 0;\n border-top: 2px dashed rgba(255, 255, 255, 0.2);\n margin: 0 1.5em;\n}\n\n.t-stub {\n padding: 2em;\n background: radial-gradient(\n circle at top left,\n transparent 1em,\n var(--t-bg-light) 1.05em\n ),\n radial-gradient(\n circle at top right,\n transparent 1em,\n var(--t-bg-light) 1.05em\n );\n background-size: 51% 100%;\n background-position:\n top left,\n top right;\n background-repeat: no-repeat;\n border-bottom-left-radius: 1em;\n border-bottom-right-radius: 1em;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n}\n\n.t-barcode-container {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.t-barcode {\n width: 10em;\n height: 3em;\n background: repeating-linear-gradient(\n 90deg,\n #fff 0,\n #fff 2px,\n transparent 2px,\n transparent 4px,\n #fff 4px,\n #fff 5px,\n transparent 5px,\n transparent 8px,\n #fff 8px,\n #fff 12px,\n transparent 12px,\n transparent 15px,\n #fff 15px,\n #fff 16px,\n transparent 16px,\n transparent 18px\n );\n opacity: 0.8;\n}\n\n.t-barcode-id {\n font-family: monospace;\n font-size: 0.7em;\n color: var(--t-text-muted);\n letter-spacing: 0.2em;\n text-align: justify;\n}\n\n.t-admit {\n text-align: right;\n}\n\n.t-admit-text {\n font-size: 0.7em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--t-text-muted);\n}\n\n.t-admit-num {\n font-size: 3em;\n font-weight: 900;\n line-height: 1;\n color: var(--t-accent);\n text-shadow: 0 0 15px var(--t-accent-glow);\n}\n\n.ticket-wrapper:active .ticket {\n transform: rotateX(15deg) rotateY(-5deg) scale(0.98);\n}\n\n.ticket-wrapper:active .t-stub {\n transform: translateY(5px) rotateZ(2deg);\n opacity: 0.8;\n transition:\n transform 0.2s ease,\n opacity 0.2s ease;\n}\n"}

shy-rattlesnake-3

👁 实时预览

📝 源代码