shell/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="./favicon.png" sizes="128x128" />
    <title>Lite XL</title>

    <meta property="og:title" content="Try Lite XL" />
    <meta property="og:url" content="https://lite-xl.com/playground" />
    <meta property="og:site_name" content="Lite XL" />
    <meta property="og:description" content="Try Lite XL in your Browser!" />

    <link rel="stylesheet" href="./css/main.css" />
    <script src="https://unpkg.com/fflate@0.8.2"></script>
    <script src="./js/main.js"></script>
    <script src="./bundle.wasm.js"></script>
    <script src="./lite-xl.js"></script>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <textarea id="clipping" class="hidden" aria-hidden="true"></textarea>
    <textarea id="textinput" class="hidden" aria-hidden="true" autocapitalize="off" spellcheck="false" autocorrect="off" autocomplete="off" aria-autocomplete="none" autofocus></textarea>
    <div class="modal" id="loading">
      <h2>Loading...</h2>
      <p>Status: <span id="status">Unknown</span></p>
      <p>
        If this page freezes, please check the console (F12/Ctrl+Shift+I) for
        any errors.
      </p>
    </div>
    <div class="modal" id="close">
      <h2>Oops, Lite XL is closed!</h2>
      <p>
        If you didn't do this intentionally, please check the console
        (F12/Ctrl+Shift+I) for any errors.
      </p>
      <p>You can refresh the page to load Lite XL again.</p>
    </div>

    <table class="sync_indicator">
      <tr>
        <td class="sync_indicator status">
          <p id="file_sync_status">File Sync</p>
          <p id="workspace_sync_status">Workspace Sync</p>
        </td>
        <td>
          <svg
            id="sync_icon"
            xmlns="http://www.w3.org/2000/svg"
            height="24"
            viewBox="0 0 24 24"
            width="24"
          >
            <path
              style="mix-blend-mode: difference; fill: white"
              d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
            />
          </svg>
        </td>
      </tr>
    </table>

    <noscript>
      <p>You need to enable JavaScript and WASM for this page to work.</p>
    </noscript>
  </body>
</html>