wterminal-site/src/static-terminal.html
2024-09-21 16:20:11 +02:00

62 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>WTerminal static sample</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/wterminal.css" />
<script src="js/wterminal.js"></script>
<script src="js/wterminal-autoextend.js"></script>
<script src="js/static-terminal-buttons.js"></script>
<script src="js/theme.js"></script>
</head>
<body>
<header>
<button style="float: right;" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<a href="index.html">Home</a>
<a href="static-terminal.html">Static</a>
<a href="dropdown.html">Dropdown</a>
<a href="pong.html">Pong</a>
<a href="addon.html">Addon</a>
</header>
<main>
<img style="display: none;" src="img/kitty.jpg" />
<h1>Static-terminal:</h1>
<p>Below we have created a WTerminal, by using it's constructor with a name ("static") and
element-id("static-terminal") to generate a terminal as a 'static element on our page'.</p>
<div id="static-terminal"></div>
<script>
new WTerminal("static", "static-terminal", null);
</script>
<div style="padding-top: 4px;">
Samples:
<input type="button" value="help" onclick="btn_terminalHelp();" />
<input type="button" value="prompt" onclick="btn_promptSample();" />
<input type="button" value="kitty" onclick="btn_kittySample();" /> |
<input type="button" value="object" onclick="btn_printObjectSample();" /> |
<input title="Clear terminal" type="button" class="button-red" value="clear" onclick="btn_terminalClear();" />
</div>
<h2>How to add the terminal to a site:</h2>
<p>Add the CSS and JavaScript files to your site header:<br>
<code>&lt;link rel="stylesheet" href="css/wterminal.css" /&gt;<br>
&lt;script src="js/wterminal.js"&gt;&lt;/script&gt;</code>
</p>
<p>Where the terminal should be add a div element, with id "static-terminal":<br>
<code>&lt;div id="static-terminal"&gt;&lt;/div&gt;</code>
</p>
<p>Finally add a script element with:<br>
<code>new WTerminal("static", "static-terminal", null);</code>
</p>
</main>
<footer>
<p class="float-right">Author: Ward Truyen</p>
</footer>
</body>
</html>