neocities/views/plan/_pricing.erb

<section class="section plans">
  <% if request.path.match /\/welcome/ %>
    <div class="txt-Center"><img src="/img/heartcat.png"></div>
  <% end %>
  <h2>
    <% if request.path == '/' %>
      Need more space? 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>
    <% elsif request.path.match /\/welcome/ %>
      Welcome to Neocities!
    <% else %>
      Support Us
    <% end %>
  </h2>

  <% if request.path.match /\/plan/ %>
    <div class="row" style="margin-top: 0px">
      <div class="col-75" style="margin-left: auto; margin-right: auto;">
        <h3 class="subtitle">
          The Neocities Supporter Plan is a way to help sustain the site. When you become a supporter, you are directly helping our quest to bring back the creative, independent web, and to continue to improve Neocities for everyone.
        </h3>
      </div>
    </div>
  <% elsif request.path.match /\/welcome/ %>
    <div class="row" style="margin-top: 0px">
      <div class="col-75" style="margin-left: auto; margin-right: auto;">
        <h3 class="subtitle">
          Welcome, and thanks for signing up! We can't wait to see your web site!
          <br>
          Neocities does not put advertising on your site, <strong>and we never will</strong>.
          <br>
          Instead, Neocities is powered by supporters like you. If you'd like to help us out, we'd love your support. Thank you!
        </h3>
      </div>
    </div>
  <% end %>

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

    <div class="body">
      <div class="col col-25 free">
        <div class="plan-image free">
        </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="Meow!"></div>
        <h3>Supporter</h3>
        <% if parent_site && parent_site.legacy_supporter? %>
          <div class="price">$<%= Site::LEGACY_SUPPORTER_PRICES[parent_site[:plan_type].to_sym] %></div>
          <div class="interval">per month, billed annually</div>
        <% else %>
          <div class="price">$<%= Site::PLAN_FEATURES[:supporter][:price] %></div>
          <div class="interval">per month</div>
        <% end %>

        <% if parent_site && parent_site.legacy_supporter? %>
          <div class="current-plan">Current Plan</div>
        <% else %>
          <%== plan_pricing_button :supporter %>
        <% end %>
        <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>Lots of Web Space</li>
          <li>No File Upload Type Restrictions</li>
          <li>Multiple Site Creation</li>
          <li>Custom Domains (yoursite.com)</li>
          <li>SSL Certs Included</li>
          <li>Remote Filesystem Support</li>
        </ul>
      </div>

    </div>
  </div>

  <%== erb :'plan/_compare', layout: false %>

  <% 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 become a Supporter?</h2>
      </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::PLAN_FEATURES[:supporter][:space].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 supports our goal to work on improving Neocities full-time, without worrying about bills.
          </li>
          <li>
            <strong>It helps the web.</strong> The web needs more independent, creative web sites.
          </li>
          <li>
            <strong>It's Open Source.</strong> Neocities is an <a href="http://www.opencompany.org">Open Company</a>, our site is <a href="https://github.com/neocities">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> Only $<%= Site::PLAN_FEATURES[:supporter][:price] %> per month.
          </li>
          <li>
            <strong>You can cancel or change plans anytime.</strong> If you do, we'll refund or credit the amount you didn't use.
          </li>
        </ul>
      </div>
    </div>
  <% end %>
</section>

<script>
  $(function() {
    $('.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">
  <form id="upgradeForm" method="POST" action="/plan/update">
    <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
    <input type="hidden" value="" name="plan_type" id="upgradePlanType">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
      <h3 id="planSignupLabel">
        <% if parent_site && parent_site.plan_type == 'free' %>
          Upgrade
        <% else %>
          Change
        <% end %>
      </h3>
    </div>
    <div class="modal-body">
        <div>
          You are <% if current_site && parent_site.plan_type == 'free' %>upgrading<%else%>changing<%end%> to the <strong><span id="upgradeFormPlanName"></span> Plan</strong>. You will be charged <span id="upgradeFormPlanPrice"></span>. <% if current_site && parent_site.plan_type != 'free' %>We'll credit or refund the remaining amount you didn't use on your previous plan.<% end %>
          <% unless current_site && parent_site.stripe_customer_id %>
            Please enter your Credit Card number:
          <% end %>
        </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>

          <% unless params[:stripe_token] || (current_site && parent_site.stripe_customer_id) %>
            <div class="credit-card-input no-js" id="skeuocard" style="margin-left: auto; margin-right: auto; margin-bottom: 20px">
              <p class="no-support-warning"></p>
              <label for="cc_type">Card Type</label>
              <select name="cc_type">
                <option value="">...</option>
                <option value="visa">Visa</option>
                <option value="discover">Discover</option>
                <option value="mastercard">MasterCard</option>
                <option value="maestro">Maestro</option>
                <option value="jcb">JCB</option>
                <option value="unionpay">China UnionPay</option>
                <option value="amex">American Express</option>
                <option value="dinersclubintl">Diners Club</option>
              </select>
              <label for="cc_number">Card Number</label>
              <input type="text" name="cc_number" id="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19">
              <label for="cc_exp_month">Expiration Month</label>
              <input type="text" name="cc_exp_month" id="cc_exp_month" placeholder="00">
              <label for="cc_exp_year">Expiration Year</label>
              <input type="text" name="cc_exp_year" id="cc_exp_year" placeholder="00">
              <label for="cc_name">Cardholder's Name</label>
              <input type="text" name="cc_name" id="cc_name" placeholder="John Doe">
              <label for="cc_cvc">Card Validation Code</label>
              <input type="text" name="cc_cvc" id="cc_cvc" placeholder="123" maxlength="3" size="3">
            </div>
          <% end %>
        </div>

        <% unless params[:stripe_token] || (current_site && parent_site.stripe_customer_id) %>
          <p>
            <strong>Don't have a Credit/Debit Card?</strong> We also support <a href="/plan/paypal">Paypal</a> and <a href="/plan/bitcoin">Bitcoin</a>.
          </p>
        <% end %>
    </div>
    <div class="modal-footer">
      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
      <button type="submit" class="btn-Action">Upgrade</button>
    </div>
  </form>
</div>

<% if current_site %>
  <%== erb :'plan/_signupcode', layout: false %>
<% end %>