]> git.ipfire.org Git - ipfire.org.git/blobdiff - src/templates/fireinfo/index.html
fireinfo/index: restyled the page
[ipfire.org.git] / src / templates / fireinfo / index.html
index 201e3c46b2bee1fc4de38e5272adc5da2a58e220..72d3ac9a9bbd2f10f17729f2059f7f86081101ea 100644 (file)
 {% 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>