Test port of Firefox Security page

apps/mozorg/templates/mozorg/firefox-security.html

@@ -0,0 +1,146 @@
+{% extends "base.html" %}
+
+{% block page_title %}Mozilla Firefox Web Browser — Safe Web Browsing{% endblock %}
+{% block body_id %}firefox-security{% endblock %}
+
+{% block site_css %}
+  {{ css('firefox-security') }}
+{% endblock %}
+
+{% block site_header_logo %}
+<h1><img src="/media/img/sandstone/header-mozilla-slate.png" alt="mozilla"></h1>
+{% endblock %}
+
+{% block content %}
+
+<div id="main-feature">
+  <h1 class="center">Firefox Helps You <span class="huge">Stay Safe</span></h1>
+  <a href="#" class="button top-right">Download Firefox</a>
+</div>
+
+<nav class="menu-bar billboard">
+  <ul>
+    <li><a href="#privacy">Protect Your Privacy</a></li>
+    <li><a href="#secure">Browse with Security</a></li>
+    <li><a href="#control">Stay in Control</a></li>
+    <li><a href="#mission">Part of Our Mission</a></li>
+  </ul>
+</nav>
+
+<section id="privacy" class="container">
+<div class="row">
+  <div class="span3">
+    <h2>Protect Your Privacy</h2>
+    <p>When you browse, you leave a trail of data that potentially contains all sorts of personal information. We believe this info belongs to you and you alone (and least of all to overzealous advertisers), and have built in features to ensure that’s the case.</p>
+    <p class="top-link"><a href="#main-feature">Return to Top</a></p>
+  </div>
+  <div class="section-image span4">
+    <img src="/media/img/firefox/security/private-browsing.png" alt="Private Browsing screenshot" />
+  </div>
+  <ul class="section-list span3">
+    <li>
+      <h4>Do Not Track</h4>
+      <p>Many sites track your online behavior and sell that data to advertisers. Firefox lets you tell sites that you want to opt out of behavioral tracking. <a href="http://support.mozilla.org/kb/how-do-i-stop-websites-tracking-me">Learn how</a>.</p>
+    </li>
+    <li>
+      <h4>Private Browsing</h4>
+      <p>Sometimes it’s nice to go undercover, so turn this feature on and protect your browsing history. <a href="http://support.mozilla.org/kb/Private%20Browsing">Learn how</a>.</p>
+    </li>
+    <li>
+      <h4>Clear Recent History</h4>
+      <p>Clear all your private data or just your most recent activity with a few quick clicks. <a href="http://support.mozilla.org/kb/Clear%20Recent%20History">Learn how</a>.</p>
+    </li>
+    <li>
+      <h4>Forget This Site</h4>
+      <p>Having second thoughts about having visited a certain site? Remove every trace of ever having been there! <a href="http://support.mozilla.org/kb/Clear%20Recent%20History#w_how-do-i-remove-a-single-website-from-my-history">Learn how</a>.</p>
+    </li>
+    <li>
+      <h4>Content Security Policy</h4>
+      <p>Firefox lets sites explicitly tell it which content is legitimate, thus protecting you from cross-site scripting attacks.</p>
+    </li>
+  </ul>
+</div>
+</section>
+
+<section id="secure" class="container">
+<div class="row">
+  <div class="span3">
+    <h3>Browse With Security</h3>
+    <p>Whether it’s buying a gift, paying your bills or simply signing in to Facebook, it’s important keep your personal info out of the hands of any online bad guys who might be snooping around. Fortunately, Firefox is packed with advanced security features to help you stay safe.</p>
+    <p class="top-link"><a href="#main-feature">Return to Top</a></p>
+  </div>
+  <div class="section-image span4">
+    <img src="/media/img/firefox/security/security.png" alt="Anti-Malware screenshot" />
+  </div>
+  <ul class="section-list span3">
+    <li>
+      <h4>Instant Website ID</h4>
+      <p>A color-coded system makes it easy to check on suspicious sites and avoid Web forgeries. <a href="http://support.mozilla.org/kb/Site%20Identity%20Button">Learn more</a>.</p>
+    </li>
+    <li>
+      <h4>Anti-Phishing & Anti-Malware</h4>
+      <p>Firefox protects you from trojan horses and spyware, and warns you away from fraudulent sites.</p>
+    </li>
+    <li>
+      <h4>Secure Software Installation</h4>
+      <p>A secure connection is required before you can install add-ons and other 3rd party software.</p>
+    </li>
+    <li>
+      <h4>Anti-Virus Integration</h4>
+      <p>Firefox integrates elegantly with your computer’s anti-virus software whenever you download.</p>
+    </li>
+  </ul>
+</div>
+</section>
+
+<section id="control" class="container">
+<div class="row">
+  <div class="span3">
+    <h3>Stay In <span>Control</span></h3>
+    <p>The online world is always changing, which is why we give you easy-to-use tools to let you adapt and make smart choices as you go.</p>
+    <p class="top-link"><a href="#main-feature">Return to Top</a></p>
+  </div>
+  <div class="section-image span4">
+    <img src="/media/img/firefox/security/control.png" alt="Plugins screenshot" />
+  </div>
+  <ul class="section-list span3">
+    <li>
+      <h4>Plugin Check</h4>
+      <p>Outdated 3rd party plugins can be a major risk, so we made it easy to find out what to update. <a href="/en-US/plugincheck/">Check your plugins.</a></p>
+    </li>
+    <li>
+      <h4>Parental Controls</h4>
+      <p>Enforce parental control settings you’ve entered on Windows 7 to stop unwanted downloads and more.</p>
+    </li>
+    <li>
+      <h4>Customized Security Settings</h4>
+      <p>Control the level of scrutiny you’d like Firefox to give a site with a variety of customized settings. <a href="http://support.mozilla.org/kb/Options%20window%20-%20Security%20panel">Learn how</a>.</p>
+    </li>
+  </ul>
+</div>
+</section>
+
+<section id="mission" class="container">
+<div class="row">
+  <div class="span3">
+    <h3>It’s Part of Our <span>Mission</span></h3>
+    <p>Mozilla is a non-profit organization with the goal of making the Web better for everyone. We’re not trying to make money off our users – we just want you to have the best possible experience online, and that includes keeping you and your personal information safe and private.</p>
+    <p class="top-link"><a href="#main-feature">Return to Top</a></p>
+  </div>
+  <div class="section-image span4">
+    <img alt="Communtity icon" src="/media/img/firefox/security/community.png">
+  </div>
+  <ul class="section-list span3">
+    <li>
+      <h4>Commitment to Your Privacy</h4>
+      <p>Firefox adheres to a strict privacy policy that prevents us from tracking who you are or what you do online. <a href="/en-US/legal/privacy/firefox.html">Read the policy.</a></p>
+    </li>
+    <li>
+      <h4>The Mission Matters</h4>
+      <p>Our mission guides the way we make Firefox, meaning we always make decisions based on your needs first. <a href="http://www.mozilla.org/about/mission.html">Learn more.</a></p>
+    </li>
+  </ul>
+</div>
+</section>
+
+{% endblock %}

