<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no"
      name="viewport"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>forkfolio UI</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Asap+Condensed&family=Manrope&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <link href="assets/css/index.css" rel="stylesheet" />
    <script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <form method="post" action="build">
      <label class="mdc-text-field mdc-text-field--filled text_field">
        <span class="mdc-text-field__ripple"></span>
        <input
          aria-labelledby="username"
          class="mdc-text-field__input input"
          id="username"
          name="username"
          type="text"
          required
          minlength="1"
        />
        <span class="mdc-floating-label label" id="username">username</span>
        <span class="mdc-line-ripple line-ripple"></span>
      </label>
      <div class="mdc-snackbar">
        <div class="mdc-snackbar__surface">
          <div class="mdc-snackbar__label" role="username" aria-live="polite">
            Username can't be empty.
          </div>
          <div class="mdc-snackbar__actions">
            <button
              class="mdc-button mdc-snackbar__action"
              id="username"
              onclick="retry()"
              type="button"
            >
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Retry</span>
            </button>
          </div>
        </div>
      </div>
      <br />
      <br />
      <label class="mdc-text-field mdc-text-field--filled text_field">
        <span class="mdc-text-field__ripple"></span>
        <input
          aria-labelledby="background"
          class="mdc-text-field__input input"
          id="background"
          name="background"
          type="text"
        />
        <span class="mdc-floating-label label" id="background">background</span>
        <span class="mdc-line-ripple line-ripple"></span>
      </label>
      <div class="mdc-form-field options_switch">
        <div class="mdc-checkbox">
          <input
            class="mdc-checkbox__native-control"
            id="options_switch"
            type="checkbox"
          />
          <div class="mdc-checkbox__background">
            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
              <path
                class="mdc-checkbox__checkmark-path"
                fill="none"
                d="M1.73,12.91 8.1,19.28 22.79,4.59"
              />
            </svg>
            <div class="mdc-checkbox__mixedmark"></div>
          </div>
          <div class="mdc-checkbox__ripple"></div>
        </div>
        <label for="options_switch">Show Options</label>
      </div>
      <div id="show_options" style="display: none">
        <h3>Sort By:</h3>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              class="mdc-radio__native-control"
              id="created"
              name="sort"
              type="radio"
              value="created"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="created">Created</label>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              checked
              class="mdc-radio__native-control"
              id="full_name"
              name="sort"
              type="radio"
              value="full_name"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="full_name">Full Name</label>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              class="mdc-radio__native-control"
              id="pushed"
              name="sort"
              type="radio"
              value="pushed"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="pushed">Pushed</label>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              class="mdc-radio__native-control"
              id="stars"
              name="sort"
              type="radio"
              value="stars"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="stars">Stars</label>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              class="mdc-radio__native-control"
              id="updated"
              name="sort"
              type="radio"
              value="updated"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="updated">Updated</label>
        </div>
        <h3>Order By:</h3>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              checked
              class="mdc-radio__native-control"
              id="asc"
              name="order"
              type="radio"
              value="asc"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="asc">Ascending</label>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-radio">
            <input
              class="mdc-radio__native-control"
              id="desc"
              name="order"
              type="radio"
              value="desc"
            />
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
            <div class="mdc-radio__ripple"></div>
          </div>
          <label for="desc">Descending</label>
        </div>
        <br />
        <div class="mdc-form-field">
          <div class="mdc-checkbox">
            <input
              checked
              class="mdc-checkbox__native-control"
              id="fork"
              name="fork"
              type="checkbox"
              value="true"
            />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path
                  class="mdc-checkbox__checkmark-path"
                  fill="none"
                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
                />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
            <div class="mdc-checkbox__ripple"></div>
          </div>
          <label for="fork">Include Forks</label>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-checkbox">
            <input
              class="mdc-checkbox__native-control"
              id="styles_switch"
              name="styles_switch"
              type="checkbox"
            />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path
                  class="mdc-checkbox__checkmark-path"
                  fill="none"
                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
                />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
            <div class="mdc-checkbox__ripple"></div>
          </div>
          <label for="styles_switch">Show Styling Options</label>
        </div>
        <div style="display: none" class="mdc-layout-grid" id="styles">
          <div class="mdc-layout-grid__inner">
            <div
              class="mdc-form-field mdc-layout-grid__cell mdc-layout-grid__cell--span-2-desktop"
            >
              <div class="mdc-checkbox">
                <input
                  checked
                  class="mdc-checkbox__native-control"
                  id="theme"
                  name="theme"
                  type="checkbox"
                />
                <div class="mdc-checkbox__background">
                  <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                    <path
                      class="mdc-checkbox__checkmark-path"
                      fill="none"
                      d="M1.73,12.91 8.1,19.28 22.79,4.59"
                    />
                  </svg>
                  <div class="mdc-checkbox__mixedmark"></div>
                </div>
                <div class="mdc-checkbox__ripple"></div>
              </div>
              <label for="theme">Use Dark Theme</label>
            </div>
            <br />
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="mdi:alphabet-latin"
              >
                Initials
              </span>
              <input
                class="mdc-text-field__input"
                id="initials"
                maxlength="3"
                name="initials"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="initials">
                    Initials
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
              <div class="mdc-text-field-helper-line">
                <div class="mdc-text-field-character-counter">0 / 3</div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="ic:round-gradient"
              >
                Gradient
              </span>
              <input
                class="mdc-text-field__input"
                id="gradient"
                name="gradient"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="gradient">
                    Gradient
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="mdc-form-field">
          <div class="mdc-checkbox">
            <input
              class="mdc-checkbox__native-control"
              id="socials"
              name="socials"
              type="checkbox"
            />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path
                  class="mdc-checkbox__checkmark-path"
                  fill="none"
                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
                />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
            <div class="mdc-checkbox__ripple"></div>
          </div>
          <label for="socials">Include Socials</label>
        </div>
        <br />
        <div
          style="display: none"
          class="mdc-layout-grid"
          id="input_for_socials"
        >
          <div class="mdc-layout-grid__inner">
            <div
              class="mdc-layout-grid__cell mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:codepen"
              >
                CodePen
              </span>
              <input
                class="mdc-text-field__input"
                id="codepen"
                name="codepen"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="codepen">
                    CodePen username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:dev-dot-to"
              >
                DEV
              </span>
              <input class="mdc-text-field__input" id="dev" name="dev" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="dev">
                    DEV username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:discord"
              >
                Discord
              </span>
              <input
                class="mdc-text-field__input"
                id="discord"
                name="discord"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="dribbble">
                    Discord username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:dribbble"
              >
                Dribbble
              </span>
              <input
                class="mdc-text-field__input"
                id="dribbble"
                name="dribbble"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="dribbble">
                    Dribbble username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="ic:outline-email"
              >
                Email Address
              </span>
              <input class="mdc-text-field__input" id="email" name="email" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="codepen">
                    Email Address
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:facebook"
              >
                Facebook
              </span>
              <input
                class="mdc-text-field__input"
                id="facebook"
                name="facebook"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="facebook">
                    Facebook username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:instagram"
              >
                Instagram
              </span>
              <input
                class="mdc-text-field__input"
                id="instagram"
                name="instagram"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="instagram">
                    Instagram username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:keybase"
              >
                Keybase
              </span>
              <input
                class="mdc-text-field__input"
                id="keybase"
                name="keybase"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="keybase">
                    Keybase username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:linkedin"
              >
                Linkedin
              </span>
              <input
                class="mdc-text-field__input"
                id="linkedin"
                name="linkedin"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="linkedin">
                    LinkedIn username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:medium"
              >
                Medium
              </span>
              <input class="mdc-text-field__input" id="medium" name="medium" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="medium">
                    Medium username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:paypal"
              >
                PayPal
              </span>
              <input class="mdc-text-field__input" id="paypal" name="paypal" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="paypal">
                    PayPal username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:pinterest"
              >
                Pinterest
              </span>
              <input
                class="mdc-text-field__input"
                id="pinterest"
                name="pinterest"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="pinterest">
                    Pinterest username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:reddit"
              >
                Reddit
              </span>
              <input class="mdc-text-field__input" id="reddit" name="reddit" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="reddit">
                    Reddit username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:snapchat"
              >
                Snapchat
              </span>
              <input
                class="mdc-text-field__input"
                id="snapchat"
                name="snapchat"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="snapchat">
                    Snapchat username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:stackexchange"
              >
                Stack Exchange
              </span>
              <input
                class="mdc-text-field__input"
                id="stackexchange"
                name="stackexchange"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="stackexchange">
                    Stack Exchange user id
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:steam"
              >
                Steam
              </span>
              <input class="mdc-text-field__input" id="steam" name="steam" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="steam">
                    Steam username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="mdi:telegram"
              >
                Telegram
              </span>
              <input
                class="mdc-text-field__input"
                id="telegram"
                name="telegram"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="telegram">
                    Telegram username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:threads"
              >
                Threads
              </span>
              <input
                class="mdc-text-field__input"
                id="threads"
                name="threads"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="threads">
                    Threads username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:tvtime"
              >
                TV Time
              </span>
              <input class="mdc-text-field__input" id="tvtime" name="tvtime" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="tvtime">
                    TV Time user id
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify text_field-icon mdc-text-field__icon"
                data-icon="simple-icons:tumblr"
              >
                Tumblr
              </span>
              <input class="mdc-text-field__input" id="tumblr" name="tumblr" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="tumblr">
                    Tumblr username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify text_field-icon mdc-text-field__icon"
                data-icon="simple-icons:twitch"
              >
                Twitch
              </span>
              <input class="mdc-text-field__input" id="twitch" name="twitch" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="twitch">
                    Twitch username
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify text_field-icon mdc-text-field__icon"
                data-icon="simple-icons:x"
              >
                X
              </span>
              <input class="mdc-text-field__input" id="x" name="x" />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="x">X username</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:xdadevelopers"
              >
                XDA Developers
              </span>
              <input
                class="mdc-text-field__input"
                id="xdadevelopers"
                name="xdadevelopers"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="xdadevelopers">
                    XDA Developers user id
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
            <div
              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-layout-grid__cell"
            >
              <span
                class="iconify mdc-text-field__icon text_field-icon"
                data-icon="simple-icons:youtube"
              >
                YouTube
              </span>
              <input
                class="mdc-text-field__input"
                id="youtube"
                name="youtube"
              />
              <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                  <label class="mdc-floating-label" for="youtube">
                    YouTube channel id
                  </label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
      <div id="build-button">
        <button
          class="mdc-button button"
          id="build"
          onclick="validate()"
          type="submit"
        >
          <span class="mdc-button__ripple"></span>
          Build
        </button>
      </div>
    </form>
    <a href="./update">
      <button class="mdc-fab mdc-fab--extended fab">
        <div class="mdc-fab__ripple"></div>
        <span class="iconify fab_icon" data-icon="ic:outline-update">
          Update
        </span>
        <span class="mdc-fab__label fab_label">Update</span>
      </button>
    </a>
  </body>
  <script type="text/javascript" src="assets/js/index.js"></script>
  <script type="text/javascript">
    /** Initialize MDC Web components. */
    const buttons = document.querySelectorAll(".mdc-button, .mdc-fab");
    for (const button of buttons) {
      mdc.ripple.MDCRipple.attachTo(button);
    }
    const checkboxes = document.querySelectorAll(".mdc-checkbox");
    for (const checkbox of checkboxes) {
      mdc.checkbox.MDCCheckbox.attachTo(checkbox);
    }
    const radios = document.querySelectorAll(".mdc-radio");
    for (const radio of radios) {
      mdc.radio.MDCRadio.attachTo(radio);
    }
    const snackbar = new window.mdc.snackbar.MDCSnackbar(
      document.querySelector(".mdc-snackbar"),
    );
    const textFields = document.querySelectorAll(".mdc-text-field");
    for (const textField of textFields) {
      mdc.textField.MDCTextField.attachTo(textField);
    }
  </script>
</html>
