{% block container %}
<section class="intro">
- <div class="intro-body text-center">
- <div class="container">
- <div class="row">
- <div class="col-md-6">
- <h1>IPFire</h1>
-
- <p class="lead">The Open Source Firewall Distribution</p>
-
- <div class="page-scroll">
- <a href="#about" class="btn btn-circle">
- <i class="fa fa-angle-double-down animated"></i>
- </a>
- </div>
- </div>
-
- <div class="col-md-6">
- <img class="img-responsive" src="{{ static_url("images/tux/ipfire_tux_512x512.png") }}" alt="IPFire Logo">
- </div>
- </div>
+ <div class="container">
+ <div class="branding">
+ <h1 class="display-1">IP<strong>Fire</strong></h1>
+ <h2 class="display-4">The Open Source Firewall Distribution</h2>
</div>
- </div>
- </section>
-
- <section id="about" class="dark-background text-center">
- <div class="about-section">
- <div class="container">
- <p class="lead">
- {% if lang == "de" %}
- Willkommen! <strong>IPFire</strong> ist eine professionelle
- und gehärtete Firewalldistribution, die sicher und einfach zu
- benutzen ist. Mit vielen Funktionen ausgestattet, ist IPFire
- ideal für den Einsatz in Unternehmen, Behörden, und überall sonst.
- {% else %}
- Welcome to <strong>IPFire</strong>, the professional and hardened
- Linux firewall distribution that is secure, easy to operate
- and coming with great functionality so that it is ready
- for enterprises, authorities, and anybody else.
- {% end %}
- </p>
-
- <a class="btn btn-default btn-lg" href="/about">{{ _("Learn More") }}</a>
+
+ <div class="row justify-content-center">
+ <a class="btn btn-outline-primary btn-lg" href="/download">{{ _("Download") }}</a>
+ <a class="btn btn-outline-secondary btn-lg" href="/features">{{ _("Features") }}</a>
</div>
</div>
+
+ <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>
</section>
- <section id="features" class="container content-section">
- <h2 class="text-center">{{ _("Secure up your network with IPFire") }}</h2>
-
- <br>
-
- <div class="row">
- <div class="col-md-6">
- <dl class="dl-horizontal">
- <dt>
- <h1>
- <span class="fa fa-check text-success"></span>
- </h1>
- </dt>
- <dd>
- <h4>{{ _("Firewall") }}</h4>
-
+ <section id="features" class="content-section">
+ <div class="container">
+ <h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
+
+ <div class="row mb-lg-6 mb-md-5">
+ <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
+ <div class="feature_icons align-self-stretch">
+ <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
+ </div>
+ <div class="flex-column">
+ <h4 class="pb-3">{{ _("Firewall") }}</h4>
<p>
{% if lang == "de" %}
Die vielseitige und State-of-the-Art Firewall-Engine
setups easy to administer.
{% end %}
</p>
- </dd>
-
- <dt>
- <h1>
- <span class="fa fa-check text-success"></span>
- </h1>
- </dt>
- <dd>
- <h4>{{ _("Network Security") }}</h4>
+ </div>
+ </div>
+
+ <div class="col-md-6 col-lg-4 mb-6 d-flex">
+ <div class="feature_icons align-self-stretch">
+ <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
+ </div>
+ <div class="flex-column">
+ <h4 class="pb-3">{{ _("Performance") }}</h4>
+ <p>
+ {% if lang == "de" %}
+ Auch schnelle Netze und der Einsatz
+ auf eingebetteten Systemen sind kein Problem
+ für IPFire.
+ {% else %}
+ IPFire is ready for high performance networks
+ and running evenly well on embedded hardware.
+ {% end %}
+ </p>
+ </div>
+ </div>
+
+ <div class="col-md-6 col-lg-4 mb-6 d-flex">
+ <div class="feature_icons align-self-stretch">
+ <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
+ </div>
+ <div class="flex-column">
+ <h4 class="pb-3">{{ _("Easy to use") }}</h4>
+ <p class="mb-1">
+ {% if lang == "de" %}
+ IPFire ist in 15 bis 20 Minuten installiert
+ und kommt mit vielen wichtigen Funktionen für
+ professionelle Netzwerke.
+ {% else %}
+ IPFire is set up easily in 15 to 20 minutes
+ but also comes with expert features that
+ are needed in professional networks.
+ {% end %}
+ </p>
+ </div>
+ </div>
+ <div class="col-md-6 col-lg-4 mb-6 d-flex">
+ <div class="feature_icons align-self-stretch">
+ <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
+ </div>
+ <div class="flex-column">
+ <h4 class="pb-3">{{ _("Network Security") }}</h4>
<p>
{% if lang == "de" %}
Sicherheit hat höchste Priorität.
from the network.
{% end %}
</p>
- </dd>
-
- <dt>
- <h1>
- <span class="fa fa-check text-success"></span>
- </h1>
- </dt>
- <dd>
- <h4>{{ _("Performance") }}</h4>
-
+ </div>
+ </div>
+
+ <div class="col-md-6 col-lg-4 mb-6 d-flex">
+ <div class="feature_icons align-self-stretch">
+ <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
+ </div>
+ <div class="flex-column">
+ <h4 class="pb-3">{{ _("Open Source") }}</h4>
<p>
{% if lang == "de" %}
- Auch schnelle Netze und der Einsatz
- auf eingebetteten Systemen sind kein Problem
- für IPFire.
- {% else %}
- IPFire is ready for high performance networks
- and running evenly well on embedded hardware.
- {% end %}
- </p>
- </dd>
- </dl>
- </div>
-
- <div class="col-md-6">
- <dl class="dl-horizontal">
- <dt>
- <h1>
- <span class="fa fa-check text-success"></span>
- </h1>
- </dt>
- <dd>
- <h4>{{ _("Open Source") }}</h4>
-
- {% if lang == "de" %}
- <p>
IPFire ist freie Software, welche von einer offenen
Community tagtäglich verbessert wird.
- </p>
- {% else %}
- <p>
+ {% else %}
IPFire is free software and developed by an open community,
that improves it every single day.
- </p>
- {% end %}
- </dd>
-
- <dt>
- <h1>
- <span class="fa fa-check text-success"></span>
- </h1>
- </dt>
- <dd>
- <h4>{{ _("Easy to use") }}</h4>
-
- {% if lang == "de" %}
- <p>
- IPFire ist in 15 bis 20 Minuten installiert
- und kommt mit vielen wichtigen Funktionen für
- professionelle Netzwerke.
- </p>
- {% else %}
- <p>
- IPFire is set up easily in 15 to 20 minutes
- but also comes with expert features that
- are needed in professional networks.
- </p>
- {% end %}
- </dd>
-
- <dt>
- <h1>
- <span class="fa fa-check text-success"></span>
- </h1>
- </dt>
- <dd>
- <h4>{{ _("Trusted by thousands") }}</h4>
-
+ {% end %}
+ </p>
+ </div>
+ </div>
+
+ <div class="col-md-6 col-lg-4 mb-6 d-flex">
+ <div class="feature_icons align-self-stretch">
+ <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
+ </div>
+ <div class="flex-column">
+ <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
<p>
{% if lang == "de" %}
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>
by hundreds of thousands of users every day.
{% end %}
</p>
- </dd>
- </dl>
+ </div>
+ </div>
+ </div>
+
+ <div class="row justify-content-center pt-0 pt-md-4">
+ <a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
+ <a class="btn btn-white btn-lg px-4 px-md-6" href="/learn-more">{{ _("Learn more") }}</a>
</div>
</div>
-
- <p class="text-center">
- <a class="btn btn-success btn-lg" href="/get-started">{{ _("Get Started") }}</a>
- </p>
</section>
- <section id="news" class="content-section lighter-background">
+ <section id="news" class="content-section">
<div class="container">
<div class="row">
- <div class="col-md-5 text-center">
- <h3 class="text-primary">
- <a href="/news/{{ latest_release.news.slug }}">
+ <div class="col-12 col-md-6 col-lg-5 mb-6">
+ <h2 class="display-2 mb-6">Latest Release</h2>
+ <p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
+ <h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
{{ _("%s has been released!") % latest_release.name }}
</a>
- <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
</h3>
-
- <br class="separator-small">
-
- <div class="btn-toolbar">
- <a class="btn btn-primary" href="/download">{{ _("Download it now!") }}</a>
- <a class="btn btn-primary" href="/donate">{{ _("Donate") }}</a>
+ <div class="btn-toolbar mb-6">
+ <a class="btn btn-primary btn-md mr-3" href="/download">
+ <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
+ {{ _("Download") }}
+ </a>
+ <a class="btn btn-white btn-md ml-3" href="/donate">
+ <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
+ {{ _("Donate") }}
+ </a>
</div>
+
+ <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
</div>
-
- <div class="col-md-7">
- <h4 class="text-center">
- <a href="/news">{{ _("What's new?") }}</a>
- </h4>
-
+
+ <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
+ <h2 class="display-2 mb-6">What’s going on?</h2>
<dl class="dl-horizontal">
{% for type, item in latest_news %}
<dt>
- {{ locale.format_date(item.published, relative=True, shorter=True) }}
+ <small>{{ locale.format_date(item.published, relative=True, shorter=True) }} </small>
</dt>
- <dd class="text-overflow">
+ <dd class="text-overflow mb-4 pb-4">
{% if type == "news" %}
<a href="/news/{{ item.slug }}">
<strong>{{ item.title }}</strong>
</dd>
{% end %}
</dl>
+
+ <a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
+
</div>
</div>
-
- {% if hottest_wish %}
- <br><br>
-
- {% if hottest_wish.is_new() %}
- <span class="label label-success pull-right">{{ _("NEW") }}</span>
- {% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
- <span class="pull-right">
- {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
- </span>
- {% else %}
- <span class="pull-right">
- {{ _("%d%% funded") % hottest_wish.percentage }}
- </span>
+ </div>
+ </section>
+
+ <section id="wishlist" class="content-section">
+ <div class="container">
+ <h2 class="display-2 text-center text-white">IP<strong>Fire</strong>’s Wishlist</h2>
+
+ {% if hottest_wish %}
+ <div class="d-flex flex-row justify-content-between align-items-baseline">
+ <h5 class="text-white">{{ hottest_wish.title }}</h5>
+
+ {% if hottest_wish.is_new() %}
+ <span class="label label-success pull-right">{{ _("NEW") }}</span>
+ {% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
+ <span>
+ {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
+ </span>
+ {% else %}
+ <span class="h5 amber-800 hidden-xs-down">
+ {{ _("%d%% funded") % hottest_wish.percentage }}
+ </span>
+ {% end %}
+ </div>
+
+ <div class="progress progress-small mb-5">
+ <div class="progress-bar bg-progress" role="progressbar" aria-valuenow="{{ hottest_wish.percentage_bar }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ hottest_wish.percentage_bar }}%; height: .5rem;">
+ <span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
+ </div>
+ </div>
+
+ <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 %}
-
- <a href="http://wishlist.ipfire.org">
- <strong>{{ _("IPFire Wishlist") }}</strong>
- </a>
-
- <a href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">
- {{ hottest_wish.title }}
- </a>
-
- <div class="progress progress-small">
- <div class="progress-bar" role="progressbar"
- aria-valuenow="{{ hottest_wish.percentage_bar }}"
- aria-valuemin="0" aria-valuemax="100" style="width: {{ hottest_wish.percentage_bar }}%;">
- <span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
+ </div>
+ </section>
+
+ <section id="fireinfo" class="content-section">
+ <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="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">2.19 Core 109</h5>
+ <div class="r_circle circle mt-5">
+ <p class="fireinfo_per">48%</p>
+ </div>
+ <script>
+ $('.r_circle').circleProgress({ value: 0.48, 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>
- {% end %}
+ </div>
+
+ <div class="row justify-content-center">
+ <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
+ </div>
</div>
</section>
- <section id="appliances" class="container content-section text-center">
- <h2>{{ _("Professional Appliances & Services") }}</h2>
-
- <p class="lead">
- {% if lang == "de" %}
- <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> bietet
- Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
- Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
- und Performance.
- {% else %}
- <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> offer
- IPFire hardware appliances for enterprises, large businesses and SOHO.
- Deploying one of these on your network will provide you with the
- greatest reliability, stability and performance.
- {% end %}
- </p>
-
- <div class="btn-toolbar">
- <a class="btn btn-default btn-lg" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
- <a class="btn btn-default btn-lg" href="/hardware">{{ _("Hardware Appliances") }}</a>
+ <section id="appliances" class="content-section">
+ <div class="container">
+ <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
+
+ <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
+ Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
+ Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
+ und Performance.
+ {% else %}
+ <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
+ IPFire hardware appliances for enterprises, large businesses and SOHO.
+ Deploying one of these on your network will provide you with the
+ greatest reliability, stability and performance.
+ {% end %}
+ </p>
+ </div>
+ <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 class="text-center">
+ <picture>
+ <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
+ <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
+ <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
+ <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
+ <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
+ </picture>
+ </div>
</div>
-
- <img class="img-responsive" src="{{ static_url("images/LWL/appliance-pro.jpg") }}">
</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 %}
projects / people / shoehn / ipfire.org.git / blobdiff