Skip to content


Browse files Browse the repository at this point in the history
Add Hello product page. Bug 1101984.
  • Loading branch information
jpetto committed Jan 9, 2015
1 parent ef6d495 commit 7150d68
Show file tree
Hide file tree
Showing 19 changed files with 2,400 additions and 0 deletions.
233 changes: 233 additions & 0 deletions bedrock/firefox/templates/firefox/hello.html
@@ -0,0 +1,233 @@
{# 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 -#}

{% extends "firefox/base-resp.html" %}

{% block page_title_prefix %}{% endblock %}
{% block page_title %}{{ _('Firefox Hello — Free, easy video conversations') }}{% endblock %}
{% block page_desc %}{{ _('Learn all about Firefox Hello and see for yourself how easy it is to have a free video conversation with anyone, anywhere, right from your browser') }}{% endblock %}
{% block body_id %}firefox-hello{% endblock %}

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

{% block js %}
<!--[if IE 9]>
{{ js('firefox_hello_ie9') }}
{{ js('firefox_hello') }}
{% endblock %}

{% block site_header %}
<header id="masthead">
<div class="container">
<a href="{{ url('mozorg.home') }}" id="tabzilla" data-infobar="{{ settings.TABZILLA_INFOBAR_OPTIONS }}">Mozilla</a>

{% block site_header_nav %}
{% include 'firefox/includes/top-menu.html' %}
{% endblock %}

{% block site_header_logo %}
{{ super() }}
{% endblock %}
{% endblock %}

{% block content %}

<main role="main">
<section id="intro">
<div class="container">
{#-- No-JS/IE fallback image --#}
<h2 id="intro-image">{{ _('Firefox Hello') }}</h2>

<div id="animation-stage">
<!--[if gt IE 9]><!-->
<div class="svg-wrapper" id="intro-face-wrapper">
<div id="intro-face">
<div class="intro-face-eye" id="intro-face-eye-left">
<div class="intro-face-eyelid"></div>
<div class="intro-face-eyeball"></div>

<div class="intro-face-eye" id="intro-face-eye-right">
<div class="intro-face-eyelid"></div>
<div class="intro-face-eyeball"></div>

<div class="anim-sprite" id="intro-face-mouth"></div>

<svg version="1.1" class="actor" id="intro-face-svg" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 374 357" style="enable-background:new 0 0 374 357;" xml:space="preserve">
<path id="intro-face-bubble" d="M187,2C84.8,2,2,74.8,2,164.5c0,44.7,20.5,85.1,53.7,114.5C50,299.3,38.6,326.9,16,353.8
</div>{#-- /#intro-face --#}
</div>{#-- /#intro-face-wrapper --#}

<div class="anim-sprite" id="laptop">
<div class="anim-sprite" id="laptop-camera-on"></div>

<div class="anim-sprite" id="browser">
<div id="hello-panel">
<div id="hello-panel-contents">
<div class="hello-panel-text" id="hello-panel-text1"></div>
<div class="hello-panel-text" id="hello-panel-text2"></div>
<div class="hello-panel-text last" id="hello-panel-text3"></div>
<div id="hello-panel-button"></div>
</div>{#-- /#hello-panel --#}

<div class="chat-window" id="chat-window-green">
<div class="anim-sprite green-face" id="chatter-green"></div>

<div class="chat-window" id="chat-window-blue">
<div class="anim-sprite blue-face" id="chatter-blue"></div>
</div>{#-- /#browser --#}

<div id="conversation">
<div class="anim-sprite message" id="message-blue1"></div>
<div class="anim-sprite message" id="message-green1"></div>
<div class="anim-sprite message" id="message-blue2"></div>
<div class="anim-sprite message" id="message-green2"></div>
<div class="anim-sprite message" id="message-blue3"></div>
<div class="anim-sprite message" id="message-green3"></div>
<div class="anim-sprite message" id="message-blue4"></div>
<div class="anim-sprite message" id="message-green4"></div>
<div class="anim-sprite message blue-face" id="message-blue-face"></div>
<div class="anim-sprite message green-face" id="message-green-face"></div>

<div class="anim-sprite" id="wordmark"></div>
</div>{#-- /#animation-stage --#}

<h1 class="heading-primary">{{ _('As easy as saying hello') }}</h1>

<h2 class="heading-tertiary">
{{ _('Meet Firefox Hello, the easiest way to connect for free over video with anyone, anywhere.') }}

<button class="try-hello" id="try-hello-intro">{{ _('Try Firefox Hello') }}</button>

Share widget pulled from 35, will be back for 36:

<div id="share-wrapper">
{% include 'firefox/includes/social-share.html' %}
</div>{# /.container #}

<section id="features">
<div class="container">
<li id="feature-simple">
<h3 class="heading-tertiary">{{ _('All you need is Firefox') }}</h3>

{{ _('If you have the latest version of Firefox, you already have Hello.') }}
{{ _('There’s no account or sign-in required and nothing extra to download.') }}
{{ _('Just start a conversation, send your friend a link and ask them to click it.') }}
{{ _('Simple.') }}
<li id="feature-invite">
<h3 class="heading-tertiary">{{ _('Invite anyone, anywhere') }}</h3>

{{ _('Hello is super easy to use and your friends and family don’t even need Firefox to join your conversation.') }}
{{ _('As long as they have a compatible browser, they’re good to go.') }}

<a rel="external" href="">{{ _('Learn more about compatible browsers') }}</a>
<li id="feature-secure">
<h3 class="heading-tertiary">{{ _('Safe, secure, protected') }}</h3>

{{ _('Because Hello is built right into Firefox, you can rest easy knowing that your conversations and information will remain private and secure.') }}
{{ _('That’s part of our mission, and it’s behind everything we do around here.') }}
<li id="feature-account">
<h3 class="heading-tertiary">{{ _('Do more with a Firefox Account') }}</h3>

{{ _('To start a conversation with someone directly, simply create a free Firefox Account or sign in if you have one already &mdash; it’s the same account you use with Sync.') }}
{{ _('You can then add contacts to keep them close at hand.') }}
<li id="feature-getfx">
<h3 class="heading-tertiary">{{ _('Get Firefox to get started') }}</h3>

{{ _('Want to start using Hello?') }}
{{ _('All you need is Firefox &mdash; the open source browser that helps you stay in control of your online life while you stay connected with friends and family.') }}
{{ _('Download Firefox to start your first conversation.') }}
</div>{# /.container #}

<section id="download-try">
<div class="container">
<div class="ctacopy-wrapper">
<h2 class="dltry-copy heading-secondary" id="ctacopy-nonfx">{{ _('Get Firefox and start your first conversation') }}</h2>
<h2 class="dltry-copy heading-secondary" id="ctacopy-oldfx">{{ _('Update your Firefox to start using Hello') }}</h2>
<h2 class="dltry-copy heading-secondary" id="ctacopy-hellofx">{{ _('Start your first conversation today') }}</h2>

<div class="cta-wrapper">
{{ download_firefox(simple=True, dom_id='download-fx') }}
<a class="try-hello" id="try-hello-footer" rel="external" href="">{{ _('Try Hello now') }}</a>
</div>{# /.container #}

{% if video_url != '' %}
<section id="video">
<div class="container">
<div class="ctacopy-wrapper">
<h2 class="heading-secondary">{{ _('Get to know Hello') }}</h2>

{{ _('Want to reconnect with friends around the world?') }}
{{ _('Celebrate a birthday when you can’t be there in person?') }}
{{ _('Learn more about Firefox Hello and see for yourself how easy it is to have a free video conversation with anyone, anywhere, right from your browser.') }}

{{ _('Questions?') }}
<a rel="external" href="">{{ _('Visit Mozilla Support') }}</a>
<div class="cta-wrapper">
<a id="video-link" href="{{ video_url }}.mp4">
<img src="{{ media('/img/firefox/hello/video-screenshot.jpg') }}" alt="{{ _('Get to know Hello') }}">
</div>{# /.container #}

<div id="video-modal-wrapper">
<div id="video-modal">
{{ video(video_url + '.mp4', video_url + '.webm', id='hello-video') }}
{% endif %}

{% endblock %}

{% block email_form %}{% endblock %}
1 change: 1 addition & 0 deletions bedrock/firefox/templates/firefox/includes/top-menu.html
Expand Up @@ -9,6 +9,7 @@
<hr>{# <hr> before first sub/minor link #}
<a class="sublink" href="{{ url('firefox.sync') }}" tabindex="-1">{{ _('Sync') }}</a>
<a class="sublink" href="{{ url('firefox.hello') }}" tabindex="-1">{{ _('Hello') }}</a>
Expand Down
1 change: 1 addition & 0 deletions bedrock/firefox/
Expand Up @@ -38,6 +38,7 @@
page('firefox/desktop/trust', 'firefox/desktop/trust.html'),
page('firefox/developer', 'firefox/developer.html'),
page('firefox/geolocation', 'firefox/geolocation.html'),
url(r'^firefox/hello/$', views.hello, name='firefox.hello'),
page('firefox/interest-dashboard', 'firefox/interest-dashboard.html'),
page('firefox/android', 'firefox/android/index.html'),
page('firefox/android/faq', 'firefox/android/faq.html'),
Expand Down
13 changes: 13 additions & 0 deletions bedrock/firefox/
Expand Up @@ -481,3 +481,16 @@ def get_template_names(self):

# return a list to conform with original intention
return [template]

def hello(request):
videos = {
'de': '',
'en-US': '',
'es-ES': '',
'id': '',
'pt-BR': '',
'zh-TW': ''

return l10n_utils.render(request, 'firefox/hello.html', {'video_url': videos.get(request.locale, '')})
16 changes: 16 additions & 0 deletions bedrock/settings/
Expand Up @@ -416,6 +416,12 @@ def JINJA_CONFIG():
'firefox_sync_anim': (
'firefox_hello': (
'firefox_independent': (
Expand Down Expand Up @@ -793,6 +799,16 @@ def JINJA_CONFIG():
'firefox_hello': (
'firefox_hello_ie9': (
'firefox_privacy_tour': (
Expand Down
3 changes: 3 additions & 0 deletions etc/httpd/global.conf
Expand Up @@ -225,6 +225,9 @@ RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/geolocation(/?)$ /b/$1firefox/geoloc
RewriteRule ^/en-US/firefox/releases(/?)$ /b/en-US/firefox/releases$1 [PT]
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/sync(/?)$ /b/$1firefox/sync$2 [PT]

# bug 1101984
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/hello(/?)$ /b/$1firefox/hello$2 [PT]

# bug 1071074
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/channel(/?)$ /b/$1firefox/channel$2 [PT]

Expand Down

0 comments on commit 7150d68

Please sign in to comment.