notebook/app/views/subscriptions/referrals.html.erb

<div class="row">
  <div class="col s12 m9">
    <div class="hoverable card">
      <div class="card-content">
      <div class="card-title">Your referral code</div>
        <p>
          Use your personal referral URL for sharing Notebook.ai with others to make sure you get credit when they sign up!
        </p>
        <br />
        <p>
          <div class="center grey-text text-darken-2">Your referral link is</div>
          <input type="text"
            value="<%= @share_link %>"
            style="text-align: center; font-size: 140%"
            onClick="this.select();" />
        </p>
      </div>
    </div>
  </div>
  <div class="col s12 m3">
    <div class="hoverable card-panel center" style="border-bottom: 10px solid #2196F3">
      <%# <i class="fa fa-trophy left"></i> %>
      you have
      <h1 style="padding: 0; margin: 0" class="blue-text">
        <strong><%= @referral_count %></strong>
      </h1>
      <%= 'referral'.pluralize(@referral_count) %>
    </div>
  </div>

  <div class="col s12 m6">
    <%= link_to [
      'http://twitter.com/share?',
      'url=' + URI::escape(@share_link),
      '&text=' + URI::escape("I'm using Notebook.ai to create fictional worlds and I'd love for you to join me!")
    ].join, target: '_new' do %>
      <div class="hoverable card-panel white-text" style="background: #1DA1F2">
        <i class="left fa fa-twitter" style="font-size: 150%"></i>
        Share to Twitter
      </div>
    <% end %>
  </div>
  <div class="col s12 m6">
    <a 
       href="https://www.facebook.com/sharer/sharer.php?app_id=1523926344336934&u=<%= URI::escape(@share_link) %>&display=popup&ref=plugin&src=share_button" 
       onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')">

      <div class="hoverable card-panel white-text" style="background: #4267B2">
        <i class="left fa fa-facebook" style="font-size: 150%"></i>
        Share to Facebook
      </div>
    </a>
  </div>
  <!--
  <div class="col s12 m4">
    <%= link_to '#' do %>
      <div class="hoverable card-panel white-text" style="background: #E60023">
        <i class="left fa fa-pinterest" style="font-size: 150%"></i>
        Share to Pinterest
      </div>
    <% end %>
    <script
      type="text/javascript"
      async defer
      src="//assets.pinterest.com/js/pinit.js">
    </script>
    <a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"></a>
  </div>
  -->
</div>

<div class="row">
  <div class="col s12 m12 l7">
    <div class="hoverable card">
      <div class="card-content">
        <div class="card-title">
          <span class="badge"><%= pluralize @referral_count, 'referral' %></span>
          Your referrals
        </div>
        <% if @referrals.any? %>
          <table>
            <tr>
              <th>User</th>
              <th>Signed up</th>
              <th></th>
            <tr>
            <% @referrals.each do |referral| %>
              <tr>
                <td>
                  <%= link_to referral.referree, class: "#{User.color}-text" do %>
                    <i class="material-icons left"><%= User.icon %></i>
                    <%= referral.referree.name %>
                  <% end %>
                </td>
                <td><%= time_ago_in_words referral.created_at %> ago</td>
                <td class="right">
                  <% if user_signed_in? && !referral.referree.blocked_by?(current_user) %>
                    <% if referral.referree.followed_by?(current_user) %>
                      <%= form_for(current_user.user_followings.find_by(followed_user_id: referral.referree.id), method: :delete) do |f| %>
                        <%= f.hidden_field :followed_user_id, value: referral.referree.id %>
                        <%= link_to '#', onclick: "$('.edit_user_following').first().submit()", class: 'collection-item blue white-text btn waves-effect waves-light' do %>
                          Unfollow
                        <% end %>
                      <% end %>
                    <% else %>
                      <%= form_for UserFollowing.new, method: :post do |f| %>
                        <%= f.hidden_field :followed_user_id, value: referral.referree.id %>
                        <%= link_to '#', onclick: "$('#new_user_following').submit()", class: 'collection-item blue white-text btn waves-effect' do %>
                          Follow
                        <% end %>
                      <% end %>
                    <% end %>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </table>
        <% else %>
          <em>Looks like you haven't referred anyone yet! When you do, their profiles will show up here.</em>
        <% end %>
      </div>
    </div>
  </div>
  <div class="col s12 m12 l5">
    <div class="hoverable card">
      <div class="card-content">
        <div class="card-title">Your rewards</div>
        <strong>Up to 10GB in extra storage space</strong>
        <p>
          Each user you refer to Notebook.ai earns you an extra 100MB in permanent image upload storage space, up to 10GB (100 referrals).
        </p>
        <br />
        <div class="right">+10GB</div>
        <div class="progress">
          <div class="determinate blue" style="width: <%= (@referral_count) %>%"></div>
        </div>
        <div>
          You've earned
          <% if @referral_count < 10 %>
            <strong><%= @referral_count * 100 %>MB</strong>
          <% else %>
            <strong><%= @referral_count / 10.0 %>GB</strong>
          <% end %>
          in extra storage space so far.
        </div>
      </div>
    </div>
  </div>
</div>