-
Notifications
You must be signed in to change notification settings - Fork 915
/
home.html
369 lines (342 loc) · 17.4 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
{# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
{% extends "mozorg/base-resp.html" %}
{% add_lang_files "mozorg/home/index" %}
{% block page_image %}{{ static('img/home/page-image.png') }}{% endblock %}
{% block page_title %}
{{_('We’re building a better Internet')}}
{% endblock %}
{% block page_desc %}
{{_('Did you know? Mozilla — the maker of Firefox — fights to keep the Internet a global public resource open and accessible to all.')}}
{% endblock %}
{% block body_id %}home{% endblock %}
{% block body_class %}lang-{{ LANG }}{% endblock %}
{% block extra_meta %}
<!-- validates bing webmaster tools -->
<meta name="msvalidate.01" content="B7B177115A634927D608514DA17B2574" />
<!-- YouTube Verification -->
<meta name="google-site-verification" content="U9a6gH32vLIykvntaDToj-ytYhlZ1AfAgVEKstixQIE" />
{% endblock %}
{% block extrahead %}
{% stylesheet 'home' %}
<!--[if lte IE 8]>
{% stylesheet 'home-ie8' %}
<![endif]-->
{% endblock %}
{% block optimizely %}
{% if waffle.switch('mozorg-home-optimizely') %}
{% include 'includes/optimizely.html' %}
{% endif %}
{% endblock %}
{% block js %}
<!--[if IE 9]>
{% javascript 'matchmedia_addlistener' %}
<![endif]-->
{% javascript 'home' %}
{% endblock %}
{% block string_data %}
data-read-more="{{_('Read more')}}"
{% endblock %}
{# Note: Each color face links to the contribute landing page,
but post-launch we might link to specific user stories. #}
{% set faces = [
(url('mozorg.contribute.stories'), '01'),
(url('mozorg.contribute.stories'), '02'),
(url('mozorg.contribute.stories'), '03'),
(url('mozorg.contribute.stories'), '04'),
(url('mozorg.contribute.stories'), '05'),
(url('mozorg.contribute.stories'), '06'),
(url('mozorg.contribute.stories'), '07'),
(url('mozorg.contribute.stories'), '08'),
(url('mozorg.contribute.stories'), '09'),
(url('mozorg.contribute.stories'), '10'),
(url('mozorg.contribute.stories'), '11'),
]|shuffle -%}
{% macro promo_face(content_id, promo_id) %}
<a href="{{ faces[content_id][0] }}" data-promotion-id="{{ promo_id }}" data-promotion-name="Mozillians" data-promotion-class="promo-face" data-promotion-type="tile">
<div class="face-outer">
<div class="face face-{{ faces[content_id][1] }}"></div>
</div>
</a>
{%- endmacro %}
{% block site_header %}
<header id="masthead">
<div class="container">
{% block tabzilla_tab %}
<div id="tabzilla">
<a href="{{ url('mozorg.home') }}" data-link-type="nav" data-link-name="tabzilla">Mozilla</a>
</div>
{% endblock %}
{% block site_header_nav %}
<nav id="nav-main" role="navigation">
<span class="toggle" role="button" aria-controls="nav-main-menu" aria-expanded="false" tabindex="0">{{_('Menu')}}</span>
<ul id="nav-main-menu">
<li class="first about-item">
<a href="{{ url('mozorg.about') }}" data-link-type="nav" data-link-name="About">{{_('About')}}</a>
</li>
<li class="contribute-item">
<a href="{{ url('mozorg.contribute') }}" data-link-type="nav" data-link-name="Participate">{{_('Participate')}}</a>
</li>
<li class="products-item">
<a href="{{ url('firefox.family.index') }}" data-link-type="nav" data-link-name="Firefox">{{_('Firefox')}}</a>
</li>
<li class="last donate-item">
<a href="{{ donate_url('header') }}" data-link-type="nav" data-link-name="Donate">{{_('Donate')}}</a>
</li>
</ul>
</nav>
{% endblock %}
</div>
</header>
{% endblock %}
{% block content %}
<main role="main">
<header class="main-header">
<div class="container">
<h1>{{ high_res_img('home/voices/mozilla-wordmark-white.png', {'alt': 'Mozilla', 'width': '313', 'height': '82'}) }}</h1>
</div>
</header>
<section class="promo-grid-wrapper">
<div class="promo-grid-inner">
<ul class="promo-grid {% if tweets %}has-twitter-promo{% endif %}">
{# L10n: Begin home page promos. Line breaks are for visual formatting only. #}
{% if l10n_has_tag('firefox_accounts_promo') %}
<li id="promo-1" class="item promo-large-portrait firefox-accounts" tabindex="0">
<h2 class="primary go">{{ _('All your devices. <br>One Firefox.') }}</h2>
<a class="panel-link" href="{{ url('firefox.accounts') }}" data-promotion-id="promo-1" data-promotion-name="All your devices. One Firefox." data-promotion-class="promo-large-portrait" data-promotion-type="tile" data-accounts-url="{{ url('firefox.accounts') }}">
<div class="secondary">
<h3>{{ _('Sync Firefox <br>wherever <br>you use it.') }}</h3>
<p class="more">{{ _('Create an account') }}</p>
</div>
</a>
</li>
{% else %}
<li id="promo-1" class="item promo-large-portrait private-browsing" tabindex="0">
<h2 class="primary go">{{ _('Introducing the new <br>Private Browsing') }}</h2>
<a class="panel-link" href="{{ url('firefox.private-browsing') }}" data-promotion-id="promo-1" data-promotion-name="Introducing the new Private Browsing" data-promotion-class="promo-large-portrait" data-promotion-type="tile">
<div class="secondary">
<h3>{{ _('More protection. <br>The most privacy.') }}</h3>
<p class="more">{{ _('Try Private Browsing') }}</p>
</div>
</a>
</li>
{% endif %}
<li id="promo-2" class="item promo-small-landscape advocacy">
<a class="panel-link" href="https://advocacy.mozilla.org" data-promotion-id="promo-2" data-promotion-name="Learn about Mozilla Advocacy" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
<h2>{{ _('Learn about Mozilla Advocacy') }}</h2>
</a>
</li>
<li id="promo-3" class="item promo-face">
{{ promo_face(1, 'promo-3') }}
</li>
<li id="promo-4" class="item promo-face">
{{ promo_face(2, 'promo-4') }}
</li>
<li id="promo-5" class="item promo-small-landscape firefox-download" tabindex="0">
<div class="primary">
<h2 class="go">{{ _('Download Firefox') }}</h2>
<img width="176" height="184" src="{{ static('img/home/voices/promos/download-firefox/firefox-logo.png') }}" alt="">
</div>
<div class="secondary">
{{ download_firefox(simple=true, dom_id='promo-download-fx-button') }}
<a class="fxos-link" href="{{ url('firefox.desktop.index') }}">{{ _('Learn more') }}</a>
</div>
</li>
{% if LANG.startswith('en-') %}
<li id="promo-6" class="item promo-large-landscape encryption" tabindex="0">
<h2 class="primary go">{{ _('Encryption helps <br>protect your privacy') }}</h2>
<a class="panel-link" rel="external" href="https://advocacy.mozilla.org/encrypt/?ref=2016_Encryption&utm_campaign=2016_Encryption&utm_source=mozilla.org&utm_medium=referral" data-promotion-id="promo-6" data-promotion-name="Encryption helps protect your privacy" data-promotion-class="promo-large-landscape" data-promotion-type="tile">
<div class="secondary">
<h3>{{ _('See how it works <br>and why it’s worth protecting.') }}</h3>
<p class="more">{{ _('Learn more') }}</p>
</div>
</a>
</li>
{% else %}
<li id="promo-6" class="item promo-large-landscape support" tabindex="0">
<h2 class="primary go">{{ _('Help Mozilla users') }}</h2>
<a class="panel-link" rel="external" href="https://support.mozilla.org/get-involved" data-promotion-id="promo-6" data-promotion-name="Help Mozilla users" data-promotion-class="promo-large-landscape" data-promotion-type="tile">
<div class="secondary">
<h3>{{ _('Help millions <br>get the most from their <br>favorite browser.') }}</h3>
<p class="more">{{ _('Join our support team') }}</p>
</div>
</a>
</li>
{% endif %}
<li id="promo-7" class="item promo-face">
{{ promo_face(3, 'promo-7') }}
</li>
<li id="promo-8" class="item promo-small-landscape smarton-tracking" tabindex="0">
<a class="panel-link" rel="external" href="{{ url('teach.smarton.tracking') }}" data-promotion-id="promo-8" data-promotion-name="Get smart on Tracking" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
<h2>{{ _('Get smart on Tracking') }}</h2>
</a>
</li>
{% if l10n_has_tag('teach_the_web_promo') %}
<li id="promo-9" class="item promo-small-landscape webmaker" data-promotion-id="promo-9" data-promotion-name="Teach the Web" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
<a class="panel-link" rel="external" href="https://teach.mozilla.org">
<h2>{{ _('Teach<br> the Web') }}</h2>
</a>
</li>
{% else %}
<li id="promo-9" class="item promo-small-landscape volunteer">
<a class="panel-link" href="{{ url('mozorg.contribute') }}" data-promotion-id="promo-9" data-promotion-name="Volunteer with Mozilla" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
<h2>{{ _('Volunteer <br>with Mozilla') }}</h2>
</a>
</li>
{% endif %}
{% if l10n_has_tag('ios_promo') %}
<li id="promo-10" class="item promo-large-portrait firefox-ios" tabindex="0">
<h2 class="primary go">{{ _('Firefox is<br> now available<br> for iOS') }}</h2>
<a class="panel-link" href="{{ url('firefox.ios') }}" data-promotion-id="promo-10" data-promotion-name="Firefox is now available for iOS" data-promotion-class="promo-large-portrait" data-promotion-type="tile">
<div class="secondary">
<h3>{{ _('Add it to your iPhone, iPad & iPod touch.') }}</h3>
<p class="more">{{ _('Get Firefox for iOS') }}</p>
</div>
</a>
</li>
{% else %}
<li id="promo-10" class="item promo-large-portrait firefox-developer" tabindex="0">
<h2 class="primary go">{{ _('Try Firefox Developer Edition') }}</h2>
<a class="panel-link" href="{{ url('firefox.developer') }}" data-promotion-id="promo-10" data-promotion-name="Introducing Firefox Developer Edition" data-promotion-class="promo-large-portrait" data-promotion-type="tile">
<div class="secondary">
<h3>{{ _('The only browser made only for developers.') }}</h3>
<p class="more">{{ _('Get Firefox Developer Edition') }}</p>
</div>
</a>
</li>
{% endif %}
{% if LANG.startswith('en') %}
<li id="promo-11" class="item promo-large-landscape food-water-shelter" tabindex="0">
<h2 class="primary go">Food. Water. Shelter. Internet.</h2>
<a class="panel-link" href="https://blog.mozilla.org/blog/2016/02/08/the-internet-is-a-global-public-resource/" data-promotion-id="promo-11" data-promotion-name="Food. Water. Shelter. Internet." data-promotion-class="promo-large-portrait" data-promotion-type="tile">
<div class="secondary">
<h3>Protecting our newest global resource.</h3>
<p class="more">Learn more</p>
</div>
</a>
</li>
{% else %}
<li id="promo-11" class="item promo-large-landscape mdn-10-years" tabindex="0">
<h2 class="primary go">{{ _('Mozilla Developer Network') }}</h2>
<a class="panel-link" href="https://developer.mozilla.org/docs/mdn_at_ten?utm_campaign=mdn10&utm_source=mozilla.org&utm_medium=home-tile" data-promotion-id="promo-11" data-promotion-name="Mozilla Developer Network" data-promotion-class="promo-large-portrait" data-promotion-type="tile">
<div class="secondary">
<h3>{{ _('10 years of documenting your Web.') }}</h3>
<p class="more">{{ _('Celebrate with us') }}</p>
</div>
</a>
</li>
{% endif %}
<li id="promo-12" class="item promo-face">
{{ promo_face(4, 'promo-12') }}
</li>
<li id="promo-13" class="item promo-face">
{{ promo_face(5, 'promo-13') }}
</li>
<li id="promo-14" class="item promo-face">
{{ promo_face(6, 'promo-14') }}
</li>
<li id="promo-15" class="item promo-face">
{{ promo_face(7, 'promo-15') }}
</li>
{% if tweets %}
{% set tweet = tweets[0] %}
<li id="promo-16" class="item promo-small-landscape twt">
<div class="twt-container">
<p class="twt-text" id="twt-body">
{{ format_tweet_body(tweet)|safe }}
<span class="ellipsis" title="{{ tweet.text|safe }}"></span>
</p>
<div class="twt-actions">
<a href="https://twitter.com/{{ tweet.user.screen_name }}" class="twt-account" title="{{ tweet.user.name }}" data-name="Mozilla Tweets Account" data-promotion-id="promo-16" data-promotion-name="Mozilla Tweets {{ tweet.user.name }}" data-promotion-class="promo-small-landscape" data-promotion-type="tile"></a>
<a href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}" class="twt-reply" title="{{ _('Reply') }}" data-name="Mozilla Tweets Reply" data-promotion-id="promo-16" data-promotion-name"Mozilla Tweets Reply" data-promotion-class="promo-small-landscape" data-promotion-type="tile">{{ _('Reply') }}</a>
<a href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}" class="twt-rt" title="{{ _('Retweet') }}" data-name="Mozilla Tweets Retweet" data-promotion-id="promo-16" data-promotion-name="Mozilla Tweets Retweet" data-promotion-class="promo-small-landscape" data-promotion-type="tile">{{ _('Retweet') }}</a>
</div>
</div>
</li>
{% endif %}
{# L10n: End home page promos. #}
</ul>
</div>
<div class="faces-grid-inner"></div>
</section>
<section class="module" id="firefox-download-section">
<div class="container">
<header>
<a href="{{ url('firefox') }}" id="firefox-promo-link">
<h3>{{ high_res_img('home/voices/firefox-logo-wordmark-white.png', {'alt': 'Firefox'}) }}</h3>
{# L10n: <strong> tags below are for visual formatting only. #}
<h4>{{_('Committed to <strong>you, your privacy</strong> and an <strong>open Web</strong>')}}</h4>
</a>
</header>
{{ download_firefox(simple=true) }}
</div>
</section>
<section class="module" id="community">
<div class="container">
<ul>
<li>
<span class="stat contributors">{{ num_mozillians|l10n_format_number }}</span>
{# L10n: This label is preceeded by a numeric count before the translation. #}
{# L10n: Line break below is for visual formatting only. #}
<span>{{ _('active Mozillians <br>worldwide') }}</span>
</li>
<li>
<span class="stat organizations">{{ events_count()|l10n_format_number }}</span>
{# L10n: This label is preceeded by a numeric count before the translation. #}
{# L10n: Line break below is for visual formatting only. #}
<span>{{ _('upcoming events <br>around the globe') }}</span>
</li>
<li>
<span class="stat countries">{{ num_languages|l10n_format_number }}</span>
{# L10n: This label is preceeded by a numeric count before the translation. #}
{# L10n: Line break below is for visual formatting only. #}
<span>{{ _('languages and counting, <br>on every continent') }}</span>
</li>
</ul>
<a class="contribute-btn" href="{{ url('mozorg.contribute') }}" data-link-type="button" data-link-name="Get Involved with Mozilla today">
{{ _('Get Involved with Mozilla today') }}
</a>
</div>
</section>
{% include 'mozorg/home/includes/upcoming-events.html' %}
<section class="module" id="secondary-links">
<div class="container">
<ul>
<li>
<a class="add-ons" rel="external" href="https://addons.mozilla.org/">
<h2>{{ _('Add-ons') }}</h2>
<p>{{ _('Compare prices, check the weather, listen to music, send a tweet and more right from Firefox.') }}</p>
</a>
</li>
<li>
<a class="careers" rel="external" href="https://careers.mozilla.org/">
<h2>{{ _('Careers') }}</h2>
<p>{{ _('Learn about the benefits of working at Mozilla and view open positions around the world.') }}</p>
</a>
</li>
<li>
<a class="help" rel="external" href="https://support.mozilla.org/">
<h2>{{ _('Need help?') }}</h2>
<p>{{ _('Get answers to your questions about Firefox and all Mozilla products from our support team.') }}</p>
</a>
</li>
</ul>
</div>
</section>
{% block newsletter_test %}
<section class="module" id="newsletter-signup" data-ga-label="Get Mozilla updates">
<div class="container">
{% if LANG.startswith('en-') %}
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Get Mozilla updates')) }}
{% else %}
{{ email_newsletter_form() }}
{% endif %}
</div>
</section>
{% endblock %}
<button id="scroll-prompt">{{ _('Discover more') }}</button>
</main>
{% include 'firefox/includes/schemaorg-app.html' %}
{% endblock %}
{% block email_form %}{% endblock %}