зеркало из https://github.com/mozilla/bedrock.git
Alex Gibson
Craig Cook
Родитель
3e20a46f5b
Коммит
df77b2e6c6
|
|
@ -1,344 +0,0 @@
|
|||
{# 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-protocol.html" import feature_card with context %}
|
||||
{% from "macros.html" import fxa_email_form, fxa_link_fragment, fxa_cta_link, google_play_button with context %}
|
||||
|
||||
{% extends "firefox/base-protocol.html" %}
|
||||
|
||||
{% block page_title %}{{ _('Get a Firefox Account – Keep your data private, safe and synced') }}{% endblock %}
|
||||
{% block page_desc %}
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}
|
||||
{{ _('Securely sync your passwords, bookmarks and tabs across all your devices. Get a Firefox Account now – One login – Power and privacy everywhere.') }}
|
||||
{% else %}
|
||||
{{ _('Securely sync your passwords, bookmarks and tabs across all your devices. Get a Firefox Account now – One log-in – Power and privacy everywhere.') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('firefox_accounts_2018') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
{% with hide_nav_download_button=True %}
|
||||
{% include 'includes/protocol/navigation/index.html' %}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="mzp-c-hero mzp-has-image mzp-t-firefox mzp-t-product-firefox">
|
||||
<div class="mzp-l-content">
|
||||
<div class="mzp-c-hero-body">
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}
|
||||
<h1 class="mzp-c-hero-title">{{ _('One login. Power and privacy everywhere.') }}</h1>
|
||||
{% else %}
|
||||
<h1 class="mzp-c-hero-title">{{ _('One log-in. Power and privacy everywhere.') }}</h1>
|
||||
{% endif %}
|
||||
<div id="hero-cta" class="mzp-c-hero-cta">
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_cta_link(entrypoint='mozilla.org-accounts_page', account_id='features-hero-account', action='signup', button_text=_('Create a Firefox Account'), button_class='mzp-c-button mzp-t-primary mzp-t-product', campaign='fxa-benefits-page', content='accounts-page-top-cta', medium='referral', source='accounts-page') }}
|
||||
</div>
|
||||
<div class="show-fxa-supported-signed-in">
|
||||
<button class="mzp-c-button mzp-t-product" type="button" id="fx-modal" data-button-name="download the firefox app" data-cta-position="primary cta">{{ _('Download the Firefox App') }}</button>
|
||||
</div>
|
||||
<div class="show-fxa-ios">
|
||||
<a class="mzp-c-button mzp-t-secondary" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{ _('Set up Sync for iOS') }}</a>
|
||||
</div>
|
||||
{# L10n: Line break below for visual formatting only. #}
|
||||
<div class="show-fxa-android">
|
||||
<a class="mzp-c-button mzp-t-secondary" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{ _('Set up Sync on your <br>Android device') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mzp-c-hero-image">
|
||||
{{ high_res_img('firefox/accounts/fxa-hero-img.png', {'alt': '', 'width': '1200', 'height': '770'}) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="mzp-l-content">
|
||||
<h2 id="subtitle">{{ _('Own your life on every device with a Firefox Account.') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="mzp-l-content">
|
||||
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}
|
||||
{% call feature_card(
|
||||
title=_('Share files safely – and privately'),
|
||||
image_url='firefox/accounts/fxa-fxsend.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-right-half mzp-t-firefox',
|
||||
ga_title='Try Firefox Send'
|
||||
) %}
|
||||
<p>{{ _('Send docs and videos — anything up to 2.5 GB — with a private, encrypted link that ‘self-destructs’ when you say so. And since your large files get deleted from the cloud when you’re done sharing, your stuff doesn’t hang around online forever.') }}</p>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://send.firefox.com/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=fxa-features-nonfx&utm_content=try-send&entrypoint=mozilla.org-fxa.features" data-link-name="Try Firefox Send" data-link-type="button">{{ _('Try Firefox Send') }}</a>
|
||||
{% endcall %}
|
||||
{% endif %}
|
||||
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
{% set lockwise_title = _('Remember your passwords in Lockwise') %}
|
||||
{% set lockwise_ga_title = 'Get the Lockwise App' %}
|
||||
{% else %}
|
||||
{% set lockwise_title = _('Remember your passwords in Lockbox') %}
|
||||
{% set lockwise_ga_title = 'Get the Lockbox App' %}
|
||||
{% endif %}
|
||||
|
||||
{% call feature_card(
|
||||
title=lockwise_title,
|
||||
image_url='firefox/accounts/fxa-lockwise.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-left-half mzp-t-firefox lockwise-card qr-modal',
|
||||
ga_title=lockwise_ga_title
|
||||
) %}
|
||||
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
<p>{{ _('No more getting locked out of apps and websites. Lockwise secures all the passwords you’ve saved in Firefox and gives you easy access across all your Android and iOS devices.') }}</p>
|
||||
{% elif l10n_has_tag('firefox_send_20190420') %}
|
||||
<p>{{ _('No more getting locked out of apps and websites. Lockbox secures all the passwords you’ve saved in Firefox and gives you easy access across all your Android and iOS devices.') }}</p>
|
||||
{% else %}
|
||||
<p>{{ _('No more getting locked out of apps and websites. Lockbox secures all the passwords you’ve saved in Firefox and gives you easy access across all your iOS devices.') }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://app.adjust.com/kq8zhhz" data-link-name="Get the Lockwise App" data-link-type="button">
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
{{ _('Get the Lockwise App') }}
|
||||
{% else %}
|
||||
{{ _('Get the Lockbox App') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-content">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=lockwise_adjust_url('android', 'accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ lockwise_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Send tabs instantly to your devices'),
|
||||
image_url='firefox/accounts/fxa-send.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-right-half mzp-t-firefox'
|
||||
) %}
|
||||
<p>
|
||||
{{ _('Send an open tab on one device to all your others with a single tap. Much easier than texting or emailing yourself those links.') }}
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}<strong class="show-fxa-not-fx">{{ _('Only in Firefox.') }}</strong>{% endif %}
|
||||
</p>
|
||||
<div class="show-fxa-not-fx features-download">
|
||||
{{ download_firefox(download_location='primary cta', button_color='mzp-c-button mzp-t-secondary mzp-t-product') }}
|
||||
</div>
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_cta_link(entrypoint='mozilla.org-accounts_page', action='signup', button_text=_('Create a Firefox Account'), button_class='mzp-c-button mzp-t-secondary mzp-t-product', campaign='fxa-benefits-page', content='accounts-page-top-cta', medium='referral', source='accounts-page') }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Sync your bookmarks everywhere'),
|
||||
image_url='firefox/accounts/fxa-sync.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-left-half mzp-t-firefox bookmarks-card'
|
||||
) %}
|
||||
<p>
|
||||
{{ _('Bookmark a recipe at home. Check it at the market from your phone. Every bookmark you save is instantly added to all your synced devices.') }}
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}<strong class="show-fxa-not-fx">{{ _('Only in Firefox.') }}</strong>{% endif %}
|
||||
</p>
|
||||
<div class="show-fxa-not-fx features-download">
|
||||
{{ download_firefox(dom_id='sync-download', download_location='primary cta', button_color='mzp-c-button mzp-t-secondary mzp-t-product') }}
|
||||
</div>
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_cta_link(entrypoint='mozilla.org-accounts_page', action='signup', button_text=_('Create a Firefox Account'), button_class='mzp-c-button mzp-t-secondary mzp-t-product', campaign='fxa-benefits-page', content='accounts-page-top-cta', medium='referral', source='accounts-page') }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Put quality content in your Pocket'),
|
||||
image_url='firefox/accounts/fxa-pocket.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-right-half mzp-t-firefox pocket-card qr-modal',
|
||||
ga_title='Get the Pocket App'
|
||||
) %}
|
||||
<p>{{ _('Discover the web’s best content, and absorb it anytime – even offline – on any device. Pocket’s listen feature will even read any article aloud to you. All from the Firefox toolbar.') }}</p>
|
||||
|
||||
<div>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://getpocket.com" data-link-name="Get the Pocket App" data-link-type="button">{{ _('Get the Pocket App') }}</a>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-content">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=pocket_adjust_url('android', 'accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ pocket_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Pick up where you left off with Notes'),
|
||||
image_url='firefox/accounts/fxa-notes.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-left-half mzp-t-firefox notes-card qr-modal',
|
||||
ga_title='Get the Notes App'
|
||||
) %}
|
||||
<p>{{ _('Your ideas and inspiration are secure and encrypted with Notes – and when you’re signed into your Account, they sync from your desktop to your Android devices.') }}</p>
|
||||
|
||||
<div>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes" data-link-name="Get the Notes App" data-link-type="button">{{ _('Get the Notes App') }}</a>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-content">
|
||||
<li class="android">
|
||||
{{ google_play_button(href='https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes') }}
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
</div>
|
||||
|
||||
<aside class="fxa-benefits mzp-u-modal-content">
|
||||
<p class="mobile-title mobile-pocket">{{ _('Scan the QR Code to download the Pocket App on your mobile device.') }}</p>
|
||||
<p class="mobile-title mobile-lockwise">
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
{{ _('Scan the QR Code to download the Lockwise App on your mobile device.') }}
|
||||
{% else %}
|
||||
{{ _('Scan the QR Code to download the Lockbox App on your mobile device.') }}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="mobile-title mobile-notes">
|
||||
{%- if l10n_has_tag('accounts_2018_qrcodes') -%}
|
||||
{{ _('Scan the QR Code to download the Notes App on your Android device.') }}
|
||||
{%- else -%}
|
||||
{{ _('Scan the QR Code to download the Notes App on your mobile device.') }}
|
||||
{%- endif -%}
|
||||
</p>
|
||||
<p id="fx-qr-title" class="mobile-title mobile-fx">{{ _('Scan the QR Code to download the Firefox App on your mobile device.') }}</p>
|
||||
<div class="mzp-l-content">
|
||||
<div id="qr-code"></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div id="fx-app-buttons" class="show-fxa-supported-signed-in">
|
||||
<ul class="mobile-download-buttons">
|
||||
<li>
|
||||
{{ google_play_button(id=android_id, extra_data_attributes={'download-location': button_location}) }}
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ firefox_ios_url(app_store_campaign) }}" data-link-type="download" data-download-os="iOS" data-download-location="primary cta" id="fxa-ff-ios-modal">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="mobile-download-buttons mobile-pocket">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=pocket_adjust_url('android', 'accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ pocket_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="mobile-download-buttons mobile-lockwise">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=lockwise_adjust_url('android','accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ lockwise_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="mobile-download-buttons mobile-notes">
|
||||
<li class="android">
|
||||
{{ google_play_button(href='https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes') }}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section id="bottom-banner">
|
||||
<div class="mzp-l-content">
|
||||
<header class="banner-title">
|
||||
<h2>{{ _('You deserve peace of mind everywhere.') }}</h2>
|
||||
</header>
|
||||
|
||||
<div class="banner-cta">
|
||||
|
||||
<div class="fxa-cta show-fxa-supported-signed-in show-fxa-supported-signed-out">
|
||||
<div class="show-fxa-supported-signed-in">
|
||||
<ul class="mobile-download-buttons" id="bottom-banner-mobile">
|
||||
<li>
|
||||
{{ google_play_button(id=android_id, extra_data_attributes={'download-location': 'secondary cta'}) }}
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ firefox_ios_url(app_store_campaign) }}" data-link-type="download" data-download-os="iOS" data-download-location="secondary cta" id="fxa-ff-ios">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_email_form(
|
||||
entrypoint='mozilla.org-accounts_page',
|
||||
utm_source='accounts_page',
|
||||
button_class='mzp-c-button mzp-t-primary mzp-t-product',
|
||||
button_text=_('Create an Account'))
|
||||
}}
|
||||
|
||||
<p class="fxa-signin">{{ _('Already have an account?') }} <a {{ fxa_link_fragment(entrypoint='mozilla.org-accounts_page', action='signin', utm_params={'campaign': 'fxa-embedded-form', 'content': '/firefox/accounts/', 'source': 'accounts-page'}) }} class="js-fxa-cta-link">{{ _('Sign In') }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-buttons">
|
||||
<p class="show-fxa-ios">
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-dark" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{ _('Set up Sync for iOS') }}</a>
|
||||
</p>
|
||||
|
||||
{# L10n: Line break below for visual formatting only. #}
|
||||
<p class="show-fxa-android">
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-dark" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{ _('Set up Sync on your <br>Android device') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="show-fxa-not-fx show-fxa-unsupported show-fxa-default features-download">
|
||||
<div class="download-firefox">
|
||||
{{ download_firefox(dom_id='accounts-bottom', download_location='secondary cta', button_color='mzp-c-button mzp-t-primary mzp-t-product') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js_bundle('firefox_accounts_2018') }}
|
||||
{% endblock %}
|
||||
|
|
@ -1,63 +1,342 @@
|
|||
{# 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/. -#}
|
||||
# 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 fxa_email_form with context %}
|
||||
{% from "macros-protocol.html" import feature_card with context %}
|
||||
{% from "macros.html" import fxa_email_form, fxa_link_fragment, fxa_cta_link, google_play_button with context %}
|
||||
|
||||
{% extends "firefox/base-pebbles.html" %}
|
||||
{% extends "firefox/base-protocol.html" %}
|
||||
|
||||
{% block page_title_prefix %}{{_('Get a Firefox Account')}}{% endblock %}
|
||||
{% block page_title %}{% endblock %}
|
||||
{% block page_desc %}{{_('Get easy access to your bookmarks, passwords, tabs and more from any computer or mobile device running Firefox.')}}{% endblock %}
|
||||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('firefox_accounts') }}
|
||||
{% block page_title %}{{ _('Get a Firefox Account – Keep your data private, safe and synced') }}{% endblock %}
|
||||
{% block page_desc %}
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}
|
||||
{{ _('Securely sync your passwords, bookmarks and tabs across all your devices. Get a Firefox Account now – One login – Power and privacy everywhere.') }}
|
||||
{% else %}
|
||||
{{ _('Securely sync your passwords, bookmarks and tabs across all your devices. Get a Firefox Account now – One log-in – Power and privacy everywhere.') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_class %}firefox-accounts state-fxa-default {% endblock %}
|
||||
{% block page_css %}
|
||||
{{ css_bundle('firefox_accounts') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
{% with hide_nav_download_button=True %}
|
||||
{% include 'includes/protocol/navigation/index.html' %}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main role="main">
|
||||
<div class="content">
|
||||
<header class="top-header">
|
||||
<div class="header-logos">
|
||||
<h2><a class="firefox" href="{{ url('firefox') }}">{{ high_res_img('logos/firefox/logo-quantum-wordmark-white.png', {'alt': 'Firefox', 'width': '159', 'height': '50'}) }}</a></h2>
|
||||
<h2><a class="mozilla" href="{{ url('mozorg.home') }}"><img src="{{ static('img/logos/mozilla/wordmark-dark.svg')}}" alt="Mozilla" width="101" height="34"></a></h2>
|
||||
</div>
|
||||
<h1>{{_('Sign up, sign in, stay in sync.')}}</h1>
|
||||
</header>
|
||||
<div class="main-content">
|
||||
<div class="main-copy">
|
||||
<p class="tagline">{{_('With a Firefox Account, you can get all your bookmarks, passwords, open tabs and more — everywhere you use Firefox.')}}</p>
|
||||
<ol class="sign-up-instructions show-fxa-supported-signed-out">
|
||||
<li>{{_('Sign up for a Firefox Account')}}</li>
|
||||
<li>{{_('Sign in everywhere you use Firefox')}}</li>
|
||||
<li>{{_('Sync what you want')}}</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="fxa-cta show-fxa-supported-signed-in show-fxa-supported-signed-out">
|
||||
<p class="show-fxa-supported-signed-in signed-in">{{_('You’re signed in and ready to start using Sync.')}}</p>
|
||||
|
||||
<section class="mzp-c-hero mzp-has-image mzp-t-firefox mzp-t-product-firefox">
|
||||
<div class="mzp-l-content">
|
||||
<div class="mzp-c-hero-body">
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}
|
||||
<h1 class="mzp-c-hero-title">{{ _('One login. Power and privacy everywhere.') }}</h1>
|
||||
{% else %}
|
||||
<h1 class="mzp-c-hero-title">{{ _('One log-in. Power and privacy everywhere.') }}</h1>
|
||||
{% endif %}
|
||||
<div id="hero-cta" class="mzp-c-hero-cta">
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_email_form(entrypoint='mozilla.org-accounts_page', utm_source='accounts_page', utm_params={'campaign': 'fxa-embedded-form', 'content': 'accounts-page', 'medium': 'referral'}) }}
|
||||
{{ fxa_cta_link(entrypoint='mozilla.org-accounts_page', account_id='features-hero-account', action='signup', button_text=_('Create a Firefox Account'), button_class='mzp-c-button mzp-t-primary mzp-t-product', campaign='fxa-benefits-page', content='accounts-page-top-cta', medium='referral', source='accounts-page') }}
|
||||
</div>
|
||||
<div class="show-fxa-supported-signed-in">
|
||||
<button class="mzp-c-button mzp-t-product" type="button" id="fx-modal" data-button-name="download the firefox app" data-cta-position="primary cta">{{ _('Download the Firefox App') }}</button>
|
||||
</div>
|
||||
<div class="show-fxa-ios">
|
||||
<a class="mzp-c-button mzp-t-secondary" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{ _('Set up Sync for iOS') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-ctas">
|
||||
<span class="show-fxa-ios">
|
||||
<a class="button button-hollow button-light" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{_('Set up Sync for iOS')}}</a>
|
||||
</span>
|
||||
{# L10n: Line break below for visual formatting only. #}
|
||||
<span class="show-fxa-android">
|
||||
<a class="button button-hollow button-light" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{_('Set up Sync on your <br>Android device')}}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="download-firefox show-fxa-not-fx show-fxa-unsupported show-fxa-default">
|
||||
<p class="show-fxa-not-fx show-fxa-default">{{_('Download Firefox to start using Sync.')}}</p>
|
||||
<p class="show-fxa-unsupported ">{{_('Get the latest Firefox to start using Sync.')}}</p>
|
||||
{{ download_firefox() }}
|
||||
<div class="show-fxa-android">
|
||||
<a class="mzp-c-button mzp-t-secondary" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{ _('Set up Sync on your <br>Android device') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="mzp-c-hero-image">
|
||||
{{ high_res_img('firefox/accounts/fxa-hero-img.png', {'alt': '', 'width': '1200', 'height': '770'}) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="mzp-l-content">
|
||||
<h2 id="subtitle">{{ _('Own your life on every device with a Firefox Account.') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="mzp-l-content">
|
||||
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}
|
||||
{% call feature_card(
|
||||
title=_('Share files safely – and privately'),
|
||||
image_url='firefox/accounts/fxa-fxsend.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-right-half mzp-t-firefox',
|
||||
ga_title='Try Firefox Send'
|
||||
) %}
|
||||
<p>{{ _('Send docs and videos — anything up to 2.5 GB — with a private, encrypted link that ‘self-destructs’ when you say so. And since your large files get deleted from the cloud when you’re done sharing, your stuff doesn’t hang around online forever.') }}</p>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://send.firefox.com/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=fxa-features-nonfx&utm_content=try-send&entrypoint=mozilla.org-fxa.features" data-link-name="Try Firefox Send" data-link-type="button">{{ _('Try Firefox Send') }}</a>
|
||||
{% endcall %}
|
||||
{% endif %}
|
||||
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
{% set lockwise_title = _('Remember your passwords in Lockwise') %}
|
||||
{% set lockwise_ga_title = 'Get the Lockwise App' %}
|
||||
{% else %}
|
||||
{% set lockwise_title = _('Remember your passwords in Lockbox') %}
|
||||
{% set lockwise_ga_title = 'Get the Lockbox App' %}
|
||||
{% endif %}
|
||||
|
||||
{% call feature_card(
|
||||
title=lockwise_title,
|
||||
image_url='firefox/accounts/fxa-lockwise.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-left-half mzp-t-firefox lockwise-card qr-modal',
|
||||
ga_title=lockwise_ga_title
|
||||
) %}
|
||||
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
<p>{{ _('No more getting locked out of apps and websites. Lockwise secures all the passwords you’ve saved in Firefox and gives you easy access across all your Android and iOS devices.') }}</p>
|
||||
{% elif l10n_has_tag('firefox_send_20190420') %}
|
||||
<p>{{ _('No more getting locked out of apps and websites. Lockbox secures all the passwords you’ve saved in Firefox and gives you easy access across all your Android and iOS devices.') }}</p>
|
||||
{% else %}
|
||||
<p>{{ _('No more getting locked out of apps and websites. Lockbox secures all the passwords you’ve saved in Firefox and gives you easy access across all your iOS devices.') }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://app.adjust.com/kq8zhhz" data-link-name="Get the Lockwise App" data-link-type="button">
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
{{ _('Get the Lockwise App') }}
|
||||
{% else %}
|
||||
{{ _('Get the Lockbox App') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-content">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=lockwise_adjust_url('android', 'accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ lockwise_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Send tabs instantly to your devices'),
|
||||
image_url='firefox/accounts/fxa-send.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-right-half mzp-t-firefox'
|
||||
) %}
|
||||
<p>
|
||||
{{ _('Send an open tab on one device to all your others with a single tap. Much easier than texting or emailing yourself those links.') }}
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}<strong class="show-fxa-not-fx">{{ _('Only in Firefox.') }}</strong>{% endif %}
|
||||
</p>
|
||||
<div class="show-fxa-not-fx features-download">
|
||||
{{ download_firefox(download_location='primary cta', button_color='mzp-c-button mzp-t-secondary mzp-t-product') }}
|
||||
</div>
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_cta_link(entrypoint='mozilla.org-accounts_page', action='signup', button_text=_('Create a Firefox Account'), button_class='mzp-c-button mzp-t-secondary mzp-t-product', campaign='fxa-benefits-page', content='accounts-page-top-cta', medium='referral', source='accounts-page') }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Sync your bookmarks everywhere'),
|
||||
image_url='firefox/accounts/fxa-sync.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-left-half mzp-t-firefox bookmarks-card'
|
||||
) %}
|
||||
<p>
|
||||
{{ _('Bookmark a recipe at home. Check it at the market from your phone. Every bookmark you save is instantly added to all your synced devices.') }}
|
||||
{% if l10n_has_tag('firefox_send_20190420') %}<strong class="show-fxa-not-fx">{{ _('Only in Firefox.') }}</strong>{% endif %}
|
||||
</p>
|
||||
<div class="show-fxa-not-fx features-download">
|
||||
{{ download_firefox(dom_id='sync-download', download_location='primary cta', button_color='mzp-c-button mzp-t-secondary mzp-t-product') }}
|
||||
</div>
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_cta_link(entrypoint='mozilla.org-accounts_page', action='signup', button_text=_('Create a Firefox Account'), button_class='mzp-c-button mzp-t-secondary mzp-t-product', campaign='fxa-benefits-page', content='accounts-page-top-cta', medium='referral', source='accounts-page') }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Put quality content in your Pocket'),
|
||||
image_url='firefox/accounts/fxa-pocket.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-right-half mzp-t-firefox pocket-card qr-modal',
|
||||
ga_title='Get the Pocket App'
|
||||
) %}
|
||||
<p>{{ _('Discover the web’s best content, and absorb it anytime – even offline – on any device. Pocket’s listen feature will even read any article aloud to you. All from the Firefox toolbar.') }}</p>
|
||||
|
||||
<div>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://getpocket.com" data-link-name="Get the Pocket App" data-link-type="button">{{ _('Get the Pocket App') }}</a>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-content">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=pocket_adjust_url('android', 'accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ pocket_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call feature_card(
|
||||
title=_('Pick up where you left off with Notes'),
|
||||
image_url='firefox/accounts/fxa-notes.png',
|
||||
include_highres_image=True,
|
||||
aspect_ratio='mzp-has-aspect-1-1',
|
||||
class='mzp-l-card-feature-left-half mzp-t-firefox notes-card qr-modal',
|
||||
ga_title='Get the Notes App'
|
||||
) %}
|
||||
<p>{{ _('Your ideas and inspiration are secure and encrypted with Notes – and when you’re signed into your Account, they sync from your desktop to your Android devices.') }}</p>
|
||||
|
||||
<div>
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-product" href="https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes" data-link-name="Get the Notes App" data-link-type="button">{{ _('Get the Notes App') }}</a>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-content">
|
||||
<li class="android">
|
||||
{{ google_play_button(href='https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes') }}
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
</div>
|
||||
|
||||
<aside class="fxa-benefits mzp-u-modal-content">
|
||||
<p class="mobile-title mobile-pocket">{{ _('Scan the QR Code to download the Pocket App on your mobile device.') }}</p>
|
||||
<p class="mobile-title mobile-lockwise">
|
||||
{% if l10n_has_tag('lockwise_update_201906') %}
|
||||
{{ _('Scan the QR Code to download the Lockwise App on your mobile device.') }}
|
||||
{% else %}
|
||||
{{ _('Scan the QR Code to download the Lockbox App on your mobile device.') }}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="mobile-title mobile-notes">
|
||||
{%- if l10n_has_tag('accounts_2018_qrcodes') -%}
|
||||
{{ _('Scan the QR Code to download the Notes App on your Android device.') }}
|
||||
{%- else -%}
|
||||
{{ _('Scan the QR Code to download the Notes App on your mobile device.') }}
|
||||
{%- endif -%}
|
||||
</p>
|
||||
<p id="fx-qr-title" class="mobile-title mobile-fx">{{ _('Scan the QR Code to download the Firefox App on your mobile device.') }}</p>
|
||||
<div class="mzp-l-content">
|
||||
<div id="qr-code"></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div id="fx-app-buttons" class="show-fxa-supported-signed-in">
|
||||
<ul class="mobile-download-buttons">
|
||||
<li>
|
||||
{{ google_play_button(id=android_id, extra_data_attributes={'download-location': button_location}) }}
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ firefox_ios_url(app_store_campaign) }}" data-link-type="download" data-download-os="iOS" data-download-location="primary cta" id="fxa-ff-ios-modal">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="mobile-download-buttons mobile-pocket">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=pocket_adjust_url('android', 'accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ pocket_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="mobile-download-buttons mobile-lockwise">
|
||||
<li class="android">
|
||||
{{ google_play_button(href=lockwise_adjust_url('android','accounts-page')) }}
|
||||
</li>
|
||||
<li class="ios">
|
||||
<a href="{{ lockwise_adjust_url('ios', 'accounts-page') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="mobile-download-buttons mobile-notes">
|
||||
<li class="android">
|
||||
{{ google_play_button(href='https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes') }}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section id="bottom-banner">
|
||||
<div class="mzp-l-content">
|
||||
<header class="banner-title">
|
||||
<h2>{{ _('You deserve peace of mind everywhere.') }}</h2>
|
||||
</header>
|
||||
|
||||
<div class="banner-cta">
|
||||
|
||||
<div class="fxa-cta show-fxa-supported-signed-in show-fxa-supported-signed-out">
|
||||
<div class="show-fxa-supported-signed-in">
|
||||
<ul class="mobile-download-buttons" id="bottom-banner-mobile">
|
||||
<li>
|
||||
{{ google_play_button(id=android_id, extra_data_attributes={'download-location': 'secondary cta'}) }}
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ firefox_ios_url(app_store_campaign) }}" data-link-type="download" data-download-os="iOS" data-download-location="secondary cta" id="fxa-ff-ios">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="show-fxa-supported-signed-out">
|
||||
{{ fxa_email_form(
|
||||
entrypoint='mozilla.org-accounts_page',
|
||||
utm_source='accounts_page',
|
||||
button_class='mzp-c-button mzp-t-primary mzp-t-product',
|
||||
button_text=_('Create an Account'))
|
||||
}}
|
||||
|
||||
<p class="fxa-signin">{{ _('Already have an account?') }} <a {{ fxa_link_fragment(entrypoint='mozilla.org-accounts_page', action='signin', utm_params={'campaign': 'fxa-embedded-form', 'content': '/firefox/accounts/', 'source': 'accounts-page'}) }} class="js-fxa-cta-link">{{ _('Sign In') }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-buttons">
|
||||
<p class="show-fxa-ios">
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-dark" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{ _('Set up Sync for iOS') }}</a>
|
||||
</p>
|
||||
|
||||
{# L10n: Line break below for visual formatting only. #}
|
||||
<p class="show-fxa-android">
|
||||
<a class="mzp-c-button mzp-t-secondary mzp-t-dark" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{ _('Set up Sync on your <br>Android device') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="show-fxa-not-fx show-fxa-unsupported show-fxa-default features-download">
|
||||
<div class="download-firefox">
|
||||
{{ download_firefox(dom_id='accounts-bottom', download_location='secondary cta', button_color='mzp-c-button mzp-t-primary mzp-t-product') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
|
|
|
|||
|
|
@ -1099,3 +1099,20 @@ class TestFirefoxHome(TestCase):
|
|||
render_mock.assert_called_once_with(
|
||||
req, 'firefox/home/index.html', {'show_newsletter': False, 'variation': 'b'}
|
||||
)
|
||||
|
||||
|
||||
class TestAccountsPage(TestCase):
|
||||
@patch('bedrock.firefox.views.l10n_utils.render')
|
||||
def test_accounts_page_2019(self, render_mock):
|
||||
req = RequestFactory().get('/firefox/accounts/')
|
||||
req.locale = 'en-US'
|
||||
views.firefox_accounts(req)
|
||||
render_mock.assert_called_once_with(req, 'firefox/accounts-2019.html', ANY)
|
||||
|
||||
@patch('bedrock.firefox.views.l10n_utils.render')
|
||||
@patch.object(views, 'lang_file_is_active', lambda *x: False)
|
||||
def test_accounts_page_legacy(self, render_mock):
|
||||
req = RequestFactory().get('/firefox/accounts/')
|
||||
req.locale = 'fr'
|
||||
views.firefox_accounts(req)
|
||||
render_mock.assert_called_once_with(req, 'firefox/accounts.html', ANY)
|
||||
|
|
|
|||
|
|
@ -958,8 +958,6 @@ def firefox_accounts(request):
|
|||
|
||||
if lang_file_is_active('firefox/accounts-2019', locale):
|
||||
template_name = 'firefox/accounts-2019.html'
|
||||
elif lang_file_is_active('firefox/accounts-2018', locale):
|
||||
template_name = 'firefox/accounts-2018.html'
|
||||
else:
|
||||
template_name = 'firefox/accounts.html'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,267 +0,0 @@
|
|||
// 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/.
|
||||
|
||||
$font-path: '/media/fonts';
|
||||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/feature-card';
|
||||
@import '../../protocol/css/components/hero';
|
||||
@import '../../protocol/css/components/modal';
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
@include text-display-md;
|
||||
margin: 0 auto;
|
||||
max-width: $content-md;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Custom Protocol
|
||||
// Hero
|
||||
|
||||
.mzp-c-hero-title {
|
||||
margin-bottom: $spacing-2xl;
|
||||
}
|
||||
|
||||
.mzp-c-call-out {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
// Cards
|
||||
.mzp-c-card-feature-content {
|
||||
.mzp-c-card-feature-title {
|
||||
@include text-display-md;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.state-fxa-not-fx strong.show-fxa-not-fx {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// FXA Form
|
||||
|
||||
.fxa-benefits {
|
||||
display: none;
|
||||
|
||||
.mzp-c-modal-window & {
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Modal, custom styles
|
||||
|
||||
.mobile-notes,
|
||||
.mobile-lockwise,
|
||||
.mobile-pocket {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mzp-c-modal-inner {
|
||||
@media #{$mq-md} {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media #{$mq-lg} {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header h2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mzp-c-modal-overlay-contents {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
|
||||
.mobile-title {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.mobile-download-buttons {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// QR codes
|
||||
|
||||
#qr-code {
|
||||
height: 300px;
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.lockwise {
|
||||
background: url('/media/img/firefox/accounts/lockwise-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.notes {
|
||||
background: url('/media/img/firefox/accounts/notes-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.pocket {
|
||||
background: url('/media/img/firefox/accounts/pocket-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.fx-qr {
|
||||
background: url('/media/img/firefox/accounts/fx-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Bottom Banner
|
||||
|
||||
#bottom-banner {
|
||||
@include light-links;
|
||||
background: $color-purple-90;
|
||||
@include background-size(cover);
|
||||
color: $color-white;
|
||||
padding: $spacing-md 0;
|
||||
|
||||
.banner-title h2 {
|
||||
@include text-display-lg;
|
||||
margin: 0 0 $spacing-lg;
|
||||
}
|
||||
|
||||
.mobile-download-buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fxa-email-form {
|
||||
color: $color-white;
|
||||
max-width: $content-sm;
|
||||
|
||||
.fxa-email-form-intro {
|
||||
@include text-display-xs;
|
||||
font-weight: bold;
|
||||
|
||||
strong {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='email'] {
|
||||
@include border-box;
|
||||
@include text-body-md;
|
||||
border-radius: 2px;
|
||||
padding: ($spacing-md - 2px) ($spacing-xl - 2px); //2px extra padding removed to compensate for 2px border.
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
@include text-body-xs;
|
||||
}
|
||||
|
||||
label {
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fxa-signin {
|
||||
@include text-body-sm;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
@media #{$mq-md} {
|
||||
#bottom-banner {
|
||||
.mzp-l-content {
|
||||
@include grid-column-gap($spacing-xl);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-cta {
|
||||
grid-column: 2;
|
||||
max-width: $content-sm;
|
||||
}
|
||||
|
||||
.mzp-c-button-download-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
#bottom-banner .mzp-l-content {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Conditional
|
||||
|
||||
html.ios,
|
||||
html.android {
|
||||
.mzp-c-card-feature-content .mobile-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-notes,
|
||||
.mobile-lockwise,
|
||||
.mobile-pocket {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lockwise-card .mzp-c-button,
|
||||
.pocket-card .mzp-c-button,
|
||||
.notes-card .mzp-c-button,
|
||||
#fxa-sign-up-form,
|
||||
#fxa-account-button,
|
||||
.mzp-c-cta-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fxa-account-button,
|
||||
.show-fxa-supported-signed-in.fxa-app-buttons {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.show-fxa-android > .mzp-c-button {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -2,238 +2,266 @@
|
|||
// 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/.
|
||||
|
||||
@import '../pebbles/includes/lib';
|
||||
@import '../hubs/sections';
|
||||
@import '../quantum/common';
|
||||
$font-path: '/media/fonts';
|
||||
$image-path: '/media/protocol/img';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Common elements
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/feature-card';
|
||||
@import '../../protocol/css/components/hero';
|
||||
@import '../../protocol/css/components/modal';
|
||||
|
||||
main {
|
||||
background: #003eaa;
|
||||
background: url('/media/img/firefox/accounts/tail.png') top -350px center no-repeat,
|
||||
linear-gradient(to bottom, #003eaa 0%, #00b0ff 100%);
|
||||
color: #fff;
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Top header logos
|
||||
|
||||
.top-header {
|
||||
#subtitle {
|
||||
@include text-display-md;
|
||||
margin: 0 auto;
|
||||
max-width: $content-md;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size-level2;
|
||||
margin: 40px 0;
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Custom Protocol
|
||||
// Hero
|
||||
|
||||
.mzp-c-hero-title {
|
||||
margin-bottom: $spacing-2xl;
|
||||
}
|
||||
|
||||
.mzp-c-call-out {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
// Cards
|
||||
.mzp-c-card-feature-content {
|
||||
.mzp-c-card-feature-title {
|
||||
@include text-display-md;
|
||||
}
|
||||
|
||||
.header-logos {
|
||||
margin-bottom: 20px;
|
||||
.mobile-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mozilla {
|
||||
.state-fxa-not-fx strong.show-fxa-not-fx {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// FXA Form
|
||||
|
||||
.fxa-benefits {
|
||||
display: none;
|
||||
|
||||
.mzp-c-modal-window & {
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Modal, custom styles
|
||||
|
||||
h1 {
|
||||
margin: 40px 0 80px;
|
||||
.mobile-notes,
|
||||
.mobile-lockwise,
|
||||
.mobile-pocket {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mzp-c-modal-inner {
|
||||
@media #{$mq-md} {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media #{$mq-lg} {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header h2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mzp-c-modal-overlay-contents {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
|
||||
.mobile-title {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.header-logos {
|
||||
@include clearfix;
|
||||
|
||||
.firefox {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mozilla {
|
||||
display: block;
|
||||
float: right;
|
||||
.mobile-download-buttons {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[dir="rtl"] .top-header {
|
||||
@media #{$mq-desktop} {
|
||||
.header-logos {
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// QR codes
|
||||
|
||||
.firefox {
|
||||
float: right;
|
||||
#qr-code {
|
||||
height: 300px;
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.lockwise {
|
||||
background: url('/media/img/firefox/accounts/lockwise-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.notes {
|
||||
background: url('/media/img/firefox/accounts/notes-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.pocket {
|
||||
background: url('/media/img/firefox/accounts/pocket-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.fx-qr {
|
||||
background: url('/media/img/firefox/accounts/fx-qr.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Bottom Banner
|
||||
|
||||
#bottom-banner {
|
||||
@include light-links;
|
||||
background: $color-purple-90;
|
||||
@include background-size(cover);
|
||||
color: $color-white;
|
||||
padding: $spacing-md 0;
|
||||
|
||||
.banner-title h2 {
|
||||
@include text-display-lg;
|
||||
margin: 0 0 $spacing-lg;
|
||||
}
|
||||
|
||||
.mobile-download-buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fxa-email-form {
|
||||
color: $color-white;
|
||||
max-width: $content-sm;
|
||||
|
||||
.fxa-email-form-intro {
|
||||
@include text-display-xs;
|
||||
font-weight: bold;
|
||||
|
||||
strong {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='email'] {
|
||||
@include border-box;
|
||||
@include text-body-md;
|
||||
border-radius: 2px;
|
||||
padding: ($spacing-md - 2px) ($spacing-xl - 2px); //2px extra padding removed to compensate for 2px border.
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
@include text-body-xs;
|
||||
}
|
||||
|
||||
label {
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fxa-signin {
|
||||
@include text-body-sm;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
@media #{$mq-md} {
|
||||
#bottom-banner {
|
||||
.mzp-l-content {
|
||||
@include grid-column-gap($spacing-xl);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.mozilla {
|
||||
float: left;
|
||||
.banner-title {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-cta {
|
||||
grid-column: 2;
|
||||
max-width: $content-sm;
|
||||
}
|
||||
|
||||
.mzp-c-button-download-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
#bottom-banner .mzp-l-content {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Main page content container
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Conditional
|
||||
|
||||
.main-content {
|
||||
@include clearfix;
|
||||
margin-bottom: 100px;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Main page copy
|
||||
|
||||
.main-copy {
|
||||
@include background-size(280px, 122px);
|
||||
background-image: url('/media/img/firefox/accounts/sync-devices.png');
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
padding-top: 140px;
|
||||
text-align: center;
|
||||
|
||||
.tagline {
|
||||
@include font-size-level4;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
list-style-position: inside;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
@include background-size(350px, 153px);
|
||||
background-position: top left;
|
||||
float: left;
|
||||
max-width: 513px;
|
||||
padding-top: 170px;
|
||||
text-align: left;
|
||||
width: calc(100% - 470px);
|
||||
}
|
||||
|
||||
@media #{$mq-desktop-wide} {
|
||||
@include background-size(513px, 224px);
|
||||
padding-top: 240px;
|
||||
width: calc(100% - 500px);
|
||||
}
|
||||
}
|
||||
|
||||
html[dir="rtl"] .main-copy {
|
||||
@media #{$mq-desktop} {
|
||||
background-position: top right;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Firefox Accounts for container
|
||||
|
||||
.fxa-cta {
|
||||
@include border-box;
|
||||
background-color: #FFF;
|
||||
border-radius: 6px;
|
||||
color: $color-text-primary;
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@media #{$mq-desktop-wide} {
|
||||
max-width: 513px;
|
||||
width: 513px;
|
||||
}
|
||||
}
|
||||
|
||||
html[dir="rtl"] .fxa-cta {
|
||||
@media #{$mq-desktop} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Signed-in messaging.
|
||||
|
||||
.signed-in {
|
||||
margin-top: 20px;
|
||||
min-height: 30px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
@include at2x('/media/img/firefox/accounts/green-check.png', 30px, 30px);
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
html.ios,
|
||||
html.android {
|
||||
.mzp-c-card-feature-content .mobile-content {
|
||||
display: block;
|
||||
height: 30px;
|
||||
margin: 0 auto 10px auto;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
margin-top: 40px;
|
||||
.mobile-notes,
|
||||
.mobile-lockwise,
|
||||
.mobile-pocket {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lockwise-card .mzp-c-button,
|
||||
.pocket-card .mzp-c-button,
|
||||
.notes-card .mzp-c-button,
|
||||
#fxa-sign-up-form,
|
||||
#fxa-account-button,
|
||||
.mzp-c-cta-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fxa-account-button,
|
||||
.show-fxa-supported-signed-in.fxa-app-buttons {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Download Firefox conditional CTA
|
||||
|
||||
.download-firefox {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
.fx-privacy-link > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Mobile specific Firefox CTAs
|
||||
|
||||
.mobile-ctas {
|
||||
.show-fxa-android > .mzp-c-button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// States
|
||||
// Most states are handled by the fxa account states script
|
||||
|
||||
|
||||
// Non-eligible FxA states get single column for both LTR and RTL locales.
|
||||
html[dir="ltr"],
|
||||
html[dir="rtl"] {
|
||||
&.no-js,
|
||||
.state-fxa-unsupported,
|
||||
.state-fxa-android,
|
||||
.state-fxa-ios,
|
||||
.state-fxa-not-fx,
|
||||
.state-fxa-default {
|
||||
.main-copy,
|
||||
.fxa-cta {
|
||||
float: none;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.main-copy {
|
||||
@media #{$mq-desktop} {
|
||||
text-align: center;
|
||||
background-position: top center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Двоичные данные
media/img/firefox/accounts/green-check-high-res.png
Двоичные данные
media/img/firefox/accounts/green-check-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 478 B |
Двоичные данные
media/img/firefox/accounts/green-check.png
Двоичные данные
media/img/firefox/accounts/green-check.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 786 B |
Двоичные данные
media/img/firefox/accounts/sync-devices-high-res.png
Двоичные данные
media/img/firefox/accounts/sync-devices-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 26 KiB |
Двоичные данные
media/img/firefox/accounts/sync-devices.png
Двоичные данные
media/img/firefox/accounts/sync-devices.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
media/img/firefox/accounts/tail.png
Двоичные данные
media/img/firefox/accounts/tail.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 54 KiB |
|
|
@ -813,18 +813,10 @@
|
|||
{
|
||||
"files": [
|
||||
"css/base/mozilla-fxa-state.scss",
|
||||
"css/base/mozilla-fxa-form.scss",
|
||||
"css/firefox/accounts.scss"
|
||||
],
|
||||
"name": "firefox_accounts"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/base/mozilla-fxa-state.scss",
|
||||
"css/firefox/accounts-2018.scss"
|
||||
],
|
||||
"name": "firefox_accounts_2018"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/base/mozilla-fxa-state.scss",
|
||||
|
|
@ -1478,23 +1470,15 @@
|
|||
],
|
||||
"name": "firefox_developer"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"js/base/mozilla-fxa.js",
|
||||
"js/base/mozilla-fxa-init.js",
|
||||
"js/base/mozilla-fxa-form.js"
|
||||
],
|
||||
"name": "firefox_accounts"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"protocol/js/protocol-modal.js",
|
||||
"js/base/mozilla-fxa.js",
|
||||
"js/base/mozilla-fxa-init.js",
|
||||
"js/base/mozilla-fxa-form.js",
|
||||
"js/firefox/accounts-2018.js"
|
||||
"js/firefox/accounts.js"
|
||||
],
|
||||
"name": "firefox_accounts_2018"
|
||||
"name": "firefox_accounts"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче