Touch up welcome page

This commit is contained in:
Kyle Drake 2015-04-09 12:46:55 -07:00
parent 602fc1a82d
commit 949380ed09
5 changed files with 198 additions and 180 deletions

View file

@ -76,3 +76,31 @@ def send_confirmation_email(site=current_site)
body: Tilt.new('./views/templates/email_confirm.erb', pretty: true).render(self, site: site) body: Tilt.new('./views/templates/email_confirm.erb', pretty: true).render(self, site: site)
}) })
end end
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
if request.path.match /\/welcome/
%{<a href="/" class="btn-Action">Get Started</a>}
else
%{<div class="current-plan">Current Plan</div>}
end
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
if request.path.match /\/welcome/
button_title = 'Get Started'
else
button_title = parent_site.plan_type == 'free' ? 'Upgrade' : 'Change'
end
%{<a data-plan_name="#{Site::PLAN_FEATURES[plan_type.to_sym][:name]}" data-plan_type="#{plan_type}" data-plan_price="#{plan_price}" onclick="card = new Skeuocard($('#skeuocard')); return false" class="btn-Action planPricingButton">#{button_title}</a>}
end
end

View file

@ -15,9 +15,9 @@ class Numeric
# if space >= 1000000 # if space >= 1000000
# "#{space/1000000} TB" # "#{space/1000000} TB"
if space >= 1000 if space >= 1000
"#{space/1000} GB" "#{(space/1000).to_comma_separated} GB"
else else
"#{space} MB" "#{space.to_comma_separated} MB"
end end
end end

152
views/plan/_compare.erb Normal file
View file

@ -0,0 +1,152 @@
<h2 style="margin-top: 2em">What You Get</h2>
<table class="plan-chart">
<tr>
<th class="feature-column"></th>
<th>
<h3>Free</h3>
<% if request.path != '/welcome' %>
<p>$<%= Site::PLAN_FEATURES[:free][:price] %>/mo</p>
<%== plan_pricing_button :free %>
<% end %>
</th>
<th class="professional">
<h3>Supporter</h3>
<% if request.path != '/welcome' %>
<% if parent_site && parent_site.legacy_supporter? %>
<p>$<%= Site::LEGACY_SUPPORTER_PRICES[parent_site.values[:plan_type].to_sym] %>/mo</p>
<div class="current-plan">Current Plan</div>
<% else %>
<p>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo</p>
<%== plan_pricing_button :supporter %>
<% end %>
<% end %>
</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] / (10**6)).to_comma_separated %> MB</td>
</tr>
<tr>
<td class="feature-column">
<span data-original-title="How much content you can serve in one month. Dont worry—these are 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>
</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, were 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>
</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>
</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>
</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>
</tr>
<tr>
<td class="feature-column">
<span data-original-title="Site tags make it easy to find sites youre interested in, and join communities of sites. Its 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>
</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>
</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>
</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>
</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 youre on the run.">Neocities Site Editor</span>
</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>
</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></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></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, and easily switch between them.">Unlimited Site Creation</span>
</td>
<td></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 custom domain name, preventing snoops from seeing your users traffic.">Custom SSL Certs (soon)</span>
</td>
<td></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><i class="fa fa-check"></i></td>
</tr>
</table>
<script>
$(function() {
$('.feature-column span').tooltip({
placement: 'right'
})
})
</script>

View file

