[people/shoehn/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="/features">{{ _("Features") }}</a>
			</div>
		</div>
		
		<div class="page-scroll">
			<a href="#features" class="btn btn-outline-primary rounded-circle scroll">
				<svg class="icon i_lg 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 d-flex">
					<div class="feature_icons align-self-stretch">
						<svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
					</div>
					<div class="flex-column">
						<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>
				
				<div class="col-md-6 col-lg-4 mb-6 d-flex">
					<div class="feature_icons align-self-stretch">
						<svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
					</div>
					<div class="flex-column">
						<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>
				
				<div class="col-md-6 col-lg-4 mb-6 d-flex">
					<div class="feature_icons align-self-stretch">
						<svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
					</div>
					<div class="flex-column">
						<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>

				<div class="col-md-6 col-lg-4 mb-6 d-flex">
					<div class="feature_icons align-self-stretch">
						<svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
					</div>
					<div class="flex-column">
						<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>
				
				<div class="col-md-6 col-lg-4 mb-6 d-flex">
					<div class="feature_icons align-self-stretch">
						<svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
					</div>
					<div class="flex-column">
						<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>
				
				<div class="col-md-6 col-lg-4 mb-6 d-flex">
					<div class="feature_icons align-self-stretch">
						<svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
					</div>
					<div class="flex-column">
						<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 hunderttausende 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>
			
			<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="/features">{{ _("Learn more") }}</a>
			</div>
		</div>
	</section>

	<section id="news" class="content-section">
		<div class="container">
			<div class="row">
				<div class="col-12 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 btn-md mr-3" href="/download">
							<svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
							{{ _("Download") }}
						</a>
						<a class="btn btn-white btn-md 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-12 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 %}
					<div class="d-flex flex-row justify-content-between align-items-baseline">
						<h5 class="text-white">{{ hottest_wish.title }}</h5>
		
						{% 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>
								{{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
							</span>
						{% else %}
							<span class="h5 amber-800 hidden-xs-down">
								{{ _("%d%% funded") % hottest_wish.percentage }}
							</span>
						{% end %}
					</div>
	
					<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 small"><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-0 mb-sm-3 fireinfo_cat">Latest Release</p>
					<h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
					<div class="r_circle circle mt-5">
						<p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
					</div>
					<script>
						$('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, 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-0 mb-sm-3 fireinfo_cat">Favorite Kernel</p>
					<h5 class="pb-5 fireinfo truncate">3.14.79-ipfire-pae</h5>
					<div class="f_circle circle mt-5">
						<p class="fireinfo_per">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-0 mb-sm-3 fireinfo_cat">Favorite CPU</p>
					<h5 class="pb-5 fireinfo">Intel</h5>
					<div class="c_circle circle mt-5">
						<p class="fireinfo_per">73%</p>
					</div>
					<script>
						$('.c_circle').circleProgress({ value: 0.73, 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-0 mb-sm-3 fireinfo_cat truncate">Favorite Virtualisation</p>
					<h5 class="pb-5 fireinfo">VMWare</h5>
					<div class="v_circle circle mt-5">
						<p class="fireinfo_per">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 pb-lg-4">
				<div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
					<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-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
					<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>
<script>
$(document).ready(function () {
	$('.scroll').on('click', function(event) {
			event.preventDefault();
			$('html, body').stop().animate({
				scrollTop: $('#features').offset().top -72
			}, 1000);
	});
});
</script>
{% end block %}
Commit	Line	Data
60024cc8	1	{% extends "base-1.html" %}
81675874	2
60b0917c MT	3	{% block title %}{{ _("Welcome to IPFire") }}{% end block %}
	4
	5	{% block container %}
	6	<section class="intro">
97ed546d S	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>
a6a4d1cf	15	<a class="btn btn-outline-secondary btn-lg" href="/features">{{ _("Features") }}</a>
9b5ac075	16	</div>
60024cc8	17	</div>
97ed546d	18
aa44ed56 S	19	<div class="page-scroll">
aa44ed56 S	20	<a href="#features" class="btn btn-outline-primary rounded-circle scroll">
efb8b657	21	<svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
97ed546d S	22	</a>
97ed546d S	23	</div>
60b0917c MT	24	</section>
60b0917c MT	25
1e5bc9c9 S	26	<section id="features" class="content-section">
1e5bc9c9 S	27	<div class="container">
b6d1f3b7	28	<h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
1e5bc9c9	29
69a9b33d	30	<div class="row mb-lg-6 mb-md-5">
6a63d20a S	31	<div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
6a63d20a S	32	<div class="feature_icons align-self-stretch">
6618b035	33	<svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
b6d1f3b7	34	</div>
6a63d20a S	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>
1e5bc9c9 S	49	</div>
1e5bc9c9 S	50
6a63d20a S	51	<div class="col-md-6 col-lg-4 mb-6 d-flex">
6a63d20a S	52	<div class="feature_icons align-self-stretch">
6618b035	53	<svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
b6d1f3b7	54	</div>
6a63d20a S	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>
1e5bc9c9 S	68	</div>
1e5bc9c9 S	69
6a63d20a S	70	<div class="col-md-6 col-lg-4 mb-6 d-flex">
6a63d20a S	71	<div class="feature_icons align-self-stretch">
6618b035	72	<svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
b6d1f3b7	73	</div>
6a63d20a S	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>
1e5bc9c9	88	</div>
69a9b33d	89
6a63d20a S	90	<div class="col-md-6 col-lg-4 mb-6 d-flex">
6a63d20a S	91	<div class="feature_icons align-self-stretch">
6618b035	92	<svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
b6d1f3b7	93	</div>
efb8b657	94	<div class="flex-column">
6a63d20a S	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>
1e5bc9c9 S	108	</div>
1e5bc9c9 S	109
6a63d20a S	110	<div class="col-md-6 col-lg-4 mb-6 d-flex">
6a63d20a S	111	<div class="feature_icons align-self-stretch">
6618b035	112	<svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
b6d1f3b7	113	</div>
6a63d20a S	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>
1e5bc9c9 S	126	</div>
1e5bc9c9 S	127
6a63d20a S	128	<div class="col-md-6 col-lg-4 mb-6 d-flex">
6a63d20a S	129	<div class="feature_icons align-self-stretch">
6618b035	130	<svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
b6d1f3b7	131	</div>
6a63d20a S	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
8842c9d0	139	Internetzugang für hunderttausende Nutzer jeden Tag.
6a63d20a S	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>
1e5bc9c9 S	147	</div>
	148	</div>
	149
22cfab2d	150	<div class="row justify-content-center pt-0 pt-md-4">
7751181d	151	<a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
3c77f292	152	<a class="btn btn-white btn-lg px-4 px-md-6" href="/features">{{ _("Learn more") }}</a>
60b0917c MT	153	</div>
60b0917c MT	154	</div>
60b0917c	155	</section>
05f8cfae	156
1e5bc9c9	157	<section id="news" class="content-section">
60b0917c MT	158	<div class="container">
60b0917c MT	159	<div class="row">
6a63d20a	160	<div class="col-12 col-md-6 col-lg-5 mb-6">
b6d1f3b7	161	<h2 class="display-2 mb-6">Latest Release</h2>
69a9b33d	162	<p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
b6d1f3b7	163	<h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
60b0917c MT	164	{{ _("%s has been released!") % latest_release.name }}
60b0917c MT	165	</a>
53664d15	166	</h3>
b6d1f3b7	167	<div class="btn-toolbar mb-6">
efb8b657	168	<a class="btn btn-primary btn-md mr-3" href="/download">
6618b035	169	<svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
22cfab2d S	170	{{ _("Download") }}
22cfab2d S	171	</a>
efb8b657	172	<a class="btn btn-white btn-md ml-3" href="/donate">
6618b035	173	<svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
22cfab2d S	174	{{ _("Donate") }}
22cfab2d S	175	</a>
60b0917c	176	</div>
1e5bc9c9	177
b6d1f3b7	178	<p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
60b0917c	179	</div>
1e5bc9c9	180
6a63d20a	181	<div class="col-12 col-md-6 col-lg-5 offset-lg-2">
b6d1f3b7	182	<h2 class="display-2 mb-6">What’s going on?</h2>
60b0917c MT	183	<dl class="dl-horizontal">
	184	{% for type, item in latest_news %}
	185	<dt>
b6d1f3b7	186	<small>{{ locale.format_date(item.published, relative=True, shorter=True) }}  </small>
60b0917c	187	</dt>
b6d1f3b7	188	<dd class="text-overflow mb-4 pb-4">
60b0917c MT	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>
9d7e697a	199	{% end %}
60b0917c	200	</dl>
b6d1f3b7	201
9ce2074c	202	<a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
b6d1f3b7	203
60b0917c MT	204	</div>
60b0917c MT	205	</div>
1e5bc9c9 S	206	</div>
	207	</section>
	208
	209	<section id="wishlist" class="content-section">
	210	<div class="container">
b6d1f3b7	211	<h2 class="display-2 text-center text-white">IP<strong>Fire</strong>’s Wishlist</h2>
1e5bc9c9	212
b6d1f3b7	213	{% if hottest_wish %}
a6a4d1cf	214	<div class="d-flex flex-row justify-content-between align-items-baseline">
49baba87	215	<h5 class="text-white">{{ hottest_wish.title }}</h5>
a6a4d1cf S	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 %}
49baba87	224	<span class="h5 amber-800 hidden-xs-down">
a6a4d1cf S	225	{{ _("%d%% funded") % hottest_wish.percentage }}
	226	</span>
	227	{% end %}
	228	</div>
b6d1f3b7 S	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>
3d74a9b9	234	</div>
b6d1f3b7	235
8842c9d0	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>
b6d1f3b7	237	{% end %}
60b0917c MT	238	</div>
60b0917c MT	239	</section>
1e5bc9c9 S	240
	241	<section id="fireinfo" class="content-section">
	242	<div class="container">
b6d1f3b7 S	243	<h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
b6d1f3b7 S	244
32efbb1f	245	<div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
b6eb5162	246	<div class="col-6 col-md-3 mb-6 text-center">
49baba87	247	<p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
3c600deb	248	<h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
b6eb5162	249	<div class="r_circle circle mt-5">
3c600deb	250	<p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
b6eb5162 S	251	</div>
b6eb5162 S	252	<script>
3c600deb	253	$('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
b6eb5162	254	</script>
b6d1f3b7 S	255	</div>
b6d1f3b7 S	256
b6eb5162	257	<div class="col-6 col-md-3 mb-6 text-center">
49baba87 S	258	<p class="mb-0 mb-sm-3 fireinfo_cat">Favorite Kernel</p>
49baba87 S	259	<h5 class="pb-5 fireinfo truncate">3.14.79-ipfire-pae</h5>
b6eb5162	260	<div class="f_circle circle mt-5">
49baba87	261	<p class="fireinfo_per">36%</p>
b6eb5162 S	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>
b6d1f3b7 S	266	</div>
b6d1f3b7 S	267
69a9b33d	268	<div class="col-6 col-md-3 text-center">
49baba87 S	269	<p class="mb-0 mb-sm-3 fireinfo_cat">Favorite CPU</p>
49baba87 S	270	<h5 class="pb-5 fireinfo">Intel</h5>
b6eb5162	271	<div class="c_circle circle mt-5">
8842c9d0	272	<p class="fireinfo_per">73%</p>
b6eb5162 S	273	</div>
b6eb5162 S	274	<script>
8842c9d0	275	$('.c_circle').circleProgress({ value: 0.73, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#43a047"] } });
b6eb5162	276	</script>
b6d1f3b7 S	277	</div>
b6d1f3b7 S	278
69a9b33d	279	<div class="col-6 col-md-3 text-center">
49baba87 S	280	<p class="mb-0 mb-sm-3 fireinfo_cat truncate">Favorite Virtualisation</p>
49baba87 S	281	<h5 class="pb-5 fireinfo">VMWare</h5>
b6eb5162	282	<div class="v_circle circle mt-5">
49baba87	283	<p class="fireinfo_per">46%</p>
b6eb5162 S	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>
b6d1f3b7 S	288	</div>
b6d1f3b7 S	289	</div>
1e5bc9c9 S	290
1e5bc9c9 S	291	<div class="row justify-content-center">
22cfab2d	292	<a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
1e5bc9c9	293	</div>
9d7e697a	294	</div>
1e5bc9c9	295	</section>
60b0917c	296
1e5bc9c9 S	297	<section id="appliances" class="content-section">
1e5bc9c9 S	298	<div class="container">
b6d1f3b7	299	<h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
1e5bc9c9	300
49baba87 S	301	<div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
49baba87 S	302	<div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
1e5bc9c9 S	303	<p class="lead">
1e5bc9c9 S	304	{% if lang == "de" %}
b6d1f3b7	305	<a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet
1e5bc9c9 S	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 %}
b6d1f3b7	310	<a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
1e5bc9c9 S	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>
7a9f7ff6	317	<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
22cfab2d S	318	<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
22cfab2d S	319	<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
1e5bc9c9 S	320	</div>
1e5bc9c9 S	321	</div>
22cfab2d S	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>
69a9b33d	330	</div>
1e5bc9c9	331	</div>
60b0917c	332	</section>
aa44ed56 S	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>
81675874	343	{% end block %}