← back to Cypress Awards
frontend/src/index.html
173 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyPresAwards - Non-Profit Cy Pres Directory</title>
<meta name="description" content="Comprehensive database of US non-profit organizations with cy pres statements for legal settlement distribution.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚖️</text></svg>">
<link rel="stylesheet" href="https://cypresawards.com/styles.css">
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="header-text">
<h1><a href="index.html" style="color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;"><span style="font-size: 1.2em;">⚖️</span> CyPresAwards</a></h1>
<p class="tagline">Directory of Non-Profits with Cy Pres Statements</p>
</div>
<nav class="header-nav">
<a href="index.html" class="nav-link active">Search Organizations</a>
<a href="submit.html" class="nav-link">Add My Org</a>
<a href="cases.html" class="nav-link">Cy Pres Cases</a>
<a href="news.html" class="nav-link">News</a>
<a href="settlement-firms.html" class="nav-link">Settlement Firms</a>
</nav>
</div>
</div>
</header>
<main class="container">
<!-- Search and Filter Section -->
<section class="search-section">
<div class="search-bar">
<input
type="text"
id="searchInput"
placeholder="Search by organization name or mission..."
aria-label="Search organizations">
<button id="searchBtn" class="btn btn-primary">Search</button>
</div>
<div class="filters">
<div class="filter-group">
<label for="legalTopicFilter">Legal Topic:</label>
<select id="legalTopicFilter" multiple size="5">
<option value="">All Topics</option>
</select>
</div>
<div class="filter-group">
<label for="categoryFilter">Category:</label>
<select id="categoryFilter" multiple size="5">
<option value="">All Categories</option>
</select>
</div>
<div class="filter-group">
<label for="stateFilter">State:</label>
<select id="stateFilter">
<option value="">All States</option>
<option value="CA">California</option>
<option value="NY">New York</option>
<option value="TX">Texas</option>
<option value="FL">Florida</option>
<option value="IL">Illinois</option>
<!-- Add more states as needed -->
</select>
</div>
</div>
<div class="filter-actions">
<button id="applyFilters" class="btn btn-primary">Apply Filters</button>
<button id="clearFilters" class="btn btn-secondary">Clear Filters</button>
</div>
</section>
<!-- Statistics Section -->
<section class="stats-section">
<div class="stat-card">
<h3 id="totalOrgs">0</h3>
<p>Total Organizations</p>
</div>
<div class="stat-card">
<h3 id="totalCategories">0</h3>
<p>Categories</p>
</div>
<div class="stat-card">
<h3 id="totalTopics">0</h3>
<p>Legal Topics</p>
</div>
</section>
<!-- News Section -->
<section class="news-section" style="background: white; border-radius: 8px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<h2 style="margin: 0 0 1.5rem 0; color: #1e40af; display: flex; align-items: center; gap: 0.5rem;">
📰 Recent Cy Pres News & Cases
</h2>
<div class="news-grid" style="display: grid; gap: 1.5rem;">
<div class="news-item" style="border-left: 4px solid #2563eb; padding-left: 1rem;">
<div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.25rem;">December 20, 2023</div>
<h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #1e293b;">
<a href="cases.html" style="color: #2563eb; text-decoration: none;">Court Rejects Cy Pres Settlement in Hawes v. Macy's</a>
</h3>
<p style="margin: 0; color: #475569; line-height: 1.6;">
U.S. District Court (S.D. Ohio) rejected a $10.5M settlement because proposed recipient PIRG was not sufficiently related to false advertising claims in bed sheets case.
</p>
</div>
<div class="news-item" style="border-left: 4px solid #10b981; padding-left: 1rem;">
<div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.25rem;">April 2023</div>
<h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #1e293b;">
<a href="cases.html" style="color: #2563eb; text-decoration: none;">Supreme Court Denies Review of Hyland v. Navient</a>
</h3>
<p style="margin: 0; color: #475569; line-height: 1.6;">
SCOTUS declined to hear challenge to Second Circuit's approval of $2.25M cy pres-only settlement with no distribution to class members in student loan case.
</p>
</div>
<div class="news-item" style="border-left: 4px solid #f59e0b; padding-left: 1rem;">
<div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.25rem;">September 2022</div>
<h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #1e293b;">
<a href="cases.html" style="color: #2563eb; text-decoration: none;">Second Circuit Approves Cy Pres-Only Settlement</a>
</h3>
<p style="margin: 0; color: #475569; line-height: 1.6;">
In Hyland v. Navient, court approved settlement establishing nonprofit for student loan counseling despite no direct payments to class members.
</p>
</div>
</div>
<div style="margin-top: 1.5rem; text-align: center;">
<a href="cases.html" style="color: #2563eb; text-decoration: none; font-weight: 600;">
View All Cases →
</a>
</div>
</section>
<!-- Results Section -->
<section class="results-section">
<div class="results-header">
<div>
<h2>🏛️ Organizations</h2>
<p class="results-subtitle">Nonprofits accepting cy pres awards</p>
</div>
<span id="resultsCount" class="results-count">Showing 0 results</span>
</div>
<div id="loadingSpinner" class="loading hidden">
<div class="spinner"></div>
<p>Loading organizations...</p>
</div>
<div id="errorMessage" class="error-message hidden"></div>
<div id="organizationsList" class="organizations-list">
<!-- Organizations will be dynamically inserted here -->
</div>
<div class="pagination">
<button id="prevPage" class="btn btn-secondary" disabled>Previous</button>
<span id="pageInfo">Page 1</span>
<button id="nextPage" class="btn btn-secondary">Next</button>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2024 CyPresAwards. A comprehensive database for legal professionals to identify suitable non-profits for cy pres awards.</p>
<p class="disclaimer">This database is provided for informational purposes. Please verify all information directly with organizations.</p>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>