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