Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
[fix bug 1109132] Implement Firefox Hello FTUE
- Loading branch information
1 parent
023ddcb
commit 75e0337
Showing
10 changed files
with
682 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
{# 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-resp.html" %} | ||
|
||
{% set_lang_files "firefox/hello" %} | ||
|
||
{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %} | ||
|
||
{% block site_css %} | ||
{{ css('firefox_hello_start') }} | ||
{% endblock %} | ||
|
||
{% block page_title_prefix %}{% endblock %} | ||
{% block page_title %}{{ _('Firefox Hello') }}{% endblock %} | ||
{% block page_title_suffix %}{% endblock %} | ||
{% block body_id %}firefox-hello-start{% endblock %} | ||
{% block body_class %}sky{% endblock %} | ||
|
||
{% block string_data %} | ||
data-get-started-title="{{ _('Welcome to Hello') }}" | ||
data-get-started-text="{{ _('Open a video conversation with a single click, then invite a friend to join.') }}" | ||
data-invite-title="{{ _('Share your link with a friend') }}" | ||
data-invite-text="{{ _('They don’t even need Firefox to join. They just need to click the link.') }}" | ||
data-shared-title="{{ _('No need to wait around') }}" | ||
data-shared-text="{{ _('Once your friend clicks the link, the Hello icon will change to blue, letting you know they’re there.') }}" | ||
data-room-list-title="{{ _('You have a conversation waiting') }}" | ||
data-room-list-text="{{ _('Click now to join and say hello.') }}" | ||
{% endblock %} | ||
|
||
{% block site_header %}{% endblock %} | ||
|
||
{% block content %} | ||
<div class="spacer"></div> | ||
<main role="main" data-incoming-conversation="{{ incoming_conversation }}"> | ||
<h1>{{ high_res_img('img/firefox/hello/firefox-hello-logo.png?01-2015', {'alt': _('Firefox Hello'), 'width': '535', 'height': '88'}) }}</h1> | ||
<section class="default"> | ||
<h2>{{ _('The easiest way to have a free video conversation with anyone, anywhere') }}</h2> | ||
<ol> | ||
<li>{{ _('Start a conversation right from Firefox') }}</li> | ||
<li>{{ _('Invite a friend by sending them a link') }}</li> | ||
<li>{{ _('The Hello icon will change to blue once they’ve joined') }}</li> | ||
</ol> | ||
<aside> | ||
<ul> | ||
<li><a rel="external" href="https://support.mozilla.org/kb/firefox-hello-video-and-voice-conversations-online" class="more">{{ _('Need help? Get support here') }}</a></li> | ||
<li><a href="{{ url('firefox.hello') }}" class="more">{{ _('Learn all about Hello') }}</a></li> | ||
</ul> | ||
<ul> | ||
<li><a rel="external" href="https://support.mozilla.org/kb/create-and-manage-your-contacts-list-firefox-hello" class="more">{{ _('Do more with a Firefox Account') }}</a></li> | ||
{# Removing link for now, as per Bug 1109132#c14 | ||
<li><a href="#" class="more">{{ _('Tell a friend about Hello') }}</a></li> | ||
#} | ||
</ul> | ||
</aside> | ||
</section> | ||
<section class="start"> | ||
<h2>{{ _('The easiest way to connect for free over video') }}</h2> | ||
<p>{{ _('Start right from Firefox and invite anyone, anywhere to have a conversation. All they have to do is click a link to join. There’s no account or sign-in required.') }}</p> | ||
</section> | ||
<section class="end"> | ||
<h2>{{ _('You’ve started your first conversation. Wasn’t that easy?') }}</h2> | ||
<ul> | ||
{# Removing link for now, as per Bug 1109132#c14 | ||
<li><a href="#" class="more">{{ _('Tell a friend about Hello') }}</a></li> | ||
#} | ||
<li><a rel="external" href="https://support.mozilla.org/kb/firefox-hello-video-and-voice-conversations-online" class="more">{{ _('Need help? Get support here') }}</a></li> | ||
<li><a href="{{ url('firefox.hello') }}" class="more">{{ _('Learn all about Hello') }}</a></li> | ||
<li><a rel="external" href="https://support.mozilla.org/kb/create-and-manage-your-contacts-list-firefox-hello" class="more">{{ _('Do more with a Firefox Account') }}</a></li> | ||
</ul> | ||
</section> | ||
</main> | ||
|
||
{% endblock %} | ||
|
||
{% block email_form %}{% endblock %} | ||
|
||
{% block site_footer %}{% endblock %} | ||
|
||
{% block js %} | ||
{{ js('firefox_hello_start') }} | ||
{% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,185 @@ | ||
// 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/. | ||
|
||
@import "../../sandstone/lib.less"; | ||
|
||
html, | ||
body { | ||
height: 100%; | ||
} | ||
|
||
h1 { | ||
margin: (@baseLine * 14) @baseLine @baseLine; | ||
|
||
img { | ||
max-width: 100%; | ||
height: auto; | ||
} | ||
} | ||
|
||
h2 { | ||
margin: @baseLine; | ||
.font-size(48px); | ||
} | ||
|
||
p { | ||
margin: @baseLine; | ||
.open-sans-light; | ||
.font-size(20px); | ||
} | ||
|
||
ol { | ||
list-style-type: none; | ||
margin: @baseLine; | ||
padding: 0; | ||
.open-sans-light; | ||
.font-size(24px); | ||
font-style: italic; | ||
counter-reset: steps-counter; | ||
|
||
li { | ||
position: relative; | ||
margin: (@baseLine / 2) 0; | ||
line-height: 1.5; | ||
padding-left: 2em; | ||
|
||
&:before { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
content: counter(steps-counter); | ||
counter-increment: steps-counter; | ||
float: left; | ||
width: 1.5em; | ||
height: 1.5em; | ||
color: #fff; | ||
background: #00A9DC; | ||
border-radius: 100%; | ||
text-align: center; | ||
font-style: normal; | ||
.open-sans; | ||
} | ||
} | ||
} | ||
|
||
ul { | ||
list-style-type: none; | ||
margin: @baseLine; | ||
padding: 0; | ||
.font-size(@largeFontSize); | ||
|
||
li { | ||
margin: (@baseLine / 2) 0; | ||
padding: 0; | ||
} | ||
} | ||
|
||
main { | ||
width: 70%; | ||
margin-bottom: @baseLine * 4; | ||
} | ||
|
||
.js main { | ||
visibility: hidden; | ||
} | ||
|
||
.spacer { | ||
width: 30%; | ||
height: 700px; | ||
float: right; | ||
} | ||
|
||
aside { | ||
position: relative; | ||
padding: @baseLine; | ||
.clearfix(); | ||
ul { | ||
float: left; | ||
width: 50%; | ||
margin: 0; | ||
} | ||
} | ||
|
||
#outer-wrapper { | ||
min-height: 100%; | ||
border: none; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
#wrapper { | ||
height: 100%; | ||
overflow: hidden; | ||
padding: 0; | ||
} | ||
|
||
.start, | ||
.end { | ||
display: none; | ||
} | ||
|
||
.html-rtl { | ||
.spacer { | ||
float: left; | ||
} | ||
|
||
ol li { | ||
padding-left: 0; | ||
padding-right: 2em; | ||
|
||
&:before { | ||
left: auto; | ||
right: 0; | ||
} | ||
} | ||
|
||
aside ul { | ||
float: right; | ||
} | ||
} | ||
|
||
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) { | ||
main { | ||
width: 65%; | ||
} | ||
|
||
.spacer { | ||
width: 35%; | ||
} | ||
} | ||
|
||
@media only screen and (max-width: @breakTablet) { | ||
|
||
main { | ||
width: 100%; | ||
} | ||
|
||
.spacer { | ||
display: none; | ||
float: none; | ||
} | ||
|
||
h2 { | ||
.font-size(32px); | ||
} | ||
|
||
p { | ||
.font-size(16px); | ||
} | ||
|
||
aside ul { | ||
float: none; | ||
width: 100%; | ||
} | ||
|
||
} | ||
|
||
@media only screen and (max-height: 600px) { | ||
h2 { | ||
.font-size(32px); | ||
} | ||
p { | ||
.font-size(18px); | ||
} | ||
} |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.