apps/mozorg/urls.py

@@ -1,5 +1,5 @@
 from django.conf.urls.defaults import *
-from views import contribute, channel, button, new, sandstone, geolocation
+from views import contribute, channel, firefoxSecurity, button, new, sandstone, geolocation
 
 urlpatterns = patterns('',
     (r'^button/', button),
@@ -8,5 +8,6 @@ urlpatterns = patterns('',
     (r'^new/', new),
     (r'^sandstone/', sandstone),
 
-    (r'^firefox/geolocation/', geolocation)
+    (r'^firefox/geolocation/', geolocation),
+    (r'^firefox/security/', firefoxSecurity),
 )

apps/mozorg/views.py

@@ -7,6 +7,9 @@ def index(request):
 def contribute(request):
     return l10n_utils.render(request, "mozorg/contribute.html")
 
+def firefoxSecurity(request):
+    return l10n_utils.render(request, "mozorg/firefox-security.html")
+
 def channel(request):
     data = {}
 

media/css/firefox/security.less

@@ -0,0 +1,60 @@
+@import "../sandstone/sandstone.less";
+
+#wrapper {
+    background-color: #eee;
+    background-image: url(/media/img/sandstone/bg-slate.png);
+}
+
+section.container {
+    border-bottom: 1px dotted @borderColor;
+    padding-bottom: @baseLine * 2;
+    margin-bottom: @baseLine * 2;
+}
+
+section.container:last-child {
+    border-bottom: 0;
+}
+
+a,
+a:link,
+a:visited {
+    color: @linkBlue;
+}
+
+a:hover,
+a:active {
+    color: darken(@linkBlue, 10%);
+}
+
+.section-list {
+    margin: 0;
+    li {
+        list-style-type: none;
+        margin: 0;
+    }
+    p {
+        .small;
+    }
+    h4 {
+        margin: 0;
+    }
+}
+
+.section-image img {
+    position: relative;
+    top: -8px;
+}
+
+#main-feature {
+    position: relative;
+    .button {
+        position: absolute;
+        top: 0;
+        right: @baseLine * 2;
+    }
+}
+
+#mission img {
+    margin: @baseLine auto;
+    display: block;
+}

settings/base.py

@@ -61,6 +61,9 @@ MINIFY_BUNDLES = {
             'css/covehead/content.css',
             'css/covehead/channel.css',
         ),
+        'firefox-security': (
+            'css/firefox/security.less',
+        ),
         'home': (
             'css/covehead/template.css',
             'css/covehead/content.css',