зеркало из https://github.com/mozilla/bedrock.git
Bug 1215136 - SmartOn Tracking
* Adds a form-title wrapper and title and subtitle params to the global newsletter macro.
This commit is contained in:
Craig Cook
Родитель
878bff36ec
Коммит
113f3d9b5e
|
|
@ -2,12 +2,22 @@
|
||||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
# 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/. -#}
|
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
|
||||||
|
|
||||||
{% macro mozorg_newsletter_form() %}
|
{% macro mozorg_newsletter_form(title='', subtitle='') %}
|
||||||
{# Note: This form differs from the email_newsletter_form() that appears on most pages;
|
{# Note: This form differs from the email_newsletter_form() that appears on most pages;
|
||||||
The global form submits to bedrock, this one submits to sendto.mozilla.org #}
|
The global form submits to bedrock, this one submits to sendto.mozilla.org #}
|
||||||
<aside>
|
<aside>
|
||||||
<form id="mozorg-newsletter-form" class="billboard footer-newsletter-form newsletter-form" method="post" action="https://sendto.mozilla.org/page/s/sign-up-for-mozilla">
|
<form id="mozorg-newsletter-form" class="billboard footer-newsletter-form newsletter-form" method="post" action="https://sendto.mozilla.org/page/s/sign-up-for-mozilla">
|
||||||
<h3>{{ _('Get Mozilla updates') }}</h3>
|
<div class="form-title">
|
||||||
|
{%- if title -%}
|
||||||
|
<h3>{{ title }}</h3>
|
||||||
|
{%- else -%}
|
||||||
|
<h3>{{ _('Get Mozilla updates') }}</h3>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if subtitle -%}
|
||||||
|
<h4>{{ subtitle }}</h4>
|
||||||
|
{%- endif -%}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-contents">
|
<div class="form-contents">
|
||||||
<div class="field field-email">
|
<div class="field field-email">
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,9 @@
|
||||||
<input type="hidden" name="source_url" value="{{ request.build_absolute_uri() }}">
|
<input type="hidden" name="source_url" value="{{ request.build_absolute_uri() }}">
|
||||||
|
|
||||||
{% if include_title %}
|
{% if include_title %}
|
||||||
<h3>{{ title|d(_('Get Firefox news'), true) }}</h3>
|
<div class="form-title">
|
||||||
|
<h3>{{ title|d(_('Get Firefox news'), true) }}</h3>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="form-contents">
|
<div class="form-contents">
|
||||||
|
|
@ -85,8 +87,10 @@
|
||||||
</form>
|
</form>
|
||||||
<div id="newsletter-form-thankyou" class="thank billboard newsletter-form hidden">
|
<div id="newsletter-form-thankyou" class="thank billboard newsletter-form hidden">
|
||||||
{% if thankyou_content %}
|
{% if thankyou_content %}
|
||||||
|
<div class="form-title">
|
||||||
<h3>{{ thankyou_head }}</h3>
|
<h3>{{ thankyou_head }}</h3>
|
||||||
<p>{{ thankyou_content }}</p>
|
<p>{{ thankyou_content }}</p>
|
||||||
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ email_form_thankyou() }}
|
{{ email_form_thankyou() }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -94,8 +98,10 @@
|
||||||
{% elif use_thankyou %}
|
{% elif use_thankyou %}
|
||||||
<div id="newsletter-form" class="thank billboard newsletter-form footer-newsletter-form">
|
<div id="newsletter-form" class="thank billboard newsletter-form footer-newsletter-form">
|
||||||
{% if thankyou_content %}
|
{% if thankyou_content %}
|
||||||
|
<div class="form-title">
|
||||||
<h3>{{ thankyou_head }}</h3>
|
<h3>{{ thankyou_head }}</h3>
|
||||||
<p>{{ thankyou_content }}</p>
|
<p>{{ thankyou_content }}</p>
|
||||||
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ email_form_thankyou() }}
|
{{ email_form_thankyou() }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -372,6 +372,7 @@ INSTALLED_APPS = (
|
||||||
'bedrock.research',
|
'bedrock.research',
|
||||||
'bedrock.styleguide',
|
'bedrock.styleguide',
|
||||||
'bedrock.tabzilla',
|
'bedrock.tabzilla',
|
||||||
|
'bedrock.teach',
|
||||||
'bedrock.facebookapps',
|
'bedrock.facebookapps',
|
||||||
'bedrock.externalfiles',
|
'bedrock.externalfiles',
|
||||||
'bedrock.security',
|
'bedrock.security',
|
||||||
|
|
|
||||||
|
|
@ -745,6 +745,20 @@ PIPELINE_CSS = {
|
||||||
),
|
),
|
||||||
'output_filename': 'css/security-tld-idn-bundle.css',
|
'output_filename': 'css/security-tld-idn-bundle.css',
|
||||||
},
|
},
|
||||||
|
'smarton': {
|
||||||
|
'source_filenames': (
|
||||||
|
'css/base/mozilla-share-cta.less',
|
||||||
|
'css/base/mozilla-modal.less',
|
||||||
|
'css/teach/smarton.less',
|
||||||
|
),
|
||||||
|
'output_filename': 'css/smarton-bundle.css',
|
||||||
|
},
|
||||||
|
'smarton-ie': {
|
||||||
|
'source_filenames': (
|
||||||
|
'css/teach/smarton-ie.less',
|
||||||
|
),
|
||||||
|
'output_filename': 'css/smarton-ie-bundle.css',
|
||||||
|
},
|
||||||
'styleguide': {
|
'styleguide': {
|
||||||
'source_filenames': (
|
'source_filenames': (
|
||||||
'css/sandstone/fonts.less',
|
'css/sandstone/fonts.less',
|
||||||
|
|
@ -1497,6 +1511,18 @@ PIPELINE_JS = {
|
||||||
),
|
),
|
||||||
'output_filename': 'js/privacy-day-bundle.js',
|
'output_filename': 'js/privacy-day-bundle.js',
|
||||||
},
|
},
|
||||||
|
'smarton': {
|
||||||
|
'source_filenames': (
|
||||||
|
'js/base/mozilla-share-cta.js',
|
||||||
|
'js/base/mozilla-modal.js',
|
||||||
|
'js/base/mozilla-smoothscroll.js',
|
||||||
|
'js/libs/jquery.waypoints.min.js',
|
||||||
|
'js/libs/jquery.waypoints-sticky.min.js',
|
||||||
|
'js/libs/circles.min.js',
|
||||||
|
'js/teach/smarton.js',
|
||||||
|
),
|
||||||
|
'output_filename': 'js/smarton-bundle.js',
|
||||||
|
},
|
||||||
'styleguide': {
|
'styleguide': {
|
||||||
'source_filenames': (
|
'source_filenames': (
|
||||||
'js/styleguide/styleguide.js',
|
'js/styleguide/styleguide.js',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
{# 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/. -#}
|
||||||
|
|
||||||
|
{% from "macros.html" import share_cta with context %}
|
||||||
|
|
||||||
|
{% extends "base-resp.html" %}
|
||||||
|
|
||||||
|
{% add_lang_files "teach/smarton/index" %}
|
||||||
|
|
||||||
|
{% block page_css %}
|
||||||
|
<!--[if !lte IE 8]><!-->
|
||||||
|
{% stylesheet 'smarton' %}
|
||||||
|
<!--<![endif]-->
|
||||||
|
|
||||||
|
<!--[if lte IE 8]>
|
||||||
|
{% stylesheet 'smarton-ie' %}
|
||||||
|
<![endif]-->
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block site_header %}{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
{% block smarton_header %}
|
||||||
|
<header class="smarton-header">
|
||||||
|
<div class="content">
|
||||||
|
{# L10n: <b> element below is for visual formatting, to distinguish the Smart On name from the rest of the text #}
|
||||||
|
<h1 class="series-title">{{ _('Get <b>Smart On</b> the Web') }}</h1>
|
||||||
|
<p class="series-intro">
|
||||||
|
{{ _('The SmartOn Series is like your Internet owner’s manual: the place to learn the most useful intel and tips from Mozilla policy peeps and programmers.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="tabzilla">
|
||||||
|
<a href="{{ url('mozorg.home') }}">Mozilla</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block smarton_content %}{% endblock %}
|
||||||
|
|
||||||
|
<div class="footer-cta" id="footer-cta">
|
||||||
|
<div id="smarton-foot-newsletter" class="foot-newsletter content" data-footer-name="Newsletter signup">
|
||||||
|
{% if LANG.startswith('en') %}
|
||||||
|
{{ mozorg_newsletter_form(title=_('Stay in control'), subtitle=_('Get tips and more from Mozilla')) }}
|
||||||
|
{% else %}
|
||||||
|
{{ email_newsletter_form() }}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="smarton-foot-download" class="foot-download content" data-footer-name="Download Firefox">
|
||||||
|
<h3 class="title">{{ _('Take back control') }}</h3>
|
||||||
|
{{ download_firefox(small=True, icon=False, dom_id="smarton-foot-download") }}
|
||||||
|
<p class="tagline">{{ _('The non-profit browser by Mozilla') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block email_form %}{% endblock %}
|
||||||
|
|
||||||
|
{% block js %}
|
||||||
|
<!--[if !lte IE 8]><!-->
|
||||||
|
{% javascript 'smarton' %}
|
||||||
|
<!--<![endif]-->
|
||||||
|
|
||||||
|
<!--[if IE 9]>
|
||||||
|
{% javascript 'matchmedia_addlistener' %}
|
||||||
|
<![endif]-->
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% macro smarton_navbar(title='', share_text='', twitter_url='', googleplus_url='', facebook_url='' ) -%}
|
||||||
|
<header class="page-header">
|
||||||
|
<div class="content">
|
||||||
|
<div class="series-title">{{ _('SmartOn') }}</div>
|
||||||
|
{%- if title -%}
|
||||||
|
<h1 class="page-title">{{ title }}</h1>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{% set share_urls = { 'twitter': twitter_url, 'googleplus': googleplus_url, 'facebook': facebook_url } -%}
|
||||||
|
{% set cta_text = _('Share') %}
|
||||||
|
{{ share_cta(cta_text, share_urls, share_text, 'head-share', 'mini') }}
|
||||||
|
|
||||||
|
<nav class="nav-steps">
|
||||||
|
{# L10n: <b> elements below are for visual formatting, to distinguish the numeral from the text label #}
|
||||||
|
<ol>
|
||||||
|
<li id="nav-step-ask"><a href="#ask">{{ _('<b>1.</b> Ask') }}</a></li>
|
||||||
|
<li id="nav-step-know"><a href="#know">{{ _('<b>2.</b> Know') }}</a></li>
|
||||||
|
<li id="nav-step-do"><a href="#do">{{ _('<b>3.</b> Do') }}</a></li>
|
||||||
|
<li id="nav-step-chat"><a href="#chat">{{ _('<b>4.</b> Chat') }}</a></li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
{%- endmacro %}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg class="topic-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="370px" height="300px" viewBox="0 0 369 302" overflow="visible" enable-background="new 0 0 370 300"
|
||||||
|
xml:space="preserve">
|
||||||
|
<path fill="#eee" d="M332.778,73.611c10.88-27.083,2.716-59.708-33.932-65.069C232.282-1.208,164.864-4.104,98.372,7.837
|
||||||
|
C29.894,20.136-23.715,78.286,10.738,148.481c5.384,10.965,11.874,20.589,19.115,29.262c-9.8,33.212-1.5,69.191,35.617,97.507
|
||||||
|
c79.2,60.416,271.772,13.364,286.594-80.455c4.681-6.88,8.658-14.508,11.739-23.016C378.118,132.242,360.896,98.513,332.778,73.611z
|
||||||
|
"/>
|
||||||
|
</svg>
|
||||||
|
После Ширина: | Высота: | Размер: 675 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="list-number" xmlns="http://www.w3.org/2000/svg" width="65" height="65" viewBox="0 0 65 65"><path class="circle" fill="#CCC" d="M33.29 59.43h-1.715c-12.8-.8-23.086-8.916-26.172-20.572-1.714-6.17-.914-13.714 1.943-19.885-1.028.23-2.17-.115-2.857-1.03-.915-1.256-.687-2.97.57-3.885C8.49 11.543 12.49 9.372 16.718 8c2.4-1.6 5.03-2.743 7.77-3.43 1.144-.228 2.287.344 2.974 1.258C36.375 5.372 45.517 8 52.49 15.2c3.313 3.428 8.8 10.514 8.57 19.886-.114 6.285-2.743 12-7.657 16.457C48.146 56.57 40.49 59.43 33.29 59.43zM19.23 13.028c-2.286 1.6-4.23 3.657-5.714 6.172-3.2 5.37-4.343 12.57-2.743 18.4C13.29 46.856 21.63 53.37 31.92 53.942c6.284.457 13.142-2.06 17.827-6.286 2.628-2.4 5.715-6.515 5.828-12.457.114-7.314-4.344-13.143-7.086-16-8-8.343-19.43-9.37-29.258-6.172z"/><path class="number" fill="#CCC" d="M32.26 47.886c-.228 0-.57 0-.8-.114-1.486-.457-2.285-1.942-1.828-3.43 1.6-5.37 3.428-13.713 4.228-20.57L30.203 25.6c-.114.114-.23.23-.457.23l-.57.342c-1.372.686-2.973.114-3.66-1.257-.685-1.37-.112-2.97 1.145-3.657l9.03-4.8c.914-.458 1.942-.458 2.743.113.8.573 1.37 1.487 1.257 2.4-.23 8.115-2.63 19.887-4.8 26.857-.344 1.26-1.373 2.06-2.63 2.06z"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="list-number" xmlns="http://www.w3.org/2000/svg" width="65" height="65" viewBox="0 0 65 65"><path class="circle" fill="#CCC" d="M33.265 59.43c-2.17 0-4.342-.23-6.4-.688-7.885-1.6-14.514-6.172-18.628-12.8-4.343-6.972-4.457-16.686-.23-23.77 2.4-4 5.144-7.315 8.46-10.058-.23-.23-.46-.57-.573-.914-.57-1.372 0-3.086 1.486-3.657 3.77-1.6 7.657-2.286 11.543-2.17.8-.23 1.484-.46 2.285-.687 1.258-.343 2.514.23 3.085 1.257 9.485 1.714 17.942 7.085 22.286 12.114 7.427 8.457 7.313 22.743-.114 31.314-5.6 6.4-14.287 10.06-23.2 10.06zm-3.77-48.344c-7.43 2.743-12.687 7.085-16.8 13.942-3.087 5.257-3.087 12.687.228 17.943 3.314 5.373 8.685 9.03 15.085 10.288 9.143 1.828 18.627-1.144 24.342-7.658 5.6-6.398 5.6-17.6.115-24-4.456-4.914-13.712-10.057-22.97-10.514z"/><path class="number" fill="#CCC" d="M42.98 45.258H24.01c-1.03 0-2.06-.572-2.516-1.6-.457-1.03-.343-2.172.343-2.973 3.086-3.77 6.286-7.543 9.258-11.314.113-.228.342-.457.57-.685.57-.686 2.172-2.514 2.514-3.314 0-.113-.23-.342-.343-.342-.457-.457-1.258-.686-1.83-.57-.914.113-1.942.685-2.742 1.37-.23.8-.8 1.487-1.6 1.83l-1.144.457c-1.256.57-2.627.114-3.313-1.028-.686-1.143-.57-2.515.343-3.543 2.172-2.17 4.57-4.23 7.77-4.686 2.172-.343 4.573.343 6.287 1.83 1.485 1.256 2.286 2.97 2.17 4.685 0 2.057-1.713 4.23-3.77 6.743-.23.23-.342.457-.457.57-1.828 2.287-3.656 4.573-5.6 6.858h13.03c1.483 0 2.74 1.257 2.74 2.742.002 1.714-1.254 2.972-2.74 2.972z"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="list-number" xmlns="http://www.w3.org/2000/svg" width="65" height="65" viewBox="0 0 65 65"><path class="circle" fill="#CCC" d="M32.484 47.77c-2.057 0-4-.456-5.714-1.485-2.97-1.715-5.143-4.686-5.6-8.113-.23-1.486.8-2.857 2.4-3.086 1.484-.23 2.856.8 3.084 2.4.23 1.714 1.258 3.2 2.743 4 1.486.8 3.543 1.027 5.485.342 1.83-.57 3.314-1.942 3.543-3.428.23-1.373-.57-2.63-1.485-3.314-1.257-1.03-3.085-1.715-5.028-2.4-1.256-.457-2.057-1.714-1.828-3.085.228-1.37 1.37-2.285 2.742-2.285 1.258 0 2.63-1.03 3.086-2.17.344-1.144 0-2.4-.8-2.973-.915-.572-2.515-.343-3.43.57-1.142 1.03-2.856.916-3.885-.228-1.03-1.143-.915-2.857.23-3.886 2.74-2.514 6.97-2.97 10.056-1.143 3.086 1.943 4.343 6.057 3.086 9.486-.458 1.144-1.03 2.058-1.83 2.972.458.343.915.57 1.258.914 2.63 2.287 3.886 5.486 3.313 8.572-.685 3.313-3.542 6.286-7.312 7.543-1.37.573-2.742.8-4.114.8z"/><path class="number" fill="#CCC" d="M31.913 61.943h-1.83c-9.028-.572-17.143-5.258-22.17-12.916C4.027 42.97 2.998 36.23 4.94 29.37c1.143-4.113 3.314-8.113 6.057-11.656-.57-.343-1.028-.8-1.257-1.372-.572-1.37.114-2.97 1.485-3.657 2.4-.914 4.572-1.714 6.743-2.4 3.886-3.43 8-6.17 11.77-7.886 1.372-.687 2.972-.115 3.658 1.37.687 1.373.114 3.086-1.37 3.658-.572.23-1.03.457-1.6.8 2.056-.114 4.227-.114 6.627 0 10.857.457 20.113 8 23.086 18.857 2.284 8 0 17.485-5.716 24.114-5.597 6.857-13.825 10.743-22.51 10.743zM20.713 15.2c-4.8 4.457-8.8 9.943-10.4 15.657-1.486 5.372-.8 10.4 2.286 15.086 4 6.17 10.513 10.057 17.828 10.514 7.542.457 14.856-2.742 20-8.686 4.457-5.257 6.286-12.913 4.57-19.085-2.398-8.457-9.6-14.4-18.057-14.857-6.285-.456-11.085 0-16.227 1.372z"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 1.6 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="list-number" xmlns="http://www.w3.org/2000/svg" width="65" height="65" viewBox="0 0 65 65"><path class="circle" fill="#CCC" d="M41.94 29.028c-.798 0-1.687 0-2.62.003.607-3.44 1.187-6.88 1.705-10.288.23-1.485-.8-2.857-2.285-3.085-1.485-.23-2.855.8-3.085 2.286-.612 3.724-1.255 7.446-1.92 11.162-.43.01-.857.024-1.28.04-1.83 0-3.657.113-5.372.113l2.058-4.114c.343-.343.687-.8.8-1.257l.115-.57c.457-1.258-.23-2.63-1.486-3.2-1.26-.572-2.744 0-3.43 1.142-1.83 3.084-3.314 6.4-4.57 9.828-.23.912-.115 1.826.342 2.512.457.687 1.257 1.144 2.17 1.144h.23c2.515 0 5.942-.113 9.257-.113h.138c-.655 3.44-1.338 6.873-2.082 10.286-.343 1.485.57 2.856 2.058 3.2.23.113.342.113.57.113 1.145 0 2.286-.8 2.743-2.286.817-3.748 1.582-7.562 2.31-11.387 1.23-.022 2.385-.043 3.405-.043h.23c1.483 0 2.74-1.256 2.74-2.742s-1.254-2.744-2.74-2.744z"/><path class="number" fill="#CCC" d="M31.77 60c-2.058 0-4.114-.23-6.172-.57-10.972-2.287-19.77-10.858-21.486-20.916-1.257-7.885 1.83-17.142 7.43-23.885-1.258.228-2.63-.458-3.087-1.83-.457-1.37.23-2.97 1.714-3.428 4.342-1.486 8.57-2.515 12.8-3.2 3.656-1.486 8.686-2.857 12.228-1.943.688.228 1.372.685 1.715 1.256 10.742 1.142 19.77 7.314 22.628 15.77 3.43 9.944 1.372 20.688-5.6 28.688C48.113 56.457 40.113 60 31.77 60zm-7.543-48.57c-.8.342-1.6.685-2.287 1.142-8.23 4.8-13.942 16.23-12.57 25.144 1.256 7.77 8.457 14.742 17.143 16.457 8.685 1.714 17.256-1.144 23.084-7.657C55.312 40 57.025 31.314 54.17 23.2c-2.742-8.23-12.688-12.458-21.145-12.458h-.23c-2.854 0-5.597.23-8.568.687z"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="callout-bg scribble-lg" xmlns="http://www.w3.org/2000/svg" width="200" height="350" viewBox="0 0 200 350" overflow="visible"><path fill="#eee" d="M199.173 244.3c-2.586-9.62-11.853-15.865-21.745-14.657-4.245.52-8.654 1.11-13.194 1.762 1.744-.84 3.473-1.68 5.184-2.52 7.563-3.703 11.81-11.612 11.125-19.65 5.826-4.56 8.9-12.17 7.264-19.894-.565-2.666-1.638-5.095-3.095-7.206l.14-.082c8.996-5.308 12.394-16.647 7.796-26.027-2.05-4.182-5.38-7.348-9.302-9.23.273-.23.548-.467.82-.7 7.11-6.1 9.032-16.316 4.628-24.583-4.405-8.267-13.956-12.37-22.984-9.872-27.73 7.672-50.765 13.19-72.477 18.213 35.97-11.798 66.494-19.787 74.246-21.77 10.7-2.737 17.157-13.63 14.42-24.332-1.645-6.426-6.23-11.322-11.95-13.615l.688-.27c9.2-3.622 14.377-13.423 12.177-23.063-2.2-9.64-11.12-16.23-20.977-15.495-.672.05-1.353.1-2.047.156 3.438-4.92 4.584-11.28 2.73-17.326C159.84 5.08 151.087-.79 141.655.087c-27.85 2.578-84.836 15.75-114.38 31.342-9.768 5.155-13.507 17.253-8.352 27.022.163.308.333.61.51.907-3.796 2.236-6.923 4.26-9.356 6.087-7.8 5.85-10.245 16.474-5.787 25.145 4.46 8.672 14.522 12.864 23.82 9.923 4.267-1.35 8.427-2.637 12.48-3.864-21.736 16.11-23.092 25.273-23.69 29.323-1.046 7.063 1.753 14.147 7.344 18.588.568.452 1.162.857 1.767 1.24-3.65.933-7.356 1.897-11.146 2.905C4.19 151.545-2.162 162.5.676 173.175c2.84 10.673 13.794 17.027 24.47 14.187 7.91-2.104 15.5-4.032 22.934-5.858-9.235 4.907-19.324 10.25-30.36 16.08-9.17 4.845-13.114 15.893-9.09 25.448 2.302 5.46 6.767 9.397 12.014 11.178-2.214 2.338-3.804 4.473-5.094 6.587-4.194 6.878-3.805 15.482.704 21.903-4.24 9.237-2.677 17.562-1.57 21.262 2.378 7.943 9.27 13.343 17.077 14.16 3.075 7.622 10.63 12.747 19.054 12.5 1.695-.042 3.37-.083 5.03-.122-.832.33-1.646.653-2.434.972-10.245 4.13-15.2 15.783-11.07 26.028 3.143 7.794 10.638 12.526 18.556 12.525 2.49 0 5.022-.468 7.472-1.456 25.733-10.377 78.948-27.852 103.527-33.998 9.405-2.35 15.77-11.108 15.102-20.78s-8.176-17.47-17.814-18.507l-1.113-.12c7.3-2.42 13.933-4.838 19.644-7.276 9.16-3.913 14.045-13.97 11.46-23.59"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 2.0 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="callout-bg scribble-md" xmlns="http://www.w3.org/2000/svg" width="197" height="308" viewBox="0 0 197 308" overflow="visible"><path fill="#eee" d="M172.152 227.208l9.62-5.993c8.44-5.258 11.735-15.916 7.736-25.02-2.013-4.582-5.565-8.07-9.82-10.064 1.83-4.085 2.302-8.8 1.037-13.433-2.788-10.213-13.056-16.487-23.414-14.303l-25.47 5.36c14.573-7.482 29.412-14.493 44.09-21.427 8.903-4.206 13.42-14.266 10.65-23.714-2.2-7.496-8.47-12.838-15.843-14.09 3.982-1.22 8.065-2.43 12.257-3.63 9.977-2.857 16.11-12.87 14.124-23.057S185.682 60.67 175.364 61.78l-5.245.56c-.017-5.56-2.31-10.62-6.043-14.254-3.484-5.496-9.507-9.03-16.124-9.276 9.353-3.348 14.98-13.197 12.768-23.146C158.327 4.882 147.64-1.913 136.86.48c-31.583 7.018-69.287 22.43-98.4 40.22-7.5 4.584-11.127 13.527-8.94 22.04 1.376 5.363 4.86 9.76 9.44 12.382-2.186 1.005-4.373 2.02-6.557 3.06-8.806 4.185-13.31 14.11-10.662 23.494 2.65 9.384 11.677 15.492 21.373 14.455l2.484-.264c-12.415 7.385-24.516 15.242-36.856 23.65-8.33 5.675-11.133 16.662-6.543 25.636s15.143 13.13 24.62 9.695c8.072-2.925 15.576-5.498 22.62-7.77-9.524 7.038-18.696 14.607-27.346 22.822-6.485 6.16-8.092 15.88-3.933 23.8 3.004 5.72 8.486 9.495 14.597 10.46-6.51 5.953-8.396 15.575-4.42 23.615 3.356 6.786 10.14 10.935 17.393 11.13-7.417 5.417-10.238 15.28-6.64 23.87 3.792 9.05 13.59 14.017 23.128 11.717l16.437-3.957c.33 2.244 1.053 4.47 2.193 6.582 3.618 6.697 10.503 10.5 17.615 10.5 3.21 0 6.465-.775 9.488-2.408l74.86-40.437c8.84-4.774 12.765-15.367 9.17-24.75-3.158-8.25-11.257-13.33-19.826-12.815"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="callout-bg scribble-sm" xmlns="http://www.w3.org/2000/svg" width="183" height="218" viewBox="0 0 183 218" overflow="visible"><path fill="#eee" d="M182.303 105.386c-1.48-5.252-4.945-9.43-9.367-11.947 5.98-5.767 7.858-14.765 4.376-22.55-3.916-8.753-13.494-13.488-22.83-11.303l-.006.002c4.026-1.723 8.12-3.424 12.325-5.106 9.74-3.898 14.812-14.66 11.62-24.654-3.193-9.992-13.566-15.82-23.76-13.352l-7.03 1.703c-.058-.61-.143-1.226-.258-1.842C145.35 5.48 134.902-1.682 124.046.342c-34.705 6.47-103.96 41.42-111.74 45.385C5.325 49.282 1.06 56.587 1.4 64.415 1.74 72.242 6.62 79.15 13.88 82.09c.74.298 1.47.578 2.192.84-9.474 7.446-16.54 16.09-16.05 27.2.26 5.948 3.16 11.47 7.907 15.065 4.747 3.594 10.85 4.888 16.645 3.524l.064-.016c-.317 1.896-.368 3.87-.108 5.874.37 2.836 1.314 5.455 2.705 7.756-10.62 10.254-9.963 21.843-9.002 26.896 1.008 5.318 4.13 10 8.652 12.976 2.748 1.808 5.87 2.893 9.08 3.2 1.325 4.747 4.383 8.926 8.708 11.614 5.188 3.225 12.427 5.18 21.65 5.86.058.23.118.458.184.688 2.512 8.78 10.518 14.503 19.218 14.503 1.82 0 3.673-.25 5.51-.775 23.303-6.667 47.963-28.112 50.697-30.535 6.743-5.974 8.51-15.507 4.916-23.32 7.97-4.645 11.833-14.286 8.98-23.304-.544-1.72-1.302-3.32-2.235-4.774l16.118-5.695c9.94-3.51 15.448-14.134 12.59-24.28"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg class="callout-bg scribble-xsm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.3 176.8"><path fill="#eee" d="M203.6 93.9c-1.1-2.8-2.7-5.2-4.8-7.2l.6-.3c8.8-5.2 12.3-16.2 8.1-25.5-3-6.6-9.1-10.8-15.9-11.6 2.8-4.9 3.4-11 1.4-16.7-2-5.4-6-9.4-11-11.6.1-2.7-.3-5.4-1.3-8-3.2-8.6-11.9-13.8-21-12.8-20.8 2.4-85 9.2-132 12.5-11 .7-19.3 10.2-18.5 21.3.5 6.9 4.4 12.7 10 16l-2.6.5C5.7 52.6-1.3 63.1.9 74c.9 4.7 3.4 8.7 6.9 11.5-6.2 4.8-9.3 13.1-7 21.2 2.6 9.4 11.6 15.4 21 14.5-2.2 4.5-2.8 9.8-1.2 14.9 2.4 8 9.5 13.5 17.4 14.3.1.4.2.7.3 1.1 2.1 6.7 7.3 11.4 13.5 13.3 3.1 7.1 10.2 12 18.3 12h1.3c23.6-1.5 96.8-13.6 123.5-39.1 6-5.8 7.9-14.7 4.5-22.4-.1-.1-.1-.2-.2-.3 5.4-5.5 7.2-13.7 4.4-21.1z"/></svg>
|
||||||
|
После Ширина: | Высота: | Размер: 706 B |
|
|
@ -0,0 +1,408 @@
|
||||||
|
{# 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 "teach/smarton/base.html" %}
|
||||||
|
|
||||||
|
{% block page_title %}{{ _('Get smart on tracking') }}{% endblock %}
|
||||||
|
{% block page_desc %}{{ _('What you do online is your business, and you can keep it that way. Get smart on tracking.') }}{% endblock %}
|
||||||
|
{% block page_image %}{{ static('img/teach/smarton/tracking/tracking-hero-high-res.png') }}{% endblock %}
|
||||||
|
|
||||||
|
{% block optimizely %}
|
||||||
|
{% if waffle.switch('smarton-tracking-optimizely') %}
|
||||||
|
{% include 'includes/optimizely.html' %}
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body_id %}smarton-tracking{% endblock %}
|
||||||
|
{% block body_class %}smarton theme-tracking state-default{% endblock %}
|
||||||
|
|
||||||
|
{% block smarton_content %}
|
||||||
|
<article class="main">
|
||||||
|
|
||||||
|
{# Navbar macro. Params: Page title, tweet text, Twitter URL, Facebook URL, Google+ URL #}
|
||||||
|
{{ smarton_navbar(_('Tracking'), _('What you do online is your business, and you can keep it that way. Get smart on tracking.') + ' #SmartOn', 'https://mzl.la/tracking', 'https://www.mozilla.org/teach/smarton/tracking/', 'https://www.mozilla.org/teach/smarton/tracking/') }}
|
||||||
|
|
||||||
|
<section id="ask" class="section section-ask">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<span class="smarton-hero">{{ high_res_img('teach/smarton/tracking/tracking-hero.png', {'alt': '', 'width': '380', 'height': '380'}) }}</span>
|
||||||
|
|
||||||
|
<h2 class="section-title">{{ _('Ask yourself') }}</h2>
|
||||||
|
|
||||||
|
<ol class="big-list">
|
||||||
|
<li>
|
||||||
|
<p>{{ _('Do you feel in control of your personal information online?') }}</p>
|
||||||
|
{% include 'teach/smarton/includes/list-number-1.svg' %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>{{ _('Do you know what a cookie is (no, not the delicious kind)?') }}</p>
|
||||||
|
{% include 'teach/smarton/includes/list-number-2.svg' %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>{{ _('Have you ever wondered why some content, like ads, seems to follow you around?') }}</p>
|
||||||
|
{% include 'teach/smarton/includes/list-number-3.svg' %}
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="know" class="section section-know">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<h2 class="section-title">{{ _('What is tracking?') }}</h2>
|
||||||
|
|
||||||
|
<p class="section-intro">
|
||||||
|
{{ _('Every time we go online, we leave behind traces of our activity. They’re often called our “digital footprints” and for good reason, because tracking is sort of like re-tracing our steps.') }}
|
||||||
|
{{ _('But our digital footprints reveal more about us than where we’ve been — everything from our preferences to our identities.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<figure class="video">
|
||||||
|
<div class="video-wrap">
|
||||||
|
<p class="video-frame">
|
||||||
|
<a class="video-open" href="https://donottrack-doc.com/" title="{{ _('Watch the documentary at donottrack-doc.com.') }}" data-element-id="video-donottrack" data-embed-src="https://episode1.donottrack-doc.com/embed/mozilla">
|
||||||
|
{{ high_res_img('teach/smarton/tracking/donottrackdoc-poster.jpg', {'alt': _('Watch the documentary at donottrack-doc.com.'), 'width': '620', 'height': '349'}) }}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<div id="video-donottrack" class="modal-video-wrap ratio-4x3">
|
||||||
|
<iframe class="modal-video-frame" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<figcaption>
|
||||||
|
<p>
|
||||||
|
{{ _('To get a good look at how tracking works, be sure to check out the first episode of Brett Gaylor’s documentary series, <a href="{url}"><cite>Do Not Track</cite></a>.').format(url='https://donottrack-doc.com/')|safe }}
|
||||||
|
</p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<h3>{{ _('Tracking in action') }}</h3>
|
||||||
|
<p>
|
||||||
|
{{ _('Let’s imagine a typical day online: you start by checking emails, maybe share a fun article you just read.') }}
|
||||||
|
{{ _('At lunch, you check showtimes for a movie a friend recommended on Facebook and look up prices for some new camping gear you’ve had your eye on.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{{ _('That’s only a few sites, but what’s happening behind the scenes is that many more “third-parties” — companies that are separate from the sites you’re visiting — are seeing and recording your activity.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{{ _('So when you begin seeing recommended articles about that movie, or ads for that camping gear, later in the day, it’s no coincidence.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<section class="with-sidebar">
|
||||||
|
<h3>{{ _('Tracking for personalization') }}</h3>
|
||||||
|
<p>
|
||||||
|
{{ _('The websites we visit will often collect data about us to better personalize our experiences with them.') }}
|
||||||
|
{{ _('The information they gather through analytics can be used to make navigating their site easier for us or to present us more relevant offers.') }}
|
||||||
|
{{ _('They also use cookies — small data files placed in our browsers — to remember language preferences or the contents in a shopping cart.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<aside class="note">
|
||||||
|
<p>
|
||||||
|
<em>{{ _('By the way…') }}</em>
|
||||||
|
{{ _('Mozilla sites are no exception. Like most other Web sites, we also use third party tools to improve user experience.') }}
|
||||||
|
{{ _('For more info see our <a href="{url}">Website Privacy Notice</a>.').format(url=url('privacy.notices.websites'))|safe }}
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<h3>{{ _('Tracking without permission') }}</h3>
|
||||||
|
<p>
|
||||||
|
{{ _('Many websites we visit contain hidden third parties — such as data brokers, affiliate networks and advertising networks — who use cookies, and other data tracking methods, to collect information about our browsing habits without our consent.') }}
|
||||||
|
{{ _('While tracking can be helpful, there can’t be a healthy trade-off between the value it provides and the data it collects without transparency.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>{{ _('Going beyond the Web') }}</h3>
|
||||||
|
<p>
|
||||||
|
{{ _('Online tracking is just one part of a larger ecosystem of data collection.') }}
|
||||||
|
{{ _('Within this ecosystem, anonymized online data can be merged with personally identifiable information about you (information that you may have volunteered on a form, in an app or that was collected offline) to build a surprisingly detailed profile of you.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{{ _('These profiles have the potential to interfere with your life offline, and can contribute to unfair practices by being improperly used for price discrimination, decreased creditworthiness, more expensive insurance coverage or unfavorable employment or health reports.') }}
|
||||||
|
{{ _('While these instances are not widespread yet, they do illustrate the potential depths of what is happening behind the scenes and outside of our control.') }}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<section>
|
||||||
|
<h4>{{ _('What are cookies?') }}</h4>
|
||||||
|
<p>{{ _('Cookies are small data files that websites and third parties place on your computer to remember your preferences or to track your activity, sometimes across multiple sites.') }}</p>
|
||||||
|
{% include 'teach/smarton/includes/scribble-md.svg' %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="sidebar-chart">
|
||||||
|
<div id="chart-1" class="chart-stage" data-chart-value="76"></div>
|
||||||
|
<p>
|
||||||
|
<span class="number">76%</span>
|
||||||
|
{# L10n: This fragment follows the number '76%' #}
|
||||||
|
{{ _('of adults say they are “not too confident” or “not at all confident” that records of their activity maintained by the online advertisers who place ads on the websites they visit will remain private and secure.') }}
|
||||||
|
{# L10n: "Pew Research Center" is a proper name and shouldn't be translated #}
|
||||||
|
<cite><a href="https://www.pewinternet.org/2015/05/20/americans-attitudes-about-privacy-security-and-surveillance/">{{ _('(Pew Research Center, May 2015)') }}</a></cite>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="do" class="section section-do">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<h2 class="section-title">{{ _('Be the boss of your personal info') }}</h2>
|
||||||
|
<p class="section-intro">
|
||||||
|
{{ _('There are many ways you can take back and maintain control of your online activity.') }}
|
||||||
|
{{ _('Here are some important tips, hand-picked by Mozilla experts.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<section class="topic with-image">
|
||||||
|
<div class="topic-intro">
|
||||||
|
<h3>{{ _('Think deeper') }}</h3>
|
||||||
|
<p>{{ _('A lot goes on behind the scenes of the Internet. The more you know, the better you can decide what your information is worth to you.') }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="topic-image">{{ high_res_img('teach/smarton/tracking/topic-think-deeper.png', {'alt': '', 'width': '300', 'height': '265'}) }}</span>
|
||||||
|
|
||||||
|
<div class="topic-tips">
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Understand the hidden cost of free') }}</h4>
|
||||||
|
<p>
|
||||||
|
{{ _('We all like the appeal of “free” apps and online services but if you’re not paying for them, someone is, and what they’re buying may be the data you leave behind.') }}
|
||||||
|
{{ _('Decide whether the information you share is worth the service you are receiving.') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Shine a light on trackers') }}</h4>
|
||||||
|
<p>{{ _('If you’re a Firefox user, be sure to check out <a href="{url}">Lightbeam</a>, a simple and insightful add-on that visually graphs the depth of your browsing activity, including parts that are not usually visible to you.').format(url=url('lightbeam.lightbeam'))|safe }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Think before you click') }}</h4>
|
||||||
|
<p>{{ _('When you see an element on a page, such as a “like” or social media login button, that’s an indication that some information has already been collected about you — clicking on it will share even more.') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="topic with-image">
|
||||||
|
<div class="topic-intro">
|
||||||
|
<h3>{{ _('Choose choice') }}</h3>
|
||||||
|
<p>{{ _('It’s easy to overlook the access to personal data that we might offer through online accounts and apps, but most offer settings that give you choice and control.') }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="topic-image">{{ high_res_img('teach/smarton/tracking/topic-choose-choice.png', {'alt': '', 'width': '300', 'height': '310'}) }}</span>
|
||||||
|
|
||||||
|
<div class="topic-tips">
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Delete your unused accounts') }}</h4>
|
||||||
|
<p>
|
||||||
|
{{ _('Your data might get sold when a service or app shuts down.') }}
|
||||||
|
{{ _('If you don’t use it, close it.') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Protect your profiles') }}</h4>
|
||||||
|
<p>
|
||||||
|
{{ _('Some services you interact directly with let you control the information they have about you.') }}
|
||||||
|
{{ _('Look at any opportunity to change or control your profile, if offered.') }}
|
||||||
|
{% trans
|
||||||
|
google='https://www.google.com/ads/preferences',
|
||||||
|
yahoo='https://info.yahoo.com/privacy/us/yahoo/opt_out/targeting/details.html',
|
||||||
|
facebook='https://www.facebook.com/settings?tab=ads&view',
|
||||||
|
acxiom='https://aboutthedata.com/' %}
|
||||||
|
For example, you can manage your profile and preferences for <a href="{{ google }}">Google</a>, <a href="{{ yahoo }}">Yahoo!</a> and <a href="{{ facebook }}">Facebook ads</a>, and even <a href="{{ acxiom }}">edit data that’s been collected about you by Acxiom</a>, one of the world’s largest marketing data brokers.
|
||||||
|
{% endtrans %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Don’t forget about apps') }}</h4>
|
||||||
|
<p>
|
||||||
|
{{ _('Some mobile apps you install can access a lot of information about you, including details not necessarily related to the service they provide.') }}
|
||||||
|
{{ _('Control your privacy and location settings on <a href="{ios}">iOS</a> and <a href="{android}">Android</a>.').format(ios='https://support.apple.com/HT203033', android='https://support.google.com/googleplay/answer/6014972')|safe }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="topic with-image">
|
||||||
|
<div class="topic-intro">
|
||||||
|
<h3>{{ _('Look to your browser') }}</h3>
|
||||||
|
<p>
|
||||||
|
{{ _('Most Web browsers offer a set of privacy features designed to give you control.') }}
|
||||||
|
{{ _('Here are a few key ones that you can make use of.') }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="topic-image">{{ high_res_img('teach/smarton/tracking/topic-browser.png', {'alt': '', 'width': '300', 'height': '260'}) }}</span>
|
||||||
|
|
||||||
|
<div class="topic-tips">
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Do Not Track') }}</h4>
|
||||||
|
<p>
|
||||||
|
{{ _('With this feature enabled, your browser will tell social sharing services, publishers, analytics providers, advertisers and third party networks that you want to opt-out of tracking.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{{ _('Mozilla was the first company to include a Do Not Track feature when it was added to Firefox in 2011.') }}
|
||||||
|
{{ _('Since then, it has been adopted by most major browsers, though many companies on the receiving end of the requests are still not honoring them.') }}
|
||||||
|
{{ _('Efforts are being made by Web advocacy groups to have this changed.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{% trans
|
||||||
|
firefox='https://support.mozilla.org/kb/how-do-i-turn-do-not-track-feature',
|
||||||
|
chrome='https://support.google.com/chrome/answer/2392969',
|
||||||
|
ie='http://windows.microsoft.com/en-us/internet-explorer/ie-do-not-track',
|
||||||
|
egde='http://windows.microsoft.com/en-US/windows-10/edge-privacy-faq',
|
||||||
|
safari='https://support.apple.com/kb/PH19219' %}
|
||||||
|
Learn how to enable Do Not Track in <a href="{{ firefox }}">Firefox</a>, <a href="{{ chrome }}">Chrome</a>, <a href="{{ ie }}">Internet Explorer</a>/<a href="{{ edge }}">Edge</a> and <a href="{{ safari }}">Safari</a>.
|
||||||
|
{% endtrans %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Private Browsing') }}</h4>
|
||||||
|
<p>
|
||||||
|
{{ _('Use Private Browsing to keep from having certain items about your browsing activity locally saved.') }}
|
||||||
|
{{ _('These include your history, searches and cookies.') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>{{ _('Here is how to use private browsing:') }}</p>
|
||||||
|
|
||||||
|
<div class="columns columns-2">
|
||||||
|
<div class="col">
|
||||||
|
<h5>{{ _('Desktop') }}</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://support.mozilla.org/kb/tracking-protection-firefox">Firefox</a></li>
|
||||||
|
<li><a href="https://support.google.com/chrome/answer/95464">Chrome</a></li>
|
||||||
|
<li><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/features/in-private">Internet Explorer</a>/<a href="http://windows.microsoft.com/en-hk/windows-10/browse-inprivate-in-microsoft-edge">Edge</a></li>
|
||||||
|
<li><a href="https://support.apple.com/kb/PH19216">Safari</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<h5>{{ _('Smartphone') }}</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://support.mozilla.org/kb/firefox-android-tracking-protection">{{ _('Firefox for Android') }}</a></li>
|
||||||
|
<li><a href="https://support.google.com/chrome/answer/95464">Chrome</a></li>
|
||||||
|
<li><a href="https://support.apple.com/HT203036">Safari</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<h4>{{ _('Additional privacy settings') }}</h4>
|
||||||
|
<p>{{ _('Many browsers offer a range of privacy settings that will help you stay in control. Explore them here:') }}</p>
|
||||||
|
|
||||||
|
<div class="columns columns-2">
|
||||||
|
<div class="col">
|
||||||
|
<h5>{{ _('Desktop') }}</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://support.mozilla.org/products/firefox/protect-your-privacy">Firefox</a></li>
|
||||||
|
<li><a href="https://support.google.com/chrome/answer/114836">Chrome</a></li>
|
||||||
|
<li><a href="http://www.microsoft.com/security/online-privacy/ie.aspx">Internet Explorer</a>/<a href="http://windows.microsoft.com/en-US/windows-10/edge-privacy-faq">Edge</a></li>
|
||||||
|
<li><a href="https://support.apple.com/kb/PH19250">Safari</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<h5>{{ _('Smartphone') }}</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://support.mozilla.org/products/mobile/protect-your-privacy-firefox-android">{{ _('Firefox for Android') }}</a></li>
|
||||||
|
<li><a href="https://support.google.com/chrome/answer/2392969">Chrome</a></li>
|
||||||
|
<li><a href="https://support.apple.com/HT201265">Safari</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="fx-callout">
|
||||||
|
<div class="intro">
|
||||||
|
<h4>{{ _('Did you know?') }}</h4>
|
||||||
|
<p>{{ _('Firefox is filled with features designed to give you even more control over your personal information.') }}</p>
|
||||||
|
{% include 'teach/smarton/includes/scribble-xsm.svg' %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="feature feature-private">
|
||||||
|
<h5>{{ _('Private Browsing with Tracking Protection') }}</h5>
|
||||||
|
<p>
|
||||||
|
{{ _('This feature minimizes the ability of hidden third parties to track your browsing activity across many sites.') }}
|
||||||
|
<a href="{{ url('firefox.private-browsing') }}">{{ _('Give it a try!') }}</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="feature feature-forget">
|
||||||
|
<h5>{{ _('Forget Button') }}</h5>
|
||||||
|
<p>{{ _('This toolbar option <a href="{url}">removes browsing information from your computer after the fact</a>. Use it when you’ve visited a site that you don’t want in your history.').format(url='https://support.mozilla.org/kb/forget-button-quickly-delete-your-browsing-history')|safe }}</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="feature feature-addons">
|
||||||
|
<h5>{{ _('Privacy Add-ons') }}</h5>
|
||||||
|
<p>{{ _('The Mozilla privacy team has put together <a href="{url}">a collection of Firefox add-ons</a> to help you manage your privacy online.').format(url='https://addons.mozilla.org/firefox/collections/mozilla/privacy/')|safe }}</p>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="chat" class="section section-chat">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<h2 class="section-title">{{ _('Share your tracking smarts') }}</h2>
|
||||||
|
<p class="section-intro">
|
||||||
|
{{ _('Now that you have some tools and the knowledge to protect yourself, spread the word to friends.') }}
|
||||||
|
{{ _('The more everybody knows about tracking and how to protect their online data, the better off we’ll all be. Feel free to use the questions below to keep the conversation going!') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ol class="big-list with-sidebar">
|
||||||
|
<li>
|
||||||
|
<p>
|
||||||
|
<span class="chat-question">{{ _('What privacy settings do you use in your browser?') }}</span>
|
||||||
|
<span class="tweet-this">
|
||||||
|
<a class="button-tweet" href="{{ 'https://www.twitter.com/intent/tweet?url=%s&text=%s%s'|format('https://mzl.la/tracking'|urlencode, _('What privacy settings do you use in your browser?')|urlencode, ' #SmartOn'|urlencode)|e }}">{{ _('Tweet this') }}</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{% include 'teach/smarton/includes/list-number-1.svg' %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>
|
||||||
|
<span class="chat-question">{{ _('How much are you willing to share about yourself in exchange for personalized content?') }}</span>
|
||||||
|
<span class="tweet-this">
|
||||||
|
<a class="button-tweet" href="{{ 'https://www.twitter.com/intent/tweet?url=%s&text=%s%s'|format('https://mzl.la/tracking'|urlencode, _('How much are you willing to share about yourself in exchange for personalized content?')|urlencode, ' #SmartOn'|urlencode)|e }}">{{ _('Tweet this') }}</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{% include 'teach/smarton/includes/list-number-2.svg' %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>
|
||||||
|
<span class="chat-question">{{ _('Have you ever used private browsing?') }}</span>
|
||||||
|
<span class="tweet-this">
|
||||||
|
<a class="button-tweet" href="{{ 'https://www.twitter.com/intent/tweet?url=%s&text=%s%s'|format('https://mzl.la/tracking'|urlencode, _('Have you ever used private browsing?')|urlencode, ' #SmartOn'|urlencode)|e }}">{{ _('Tweet this') }}</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{% include 'teach/smarton/includes/list-number-3.svg' %}
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<section>
|
||||||
|
<p>{{ _('Connect with your community to explore topics related to privacy and tracking by joining or starting a <a href="{url}">Mozilla Club</a>.').format(url='https://teach.mozilla.org/clubs/')|safe }}</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p>{{ _('Are you a teacher? Give your students <a href="{url}">a simple lesson on tracking</a>.').format(url='https://teach.mozilla.org/activities/privacy-basics')|safe }}</p>
|
||||||
|
</section>
|
||||||
|
{% include 'teach/smarton/includes/scribble-md.svg' %}
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# 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/.
|
||||||
|
|
||||||
|
|
||||||
|
from bedrock.redirects.util import redirect
|
||||||
|
from bedrock.mozorg.util import page
|
||||||
|
from waffle.decorators import waffle_switch
|
||||||
|
|
||||||
|
|
||||||
|
urlpatterns = (
|
||||||
|
# There will eventually be a main education landing page
|
||||||
|
# but we'll redirect until then.
|
||||||
|
redirect(r'^teach/$', 'teach.smarton.tracking', name='teach'),
|
||||||
|
|
||||||
|
# There will eventually be a main SmartOn landing page
|
||||||
|
# but we'll redirect until then.
|
||||||
|
redirect(r'^teach/smarton$', 'teach.smarton.tracking', name='smarton'),
|
||||||
|
|
||||||
|
# SmartOn
|
||||||
|
page('teach/smarton/tracking', 'teach/smarton/tracking.html',
|
||||||
|
decorators=waffle_switch('tracking-protection')),
|
||||||
|
|
||||||
|
)
|
||||||
|
|
@ -40,6 +40,7 @@ urlpatterns = (
|
||||||
url(r'', include('bedrock.mozorg.urls')),
|
url(r'', include('bedrock.mozorg.urls')),
|
||||||
url(r'', include('bedrock.newsletter.urls')),
|
url(r'', include('bedrock.newsletter.urls')),
|
||||||
url(r'', include('bedrock.research.urls')),
|
url(r'', include('bedrock.research.urls')),
|
||||||
|
url(r'', include('bedrock.teach.urls')),
|
||||||
|
|
||||||
# L10n example.
|
# L10n example.
|
||||||
url(r'^l10n_example/',
|
url(r'^l10n_example/',
|
||||||
|
|
|
||||||
|
|
@ -723,3 +723,6 @@ RewriteRule ^(/rhino(/.*)?)$ /b$1 [PT]
|
||||||
|
|
||||||
# Bug 730488 deprecate /firefox/all-older.html
|
# Bug 730488 deprecate /firefox/all-older.html
|
||||||
RewriteRule ^(/(?:\w{2,3}(?:-\w{2})?/)?firefox/all-older\.html)$ /b$1 [PT]
|
RewriteRule ^(/(?:\w{2,3}(?:-\w{2})?/)?firefox/all-older\.html)$ /b$1 [PT]
|
||||||
|
|
||||||
|
# bug 1188572
|
||||||
|
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?teach(/?|/.+)$ /b/$1teach$2 [PT]
|
||||||
|
|
|
||||||
|
|
@ -263,7 +263,7 @@
|
||||||
.border-box();
|
.border-box();
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
h3,
|
.form-title,
|
||||||
.form-submit,
|
.form-submit,
|
||||||
.form-contents {
|
.form-contents {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -309,7 +309,8 @@
|
||||||
.span_narrow(5);
|
.span_narrow(5);
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
h3,
|
|
||||||
|
.form-title,
|
||||||
.form-submit,
|
.form-submit,
|
||||||
.form-contents {
|
.form-contents {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -358,7 +359,8 @@
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
h3,
|
|
||||||
|
.form-title,
|
||||||
.form-submit,
|
.form-submit,
|
||||||
.form-contents {
|
.form-contents {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
|
||||||
|
|
@ -231,6 +231,7 @@ a.go {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
||||||
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit {
|
.form-submit {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -239,8 +240,6 @@ a.go {
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
width: auto;
|
|
||||||
float: none;
|
|
||||||
.font-size(40px);
|
.font-size(40px);
|
||||||
color: #bee1f5;
|
color: #bee1f5;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
|
|
||||||
|
|
@ -281,7 +281,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3 {
|
.form-title {
|
||||||
.span(4);
|
.span(4);
|
||||||
.offset(2);
|
.offset(2);
|
||||||
}
|
}
|
||||||
|
|
@ -496,7 +496,7 @@ html[dir="rtl"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3 {
|
.form-title {
|
||||||
.span_narrow(4);
|
.span_narrow(4);
|
||||||
.offset_narrow(1);
|
.offset_narrow(1);
|
||||||
}
|
}
|
||||||
|
|
@ -612,7 +612,7 @@ html[dir="rtl"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3,
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit {
|
.form-submit {
|
||||||
.span-all();
|
.span-all();
|
||||||
|
|
|
||||||
|
|
@ -442,9 +442,7 @@ main[data-active="email-only"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3 {
|
.form-title,
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.form-contents {
|
.form-contents {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
@ -532,9 +530,7 @@ main[data-active="email-only"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3 {
|
.form-title,
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
.form-contents {
|
.form-contents {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -685,10 +685,13 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
h3 {
|
.form-title {
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
padding: (@baseLine * 2) 0;
|
padding: (@baseLine * 2) 0;
|
||||||
color: @textColorSecondary;
|
color: @textColorSecondary;
|
||||||
.font-size(46px);
|
.font-size(46px);
|
||||||
|
|
@ -993,7 +996,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
|
|
||||||
#mozorg-newsletter-form,
|
#mozorg-newsletter-form,
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3 {
|
.form-title {
|
||||||
float: none;
|
float: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: (@baseLine * 2) 0;
|
padding: (@baseLine * 2) 0;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
width: (@gridColumnWidth * 8) + (@gridGutterWidth * 7);
|
width: (@gridColumnWidth * 8) + (@gridGutterWidth * 7);
|
||||||
|
|
||||||
h3 {
|
.form-title {
|
||||||
float: none;
|
float: none;
|
||||||
margin: 0 auto @baseLine auto;
|
margin: 0 auto @baseLine auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
h3 {
|
.form-title {
|
||||||
margin: 0 10px @baseLine 10px;
|
margin: 0 10px @baseLine 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
|
||||||
|
|
@ -539,7 +539,7 @@ img {
|
||||||
padding-bottom: @baseLine;
|
padding-bottom: @baseLine;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
h3 {
|
.form-title {
|
||||||
.span(4);
|
.span(4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -871,7 +871,7 @@ nav.menu-bar {
|
||||||
.newsletter-form {
|
.newsletter-form {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
h3 {
|
.form-title {
|
||||||
.span(4);
|
.span(4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -908,7 +908,7 @@ nav.menu-bar {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
h3,
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit {
|
.form-submit {
|
||||||
.transition(opacity .2s ease-in-out);
|
.transition(opacity .2s ease-in-out);
|
||||||
|
|
@ -919,7 +919,7 @@ nav.menu-bar {
|
||||||
|
|
||||||
.html-rtl {
|
.html-rtl {
|
||||||
.newsletter-form {
|
.newsletter-form {
|
||||||
h3,
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit,
|
.form-submit,
|
||||||
.field-privacy input {
|
.field-privacy input {
|
||||||
|
|
@ -934,7 +934,7 @@ nav.menu-bar {
|
||||||
.newsletter-form.thank {
|
.newsletter-form.thank {
|
||||||
display: none;
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
h3 {
|
.form-title {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -1130,8 +1130,9 @@ nav.menu-bar {
|
||||||
.offset_narrow(1);
|
.offset_narrow(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-newsletter-form, #newsletter-form {
|
.footer-newsletter-form,
|
||||||
h3 {
|
#newsletter-form {
|
||||||
|
.form-title {
|
||||||
.span_narrow(4);
|
.span_narrow(4);
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -1348,8 +1349,9 @@ nav.menu-bar {
|
||||||
margin: -25px 0 @baseLine;
|
margin: -25px 0 @baseLine;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-newsletter-form, #newsletter-form {
|
.footer-newsletter-form,
|
||||||
h3,
|
#newsletter-form {
|
||||||
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit {
|
.form-submit {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -1365,7 +1367,7 @@ nav.menu-bar {
|
||||||
.html-rtl {
|
.html-rtl {
|
||||||
.footer-newsletter-form,
|
.footer-newsletter-form,
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3,
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit {
|
.form-submit {
|
||||||
float: none;
|
float: none;
|
||||||
|
|
|
||||||
|
|
@ -619,12 +619,13 @@ nav.menu-bar {
|
||||||
/* }}} */
|
/* }}} */
|
||||||
/* {{{ Footer Email Form */
|
/* {{{ Footer Email Form */
|
||||||
|
|
||||||
.footer-newsletter-form, #newsletter-form {
|
.footer-newsletter-form,
|
||||||
|
#newsletter-form {
|
||||||
padding-top: @baseLine;
|
padding-top: @baseLine;
|
||||||
padding-bottom: @baseLine;
|
padding-bottom: @baseLine;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
h3 {
|
.form-title {
|
||||||
.span(3);
|
.span(3);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -657,7 +658,7 @@ nav.menu-bar {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
h3,
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit {
|
.form-submit {
|
||||||
.transition(opacity .2s ease-in-out);
|
.transition(opacity .2s ease-in-out);
|
||||||
|
|
@ -669,7 +670,7 @@ nav.menu-bar {
|
||||||
.html-rtl {
|
.html-rtl {
|
||||||
.footer-newsletter-form,
|
.footer-newsletter-form,
|
||||||
#newsletter-form {
|
#newsletter-form {
|
||||||
h3,
|
.form-title,
|
||||||
.form-contents,
|
.form-contents,
|
||||||
.form-submit,
|
.form-submit,
|
||||||
.field-privacy input {
|
.field-privacy input {
|
||||||
|
|
@ -684,7 +685,7 @@ nav.menu-bar {
|
||||||
.newsletter-form.thank {
|
.newsletter-form.thank {
|
||||||
display: none;
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
h3 {
|
.form-title {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.section,
|
||||||
|
.content {
|
||||||
|
zoom: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabzilla {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smarton-header .content {
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-video-wrap {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 76 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 19 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,266 @@
|
||||||
|
/* 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/. */
|
||||||
|
|
||||||
|
;(function($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var $document = $(document);
|
||||||
|
var $body = $('body');
|
||||||
|
|
||||||
|
if (window.isFirefox()) {
|
||||||
|
$body.addClass('is-firefox');
|
||||||
|
} else {
|
||||||
|
$body.addClass('not-firefox');
|
||||||
|
}
|
||||||
|
|
||||||
|
var tallMode = false;
|
||||||
|
var wideMode = false;
|
||||||
|
|
||||||
|
if (typeof matchMedia !== 'undefined') {
|
||||||
|
// Check window height
|
||||||
|
var queryTall = matchMedia('(min-height: 650px)');
|
||||||
|
if (queryTall.matches) {
|
||||||
|
tallMode = true;
|
||||||
|
} else {
|
||||||
|
tallMode = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
queryTall.addListener(function(mq) {
|
||||||
|
if (mq.matches) {
|
||||||
|
tallMode = true;
|
||||||
|
} else {
|
||||||
|
tallMode = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check window width
|
||||||
|
var queryWide = matchMedia('(min-width: 760px)');
|
||||||
|
if (queryWide.matches) {
|
||||||
|
wideMode = true;
|
||||||
|
} else {
|
||||||
|
wideMode = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
queryWide.addListener(function(mq) {
|
||||||
|
if (mq.matches) {
|
||||||
|
wideMode = true;
|
||||||
|
} else {
|
||||||
|
wideMode = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up the sticky header
|
||||||
|
var $pageHeader = $('.page-header');
|
||||||
|
|
||||||
|
if (($pageHeader.length > 0) && wideMode) {
|
||||||
|
var stickyHeader = new Waypoint.Sticky({
|
||||||
|
element: $pageHeader,
|
||||||
|
offset: -16
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up the sticky footer
|
||||||
|
var $doSection = $('#do');
|
||||||
|
var $pageFooter = $('#footer-cta');
|
||||||
|
var buttonClose = '<button type="button" class="close" title="'+ window.trans('global-close') +'">'+ window.trans('global-close') +'</button>';
|
||||||
|
|
||||||
|
if (($pageFooter.length > 0) && tallMode) {
|
||||||
|
// Stick the footer when we're near the end of the page
|
||||||
|
var stickyFooter = new Waypoint({
|
||||||
|
element: $doSection,
|
||||||
|
offset: '-80%',
|
||||||
|
handler: function(direction) {
|
||||||
|
if ((direction === 'down') && (!$body.hasClass('footer-closed'))) {
|
||||||
|
// slide up when scrolling down
|
||||||
|
$pageFooter.addClass('stuck').append(buttonClose).css({ bottom: '-' + $pageFooter.height() + 'px' }).animate({ bottom: '0' }, 750);
|
||||||
|
initFooterClose();
|
||||||
|
} else if ((direction === 'up') && (!$body.hasClass('footer-closed'))) {
|
||||||
|
// slide down when scrolling up, then unstick
|
||||||
|
$pageFooter.animate({ bottom: '-' + $pageFooter.height() + 'px' }, 500, function() {
|
||||||
|
$pageFooter.removeClass('stuck').removeAttr('style').find('button.close').remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Unstick the footer when we reach the bottom
|
||||||
|
var unstickyFooter = new Waypoint({
|
||||||
|
element: $('#colophon'),
|
||||||
|
offset: '100%',
|
||||||
|
handler: function(direction) {
|
||||||
|
if ((direction === 'down') && (!$body.hasClass('footer-closed'))) {
|
||||||
|
$pageFooter.removeClass('stuck').find('button.close').remove();
|
||||||
|
} else if ((direction === 'up') && (!$body.hasClass('footer-closed'))) {
|
||||||
|
$pageFooter.addClass('stuck').append(buttonClose);
|
||||||
|
initFooterClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dismiss the sticky footer
|
||||||
|
function initFooterClose() {
|
||||||
|
var footerVisible = $('#footer-cta > .content:visible').data('footer-name');
|
||||||
|
var footerDetails = $('.footer-cta #form-details, .footer-cta .form-details');
|
||||||
|
|
||||||
|
$('.footer-cta .close').on('click', function() {
|
||||||
|
if (tallMode && wideMode) {
|
||||||
|
$pageFooter.animate({ bottom: '-' + $pageFooter.height() + 'px' }, 500, function() {
|
||||||
|
$pageFooter.removeClass('stuck').removeAttr('style').find('.close').remove();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$pageFooter.removeClass('stuck').removeAttr('style').find('.close').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close the form if it's open
|
||||||
|
if (footerDetails.is(':visible')) {
|
||||||
|
footerDetails.slideUp('fast');
|
||||||
|
}
|
||||||
|
|
||||||
|
// A class lets us check if the footer was dismissed on purpose
|
||||||
|
// so we don't show it again during scrolling
|
||||||
|
$body.addClass('footer-closed');
|
||||||
|
|
||||||
|
// Track it and record which one was visible
|
||||||
|
window.dataLayer.push({
|
||||||
|
'event': 'smarton-interactions',
|
||||||
|
'interaction': 'dismiss sticky footer',
|
||||||
|
'footer': footerVisible
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll smoothly to the linked section
|
||||||
|
$document.on('click', '.nav-steps a[href^="#"]', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
// Extract the target element's ID from the link's href.
|
||||||
|
var elem = $(this).attr('href').replace(/.*?(#.*)/g, '$1');
|
||||||
|
var offset = $(elem).offset().top;
|
||||||
|
|
||||||
|
if (tallMode && wideMode) {
|
||||||
|
offset = $(elem).offset().top - $pageHeader.height();
|
||||||
|
} else {
|
||||||
|
offset = $(elem).offset().top;
|
||||||
|
}
|
||||||
|
|
||||||
|
Mozilla.smoothScroll({
|
||||||
|
top: offset
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Change the navbar current item to match the section waypoint
|
||||||
|
function navState(current, previous) {
|
||||||
|
return function(direction) {
|
||||||
|
if (direction === 'down') {
|
||||||
|
$pageHeader.find('.nav-steps li').removeClass();
|
||||||
|
$('#nav-step-' + current).addClass('current');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$pageHeader.find('.nav-steps li').removeClass();
|
||||||
|
$('#nav-step-' + previous).addClass('current');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($pageHeader.length > 0) {
|
||||||
|
//Fire the waypoints for each section, passing classes for the current and previous sections
|
||||||
|
$('#ask').waypoint(navState('ask', 'ask'), { offset: $pageHeader.height() + 10 });
|
||||||
|
$('#know').waypoint(navState('know', 'ask'), { offset: $pageHeader.height() + 10 });
|
||||||
|
$('#do').waypoint(navState('do', 'know'), { offset: $pageHeader.height() + 10 });
|
||||||
|
$('#chat').waypoint(navState('chat', 'do'), { offset: $pageHeader.height() + 10 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw animated SVG pie charts
|
||||||
|
// Requires /libs/circles.min.js - http://lugolabs.com/circles
|
||||||
|
function drawCircle(circleId, circleVal) {
|
||||||
|
Circles.create({
|
||||||
|
id: circleId,
|
||||||
|
value: circleVal,
|
||||||
|
radius: 70,
|
||||||
|
maxValue: 100,
|
||||||
|
width: 12,
|
||||||
|
text: function(value) {return value + '%';},
|
||||||
|
duration: 850,
|
||||||
|
wrpClass: 'circles-wrap',
|
||||||
|
textClass: 'circles-text',
|
||||||
|
valueStrokeClass: 'circles-valueStroke',
|
||||||
|
maxValueStrokeClass: 'circles-maxValueStroke',
|
||||||
|
styleWrapper: false,
|
||||||
|
styleText: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger the chart when it scrolls into view
|
||||||
|
$('.sidebar-chart').each(function() {
|
||||||
|
var stage = $(this).children('.chart-stage');
|
||||||
|
var circleId = stage.attr('id');
|
||||||
|
var circleVal = stage.data('chart-value');
|
||||||
|
var chart = new Waypoint({
|
||||||
|
element: stage,
|
||||||
|
handler: function(direction) {
|
||||||
|
if (direction === 'down') {
|
||||||
|
drawCircle(circleId, circleVal);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
offset: '100%'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Play videos in a modal
|
||||||
|
$('a.video-open').attr('role', 'button').on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var $this = $(this);
|
||||||
|
var embedSrc = $this.data('embed-src');
|
||||||
|
var embedWrap = $('#' + $this.data('element-id'));
|
||||||
|
|
||||||
|
Mozilla.Modal.createModal(this, embedWrap, {
|
||||||
|
title: '',
|
||||||
|
onCreate: function() {
|
||||||
|
embedWrap.find('.modal-video-frame').attr('src', embedSrc);
|
||||||
|
},
|
||||||
|
onDestroy: function() {
|
||||||
|
embedWrap.find('.modal-video-frame').removeAttr('src');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Track the click and record the video ID
|
||||||
|
window.dataLayer.push({
|
||||||
|
'event': 'smarton-interactions',
|
||||||
|
'interaction': 'video modal open',
|
||||||
|
'video': $this.data('element-id')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Track user scrolling through each section down the page
|
||||||
|
$('.main .section').each(function() {
|
||||||
|
var sectionId = $(this).attr('id');
|
||||||
|
var waypoint = new Waypoint({
|
||||||
|
element: $(this),
|
||||||
|
handler: function(direction) {
|
||||||
|
if (direction === 'down') {
|
||||||
|
window.dataLayer.push({
|
||||||
|
'event': 'smarton-interactions',
|
||||||
|
'interaction': 'scroll',
|
||||||
|
'section': sectionId
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
offset: '100%'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Track which questions get tweeted
|
||||||
|
$('.section-chat .button-tweet').on('click', function() {
|
||||||
|
var question = $(this).parents('li').find('.chat-question').text();
|
||||||
|
window.dataLayer.push({
|
||||||
|
'event': 'smarton-interactions',
|
||||||
|
'interaction': 'tweet this question',
|
||||||
|
'question': question
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
})(window.jQuery);
|
||||||
|
|
||||||
Загрузка…
Ссылка в новой задаче