neocities/views/search.erb

<style>
.search-results {
    background: #ffffff;
}

.result-item {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.result-item:last-child {
    border-bottom: none;
}

.screenshot {
    width: 400px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #ddd;
    margin-right: 15px;
}

.screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-details {
    flex-grow: 1;
}

.result-title {
    font-size: 1.2em;
    margin: 0;
}

.result-title a {
    color: #e93250;
    text-decoration: none;
}

.result-title a:hover {
    text-decoration: underline;
}

.result-url {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 5px;
}

.result-url a {
    color: #e93250;
    text-decoration: none;
}

.result-url a:hover {
    text-decoration: underline;
}

.result-snippet {
    font-size: 0.9em;
    color: #333;
    line-height: 1.5;
}
</style>

<div class="header-Outro with-columns browse-page">
  <div class="row content">
    <div class="col col-100">
      <h1>Site Search</h1>
    </div>

    <form id="search_criteria" action="/browse/search" method="GET">
      <div class="col col-50 filter">
        <fieldset class="grouping">
          <input name="q" type="text" class="input-Area" value="<%= params[:q] %>"  placeholder="keywords">
          <input style="vertical-align: 5px; margin-left: 4px;" type="submit" class="btn-Action" value="Search">
        </fieldset>
      </div>
    </div>
  </form>
</div>

<div class="content single-Col misc-page">
  <% if @daily_search_max_reached %>
    Search temporarily unavailable, please try again tomorrow.
  <% elsif @items == [] %>
    No results.
  <% elsif !@items.nil? %>
    <div class="search-results">
      <% @items.each do |item| %>
        <div class="result-item">
          <div class="screenshot">
            <a href="<%= item['link'] %>"><img src="<%= item['screenshot_url'] %>" alt="<%= item['title'] %>"></a>
          </div>
          <div class="result-details">
            <h3 class="result-title">
              <a href="<%= item['link'] %>"><%= item['title'] %></a>
            </h3>

            <div class="result-url">
              <a href="<%= item['link'] %>"><%= item['unencoded_link'] %></a>
            </div>

            <p class="result-snippet">
              <%== item['htmlSnippet'] %>
            </p>
          </div>
        </div>
      <% end %>
    </div>

    <div class="txt-Center">
      <h2>
        <% if @start > 0 %>
          <a href="?q=<%= Rack::Utils.escape params[:q] %>&start=<%= [@start-10, 0].max %>"><i class="fa fa-arrow-left arrow">&nbsp;&nbsp;</i></a>
        <% end %>
        <% if @total_results > @start+10 && @start+10 < 100 %>
          <a href="?q=<%= Rack::Utils.escape params[:q] %>&start=<%= @start+10 %>"><i class="fa fa-arrow-right arrow"></i></a>
        <% end %>
      </h2>
    </div>
  <% else %>
    Enter some keywords to begin searching.
  <% end %>
</div>