Files
wterminal-site/src/dropdown.html
2025-10-19 00:37:11 +02:00

59 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>WTerminal dropdown sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/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>
<h1>Dropdown terminal</h1>
<p>WTerminal is installed on this site as a dropdown/quake style terminal.</p>
<h2>How to use the terminal:</h2>
<ul>
<li>Open terminal: press Backquote <b>`</b> AKA tilde, or click the "Open terminal" button below.</li>
<li>Use terminal commands: type "help" or "?" and press enter to get started.</li>
<li>Close terminal: press Escape</li>
</ul>
<button onclick="WTerminal.open()">Open terminal</button>
<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>Then add a script ellement with:<br>
<code>WTerminal.instalDropdownTerminal();</code><br>
Or<br>
<code>new WTerminal("dropdown");</code><br>
</p>
<script>
// WTerminal.instalDropdownTerminal();
// Or
new WTerminal("dropdown");
</script>
</main>
<footer>
<p class="float-right">Author: Ward Truyen</p>
</footer>
</body>
</html>