]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blobdiff - templates/index.html
added background to support section
[people/shoehn/ipfire.org.git] / templates / index.html
index c1bd16183a71575e64d187126012e716e8e545f9..bb32d3664a48094d5a2627ba43104f0441d49208 100644 (file)
@@ -16,8 +16,8 @@
                        </div>
                </div>
                
-               <div id="scrollto" class="page-scroll">
-                       <a href="#features" class="btn btn-outline-primary rounded-circle">
+               <div class="page-scroll">
+                       <a href="#features" class="btn btn-outline-primary rounded-circle scroll">
                                <svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
                        </a>
                </div>
                                                                IPFire wird in Europa entwickelt,
                                                                <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
                                                                überall auf der Welt eingesetzt, und bietet
-                                                               Internetzugang für hundertausende Nutzer jeden Tag.
+                                                               Internetzugang für hunderttausende Nutzer jeden Tag.
                                                        {% else %}
                                                                IPFire is developed in Europe and used all over the world
                                                                <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
        
        <section id="wishlist" class="content-section">
                <div class="container">
-                       
                        <h2 class="display-2 text-center text-white">IP<strong>Fire</strong>&rsquo;s Wishlist</h2>
                        
                                {% if hottest_wish %}
                                        <div class="d-flex flex-row justify-content-between align-items-baseline">
-                                               <h3 class="text-white">{{ hottest_wish.title }}</h3>
+                                               <h5 class="text-white">{{ hottest_wish.title }}</h5>
                
                                                {% if hottest_wish.is_new() %}
                                                        <span class="label label-success pull-right">{{ _("NEW") }}</span>
                                                                {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
                                                        </span>
                                                {% else %}
-                                                       <span class="amber-800 hidden-xs-down">
+                                                       <span class="h5 amber-800 hidden-xs-down">
                                                                {{ _("%d%% funded") % hottest_wish.percentage }}
                                                        </span>
                                                {% end %}
                                                </div>
                                        </div>
                                        
-                                       <p class="text-white"><a style="color: white; text-decoration: underline;" href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">Read more</a> about that wish.</p>
-                                       
+                                       <p class="text-white small"><a style="color: white; text-decoration: underline;" href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">Read more</a> about that wish.</p>                                      
                                {% end %}
-                       
                </div>
        </section>
        
                        
                        <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
                                <div class="col-6 col-md-3 mb-6 text-center">
-                                       <p class="mb-0 mb-sm-3"><small>Latest Release</small></p>
-                                       <h4 class="pb-5">2.19 Core 109</h4>
+                                       <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
+                                       <h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
                                        <div class="r_circle circle mt-5">
-                                               <p class="lead">48%</p>
+                                               <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
                                        </div>
                                        <script>
-                                               $('.r_circle').circleProgress({ value: 0.48, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
+                                               $('.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"><small>Favorite Kernel</small></p>
-                                       <h4 class="pb-5 truncate">3.14.79-ipfire-pae</h4>
+                                       <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="lead">36%</p>
+                                               <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"] } });
                                </div>
                                
                                <div class="col-6 col-md-3 text-center">
-                                       <p class="mb-0 mb-sm-3"><small>Favorite CPU</small></p>
-                                       <h4 class="pb-5">Intel</h4>
+                                       <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="lead">71%</p>
+                                               <p class="fireinfo_per">73%</p>
                                        </div>
                                        <script>
-                                               $('.c_circle').circleProgress({ value: 0.71, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#43a047"] } });
+                                               $('.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 truncate"><small>Favorite Virtualisation</small></p>
-                                       <h4 class="pb-5">VMWare</h4>
+                                       <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="lead">46%</p>
+                                               <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"] } });
                <div class="container">
                        <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
                        
-                       <div class="row mb-lg-6 mb-md-4 pb-6">
-                               <div class="col-md-12 col-lg-7 mb-5 mb-md-6">
+                       <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
+                               <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
                                        <p class="lead">
                                                {% if lang == "de" %}
                                                        <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet
                                                {% end %}
                                        </p>
                                </div>
-                               <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
+                               <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
                                        <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
                                        <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
                                </div>
                        </div>
                </div>
        </section>
+<script>
+$(document).ready(function () {
+       $('.scroll').on('click', function(event) {
+                       event.preventDefault();
+                       $('html, body').stop().animate({
+                               scrollTop: $('#features').offset().top -72
+                       }, 1000);
+       });
+});
+</script>
 {% end block %}