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