]> git.ipfire.org Git - ipfire.org.git/blob - src/templates/base.html
Merge remote-tracking branch 'rico/new-design' into new-design
[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 class="is-flex is-flex-direction-column">
24 <nav class="navbar" role="navigation" aria-label="main navigation">
25 <div class="container">
26 <div class="navbar-brand">
27 <a class="navbar-item is-size-4" href="/">
28 <strong>
29 {% if request.path.startswith("/projects/location") %}
30 IPFire<span class="has-text-primary">_</span>Location
31 {% else %}
32 IPFire<span class="has-text-primary">_</span>
33 {% end %}
34
35 {% if hostname.startswith("fireinfo.") %}
36 {{ _("Fireinfo") }}
37 {% elif hostname.startswith("nopaste.") %}
38 {{ _("Nopaste") }}
39 {% end %}
40 </strong>
41 </a>
42
43 <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMainMenu">
44 <span aria-hidden="true"></span>
45 <span aria-hidden="true"></span>
46 <span aria-hidden="true"></span>
47 </a>
48 </div>
49 <div class="navbar-menu" id="navbarMainMenu">
50 {% block menu %}
51 {% if hostname.startswith("www.") or hostname.startswith("dev.") %}
52 <div class="navbar-end">
53 {# Show a search bar for blog #}
54 {% if request.path.startswith("/blog") %}
55 {# Navigation for Blog Authors #}
56 {% if current_user and current_user.is_blog_author() %}
57 <a class="navbar-item is-tab {% if request.path == "/blog/drafts" %}is-active{% end %}" href="/blog/drafts">
58 {{ _("My Drafts") }}
59 </a>
60 {% end %}
61
62 <div class="navbar-item">
63 <form action="/blog" method="GET">
64 <div class="field">
65 <div class="control has-icons-left">
66 <input class="input" type="text"
67 name="q" {% if "q" in locals() and q %}value="{{ q }}"{% end %}
68 placeholder="{{ _("Search Blog...") }}">
69 <span class="icon is-small is-left">
70 <i class="fas fa-search"></i>
71 </span>
72 </div>
73 </div>
74 </form>
75 </div>
76 {# Show a search bar for docs #}
77 {% elif request.path.startswith("/docs") %}
78 <div class="navbar-item">
79 <form action="/docs/search" method="GET">
80 <div class="field">
81 <div class="control has-icons-left">
82 <input class="input" type="text"
83 name="q" {% if "q" in locals() and q %}value="{{ q }}"{% end %}
84 placeholder="{{ _("Search Docs...") }}">
85 <span class="icon is-small is-left">
86 <i class="fas fa-search"></i>
87 </span>
88 </div>
89 </div>
90 </form>
91 </div>
92 {% end %}
93
94 {# Location #}
95 {% if request.path.startswith("/projects/location") %}
96 <a class="navbar-item is-tab
97 {% if request.path == "/projects/location/how-to-use" %}is-active{% end %}"
98 href="/projects/location/how-to-use">
99 {{ _("How To Use") }}
100 </a>
101
102 <a class="navbar-item is-tab
103 {% if request.path.startswith("/projects/location/download") %}is-active{% end %}"
104 href="/projects/location/download">
105 {{ _("Download") }}
106 </a>
107
108 {# Main #}
109 {% else %}
110 <a class="navbar-item is-tab {% if request.path == "/about" %}is-active{% end %}" href="/about">{{ _("About") }}</a>
111
112 <a class="navbar-item is-tab {% if request.path.startswith("/docs") %}is-active{% end %}" href="/docs">{{ _("Documentation") }}</a>
113
114 <a class="navbar-item is-tab {% if request.path.startswith("/download") %}is-active{% end %}" href="/download">{{ _("Download") }}</a>
115
116 <a class="navbar-item is-tab {% if request.path.startswith("/blog") %}is-active{% end %}" href="/blog">{{ _("Blog") }}</a>
117
118 <a class="navbar-item is-tab {% if request.path == "/help" %}is-active{% end %}" href="/help">{{ _("Help") }}</a>
119 {% end %}
120
121 <div class="navbar-item">
122 <a class="button is-lwl has-text-weight-bold is-uppercase"
123 href="https://store.lightningwirelabs.com/?utm_source={{ hostname }}&utm_medium=navigation">
124 {{ _("Buy") }}
125 </a>
126 </div>
127
128 <div class="navbar-item">
129 <a class="button is-primary has-text-weight-bold is-uppercase"
130 href="https://www.ipfire.org/donate">
131 {{ _("Donate") }}
132 </a>
133 </div>
134 </div>
135 {% elif hostname == "fireinfo.ipfire.org" %}
136 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
137 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
138 <span class="fas fa-bars"></span>
139 </button>
140
141 <div class="collapse navbar-collapse" id="navbar">
142 <ul class="navbar-nav ml-auto">
143 {% if current_user and current_user.is_staff() %}
144 <li class="nav-item">
145 <a class="nav-link {% if request.path.startswith("/admin") %}is-active{% end %}" href="/admin">
146 {{ _("Admin") }}
147 </a>
148 </li>
149 {% end %}
150
151 <li class="nav-item">
152 <a class="nav-link {% if request.path.startswith("/vendors") %}is-active{% end %}" href="/vendors">
153 {{ _("Vendors") }}
154 </a>
155 </li>
156 </ul>
157 </div>
158 {% elif hostname == "location.ipfire.org" %}
159 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
160 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
161 <span class="fas fa-bars"></span>
162 </button>
163
164 <div class="collapse navbar-collapse" id="navbar">
165 <ul class="navbar-nav ml-auto">
166 <li class="nav-item">
167 <a class="nav-link {% if request.path == "/how-to-use" %}is-active{% end %}" href="/how-to-use">
168 {{ _("How To Use") }}
169 </a>
170 </li>
171
172 <li class="nav-item">
173 <a class="nav-link {% if request.path == "/download" %}is-active{% end %}" href="/download">
174 {{ _("Download") }}
175 </a>
176 </li>
177 </ul>
178
179 <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
180 {{ _("Donate") }}
181 </a>
182 </div>
183 {% elif hostname == "nopaste.ipfire.org" %}
184 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
185 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
186 <span class="fas fa-bars"></span>
187 </button>
188
189 <div class="collapse navbar-collapse" id="navbar">
190 <ul class="navbar-nav ml-auto">
191 <li class="nav-item">
192 <a class="nav-link" href="/?mode=upload">{{ _("Upload File") }}</a>
193 </li>
194 </ul>
195 </div>
196 {% end %}
197 {% end block %}
198 </div>
199 </div>
200 </nav>
201
202 <div class="is-flex-grow-1 is-flex-shrink-0">
203 {% block container %}
204 <div class="container">
205 {% block content %}{% end block %}
206 </div>
207 {% end block %}
208 </div>
209
210 {% block footer %}
211 <footer class="footer is-flex-shrink-0">
212 <div class="container">
213 <div class="columns">
214 <div class="column is-two-fifths">
215 {# Show some profile information for users who are logged in #}
216 {% if current_user %}
217 <h4 class="title is-4 mb-0">{{ _("Hello, %s!") % current_user }}</h4>
218
219 <div class="level is-mobile">
220 <div class="level-left">
221 <a class="level-item" href="/users/{{ current_user.uid }}">
222 {{ _("My Profile") }}
223 </a>
224
225 <a class="level-item" href="/logout">
226 {{ _("Logout") }}
227 </a>
228 </div>
229 </div>
230
231 {# Otherwise encourage people to join #}
232 {% else %}
233 <p class="is-size-4">
234 <span class="has-text-weight-bold">IPFire</span><span class="has-text-primary has-text-weight-bold">_</span>People
235 </p>
236
237 <p>
238 Join the community and sign up for our newsletter
239 </p>
240
241 <a class="button is-primary is-outlined is-medium
242 has-text-black has-text-weight-bold" href="/register">
243 JOIN NOW
244 </a>
245 <a class="button is-primary is-outlined is-medium
246 has-text-black has-text-weight-bold" href="/login">
247 LOG IN
248 </a>
249 {% end %}
250 </div>
251
252 <div class="column">
253 <ul>
254 <li>
255 <a href="/about">
256 {{ _("About") }}
257 </a>
258 </li>
259 <li>
260 <a href="/docs">
261 {{ _("Documentation") }}
262 </a>
263 </li>
264 <li>
265 <a href="/help">
266 {{ _("Help") }}
267 </a>
268 </li>
269 <li>
270 <a href="/docs/devel">
271 {{ _("Development") }}
272 </a>
273 </li>
274 </ul>
275 </div>
276
277 <div class="column">
278 <ul>
279 <li>
280 <a href="/download">
281 {{ _("Download") }}
282 </a>
283 </li>
284 <li>
285 <a href="https://community.ipfire.org/">
286 {{ _("Community") }}
287 </a>
288 </li>
289 <li>
290 <a href="/sitemap">
291 {{ _("Sitemap") }}
292 </a>
293 </li>
294 <li>
295 <a href="/legal">
296 {{ _("Legal") }}
297 </a>
298 </li>
299 </ul>
300 </div>
301
302 {% if current_user and current_user.is_staff() %}
303 <div class="column">
304 <ul>
305 <li>
306 <a href="/voip">
307 {{ _("VoIP") }}
308 </a>
309 </li>
310 </ul>
311 </div>
312 {% end %}
313
314 <div class="column is-one-fifth">
315 <div class="block">
316 <a class="button is-primary is-fullwidth is-medium has-text-weight-bold is-uppercase"
317 href="https://www.ipfire.org/donate">
318 {{ _("Donate") }}
319 </a>
320 </div>
321
322 <div class="block">
323 <div class="level is-mobile">
324 <div class="level-item">
325 <a href="https://social.ipfire.org/@news" title="{{ _("Mastodon") }}">
326 <i class="fa-brands fa-mastodon"></i>
327 </a>
328 </div>
329 <div class="level-item">
330 <a href="https://twitter.com/ipfire" title="{{ _("Twitter") }}">
331 <i class="fa-brands fa-twitter"></i>
332 </a>
333 </div>
334 <div class="level-item">
335 <a href="https://linkedin.com/company/ipfire" title="{{ _("LinkedIn") }}">
336 <i class="fa-brands fa-linkedin-in"></i>
337 </a>
338 </div>
339 </div>
340 </div>
341 </div>
342 </div>
343 </div>
344 </footer>
345 {% end block %}
346
347 <script src="{{ static_url("js/jquery-3.6.0.min.js") }}"></script>
348 <script src="{{ static_url("js/site.js") }}"></script>
349 {% block javascript %}{% end block %}
350 </body>
351 </html>