Skip to content

Commit

Permalink
[fix bug 975099] Australis /firstrun and /whatsnew onboarding tour fo…
Browse files Browse the repository at this point in the history 
…r beta
  • Loading branch information
@alexgibson
alexgibson committed Mar 17, 2014
1 parent 9c61895 commit f3ef36a
Show file tree
Hide file tree
Showing 60 changed files with 2,175 additions and 618 deletions.
4 changes: 2 additions & 2 deletions bedrock/base/templates/base.html
View file
Expand Up @@ -4,9 +4,9 @@
assets default to windows #}
<html class="windows x86 no-js" lang="{{ LANG }}" dir="{{ DIR }}"{% block html_attrs %}{% endblock %}>
<head>
{% block ga_experiments %}{% endblock %}
<meta charset="utf-8">
<meta charset="utf-8">{# Note: Must be within first 512 bytes of page #}

{% block ga_experiments %}{% endblock %}
{% block extra_meta %}{% endblock %}

{% block shared_meta %}
Expand Down
131 changes: 131 additions & 0 deletions bedrock/firefox/templates/firefox/australis/firstrun-tour.html
View file
@@ -0,0 +1,131 @@
{# 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 "/firefox/australis/tour-base.html" %}

{% block body_id %}firstrun{% endblock %}

{% block string_data %}
{# L10n: This is the label for a button that opens the tour modal dialog #}
data-open="{{ _('Open tour') }}"
{# L10n: This is the label for a button that closes the tour modal dialog #}
data-close="{{ _('Close tour') }}"
{# L10n: This is the label for a button that proceeds to the next step of the tour #}
data-next="{{ _('Next') }}"
{# L10n: This is the text for a call to action that appears in the web page #}
data-later-cta="{{ _('Take the tour to explore the latest design and features') }}"
{# L10n: This is the label that represents tour step one of four #}
data-step1="{{ _('1/4') }}"
{# L10n: This is the label that represents tour step two of four #}
data-step2="{{ _('2/4') }}"
{# L10n: This is the label that represents tour step three of four #}
data-step3="{{ _('3/4') }}"
{# L10n: This is the label that represents tour step four of four #}
data-step4="{{ _('4/4') }}"
{% endblock %}

{% block tour_content %}
<div id="ui-tour" tabindex="-1" aria-expanded="false">
<div class="tour-inner">
<div id="tour-progress" class="progress-step">
<div class="logo"></div>
<span class="step"></span>
<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4">
<span class="indicator"></span>
</div>
</div>
<ul class="ui-tour-list">
<li class="tour-step current app-menu visible" data-step="1" data-tip-next="{{ _('<span>Next:</span> Customize') }}">
<div class="tour-item">
{# L10n: <br> tag below used for formatting only. #}
<h2 class="tour-highlight step-target" data-target="appMenu" data-effect="wobble">
{{ _('It starts with our new,<br> intuitive menu') }}
</h2>
<ul>
<li>{{ _('The features you use most, all in one place') }}</li>
<li>{{ _('Grouped together for quick, easy access') }}</li>
<li><a href="#" role="button" class="more">{{ _('Learn how to customize your Firefox') }}</a></li>
</ul>
</div>
{{ high_res_img('img/firefox/australis/diag-menu-bar.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
</li>
<li class="tour-step app-menu" data-step="2" data-tip-prev="{{ _('<span>Previous:</span> Menu') }}" data-tip-next="{{ _('<span>Next:</span> Addons') }}">
<div class="tour-item">
{# L10n: <br> tag below used for formatting only. #}
<h2 class="tour-highlight step-target" data-target="customize" data-effect="wobble">
{{ _('Designed so you can<br> make it your own') }}
</h2>
<ul>
<li>{{ _('How you use the Web is unique') }}</li>
<li>{{ _('Move or remove any button to match') }}</li>
<li><a href="#" role="button" class="more">{{ _('Add features and styles with add-ons') }}</a></li>
</ul>
</div>
{{ high_res_img('img/firefox/australis/diag-customize.jpg?03-2014', {'alt': _('Add, move or remove features to customize Firefox to meet your needs'), 'width': '300', 'height': '188'}) }}
</li>
<li class="tour-step app-menu" data-step="3" data-tip-prev="{{ _('<span>Previous:</span> Customize') }}" data-tip-next="{{ _('<span>Next:</span> Bookmarks') }}">
<div class="tour-item">
{# L10n: <br> tag below used for formatting only. #}
<h2 class="tour-highlight step-target" data-target="addons" data-effect="wobble">
{{ _('Thousands of ways to<br> make Firefox do more') }}
</h2>
<ul>
<li>{{ _('Get help with just about anything online') }}</li>
<li>{{ _('Easy to find, use and manage') }}</li>
<li><a href="#" role="button" class="more">{{ _('Use the star to create bookmarks') }}</a></li>
</ul>
</div>
{{ high_res_img('img/firefox/australis/diag-addons.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
</li>
<li class="tour-step" data-step="4" data-tip-prev="{{ _('<span>Previous:</span> Addons') }}">
<div class="tour-item">
{# L10n: <br> tag below used for formatting only. #}
<h2 class="tour-highlight step-target" data-target="bookmarks" data-effect="wobble">
{{ _('Your favorite sites<br> are closer than ever') }}
</h2>
<ul>
<li>{{ _('Add and view bookmarks from the same spot') }}</li>
<li>{{ _('It only takes a single click to save a site') }}</li>
<li><a href="#" role="button" class="more">{{ _('Enjoy seamless browsing between devices with Sync') }}</a></li>
</ul>
</div>
{{ high_res_img('img/firefox/australis/diag-bookmarks.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
</li>
</ul>
<div class="compact-title"></div>
<div class="cta">
<button type="button" aria-controls="ui-tour">{{ _('Start browsing') }}</button>
</div>
<div class="tour-tip"></div>
<div class="ui-tour-controls" aria-controls="ui-tour tour-content tour-progress">
<button class="step prev">{{ _('Previous') }}</button>
<button class="step next">{{ _('Next') }}</button>
<button class="close">{{ _('Close') }}</button>
</div>
</div>
</div>
{% endblock %}

{% block tour_mask %}
<div id="ui-tour-mask" tabindex="-1">
<div class="mask-inner">
<div class="logo"></div>
<div class="stage">
<h1>
<span class="lead">{{ _('Welcome to the') }}</span>
<span class="main">{{ _('new Firefox') }}</span>
</h1>
<p>{{ _('The fast, flexible browser you can trust.') }}</p>
<div class="menu">
<button id="start-tour-btn" class="button-green">{{ _('Take a tour') }}</button>
<button id="postpone-tour-btn">{{ _('Not now') }}</button>
</div>
</div>
</div>
</div>
{% endblock %}

{% block js %}
{{ js('firefox_australis_tour_firstrun') }}
{% endblock %}
106 changes: 106 additions & 0 deletions bedrock/firefox/templates/firefox/australis/tour-base.html
View file
@@ -0,0 +1,106 @@
{# 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 "/firefox/base.html" %}

{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}

{% block page_title_prefix %}{% endblock %}
{% block page_title %}{{ _('Welcome to the new Firefox') }}{% endblock %}
{% block page_title_suffix %}{% endblock %}
{% block body_class %}sky{% endblock %}

{% block site_css %}
{{ css('firefox_australis_tour') }}
{% endblock %}

{% block string_data %}{% endblock %}

{% block site_header %}
<header id="masthead">
<a href="{{ url('mozorg.home') }}" id="tabzilla">Mozilla</a>
{% block site_header_nav %}{% endblock %}
{% block site_header_logo %}{% endblock %}
{% block breadcrumbs %}{% endblock %}
</header>
{% endblock %}

{% block content %}
{# begin page content #}
<main role="main">
<header>
<h1>
<span class="lead">{{ _('Welcome to the') }}</span>
<span class="main">{{ _('new Firefox') }}</span>
</h1>
<p>{{ _('The fast, flexible browser you can trust.') }}</p>
</header>
<div class="sync">
<section>
<h2>{{ _('Keep your Firefox in Sync') }}</h2>
<p>{{ _('Instantly make Firefox your own wherever you use it. Access your bookmarks, history, passwords and more from any device.')}}
<div class="sync-cta">
<button class="button">{{ _('Get started with Sync') }}</button>
<small>{{ _('Create an account from the menu') }}</small>
</div>
<a id="survey-link" href="https://www.surveygizmo.com/s3/1578454/Firefox-29-Beta-Survey" target="_blank" title="{{ _('Opens new window') }}">
{{ _('Take a quick survey about the new Firefox') }}
</a>
</section>
<div class="sync-anim">
<div class="cloud">
<div class="sync-arrows"></div>
<div class="checkmark"></div>
</div>
<div class="device laptop">
<div class="inner">
<div class="icon logo"></div>
<div class="icon history"></div>
<div class="icon bookmarks"></div>
<div class="icon passwords"></div>
</div>
</div>
<div class="device tablet">
<div class="inner">
<div class="icon logo"></div>
<div class="icon history"></div>
<div class="icon bookmarks"></div>
<div class="icon passwords"></div>
</div>
</div>
<div class="device phone">
<div class="inner">
<div class="icon logo"></div>
<div class="icon history"></div>
<div class="icon bookmarks"></div>
<div class="icon passwords"></div>
</div>
</div>
</div>
</div>
<section class="learn-more billboard">
<h3>{{ _('Learn more about the new Firefox') }}</h3>
<ul>
<li><a href="https://support.mozilla.org/products/firefox" target="_blank" title="{{ _('Opens new window') }}">{{ _('Need help?') }}</a></li>
<li><a href="http://www.mozilla.org/privacy/you/">{{ _('Putting your privacy first') }}</a></li>
</ul>
<ul>
<li><a href="https://support.mozilla.org/kb/learn-more-about-the-design-of-new-firefox" target="_blank" title="{{ _('Opens new window') }}">{{ _('Learn about the new design') }}</a></li>
<li><a href="https://support.mozilla.org/kb/common-questions-after-updating-to-new-firefox" target="_blank" title="{{ _('Opens new window') }}">{{ _('Frequently asked questions') }}</a></li>
</ul>
<ul>
<li><a href="https://support.mozilla.org/kb/what-happened-to-the-add-on-bar" target="_blank" title="{{ _('Opens new window') }}">{{ _('Where did my add-on bar go?') }}</a></li>
</ul>
</section>
</main>
{# end page content #}

{% block tour_content %}{% endblock %}

{% block tour_mask %}{% endblock %}

{% endblock %}

{% block email_form %}{% endblock %}
{% block js %}{% endblock %}

0 comments on commit f3ef36a

Please sign in to comment.