[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 id="scrollto" class="page-scroll">
			<a href="#features" class="btn btn-outline-primary rounded-circle">
				<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 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>
			
			<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-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">
						<h3 class="text-white">{{ hottest_wish.title }}</h3>
		
						{% 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="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"><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"><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-0 mb-sm-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-0 mb-sm-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-0 mb-sm-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 %}
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
b6d1f3b7 S	19	<div id="scrollto" class="page-scroll">
b6d1f3b7 S	20	<a href="#features" class="btn btn-outline-primary rounded-circle">
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
	139	Internetzugang für hundertausende Nutzer jeden Tag.
	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 S	151	<a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
7751181d S	152	<a class="btn btn-white btn-lg px-4 px-md-6" href="/learn-more">{{ _("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">
	211
b6d1f3b7	212	<h2 class="display-2 text-center text-white">IP<strong>Fire</strong>’s Wishlist</h2>
1e5bc9c9	213
b6d1f3b7	214	{% if hottest_wish %}
a6a4d1cf S	215	<div class="d-flex flex-row justify-content-between align-items-baseline">
	216	<h3 class="text-white">{{ hottest_wish.title }}</h3>
	217
	218	{% if hottest_wish.is_new() %}
	219	<span class="label label-success pull-right">{{ _("NEW") }}</span>
	220	{% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
	221	<span>
	222	{{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
	223	</span>
	224	{% else %}
	225	<span class="amber-800 hidden-xs-down">
	226	{{ _("%d%% funded") % hottest_wish.percentage }}
	227	</span>
	228	{% end %}
	229	</div>
b6d1f3b7 S	230
	231	<div class="progress progress-small mb-5">
	232	<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;">
	233	<span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
	234	</div>
3d74a9b9	235	</div>
b6d1f3b7 S	236
	237	<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>
	238
	239	{% end %}
	240
60b0917c MT	241	</div>
60b0917c MT	242	</section>
1e5bc9c9 S	243
	244	<section id="fireinfo" class="content-section">
	245	<div class="container">
b6d1f3b7 S	246	<h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
b6d1f3b7 S	247
32efbb1f	248	<div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
b6eb5162	249	<div class="col-6 col-md-3 mb-6 text-center">
32efbb1f	250	<p class="mb-0 mb-sm-3"><small>Latest Release</small></p>
b6eb5162 S	251	<h4 class="pb-5">2.19 Core 109</h4>
	252	<div class="r_circle circle mt-5">
	253	<p class="lead">48%</p>
	254	</div>
	255	<script>
	256	$('.r_circle').circleProgress({ value: 0.48, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
	257	</script>
b6d1f3b7 S	258	</div>
b6d1f3b7 S	259
b6eb5162	260	<div class="col-6 col-md-3 mb-6 text-center">
32efbb1f	261	<p class="mb-0 mb-sm-3"><small>Favorite Kernel</small></p>
b6eb5162 S	262	<h4 class="pb-5 truncate">3.14.79-ipfire-pae</h4>
	263	<div class="f_circle circle mt-5">
	264	<p class="lead">36%</p>
	265	</div>
	266	<script>
	267	$('.f_circle').circleProgress({ value: 0.36, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#00bcd4"] } });
	268	</script>
b6d1f3b7 S	269	</div>
b6d1f3b7 S	270
69a9b33d	271	<div class="col-6 col-md-3 text-center">
32efbb1f	272	<p class="mb-0 mb-sm-3"><small>Favorite CPU</small></p>
b6eb5162 S	273	<h4 class="pb-5">Intel</h4>
	274	<div class="c_circle circle mt-5">
	275	<p class="lead">71%</p>
	276	</div>
	277	<script>
	278	$('.c_circle').circleProgress({ value: 0.71, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#43a047"] } });
	279	</script>
b6d1f3b7 S	280	</div>
b6d1f3b7 S	281
69a9b33d	282	<div class="col-6 col-md-3 text-center">
32efbb1f	283	<p class="mb-0 mb-sm-3 truncate"><small>Favorite Virtualisation</small></p>
b6eb5162 S	284	<h4 class="pb-5">VMWare</h4>
	285	<div class="v_circle circle mt-5">
	286	<p class="lead">46%</p>
	287	</div>
	288	<script>
	289	$('.v_circle').circleProgress({ value: 0.46, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
	290	</script>
b6d1f3b7 S	291	</div>
b6d1f3b7 S	292	</div>
1e5bc9c9 S	293
1e5bc9c9 S	294	<div class="row justify-content-center">
22cfab2d	295	<a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
1e5bc9c9	296	</div>
9d7e697a	297	</div>
1e5bc9c9	298	</section>
60b0917c	299
1e5bc9c9 S	300	<section id="appliances" class="content-section">
1e5bc9c9 S	301	<div class="container">
b6d1f3b7	302	<h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
1e5bc9c9	303
69a9b33d	304	<div class="row mb-lg-6 mb-md-4 pb-6">
ccd81281	305	<div class="col-md-12 col-lg-7 mb-5 mb-md-6">
1e5bc9c9 S	306	<p class="lead">
1e5bc9c9 S	307	{% if lang == "de" %}
b6d1f3b7	308	<a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet
1e5bc9c9 S	309	Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
	310	Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
	311	und Performance.
	312	{% else %}
b6d1f3b7	313	<a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
1e5bc9c9 S	314	IPFire hardware appliances for enterprises, large businesses and SOHO.
	315	Deploying one of these on your network will provide you with the
	316	greatest reliability, stability and performance.
	317	{% end %}
	318	</p>
	319	</div>
69a9b33d	320	<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
22cfab2d S	321	<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
22cfab2d S	322	<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
1e5bc9c9 S	323	</div>
1e5bc9c9 S	324	</div>
22cfab2d S	325	<div class="text-center">
	326	<picture>
	327	<source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
	328	<source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
	329	<source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
	330	<source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
	331	<img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
	332	</picture>
69a9b33d	333	</div>
1e5bc9c9	334	</div>
60b0917c	335	</section>
81675874	336	{% end block %}