]> git.ipfire.org Git - ipfire.org.git/blob - src/templates/base.html
location: Add a "How to use" page
[ipfire.org.git] / src / templates / base.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>{{ hostname }} - {% block title %}{{ _("No title given") }}{% end block %}</title>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6 <meta name="author" content="IPFire.org - IPFire Development Team" />
7
8 <meta name="keywords" content="Linux, Firewall, IPFire, Security, IPCop, Open Source, Free, ARM, VPN, Proxy, IDS, IPS" />
9
10 <link rel="icon" sizes="192x192" href="{{ static_url("img/apple-touch-icon-192x192-precomposed.png") }}">
11 {% for res in ("72x72", "76x76", "120x120", "144x144", "152x152", "180x180") %}
12 <link rel="apple-touch-icon-precomposed" sizes="{{ res }}" href="{{ static_url("img/apple-touch-icon-%s-precomposed.png" % res )}}">
13 {% end %}
14 <link rel="apple-touch-icon-precomposed" href="{{ static_url("img/apple-touch-icon-60x60-precomposed.png") }}">
15
16 <!-- styling stuff -->
17 <link rel="stylesheet" type="text/css" href="{{ static_url("main.css") }}" />
18 <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
20 {% block head %}{% end block %}
21 </head>
22
23 <body id="page-top">
24 <nav class="navbar navbar-dark navbar-expand-lg mb-4">
25 <div class="container">
26 <a class="navbar-brand" href="/">
27 <strong>IPFire</strong>
28
29 {% if hostname == "blog.ipfire.org" %}
30 {{ _("Blog") }}
31 {% elif hostname == "fireinfo.ipfire.org" %}
32 {{ _("Fireinfo") }}
33 {% elif hostname == "location.ipfire.org" %}
34 {{ _("Location") }}
35 <span class="badge badge-primary">{{ _("BETA") }}</span>
36 {% elif hostname == "mirrors.ipfire.org" %}
37 {{ _("Mirrors") }}
38 {% elif hostname == "people.ipfire.org" %}
39 {{ _("People") }}
40 {% elif hostname == "wiki.ipfire.org" %}
41 {{ _("Wiki") }}
42 {% end %}
43 </a>
44
45 {% block menu %}
46 {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
47 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
48 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
49 <span class="fas fa-bars"></span>
50 </button>
51
52 <div class="collapse navbar-collapse" id="navbar">
53 <ul class="navbar-nav ml-auto">
54 <li class="nav-item d-sm-block d-md-block d-lg-none">
55 <a class="nav-link {% if request.path == "/" %}active{% end %}" href="/">{{ _("Home") }}</a>
56 </li>
57
58 <li class="nav-item">
59 <a class="nav-link {% if request.path == "/features" %}active{% end %}" href="/features">{{ _("Features") }}</a>
60 </li>
61
62 <li class="nav-item">
63 <a class="nav-link {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
64 </li>
65
66 <li class="nav-item">
67 <a class="nav-link {% if request.path == "/support" %}active{% end %}" href="/support">{{ _("Support") }}</a>
68 </li>
69
70 <li class="nav-item">
71 <a class="nav-link" href="https://blog.ipfire.org/">{{ _("Blog") }}</a>
72 </li>
73 </ul>
74
75 <a class="btn btn-primary mt-2 mt-lg-0 ml-lg-2" href="/donate">
76 <span class="fas fa-heart"></span> {{ _("Donate") }}
77 </a>
78 </div>
79 {% elif hostname == "blog.ipfire.org" %}
80 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
81 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
82 <span class="fas fa-bars"></span>
83 </button>
84
85 <div class="collapse navbar-collapse" id="navbar">
86 <ul class="navbar-nav ml-auto d-lg-none">
87 <li class="nav-item">
88 <a class="nav-link {% if request.path == "/" %}active{% end %}" href="/">
89 {{ _("Newest") }}
90 </a>
91 </li>
92
93 {% if current_user %}
94 <li class="nav-item">
95 <a class="nav-link {% if request.path == "/drafts" %}active{% end %}" href="/drafts">
96 {{ _("My Drafts") }}
97 </a>
98 </li>
99 {% end %}
100
101 <li class="nav-item">
102 <a class="nav-link {% if request.path == "/tags/featured" %}active{% end %}" href="/tags/featured">
103 {{ _("Featured") }}
104 </a>
105 </li>
106
107 <li class="nav-item">
108 <a class="nav-link {% if request.path == "/tags/lightningwirelabs.com" %}active{% end %} d-flex justify-content-between"
109 href="/tags/lightningwirelabs.com">
110 <span>{{ _("Lightning Wire Labs") }}</span>
111
112 <img class="img-fluid" src="{{ static_url("img/lightningwirelabs-logo.svg") }}"
113 alt="{{ _("Lightning Wire Labs") }}">
114 </a>
115 </li>
116
117 <li class="nav-item">
118 <a class="nav-link d-flex justify-content-between" href="/feed.xml">
119 <span>{{ _("RSS Feed") }}</span> <span class="fas fa-rss"></span>
120 </a>
121 </li>
122 </ul>
123
124 <form class="form-inline ml-lg-auto my-2 my-lg-0" action="/search" method="GET">
125 <input class="form-control form-control-sm" type="search" name="q"
126 placeholder="{{ _("Search...") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
127 </form>
128
129 <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
130 <span class="fas fa-heart"></span> {{ _("Donate") }}
131 </a>
132 </div>
133 {% elif hostname == "fireinfo.ipfire.org" %}
134 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
135 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
136 <span class="fas fa-bars"></span>
137 </button>
138
139 <div class="collapse navbar-collapse" id="navbar">
140 <ul class="navbar-nav ml-auto">
141 <li class="nav-item">
142 <a class="nav-link {% if request.path.startswith("/vendors") %}active{% end %}" href="/vendors">
143 {{ _("Vendors") }}
144 </a>
145 </li>
146 </ul>
147 </div>
148 {% elif hostname == "location.ipfire.org" %}
149 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
150 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
151 <span class="fas fa-bars"></span>
152 </button>
153
154 <div class="collapse navbar-collapse" id="navbar">
155 <ul class="navbar-nav ml-auto">
156 <li class="nav-item">
157 <a class="nav-link {% if request.path == "/how-to-use" %}active{% end %}" href="/how-to-use">
158 {{ _("How To Use") }}
159 </a>
160 </li>
161
162 <li class="nav-item">
163 <a class="nav-link {% if request.path == "/download" %}active{% end %}" href="/download">
164 {{ _("Download") }}
165 </a>
166 </li>
167 </ul>
168
169 <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
170 <span class="fas fa-heart"></span> {{ _("Donate") }}
171 </a>
172 </div>
173 {% elif hostname == "nopaste.ipfire.org" %}
174 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
175 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
176 <span class="fas fa-bars"></span>
177 </button>
178
179 <div class="collapse navbar-collapse" id="navbar">
180 <ul class="navbar-nav ml-auto">
181 <li class="nav-item">
182 <a class="nav-link" href="/?mode=upload">{{ _("Upload File") }}</a>
183 </li>
184 </ul>
185 </div>
186 {% elif hostname == "people.ipfire.org" %}
187 {% if current_user %}
188 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
189 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
190 <span class="fas fa-bars"></span>
191 </button>
192
193 <div class="collapse navbar-collapse" id="navbar">
194 <ul class="navbar-nav ml-auto mr-3">
195 <li class="nav-item">
196 <a class="nav-link {% if request.path == "/users/%s" % current_user.uid %}active{% end %}" href="/users/{{ current_user.uid }}">
197 {{ _("My Profile") }}
198 </a>
199 </li>
200
201 {% if current_user.is_staff() %}
202 <li class="nav-item">
203 <a class="nav-link {% if request.path == "/users" %}active{% end %}" href="/users">
204 {{ _("Users") }}
205 </a>
206 </li>
207 {% end %}
208
209 {% if current_user.has_sip() %}
210 <li class="nav-item">
211 <a class="nav-link {% if request.path.startswith("/conferences") %}active{% end %}" href="/conferences">
212 {{ _("Conferences") }}
213 </a>
214 </li>
215 {% end %}
216 </ul>
217
218 <form class="form-inline my-2 my-lg-0" action="/search" method="GET">
219 <input class="form-control form-control-sm mr-sm-2" type="search" name="q"
220 placeholder="{{ _("Search") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
221 </form>
222 </div>
223 {% end %}
224 {% elif hostname == "wiki.ipfire.org" %}
225 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
226 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
227 <span class="fas fa-bars"></span>
228 </button>
229
230 <div class="collapse navbar-collapse" id="navbar">
231 <ul class="navbar-nav ml-auto mr-3">
232 <li class="nav-item">
233 <a class="nav-link {% if request.path == "/recent-changes" %}active{% end %}" href="/recent-changes">
234 {{ _("Recent Changes") }}
235 </a>
236 </li>
237
238 <li class="nav-item">
239 <a class="nav-link {% if request.path == "/watchlist" %}active{% end %}" href="/watchlist">
240 {{ _("Watchlist") }}
241 </a>
242 </li>
243 </ul>
244
245 <form class="form-inline my-2 my-lg-0" action="/search" method="GET">
246 <input class="form-control form-control-sm" type="search" name="q"
247 placeholder="{{ _("Search...") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
248 </form>
249
250 <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
251 <span class="fas fa-heart"></span> {{ _("Donate") }}
252 </a>
253 </div>
254 {% end %}
255 {% end block %}
256 </div>
257 </nav>
258
259 {% block container %}
260 <div class="container">
261 {% block content %}{% end block %}
262 </div>
263 {% end block %}
264
265 {% block footer %}
266 <footer>
267 <div class="footer">
268 {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
269 <div class="footer-info">
270 <div class="container pb-3">
271 <div class="row mb-6 justify-content-between">
272 <div class="col-12 col-lg-4 mb-4">
273 <h6>{{ _("Subscribe to our Newsletter") }}</h6>
274
275 <form method="POST" action="https://{{ "dev.ipfire.org" if hostname == "dev.ipfire.org" else "www.ipfire.org" }}/newsletter/subscribe">
276 {% raw xsrf_form_html() %}
277
278 <label class="sr-only" for="email">{{ _("Email Address") }}</label>
279
280 <input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email"
281 placeholder="{{ _("Your Email Address") }}" required>
282
283 <button type="submit" class="btn btn-primary btn-block mb-2">{{ _("Subscribe") }}</button>
284 </form>
285 </div>
286
287 <div class="col-12 col-lg-3 mb-4 small">
288 <h6>{{ _("About") }}</h6>
289
290 <div class="row">
291 <div class="col">
292 <ul class="list-unstyled">
293 <li>
294 <a href="/features">{{ _("Features") }}</a>
295 </li>
296
297 <li>
298 <a href="/download">{{ _("Download") }}</a>
299 </li>
300
301 <li>
302 <a href="/support">{{ _("Support") }}</a>
303 </li>
304 </ul>
305 </div>
306
307 <div class="col">
308 <ul class="list-unstyled">
309 <li>
310 <a href="https://blog.ipfire.org">{{ _("Blog") }}</a>
311 </li>
312
313 <li>
314 <a href="https://wiki.ipfire.org/devel">{{ _("Development") }}</a>
315 </li>
316
317 <li>
318 <a href="/legal">{{ _("Legal") }}</a>
319 </li>
320 </ul>
321 </div>
322 </div>
323 </div>
324
325 <div class="col-12 col-lg-4 text-center mb-4">
326 <a class="btn btn-primary btn-lg px-4 my-4" href="/donate">
327 <span class="fas fa-heart"></span> {{ _("Donate") }}
328 </a>
329
330 <div class="btn-toolbar justify-content-center">
331 <a class="btn btn-link" href="https://twitter.com/ipfire">
332 <span class="fab fa-twitter"></span>
333 </a>
334
335 <a class="btn btn-link" href="https://www.facebook.com/IPFire.org">
336 <span class="fab fa-facebook"></span>
337 </a>
338
339 <a class="btn btn-link" href="https://youtube.com/user/ipfireproject">
340 <span class="fab fa-youtube"></span>
341 </a>
342 </div>
343 </div>
344 </div>
345 </div>
346 </div>
347 {% end %}
348
349 <div class="copyright">
350 <div class="container d-flex justify-content-between">
351 &copy; {{ year }} - IPFire - {{ _("The Open Source Firewall") }}
352
353 {% if not current_user and hostname in ("blog.ipfire.org", "nopaste.ipfire.org", "wiki.ipfire.org") %}
354 <a href="/login">{{ _("Login") }}</a>
355 {% elif current_user %}
356 <p class="mb-0">
357 <span class="mr-2">
358 {{ _("You are currently logged in as %s") % current_user }}
359 </span>
360
361 <a href="/logout">{{ _("Logout") }}</a>
362 </p>
363 {% end %}
364 </div>
365 </div>
366 </div>
367 </footer>
368 {% end block %}
369
370 <script src="{{ static_url("js/jquery-3.3.1.min.js") }}"></script>
371 <script src="{{ static_url("js/popper.min.js") }}"></script>
372 <script src="{{ static_url("js/bootstrap.min.js") }}"></script>
373 {% block javascript %}{% end block %}
374 </body>
375 </html>