neocities/views/plan/_pricing.erb

283 lines
No EOL
10 KiB
Text

<section class="section plans">
<h2>All Neocities plans include a neocities.org subdomain, WebDAV uploading, one-click backups, and all our social features. We'll never show ads on your site.</h2>
<div class="plan-overview">
<div class="header">
<div class="col col-50 personal">
Personal
</div>
<div class="col col-50 professional">
Professional
</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">$0</div>
<div class="interval">per month</div>
<a href="/" class="btn-Action">Choose</a>
<ul>
<li><strong><%= Site::PLAN_FEATURES[:free][:space].to_space_pretty %></strong> storage</li>
<li><strong>10 GB</strong> bandwidth</li>
</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">$5</div>
<div class="interval">per month</div>
<a href="/" class="btn-Action">Choose</a>
<ul>
<li><strong><%= Site::PLAN_FEATURES[:supporter][:space].to_space_pretty %></strong> storage</li>
<li><strong>100 GB</strong> bandwidth</li>
</ul>
<ul>
<li>Custom Domains</li>
<li>Global CDN Cache</li>
<li>DDoS mitigation</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">$20</div>
<div class="interval">per month</div>
<a href="/" class="btn-Action">Choose</a>
<ul>
<li><strong><%= Site::PLAN_FEATURES[:catbus][:space].to_space_pretty %></strong> storage</li>
<li><strong>500 GB</strong> bandwidth</li>
</ul>
<ul>
<li>Custom Domains</li>
<li>Global CDN Cache</li>
<li>DDoS mitigation</li>
<li>Custom SSL Certificates</li>
<li>No upload type restrictions</li>
<li>Unlimited Site Creation</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">$50</div>
<div class="interval">per month</div>
<a href="/" class="btn-Action">Choose</a>
<ul>
<li><strong><%= Site::PLAN_FEATURES[:fatcat][:space].to_space_pretty %></strong> storage</li>
<li><strong>2 TB</strong> bandwidth</li>
</ul>
<ul>
<li>Custom Domains</li>
<li>Global CDN Cache</li>
<li>DDoS mitigation</li>
<li>Custom SSL Certificates</li>
<li>No upload type restrictions</li>
<li>Coming Soon: Unlimited Sites</li>
</ul>
</div>
</div>
</div>
<!-- <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2> -->
<h2>Compare Plans:</h2>
<table class="plan-chart">
<tr>
<th class="feature-column"></th>
<th>
<h3>Free</h3>
<p>$0/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th>
<h3>Supporter</h3>
<p>$5/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th class="professional">
<h3>Cat Bus</h3>
<p>$20/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th class="professional">
<h3>Fat Cat</h3>
<p>$50/mo</p>
<a href="/" class="btn-Action">Choose</a>
</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 soft limits, and we won't take your site down automatically. We'll contact you and see if we can figure something out. We're reasonable.">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="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="Each site comes with a free Neocities address (yoursitename.neocities.org).">Neocities.org 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="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 it's 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 it's 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="Add your domain name to your site!">Custom Domains</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="Our worldwide network of CDN servers cache your web site regionally, making your site load fast - no matter where your users are. Surfs up, Japan!">High Performance</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="Make as many sites as you want, with one login.">Unlimited Site Creation</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="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></td>
<td><i class="fa fa-check"></i></td>
</tr>
</table>
</section>
<script>
$(function() {
$('.feature-column span').tooltip({
placement: 'right'
})
$('.plan-image').tooltip({
placement: 'top'
})
})
</script>