]> git.ipfire.org Git - ipfire.org.git/commitdiff
location: Update design of index page
authorMichael Tremer <michael.tremer@ipfire.org>
Sun, 28 Nov 2021 13:06:50 +0000 (13:06 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Sun, 28 Nov 2021 13:06:50 +0000 (13:06 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/templates/location/index.html

index 26d97ba7a650490990593263c26ab733526c2036..d1947cd25956da64e963d5d5b0e41f81a00bf311 100644 (file)
        <meta name="description" content="{{ _("A powerful location database to find people on the Internet") }}" />
 {% end block %}
 
-{% block title %}{{ _("Welcome to IPFire") }}{% end block %}
+{% block title %}{{ _("Welcome to IPFire Location") }}{% end block %}
 
 {% block container %}
-       <header class="cover">
-               <div class="container d-flex h-100 align-items-center">
-                       <div class="row flex-fill justify-content-center">
-                               <div class="col-12 col-lg-6 text-center">
-                                       <h1 class="mb-5">
-                                               {{ _("Hey, %s!" % address) }}
-                                       </h1>
-
-                                       {% if address.country_code %}
-                                               <div class="my-5">
-                                                       <h1 class="display-4 flag-icon flag-icon-{{ address.country_code.lower() }}"></h1>
-
-                                                       <p class="lead">
-                                                               {{ _("You are visiting from %s") % format_country_name(address.country_code) }}
-                                                       </p>
-                                               </div>
-                                       {% end %}
-
-                                       <a class="btn btn-light btn-block" href="/lookup/{{ address }}">
-                                               {{ _("Show Me More") }}
-                                       </a>
-                               </div>
-                       </div>
-               </div>
-       </header>
-
-       <section class="inverse">
+       <div class="header">
                <div class="container">
-                       <div class="row mb-5">
-                               <div class="col-12">
-                                       <h1 class="mb-3">{{ _("What is IPFire Location?") }}</h1>
-
-                                       <p>
-                                               IPFire Location can be used in firewalls or other threat
-                                               detection software, load-balancers, online shops, websites,
-                                               analytics &amp; reporting tools and more to detect the
-                                               originating country by IP address.
-                                               We are proud that our software is faster than others
-                                               by maintaining a smaller memory footprint which puts it
-                                               first in performance.
-                                       </p>
-
-                                       <p>
-                                               Our daily updated database does not only have information
-                                               about the originating country of all IPv6 and IPv4 addresses.
-                                               It identifies the Autonomous System (AS) these IP
-                                               addresses belong to, as well and more...
-                                       </p>
-
-                                       <p>
-                                               <code>libloc</code> is the C/C++ library that fires our
-                                               location services and runs on *nix, Mac OS X and more.
-                                               Integration into existing software is very easy and
-                                               bindings for languages like Python and Perl are available.
-                                       </p>
-
-                                       <div class="btn-toolbar mb-5">
-                                               <a class="btn btn-secondary mr-2" href="/how-to-use">{{ _("How To Use") }}</a>
-                                               <a class="btn btn-primary" href="https://www.ipfire.org/donate">
-                                                       {{ _("Donate") }}
-                                               </a>
-                                       </div>
-                               </div>
-                       </div>
+                       <h1>{{ _("Welcome to IPFire Location") }}</h1>
 
-                       <div class="row mt-5">
-                               <div class="col-md-12 col-lg-6 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-biohazard fa-2x text-primary px-3"></span>
-                                       </div>
+                       <p class="text-muted">
+                               {% if address.country_code %}
+                                       {{ _("We have detected you visiting us from %s.") % format_country_name(address.country_code) }}
+                               {% else %}
+                                       {{ _("Unfortunately we do not know where you are visiting us from.") }}
+                               {% end %}
 
-                                       <div class="flex-column">
-                                               <h5 class="mb-3">{{ _("Threat Detection") }}</h5>
+                               <a href="/lookup/{{ address }}">{{ _("Learn More") }}</a>
+                       </p>
+               </div>
+       </div>
+
+       <div class="container">
+               <section>
+                       <h3>{{ _("What is IPFire Location?") }}</h3>
+
+                       <p>
+                               IPFire Location can be used in firewalls or other threat
+                               detection software, load-balancers, online shops, websites,
+                               analytics &amp; reporting tools and more to detect the
+                               originating country by IP address.
+                               We are proud that our software is faster than others
+                               by maintaining a smaller memory footprint which puts it
+                               first in performance.
+                       </p>
+
+                       <p>
+                               Our daily updated database does not only have information
+                               about the originating country of all IPv6 and IPv4 addresses.
+                               It identifies the Autonomous System (AS) these IP
+                               addresses belong to, as well and more...
+                       </p>
+
+                       <p>
+                               <code>libloc</code> is the C/C++ library that fires our
+                               location services and runs on *nix, Mac OS X and more.
+                               Integration into existing software is very easy and
+                               bindings for languages like Python and Perl are available.
+                       </p>
+
+                       <div class="btn-toolbar">
+                               <a class="btn btn-secondary mr-2" href="/how-to-use">{{ _("How To Use") }}</a>
+                               <a class="btn btn-primary" href="https://www.ipfire.org/donate">
+                                       {{ _("Donate") }}
+                               </a>
+                       </div>
+               </section>
+       </div>
 
-                                               <p>
-                                                       {{ _("Location information is crucial to identify where an attacker is coming from.") }}
-                                                       <br>
-                                                       {{ _("Analyze your traffic for malicious autonomous systems and block the straight away with IPFire.") }}
-                                               </p>
-                                       </div>
-                               </div>
+       <section>
+               <div class="container">
+                       <div class="card bg-primary text-white p-5">
+                               <div class="card-body">
+                                       <div class="row">
+                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
+                                                       <div class="align-self-stretch">
+                                                               <span class="fas fa-biohazard fa-2x px-3"></span>
+                                                       </div>
+
+                                                       <div class="flex-column">
+                                                               <h5 class="mb-3">{{ _("Threat Detection") }}</h5>
+
+                                                               <p>
+                                                                       {{ _("Location information is crucial to identify where an attacker is coming from.") }}
+                                                                       <br>
+                                                                       {{ _("Analyze your traffic for malicious autonomous systems and block the straight away with IPFire.") }}
+                                                               </p>
+                                                       </div>
+                                               </div>
 
-                               <div class="col-md-12 col-lg-6 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-balance-scale fa-2x text-primary px-3"></span>
-                                       </div>
+                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
+                                                       <div class="align-self-stretch">
+                                                               <span class="fas fa-balance-scale fa-2x px-3"></span>
+                                                       </div>
 
-                                       <div class="flex-column">
-                                               <h5 class="mb-3">{{ _("Load-Balancing") }}</h5>
+                                                       <div class="flex-column">
+                                                               <h5 class="mb-3">{{ _("Load-Balancing") }}</h5>
 
-                                               <p>
-                                                       {{ _("Redirect your users to the nearest data center to given them a better user experience with faster websites and faster downloads.") }}
-                                               </p>
-                                       </div>
-                               </div>
+                                                               <p>
+                                                                       {{ _("Redirect your users to the nearest data center to given them a better user experience with faster websites and faster downloads.") }}
+                                                               </p>
+                                                       </div>
+                                               </div>
 
-                               <div class="col-md-12 col-lg-6 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-route fa-2x text-primary px-3"></span>
-                                       </div>
+                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
+                                                       <div class="align-self-stretch">
+                                                               <span class="fas fa-route fa-2x px-3"></span>
+                                                       </div>
 
-                                       <div class="flex-column">
-                                               <h5 class="mb-3">{{ _("Online Visitors") }}</h5>
+                                                       <div class="flex-column">
+                                                               <h5 class="mb-3">{{ _("Online Visitors") }}</h5>
 
-                                               <p>
-                                                       {{ _("Comply with legal requirements and show visitors the correct information depending on the country they are visiting from.") }}
-                                               </p>
-                                       </div>
-                               </div>
+                                                               <p>
+                                                                       {{ _("Comply with legal requirements and show visitors the correct information depending on the country they are visiting from.") }}
+                                                               </p>
+                                                       </div>
+                                               </div>
 
-                               <div class="col-md-12 col-lg-6 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fab fa-osi fa-2x text-primary px-3"></span>
-                                       </div>
+                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
+                                                       <div class="align-self-stretch">
+                                                               <span class="fab fa-osi fa-2x px-3"></span>
+                                                       </div>
 
-                                       <div class="flex-column">
-                                               <h5 class="mb-3">{{ _("Open Source") }}</h5>
+                                                       <div class="flex-column">
+                                                               <h5 class="mb-3">{{ _("Open Source") }}</h5>
 
-                                               <p>
-                                                       {{ _("libloc is free software and relies on support from the community.") }}
-                                                       {{ _("You can support us by helping to improve our database or with your donation.") }}
-                                               </p>
+                                                               <p>
+                                                                       {{ _("libloc is free software and relies on support from the community.") }}
+                                                                       {{ _("You can support us by helping to improve our database or with your donation.") }}
+                                                               </p>
+                                                       </div>
+                                               </div>
                                        </div>
                                </div>
                        </div>
+               </div>
+       </section>
 
-                       <div class="row">
-                               <div class="col-12">
-                                       <h3 class="mb-3">{{ _("Who Is Using IPFire Location?") }}</h3>
+       <div class="container">
+               <section>
+                       <h3 class="mb-5">{{ _("Who Is Using IPFire Location?") }}</h3>
 
-                                       <div class="row row-cols-2 row-cols-lg-4 justify-content-around align-items-center">
-                                               <div class="col text-center">
-                                                       <img src="{{ static_url("img/ipfire-tux.png") }}"
-                                                               class="img-fluid mb-3" alt="{{ _("IPFire Logo") }}">
+                       <div class="row row-cols-2 row-cols-lg-4 justify-content-around align-items-center">
+                               <div class="col text-center">
+                                       <img src="{{ static_url("img/ipfire-tux.png") }}"
+                                               class="img-fluid mb-3" alt="{{ _("IPFire Logo") }}">
 
-                                                       <h6>
-                                                               <a href="https://www.ipfire.org/" rel="noopener">IPFire</a>
-                                                       </h6>
-                                               </div>
+                                       <h6>
+                                               <a href="https://www.ipfire.org/" rel="noopener">IPFire</a>
+                                       </h6>
+                               </div>
 
-                                               <div class="col text-center">
-                                                       <img src="{{ static_url("img/tor.svg") }}"
-                                                               class="img-fluid mb-3" alt="{{ _("Tor Project Logo") }}">
+                               <div class="col text-center">
+                                       <img src="{{ static_url("img/tor.svg") }}"
+                                               class="img-fluid mb-3" alt="{{ _("Tor Project Logo") }}">
 
-                                                       <h6>
-                                                               The <a href="https://www.torproject.org/" rel="noopener">Tor Project</a>
-                                                       </h6>
-                                               </div>
-                                       </div>
+                                       <h6>
+                                               The <a href="https://www.torproject.org/" rel="noopener">Tor Project</a>
+                                       </h6>
                                </div>
                        </div>
-               </div>
-       </section>
+               </section>
+       </div>
 {% end block %}