app/views/main/paper.html.erb
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<%=
image_tag 'tristan/small.webp', class: 'right hide-on-small-only', style: 'margin-left: 2em'
%>
<div class="card-title green-text text-darken-2">Going digital saves paper and trees!</div>
<br />
<p>
It's well-known that Notebook.ai offers a wide variety of features that just aren't
possible with traditional paper notebooks. However, those aren't the only benefits of
going digital!
</p>
<br />
<p>
Whether you're worldbuilding with our specialized notebook pages, outlining story
timelines, or writing your next novel, every page you create in Notebook.ai directly
contributes to less paper being used — and fewer trees cut down!
</p>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel center green white-text">
<h1 style="margin: 0"><%= number_with_delimiter @total_notebook_pages %></h1>
digital ideas stored
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel center green white-text">
<h1 style="margin: 0"><%= number_with_delimiter @total_pages_equivalent %></h1>
equivalent physical pages
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel center green darken-1 white-text">
<i class="material-icons left large">park</i>
<h1 style="margin: 0"><strong><%= number_with_delimiter @total_trees_saved.round %></strong></h1>
trees saved
</div>
</div>
<div class="col s12 m12 l9 offset-l3">
<div class="card-panelf">
<p class="grey-text text-darken-1">
<i class="material-icons left green-text">park</i>
The average 40-foot pine tree typically yields between 10,000 and 20,000 notebook-quality sheets of paper.
For the estimations on this page, we're using a conservative estimate of
<%= number_with_delimiter GreenService::SHEETS_OF_PAPER_PER_TREE %> pages per tree.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<div class="card-title">Our community paper footprint</div>
<!-- good place for a little bit of copy -->
<table>
<thead>
<tr>
<th>Digital content</th>
<th>Equivalent physical pages</th>
<th>Equivalent trees</th>
</tr>
</thead>
<tbody>
<% (Rails.application.config.content_type_names[:all] + ["Timeline", "Document"]).each do |content_type| %>
<%
content_list_count = @per_page_savings.dig(content_type, :digital)
physical_page_equivalent = @per_page_savings.dig(content_type, :pages)
tree_equivalent = @per_page_savings.dig(content_type, :trees)
%>
<tr>
<td>
<i class="material-icons left <%= content_class_from_name(content_type).color %>-text">
<%= content_class_from_name(content_type).icon %>
</i>
<% if ["Timeline", "Document"].include?(content_type) %>
<%= number_with_delimiter content_list_count %>
<%= content_type.pluralize content_list_count %>
<% else %>
<%= link_to send("#{content_type.downcase}_worldbuilding_info_path"), class: 'black-text' do %>
<%= number_with_delimiter content_list_count %>
<%= content_type.pluralize content_list_count %>
<% end %>
<% end %>
</td>
<td>
<i class="material-icons left grey-text">copy_all</i>
<% if content_type == 'Timeline' %>
<% tooltip = "This estimate is based on the average timeline having approximately #{GreenService::AVERAGE_TIMELINE_EVENTS_PER_PAGE} detailed events per page when printed." %>
<% elsif content_type == 'Document' %>
<% tooltip = "This estimate is based on the total word count across all documents on Notebook.ai." %>
<% else %>
<% tooltip = "This estimate is based on the average #{content_type} page being approximately #{GreenService.physical_pages_equivalent_for(content_type)} physical pages long when printed." %>
<% end %>
<span class="tooltipped" data-tooltip="<%= tooltip %>" data-position="bottom">
<%= number_with_delimiter physical_page_equivalent %>
<%= 'page'.pluralize physical_page_equivalent %>
</span>
</td>
<td>
<i class="material-icons left green-text">park</i>
<%= number_with_delimiter tree_equivalent.round(5) %>
<%= 'tree'.pluralize tree_equivalent %>
</td>
</tr>
<% end %>
<tr>
<td>Totals</td>
<td>
<strong>
<i class="material-icons left grey-text">copy_all</i>
<%= number_with_delimiter @total_pages_equivalent %>
<%= 'page'.pluralize @total_pages_equivalent %>
</strong>
</td>
<td>
<strong>
<i class="material-icons left green-text">park</i>
<%= number_with_delimiter @total_trees_saved.round(5) %>
<%= 'tree'.pluralize @total_trees_saved %>
saved
</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>