зеркало из https://github.com/mozilla/bedrock.git
Bug 736381 - [One Mozilla] code /central
This commit is contained in:
Steven Garrity
Родитель
39b2116af6
Коммит
1654621659
|
|
@ -0,0 +1,298 @@
|
|||
{% extends "/firefox/base.html" %}
|
||||
|
||||
{% block page_title %}Getting Started with Mozilla Firefox{% endblock %}
|
||||
{% block body_id %}firefox-central{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('firefox_central') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div id="main-feature">
|
||||
<h1>Meet Mozilla Firefox</h1>
|
||||
|
||||
{{ download_button('download', 'small') }}
|
||||
<p class="roll-over">Roll over the markers below for feature info</p>
|
||||
|
||||
<div id="figure">
|
||||
{{ platform_img('img/firefox/central/screen.png', alt='Screenshot') }}
|
||||
<div id="svg-path"></div>
|
||||
<div id="features">
|
||||
<p>Become a Firefox Expert in <span>8</span> Easy Steps:</p>
|
||||
<ul>
|
||||
<li><a href="#" id="get-started">Get started</a></li>
|
||||
<li><a href="#" id="meet-your-browser">Meet Your Browser</a></li>
|
||||
<li><a href="#" id="experience-super-speed">Experience Super Speed</a></li>
|
||||
<li><a href="#" id="stay-in-sync">Stay in Sync</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="#" id="customize">Customize</a></li>
|
||||
<li><a href="#" id="secure-your-personal-info">Secure Your Personal Info</a></li>
|
||||
<li><a href="#" id="explore-the-cutting-edge">Explore the Cutting Edge</a></li>
|
||||
<li><a href="#" id="firefox-on-your-phone">Get Firefox on Your Phone</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<article id="sync" class="tip">
|
||||
<h1>Sync</h1>
|
||||
<p>Sync seamlessly connects your desktop and mobile Firefoxes, so you can access your browsing history, passwords,
|
||||
bookmarks and even open tabs no matter which device you use.</p>
|
||||
</article>
|
||||
<article id="tabs-on-top" class="tip">
|
||||
<h1>Tabs on Top</h1>
|
||||
<p>Tabs are now located above the Awesome Bar to make it easier to focus on the content of the sites you visit.</p>
|
||||
</article>
|
||||
<article id="app-tab" class="tip">
|
||||
<h1>App Tab</h1>
|
||||
<p>Take sites you always keep open—like Web mail—off your tab bar and give them a permanent home in your browser.</p>
|
||||
</article>
|
||||
<article id="switch-to-tab" class="tip">
|
||||
<h1>Switch to Tab</h1>
|
||||
<p>As you’re opening a new tab, Firefox will check to see if you already have that site open. If you do, you’ll be directed to the existing tab so you don’t open a duplicate.</p>
|
||||
</article>
|
||||
<article id="firefox-menu-button" class="tip">
|
||||
<h1>Firefox Menu Button</h1>
|
||||
<p>All your menu items are now found in a single button for easy access.</p>
|
||||
</article>
|
||||
<article id="bookmark-button" class="tip">
|
||||
<h1>Bookmark Button</h1>
|
||||
<p>Manage your bookmarks in a single button. Find your favorite links without getting bogged down!</p>
|
||||
</article>
|
||||
<article id="awesome-bar" class="tip">
|
||||
<h1>Awesome Bar</h1>
|
||||
<p>Get to your favorite sites quickly – even if you don’t remember the URLs. Start typing and the Awesome Bar will include possible matches from your browsing history, bookmarked sites and open tabs.</p>
|
||||
</article>
|
||||
<article id="private-browsing" class="tip">
|
||||
<h1>Private Browsing</h1>
|
||||
<p>Turn this feature on and protect your browsing history. You can slip in and out of private browsing mode quickly, so it’s easy to go back to what you were doing before as if nothing ever happened.</p>
|
||||
</article>
|
||||
<article id="password-manager" class="tip">
|
||||
<h1>Password Manager</h1>
|
||||
<p>Firefox can remember your passwords, but does so without intrusive pop-ups. Instead, look for the Remember Password notification integrated seamlessly into your view at the top of the site page.</p>
|
||||
</article>
|
||||
<article id="instant-website-id" class="tip">
|
||||
<h1>Instant Website ID</h1>
|
||||
<p>Want to be extra sure about a site’s legitimacy before you hand over your personal info? Click on its favicon for an instant identity overview.</p>
|
||||
</article>
|
||||
<article id="customize-toolbar" class="tip">
|
||||
<h1>Customize Toolbar</h1>
|
||||
<p>You can adjust Firefox’s interface to be exactly the way you like it: re-arrange, organize, add or remove buttons or fields to change your browsing experience however you want.</p>
|
||||
</article>
|
||||
<article id="addons-manager" class="tip">
|
||||
<h1>Add-ons Manager</h1>
|
||||
<p>The Add-ons Manager lets you discover and install add-ons without ever leaving Firefox. Browse ratings, recommendations, descriptions and pictures of the add-ons in action to help you make your selection.</p>
|
||||
</article>
|
||||
<article id="personas" class="tip">
|
||||
<h1>Personas</h1>
|
||||
<p>Change the look of your Firefox in a single click with Personas, easy-to-install themes created by users from around the world (or that you make yourself!).</p>
|
||||
</article>
|
||||
|
||||
<article id="overlay-get-started" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Get Started</h1>
|
||||
<p>Ready to begin? Good! Getting started with Firefox is actually quite simple – here are a few handy shortcuts to help you get going:</p>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/kb/Browsing%20basics">Browsing Basics</a></li>
|
||||
<li><a href="https://support.mozilla.org/kb/Importing%20favorites%20and%20other%20data%20from%20Internet%20Explorer">Import bookmarks from another browser</a></li>
|
||||
<li><a href="https://support.mozilla.org/kb/How%20to%20set%20the%20home%20page">Set your home page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<div class="mozilla-video-control">
|
||||
<video width="480" height="270" controls="controls" poster="{{ media('img/firefox/central/poster-browsing-basics.png') }}">
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Browsing-Basics-640.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Browsing-Basics-640.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Browsing-Basics-640.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<object type="application/x-shockwave-flash" style="width: 480px; height: 270px;" data=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Browsing-Basics-640.mp4&autoplay=false') }}">
|
||||
<param name="movie" value=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Browsing-Basics-640.mp4&autoplay=false') }}" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">This video requires a browser with support for open video or Flash.</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<figcaption class="figcaption">Learn more about Firefox’s features</figcaption>
|
||||
</figure>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-meet-your-browser" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Meet Your Browser</h1>
|
||||
<p>The Firefox interface has been designed by a team of experts and tested by a community of millions of users around the world to make sure your browsing is as easy and intuitive as possible. Try these links to learn more:</p>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/kb/what-are-app-tabs">Create an app tab</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/how-do-i-customize-toolbars">Customize your toolbar</a></li>
|
||||
<li><a href="https://support.mozilla.org/kb/how-do-i-use-bookmarks">Organize your bookmarks</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/what-are-tab-groups">Manage your tabs with Panorama</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-experience-super-speed" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Experience Super Speed</h1>
|
||||
<p>We’ve optimized Firefox’s performance to support the way you browse, and with faster start-up times, rapid graphics rendering and improved page load, Firefox is fast in ways you’ll notice instantly.</p>
|
||||
<ul>
|
||||
<li><a href="/firefox/performance/">Go under the hood to find out more</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-stay-in-sync" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Stay in Sync</h1>
|
||||
<p>Life on the go means always browsing with a single device isn’t very feasible. So, we created Sync to give you constant access to your browsing data, including history, passwords, bookmarks and open tabs, no matter what computer or phone you’re using.</p>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/kb/sync-firefox-between-desktop-and-mobile">Create your Sync account</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<div class="mozilla-video-control">
|
||||
<video width="480" height="270" controls="controls" poster="{{ media('img/firefox/central/poster-sync-instructions.png') }}">
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Sync-Instructions-640.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Sync-Instructions-640.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Sync-Instructions-640.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<object type="application/x-shockwave-flash" style="width: 480px; height: 270px;" data=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Sync-Instructions-640.mp4&autoplay=false') }}">
|
||||
<param name="movie" value=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Sync-Instructions-640.mp4&autoplay=false') }}" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">This video requires a browser with support for open video or Flash.</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<figcaption class="figcaption">Learn more about Sync</figcaption>
|
||||
</figure>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-customize" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Customize</h1>
|
||||
<p>When it comes to browsing, one size definitely doesn’t fit all. That’s why we’ve made sure you can customize Firefox to your exact needs in pretty much any possible way. Enhance functionality with extensions, add style with Personas or even change the toolbar icons to be just the way you like.</p>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/kb/Customizing%20Firefox%20with%20add-ons">Ways to personalize your Firefox</a></li>
|
||||
<li><a href="https://support.mozilla.org/kb/Customizing%20Firefox%20with%20add-ons">How to install an add-on</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/how-do-i-customize-toolbars">Customize your toolbars</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<div class="mozilla-video-control">
|
||||
<video width="480" height="270" controls="controls" poster="{{ media('img/firefox/central/poster-getpersonas.jpg') }}">
|
||||
<source src="http://videos-cdn.mozilla.net/firefox/3.6/getpersonas.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="http://videos-cdn.mozilla.net/firefox/3.6/getpersonas.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<object type="application/x-shockwave-flash" style="width: 480px; height: 270px;" data=""{{ media('flash/playerWithControls.swf?flv=firefox/3.6/getpersonas.mp4&autoplay=false') }}">
|
||||
<param name="movie" value=""{{ media('flash/playerWithControls.swf?flv=firefox/3.6/getpersonas.mp4&autoplay=false') }}" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">This video requires a browser with support for open video or Flash.</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<figcaption class="figcaption">Learn more about Personas</figcaption>
|
||||
</figure>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-secure-your-personal-info" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Secure Your Personal Info</h1>
|
||||
<p>We’ve packed Firefox with highly advanced security features to keep you safe while you browse. And, as a non-profit organization, protecting your privacy by keeping you in control over your personal information is a key part of our mission.</p>
|
||||
<ul>
|
||||
<li><a href="http://support.mozilla.org/kb/Site+Identity+Button">Instant Web ID</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/how-do-i-stop-websites-tracking-me">Do not Track</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/Private%20Browsing">Private Browsing</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/Clear%20Recent%20History">Clear Recent History</a></li>
|
||||
<li><a href="http://support.mozilla.org/kb/Options%20window%20-%20Security%20panel">Customized Security Setting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<div class="mozilla-video-control">
|
||||
<video width="480" height="270" controls="controls" poster="{{ media('img/firefox/central/poster-privatebrowsing.png') }}">
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/privatebrowsing640.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/privatebrowsing640.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/privatebrowsing640.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<object type="application/x-shockwave-flash" style="width: 480px; height: 270px;" data=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/privatebrowsing640.mp4&autoplay=false') }}">
|
||||
<param name="movie" value=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/privatebrowsing640.mp4&autoplay=false') }}" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">This video requires a browser with support for open video or Flash.</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<figcaption class="figcaption">Learn more about Firefox’s security features</figcaption>
|
||||
</figure>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-explore-the-cutting-edge" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Explore The Cutting Edge</h1>
|
||||
<p>As part of our mission to make the Web better, Firefox supports the latest and greatest technology like HTML5 to make sure you can enjoy the most innovative and advanced sites out there. Be sure to check out our demo gallery for some examples of what the modern Web can do.</p>
|
||||
<ul>
|
||||
<li><a href="https://developer.mozilla.org/en-US/demos/">Mozilla Demo Studio</a></li>
|
||||
<li><a href="/firefox/technology">More about Firefox technology</a></li>
|
||||
<li><a href="https://developer.mozilla.org">Mozilla Developer Network</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<div class="mozilla-video-control">
|
||||
<video width="480" height="270" controls="controls" poster="{{ media('/img/firefox/central/poster-cutting-edge.png') }}">
|
||||
<source src=" http://videos-cdn.mozilla.net/serv/marketing/firefox4/Cutting-Edge-640.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Cutting-Edge-640.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Cutting-Edge-640.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<object type="application/x-shockwave-flash" style="width: 480px; height: 270px;" data="{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Cutting-Edge-640.mp4&autoplay=false') }}">
|
||||
<param name="movie" value=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Cutting-Edge-640.mp4&autoplay=false') }}" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">This video requires a browser with support for open video or Flash.</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<figcaption class="figcaption">Learn more about Firefox’s technology</figcaption>
|
||||
</figure>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<article id="overlay-firefox-on-your-phone" class="overlay-box">
|
||||
<div class="info">
|
||||
<h1>Get Firefox on Your Phone</h1>
|
||||
<p>Fast, easy to use and completely customizable, Firefox for mobile puts the
|
||||
modern Web experience of Firefox in your pocket and at your fingertips. It’s
|
||||
built on the same great platform as our desktop version, so you never have to
|
||||
compromise, even on the go.</p>
|
||||
<ul>
|
||||
<li><a href="/mobile/features/">Features</a></li>
|
||||
<li><a href="https://addons.mozilla.org/mobile/?browse=featured">Ways to customize</a></li>
|
||||
<li><a href="/firefox/video/?video=fx4-mobile-addons">Mobile add-ons showcase</a></li>
|
||||
<li><a href="/mobile/platforms">Supported platforms and devices</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<div class="mozilla-video-control">
|
||||
<video width="480" height="270" controls="controls">
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Mobile-launch-greatday640.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Mobile-launch-greatday640.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/Mobile-launch-greatday640.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<object type="application/x-shockwave-flash" style="width: 480px; height: 270px;" data=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Mobile-launch-greatday640.mp4&autoplay=false') }}">
|
||||
<param name="movie" value=""{{ media('flash/playerWithControls.swf?flv=serv/marketing/firefox4/Mobile-launch-greatday640.mp4&autoplay=false') }}" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">This video requires a browser with support for open video or Flash.</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<figcaption class="figcaption">Learn more about Firefox for mobile</figcaption>
|
||||
</figure>
|
||||
<a href="#" class="close">close</a>
|
||||
</article>
|
||||
|
||||
<svg style="height: 0">
|
||||
<defs>
|
||||
<filter id="blur"><feGaussianBlur stdDeviation="3"/></filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_central') }}
|
||||
{% endblock %}
|
||||
|
|
@ -28,10 +28,6 @@
|
|||
|
||||
{{ download_button('download', 'small') }}
|
||||
|
||||
<script src="/media/js/download.js"></script>
|
||||
<script type="text/javascript">
|
||||
offerBestDownloadLink('download');
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ from django.conf.urls.defaults import *
|
|||
import views
|
||||
|
||||
urlpatterns = patterns('',
|
||||
url(r'^firefox/central/$', views.central, name='firefox.central'),
|
||||
url(r'^firefox/customize/$', views.customize, name='firefox.customize'),
|
||||
url(r'^firefox/features/$', views.features, name='firefox.features'),
|
||||
url(r'^firefox/geolocation/$', views.geolocation, name='firefox.geolocation'),
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ from mozorg.forms import NewsletterForm
|
|||
|
||||
@anonymous_csrf
|
||||
|
||||
def central(request):
|
||||
return l10n_utils.render(request, "firefox/central.html")
|
||||
|
||||
def customize(request):
|
||||
return l10n_utils.render(request, "firefox/customize.html")
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,249 @@
|
|||
@import "template.less";
|
||||
|
||||
#main-feature h1 {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.roll-over {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
padding: 12px 12px 12px 60px;
|
||||
margin-top: -38px;
|
||||
.small;
|
||||
color: #404040;
|
||||
background-image: url(/media/img/firefox/central/callout-down.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 18px 50%;
|
||||
background-color: rgba(0,0,0,0.02);
|
||||
background-size: 30px;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,0.1) inset;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
#figure {
|
||||
width: 940px;
|
||||
position: relative;
|
||||
margin: 10px 0 50px -20px;
|
||||
}
|
||||
|
||||
#figure .platform-img {
|
||||
position: relative;
|
||||
top: 45px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#figure #svg-path {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: url(/media/img/firefox/central/path.svg) left top no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#figure .callout {
|
||||
position: absolute;
|
||||
background: url(/media/img/firefox/central/callout-down.png) no-repeat center bottom;
|
||||
background-image: ~"url(/media/img/firefox/central/callout-down-ie.png)\9";
|
||||
width: 36px;
|
||||
height: 52px;
|
||||
margin-left: -18px;
|
||||
margin-top: -52px;
|
||||
}
|
||||
|
||||
#figure .up .callout {
|
||||
background: url(/media/img/firefox/central/callout-up.png) no-repeat center top;
|
||||
background-image: ~"url(/media/img/firefox/central/callout-up-ie.png)\9";
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#figure .arrow {
|
||||
position: absolute;
|
||||
background: url(/media/img/firefox/central/arrow-hover-down.png);
|
||||
width: 29px;
|
||||
height: 22px;
|
||||
margin-left: -14px;
|
||||
margin-top: -22px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#figure .up .arrow {
|
||||
background: url(/media/img/firefox/central/arrow-hover-up.png) no-repeat bottom;
|
||||
background-image: ~"url(/media/img/firefox/central/arrow-hover-up-ie.png)\9";
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#figure .tip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #475AB2;
|
||||
width: 470px;
|
||||
height: 100px;
|
||||
margin-top: -129px;
|
||||
overflow: hidden;
|
||||
padding: 5px 15px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-box-shadow: 0 4px rgba(0,0,0,.3), inset 0 -3px #425094, inset 0 0 8px #5b91e2;
|
||||
-webkit-box-shadow: 0 4px rgba(0,0,0,.3), inset 0 -3px #425094, inset 0 0 8px #5b91e2;
|
||||
box-shadow: 0 4px rgba(0,0,0,.3), inset 0 -3px #425094, inset 0 0 8px #5b91e2;
|
||||
background: -moz-linear-gradient(bottom, #4352ac, #6a9de3 135%);
|
||||
background: -o-linear-gradient(bottom, #4352ac, #6a9de3 135%);
|
||||
background: -webkit-linear-gradient(bottom, #4352ac, #6a9de3 135%);
|
||||
background: -webkit-gradient(linear, left bottom, left top, from(#4352ac), to(#6a9de3));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#figure .up .tip {
|
||||
background-color: #4866E1;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
#figure .tip h1, #figure .tip p {
|
||||
color: white;
|
||||
font: Georgia, "Liberation Serif", serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#figure .tip h1 {
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#figure .tip p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
#features {
|
||||
position: absolute;
|
||||
top: 270px;
|
||||
left: 50px;
|
||||
width: 853px;
|
||||
height: 136px;
|
||||
}
|
||||
|
||||
#features p,
|
||||
#features ul {
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#features p {
|
||||
width: 240px;
|
||||
margin-right: 20px;
|
||||
font-size: 32px;
|
||||
.open-sans-light;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
#features li {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
#features li a {
|
||||
display: block;
|
||||
.open-sans-light;
|
||||
font-size: 22px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
#features li a:after {
|
||||
content: " »";
|
||||
}
|
||||
#overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: black;
|
||||
opacity: .2;
|
||||
filter: alpha(opacity=20);
|
||||
width: 100%;
|
||||
display: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.overlay-box {
|
||||
position: fixed;
|
||||
_position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 910px;
|
||||
background: white;
|
||||
background: -moz-linear-gradient(top, white, white 50%, #f4f9ff);
|
||||
background: -o-linear-gradient(top, white, white 50%, #f4f9ff);
|
||||
background: -webkit-linear-gradient(top, white, white 50%, #f4f9ff);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), to(#f4f9ff));
|
||||
border: 1px solid #b0c1d2;
|
||||
box-shadow: 0 3px rgba(0,0,0, .1), inset 0 -2px #e0ecf9, inset 0 0 12px rgba(223, 236, 249, .2);
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 35px;
|
||||
clear: both;
|
||||
z-index: 10000;
|
||||
color: #484848;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.overlay-box .close {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
display: block;
|
||||
.button-white;
|
||||
}
|
||||
|
||||
.overlay-box .info {
|
||||
float: left;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.overlay-box .info p {
|
||||
border-bottom: 1px dotted @borderColor;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.overlay-box h1 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.overlay-box div p {
|
||||
font-size: 16px;
|
||||
}
|
||||
.overlay-box ul {
|
||||
margin: 0;
|
||||
}
|
||||
.overlay-box li {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
margin: 0 0 12px 0;
|
||||
.open-sans-light;
|
||||
}
|
||||
.overlay-box li a::after {
|
||||
content: " »";
|
||||
}
|
||||
.overlay-box .figure {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 480px;
|
||||
margin: 70px 0 0 30px ;
|
||||
}
|
||||
.overlay-box .figure img, .overlay-box .figure video {
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.75);
|
||||
}
|
||||
.overlay-box .figcaption {
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding-top: 6px;
|
||||
font-size: 18px;
|
||||
.open-sans-light;
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 920 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 427 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 335 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 508 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 656 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 896 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 591 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 560 200" preserveAspectRatio="xMidYMid meet" width="560" height="200">
|
||||
<path d="M16.802,0.683c0,0-9.661,142.868,44.197,131.43 c49.807-10.578,13.865-110.09,65.133-102.934c37.108,5.179,29.659,55.828,101.771,83.161 c62.574,23.718,125.838-17.103,62.807-33.148c-50.728-12.914-136.247-52.884-54.084-60.48 c92.236-8.528,103.52,58.502,143.061,44.197c35.339-12.784,32.594-40.535,61.644-41.871c47.754-2.197,25.543,88.557,84.906,89.559 c52.795,0.891,32.566-73.857-36.056-112.239" fill="transparent" fill-opacity="0" stroke="black" stroke-width="0.6" stroke-linecap="round" stroke-dasharray="1 4" />
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 674 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 19 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 58 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 61 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 89 KiB |
|
|
@ -0,0 +1,172 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
var PLATFORM_OTHER = 0;
|
||||
var PLATFORM_WINDOWS = 1;
|
||||
var PLATFORM_LINUX = 2;
|
||||
var PLATFORM_MACOSX = 3;
|
||||
var PLATFORM_MAC = 4;
|
||||
|
||||
// Default to windows
|
||||
var gPlatform = PLATFORM_WINDOWS;
|
||||
|
||||
if (navigator.platform.indexOf("Win32") != -1 || navigator.platform.indexOf("Win64") != -1)
|
||||
gPlatform = PLATFORM_WINDOWS;
|
||||
else if (navigator.platform.indexOf("Linux") != -1)
|
||||
gPlatform = PLATFORM_LINUX;
|
||||
else if (navigator.userAgent.indexOf("Mac OS X") != -1)
|
||||
gPlatform = PLATFORM_MACOSX;
|
||||
else if (navigator.userAgent.indexOf("MSIE 5.2") != -1)
|
||||
gPlatform = PLATFORM_MACOSX;
|
||||
else if (navigator.platform.indexOf("Mac") != -1)
|
||||
gPlatform = PLATFORM_MAC;
|
||||
else
|
||||
gPlatform = PLATFORM_OTHER;
|
||||
|
||||
var gPlatformVista = navigator.userAgent.indexOf('Windows NT 6.0') !=-1
|
||||
|
||||
|
||||
$('<div id="overlay" />').appendTo('body');
|
||||
|
||||
$('#features li a')
|
||||
.click(function(e) {
|
||||
e.preventDefault();
|
||||
$('#overlay')
|
||||
.css('display', 'block')
|
||||
.css('height', $(document).height() + 'px');
|
||||
|
||||
var width = $('#overlay-' + this.id).outerWidth();
|
||||
var height = $('#overlay-' + this.id).outerHeight();
|
||||
var docWidth = $(document).width();
|
||||
var viewHeight = $(window).height();
|
||||
|
||||
|
||||
var $overlay = $('#overlay-' + this.id);
|
||||
var top = ((viewHeight - height) / 2);
|
||||
if ($overlay.css('position') == 'absolute') {
|
||||
top += $(window).scrollTop();
|
||||
}
|
||||
$overlay.appendTo('body')
|
||||
.css('display', 'block')
|
||||
.css('top', top + 'px')
|
||||
.css('left', ((docWidth - width) / 2) + 'px')
|
||||
});
|
||||
|
||||
$('#overlay,.overlay-box .close').click(function(e) {
|
||||
e.preventDefault();
|
||||
$('.overlay-box').each(function() {
|
||||
$(this).css('display', 'none');
|
||||
});
|
||||
$('#overlay').css('display', 'none');
|
||||
$('video').each(function() {
|
||||
if (typeof this.pause != 'undefined') {
|
||||
this.pause();
|
||||
}
|
||||
});
|
||||
});
|
||||
var tips = {}
|
||||
tips[PLATFORM_WINDOWS] = [
|
||||
{'left': 77, 'top': 73, 'id': 'firefox-menu-button'},
|
||||
{'left': 28, 'top': 105, 'id': 'app-tab'},
|
||||
{'left': 37, 'top': 137, 'id': 'private-browsing', 'direction': 'up'},
|
||||
{'left': 88, 'top': 137, 'id': 'instant-website-id', 'direction': 'up'},
|
||||
{'left': 155, 'top': 105, 'id': 'tabs-on-top'},
|
||||
{'left': 345, 'top': 137, 'id': 'awesome-bar', 'direction': 'up'},
|
||||
{'left': 355, 'top': 105, 'id': 'addons-manager'},
|
||||
{'left': 510, 'top': 137, 'id': 'switch-to-tab', 'direction': 'up'},
|
||||
{'left': 575, 'top': 105, 'id': 'password-manager'},
|
||||
{'left': 695, 'top': 105, 'id': 'customize-toolbar'},
|
||||
{'left': 805, 'top': 105, 'id': 'personas'},
|
||||
{'left': 920, 'top': 137, 'id': 'bookmark-button', 'direction': 'up'},
|
||||
{'left': 928, 'top': 105, 'id': 'sync'}
|
||||
];
|
||||
tips[PLATFORM_MACOSX] = [
|
||||
{'left': 18, 'top': 105, 'id': 'app-tab'},
|
||||
{'left': 37, 'top': 137, 'id': 'private-browsing', 'direction': 'up'},
|
||||
{'left': 80, 'top': 137, 'id': 'instant-website-id', 'direction': 'up'},
|
||||
{'left': 155, 'top': 105, 'id': 'tabs-on-top'},
|
||||
{'left': 345, 'top': 137, 'id': 'awesome-bar', 'direction': 'up'},
|
||||
{'left': 355, 'top': 105, 'id': 'addons-manager'},
|
||||
{'left': 510, 'top': 137, 'id': 'switch-to-tab', 'direction': 'up'},
|
||||
{'left': 575, 'top': 105, 'id': 'password-manager'},
|
||||
{'left': 695, 'top': 105, 'id': 'customize-toolbar'},
|
||||
{'left': 805, 'top': 105, 'id': 'personas'},
|
||||
{'left': 920, 'top': 137, 'id': 'bookmark-button', 'direction': 'up'},
|
||||
{'left': 928, 'top': 105, 'id': 'sync'}
|
||||
];
|
||||
tips[PLATFORM_LINUX] = [
|
||||
{'left': 18, 'top': 130, 'id': 'app-tab'},
|
||||
{'left': 37, 'top': 170, 'id': 'private-browsing', 'direction': 'up'},
|
||||
{'left': 91, 'top': 170, 'id': 'instant-website-id', 'direction': 'up'},
|
||||
{'left': 155, 'top': 130, 'id': 'tabs-on-top'},
|
||||
{'left': 345, 'top': 170, 'id': 'awesome-bar', 'direction': 'up'},
|
||||
{'left': 355, 'top': 130, 'id': 'addons-manager'},
|
||||
{'left': 510, 'top': 170, 'id': 'switch-to-tab', 'direction': 'up'},
|
||||
{'left': 575, 'top': 130, 'id': 'password-manager'},
|
||||
{'left': 695, 'top': 130, 'id': 'customize-toolbar'},
|
||||
{'left': 805, 'top': 130, 'id': 'personas'},
|
||||
{'left': 928, 'top': 130, 'id': 'sync'}
|
||||
];
|
||||
|
||||
|
||||
var tipWidth = 500;
|
||||
var sceneWidth = 950;
|
||||
|
||||
$(tips[gPlatform]).each(function (index, tip) {
|
||||
drawTip(tip);
|
||||
})
|
||||
addHandlers();
|
||||
|
||||
function addHandlers() {
|
||||
// Fix for keyboard accessibility
|
||||
$('.tip-container').bind('mouseenter', function (e) {
|
||||
var $this = $(this);
|
||||
$this.children('.arrow, .tip')
|
||||
.css({'display': 'block'})
|
||||
.animate({'opacity': 1}, 300);
|
||||
$this.children('.callout')
|
||||
.animate({'opacity': 0}, 300);
|
||||
}).bind('mouseleave', function (e) {
|
||||
var $this = $(this);
|
||||
$this.children('.arrow, .tip')
|
||||
.animate({'opacity': 0}, 300, function () {
|
||||
$(this).css({'display': 'none'});
|
||||
});
|
||||
$this.children('.callout')
|
||||
.animate({'opacity': 1}, 300);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function drawTip(tip) {
|
||||
var $container = $(document.createElement('div'));
|
||||
$container.addClass('tip-container');
|
||||
if (tip.direction == 'up') {
|
||||
$container.addClass('up');
|
||||
}
|
||||
|
||||
var $callout = $(document.createElement('span'));
|
||||
$callout.addClass('callout')
|
||||
$callout.attr('tabindex', 0);
|
||||
$callout.css({'left': tip.left, 'top': tip.top});
|
||||
$container.append($callout);
|
||||
|
||||
var $tip = $('#' + tip.id);
|
||||
var left = Math.max(tip.left - (tipWidth/2), 0);
|
||||
if (left + tipWidth > sceneWidth) {
|
||||
left = sceneWidth - tipWidth;
|
||||
}
|
||||
$tip.css({'left': left, 'top': tip.top, 'opacity': 0, 'display': 'none'});
|
||||
$container.append($tip);
|
||||
|
||||
var $arrow = $(document.createElement('span'));
|
||||
$arrow.addClass('arrow');
|
||||
$arrow.css({'left': tip.left, 'top': tip.top, 'opacity': 0, 'display': 'none'});
|
||||
$container.append($arrow);
|
||||
|
||||
$tip.removeAttr('id');
|
||||
$container.attr('id', tip.id);
|
||||
|
||||
$('#figure').append($container);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -64,6 +64,10 @@ MINIFY_BUNDLES = {
|
|||
'firefox': (
|
||||
'css/firefox/template.less',
|
||||
),
|
||||
'firefox_central': (
|
||||
'css/sandstone/video.less',
|
||||
'css/firefox/central.less',
|
||||
),
|
||||
'firefox_customize': (
|
||||
'css/sandstone/video.less',
|
||||
'css/firefox/customize.less',
|
||||
|
|
@ -147,6 +151,10 @@ MINIFY_BUNDLES = {
|
|||
'js/site.js',
|
||||
'js/nav-main.js',
|
||||
),
|
||||
'firefox_central': (
|
||||
'js/mozilla-video-tools.js',
|
||||
'js/firefox/central.js',
|
||||
),
|
||||
'firefox_customize': (
|
||||
'js/mozilla-video-tools.js',
|
||||
'js/firefox/customize.js',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче