sync-token/assets/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get started with your Twilio Functions!</title>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">
    <link rel="stylesheet" href="https://unpkg.com/milligram/dist/milligram.min.css">
    <style>
      body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      div[role="main"] {
        flex: 1;
      }

      footer {
        text-align: center;
      }

      footer p {
        margin-bottom: 0;
      }

      #twilio-logo {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to your new Twilio App</h1>
    </header>
    <div role="main">
      <section>
        <h3>Get started with your app</h3>
        <p>Now that your code is deployed, here are the last steps you need to do to finish your app.</p>
        <p>This app shows you how to mint an <a href="https://www.twilio.com/docs/iam/access-tokens">Access Token</a> for <a href="https://www.twilio.com/sync">Twilio Sync</a>. Please note, this is for prototyping purposes only. You will want to validate the identity of clients requesting Access Token in most production applications and set the identity when minting the Token.</p>
        <ol>
          <li><a href="/sync-token">Click here to see your sync token</a></li>
        </ol>
      </section>
      <!-- EDIT_CODE -->
    </div>
    <footer>
      <p>
        <a href="https://www.twilio.com/">
          <svg id="twilio-logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
            <defs>
              <style>
                .cls-1 {
                  fill: #f22f46;
                }
              </style>
            </defs>
            <title>Twilio Logo</title><path class="cls-1" d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"/></svg>
        </a>
      </p>
      <p>
        <a href="https://www.twilio.com/code-exchange">Learn about other things you can build with Twilio</a>
      </p>
    </footer>

    <script>
      // This code will replace the content of any <span class="function-root"></span> with the base path of the URL
      const baseUrl = new URL(location.href);
      baseUrl.pathname = baseUrl
        .pathname
        .replace(/\/index\.html$/, '');
      delete baseUrl.hash;
      delete baseUrl.search;
      const fullUrl = baseUrl
        .href
        .substr(0, baseUrl.href.length - 1);
      const functionRoots = document.querySelectorAll('span.function-root');

      functionRoots.forEach(element => {
        element.innerText = fullUrl
      })
    </script>
  </body>
</html>