Permalink
Browse files

Bug 1108632 Implement Firefox OS CES landing page

  • Loading branch information...
1 parent 305192a commit 1872bd7bed5171b0dd965e9ab39114ff9cc0d111 @sgarrity sgarrity committed Dec 19, 2014
@@ -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" %}
+
+{% block page_title_prefix %}{{ _('Firefox OS — ') }}{% endblock %}
+{% block page_title %}{{ _('Beyond smartphones — Bringing the power of the Web to Panasonic TVs') }}{% endblock %}
+{% block page_desc %}{{ _('Built entirely using HTML5 and other open Web standards, Firefox OS is free from the rules and restrictions of existing proprietary platforms.') }}{% endblock %}
+{% block body_id %}firefox-os-tv{% endblock %}
+{% block body_class %}firefox-os-tv blueprint{% endblock %}
+
+
+{% block site_css %}
+ {{ css('firefox_os_tv') }}
+{% endblock %}
+
+{% block site_header_nav %}{% endblock %}
+
+{% block site_header_logo %}
+ <h2><a href="{{ url('firefox.os.index') }}">
+ {{ high_res_img('img/firefox/os/devices/tv/logo.png', {'alt': 'Firefox OS', 'width': '221', 'height': '67'}) }}</a></h2>
+{% endblock %}
+
+{% block content %}
+
+<div class="main-feature">
+ <h1>{{_('Firefox OS comes to TVs')}}</h1>
+ <h2>{{ _('We’re bringing the power of the Web to Panasonic televisions later this year.') }}</h2>
+</div>
+
+<div id="main-content">
+
+ <div class="pager pager-auto-init pager-with-nav pager-with-tabs pager-no-history" id="mozilla-pager-1">
+
+ <div class="tv">
+ <div class="pager-content" id="mozilla-pager-tv-pages">
+ <div id="tv1" class="pager-page">
+ {{ high_res_img('img/firefox/os/devices/tv/screen1.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+ </div>
+ <div id="tv2" class="pager-page">
+ {{ high_res_img('img/firefox/os/devices/tv/screen2.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+ </div>
+ <div id="tv3" class="pager-page">
+ {{ high_res_img('img/firefox/os/devices/tv/screen3.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+ </div>
+ <div id="tv4" class="pager-page">
+ {{ high_res_img('img/firefox/os/devices/tv/screen4.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+ </div>
+ </div>
+ </div>
+
+ <ol class="pager-tabs">
+ <li>
+ <a href="#tv1"><img src="{{ media('img/firefox/os/devices/tv/screen1.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+ </li>
+ <li>
+ <a href="#tv2"><img src="{{ media('img/firefox/os/devices/tv/screen2.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+ </li>
+ <li>
+ <a href="#tv3"><img src="{{ media('img/firefox/os/devices/tv/screen3.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+ </li>
+ <li>
+ <a href="#tv4"><img src="{{ media('img/firefox/os/devices/tv/screen4.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+ </li>
+ </ol>
+
+ </div>
+
+ <p class="details">
+ {{ _('It’s not just a phone operating system on a bigger screen.') }}
+ {{ _('It’s a whole new experience that brings your television to life and gives you a new level of choice and control.') }}
+ </p>
+
+</div>
+
+{% endblock %}
+
+{% block js %}
+ {{ js('firefox_os_tv') }}
+{% endblock %}
+
+{% block email_form %}{% endblock %}
@@ -12,6 +12,7 @@
import bedrock.releasenotes.views
from bedrock.releasenotes import version_re
+from waffle.decorators import waffle_switch
latest_re = r'^firefox(?:/(?P<version>%s))?/%s/$'
firstrun_re = latest_re % (version_re, 'firstrun')
@@ -75,6 +76,8 @@
page('mwc', 'firefox/os/mwc-2014-preview.html'),
page('firefox/os/devices', 'firefox/os/devices.html'),
+ page('firefox/os/devices/tv', 'firefox/os/tv.html',
+ decorators=waffle_switch('firefox-os-tv')),
page('firefox/independent', 'firefox/independent.html'),
@@ -343,6 +343,11 @@ def JINJA_CONFIG():
'firefox_os_mwc_2014_preview_ie7': (
'css/firefox/os/mwc-2014-preview-ie7.less',
),
+ 'firefox_os_tv': (
+ 'css/sandstone/sandstone-resp.less',
+ 'css/firefox/template-resp.less',
+ 'css/firefox/os/tv.less',
+ ),
'firefox_releases_index': (
'css/sandstone/sandstone-resp.less',
'css/firefox/template-resp.less',
@@ -772,6 +777,9 @@ def JINJA_CONFIG():
'js/firefox/mwc-2014-map.js',
'js/firefox/os/mwc-2014-preview.js',
),
+ 'firefox_os_tv': (
+ 'js/base/mozilla-pager.js',
+ ),
'firefox_faq': (
'js/base/mozilla-accordion.js',
'js/base/mozilla-accordion-gatrack.js',
@@ -0,0 +1,205 @@
+// 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";
+
+/* Template */
+
+body {
+ background: #005189 url(/media/img/sandstone/grain.png);
+}
+
+.blueprint #outer-wrapper {
+ /* fallback for older browsers */
+ background: url(/media/img/firefox/os/devices/tv/bg-screen.jpg) no-repeat center top;
+ background:
+ url('/media/img/firefox/os/devices/tv/bg-screen.jpg') no-repeat center top,
+ url('/media/img/firefox/os/devices/tv/bg-gradient.png') repeat-x;
+}
+
+/* Title section */
+
+.main-feature {
+ text-align: center;
+ h1 {
+ .font-size(74px);
+ margin: (@baseLine * 2) 10% @baseLine;
+ }
+ h2 {
+ .font-size(32px);
+ margin: @baseLine 20% (@baseLine * 2);
+ line-height: 1.2;
+ }
+}
+
+.details {
+ margin: auto 16%;
+ text-align: center;
+ .open-sans-light();
+ .font-size(24px);
+}
+
+/* TV Screens */
+
+.tv {
+ position: relative;
+ background: #222;
+ border: 22px solid #000;
+ border-radius: 4px;
+ text-align: center;
+ img {
+ display: block;
+ margin: auto;
+ height: auto;
+ .border-box();
+ }
+}
+
+.js img[data-high-res] {
+ display: block; // override display:inline; from sandstone
+}
+
+
+/* Screenshot pager */
+
+.pager {
+ position: relative;
+ margin: 10px 60px;
+ &:before {
+ /* Glare effect over TV frame and screenshot */
+ content: ' '; // no-break space;
+ z-index: 2;
+ background: url(/media/img/firefox/os/devices/tv/screen-glare.png);
+ .background-size(100% auto);
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ border-radius: 4px;
+ width: 100%;
+ height: 492px; // match aspect ratio of TV frame
+ }
+}
+
+.pager-nav-links-wrapper {
+ button {
+ z-index: 6;
+ position: absolute;
+ top: 50%;
+ margin-top: -26px; // for vertical centering
+ left: -100px;
+ &.pager-next {
+ left: auto;
+ right: -100px;
+ }
+ }
+}
+
+.pager-nav-page-number {
+ display: none;
+}
+
+.pager-nav-links-wrapper {
+ button {
+ .at2x('/media/img/firefox/os/devices/tv/pager-right.png', 55px, 55px);
+ background-repeat: no-repeat;
+ background-position: 0 0;
+ .background-size(100% auto);
+ background-color: transparent;
+ height: 55px;
+ width: 55px;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ opacity: .75;
+ cursor: pointer;
+ .image-replaced();
+ .transition();
+ &.pager-prev {
+ .at2x('/media/img/firefox/os/devices/tv/pager-left.png', 55px, 55px);
+ }
+ &:hover {
+ opacity: 1;
+ }
+ &[disabled],
+ &[disabled]:hover {
+ opacity: .25;
+ cursor: default;
+ }
+ }
+}
+
+.pager-tabs {
+ margin: @baseLine auto (@baseLine * 2);
+ position: relative;
+ z-index: 5;
+ text-align: center;
+ li {
+ display: inline-block;
+ width: 140px;
+ max-width: 20%;
+ margin: auto 2%;
+ list-style-type: none;
+ }
+ img {
+ width: 100%;
+ display: block;
+ border-radius: 4px;
+ border: 2px solid transparent;
+ .transition();
+ }
+ .selected img {
+ border-color: #80bae5;
+ }
+}
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+ .main-feature {
+ h1 {
+ .font-size(52px);
+ margin-top: @baseLine;
+ margin-bottom: @baseLine;
+ }
+ h2 {
+ .font-size(26px);
+ }
+ }
+ .pager:before { height: 356px }
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+ #masthead {
+ h2 {
+ padding-top: @baseLine * 2;
+ }
+ }
+ .main-feature {
+ h1 {
+ .font-size(42px);
+ margin: @baseLine auto;
+ }
+ h2 {
+ .font-size(26px);
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+ .pager {
+ margin: 10px; // Turn off left/right space left for next/prev buttons
+ }
+ .pager-nav-links-wrapper { display: none; }
+ .pager:before { height: 178px }
+ .details {
+ .font-size(18px);
+ margin: auto;
+ }
+}
+
+/* Wide Mobile Layout: 480px */
+@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
+ .pager:before { height: 244px }
+}
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.
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.
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.
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.
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.
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.
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.
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.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1872bd7

Please sign in to comment.