{"html":"

\n \n \n \n

card.html - Visual Studio Code

card.html

styles.css

\n \n

\n 12345\n 678910\n 1112131415\n

<div class=\"vscode-card\">\n  <div class=\"window-bar\">\n    <div class=\"window-buttons\">\n      <span class=\"btn close\"></span>\n      <span class=\"btn minimize\"></span>\n      <span class=\"btn maximize\"></span>\n    </div>\n    <div class=\"window-title\">\n      card.html - Visual Studio Code\n    </div>\n  </div>\n  <div class=\"tab-bar\">\n    <div class=\"tab active\">card.html</div>\n    <div class=\"tab\">styles.css</div>\n  </div>\n  <div class=\"editor-container\">...

\n Ln 15, Col 1\n Spaces: 2\n UTF-8\n

\n","css":".vscode-card {\n max-width: 300px;\n height: 380px;\n background: #1e1e1e;\n border-radius: 8px;\n box-shadow:\n 0 8px 25px rgba(0, 0, 0, 0.6),\n inset 0 0 5px rgba(0, 255, 0, 0.05);\n border: 1px solid #333;\n overflow: hidden;\n position: relative;\n font-family: \"Consolas\", \"Courier New\", monospace;\n transition: transform 0.3s cubic-bezier(0.65, -0.5, 0.35, 1.5);\n}\n\n.vscode-card:hover {\n transform: translateY(-3px);\n}\n\n.window-bar {\n height: 30px;\n background: #3c3c3c;\n display: flex;\n align-items: center;\n padding: 0 8px;\n border-bottom: 1px solid #2a2a2a;\n}\n\n.window-buttons {\n display: flex;\n gap: 6px;\n}\n\n.btn {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #555;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);\n transition: transform 0.2s ease;\n}\n\n.btn:hover {\n transform: scale(1.15);\n}\n\n.close {\n background: #ff605c;\n}\n.minimize {\n background: #ffbd44;\n}\n.maximize {\n background: #00ca4e;\n}\n\n.window-title {\n color: #cccccc;\n font-size: 12px;\n margin-left: 10px;\n opacity: 0.9;\n}\n\n.tab-bar {\n height: 35px;\n background: #252526;\n display: flex;\n border-bottom: 1px solid #1a1a1a;\n}\n\n.tab {\n padding: 8px 15px;\n color: #999;\n font-size: 12px;\n cursor: default;\n border-right: 1px solid #1a1a1a;\n transition:\n background 0.2s ease,\n color 0.2s ease;\n}\n\n.tab.active {\n color: #00ff00;\n background: #1e1e1e;\n text-shadow: 0 0 5px rgba(0, 255, 0, 0.4);\n}\n\n.tab:hover:not(.active) {\n background: #2d2d2d;\n color: #ccc;\n}\n\n.editor-container {\n display: flex;\n height: calc(100% - 95px);\n}\n\n.sidebar {\n width: 40px;\n background: #333;\n border-right: 1px solid #252526;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon {\n width: 20px;\n height: 20px;\n background: linear-gradient(135deg, #00ff00, #00cc00);\n clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n animation: iconPulse 2s infinite ease-in-out;\n}\n\n@keyframes iconPulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.editor {\n flex: 1;\n display: flex;\n background: #1e1e1e;\n padding: 10px;\n}\n\n.line-numbers {\n width: 35px;\n color: #858585;\n font-size: 12px;\n text-align: right;\n padding-right: 8px;\n border-right: 1px solid #2a2a2a;\n user-select: none;\n}\n\n.line-numbers span {\n display: block;\n line-height: 16px;\n transition: color 0.2s ease;\n}\n\n.vscode-card:hover .line-numbers span {\n color: #a0a0a0;\n}\n\n.code-content {\n flex: 1;\n padding-left: 10px;\n overflow: hidden;\n}\n\n.code-content pre {\n margin: 0;\n}\n\n.code-content code {\n color: #00ff00;\n font-size: 12px;\n line-height: 16px;\n text-shadow: 0 0 3px rgba(0, 255, 0, 0.3);\n white-space: pre-wrap;\n animation: codeGlow 3s infinite alternate;\n}\n\n@keyframes codeGlow {\n 0% {\n text-shadow: 0 0 3px rgba(0, 255, 0, 0.3);\n }\n 100% {\n text-shadow: 0 0 6px rgba(0, 255, 0, 0.5);\n }\n}\n\n.status-bar {\n height: 30px;\n background: #007acc;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 0 10px;\n border-top: 1px solid #005f99;\n}\n\n.status-item {\n color: #fff;\n font-size: 11px;\n margin-left: 15px;\n opacity: 0.9;\n}\n\n.vscode-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to bottom,\n rgba(0, 255, 0, 0.03),\n transparent 50%\n );\n animation: scanline 4s infinite linear;\n pointer-events: none;\n opacity: 0.5;\n}\n\n@keyframes scanline {\n 0% {\n transform: translateY(-100%);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n\n.vscode-card::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYV2NkIA5k+/fvfwYGBgY6BgYGADY0BBNnJ8mHAAAAAElFTkSuQmCC\")\n repeat;\n opacity: 0.02;\n pointer-events: none;\n}\n"}

proud-panther-39

👁 实时预览

📝 源代码