73 lines
1.3 KiB
Markdown
73 lines
1.3 KiB
Markdown
# Live Demo
|
|
|
|
---
|
|
|
|
<style>
|
|
iframe { border: 0 none; }
|
|
.demo .bp-main { padding: 0; }
|
|
</style>
|
|
|
|
<div class="demo">
|
|
|
|
<a href="../demo.html" target="_blank" rel="noreferrer">View fullpage demo</a>
|
|
|
|
<browser-preview hidelabel>
|
|
|
|
<iframe src="../demo.html" height="400px"></iframe>
|
|
|
|
</browser-preview>
|
|
|
|
</div>
|
|
|
|
---
|
|
|
|
:::details Code
|
|
|
|
:::code-group
|
|
|
|
```css [styles.css]
|
|
@import url('https://unpkg.com/xterminal/dist/xterminal.css');
|
|
|
|
.error {
|
|
color: rgb(248, 88, 88);
|
|
}
|
|
|
|
.spinner:after {
|
|
animation: changeContent 0.8s linear infinite;
|
|
content: "⠋";
|
|
}
|
|
|
|
@keyframes changeContent {
|
|
10% { content: "⠙"; }
|
|
20% { content: "⠹"; }
|
|
30% { content: "⠸"; }
|
|
40% { content: "⠼"; }
|
|
50% { content: "⠴"; }
|
|
60% { content: "⠦"; }
|
|
70% { content: "⠧"; }
|
|
80% { content: "⠇"; }
|
|
90% { content: "⠏"; }
|
|
}
|
|
```
|
|
|
|
```html [index.html]
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<div id="app"></div>
|
|
|
|
<script src="https://unpkg.com/xterminal/dist/xterminal.umd.js"></script>
|
|
|
|
<script src="createShell.js"></script>
|
|
<script src="createTerminal.js"></script>
|
|
|
|
<script>
|
|
window.onload = () => createTerminal('#app');
|
|
</script>
|
|
```
|
|
|
|
<<< @/public/demo.js#terminal{js:line-numbers} [createTerminal.js]
|
|
|
|
<<< @/public/demo.js#shell{js:line-numbers} [createShell.js]
|
|
|
|
:::
|