{{- 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>
        <!-- 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>It's impossible to use Pixiv without JavaScript enabled. 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>Using an instance of Pixiv, 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, and serves pages faster (e.g. artworks load 2x faster).</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 }}