bunkerweb/ui/templates/home.html

{% extends "base.html" %} {% block content %}
<div class="container-fluid px-3 py-5 p-md-5">
  <div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div
                class="text-xs font-weight-bold text-primary text-uppercase mb-1"
              >
                BunkerWeb version
              </div>
              {% if check_version %}
              <div class="h5 mb-0 font-weight-bold text-gray-800">
                {{ version }} {% if not remote_version %}
                <span class="h6 mb-0 text-warning"
                  >(couldn't fetch remote version)</span
                >
                {% endif %}
              </div>
              {% else %}
              <div class="h5 mb-0 font-weight-bold">
                <span class="text-warning">{{ version }} (your version)</span>
                <i class="fa-solid fa-arrow-right-long"></i>
                <span class="text-success">{{ remote_version }} (latest)</span>
              </div>
              {% endif %}
            </div>
            {% if not check_version %}
            <div class="col-auto">
              <a
                href="https://github.com/bunkerity/bunkerweb"
                class="btn btn-success"
                >Update</a
              >
            </div>
            {% endif %}
            <div class="col-auto">
              <i class="fa-solid fa-code-branch fa-2x text-gray-300"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div
                class="text-xs font-weight-bold text-primary text-uppercase mb-1"
              >
                Number of instances
              </div>
              <div class="h5 mb-0 font-weight-bold text-gray-800">
                {{ instances_number }}
              </div>
            </div>
            <div class="col-auto">
              <i class="fa-solid fa-hard-drive fa-2x text-gray-300"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div
                class="text-xs font-weight-bold text-primary text-uppercase mb-1"
              >
                Number of web services
              </div>
              <div class="row no-gutters align-items-center">
                <div class="col-auto">
                  <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                    {{ services_number }}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <i class="fa-solid fa-globe fa-2x text-gray-300"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div
                class="text-xs font-weight-bold text-primary text-uppercase mb-1"
              >
                Join the community !
              </div>
              <div class="row no-gutters align-items-center">
                <div class="col-auto">
                  <a href="https://twitter.com/bunkerity" target="_blank">
                    <i class="fa-brands fa-twitter fa-2x text-gray-800"></i>
                  </a>
                </div>
                <div class="col-auto">
                  <a
                    href="https://www.linkedin.com/company/bunkerity/"
                    target="_blank"
                  >
                    <i class="fa-brands fa-linkedin fa-2x text-gray-800"></i>
                  </a>
                </div>
                <div class="col-auto">
                  <a href="https://discord.gg/fTf46FmtyD" target="_blank">
                    <i class="fa-brands fa-discord fa-2x text-gray-800"></i>
                  </a>
                </div>
                <div class="col-auto">
                  <a href="https://github.com/bunkerity" target="_blank">
                    <i class="fa-brands fa-github fa-2x text-gray-800"></i>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <i class="fa-solid fa-hashtag fa-2x text-gray-300"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% if posts %}
<section class="blog-list px-3 py-5 p-md-5">
  <h1>News ‒</h1>
  <div class="container single-col-max-width">
    {% for post in posts %}
    <div class="item mb-5">
      <div class="row g-3 g-xl-0">
        <div class="col-2 col-xl-3">
          <a href="{{ post['link'] }}" target="_blank"
            ><img
              class="img-fluid post-thumb"
              src="{{ post['image_url'] }}"
              alt="image"
          /></a>
        </div>
        <div class="col">
          <h3 class="title mb-1">
            <a class="text-link" href="{{ post['link'] }}" target="_blank"
              >{{ post['title'] }}</a
            >
          </h3>
          <div class="meta mb-1">
            <span class="date">{{ post['date'] }}</span
            ><span class="time">{{ post['reading_time'] }} read</span>
          </div>
          <div class="intro">{{ post['description'] }}</div>
          <a class="text-link" href="{{ post['link'] }}" target="_blank"
            >Read more &rarr;</a
          >
        </div>
        <!--//col-->
      </div>
      <!--//row-->
    </div>
    <!--//item-->
    {% endfor %}

    <nav class="blog-nav nav nav-justified my-5">
      <a
        class="nav-link-next nav-item nav-link rounded"
        href="https://www.bunkerity.com/blog/"
        target="_blank"
        >See more posts</a
      >
    </nav>
  </div>
</section>
{% else %}
<div class="no_internet">
  <div class="container-fluid my-5 d-flex justify-content-center">
    <div class="row justify-content-center">
      <div class="col">
        <div class="card">
          <div class="card-header pb-0 bg-white border-0 text-center px-sm-4">
            <h6 class="text-left mt-4 font-weight-bold mb-0">
              <span
                ><i
                  class="fa fa-times-circle fa-lg mr-3"
                  aria-hidden="true"
                ></i>
              </span>
              No internet connection
            </h6>
            <span class="img-1 text-center"
              ><img src="images/no_internet.png" class="img-fluid my-4"
            /></span>
          </div>
          <div class="card-body px-sm-4 mb-3">
            <ul class="list-unstyled text-muted">
              <li>
                Please re-connect to the internet to show the latest news.
              </li>
              <li>If you encounter problems:</li>
              <ul class="mt-2 inner">
                <li>Try restarting wireless connection on this device.</li>
                <li>Move closer to your wireless access point.</li>
              </ul>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %} {% endblock %}