index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>StatSim Preview. Explore files of any size in the browser</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="css/main.css" media="screen">
    <link type="text/css" rel="stylesheet" href="https://statsim.com/assets/common.css" media="screen"/>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-7770107-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-7770107-2');
    </script>
  </head>
  <body>
    <div class="status-bar grey-bar">
      <div class="container">
        <div class="row">
          <div class="col s12" style="font-size: 14px;">
            <div id="menu"></div>
            <a href="https://statsim.com/">StatSim</a> → <b>Preview</b>
            <input id="input" type="file" multiple="false" style="margin-top: 6px;"></input>
          </div>
        </div>
        <!--
        <div class="row">
          <div class="col s12" style="font-size: 14px;">
            <input id="search" type="text" placeholder="Search..."></input>
          </div>
        </div>
        -->
      </div>
    </div>
    <p id="stats"></p>
    <div id="overlay">
      <button id="load">Load all</button>
    </div>
    <div class="container" style="position: relative">
      <div class="row">
        <div id="output"></div>
      </div>
    </div>
    <div id="progress"></div>
    <div class="container" style="position: relative">
      <div class="row">
        <div id="drag">
          <div class="drag-icon">↶</div>
          <div class="drag-text">
            <h4>Drag & drop a file here</h4> 
            <p>Or <label for="input" style="color:#039be5; cursor: pointer; font-size: 14px;">choose a file</label></p>
          </div>
        </div>
      </div>
    </div>

    <div id="description" class="grey-bar">
      <div class="container">
        <div class="row">
          <div class="col m12">
            <h1>Preview large text files online</h1>
            <h2>Load any text-based file of arbitrary size in your browser</h2>
            <p>
              Computer files tend to grow in size without limits. Especially program logs and datasets. Opening such files can be a real challenge for most text editors. In most cases, they simply freeze, lacking RAM and processing power. That happens because most programs load files completely, reading all their contents from a disk into memory. Luckily it's possible to preview large text-based files sequentially, loading them piece by piece without "eating" all machine's memory. Another great news is you can do that online, using only your browser, without sending data to any server. StatSim Preview loads data in small chunks so that you can preview files of any size almost immediately.
            </p>
          </div>
        </div>

        <div class="row features">
          <div class="col m3 feature">
            <h3>
              Open large files
            </h3>
            <p>
              And small too. You can preview any text-based file located on your disk. It works with CSV, XML, JSON, YAML, TXT, and many other formats.
            </p>
          </div>
          <div class="col m3 feature">
            <h3>
              Immediate preview
            </h3>
            <p>
              Because the app pre-loads only a tiny piece of content, you can see it instantly. No matter how big is the original file or what its type.
            </p>
          </div>
          <div class="col m3 feature">
            <h3>
              Dynamic loading
            </h3>
            <p>
              Loading additional information happens automatically, similar to how social networks load older posts. You can also load all file contents.
            </p>
          </div>
          <div class="col m3 feature">
            <h3>
              100% client-side
            </h3>
            <p>
              StatSim Preview is a JavaScript app living in your browser without any server-side code. So any file you open stays on your machine. 
            </p>
          </div>
        </div>

        <div class="row">
          <div class="col m12">
            <small>
              If you enjoyed the app, star us on GitHub. To report bugs, create an issue.<br>
            </small>
            <p>
              <a class="github-button" href="https://github.com/statsim/preview" data-icon="octicon-star" data-show-count="true" aria-label="Star statsim/preview on GitHub">Star</a>
              <a class="github-button" href="https://github.com/statsim/preview/issues" data-icon="octicon-issue-opened" data-show-count="true" aria-label="Issue statsim/preview on GitHub">Issue</a>
            </p>
          </div>
        </div>

      </div>
    </div>

    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://statsim.com/assets/common.js"></script>
    <script src="dist/bundle.js"></script>
  </body>
</html>