{"html":"

\n mini-vscode.html\n

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

\n index.html\n style.css\n script.js\n

\n\n

\n <!DOCTYPE html>
\n <html lang=\"en\">
\n <head>
\n   <meta charset=\"UTF-8\">
\n   <title>Mini\n VSCode</title>
\n </head>
\n <body>
\n   <h1>Mini VSCode\n Widget</h1>
\n </body>
\n </html>\n

\n\n

/* CSS file */

\n body {
\n background:\n #1e1e1e;
\n color:\n #d4d4d4;
\n }\n

\n\n

// JS file

\n function helloWorld() {
\n console.log(\"Hi VSCode!\");
\n }\n

\n","css":".vscode-window-container {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #1e1e1e;\n font-family: \"Fira Code\", monospace;\n}\n\n.vscode-window {\n width: 80%;\n height: 65%;\n background: #1e1e2f;\n border-radius: 10px;\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid #333;\n}\n\n.vscode-window .title-bar {\n height: 32px;\n background: #2c2c3e;\n display: flex;\n align-items: center;\n padding: 0 12px;\n color: #ccc;\n font-size: 0.85em;\n}\n\n.vscode-window .window-controls {\n margin-left: auto;\n display: flex;\n gap: 8px;\n}\n\n.vscode-window .window-controls div.close,\n.vscode-window .window-controls div.minimize,\n.vscode-window .window-controls div.maximize {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.vscode-window .window-controls div.close:hover,\n.vscode-window .window-controls div.minimize:hover,\n.vscode-window .window-controls div.maximize:hover {\n transform: scale(1.2);\n}\n.vscode-window .close {\n background: #ff5f56;\n}\n.vscode-window .minimize {\n background: #ffbd2e;\n}\n.vscode-window .maximize {\n background: #27c93f;\n}\n\n.vscode-window .tabs {\n display: flex;\n background: #252536;\n border-bottom: 1px solid #444;\n}\n\n.vscode-window .tabs label.l {\n padding: 8px 18px;\n color: #ccc;\n cursor: pointer;\n font-size: 0.9em;\n transition:\n background 0.2s,\n color 0.2s;\n}\n\n.vscode-window .tabs label.l:hover {\n background: #2c2c3e;\n color: #fff;\n}\n\n.vscode-window input.i[name=\"tab\"] {\n display: none;\n}\n\n.vscode-window #tab-html:checked ~ .tabs label.l[for=\"tab-html\"],\n.vscode-window #tab-css:checked ~ .tabs label.l[for=\"tab-css\"],\n.vscode-window #tab-js:checked ~ .tabs label.l[for=\"tab-js\"] {\n background: #1e1e2f;\n color: #fff;\n border-bottom: 2px solid #007acc;\n}\n\n.vscode-window .code-panel {\n flex: 1;\n background: #1e1e2f;\n color: #d4d4d4;\n padding: 15px;\n font-family: \"Fira Code\", monospace;\n font-size: 0.9em;\n overflow-y: auto;\n line-height: 1.4em;\n}\n\n.vscode-window .panel {\n display: none;\n}\n\n.vscode-window #tab-html:checked ~ .code-panel #html-panel,\n.vscode-window #tab-css:checked ~ .code-panel #css-panel,\n.vscode-window #tab-js:checked ~ .code-panel #js-panel {\n display: block;\n}\n\n.vscode-window .keyword {\n color: #569cd6;\n}\n.vscode-window .string {\n color: #d69d85;\n}\n.vscode-window .comment {\n color: #6a9955;\n font-style: italic;\n}\n.vscode-window .attr {\n color: #9cdcfe;\n}\n.vscode-window .value {\n color: #dcdcaa;\n}\n"}

big-dodo-86

👁 实时预览

📝 源代码