Skip to content

Commit

Permalink
Add Hello product page. Bug 1101984.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpetto
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
View file
@@ -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 http://mozilla.org/MPL/2.0/. -#}

{% 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') }}
<![endif]-->
{{ 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 %}
</div>
</header>
{% 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>

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

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

<svg version="1.1" class="actor" id="intro-face-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374 357" style="enable-background:new 0 0 374 357;" xml:space="preserve">
<g>
<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
c3.8,6.8,67.4-17.2,112.2-35.3c18.5,5.4,38.2,8.4,58.8,8.4c102.2,0,185-72.7,185-162.5C372,74.8,289.2,2,187,2z"/>
</g>
</svg>
</div>{#-- /#intro-face --#}
</div>{#-- /#intro-face-wrapper --#}

<div class="anim-sprite" id="laptop">
<div class="anim-sprite" id="laptop-camera-on"></div>
</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>
</div>{#-- /#hello-panel --#}

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

<div class="chat-window" id="chat-window-blue">
<div class="anim-sprite blue-face" id="chatter-blue"></div>
</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>

<div class="anim-sprite" id="wordmark"></div>
<!--<![endif]-->
</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.') }}
</h2>

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

{#
Share widget pulled from 35, will be back for 36:
https://bugzilla.mozilla.org/show_bug.cgi?id=1113917#c4

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

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

<p>
{{ _('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.') }}
</p>
</li>
<li id="feature-invite">
<h3 class="heading-tertiary">{{ _('Invite anyone, anywhere') }}</h3>

<p>
{{ _('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.') }}
</p>

<a rel="external" href="https://support.mozilla.org/kb/which-browsers-will-work-firefox-hello-video-chat">{{ _('Learn more about compatible browsers') }}</a>
</li>
<li id="feature-secure">
<h3 class="heading-tertiary">{{ _('Safe, secure, protected') }}</h3>

<p>
{{ _('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.') }}
</p>
</li>
<li id="feature-account">
<h3 class="heading-tertiary">{{ _('Do more with a Firefox Account') }}</h3>

<p>
{{ _('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.') }}
</p>
</li>
<li id="feature-getfx">
<h3 class="heading-tertiary">{{ _('Get Firefox to get started') }}</h3>

<p>
{{ _('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.') }}
</p>
</li>
</ul>
</div>{# /.container #}
</section>

<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>

<div class="cta-wrapper">
{{ download_firefox(simple=True, dom_id='download-fx') }}
<a class="try-hello" id="try-hello-footer" rel="external" href="https://support.mozilla.org/kb/where-firefox-hello-button">{{ _('Try Hello now') }}</a>
</div>
</div>{# /.container #}
</section>

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

<p>
{{ _('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.') }}
</p>

<p>
{{ _('Questions?') }}
<a rel="external" href="https://support.mozilla.org/kb/firefox-hello-video-and-voice-conversations-online">{{ _('Visit Mozilla Support') }}</a>
</p>
</div>
<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') }}">
</a>
</div>
</div>{# /.container #}
</section>

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

{% endblock %}

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


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


def hello(request):
videos = {
'de': 'https://videos.cdn.mozilla.net/uploads/FirefoxHello/firefoxhello_intro_german',
'en-US': 'https://videos.cdn.mozilla.net/uploads/FirefoxHello/firefoxhello_intro_english',
'es-ES': 'https://videos.cdn.mozilla.net/uploads/FirefoxHello/firefoxhello_intro_spanish',
'id': 'https://videos.cdn.mozilla.net/uploads/FirefoxHello/firefoxhello_intro_indonesian',
'pt-BR': 'https://videos.cdn.mozilla.net/uploads/FirefoxHello/firefoxhello_intro_portugese',
'zh-TW': 'https://videos.cdn.mozilla.net/uploads/FirefoxHello/firefoxhello_intro_chinese'
}

return l10n_utils.render(request, 'firefox/hello.html', {'video_url': videos.get(request.locale, '')})
16 changes: 16 additions & 0 deletions bedrock/settings/base.py
View file
Expand Up @@ -416,6 +416,12 @@ def JINJA_CONFIG():
'firefox_sync_anim': ( 'firefox_sync_anim': (
'css/firefox/sync-animation.less', 'css/firefox/sync-animation.less',
), ),
'firefox_hello': (
'css/sandstone/sandstone-resp.less',
'css/firefox/menu-resp.less',
'css/base/mozilla-modal.less',
'css/firefox/hello.less',
),
'firefox_independent': ( 'firefox_independent': (
'css/sandstone/sandstone-resp.less', 'css/sandstone/sandstone-resp.less',
'css/firefox/independent-splash.less', 'css/firefox/independent-splash.less',
Expand Down Expand Up @@ -793,6 +799,16 @@ def JINJA_CONFIG():
'js/firefox/sync-animation.js', 'js/firefox/sync-animation.js',
'js/firefox/sync-old.js', 'js/firefox/sync-old.js',
), ),
'firefox_hello': (
'js/firefox/australis/australis-uitour.js',
'js/libs/modernizr.custom.cssanimations.js',
'js/base/mozilla-modal.js',
'js/firefox/hello.js',
),
'firefox_hello_ie9': (
'js/libs/matchMedia.js',
'js/libs/matchMedia.addListener.js',
),
'firefox_privacy_tour': ( 'firefox_privacy_tour': (
'js/base/mozilla-modal.js', 'js/base/mozilla-modal.js',
'js/base/mozilla-share-cta.js', 'js/base/mozilla-share-cta.js',
Expand Down
3 changes: 3 additions & 0 deletions etc/httpd/global.conf
View file
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 ^/en-US/firefox/releases(/?)$ /b/en-US/firefox/releases$1 [PT]
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/sync(/?)$ /b/$1firefox/sync$2 [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 # bug 1071074
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/channel(/?)$ /b/$1firefox/channel$2 [PT] 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.