build.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="dark.css">
  <title>Google Drive - encrypted folder copy</title>
</head>
<body>
  <script type="text/javascript">
    if(localStorage.getItem("theme") === "dark") {
      document.body.classList.add("dark");
    }
  </script>
  <nav class="navbar navbar-expand navbar-dark bg-primary">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="./">Decrypt links</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="build.html">How to encrypt links</a>
          </li>
          <li class="nav-item">
            <a id="dark_toggle" class="nav-link" data-toggle="modal" href="#"><span class="dark_switch">Dark</span><span class="light_switch">Light</span> mode</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container"><div class="row"><div class="col">
    <div id="browser_sucks" style="display: none;">
      <div class="alert alert-danger mt-4">This page won't work properly in your browser. Use the newest Firefox or Chrome.</div>
    </div>
    <div id="browser_ok" style="display: none;">
      <div class="card my-4">
        <div class="card-body">
          <p>To encrypt links you need to generate your encryption key. You must keep that key private! Because of that you need to host decryption code yourself. The form below will generate all files for you.</p>
          <hr>

          <h3>Decryption server</h3>
          <div class="form-group">
            <label for="decrypt_servers">As already said you have to host the decryption files on some server. Enter the address to your decryption server(s):</label>
            <textarea class="form-control" id="decrypt_servers" rows="3" placeholder="Example:
  https://example.com/decrypt/
  http://other.example.net/"></textarea>
          </div>
          <div class="form-group">
            <label for="decrypt_server_lists">You can also add a link to a list of servers. This is useful when your decryption server goes down, you add a new one, you change to completely different one - instead of re-encryptin every link you just edit the server list. I recommend 3 hosts that let you edit the text you share: <a href="https://gist.github.com/">GitHub Gist</a>, <a href="https://p.teknik.io/">Teknik Pastebin</a> and <a href="https://pastebin.com/">Pastebin</a>. Remember to register first! And copy the "raw" links.</label>
            <textarea class="form-control" id="decrypt_server_lists" rows="4" placeholder="Example:
  https://gist.github.com/anadius/9705faca9da8c6083bba6380fde12e15/raw/ac967166cdd41d6cbd556ca4cafff1274c138cdc/test
  https://p.teknik.io/Raw/Iexbz
  https://pastebin.com/raw/n2hr9zi7"></textarea>
          </div>
          <p>That info will be added to every folder link you encrypt. If you want to add or remove some servers just run this builder again and generate new files.

          <h3>Encryption key</h3>
          <p>Never share this key! This is what keeps your links safe. You can't put whatever you want here. Click "Generate" button or enter the key you got earlier. It will be in <code>key.txt</code> file.</p>
          <div class="form-group form-row align-items-center">
            <div class="col">
              <input id="encryption_key" type="text" class="form-control" placeholder="Encryption key">
            </div>
            <div class="col-3 col-md-2">
              <button id="generate_key" class="btn btn-primary btn-block">Generate</button>
            </div>
          </div>

          <h3>Encryption/decryption files</h3>
          <p>All files listed below contain your encryption key. You should never share them with anyone.</p>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="static_encrypt" checked="checked" disabled>
            <label class="custom-control-label" for="static_encrypt"><code>STATIC_ENCRYPTION/encrypt.html</code> - static HTML page for encryption</label><span> - most people will use it for encrypting links</span>
          </div>

          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="worker_decrypt" checked="checked">
            <label class="custom-control-label" for="worker_decrypt"><code>WORKER/worker.js</code> - decryption file, can be hosted on <a href="https://workers.cloudflare.com/">Cloudflare Workers</a></label>
          </div>
          <div class="ml-4 custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="worker_encrypt">
            <label class="custom-control-label" for="worker_encrypt">modifies <code>WORKER/worker.js</code> to also encrypt files; you can access it from <code>https://&lt;your cloudflare worker address&gt;/encrypt</code></label>
          </div>

          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="php_decrypt" checked="checked">
            <label class="custom-control-label" for="php_decrypt"><code>PHP/decrypt.php</code> - decryption file, can be hosted on any PHP server</label>
          </div>
          <div class="ml-4 custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="php_encrypt">
            <label class="custom-control-label" for="php_encrypt"><code>PHP/encrypt.php</code> - encryption file, can be hosted on any PHP server; you can access it from <code>https://&lt;your server address&gt;/encrypt</code></label>
          </div>
          <p>If you use file(s) from <code>PHP</code> folder you HAVE TO use <code>PHP/.htaccess</code> file too. <b>PHP 7.1 or above required!</b></p>
          <p>Check those additional encryption files only if you want to let other people encrypt their links with your key.</p>

          <div class="form-row align-items-center">
            <div class="col">
              <button id="download_files" class="btn btn-primary btn-block">Download files</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div></div></div>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/jszip@3.4.0/dist/jszip.min.js" integrity="sha256-Uktz9Z+RdiKZoEPBkqU9DGKjNVUe9eVSlKB3EMd4uto=" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $("#dark_toggle").click(event => {
      event.preventDefault();
      if($(document.body).toggleClass("dark").hasClass("dark")) {
        localStorage.setItem("theme", "dark");
      }
      else {
        localStorage.removeItem("theme");
      }
    });
  </script>
  <script type="text/javascript">
    try {
      if(!String.prototype.hasOwnProperty("matchAll")) {
        throw Error("unsupported");
      }
    }
    catch(e) {
      $("#browser_sucks").show();
      throw e;
    }
    $("#browser_ok").show();
  </script>
  <script src="common.js"></script>
  <script src="build.js"></script>
</body>
</html>