neocities/views/plan/_pricing.erb

<%
  def plan_pricing_button(plan_type)
    plan_type = plan_type.to_s

    if !parent_site
      %{<a href="/#new" class="btn-Action">Sign Up</a>}
    elsif parent_site && parent_site.plan_type == plan_type
      %{<p style="padding-top: 15px; padding-bottom: 14px"><strong>Current Plan</strong></p>}
    else
      if plan_type == 'supporter'
        plan_price = "$#{Site::PLAN_FEATURES[plan_type.to_sym][:price]*12}, once per year"
      else
        plan_price = "$#{Site::PLAN_FEATURES[plan_type.to_sym][:price]}, monthly"
      end
      %{<a data-plan_name="#{Site::PLAN_FEATURES[plan_type.to_sym][:name]}" data-plan_type="#{plan_type}" data-plan_price="#{plan_price}" onclick="return false" class="btn-Action planPricingButton">Choose</a>}
    end
  end
%>

<section class="section plans">
  <h2>Need more power? We’ve got you covered.<br>Upgrading gives you more space, bandwidth, features, <strong>and helps us stay independent and keep the free sites free.</strong></h2>

  <div class="plan-overview">
    <div class="header">
      <div class="col col-25 personal">
        Free
      </div>
      <div class="col col-75 professional">
        Supporter
      </div>
    </div>

    <div class="body">
      <div class="col col-25 free">
        <div class="plan-image free" data-original-title="Pick me!">
        </div>
        <h3>Free</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:free][:price] %></div>
        <div class="interval">per month</div>
        <%== plan_pricing_button :free %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:free][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:free][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
        </ul>
      </div>

      <div class="col col-25 supporter">
        <div class="plan-image" data-original-title="No no, pick me!"></div>
        <h3>Supporter</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:supporter][:price] %></div>
        <div class="interval">per month, billed annually</div>
        <%== plan_pricing_button :supporter %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:supporter][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>More space</li>
        </ul>
      </div>

      <div class="col col-25 catbus">

        <div class="plan-image" data-original-title="VROOOOOOM!"></div>
        <h3>Cat Bus</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:catbus][:price] %></div>
        <div class="interval">per month</div>
        <%== plan_pricing_button :catbus %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:catbus][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:catbus][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>Even more space</li>
        </ul>
      </div>

      <div class="col col-25 fatcat">
        <div class="plan-image" data-original-title="Jolly good."></div>
        <h3>Fat Cat</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:fatcat][:price] %></div>
        <div class="interval">per month</div>
        <%== plan_pricing_button :fatcat %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:fatcat][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:fatcat][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>A lot more space!</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2> -->
  <h2 style="margin-top: 2em">Compare Plans</h2>
  <table class="plan-chart">
    <tr>
      <th class="feature-column"></th>
      <th>
        <h3>Free</h3>
        <p>$<%= Site::PLAN_FEATURES[:free][:price] %>/mo</p>
        <%== plan_pricing_button :free %>
      </th>
      <th class="professional">
        <h3>Supporter</h3>
        <p>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo</p>
        <%== plan_pricing_button :supporter %>
      </th>
      <th class="professional">
        <h3>Cat Bus</h3>
        <p>$<%= Site::PLAN_FEATURES[:catbus][:price] %>/mo</p>
        <%== plan_pricing_button :catbus %>
      </th>
      <th class="professional">
        <h3>Fat Cat</h3>
        <p>$<%= Site::PLAN_FEATURES[:fatcat][:price] %>/mo</p>
        <%== plan_pricing_button :fatcat %>
      </th>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">Storage</span>
      </td>
      <td><%= Site::PLAN_FEATURES[:free][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:supporter][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:catbus][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:fatcat][:space].to_bytes_pretty %></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="How much content you can serve in one month. Don’t worry—these are very soft limits, temporary surges are fine, we won't take your site down automatically, and we're very flexible.">Bandwidth</span>
      </td>
      <td><%= Site::PLAN_FEATURES[:free][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:catbus][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:fatcat][:bandwidth].to_bytes_pretty %></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="We will never put ads on your site, or give your data to marketers. In fact, we’re prohibited from doing it in our own Terms of Service.">No advertising, ever</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Our worldwide network of CDN servers cache your web site regionally, making your site load fast—no matter where your users are. 頑張る, 日本!">Global CDN Site Cache</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site comes with a free Neocities address (yoursitename.neocities.org).">Free Site Subdomain</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Add your domain name (yoursite.com) to your site!">Custom Domains</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="You can mount your Neocities site to your computer as a hard drive, making it easy to update with your favorite HTML editor.">WebDAV Uploading</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Downloading your neocities site is as easy as clicking a button.">One-Click Backups</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Site tags make it easy to find sites you’re interested in, and join communities of sites. It’s like a web ring, but even better.">Site Tags</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site has its own RSS feed that make it easy to let people know when your site changes.">RSS Feed</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Like a site on Neocities? Now you can follow it, and see when they update!">Follow Your Favorite Sites</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site now has its own profile page, allowing users to see when your site updates, follow your site, and leave feedback.">Site Profile</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Our HTML5 site editor makes it easy to make quick changes to your site, even if you’re on the run.">Neocities Site Editor</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <!--
    <tr>
      <td class="feature-column">Site Tipping (Coming Soon)</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    -->
    <tr>
      <td class="feature-column">
        <span data-original-title="Make as many sites as you want, with one account.">Unlimited Site Creation</span>
      </td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Upload your SSL certificate for your domain name, preventing snoops from seeing your user’s traffic.">Custom SSL Certificates</span>
      </td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="No whitelists—you can upload anything you want (no copyrighted content, trojans, or w4r3z, please).">No File Upload Type Restrictions</span>
      </td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
  </table>

  <% if request.path.match /\/plan/ %>
    <div class="row" style="margin-top: 50px; margin-bottom: 0px;">
      <div class="col-50" style="margin-left: auto; margin-right: auto">
        <h2>Why get the Supporter Plan?</h2>
      </div>
    </div>

    <div class="row" style="margin-top: 0px">
      <div class="col-75" style="margin-left: auto; margin-right: auto;">
        <h3 style="margin-top: 0px">
          The Neocities Supporter Plans are a way to help sustain the site. When you join the Supporter Plan, you are directly helping our quest to bring back the creative, independent web, and to continue to improve Neocities for everyone.
        </h3>
      </div>
    </div>
    
    <div class="row">
      <div class="col-60" style="margin-left: auto; margin-right: auto">
        <ul>
          <li>
            <strong>You get more space!</strong> Right now supporter plans get up to <strong><%= Site::SUPPORTER_MAXIMUM.to_space_pretty %></strong>.
          </li>
          <li>
            <strong>It helps your site.</strong> Funding helps us make your site faster globally, and provide more features.
          </li>
          <li>
            <strong>It helps us build.</strong> It allows us to work on Neocities full-time, without worrying about bills.
          </li>
          <li>
            <strong>It helps the web.</strong> The web needs more independent, creative sites. Neocities is leading the way.
          </li>
          <li>
            <strong>It's Open Source.</strong> Neocities is <a href="https://github.com/neocities" target="_blank">completely open source</a>, and we share code with the community.
          </li>
          <li>
            <strong>No lock-in.</strong> Redirecting your site is easy, free site downloads, and support for custom domains.
          </li>
          <li><strong>No ads, ever.</strong> We'll never put ads or watermarks on sites, and we don't sell user data.</li>
          <li>
            <strong>It's safe.</strong> We use <a href="https://stripe.com" target="_blank">Stripe</a> for payments, and never store your credit card information directly.
          </li>
          <li>
            <strong>It's affordable.</strong> As low as <strong>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/month</strong> (billed once every year). Higher tiers are optional (and appreciated!)
          </li>
          <li>
            <strong>You can cancel anytime.</strong>
          </li>
        </ul>
      </div>
    </div>
  <% end %>
</section>

<script>
  $(function() {
    $('.feature-column span').tooltip({
      placement: 'right'
    })

    $('.plan-image').tooltip({
      placement: 'top'
    })
  })

  $(".planPricingButton").on('click', function(obj) {
    $('#upgradePlanType').val($(obj.target).attr('data-plan_type'))
    $('#upgradeFormPlanName').text($(obj.target).attr('data-plan_name'))
    $('#upgradeFormPlanPrice').text($(obj.target).attr('data-plan_price'))
    $('#planSignup').modal()
  })
</script>

<div class="modal hide fade" id="planSignup" tabindex="-1" role="dialog" aria-labelledby="planSignupLabel" aria-hidden="true">
  <div class="modal-header">
    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="planSignupLabel">Upgrade</h3>
  </div>
  <div class="modal-body">
    <form>
      <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
      <input type="hidden" value="" name="plan_type" id="upgradePlanType">
      <div>
        You are upgrading to the <strong><span id="upgradeFormPlanName"></span> Plan</strong>. You will be charged <span id="upgradeFormPlanPrice"></span>.
      </div>

      <input id="stripe_token" name="stripe_token" type="hidden" value="<%= params[:stripe_token] %>">

      <div style="margin-top: 30px">
        <div id="plan_error" class="alert alert-block alert-error" style="display:none"></div>

        <% if params[:stripe_token] %>
          <p>Billing information has been saved, thank you!</p>
        <% else %>
          <p>
            Card Number: <input type="text" size="20" data-stripe="number" placeholder="XXXX-XXXX-XXXX-XXXX">
            CVC: <input type="text" size="4" maxlength="4" data-stripe="cvc" style="width: 60px" placeholder="123">
          </p>
          <p>
            Expiration:
            <input type="text" size="2" data-stripe="exp-month" placeholder="MM" maxlength="2" style="width: 50px">
            <input type="text" size="4" data-stripe="exp-year" placeholder="YYYY" maxlength="4" style="width: 60px">
          </p>
        <% end %>
      </div>

      <p><strong>We accept alternative ways to send money.</strong> If you would prefer to use Bitcoin or Paypal, <a href="/donate" target="_blank">click here</a>.</p>

    </form>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button type="submit" class="btn btn-Action">Upgrade</button>
  </div>
</div>