demo/index.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <title>xterm.js demo</title>
   5         <link rel="stylesheet" href="/build/xterm.css" />
   6         <link rel="stylesheet" href="/build/addons/fullscreen/fullscreen.css" />
   7         <link rel="stylesheet" href="style.css" />
   8         <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
   9         <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
  10         <script src="/build/xterm.js" ></script>
  11         <script src="/build/addons/attach/attach.js" ></script>
  12         <script src="/build/addons/fit/fit.js" ></script>
  13         <script src="/build/addons/fullscreen/fullscreen.js" ></script>
  14         <script src="/build/addons/search/search.js" ></script>
  15     </head>
  16     <body>
  17         <h1>xterm.js: xterm, in the browser</h1>
  18         <div id="terminal-container"></div>
  19         <div>
  20           <h2>Actions</h2>
  21           <p>
  22             <label>Find next <input id="find-next"/></label>
  23             <label>Find previous <input id="find-previous"/></label>
  24           </p>
  25         </div>
  26         <div>
  27           <h2>Options</h2>
  28           <p>
  29             <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
  30           </p>
  31           <p>
  32             <label>
  33               cursorStyle
  34               <select id="option-cursor-style">
  35                 <option value="block">block</option>
  36                 <option value="underline">underline</option>
  37                 <option value="bar">bar</option>
  38               </select>
  39             </label>
  40           </p>
  41           <p>
  42             <label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
  43           </p>
  44           <p>
  45             <label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
  46           </p>
  47           <div>
  48                 <h3>Size</h3>
  49             <div>
  50               <div style="display: inline-block; margin-right: 16px;">
  51                 <label for="cols">Columns</label>
  52                 <input type="number" id="cols" />
  53               </div>
  54               <div style="display: inline-block; margin-right: 16px;">
  55                 <label for="rows">Rows</label>
  56                 <input type="number" id="rows" />
  57               </div>
  58             </div>
  59           </div>
  60         </div>
  61         <p><strong>Attention:</strong> The demo is a barebones implementation and is designed for xterm.js evaluation purposes only. Exposing the demo to the public as is would introduce security risks for the host.</p>
  62         <script src="main.js" defer ></script>
  63     </body>
  64 </html>