src/templates/index.html

   1 {% extends "base.html" %}
   2
   3 {% block head %}
   4         <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
   5 {% end block %}
   6
   7 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
   8
   9 {% block container %}
  10         <div class="main">
  11                 <section class="intro">
  12                         <div class="container">
  13                                 <div class="branding">
  14                                         <h1 class="display-1">IP<strong>Fire</strong></h1>
  15                                         <h5>The Open Source Firewall Distribution</h5>
  16                                 </div>
  17
  18                                 <div class="row justify-content-center">
  19                                         <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
  20                                         <a class="btn btn-outline-dark btn-lg ml-3" href="/features">{{ _("Features") }}</a>
  21                                 </div>
  22                         </div>
  23
  24                         <div class="page-scroll">
  25                                 <a href="#features" class="btn btn-outline-primary rounded-circle scroll">
  26                                         <svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
  27                                 </a>
  28                         </div>
  29                 </section>
  30
  31                 <section id="features">
  32                         <div class="container">
  33                                 <h1 class="text-center">{{ _("Secure up your network with IPFire") }}</h1>
  34
  35                                 <div class="row mb-lg-6 mb-md-5">
  36                                         <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
  37                                                 <div class="feature_icons align-self-stretch">
  38                                                         <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
  39                                                 </div>
  40                                                 <div class="flex-column">
  41                                                         <h5 class="pb-3">{{ _("Firewall") }}</h5>
  42                                                         <p>
  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                                                         </p>
  47                                                 </div>
  48                                         </div>
  49
  50                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  51                                                 <div class="feature_icons align-self-stretch">
  52                                                         <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
  53                                                 </div>
  54                                                 <div class="flex-column">
  55                                                         <h5 class="pb-3">{{ _("Performance") }}</h5>
  56                                                         <p>
  57                                                                 IPFire is ready for high performance networks
  58                                                                 and running evenly well on embedded hardware.
  59                                                         </p>
  60                                                 </div>
  61                                         </div>
  62
  63                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  64                                                 <div class="feature_icons align-self-stretch">
  65                                                         <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
  66                                                 </div>
  67                                                 <div class="flex-column">
  68                                                         <h5 class="pb-3">{{ _("Easy to use") }}</h5>
  69                                                         <p class="mb-1">
  70                                                                 IPFire is set up easily in 15 to 20 minutes
  71                                                                 but also comes with expert features that
  72                                                                 are needed in professional networks.
  73                                                         </p>
  74                                                 </div>
  75                                         </div>
  76
  77                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  78                                                 <div class="feature_icons align-self-stretch">
  79                                                         <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
  80                                                 </div>
  81                                                 <div class="flex-column">
  82                                                         <h5 class="pb-3">{{ _("Network Security") }}</h5>
  83                                                         <p>
  84                                                                 IPFire is designed for high security.
  85                                                                 It is hardened to protect itself from attacks
  86                                                                 from the network.
  87                                                         </p>
  88                                                 </div>
  89                                         </div>
  90
  91                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  92                                                 <div class="feature_icons align-self-stretch">
  93                                                         <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
  94                                                 </div>
  95                                                 <div class="flex-column">
  96                                                         <h5 class="pb-3">{{ _("Open Source") }}</h5>
  97                                                         <p>
  98                                                                 IPFire is free software and developed by an open community,
  99                                                                 that improves it every single day.
 100                                                         </p>
 101                                                 </div>
 102                                         </div>
 103
 104                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
 105                                                 <div class="feature_icons align-self-stretch">
 106                                                         <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
 107                                                 </div>
 108                                                 <div class="flex-column">
 109                                                         <h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
 110                                                         <p>
 111                                                                 IPFire is developed in Europe and used all over the world
 112                                                                 <a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
 113                                                                 by hundreds of thousands of users every day.
 114                                                         </p>
 115                                                 </div>
 116                                         </div>
 117                                 </div>
 118
 119                                 <div class="btn-toolbar justify-content-center pt-0 pt-md-4">
 120                                         <a class="btn btn-primary btn-lg mr-4 px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
 121                                         <a class="btn btn-secondary btn-lg px-4 px-md-6" href="/features">{{ _("Learn more") }}</a>
 122                                 </div>
 123                         </div>
 124                 </section>
 125
 126                 <section id="news">
 127                         <div class="container">
 128                                 <div class="row">
 129                                         <div class="col-12 col-md-6 col-lg-5 mb-5">
 130                                                 <h1>Latest Release</h1>
 131
 132                                                 <p class="mb-0">
 133                                                         <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
 134                                                 </p>
 135
 136                                                 <h3 class="mb-5">
 137                                                         {% if latest_release.post %}
 138                                                                 <a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
 139                                                                         {{ _("%s has been released!") % latest_release.name }}
 140                                                                 </a>
 141                                                         {% else %}
 142                                                                 {{ _("%s has been released!") % latest_release.name }}
 143                                                         {% end %}
 144                                                 </h3>
 145
 146                                                 <div class="btn-toolbar mb-5">
 147                                                         <a class="btn btn-primary mr-3" href="/download">
 148                                                                 <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
 149                                                                 {{ _("Download") }}
 150                                                         </a>
 151
 152                                                         <a class="btn btn-secondary ml-3" href="/donate">
 153                                                                 <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
 154                                                                 {{ _("Donate") }}
 155                                                         </a>
 156                                                 </div>
 157                                         </div>
 158
 159                                         <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
 160                                                 <h1>What&rsquo;s going on?</h1>
 161
 162                                                 <dl class="dl-horizontal">
 163                                                         {% for post in posts %}
 164                                                                 <dt>
 165                                                                         <small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
 166                                                                 </dt>
 167
 168                                                                 <dd class="text-overflow mb-4">
 169                                                                         <a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
 170                                                                 </dd>
 171                                                         {% end %}
 172                                                 </dl>
 173
 174                                                 <a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
 175                                         </div>
 176                                 </div>
 177                         </div>
 178                 </section>
 179
 180                 <section id="fireinfo">
 181                         <div class="container">
 182                                 <h1 class="text-center">Fire<strong>Info</strong> Statistics</h1>
 183
 184                                 <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6 justify-content-center">
 185                                         <div class="col-6 col-md-3 mb-6 text-center">
 186                                                 <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
 187                                                 <h6 class="pb-5 fireinfo">{{ latest_release.name }}</h6>
 188                                                 <div class="r_circle circle mt-5">
 189                                                         <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
 190                                                 </div>
 191                                                 <script>
 192                                                         $('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
 193                                                 </script>
 194                                         </div>
 195
 196                                         {% if fireinfo_country %}
 197                                                 <div class="col-6 col-md-3 text-center">
 198                                                         <p class="mb-0 mb-sm-3 fireinfo_cat truncate">
 199                                                                 {{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}
 200                                                         </p>
 201                                                         <h6 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h6>
 202                                                         <div class="v_circle circle mt-5">
 203                                                                 <p class="fireinfo_per">{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}</p>
 204                                                         </div>
 205                                                         <script>
 206                                                                 $('.v_circle').circleProgress({ value: {{ fireinfo_country.percentage }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
 207                                                         </script>
 208                                                 </div>
 209                                         {% end %}
 210                                 </div>
 211
 212                                 <div class="row justify-content-center">
 213                                         <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
 214                                 </div>
 215                         </div>
 216                 </section>
 217
 218                 <section id="appliances">
 219                         <div class="container">
 220                                 <h1 class="text-center">{{ _("Professional Appliances & Services") }}</h1>
 221
 222                                 <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
 223                                         <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
 224                                                 <p class="lead">
 225                                                         <a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
 226                                                         IPFire hardware appliances for enterprises, large businesses and SOHO.
 227                                                         Deploying one of these on your network will provide you with the
 228                                                         greatest reliability, stability and performance.
 229                                                 </p>
 230                                         </div>
 231                                         <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
 232                                                 <a class="btn btn-dark btn-lg btn-block px-md-0 mb-4" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
 233                                                 <a class="btn btn-dark btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
 234                                         </div>
 235                                 </div>
 236                                 <div class="text-center">
 237                                         <picture>
 238                                                 <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
 239                                                 <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
 240                                                 <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
 241                                                 <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
 242                                                 <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
 243                                         </picture>
 244                                 </div>
 245                         </div>
 246                 </section>
 247         </div>
 248 <script>
 249 $(document).ready(function () {
 250         $('.scroll').on('click', function(event) {
 251                         event.preventDefault();
 252                         $('html, body').stop().animate({
 253                                 scrollTop: $('#features').offset().top -72
 254                         }, 1000);
 255         });
 256 });
 257 </script>
 258 {% end block %}