public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Sphinx Relay</title>
    <link rel="icon" href="/static/sphinx-logo.png" />
    <style>
      html {
        font-family: Arial, Helvetica, sans-serif;
        color: white;
      }

      body {
        background: #292a2d;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #qr-wrap {
        background: white;
        width: 300px;
        height: 300px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
      }

      canvas {
        height: 280px;
        width: 280px;
      }

      pre {
        margin-top: 8px;
        border-radius: 10px;
        max-width: 250px;
        padding: 18px 25px 0px 25px;
        border: 1px solid tan;
        background: white;
        overflow: hidden;
        overflow-wrap: break-word;
        display: block;
        white-space: pre-wrap;
        color: darkslategray;
      }

      img {
        height: 100px;
        width: 100px;
        margin-top: 20px;
      }

      p {
        margin-top: 30px;
        max-width: 300px;
        text-align: center;
      }

      ul {
        list-style: none;
        max-width: 333px;
      }

      li {
        margin-top: 8px;
      }

      input[type='checkbox'] {
        pointer-events: none;
      }

      a {
        color: #628aff;
        font-weight: bold;
      }
      a:visited {
        color: #628aff;
        font-weight: bold;
      }
      #stuff {
        display: flex;
        align-items: center;
        flex-direction: column;
      }
    </style>
    <script>
      var hi = 'hello'
    </script>
  </head>

  <body>
    <img src="/static/sphinx-logo.png" alt="logo" />

    <!-- <ul>

    <li>
      <input id="chan" type="checkbox" />
      <span id="chan-text"></span>
    </li>

    <li>
      <input id="fees" type="checkbox" />
      <span id="fees-text"></span>
    </li>

    <li>
      <input id="bal" type="checkbox" />
      <span id="bal-text"></span>
    </li>

  </ul> -->

    <!-- <br /> -->
    <p>
      Sphinx will not work unless you follow
      <a
        href="https://github.com/stakwork/sphinx-relay/wiki/Home-node-FAQ"
        target="_blank"
      >
        these specific channel instructions
      </a>
      !!
    </p>

    <div id="qr-wrap">
      <canvas id="qr"></canvas>
    </div>

    <p id="qr-text">
      Scan the QR or copy the connection string into your Sphinx app.
    </p>

    <p>
      This is a 1 time use token to pair the app with your node. To pair other
      devices, tap "export keys" on your profile page in the Sphinx app.
    </p>

    <p>
      Please keep that in mind uninstalling Sphinx Relay on your node will delete your account 
      and everything associated with it such as tribes you own, chats and tribes you are in.
    </p>

    <pre id="connection-string">
CONNECTION_STRING
  </pre
    >

    <script src="/static/js/qrious.js"></script>
    <script>
      ;(function () {
        var qr = new QRious({
          element: document.getElementById('qr'),
          value: 'CONNECTION_STRING',
          size: 300,
        })
      })()
    </script>
    <script>
      // function get(id){ return document.getElementById(id) }

      // const chan = get('chan')
      // const chanText = get('chan-text')

      // if(window.channelIsOpen) {
      //   chan.checked = true
      //   chanText.innerHTML = 'You have an open channel'
      // } else {
      //   chanText.innerHTML = 'You need to open a channel'
      // }

      // const fees = get('fees')
      // const feesText = get('fees-text')

      // if(window.channelFeesBaseZero) {
      //   fees.checked = true
      //   feesText.innerHTML = 'You have set your fee base to 0'
      // } else {
      //   feesText.innerHTML = 'You need to set your fee base to 0'
      // }

      // const bal = get('bal')
      // const balText = get('bal-text')

      // if(window.hasRemoteBalance) {
      //   bal.checked = true
      //   balText.innerHTML = 'You have remote balance'
      // } else {
      //   balText.innerHTML = 'You need remote balance (2% of channel size recommended)'
      // }

      const qrWrap = get('qr-wrap')
      const connString = get('connection-string')
      const qrText = get('qr-text')

      // const readyToGo = window.hasRemoteBalance && window.channelFeesBaseZero && window.channelIsOpen

      // if(window.isSignedUp) {
      //   qrText.innerHTML = "You have connected your app!"
      // } else if(readyToGo) {
      qrWrap.style.display = 'flex'
      qrText.style.display = 'block'
      connString.style.display = 'block'
      // }
    </script>
  </body>
</html>