templates/index.html

   1 {% extends "base-1.html" %}
   2
   3 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
   4
   5 {% block container %}
   6         <section class="intro">
   7                 <div class="container">
   8                         <div class="branding">
   9                                 <h1 class="display-1">IP<strong>Fire</strong></h1>
  10                                 <h2 class="display-4">The Open Source Firewall Distribution</h2>
  11                         </div>
  12
  13                         <div class="row justify-content-center">
  14                                 <a class="btn btn-outline-primary btn-lg" href="/download">{{ _("Download") }}</a>
  15                                 <a class="btn btn-outline-secondary btn-lg" href="/features">{{ _("Features") }}</a>
  16                         </div>
  17                 </div>
  18
  19                 <div class="page-scroll">
  20                         <a href="#features" class="btn btn-outline-primary rounded-circle scroll">
  21                                 <svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
  22                         </a>
  23                 </div>
  24         </section>
  25
  26         <section id="features" class="content-section">
  27                 <div class="container">
  28                         <h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
  29
  30                         <div class="row mb-lg-6 mb-md-5">
  31                                 <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
  32                                         <div class="feature_icons align-self-stretch">
  33                                                 <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
  34                                         </div>
  35                                         <div class="flex-column">
  36                                                 <h4 class="pb-3">{{ _("Firewall") }}</h4>
  37                                                 <p>
  38                                                         {% if lang == "de" %}
  39                                                                 Die vielseitige und State-of-the-Art Firewall-Engine
  40                                                                 in IPFire ist auch in komplexen Netzen übersichtlich
  41                                                                 und leicht zu nutzen.
  42                                                         {% else %}
  43                                                                 IPFire comes with a versatile and state of the art
  44                                                                 firewall engine that makes even the most complex
  45                                                                 setups easy to administer.
  46                                                         {% end %}
  47                                                 </p>
  48                                         </div>
  49                                 </div>
  50
  51                                 <div class="col-md-6 col-lg-4 mb-6 d-flex">
  52                                         <div class="feature_icons align-self-stretch">
  53                                                 <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
  54                                         </div>
  55                                         <div class="flex-column">
  56                                                 <h4 class="pb-3">{{ _("Performance") }}</h4>
  57                                                 <p>
  58                                                         {% if lang == "de" %}
  59                                                                 Auch schnelle Netze und der Einsatz
  60                                                                 auf eingebetteten Systemen sind kein Problem
  61                                                                 für IPFire.
  62                                                         {% else %}
  63                                                                 IPFire is ready for high performance networks
  64                                                                 and running evenly well on embedded hardware.
  65                                                         {% end %}
  66                                                 </p>
  67                                         </div>
  68                                 </div>
  69
  70                                 <div class="col-md-6 col-lg-4 mb-6 d-flex">
  71                                         <div class="feature_icons align-self-stretch">
  72                                                 <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
  73                                         </div>
  74                                         <div class="flex-column">
  75                                                 <h4 class="pb-3">{{ _("Easy to use") }}</h4>
  76                                                 <p class="mb-1">
  77                                                         {% if lang == "de" %}
  78                                                                 IPFire ist in 15 bis 20 Minuten installiert
  79                                                                 und kommt mit vielen wichtigen Funktionen für
  80                                                                 professionelle Netzwerke.
  81                                                         {% else %}
  82                                                                 IPFire is set up easily in 15 to 20 minutes
  83                                                                 but also comes with expert features that
  84                                                                 are needed in professional networks.
  85                                                         {% end %}
  86                                                 </p>
  87                                         </div>
  88                                 </div>
  89
  90                                 <div class="col-md-6 col-lg-4 mb-6 d-flex">
  91                                         <div class="feature_icons align-self-stretch">
  92                                                 <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
  93                                         </div>
  94                                         <div class="flex-column">
  95                                                 <h4 class="pb-3">{{ _("Network Security") }}</h4>
  96                                                 <p>
  97                                                         {% if lang == "de" %}
  98                                                                 Sicherheit hat höchste Priorität.
  99                                                                 Das gehärtete System schützt sich selbst vor
 100                                                                 Angriffen aus dem Netz.
 101                                                         {% else %}
 102                                                                 IPFire is designed for high security.
 103                                                                 It is hardened to protect itself from attacks
 104                                                                 from the network.
 105                                                         {% end %}
 106                                                 </p>
 107                                         </div>
 108                                 </div>
 109
 110                                 <div class="col-md-6 col-lg-4 mb-6 d-flex">
 111                                         <div class="feature_icons align-self-stretch">
 112                                                 <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
 113                                         </div>
 114                                         <div class="flex-column">
 115                                                 <h4 class="pb-3">{{ _("Open Source") }}</h4>
 116                                                 <p>
 117                                                         {% if lang == "de" %}
 118                                                                 IPFire ist freie Software, welche von einer offenen
 119                                                                 Community tagtäglich verbessert wird.
 120                                                         {% else %}
 121                                                                 IPFire is free software and developed by an open community,
 122                                                                 that improves it every single day.
 123                                                         {% end %}
 124                                                 </p>
 125                                         </div>
 126                                 </div>
 127
 128                                 <div class="col-md-6 col-lg-4 mb-6 d-flex">
 129                                         <div class="feature_icons align-self-stretch">
 130                                                 <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
 131                                         </div>
 132                                         <div class="flex-column">
 133                                                 <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
 134                                                 <p>
 135                                                         {% if lang == "de" %}
 136                                                                 IPFire wird in Europa entwickelt,
 137                                                                 <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
 138                                                                 überall auf der Welt eingesetzt, und bietet
 139                                                                 Internetzugang für hunderttausende Nutzer jeden Tag.
 140                                                         {% else %}
 141                                                                 IPFire is developed in Europe and used all over the world
 142                                                                 <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
 143                                                                 by hundreds of thousands of users every day.
 144                                                         {% end %}
 145                                                 </p>
 146                                         </div>
 147                                 </div>
 148                         </div>
 149
 150                         <div class="row justify-content-center pt-0 pt-md-4">
 151                                 <a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
 152                                 <a class="btn btn-white btn-lg px-4 px-md-6" href="/learn-more">{{ _("Learn more") }}</a>
 153                         </div>
 154                 </div>
 155         </section>
 156
 157         <section id="news" class="content-section">
 158                 <div class="container">
 159                         <div class="row">
 160                                 <div class="col-12 col-md-6 col-lg-5 mb-6">
 161                                         <h2 class="display-2 mb-6">Latest Release</h2>
 162                                         <p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
 163                                         <h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
 164                                                         {{ _("%s has been released!") % latest_release.name }}
 165                                                 </a>
 166                                         </h3>
 167                                         <div class="btn-toolbar mb-6">
 168                                                 <a class="btn btn-primary btn-md mr-3" href="/download">
 169                                                         <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
 170                                                         {{ _("Download") }}
 171                                                 </a>
 172                                                 <a class="btn btn-white btn-md ml-3" href="/donate">
 173                                                         <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
 174                                                         {{ _("Donate") }}
 175                                                 </a>
 176                                         </div>
 177
 178                                         <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
 179                                 </div>
 180
 181                                 <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
 182                                         <h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
 183                                         <dl class="dl-horizontal">
 184                                                 {% for type, item in latest_news %}
 185                                                         <dt>
 186                                                                 <small>{{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;</small>
 187                                                         </dt>
 188                                                         <dd class="text-overflow mb-4 pb-4">
 189                                                                 {% if type == "news" %}
 190                                                                         <a href="/news/{{ item.slug }}">
 191                                                                                 <strong>{{ item.title }}</strong>
 192                                                                         </a>
 193                                                                 {% elif type == "planet" %}
 194                                                                         <a href="http://planet.ipfire.org/post/{{ item.slug }}">
 195                                                                                 {{ item.title }}
 196                                                                         </a>
 197                                                                 {% end %}
 198                                                         </dd>
 199                                                 {% end %}
 200                                         </dl>
 201
 202                                         <a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
 203
 204                                 </div>
 205                         </div>
 206                 </div>
 207         </section>
 208
 209         <section id="wishlist" class="content-section">
 210                 <div class="container">
 211                         <h2 class="display-2 text-center text-white">IP<strong>Fire</strong>&rsquo;s Wishlist</h2>
 212
 213                                 {% if hottest_wish %}
 214                                         <div class="d-flex flex-row justify-content-between align-items-baseline">
 215                                                 <h5 class="text-white">{{ hottest_wish.title }}</h5>
 216
 217                                                 {% if hottest_wish.is_new() %}
 218                                                         <span class="label label-success pull-right">{{ _("NEW") }}</span>
 219                                                 {% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
 220                                                         <span>
 221                                                                 {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
 222                                                         </span>
 223                                                 {% else %}
 224                                                         <span class="h5 amber-800 hidden-xs-down">
 225                                                                 {{ _("%d%% funded") % hottest_wish.percentage }}
 226                                                         </span>
 227                                                 {% end %}
 228                                         </div>
 229
 230                                         <div class="progress progress-small mb-5">
 231                                                 <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;">
 232                                                         <span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
 233                                                 </div>
 234                                         </div>
 235
 236                                         <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>
 237                                 {% end %}
 238                 </div>
 239         </section>
 240
 241         <section id="fireinfo" class="content-section">
 242                 <div class="container">
 243                         <h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
 244
 245                         <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
 246                                 <div class="col-6 col-md-3 mb-6 text-center">
 247                                         <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
 248                                         <h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
 249                                         <div class="r_circle circle mt-5">
 250                                                 <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
 251                                         </div>
 252                                         <script>
 253                                                 $('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
 254                                         </script>
 255                                 </div>
 256
 257                                 <div class="col-6 col-md-3 mb-6 text-center">
 258                                         <p class="mb-0 mb-sm-3 fireinfo_cat">Favorite Kernel</p>
 259                                         <h5 class="pb-5 fireinfo truncate">3.14.79-ipfire-pae</h5>
 260                                         <div class="f_circle circle mt-5">
 261                                                 <p class="fireinfo_per">36%</p>
 262                                         </div>
 263                                         <script>
 264                                                 $('.f_circle').circleProgress({ value: 0.36, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#00bcd4"] } });
 265                                         </script>
 266                                 </div>
 267
 268                                 <div class="col-6 col-md-3 text-center">
 269                                         <p class="mb-0 mb-sm-3 fireinfo_cat">Favorite CPU</p>
 270                                         <h5 class="pb-5 fireinfo">Intel</h5>
 271                                         <div class="c_circle circle mt-5">
 272                                                 <p class="fireinfo_per">73%</p>
 273                                         </div>
 274                                         <script>
 275                                                 $('.c_circle').circleProgress({ value: 0.73, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#43a047"] } });
 276                                         </script>
 277                                 </div>
 278
 279                                 <div class="col-6 col-md-3 text-center">
 280                                         <p class="mb-0 mb-sm-3 fireinfo_cat truncate">Favorite Virtualisation</p>
 281                                         <h5 class="pb-5 fireinfo">VMWare</h5>
 282                                         <div class="v_circle circle mt-5">
 283                                                 <p class="fireinfo_per">46%</p>
 284                                         </div>
 285                                         <script>
 286                                                 $('.v_circle').circleProgress({ value: 0.46, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
 287                                         </script>
 288                                 </div>
 289                         </div>
 290
 291                         <div class="row justify-content-center">
 292                                 <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
 293                         </div>
 294                 </div>
 295         </section>
 296
 297         <section id="appliances" class="content-section">
 298                 <div class="container">
 299                         <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
 300
 301                         <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
 302                                 <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
 303                                         <p class="lead">
 304                                                 {% if lang == "de" %}
 305                                                         <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet
 306                                                         Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
 307                                                         Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
 308                                                         und Performance.
 309                                                 {% else %}
 310                                                         <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
 311                                                         IPFire hardware appliances for enterprises, large businesses and SOHO.
 312                                                         Deploying one of these on your network will provide you with the
 313                                                         greatest reliability, stability and performance.
 314                                                 {% end %}
 315                                         </p>
 316                                 </div>
 317                                 <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
 318                                         <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
 319                                         <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
 320                                 </div>
 321                         </div>
 322                         <div class="text-center">
 323                                 <picture>
 324                                         <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
 325                                         <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
 326                                         <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
 327                                         <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
 328                                         <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
 329                                 </picture>
 330                         </div>
 331                 </div>
 332         </section>
 333 <script>
 334 $(document).ready(function () {
 335         $('.scroll').on('click', function(event) {
 336                         event.preventDefault();
 337                         $('html, body').stop().animate({
 338                                 scrollTop: $('#features').offset().top -72
 339                         }, 1000);
 340         });
 341 });
 342 </script>
 343 {% end block %}