{% block title %}{{ _("Fireinfo") }}{% end block %}
{% block container %}
- <div class="header">
- <div class="container">
- <h1>{{ _("Fireinfo") }}</h1>
+ <section class="hero is-medium is-primary">
+ <div class="hero-body">
+ <div class="container">
+ <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <ul>
+ <li>
+ <a href="https://ipfire.org/">
+ Home
+ </a>
+ </li>
+ <li class="is-active">
+ <a href="/">
+ {{ _("Fireinfo") }}
+ </a>
+ </li>
+ </ul>
+ </nav>
- <p class="text-muted">
- <strong>Fireinfo</strong> is a tool that anonymously collects statistical
- data from IPFire systems
- </p>
+ <h1 class="title is-1">{{ _("Fireinfo") }}</h1>
- <div class="d-grid">
- <a class="btn btn-primary my-3" href="/profile/random">
+ <a class="button is-dark is-medium" href="/profile/random">
{{ _("Show a Random Profile") }}
</a>
</div>
</div>
- </div>
+ </section>
- <section>
+ <section class="section">
<div class="container">
- <div class="row justify-content-center align-items-center">
+ <div class="columns is-vcentered">
{% if latest_release %}
- <div class="col-12 col-md-4 text-center text-md-end">
+ <div class="column is-half is-centered">
<div>
- <h1 class="display-1 text-primary mb-0">
+ <h1 class="title is-1 has-text-primary">
{{ "%.2f%%" % (latest_release.penetration * 100) }}
</h1>
- <h5>
+ <h5 class="title is-5">
{{ _("of all IPFire systems are on the latest release, released %s") % locale.format_date(latest_release.published, relative=True, shorter=True) }}
</h5>
- <a class="btn btn-sm btn-light" href="/releases">
+ <a class="button is-primary is-outlined" href="/releases">
{{ _("See All Releases") }}
</a>
</div>
</div>
{% end %}
- <div class="col-12 col-md-3 text-center text-md-start">
- <img class="img-fluid my-5" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
+ <div class="column is-one-third is-centered">
+ <img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
</div>
</div>
</div>
</section>
- <section class="bg-light">
+ <section class="section has-background-primary-light">
<div class="container">
- <h4>{{ _("Locations") }}</h4>
+ <h4 class="title is-4">{{ _("Locations") }}</h4>
- <dl class="row">
- {% for country_code, percentage in locations %}
+ {% for country_code, percentage in locations %}
+ <div class="columns is-mobile">
{% if percentage >= 0.01 %}
- <dt class="col-sm-6">
- <span class="flag-icon flag-icon-{{ country_code.lower() }} small mr-1"></span>
- {{ format_country_name(country_code) }}
- </dt>
+ <div class="column is-one-fifth">
+ <span class="flag-icon flag-icon-{{ country_code.lower() }}"></span>
+ <span class="">{{ format_country_name(country_code) }}</span>
+ </div>
- <dd class="col-sm-6">
+ <div class="column is-7">
{% module ProgressBar(percentage, "success") %}
- </dd>
+ </div>
{% end %}
- {% end %}
- </dl>
+ </div>
+ {% end %}
<p>
- {{ _("IPFire is also running in these countries: %s") % locale.list([(format_country_name(c) or c) for c, p in locations if p < 0.01]) }}
+ <span class="has-text-weight-bold">IPFire<span class="has-text-primary">_</span></span>
+ {{_("is also running in these countries: %s") % locale.list([(format_country_name(c) or c) for c, p in locations if p < 0.01]) }}
</p>
</div>
</section>
- <section>
+ <section class="section">
<div class="container">
- <div class="row">
- <div class="col-12 col-lg-6">
- <h4>{{ _("Architectures") }}</h4>
-
- <dl class="row">
- {% for name, percentage in arches %}
- <dt class="col-sm-3">{{ name }}</dt>
-
- <dd class="col-sm-9">
- {% module ProgressBar(percentage, "success") %}
- </dd>
- {% end %}
- </dl>
- </div>
-
- <div class="col-12 col-lg-6">
- <h4>{{ _("CPU Vendors") }}</h4>
+ <div class="columns is-vcentered">
+ <div class="column is-half">
+ <div class="block">
+ <h4 class="title is-4">{{ _("CPU Vendors") }}</h4>
- <dl class="row">
{% for name, percentage in cpu_vendors %}
- <dt class="col-sm-3">{{ name }}</dt>
+ <div class="columns">
+ <div class="column is-1">{{ name }}</div>
- <dd class="col-sm-9">
- {% module ProgressBar(percentage, "success") %}
- </dd>
+ <div class="column">
+ {% module ProgressBar(percentage, "success") %}
+ </div>
+ </div>
{% end %}
- </dl>
- <div class="d-grid">
- <a class="btn btn-sm btn-light" href="/processors">
+ <a class="button is-primary" href="/processors">
{{ _("Processor Features") }}
</a>
</div>
+
+ <div class="block">
+ <h4 class="title is-4">{{ _("Architectures") }}</h4>
+
+ {% for name, percentage in arches %}
+ <div class="columns">
+ <div class="column is-1">{{ name }}</div>
+
+ <div class="column">
+ {% module ProgressBar(percentage, "success") %}
+ </div>
+ </div>
+ {% end %}
+ </div>
+ </div>
+ <div class="column is-half has-text-centered">
+ <h1 class="title is-1">{{ format_size(memory_avg * 1024, "MB") }}</h1>
+
+ <span class="tag">
+ {{ _("Average Amount of Memory") }}
+ </span>
</div>
</div>
</div>
</section>
- <section>
+ <section class="section">
<div class="container">
- <div class="row justify-content-center align-items-center">
- <div class="col-12 col-md-4 text-center text-md-end">
- <div>
- <h1 class="display-1 text-success mb-0">
- {{ "%.2f%%" % (virtual_ratio * 100) }}
- </h1>
-
- <h5>{{ _("of all IPFire systems are running in a virtual environment") }}</h5>
- </div>
+ <div class="columns is-vcentered">
+ <div class="column is-half has-text-centered">
+ <h1 class="title is-1 has-text-primary">
+ {{ "%.2f%%" % (virtual_ratio * 100) }}
+ </h1>
+
+ <h5 class="title is-5">{{ _("of all IPFire systems are running in a virtual environment") }}</h5>
</div>
- <div class="col-12 col-md-6">
- <h4>{{ _("Top Hypervisors") }}</h4>
+ <div class="column is-half">
+ <h4 class="title is-4">{{ _("Top Hypervisors") }}</h4>
- <dl class="row">
- {% for name, percentage in hypervisors %}
+ {% for name, percentage in hypervisors %}
+ <div class="columns">
{% if percentage >= 0.01 %}
- <dt class="col-sm-3">
+ <div class="column is-1">
{% if name == "unknown" %}
<span class="text-muted">{{ _("Unknown") }}</span>
{% elif name == "VMWare" %}
{% else %}
{{ name }}
{% end %}
- </dt>
+ </div>
- <dd class="col-sm-9">
+ <div class="column is-8">
{% module ProgressBar(percentage, "success") %}
- </dd>
+ </div>
{% end %}
- {% end %}
- </dl>
+ </div>
+ {% end %}
</div>
</div>
</div>