fireinfo: Show popular country on index page

[ipfire.org.git] / templates / index.html

diff --git a/templates/index.html b/templates/index.html
index 61aab0a93b0dfd1e34d647ccedf656843b2476a7..3e33db0149c534e6cc8857e2c65fdba5d1e7f045 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -174,7 +174,7 @@
                <div class="container">
                        <h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
                        
-                       <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
+                       <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6 justify-content-center">
                                <div class="col-6 col-md-3 mb-6 text-center">
                                        <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
                                        <h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
@@ -185,39 +185,21 @@
                                                $('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
                                        </script>
                                </div>
-                               
-                               <div class="col-6 col-md-3 mb-6 text-center">
-                                       <p class="mb-0 mb-sm-3 fireinfo_cat">Favorite Kernel</p>
-                                       <h5 class="pb-5 fireinfo truncate">3.14.79-ipfire-pae</h5>
-                                       <div class="f_circle circle mt-5">
-                                               <p class="fireinfo_per">36%</p>
-                                       </div>
-                                       <script>
-                                               $('.f_circle').circleProgress({ value: 0.36, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#00bcd4"] } });
-                                       </script>       
-                               </div>
-                               
-                               <div class="col-6 col-md-3 text-center">
-                                       <p class="mb-0 mb-sm-3 fireinfo_cat">Favorite CPU</p>
-                                       <h5 class="pb-5 fireinfo">Intel</h5>
-                                       <div class="c_circle circle mt-5">
-                                               <p class="fireinfo_per">73%</p>
-                                       </div>
-                                       <script>
-                                               $('.c_circle').circleProgress({ value: 0.73, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#43a047"] } });
-                                       </script>       
-                               </div>
-                               
-                               <div class="col-6 col-md-3 text-center">
-                                       <p class="mb-0 mb-sm-3 fireinfo_cat truncate">Favorite Virtualisation</p>
-                                       <h5 class="pb-5 fireinfo">VMWare</h5>
-                                       <div class="v_circle circle mt-5">
-                                               <p class="fireinfo_per">46%</p>
-                                       </div>
-                                       <script>
-                                               $('.v_circle').circleProgress({ value: 0.46, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
-                                       </script>       
-                               </div>
+
+                               {% if fireinfo_country %}
+                                       <div class="col-6 col-md-3 text-center">
+                                               <p class="mb-0 mb-sm-3 fireinfo_cat truncate">
+                                                       {{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}
+                                               </p>
+                                               <h5 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h5>
+                                               <div class="v_circle circle mt-5">
+                                                       <p class="fireinfo_per">{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}</p>
+                                               </div>
+                                               <script>
+                                                       $('.v_circle').circleProgress({ value: {{ fireinfo_country.percentage }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
+                                               </script>
+                                       </div>
+                               {% end %}
                        </div>
                        
                        <div class="row justify-content-center">