neocities/views/browse.erb

<script type="text/javascript">
  function getPage(currentPage) {
    document.location.href = '/browse?current_page='+currentPage+'&'+$('#search_criteria').serialize();
  }

  function surf(currentPage) {
    document.location.href = '/surf?current_page='+currentPage+'&'+$('#search_criteria').serialize();
  }
</script>

<div class="header-Outro with-columns browse-page">
  <div class="row content">
    <div class="col col-100">
      <% if params[:tag] %>
        <h1>Sites tagged <%= params[:tag] %></h1>
      <% else %>
        <h1>Sites on Neocities</h1>
      <% end %>
    </div>
  
    <form id="search_criteria" action="/browse" method="GET">
      <div class="col col-50 filter">
        <fieldset class="grouping">
          <label class="text-Label" for="sort_by">Sort By:</label>
          <div class="select-Container">
            <select name="sort_by" id="sort_by" class="input-Select">
              <option value="last_updated" <%= params[:sort_by] == 'last_updated' ? 'selected' : '' %>>Last Updated</option>
              <option value="views" <%= params[:sort_by] == 'views' ? 'selected' : '' %>>Most Views</option>
              <option value="hits" <%= params[:sort_by] == 'hits' ? 'selected' : '' %>>Most Hits</option>
              <option value="newest" <%= params[:sort_by] == 'newest' ? 'selected' : '' %>>Newest</option>
              <option value="oldest" <%= params[:sort_by] == 'oldest' ? 'selected' : '' %>>Oldest</option>
              <option value="random" <%= params[:sort_by] == 'random' ? 'selected' : '' %>>Random</option>
            </select>
          </div>
        <!--
          <div>
            <input name="is_nsfw" type="checkbox" value="true" <%= params[:is_nsfw].to_s == 'true' ? 'checked' : '' %>> Show 18+ content
          </div>
        -->
            <input class="btn-Action" type="submit" value="Update">
        </fieldset>
      </div>
      <div class="col col-50 filter">
        <form method="GET" action="browse">
        <fieldset class="grouping">
        <label class="text-Label" for="tag">Search by tag:</label>
        <input class="input-Area typeahead" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
        <input style="vertical-align: -4px;margin-left: 4px;" type="submit" class="btn-Action" value="Search">
        </fieldset>
      </div>
    </div>
    </form>
</div>

<div class="browse-page">

<% if @sites.length == 0 %>
  <div class="row website-Gallery content int-Gall" style="padding-left: 30px;">
    <h3>No active sites found.</h3>
    <p>Try another search, or <a href="/browse">browse all sites</a>!</p>
  </div>
<% else %>
  <ul class="row website-Gallery content int-Gall">
    <% @sites.each_with_index do |site,i| %>
      <li>
        <a href="" class="neo-Screen-Shot" title="<%= site.title %>" onclick="surf(<%= i+1 %>); return false">
          <span class="img-Holder" style="background:url(<%= site.screenshot_url('index.html', '540x405') %>) no-repeat;">
            <img src="/img/placeholder.png" alt="<%= site.title %>" />
          </span>
        </a>
        <div class="title">
          <a href="" title="<%= site.title %>" onclick="surf(<%= i+1 %>); return false"><%= site.title.shorten(30) %></a>
        </div>
        <div class="site-info">
          <div class="username">
            <a href="/site/<%= site.username %>" title="Profile">
              <i class="fa fa-user"><% if site.supporter? %><i class="fa fa-heart"></i><% end %></i><%= site.username %>
            </a>
          </div>
          <div class="site-stats">
            <a href="/site/<%= site.username %>">
              <% if params[:sort_by] == 'hits' %>
                <%= site.hits %>&nbsp;hit<%= site.hits == 1 ? '' : 's' %>
              <% else %>
                <%= site.views %>&nbsp;view<%= site.views == 1 ? '' : 's' %>
              <% end %>
            </a>
          </div>
          <div class="site-tags">
            <% if site.tags.count > 0 %>
              <i class="fa fa-tag"></i> 
              <% site.tags.each_with_index do |tag, index| %>
                <a class="" href="/browse?tag=<%= Rack::Utils.escape tag.name %>"><%= tag.name %></a><% if index != site.tags.length - 1 %>,<% end %> 
              <% end %>
            <% end %>
          </div>
        </div>
      </li>
    <% end %>
  </ul>
<% end %>

<% if params[:sort_by] != 'random' %>
  <% if @page_count > 1 %>
    <div class="txt-Center content eps pagination">
      <% if @current_page != 1 %>
        <a href="#" onclick="getPage(<%= @current_page - 1 %>); return false"><i class="fa fa-arrow-left arrow"></i></a>&nbsp;
      <% end %>

      <% 1.upto(@page_count) do |num| %>
        <% if num == @current_page %>
          <%= num %>&nbsp;
        <% else %>
          <a href="#" onclick="getPage(<%= num %>); return false"><%= num %></a>&nbsp;
        <% end %>
      <% end %>

      <% if @current_page != @page_count %>
        <a href="#" onclick="getPage(<%= @current_page + 1 %>); return false"><i class="fa fa-arrow-right arrow"></i></a>
      <% end %>
    </div>
  <% end %>
<% end %>

<div class="row website-Gallery content int-Gall tags">
    <h3>Popular Tags</h3>
    <p>
    <% Tag.popular_names(100).each do |tag| %>
      <a href="/browse?tag=<%= Rack::Utils.escape tag[:name] %>"><%= tag[:name] %></a>&nbsp;&nbsp;
    <% end %>
    </p>
</div>
</div>