notebook/app/views/main/paper.html.erb

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <%=
          image_tag 'tristan/small.png', 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 &mdash; 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>