Adding official Android app static page.

apps/static/views.py

@@ -45,6 +45,10 @@ def ios(request):
     return render_to_response('static/ios.xhtml', {},
                               context_instance=RequestContext(request))
     
+def android(request):
+    return render_to_response('static/android.xhtml', {},
+                              context_instance=RequestContext(request))
+    
 def ios_download(request):
     return render_to_response('static/ios_download.xhtml', {},
                               context_instance=RequestContext(request))

media/css/reader.css

@@ -7887,6 +7887,19 @@ form.opml_import_form input {
     border: 2px solid #39518B;
 }
 
+.NB-static-android .NB-ios-features .NB-ios-feature {
+    width: 138px;
+}
+.NB-static-android .NB-ios-features .NB-ios-feature img.NB-ios-ipad-screenshot {
+    width: 100px;
+    height: 160px;
+}
+.NB-static-android .NB-ios-features .NB-ios-feature img.NB-ios-iphone-screenshot {
+    width: 60px;
+    height: 106px;
+    top: 68px;
+}
+
 /* ========== */
 /* = Mockup = */
 /* ========== */
@@ -7993,6 +8006,53 @@ form.opml_import_form input {
     }
 }
 
+.NB-static-android .NB-ios-mockup .NB-ios-ipad-skeleton {
+    height: 729px;
+}
+.NB-static-android .NB-ios-mockup .NB-ios-iphone-skeleton {
+    width: 270px;
+    height: 469px;
+}
+.NB-static-android .NB-ios-mockup .NB-ios-features-ipad {
+    top: 42px;
+    left: 147px;
+    width: 302px;
+    height: 442px;
+}
+.NB-static-android .NB-ios-mockup .NB-ios-features-iphone {
+    top: 279px;
+    left: 50px;
+    width: 172px;
+    height: 268px;
+}
+.NB-static-android .NB-ios-mockup .NB-ios-feature img.NB-ios-ipad-screenshot {
+    width: 302px;
+    height: 484px;
+    top: -13px;
+    left: 0;
+    border-left: none;
+    border-top: none;
+    border-bottom: none;
+    border-right: 1px solid #505050;
+}
+.NB-static-android .NB-ios-mockup .NB-ios-feature img.NB-ios-iphone-screenshot {
+    width: 172px;
+    height: 300px;
+    top: -10px;
+    left: 0;
+    border-left: none;
+    border-top: none;
+    border-bottom: none;
+    border-right: 1px solid #505050;
+}
+@media screen and (max-width: 1100px) {
+    .NB-static-android .NB-ios-mockup .NB-ios-features-ipad {
+        left: 214px;
+    }
+    .NB-static-android .NB-ios-mockup .NB-ios-features-iphone {
+        left: -13px;
+    }
+}
 /* ================= */
 /* = Friends Modal = */
 /* ================= */

templates/static/android.xhtml

