embed SVG Icons in the footer.

[ipfire.org.git] / templates / index.html

{% extends "base-1.html" %}

{% block title %}{{ _("Welcome to IPFire") }}{% end block %}

{% block container %}
	<section class="intro">
		<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 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="/featues">{{ _("Features") }}</a>
			</div>
		</div>
		
		<div id="scrollto" class="page-scroll">
			<a href="#features" class="btn btn-outline-primary rounded-circle">
				<svg class="icon i_arrow_down"><use xlink:href="#arrow_down"/></svg>
			</a>
		</div>
	</section>

	<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">
					<div class="feature_icons">
						<svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
					</div>
					<h4 class="pb-3">{{ _("Firewall") }}</h4>
					<p>
						{% if lang == "de" %}
							Die vielseitige und State-of-the-Art Firewall-Engine
							in IPFire ist auch in komplexen Netzen übersichtlich
							und leicht zu nutzen.
						{% else %}
							IPFire comes with a versatile and state of the art
							firewall engine that makes even the most complex
							setups easy to administer.
						{% end %}
					</p>
				</div>
				
				<div class="col-md-6 col-lg-4 mb-6">
					<div class="feature_icons">
						<svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
					</div>
					<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 class="col-md-6 col-lg-4 mb-6">
					<div class="feature_icons">
						<svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
					</div>
					<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 class="col-md-6 col-lg-4 mb-6">
					<div class="feature_icons">
						<svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
					</div>
					<h4 class="pb-3">{{ _("Network Security") }}</h4>
					<p>
						{% if lang == "de" %}
							Sicherheit hat höchste Priorität.
							Das gehärtete System schützt sich selbst vor
							Angriffen aus dem Netz.
						{% else %}
							IPFire is designed for high security.
							It is hardened to protect itself from attacks
							from the network.
						{% end %}
					</p>
				</div>
				
				<div class="col-md-6 col-lg-4 mb-6">
					<div class="feature_icons">
						<svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
					</div>
					<h4 class="pb-3">{{ _("Open Source") }}</h4>
					<p>
						{% if lang == "de" %}
							IPFire ist freie Software, welche von einer offenen
							Community tagtäglich verbessert wird.
						{% else %}
							IPFire is free software and developed by an open community,
							that improves it every single day.
						{% end %}
					</p>
				</div>
				
				<div class="col-md-6 col-lg-4 mb-6">
					<div class="feature_icons">
						<svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
					</div>
					<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.
						{% 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>
				</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>
	</section>

	<section id="news" class="content-section">
		<div class="container">
			<div class="row">
				<div class="col 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>
					</h3>
					<div class="btn-toolbar mb-6">
						<a class="btn btn-primary mr-3" href="/download">
							<svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
							{{ _("Download") }}
						</a>
						<a class="btn btn-white 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 col-md-6 col-lg-5 offset-lg-2">
					<h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
					<dl class="dl-horizontal">
						{% for type, item in latest_news %}
							<dt>
								<small>{{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;</small>
							</dt>
							<dd class="text-overflow mb-4 pb-4">
								{% if type == "news" %}
									<a href="/news/{{ item.slug }}">
										<strong>{{ item.title }}</strong>
									</a>
								{% elif type == "planet" %}
									<a href="http://planet.ipfire.org/post/{{ item.slug }}">
										{{ item.title }}
									</a>
								{% end %}
							</dd>
						{% end %}
					</dl>
					
					<a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
					
				</div>
			</div>
		</div>
	</section>
	
	<section id="wishlist" class="content-section">
		<div class="container">
			
			<h2 class="display-2 text-center text-white">IP<strong>Fire</strong>&rsquo;s Wishlist</h2>
			
				{% if hottest_wish %}
	
					{% 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>
					{% end %}
					
					<h3 class="text-white pb-5">{{ hottest_wish.title }}</h3>
	
					<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"><a style="color: white; text-decoration: underline;" href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">Read more</a> about that wish.</p>
					
				{% end %}
			
		</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-3"><small>Latest Release</small></p>
					<h4 class="pb-5">2.19 Core 109</h4>
					<div class="r_circle circle mt-5">
						<p class="lead">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-3"><small>Favorite Kernel</small></p>
					<h4 class="pb-5 truncate">3.14.79-ipfire-pae</h4>
					<div class="f_circle circle mt-5">
						<p class="lead">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-3"><small>Favorite CPU</small></p>
					<h4 class="pb-5">Intel</h4>
					<div class="c_circle circle mt-5">
						<p class="lead">71%</p>
					</div>
					<script>
						$('.c_circle').circleProgress({ value: 0.71, 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-3 truncate"><small>Favorite Virtualisation</small></p>
					<h4 class="pb-5">VMWare</h4>
					<div class="v_circle circle mt-5">
						<p class="lead">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>
			</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="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">
				<div class="col-md-12 col-lg-7 mb-5 mb-md-6">
					<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-md-6 offset-md-3 col-lg-4 offset-lg-1">
					<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>
	</section>
{% end block %}