@ -1,31 +1,5 @@
<% <%
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
if request.path.match /\/welcome/
%{<a href="/" class="btn-Action">Get Started</a>}
else
%{<div class="current-plan">Current Plan</div>}
end
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
if request.path.match /\/welcome/
button_title = 'Get Started'
else
button_title = parent_site.plan_type == 'free' ? 'Upgrade' : 'Change'
end
%{<a data-plan_name="#{Site::PLAN_FEATURES[plan_type.to_sym][:name]}" data-plan_type="#{plan_type}" data-plan_price="#{plan_price}" onclick="card = new Skeuocard($('#skeuocard')); return false" class="btn-Action planPricingButton">#{button_title}</a>}
end
end
%> %>
<section class="section plans"> <section class="section plans">
@ -125,147 +99,7 @@
</div> </div>
</div> </div>
<!-- <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2> --> <%== erb :'plan/_compare', layout: false %>
<h2 style="margin-top: 2em">Compare</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>
<% if parent_site && parent_site.legacy_supporter? %>
<p>$<%= Site::LEGACY_SUPPORTER_PRICES[parent_site.values[:plan_type].to_sym] %>/mo</p>
<div class="current-plan">Current Plan</div>
<% else %>
<p>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo</p>
<%== plan_pricing_button :supporter %>
<% end %>
</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>
</tr>
<tr>
<td class="feature-column">
<span data-original-title="How much content you can serve in one month. Dont worry—these are 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>1000 GB</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, were 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>
</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>
</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>
</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>
</tr>
<tr>
<td class="feature-column">
<span data-original-title="Site tags make it easy to find sites youre interested in, and join communities of sites. Its 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>
</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>
</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>
</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>
</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 youre on the run.">Neocities Site Editor</span>
</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>
</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></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></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, and easily switch between them.">Unlimited Site Creation</span>
</td>
<td></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 custom domain name, preventing snoops from seeing your users traffic.">Custom SSL Certs (soon)</span>
</td>
<td></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><i class="fa fa-check"></i></td>
</tr>
</table>
<% if request.path.match /\/plan/ %> <% if request.path.match /\/plan/ %>
<div class="row" style="margin-top: 50px; margin-bottom: 0px;"> <div class="row" style="margin-top: 50px; margin-bottom: 0px;">
@ -313,10 +147,6 @@
<script> <script>
$(function() { $(function() {
$('.feature-column span').tooltip({
placement: 'right'
})
$('.plan-image').tooltip({ $('.plan-image').tooltip({
placement: 'top' placement: 'top'
}) })

View file

@ -1,13 +1,15 @@
<section class="section plans welcome"> <section class="section plans welcome">
<h2>Welcome to Neocities, <%= current_site.username %>!</h2> <h2>Welcome to Neocities, <%= current_site.username %>!</h2>
<h3 class="subtitle">Free accounts will always be free and ad-free. <h3 class="subtitle">
You can support our quest to bring back the creative, independent web by upgrading to the Supporter&nbsp;Plan.</h3> <strong>Neocities will never put advertising on your site.</strong> Instead, Neocities is powered by <strong>you</strong>.
Help us bring back creative personal websites by becoming a supporter!
</h3>
<div class="plan-overview"> <div class="plan-overview">
<div class="col free"> <div class="col free">
<div class="row content"> <div class="row content">
<div class="col col-100"> <div class="col col-100">
<h3>Free Plan</h3> <h3>Free</h3>
<div class="plan-image free"> <div class="plan-image free">
</div> </div>
<div class="price">$<%= Site::PLAN_FEATURES[:free][:price] %></div> <div class="price">$<%= Site::PLAN_FEATURES[:free][:price] %></div>
@ -27,7 +29,7 @@ You can support our quest to bring back the creative, independent web by upgradi
<div class="col supporter"> <div class="col supporter">
<div class="row content"> <div class="row content">
<div class="col col-33"> <div class="col col-33">
<h3>Supporter Plan</h3> <h3>Supporter</h3>
<div class="plan-image supporter"> <div class="plan-image supporter">
</div> </div>
<% if parent_site && parent_site.legacy_supporter? %> <% if parent_site && parent_site.legacy_supporter? %>
@ -39,8 +41,8 @@ You can support our quest to bring back the creative, independent web by upgradi
<% end %> <% end %>
<ul class="main-features"> <ul class="main-features">
<li><strong><%= Site::PLAN_FEATURES[:supporter][:space].to_space_pretty %></strong> <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">storage</span></li> <li><strong><%= (Site::PLAN_FEATURES[:supporter][:space] / (10**6)).to_comma_separated %> MB</strong> <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">storage</span></li>
<li><strong>1000 GB</strong> <span data-original-title="How much content you can serve in one month. Dont worry—these are soft limits. Temporary surges are fine, we won't take your site down automatically, and were very flexible.">bandwidth</span></li> <li><strong><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_bytes_pretty %></strong> <span data-original-title="How much content you can serve in one month. Dont worry—these are soft limits. Temporary surges are fine, we won't take your site down automatically, and were very flexible.">bandwidth</span></li>
</ul> </ul>
<ul> <ul>
@ -52,7 +54,7 @@ You can support our quest to bring back the creative, independent web by upgradi
</div> </div>
<div class="col col-66"> <div class="col col-66">
<p class="instructions">To upgrade, enter your credit card info below:</p> <p class="instructions">Just enter your card info, and you're done:</p>
<div> <div>
<div id="plan_error" class="alert alert-block alert-error" style="display:none"></div> <div id="plan_error" class="alert alert-block alert-error" style="display:none"></div>
<form id="upgradeForm" method="POST" action="/plan/update"> <form id="upgradeForm" method="POST" action="/plan/update">
@ -130,6 +132,12 @@ You can support our quest to bring back the creative, independent web by upgradi
</div> </div>
</div> </div>
</section> </section>
<section class="section plans">
<%== erb :'plan/_compare', layout: false %>
</section>
<%== erb :'plan/_signupcode', layout: false %> <%== erb :'plan/_signupcode', layout: false %>
<script> <script>
$(function() { $(function() {