publiclab/spectral-workbench

<div class="container-fluid" style="clear:both;">

  <div class="row-fluid">
    <iframe class="span4" height="240px;" src="https://www.youtube.com/embed/Y6RZ-egosn0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="span8">
      <div class="jumbotron">
        <h2>DIY material analysis</h2>
        <p class="lead">Use a homemade spectrometer to scan different materials, and contribute to an open source database.</p>
        <a class="btn btn-large btn-success" href="http://publiclab.org/wiki/spectrometry"><i class="fa fa-wrench fa-white hidden-phone"></i> Build one</a>
        <a class="btn btn-large btn-primary" href="https://store.publiclab.org/products/lego-spectrometer-kit"><i class="fa fa-shopping-cart fa-white"></i> Buy <span class="hidden-phone"> a kit </span></a>
        <a class="btn btn-large" href="https://publiclab.org/wiki/spectrometry#Frequently+Asked+Questions"><i class="fa fa-book hidden-phone"></i> Learn<span class="hidden-phone"> more</span></a>
      </div>
    </div>
  </div>

  <hr />

  <div id="spectra" class="row-fluid">

  <div class="span4">

    <%= render :partial => "search" %>

    <h3>Recent authors</h3>
    <ul class="nav">
    <% User.where(login: @spectrums.collect(&:author).uniq).each do |user| %>
      <li><a href="<%= user_path(user.login) %>"><i class="fa fa-user"></i> <%= user.login %></a></li>
    <% end %>
    </ul>

    <iframe style="margin-top:10px;border:none;width:100%;height:180px;" src="https://publiclab.org/features/embed/spectral-workbench-sidebar"></iframe>

    <hr />
    <h3>Recent sets</h3>
    <%= render :partial => 'sets' %>

    <hr />
  </div>

  <style>._row { clear:left;} </style>

  <div class="span8">

    <h3>Featured tags <small><a href="/tags">Popular tags</a> | Interesting things to scan and share (<a href="http://publiclab.org/wiki/spectrometry-activities">Learn more</a>)</small></h3>

    <div class="row-fluid">

      <div class="span3">
        <a class="image hidden-phone" href="/tags/sky"><img src="/images/sky.png" class="image" style="background:#ccc;"></a>
        <a class="image visible-phone" style="float:left;width:50%;margin-right:10px;" href="/tags/sky"><img src="/images/sky.png" class="image" style="background:#ccc;"></a>
        <h3><a href="/tags/sky">Sky</a></h3>
      </div>

      <div class="span3">
        <a class="image hidden-phone" href="/tags/led"><img src="/images/led.png" class="image" style="background:#ccc;"></a>
        <a class="image visible-phone" style="float:left;width:50%;margin-right:10px;" href="/tags/led"><img src="/images/led.png" class="image" style="background:#ccc;"></a>
        <h3><a href="/tags/led">LED</a></h3>
      </div>

      <div class="span3">
        <a class="image hidden-phone" href="/tags/sodium"><img src="/images/sodium.png" class="image" style="background:#ccc;"></a>
        <a class="image visible-phone" style="float:left;width:50%;margin-right:10px;" href="/tags/sodium"><img src="/images/sodium.png" class="image" style="background:#ccc;"></a>
        <h3><a href="/tags/sodium">Sodium</a></h3>
      </div>

      <div class="span3">
        <a class="image hidden-phone" href="/tags/laser"><img src="/images/laser.png" class="image" style="background:#ccc;"></a>
        <a class="image visible-phone" style="float:left;width:50%;margin-right:10px;" href="/tags/laser"><img src="/images/laser.png" class="image" style="background:#ccc;"></a>
        <h3><a href="/tags/laser">Laser</a></h3>
      </div>

    </div>

    <hr />

    <h2>Recently uploaded spectra <small class="hidden-phone">by contributors like you</small></h2>

    <%= render :partial => 'spectrums/list', locals: { spectrums: @spectrums } %>
    <%= will_paginate @spectrums, renderer: BootstrapPagination::Rails %>
  </div>

</div>