{{- extends "layout/default" }}
{{- block body() }}
<div class="row justify-content-center g-4">
  <h1 class="text-center"><i class="bi bi-info-circle me-2"></i>About</h1>

  <div class="col-12 col-md-9">
    <div class="row">
      <div class="col-12 col-lg-6 mb-4">
        <!-- mb-2 here specifically to not let headings float  -->
        <h2 class="mb-2">About PixivFE</h2>
        <p>PixivFE is an open-source alternative frontend for Pixiv, allowing you to enjoy artwork without unnecessary distractions.</p>
        <p>This instance is hosted by the owner of <span class="fw-bold">{{ .DomainName }}</span>. If you're interested in hosting PixivFE yourself, please visit <a href="{{ .RepoURL }}">the source repository</a> for more information.</p>
        <p><b>Disclaimer:</b> This is <b>NOT</b> a pixiv's product and was <b>NOT</b> developed, created, or distributed by pixiv.</p>
        <!-- The rest of this column is mostly intended to eliminate weird negative space on this page -->
        <!-- TODO: put actual content here -->
        <!-- The following section is an adapation of Nitter's about page -->
        <h2 class="mb-2">Why use PixivFE?</h2>
        <p>The original Pixiv website has been criticized for being very resource intensive and slow due to the heavy usage of JavaScript. Also because of this, it is impossible to browse Pixiv without JavaScript enabled. Some features are bugged with external analytics and could be unavailable without making unsolicited requests. Some pages require you to be logged in in order to be accessible, limiting your browsing experience.</p>
        <p>For privacy-minded folks, preventing JavaScript analytics and IP-based tracking is important, but apart from using a VPN and uBlock/uMatrix, it's impossible. Despite being behind a VPN and using heavy-duty adblockers, you can get accurately tracked with your <a href="https://restoreprivacy.com/browser-fingerprinting/">browser's fingerprint</a>, <a href="https://noscriptfingerprint.com/">no JavaScript required</a>.</p>
        <p>PixivFE aims to provide an open, free (as in freedom), transparent and lightweight alternative option for browsing Pixiv.</p>
        <p>Using an instance of PixivFE, you can browse Pixiv without JavaScript while retaining your privacy. In addition to respecting your privacy, PixivFE is on average around twice as light (in terms of data transfered) than Pixiv, serves pages faster (e.g. artworks load 2x faster) and has a small memory footprint on the server (as in version 2.10, a private instance of PixivFE may never use over 15MB of RAM).</p>
        <p>If you are interested in either hosting a public instance or a private one as your personal client, read <a href="https://pixivfe-docs.pages.dev/hosting/hosting-pixivfe/">the guide</a> - it is very simple to host and use!</p>
        <div class="row">
          <div class="col-6">
            <video class="w-100 rounded" autoplay loop muted disablepictureinpicture playsinline controls poster="/proxy/i.pximg.net/img-master/img/2023/04/23/13/55/59/107442519_master1200.jpg" src="/proxy/ugoira.com/107442519">Unable to load ugoira.</video>
          </div>
          <div class="col-6">
            <a href="/artworks/107442519" alt="Artwork link" class="text-decoration-none">
              <figure>
                <blockquote class="blockquote">
                  <p>くるくる〜くるくるりん</p>
                </blockquote>
                <figcaption class="blockquote-footer text-body-secondary">Herta, <cite title="Source Title">#83 of the Genius Society</cite></figcaption>
              </figure>
            </a>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-6">
        <div class="custom-card bg-charcoal-surface1 p-4">
          <h2>Server Information</h2>
          <div class="list-group list-group-flush">
            <div class="list-group-item bg-charcoal-surface1 pt-0 pb-3 px-0">
              <!-- Spacing between the icon + h3 element and the templated in value -->
              <h3><i class="bi bi-tag me-2"></i>Version</h3>
              <!-- Larger spacing between the templated in value and description -->
              <p><code class="bg-dark-subtle rounded p-1">{{ .Version }}</code></p>
              <p class="text-muted mb-0">The current version of PixivFE running on this server</p>
            </div>

            {{- if .Revision != "" }}
            <div class="list-group-item bg-charcoal-surface1 py-3 px-0">
              <h3><i class="bi bi-git me-2"></i>Revision</h3>
              <!-- .text-reset causes the text color to be inherited from its parent; the underline decoration is preserved -->
              <p>
                <code class="bg-dark-subtle rounded p-1"><a href="{{ .RepoURL }}/commit/{{ .RevisionHash }}" class="text-reset">{{ .Revision }}</a></code>
              </p>
              <p class="text-muted mb-0">The specific revision of PixivFE source code in use</p>
            </div>
            {{- end }}

            <div class="list-group-item bg-charcoal-surface1 py-3 px-0">
              <h3><i class="bi bi-clock me-2"></i>Server start time (UTC)</h3>
              <p><code class="bg-dark-subtle rounded p-1">{{ .Time }}</code></p>
              <p class="text-muted mb-0">The date and time when PixivFE was last started on this server</p>
            </div>

            <div class="list-group-item bg-charcoal-surface1 py-3 px-0">
              <h3><i class="bi bi-image me-2"></i>Default image proxy server</h3>
              <p><code class="bg-dark-subtle rounded p-1">{{ .ImageProxy }}</code></p>
              <p class="text-muted mb-0">The image proxy server used to retrieve images from i.pximg.net</p>
            </div>

            <div class="list-group-item bg-charcoal-surface1 pt-3 pb-0 px-0">
              <h3><i class="bi bi-globe me-2"></i>Accept-Language header</h3>
              <p><code class="bg-dark-subtle rounded p-1">{{ .AcceptLanguage }}</code></p>
              <p class="text-muted mb-0">The preferred natural language and locale when making requests to the Pixiv API</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{- end }}