<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1" />
    <title>Fedifeed - embeddable ActivityPub feeds</title>
    <link rel="stylesheet" href="./css/stylesheet.css" />
    <script src="./js/script.js" defer></script>
  </head>

  <body>
    <br />
    <div>
      <h1>Fedifeed</h1>
      <h4>Embedded Mastodon/Pleroma/Misskey feeds for blogs, websites, etc.</h4>
      <a href="https://git.froth.zone/sam/fedifeed" class="cta button alt"
        >Fork on Gitea
        <img class="link-logo after" src="img/gitea-logo.svg" alt="Gitea Logo"
      /></a>
      <br />
      <br />
      <hr />
      <br />
      <form action="javascript:genUrl()">
        <label
          >Instance URL:<input
            required
            type="text"
            id="urlin"
            placeholder="froth.zone"
            oninvalid="this.setCustomValidity('Insert your instance URL. Example: mastodon.social')"
            oninput="this.setCustomValidity('')"
        /></label>
        <br />
        <label
          >Username:<input
            required
            type="text"
            id="usernamein"
            placeholder="sam"
            oninvalid="this.setCustomValidity('Insert your username. Example: gargron')"
            oninput="this.setCustomValidity('')"
        /></label>
        <br />
        <label
          >Width (px):<input
            required
            type="number"
            id="width"
            value="400"
            oninvalid="this.setCustomValidity('Insert width of generated feed. Default: 400')"
            oninput="this.setCustomValidity('')"
        /></label>
        <br />
        <label
          >Height (px):<input
            required
            type="number"
            id="height"
            value="800"
            oninvalid="this.setCustomValidity('Insert height of generated feed. Default: 800')"
            oninput="this.setCustomValidity('')"
        /></label>
        <br />
        <label
          >UI Scale (percent):<input
            required
            type="number"
            id="size"
            value="100"
            oninvalid="this.setCustomValidity('Insert UI scale. Default: 100')"
            oninput="this.setCustomValidity('')"
        /></label>
        <br />
        <label
          >Theme:
          <select id="theme">
            <option value="auto-auto">
              auto-auto (depends on instance, automatic)
            </option>
            <option value="auto-dark" selected>
              auto-dark (depends on instance, use dark)
            </option>
            <option value="auto-light">
              auto-light (depends on instance, use light)
            </option>
            <option value="masto-dark">masto-dark</option>
            <option value="masto-light">masto-light</option>
            <option value="masto-auto">
              masto-auto (based on css prefers-color-scheme)
            </option>
            <option value="misskey-dark">misskey-dark</option>
            <option value="misskey-light">misskey-light</option>
            <option value="misskey-auto">
              misskey-auto (based on css prefers-color-scheme)
            </option>
            <option value="pleroma">pleroma</option>
          </select>
        </label>
        <br />
        <label
          >Show Header?<input id="header" type="checkbox" checked="checked"
        /></label>
        <br />
        <label>Hide replies?<input type="checkbox" id="hidereplies" /></label>
        <br />
        <label>Hide boosts?<input type="checkbox" id="hideboosts" /></label>
        <br />
        <br />
        <button value="generate">Generate</button>
      </form>
      <br /><br />
      <label
        >Use this markup in your HTML: <br /><textarea
          id="result"
          placeholder="result will go here"
        ></textarea>
      </label>
      <br /><br />
      <h3>Live Preview:</h3>
      <span class="iframe-contain">
        <iframe
          id="frame"
          title="Powered by Fedifeed"
          allowfullscreen
          sandbox="allow-top-navigation allow-scripts"
          width="400"
          height="800"
          src="/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=100&header=true&replies=true&boosts=true"
        ></iframe>
      </span>
      <br />
    </div>
  </body>
</html>