notebook/app/views/data/index.html.erb

<%
  # Style decisions to move to CSS later
  card_height = 160
  icon_yoffset = -1.5
  icon_xoffset = -5
  icon_fsize  = 13
%>

<div class="row">
  <div class="col s12">
    <h4 class="grey-text">
      Welcome to your personal Data Vault
    </h4>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to usage_path, class: 'black-text' do %>
      <div class="hoverable card green lighten-5">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right green-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">insert_chart</i>
          <div class="card-title">Your usage overview</div>
          <p>
            See how you've used Notebook.ai.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to archive_path, class: 'black-text' do %>
      <div class="hoverable card grey lighten-3">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right grey-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">archive</i>
          <div class="card-title">Visit your archives</div>
          <p>
            Archive notebook pages to hide them without deleting them.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to recently_deleted_content_path, class: 'black-text' do %>
      <div class="hoverable card red lighten-5">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right red-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">delete</i>
          <div class="card-title">Recycle bin</div>
          <p>
            Recover pages you've recently deleted for a short period of time.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to notebook_export_path, class: 'black-text' do %>
      <div class="hoverable card brown lighten-5">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right brown-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">file_download</i>
          <div class="card-title">Export your data</div>
          <p>
            Export your entire notebook in several formats.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to uploads_path, class: 'black-text' do %>
      <div class="hoverable card amber lighten-5">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right amber-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">file_upload</i>
          <div class="card-title">Image uploads</div>
          <p>
            Browse all of your image uploads in one place.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to discussions_path, class: 'black-text' do %>
      <div class="hoverable card blue lighten-5">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right blue-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">forum</i>
          <div class="card-title">Discussion activity</div>
          <p>
            See your activity on the discussion boards.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to privacy_policy_path, class: 'black-text' do %>
      <div class="hoverable card blue lighten-5">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right blue-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">verified_user</i>
          <div class="card-title">Privacy policy</div>
          <p>
            Read our privacy policy.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to edit_user_registration_path, class: 'black-text' do %>
      <div class="hoverable card grey lighten-2">
        <div class="card-content" style="overflow: hidden; height: <%= card_height %>px">
          <i class="material-icons right black-text" style="font-size: <%= icon_fsize %>rem; margin-top: <%= icon_yoffset %>rem; margin-left: 0; margin-right: <%= icon_xoffset %>rem">settings</i>
          <div class="card-title">Account settings</div>
          <p>
            All other account settings here!
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <!-- 
    potential other stuff:
    - access log (use mui collapsible)
    - gdpr contact info?
  -->

</div>