iPhone screenshots, iPhone page, complete with animations.

media/css/reader.css

@@ -5959,20 +5959,13 @@ background: transparent;
 /* = iPhone Page = */
 /* =============== */
 
-.NB-static-iphone .NB-iphone-mockup {
-    float: right;
-    margin: 12px 48px 0 0;
-    width: 384px;
-    height: 576px;
-    border: 1px solid #7F2021;
-}
-
-.NB-static-iphone .NB-iphone-features {
+.NB-static-iphone .NB-iphone-main {
     margin: 12px 36px 0;
     text-align: center;
 }
+
 .NB-static-iphone .NB-iphone-download {
-    padding: 4px 10px;
+    padding: 4px 20px 4px 10px;
     letter-spacing: -0.03em;
     text-align: center;
     background-color: #3A8FCE;
@@ -5980,16 +5973,16 @@ background: transparent;
         linear,
         left bottom,
         left top,
-        color-stop(0.16, #438ED3),
-        color-stop(0.84, #6EB5FA)
+        color-stop(0.06, #1E3C54),
+        color-stop(0.84, #648295)
     );
     background-image: -moz-linear-gradient(
         center bottom,
-        #438ED3 16%,
-        #6EB5FA 84%
+        #1E3C54 6%,
+        #648295 84%
     );
     color: white;
-    text-shadow: 0 -1px 2px #2063AB !important;
+    text-shadow: 0 -1px 0px #101C3B;
     border: 1px solid #2F6EA7;
     border-color: #508FCD #4483BF #2F6EA7 #3F7EB9;
     border-radius: 6px;
@@ -5997,6 +5990,7 @@ background: transparent;
     line-height: 1.73em;
     margin: 0 auto;
     cursor: pointer;
+
 }
 .NB-static-iphone .NB-iphone-download a {
     color: white;
@@ -6004,6 +5998,7 @@ background: transparent;
 }
 .NB-static-iphone .NB-iphone-download .NB-big {
     font-size: 1.45em;
+    font-weight: bold;
 }
 .NB-static-iphone .NB-iphone-download:hover {
     background-color: #3A8FCE;
@@ -6011,15 +6006,19 @@ background: transparent;
         linear,
         left bottom,
         left top,
-        color-stop(0.16, #3161A8),
-        color-stop(0.84, #568CDF)
+        color-stop(0.06, #182A42),
+        color-stop(0.84, #516A83)
     );
     background-image: -moz-linear-gradient(
         center bottom,
-        #3161A8 16%,
-        #568CDF 84%
+        #182A42 6%,
+        #516A83 84%
     );
 }
+.NB-static-iphone .NB-iphone-download img {
+    float: left;
+    margin: 0 8px 0 0;
+}
 .NB-static-iphone .NB-iphone-download:hover a {
     color: white;
 }
@@ -6037,4 +6036,65 @@ background: transparent;
         #568CDF 14%,
         #3161A8 86%
     );
+}
+
+.NB-static-iphone .NB-iphone-features {
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+    margin: 24px auto 0;
+    padding: 0;
+    font-size: 16px;
+    text-align: center;
+    clear: left;
+    overflow: hidden;
+}
+.NB-static-iphone .NB-iphone-features li {
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+}
+
+.NB-static-iphone .NB-iphone-features .NB-iphone-feature {
+    margin: 0 24px 24px 0;
+    float: left;
+}
+.NB-static-iphone .NB-iphone-features .NB-iphone-feature.NB-last {
+    margin-right: 0;
+}
+.NB-static-iphone .NB-iphone-features .NB-iphone-feature.NB-first {
+}
+.NB-static-iphone .NB-iphone-features .NB-iphone-feature img {
+    width: 128px;
+    height: 184px;
+    border: 1px solid #202020;
+    border-color: #909090 #808080 #505050 #606060;
+}
+.NB-static-iphone .NB-iphone-features .NB-iphone-feature .NB-iphone-feature-title {
+    font-weight: bold;
+    margin: 8px 0 0;
+}
+.NB-static-iphone .NB-iphone-features .NB-iphone-feature .NB-iphone-feature-subtitle {
+    margin: 8px 0 0;
+}
+
+
+.NB-static-iphone .NB-iphone-mockup {
+    float: right;
+    margin: 12px 48px 0 0;
+    width: 384px;
+    height: 576px;
+    border: 1px solid #7F2021;
+    position: relative;
+    overflow: hidden;
+}
+
+.NB-static-iphone .NB-iphone-mockup .NB-iphone-feature {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.NB-static-iphone .NB-iphone-mockup .NB-iphone-feature img {
+    width: 384px;
+    height: 576px;
 }

media/iphone/Classes/AddSiteViewController.h

@@ -45,6 +45,7 @@
 - (IBAction)doAddButton;
 - (NSString *)extractParentFolder;
 - (void)animateLoop;
+- (void)showFolderPicker;
 - (void)hideFolderPicker;
 - (IBAction)checkSiteAddress;
 

media/iphone/Classes/AddSiteViewController.m

@@ -77,6 +77,7 @@
 - (void)viewDidAppear:(BOOL)animated {
     [self.activityIndicator stopAnimating];
     [super viewDidAppear:animated];
+    [self showFolderPicker];
 }
 
 
@@ -132,15 +133,7 @@
 - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
     [errorLabel setText:@""];
     if (textField == inFolderInput && ![inFolderInput isFirstResponder]) {
-        [siteAddressInput resignFirstResponder];
-        [addFolderInput resignFirstResponder];
-        [inFolderInput setInputView:folderPicker];
-        if (folderPicker.frame.origin.y >= self.view.bounds.size.height) {
-            folderPicker.hidden = NO;
-            [UIView animateWithDuration:.35 animations:^{
-                folderPicker.frame = CGRectMake(0, self.view.bounds.size.height - folderPicker.frame.size.height, folderPicker.frame.size.width, folderPicker.frame.size.height);            
-            }];
-        }
+        [self showFolderPicker];
         return NO;
     } else if (textField == siteAddressInput) {
         [self hideFolderPicker];
@@ -397,6 +390,18 @@ numberOfRowsInComponent:(NSInteger)component {
     [inFolderInput setText:folder_title];
 }
 
+- (void)showFolderPicker {
+    [siteAddressInput resignFirstResponder];
+    [addFolderInput resignFirstResponder];
+    [inFolderInput setInputView:folderPicker];
+    if (folderPicker.frame.origin.y >= self.view.bounds.size.height) {
+        folderPicker.hidden = NO;
+        [UIView animateWithDuration:.35 animations:^{
+            folderPicker.frame = CGRectMake(0, self.view.bounds.size.height - folderPicker.frame.size.height, folderPicker.frame.size.width, folderPicker.frame.size.height);            
+        }];
+    }
+}
+
 - (void)hideFolderPicker {
     [UIView animateWithDuration:.35 animations:^{
         folderPicker.frame = CGRectMake(0, self.view.bounds.size.height, folderPicker.frame.size.width, folderPicker.frame.size.height);          

media/iphone/NewsBlur-Info.plist

@@ -24,7 +24,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string></string>
+	<string>1.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>

media/iphone/NewsBlur_Prefix.pch

@@ -15,7 +15,7 @@
 //    #define BACKGROUND_REFRESH_SECONDS -5
     #define BACKGROUND_REFRESH_SECONDS -10*60
 
-    #define NEWSBLUR_URL [NSString stringWithFormat:@"nb.local.host:8000"]
-//    #define NEWSBLUR_URL [NSString stringWithFormat:@"www.newsblur.com"]
+//    #define NEWSBLUR_URL [NSString stringWithFormat:@"nb.local.host:8000"]
+    #define NEWSBLUR_URL [NSString stringWithFormat:@"www.newsblur.com"]
 
 #endif

templates/static/iphone.xhtml

@@ -11,16 +11,93 @@
   </div>
 
   <div class="NB-iphone-mockup">
-    
+    <ul class="NB-iphone-features">
+        
+    </ul>
   </div>
   
-  <div class="NB-iphone-features">
+  <div class="NB-iphone-main">
     
     <a href="http://itunes.apple.com/us/app/newsblur/id463981119">
     <button class="NB-iphone-download">
+        <img src="{{ MEDIA_URL }}img/reader/download.png" />
       Download the free NewsBlur iPhone app on the<br /><span class="NB-big">iTunes App Store</span>
     </button></a>
     
+    <ul class="NB-iphone-features">
+        <li class="NB-iphone-feature NB-first" data-screenshot="1">
+            <img src="{{ MEDIA_URL }}img/iphone/v1.1 - Screenshot 1.png" />
+            <div class="NB-iphone-feature-title">All your sites</div>
+            <div class="NB-iphone-feature-subtitle">Read</div>
+        </li>
+        <li class="NB-iphone-feature" data-screenshot="2">
+            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 2.png" />
+            <div class="NB-iphone-feature-title">All your sites</div>
+            <div class="NB-iphone-feature-subtitle">Read</div>
+        </li>
+        <li class="NB-iphone-feature NB-last" data-screenshot="3">
+            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 3.png" />
+            <div class="NB-iphone-feature-title">All your sites</div>
+            <div class="NB-iphone-feature-subtitle">Read</div>
+        </li>
+    </ul>
+    <ul class="NB-iphone-features">
+        <li class="NB-iphone-feature NB-first" data-screenshot="4">
+            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 4.png" />
+            <div class="NB-iphone-feature-title">All your sites</div>
+            <div class="NB-iphone-feature-subtitle">Read</div>
+        </li>
+        <li class="NB-iphone-feature" data-screenshot="5">
+            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 5.png" />
+            <div class="NB-iphone-feature-title">All your sites</div>
+            <div class="NB-iphone-feature-subtitle">Read</div>
+        </li>
+        <li class="NB-iphone-feature NB-last" data-screenshot="6">
+            <img src="{{ MEDIA_URL }}img/iphone/Default.png" />
+            <div class="NB-iphone-feature-title">All your sites</div>
+            <div class="NB-iphone-feature-subtitle">Read</div>
+        </li>
+    </ul>
+
   </div>
 
+<script>
+$(document).ready(function() {
+    var $features = $('.NB-iphone-main .NB-iphone-feature');
+    
+    var setup_features = function() {
+        var $mockup = $('.NB-iphone-mockup .NB-iphone-features');
+        $mockup.append($features.clone());
+        $mockup.find('.NB-iphone-feature-title, .NB-iphone-feature-subtitle').remove();
+    };
+    
+    var hover_features = function() {
+        var $mockup = $('.NB-iphone-mockup .NB-iphone-feature');
+        $features.bind('mouseenter', function() {
+            var $other_features = $features.not(this);
+            var screenshots = $other_features.map(function() { return $(this).data('screenshot'); });
+            $mockup.each(function() {
+                var $this = $(this);
+                var screenshot_filtered = _.contains(screenshots, $this.data('screenshot'));
+                if (screenshot_filtered) {                    
+                    $this.animate({'left': -384}, {'duration': 300, 'queue': false, 'easing': 'easeInOutQuad'});
+                } else if (!screenshot_filtered) {
+                    if (parseInt($this.css('left'), 10) == -384) {
+                        $this.css({
+                            'opacity': 1,
+                            'z-index': 1,
+                            'left': 384
+                        });
+                    }
+                    $this.animate({'left': 0}, {'duration': 300, 'queue': false, 'easing': 'easeInOutQuad'});
+                }
+            });
+        });
+    };
+    
+    setup_features();
+    hover_features();
+    
+});
+</script>
 {% endblock content %}