59 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			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();">☀</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><link rel="stylesheet" href="css/wterminal.css" /><br>
 | 
						|
        <script src="js/wterminal.js"></script></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>
 |