<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
    <link rel="stylesheet" href="https://andybrewer.github.io/mvp/mvp.css" />

    <meta charset="utf-8" />
    <meta name="description" content="My description" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="api.chainz.rest" />
    <meta property="og:site_name" content="api.chainz.rest" />
    <meta property="og:url" content="https://api.chainz.rest" />
    <meta
      property="og:description"
      content="A free REST API for random 2 Chainz quotes"
    />
    <meta property="og:type" content="website" />

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:creator" content="@Anson_3D" />
    <meta name="twitter:url" content="https://api.chainz.rest" />
    <meta name="twitter:title" content="api.chainz.rest" />
    <meta
      name="twitter:description"
      content="A free REST API for random 2 Chainz quotes"
    />
    <meta
      name="twitter:image"
      content="https://api.chainz.rest/static/apple-icon.png"
    />
    <style>
      body {
        background-color: #d9c06e;
        color: #03252a;
      }
      hr {
        background-color: #03252a;
      }

      section aside {
        border: 1px solid black;
        box-shadow: none;
      }

      :root {
        --color: darkviolet;
        --color-bg-secondary: black;
      }

      @media screen and (max-width: 700px) {
        #scroll-icon {
          display: none;
        }
      }
    </style>
    <title>2.chainz.rest</title>
  </head>

  <body>
    <header style="height: 50vh;">
      <nav>
        <ul>
          <li>
            <a href="https://2.chainz.rest">2.chainz.rest</a> - A REST API for 2
            Chainz Quotes
          </li>
        </ul>
      </nav>
      <section>
        <blockquote>
          <span id="quote">Quote</span>
          <footer><i>- 2 Chainz</i></footer>
        </blockquote>
      </section>
      <p>
        <a onclick="getQuote()" href="#"
          ><b>
            <ion-icon size="large" name="refresh-circle"></ion-icon><br />
            New Quote</b
          ></a
        >
        <a id="tweet" href="#"
          ><b
            ><ion-icon size="large" name="logo-twitter"></ion-icon> <br />
            Tweet Quote
          </b></a
        >
      </p>
    </header>
    <header id="scroll-icon" style="height: 30vh;">
      <a href="#scroll"
        ><ion-icon size="large" name="arrow-down-sharp"></ion-icon
      ></a>
    </header>
    <main>
      <hr style="padding-top: 0;" />
      <header id="scroll">
        <h2>Usage</h2>
        <p>
          The API currently only has one endpoint:
          <code
            ><a href="https://api.chainz.rest/quote"
              >https://api.chainz.rest/quote</a
            ></code
          >
          which returns a JSON object containing a quote.
        </p>
      </header>
      <hr />
      <section>
        <header>
          <h2>Frequently Asked Questions</h2>
        </header>
        <aside>
          <h3>Can I use this?</h3>
          <p>
            Please do! This project uses a
            <a href="https://tldrlegal.com/license/mit-license#summary"
              >MIT License</a
            >
            which means your welcome to do whatever you want.
          </p>
          <p>
            <small
              ><a href="https://twitter.com/Anson_3D"
                >Please let me know if you use it though!</a
              ></small
            >
          </p>
        </aside>
        <aside>
          <h3>Do I need an API key or is this API rate limited?</h3>
          <p>
            No, the API is totally free and unlimited. However, its being hosted
            by a college student so be nice.
          </p>
        </aside>
        <aside>
          <h3>Is this project open source? Can I contribute?</h3>
          <p>
            Yes and Yes! Check out the
            <a href="https://gitlab.com/2-chainz">Project on GitLab</a>
          </p>
        </aside>
        <aside>
          <h3>Does 2 Chainz know about this?</h3>
          <p>
            Probably not.
          </p>
        </aside>
        <aside>
          <h3>Why?</h3>
          <p>
            Because 2 Chainz has some of the best lines in the rap game.
          </p>
        </aside>
      </section>
    </main>
    <footer>
      <hr />
      <p>
        Made by <a href="https://gitlab.com/MisterBiggs">Anson Biggs</a>,
        <a href="https://twitter.com/Anson_3D">@Anson_3D</a>
      </p>
      <p>
        Inspired By <a href="https://kanye.rest/">kanye.rest</a> which was
        created by:
        <a href="https://ajzbc.com" target="_blank">Andrew Jazbec</a>,
        <a href="https://twitter.com/ajzbc" target="_blank">@ajzbc</a>
      </p>
      <p><small>Truuuuuuuu</small></p>
    </footer>
    <script>
      getQuote();

      function getQuote() {
        fetch("https://api.chainz.rest/quote", { method: "GET" })
          .then((resp) => resp.json())
          .then(function (data) {
            document.getElementById("quote").innerHTML = data.quote;

            const tweet = encodeURIComponent(
              `"${data.quote}" -@2chainz via https://2.chainz.rest`
            );
            document.getElementById(
              "tweet"
            ).href = `https://twitter.com/intent/tweet?text=${tweet}`;
          });
      }
    </script>
    <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
  </body>
</html>