{% extends 'base.html' %}

{% load recommendations_tags utils_tags statistics_tags %}

{% block extra_head_js %}
    <script>
        $(document).ready(function() {

            NEWSBLUR.reader = new NEWSBLUR.Reader();
            NEWSBLUR.reader.init({
                hide_sidebar: true
            });

            NEWSBLUR.welcome = new NEWSBLUR.Welcome();
        });
    </script>
{% endblock %}

{% block bodyclass %}NB-welcome{% endblock %}

{% block header %}
    {% render_feeds_skeleton %}
{% endblock header %}

{% block content %}

<div class="NB-welcome-container NB-splash">
    
    <div class="NB-welcome-header">
        <div class="NB-background">
          <div class="NB-inner">
              <div class="NB-welcome-header-logo">
                  <a href="/"><img src="{{ MEDIA_URL }}img/logo_512.png" class="NB-module-logo-image" style="height: 128px;" /></a>
              </div>
              <div class="NB-welcome-header-tagline">
                  <span style="font-size:24px;">NewsBlur is a personal news reader</span><br /><span style="font-size: 17px;color: #FBDB9B">bringing people together to talk about the world</span>
              </div>
              <div class="NB-welcome-header-captions">
                  <div class="NB-welcome-header-caption NB-1 {% if not post_request %}NB-active{% endif %}" data-ss="1"><span>Web</span></div>
                  <div class="NB-welcome-header-caption NB-2" data-ss="2"><span>iPad &amp; iPhone</span></div>
                  <div class="NB-welcome-header-caption NB-3" data-ss="3"><span>Android</span></div>
                  <div class="NB-welcome-header-caption NB-welcome-header-caption-signin {% if post_request %}NB-active{% endif %}"><span>Sign in</span></div>
              </div>
              <div class="NB-welcome-header-actions">
                  <div class="NB-welcome-header-action">
                      <div class="NB-welcome-header-action-subtext">First</div>
                      <div class="NB-button NB-button-tryout">
                          <img src="{{ MEDIA_URL }}img/welcome/04-eye@2x.png" style="width: 20px; height: 13px; margin-top: 2px">
                          Try out NewsBlur
                      </div>
                  </div>
                  <div class="NB-welcome-header-action">
                      <div class="NB-welcome-header-action-subtext">Then</div>
                      <div class="NB-button NB-button-login">
                          <img src="{{ MEDIA_URL }}img/welcome/09-lightning@2x.png" class="NB-welcome-header-action-bolt" style="width: 12px; height: 18px; margin-bottom: -2px">
                          <img src="{{ MEDIA_URL }}img/reader/32-Arrow-Right.png" class="NB-welcome-header-action-arrow">
                          Sign up or Log in
                      </div>
                  </div>
              </div>
              <div class="NB-welcome-header-image NB-1 {% if not post_request %}NB-active{% endif %}">
                  <img src="{{ MEDIA_URL }}img/welcome/header-web.png">
              </div>
              <div class="NB-welcome-header-image NB-2">
                  <img src="{{ MEDIA_URL }}img/welcome/header-ios.png">
              </div>
              <div class="NB-welcome-header-image NB-3">
                  <img src="{{ MEDIA_URL }}img/welcome/header-android.png">
              </div>

          </div>
          
          <div class="NB-inner-account">

            <div class="NB-welcome-header-account {% if post_request %}NB-active{% endif %}">
                <div class="NB-account-header">
                    <div class="NB-module-header-login">Log in</div>
                    <div class="NB-module-header-signup">Sign up</div>
                </div>
                <div class="NB-login">
                    <form method="post" action="{% url "welcome-login" %}">
                        {% csrf_token %}

                        <div>
                            {{ login_form.username.label_tag }}
                            {{ login_form.username }}
                        </div>
                        <div>
                            <div class="NB-signup-optional">
                                <a href="{% url "profile-forgot-password" %}" class="NB-splash-link">Forgot?</a>
                            </div>
                            {{ login_form.password.label_tag }}
                            {{ login_form.password }}
                        </div>

                        {{ login_form.add }}
                        <input name="submit" type="submit" class="NB-modal-submit-button NB-modal-submit-green" value="log in" />
                        <input type="hidden" name="next" value="/" />
                    </form>
                    {% if login_form.errors %}
                        {% for field, error in login_form.errors.items %}
                            {{ error|safe }}
                        {% endfor %}
                    {% endif %}
                </div>
            
                <div class="NB-signup">
                    <form method="post" action="{% url "welcome-signup" %}">
                        {% csrf_token %}

                        <div>
                            {{ signup_form.username.label_tag }}
                            {{ signup_form.username }}
                        </div>
                        <div class="NB-signup-hidden">
                            <div class="NB-signup-optional">Optional</div>
                            {{ signup_form.password.label_tag }}
                            {{ signup_form.password }}
                        </div>
                        <div class="NB-signup-hidden">
                            {{ signup_form.email.label_tag }}
                            {{ signup_form.email }}
                        </div>

                        <input name="submit" type="submit" class="NB-modal-submit-button NB-modal-submit-green" value="create account" />
                        <input type="hidden" name="next" value="/" />
                    </form>
                    {% if signup_form.errors %}
                        {% for field, error in signup_form.errors.items %}
                            {{ error|safe }}
                        {% endfor %}
                    {% else %}
                        <img src="{{ MEDIA_URL }}img/welcome/fleuron.png" style="width: 36px; height: 36px; opacity: .35; margin: 24px auto; display: block">
                    {% endif %}
                </div>
            </div>
          </div>
        </div>
    </div>
    
    <div class="NB-welcome-features">
        <div class="NB-inner">
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_1.png">
                <div class="NB-feature-caption">Real-time RSS</div>
                <div class="NB-feature-text">Stories are pushed directly to you, so you can read news as it comes in</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_2.png">
                <div class="NB-feature-caption">Original Site</div>
                <div class="NB-feature-text">Read the content in context, the way it was meant to be seen</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_3.png">
                <div class="NB-feature-caption">Shared Stories</div>
                <div class="NB-feature-text">Reading news is better with friends. Share stories on your public blurblog</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_4.png">
                <div class="NB-feature-caption">Training</div>
                <div class="NB-feature-text">Hide the stories you don't like and highlight the stories you do</div>
            </div>
        </div>    
    </div>
    
    <div class="NB-welcome-features">
        <div class="NB-inner">
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_5.jpg">
                <div class="NB-feature-caption">Full Text Search</div>
                <div class="NB-feature-text">Quickly find stories across all of your subscriptions</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_6.png">
                <div class="NB-feature-caption">Story Tagging</div>
                <div class="NB-feature-text">Save stories with custom tags for fast references</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_7.jpg">
                <div class="NB-feature-caption">Blurblog Privacy</div>
                <div class="NB-feature-text">Share stories with the world or only with your friends</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/feature_8.jpg">
                <div class="NB-feature-caption">Third-party Apps</div>
                <div class="NB-feature-text">Supports <a href="http://reederapp.com" class="NB-splash-link" target="_blank">Reeder</a>, <a href="http://readkitapp.com" class="NB-splash-link" target="_blank">ReadKit</a>, <a href="http://supertop.co/unread/" class="NB-splash-link" target="_blank">Unread</a>, and loads more</div>
            </div>
        </div>
    </div>
    
    
    <div class="NB-welcome-subfeatures">
        <div class="NB-inner">
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_1.png">
                <div class="NB-feature-caption">Saved Searches</div>
                <div class="NB-feature-text">Regularly used searches are conveniently given their own feeds</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/header-ios.png">
                <div class="NB-feature-caption">First-class iOS App</div>
                <div class="NB-feature-text">The NewsBlur iOS app is free and is jam-packed with features</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_3.png">
                <div class="NB-feature-caption">Read the Full Story</div>
                <div class="NB-feature-text">The original story from truncated RSS feeds is seamlessly expanded</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/header-android.png">
                <div class="NB-feature-caption">First-class Android App</div>
                <div class="NB-feature-text">The NewsBlur Android app is free and has it all</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_5.png">
                <div class="NB-feature-caption">Track Changes</div>
                <div class="NB-feature-text">See how a story evolved since it was first published</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_6.png">
                <div class="NB-feature-caption">IFTTT Support</div>
                <div class="NB-feature-text">Hook NewsBlur up to nearly every service on the web</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_7.png">
                <div class="NB-feature-caption">Email Newsletters</div>
                <div class="NB-feature-text">Read your email newsletters where they belong, in a news reader</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_8.png">
                <div class="NB-feature-caption">Grid, List, Split</div>
                <div class="NB-feature-text">Every site has its own story layout, so you can mix and match</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_9.png">
                <div class="NB-feature-caption">Dark Mode</div>
                <div class="NB-feature-text">Easy on the eyes and built into the web, iOS, and Android</div>
            </div>
            <div class="NB-feature">
                <img src="{{ MEDIA_URL }}img/welcome/subfeature_10.png">
                <div class="NB-feature-caption">Twitter & YouTube</div>
                <div class="NB-feature-text">Even sites that don't publish RSS feeds can be followed</div>
            </div>
        </div>
    </div>

    <div class="NB-welcome-pricing">
        <div class="NB-inner">
            <h2>Pricing</h2>
            <p>NewsBlur is free on the web, iPad, iPhone, and Android. By subscribing to a <br> premium account, you support a growing service and unlock a few restrictions.</p>
            <table class="NB-pricing">
                <tr>
                    <th></th>
                    <th>Free Account</th>
                    <th>
                        <div class="NB-price">$36 / year</div>
                        Premium Subscription
                    </th>
                    <th>
                        <div class="NB-price">$99 / year</div>
                        Premium Archive Subscription
                    </th>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-1"></div> Number of Sites</td>
                    <td>Up to 64 sites</td>
                    <td>1,000 sites</td>
                    <td>Unlimited sites</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-3"></div> River of News</td>
                    <td>Only 3 stories at a time</td>
                    <td>Every story from every site</td>
                    <td>Plus every story ever published in the archive</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-4"></div> Search</td>
                    <td>-</td>
                    <td>Search for recent stories, your saved stories, and shared stories</td>
                    <td>Search the entire history of every site</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-7"></div> Custom RSS</td>
                    <td>-</td>
                    <td>Only saved stories</td>
                    <td>Saved stories + folders</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-2"></div> Site updates</td>
                    <td>1X</td>
                    <td>Up to 10X as often</td>
                    <td>Same as premium</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-5"></div> Saved story tagging</td>
                    <td>Only save stories</td>
                    <td>Tag saved stories</td>
                    <td>Same as premium</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-6"></div> Privacy</td>
                    <td>Public shares only</td>
                    <td>Public, protected, and private shares</td>
                    <td>Same as premium</td>
                </tr>
                <tr>
                    <td class="NB-bold"><div class="NB-welcome-premium-bullet NB-8"></div> Full Text</td>
                    <td>Only what's in the feed</td>
                    <td>Full text of each story</td>
                    <td>Same as premium</td>
                </tr>
                <tr>
                    <td class="NB-bold">
                        <div class="NB-welcome-premium-bullet NB-9"></div>
                        Feed poor Lyric
                    </td>
                    <td>She goes hungry</td>
                    <td colspan="2" class="NB-lyric-text">
                        <img src="{{ MEDIA_URL }}img/reader/lyric.jpg" class="NB-lyric">Home cooked meals of green beans, sweet potatoes, carrots, and brown rice</td>
                </tr>
            </table>
        </div>
    </div>
    
    <div class="NB-welcome-activity">
        <div class="NB-inner">
            {% render_features_module %}
            <h2>Real-time Stats</h2>
            {% render_statistics_graphs statistics %}
        </div>
    </div>

    <div class="NB-welcome-bottomactions">
        <div class="NB-inner">
            <div class="NB-welcome-header-actions">
                <div class="NB-welcome-header-action">
                    <div class="NB-welcome-header-action-subtext">First</div>
                    <div class="NB-button NB-button-tryout">
                        <img src="{{ MEDIA_URL }}img/welcome/04-eye@2x.png" style="width: 20px; height: 13px; margin-top: 2px">
                        Try out NewsBlur
                    </div>
                </div>
                <div class="NB-welcome-header-action">
                    <div class="NB-welcome-header-action-subtext">Then</div>
                    <div class="NB-button NB-button-login">
                        <img src="{{ MEDIA_URL }}img/welcome/09-lightning@2x.png" class="NB-welcome-header-action-bolt" style="width: 12px; height: 18px; margin-bottom: -2px">
                        <img src="{{ MEDIA_URL }}img/reader/32-Arrow-Right.png" class="NB-welcome-header-action-arrow">
                        Sign up or Log in
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</div>

{% endblock %}

{% block footer %}

    <footer class="NB-welcome-footer">
        <div class="NB-welcome-footer-content NB-inner">
            <div class="NB-footer-icons">
                <a href="http://github.com/samuelclay" title="GitHub"><img src="{{ MEDIA_URL }}img/welcome/github_favicon.png"></a>
                <a href="http://twitter.com/newsblur" title="Twitter"><img src="{{ MEDIA_URL }}img/welcome/twitter_favicon.png"></a>
            </div>
            <a href="{% url "index" %}"><img src="{{ MEDIA_URL }}/img/logo_newsblur_blur.png" style="height: 32px;" class="NB-footer-logo" title="NewsBlur" alt="NewsBlur" /></a>
            is built in Cambridge, Massachusetts by 
            <a href="http://twitter.com/samuelclay" class="NB-splash-link">
                <img src="{{ MEDIA_URL }}img/static/Samuel%20Clay.jpg" class="NB-twitter-avatar">
                @samuelclay
            </a>
        </div>
        
        {% render_footer "welcome" %}
        
    </footer>
{% endblock footer %}