`views/index.ejs`

76 lines
<%- include('partials/head', { title: '', description: 'Browse active petitions, start your own, and find your elected representatives — free and transparent.' }) %>

<section class="hero">
  <div class="wrap">
    <h1>Make your voice heard — <em>and get it in front of the right official.</em></h1>
    <p class="hero-sub">Start a petition, gather real signatures, and find exactly who represents you at the local, state, and federal level. No paywalls, no dark patterns.</p>
    <div class="hero-actions">
      <a href="/petitions/new" class="btn btn-primary">Start a Petition</a>
      <a href="/find-reps" class="btn btn-ghost">Find Your Representatives</a>
    </div>
    <p class="hero-stat"><strong><%= petitions.length %></strong> active petition<%= petitions.length === 1 ? '' : 's' %> &middot; <strong><%= totalSignatures %></strong> signature<%= totalSignatures === 1 ? '' : 's' %> collected</p>
  </div>
</section>

<section class="wrap">
  <div class="grid-controls" role="group" aria-label="Sort and display controls">
    <div class="control">
      <label for="q">Search</label>
      <input type="search" id="q" placeholder="Search title, target, description…" autocomplete="off">
    </div>
    <div class="control">
      <label for="category-filter">Category</label>
      <select id="category-filter">
        <option value="">All categories</option>
        <% categories.forEach(function(c){ %>
          <option value="<%= c %>"><%= c %></option>
        <% }) %>
      </select>
    </div>
    <div class="control">
      <label for="sort-select">Sort</label>
      <select id="sort-select">
        <option value="newest">Newest</option>
        <option value="most-signed">Most Signatures</option>
        <option value="title-az">Title A→Z</option>
        <option value="target-az">Target A→Z</option>
      </select>
    </div>
    <div class="control density-control">
      <label for="density-slider">Density</label>
      <input type="range" id="density-slider" min="1" max="4" step="1" value="3">
    </div>
  </div>

  <% if (petitions.length === 0) { %>
    <div class="empty-state">
      <p>No petitions yet. <a href="/petitions/new">Be the first to start one.</a></p>
    </div>
  <% } else { %>
    <div class="petition-grid" id="petition-grid" data-density="3">
      <% petitions.forEach(function(p){ %>
        <a class="petition-card"
           href="/petitions/<%= p.slug %>"
           data-title="<%= p.title.toLowerCase() %>"
           data-target="<%= p.target.toLowerCase() %>"
           data-desc="<%= p.description.toLowerCase() %>"
           data-category="<%= p.category %>"
           data-created="<%= p.createdAt %>"
           data-signatures="<%= p.signatureCount %>">
          <span class="card-category"><%= p.category %></span>
          <h2><%= p.title %></h2>
          <p class="card-target">Target: <%= p.target %></p>
          <p class="card-desc"><%= p.description.slice(0, 140) %><%= p.description.length > 140 ? '…' : '' %></p>
          <div class="card-meta">
            <span class="sig-count"><strong><%= p.signatureCount %></strong> signature<%= p.signatureCount === 1 ? '' : 's' %></span>
            <span class="card-date"><%= new Date(p.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) %></span>
          </div>
        </a>
      <% }) %>
    </div>
    <p class="no-results" id="no-results" hidden>No petitions match your search.</p>
  <% } %>
</section>

<%- include('partials/foot') %>