@@ -0,0 +1,181 @@
+{% extends 'base.html' %}
+
+{% block bodyclass %}NB-static NB-static-iphone NB-static-android{% endblock %}
+
+{% block title %}The NewsBlur Android App{% endblock %}
+
+{% block content %}
+
+  <div class="NB-static-title">
+    The NewsBlur Android App
+  </div>
+
+  <div class="NB-ios-mockup">
+      <div class="NB-ios-ipad-skeleton">
+        <img src="{{ MEDIA_URL }}img/android/Nexus 7 Skeleton.png">
+      </div>
+      <ul class="NB-ios-features NB-ios-features-ipad">
+        
+      </ul>
+      <div class="NB-ios-iphone-skeleton">
+        <img src="{{ MEDIA_URL }}img/android/Galaxy Nexus Skeleton.png">
+      </div>
+      <ul class="NB-ios-features NB-ios-features-iphone">
+        
+      </ul>
+  </div>
+  
+  <div class="NB-ios-main NB-android-main">
+    
+    <div class="NB-ios-title">
+        <div><a href="/">NewsBlur</a> is a free social news reader.</div>
+        <div class="NB-ios-subtitle">Built <a href="http://github.com/samuelclay/">in the open</a> in New York and San Francisco.</div>
+        
+    </div>
+    
+    <div class="NB-ios-stripe-wrapper">
+    <div class="NB-ios-stripe">
+    <a href="https://play.google.com/store/apps/details?id=com.newsblur"  class="NB-ios-download">
+        <button>
+            <img src="{{ MEDIA_URL }}img/reader/download.png" />
+          Download the free NewsBlur Android app on <br /><span class="NB-big">Google Play</span>
+        </button>
+    </a>
+    </div>
+    </div>
+    <br />
+    <ul class="NB-ios-features">
+        <li class="NB-ios-feature" data-screenshot="1">
+            <img src="{{ MEDIA_URL }}img/android/v1 - 1 large.png" class="NB-ios-ipad-screenshot" />
+            <img src="{{ MEDIA_URL }}img/android/v1 - 1.png" class="NB-ios-iphone-screenshot" />
+            <div class="NB-ios-feature-title">Sites &amp; Friends</div>
+            {# <div class="NB-ios-feature-subtitle">Read</div> #}
+        </li>
+        <li class="NB-ios-feature" data-screenshot="2">
+            <img src="{{ MEDIA_URL }}img/android/v1 - 2 large.png" class="NB-ios-ipad-screenshot" />
+            <img src="{{ MEDIA_URL }}img/android/v1 - 2.png" class="NB-ios-iphone-screenshot" />
+            <div class="NB-ios-feature-title">River of News</div>
+            {# <div class="NB-ios-feature-subtitle">Read</div> #}
+        </li>
+        <li class="NB-ios-feature" data-screenshot="3">
+            <img src="{{ MEDIA_URL }}img/android/v1 - 3 large.png" class="NB-ios-ipad-screenshot" />
+            <img src="{{ MEDIA_URL }}img/android/v1 - 3.png" class="NB-ios-iphone-screenshot" />
+            <div class="NB-ios-feature-title">Easy reading</div>
+            {# <div class="NB-ios-feature-subtitle">Read</div> #}
+        </li>
+    </ul>
+    <br />
+    <ul class="NB-ios-features">
+        <li class="NB-ios-feature" data-screenshot="4">
+            <img src="{{ MEDIA_URL }}img/android/v1 - 4 large.png" class="NB-ios-ipad-screenshot" />
+            <img src="{{ MEDIA_URL }}img/android/v1 - 4.png" class="NB-ios-iphone-screenshot" />
+            <div class="NB-ios-feature-title">Expand your network</div>
+            {# <div class="NB-ios-feature-subtitle">Read</div> #}
+        </li>
+        <li class="NB-ios-feature" data-screenshot="5">
+            <img src="{{ MEDIA_URL }}img/android/v1 - 5 large.png" class="NB-ios-ipad-screenshot" />
+            <img src="{{ MEDIA_URL }}img/android/v1 - 5.png" class="NB-ios-iphone-screenshot" />
+            <div class="NB-ios-feature-title">Comments from friends</div>
+            {# <div class="NB-ios-feature-subtitle">Read</div> #}
+        </li>
+        <li class="NB-ios-feature NB-active" data-screenshot="6">
+            <img src="{{ MEDIA_URL }}img/android/Default large.png" class="NB-ios-ipad-screenshot" />
+            <img src="{{ MEDIA_URL }}img/android/Default.png" class="NB-ios-iphone-screenshot" />
+            <div class="NB-ios-feature-title">The NewsBlur<br />Android App</div>
+            {# <div class="NB-ios-feature-subtitle">Read</div> #}
+        </li>
+    </ul>
+
+  </div>
+
+{% endblock content %}
+
+
+{% block extra_head_js %}
+<script>
+$(document).ready(function() {
+    var $features = $('.NB-ios-main .NB-ios-feature');
+    var iphone_width, ipad_width;
+    
+    var copy_features_to_mockup = function() {
+        var $mockup = $('.NB-ios-mockup .NB-ios-features-iphone');
+        var $mockup_ipad = $('.NB-ios-mockup .NB-ios-features-ipad');
+        $mockup.append($features.clone());
+        $mockup.find('.NB-ios-feature-title, .NB-ios-feature-subtitle').remove();
+        
+        $mockup_ipad.append($mockup.children().clone());
+        iphone_width = $('.NB-ios-mockup .NB-ios-iphone-screenshot').first().width();
+        ipad_width = $('.NB-ios-mockup .NB-ios-ipad-screenshot').first().width();
+        $mockup.children().not(':last').css('left', iphone_width);
+        $mockup_ipad.children().not(':last').css('left', ipad_width);
+
+        $mockup.find('.NB-ios-ipad-screenshot').remove();
+        $mockup_ipad.find('.NB-ios-iphone-screenshot').remove();
+        
+        $mockup.children().addClass("NB-ios-iphone");
+        $mockup_ipad.children().addClass("NB-ios-ipad");
+    };
+    
+    var hover_features = function() {
+        $features.bind('mouseenter', function() {
+            select_feature($(this));
+        });
+    };
+    
+    var select_feature = function($feature) {
+        var $mockup = $('.NB-ios-mockup .NB-ios-feature');
+        var $other_features = $features.not($feature);
+        var screenshots = $other_features.map(function() { return $(this).data('screenshot'); });
+        $features.removeClass('NB-active');
+        $feature.addClass('NB-active');
+        $mockup.each(function() {
+            var $this = $(this);
+            var screenshot_filtered = _.contains(screenshots, $this.data('screenshot'));
+            var feature_width = $this.hasClass('NB-ios-iphone') ? iphone_width : ipad_width;
+            var left = -1 * (feature_width + 1);
+            if (screenshot_filtered) {  
+                if (parseInt($this.css('left'), 10) > 0) left = feature_width;
+                $this.animate({'left': left}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
+            } else if (!screenshot_filtered) {
+                if (parseInt($this.css('left'), 10) <= (-1 * feature_width)) {
+                    $this.css({
+                        'left': feature_width
+                    });
+                }
+                $this.animate({'left': 0}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
+            }
+        });
+    };
+    
+    var rotation_interval;
+    var user_on_features = false;
+    var rotate_features = function() {
+        $('.NB-ios-main .NB-ios-features').bind('mouseenter', function() {
+            user_on_features = true;
+        }).bind('mouseleave', function() {
+            user_on_features = false;
+            clearInterval(rotation_interval);
+            start_rotation(1000);
+        });
+    };
+    var start_rotation = function(duration) {
+        clearInterval(rotation_interval);
+        rotation_interval = setInterval(function() {
+            if (!user_on_features) {
+                var current_feature = parseInt($features.filter('.NB-active').data('screenshot'), 10);
+                var next_feature = ((current_feature) % 6); // Off by 1, so no need to +1
+                var $next_feature = $features.eq(next_feature);
+                select_feature($next_feature);
+            }
+            if (duration != 3000) start_rotation(3000);
+        }, duration);
+    };
+    
+    copy_features_to_mockup();
+    hover_features();
+    rotate_features();
+    start_rotation(1000);
+    
+});
+</script>
+{% endblock %}

urls.py

@@ -38,6 +38,7 @@ urlpatterns = patterns('',
     url(r'^ios/?',          static_views.ios, name='ios-static'),
     url(r'^iphone/?',       static_views.ios, name='ios-static'),
     url(r'^ipad/?',         static_views.ios, name='ios-static'),
+    url(r'^android/?',      static_views.android, name='android-static'),
     url(r'^firefox/?',      static_views.firefox, name='firefox'),
     url(r'zebra/',          include('zebra.urls',  namespace="zebra",  app_name='zebra')),
 )