{"html":"

terminal

$npm create next-app

✓ Creating project...

✓ Installing depensencies...

✓ Project ready!

$npm run dev

\n","css":".terminal-container {\n background-color: #101729;\n border-radius: 10px;\n border: 1px solid #1a222f;\n display: flex;\n flex-direction: column;\n padding: 20px;\n max-width: 320px;\n font-family: \"Courier New\", monospace;\n}\n\n.top-side {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #212b3f;\n padding-bottom: 10px;\n margin-bottom: 20px;\n}\n\n.red-circle {\n width: 12px;\n height: 12px;\n background-color: #ef4444;\n border-radius: 50%;\n margin-right: 7px;\n}\n\n.yellow-circle {\n width: 12px;\n height: 12px;\n background-color: #eab308;\n border-radius: 50%;\n margin-right: 7px;\n}\n\n.green-circle {\n width: 12px;\n height: 12px;\n background-color: #22c55e;\n border-radius: 50%;\n margin-right: 15px;\n}\n\n.terminal-title {\n color: #fff;\n margin: 0;\n}\n\n.line {\n color: #fff;\n}\n\n.line:not(:last-child) {\n margin-bottom: 12px;\n}\n\n.dollar {\n color: #2282f4;\n margin-right: 15px;\n}\n\n.green-line {\n margin-bottom: 12px;\n color: #46cf79;\n}\n\n.line-1 {\n animation: green-color 3s infinite;\n}\n\n.line-2 {\n animation: green-color 3.5s infinite;\n}\n\n.line-3 {\n animation: green-color 2s infinite;\n}\n\n@keyframes green-color {\n 0% {\n color: #2a7151;\n }\n\n 50% {\n color: #46cf79;\n }\n\n 100% {\n color: #2a7151;\n }\n}\n"}

giant-goose-90

👁 实时预览

📝 源代码