didnt-read/src/views/public/index.ejs

<div class="hero">
    <h1>Privacy Policy Analyzer</h1>
    <p class="tagline">We read the fine print so you don't have to. Get clear A-E privacy grades for your favorite services.</p>
</div>

<div class="search-section">
    <form action="/search" method="GET" class="search-form">
        <input 
            type="search" 
            name="q" 
            placeholder="Search services..." 
            aria-label="Search services"
        >
        <button type="submit">Search</button>
    </form>
</div>

<div class="grade-filters">
    <p>Filter by grade:</p>
    <div class="filter-buttons">
        <a href="/?grade=A" class="filter-btn grade-a">A</a>
        <a href="/?grade=B" class="filter-btn grade-b">B</a>
        <a href="/?grade=C" class="filter-btn grade-c">C</a>
        <a href="/?grade=D" class="filter-btn grade-d">D</a>
        <a href="/?grade=E" class="filter-btn grade-e">E</a>
        <a href="/" class="filter-btn all">All</a>
    </div>
</div>

<% if (services && services.length > 0) { %>
    <div class="services-grid">
        <% services.forEach(function(service) { %>
            <article class="service-card">
                <a href="/service/<%= service.id %>" class="service-link" aria-describedby="service-<%= service.id %>-grade">
                    <% if (service.logo_url) { %>
                        <img src="<%= service.logo_url %>" alt="<%= service.name %> logo" class="service-logo">
                    <% } %>
                    
                    <h2><%= service.name %></h2>
                    
                    <% if (service.grade) { %>
                        <div class="grade-display">
                            <span class="grade grade-<%= service.grade.toLowerCase() %>" id="service-<%= service.id %>-grade">
                                <%= service.grade %>
                            </span>
                            <span class="visually-hidden">Privacy Grade <%= service.grade %></span>
                        </div>
                        
                        <% if (service.last_analyzed) { %>
                            <p class="last-analyzed">
                                Last analyzed: <%= new Date(service.last_analyzed).toLocaleDateString() %>
                            </p>
                        <% } %>
                        
                        <% if (service.findings && service.findings.negative && service.findings.negative.length > 0) { %>
                            <ul class="key-findings" aria-label="Key privacy concerns">
                                <% service.findings.negative.slice(0, 3).forEach(function(finding) { %>
                                    <li><%= finding.title %></li>
                                <% }); %>
                                
                                <% if (service.findings.negative.length > 3) { %>
                                    <li class="more">...and <%= service.findings.negative.length - 3 %> more</li>
                                <% } %>
                            </ul>
                        <% } %>
                    <% } else { %>
                        <p class="no-grade">Not analyzed yet</p>
                    <% } %>
                </a>
            </article>
        <% }); %>
    </div>
    
    <% if (pagination && pagination.totalPages > 1) { %>
        <nav class="pagination" aria-label="Pagination">
            <% if (pagination.hasPrev) { %>
                <a href="/?page=<%= pagination.currentPage - 1 %>" class="btn">Previous</a>
            <% } %>
            
            <span>Page <%= pagination.currentPage %> of <%= pagination.totalPages %></span>
            
            <% if (pagination.hasNext) { %>
                <a href="/?page=<%= pagination.currentPage + 1 %>" class="btn">Next</a>
            <% } %>
        </nav>
    <% } %>
<% } else { %>
    <div class="empty-state">
        <p>No services found. Check back soon!</p>
    </div>
<% } %>

<style>
    .hero {
        text-align: center;
        padding: 3rem 0;
    }
    
    .hero h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #2c3e50;
    }
    
    .tagline {
        font-size: 1.25rem;
        color: #666;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .search-section {
        max-width: 600px;
        margin: 0 auto 2rem;
    }
    
    .search-form {
        display: flex;
        gap: 0.5rem;
    }
    
    .search-form input {
        flex: 1;
        padding: 1rem;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
    }
    
    .search-form button {
        padding: 1rem 2rem;
        min-height: 44px;
    }
    
    .grade-filters {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .grade-filters p {
        margin-bottom: 0.5rem;
        color: #666;
    }
    
    .filter-buttons {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .filter-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        text-decoration: none;
        font-weight: 700;
        color: #fff;
        min-width: 44px;
        min-height: 44px;
    }
    
    .filter-btn.all {
        background: #95a5a6;
        width: auto;
        padding: 0 1rem;
        border-radius: 22px;
    }
    
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .service-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .service-link {
        display: block;
        padding: 1.5rem;
        text-decoration: none;
        color: inherit;
    }
    
    .service-logo {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin-bottom: 1rem;
    }
    
    .service-card h2 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
        color: #2c3e50;
    }
    
    .grade-display {
        margin: 1rem 0;
    }
    
    .last-analyzed {
        font-size: 0.875rem;
        color: #999;
        margin-top: 0.5rem;
    }
    
    .no-grade {
        color: #999;
        font-style: italic;
    }
    
    .key-findings {
        list-style: none;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #eee;
    }
    
    .key-findings li {
        padding: 0.25rem 0;
        color: #666;
        font-size: 0.875rem;
    }
    
    .key-findings li::before {
        content: "⚠️ ";
    }
    
    .key-findings li.more {
        color: #999;
        font-style: italic;
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #666;
    }
    
    @media (max-width: 768px) {
        .hero h1 {
            font-size: 2rem;
        }
        
        .search-form {
            flex-direction: column;
        }
    }
</style>