stringer-rss/stringer

<% content_for :head do %>
  <%= stylesheet_link_tag 'reenie-beanie-font', media: 'all', 'data-turbolinks-track': 'reload' %>
<% end %>

<div class="tutorial-overlay">
  <p class="instruction" id="mark-all-instruction"><%= t('tutorial.mark_all') %> <br/><%= t('tutorial.as_read') %></p>
</div>
<div class="tutorial-overlay">
  <p class="instruction" id="refresh-instruction"><%= t('tutorial.refresh') %></p>
</div>
<div class="tutorial-overlay">
  <p class="instruction" id="feeds-instruction"><%= t('tutorial.your_feeds') %></p>
</div>
<div class="tutorial-overlay">
  <p class="instruction" id="add-feed-instruction"><%= t('tutorial.add_feed') %></p>
</div>
<div class="tutorial-overlay">
  <p class="instruction" id="story-instruction"><%= t('tutorial.your_stories') %><br/><%= t('tutorial.click_to_read') %></p>
</div>

<div id="action-bar">
  <%= render 'tutorials/action_bar', {stories: @sample_stories} %>
</div>

<%= render 'stories/js', { stories: @sample_stories } %>

<div id="stories">
  <ul id="story-list">
  </ul>
</div>

<div class="setup">
  <h1><%= t('tutorial.title') %> <span class="orange"><%= t('tutorial.simple') %></span>.</h1>
  <h2><%= t('tutorial.subtitle') %></h2>
  <hr />
  <p id="cta"><%= t('tutorial.description') %></p>
  <hr />
  <div class="center">
    <a href="/news" id="start" style="display: none" class="btn btn-primary"><%= t('tutorial.start') %></a>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  setTimeout(function() {
    $("#cta").fadeOut(function() {
      $(this).html("<%= t('tutorial.ready') %>").fadeIn();
      $("#start").fadeIn();
    });
  }, 10 * 1000);
});
</script>