Skip to content
Browse files

Adding official Android app static page.

  • Loading branch information...
1 parent 2c942cf commit f570a5ea71e7b019da0be9043a40bf6479c94387 @samuelclay committed Oct 18, 2012
View
4 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))
View
60 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 = */
/* ================= */
View
BIN media/img/android/Default large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/Default.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/Galaxy Nexus Skeleton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/Nexus 7 Skeleton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 1 large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 2 large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 3 large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 4 large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 4.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 5 large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/android/v1 - 5.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/chrome/promo_banner.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN media/img/chrome/promo_banner_large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
181 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 %}
View
1 urls.py
@@ -38,6 +38,7 @@
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')),
)

0 comments on commit f570a5e

Please sign in to comment.
Something went wrong with that request. Please try again.