← back to Cypress Awards
frontend/src/submit.html
327 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Your Organization - CyPresAwards</title>
<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="styles.css">
<style>
.submit-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.form-card {
background: white;
border-radius: 8px;
padding: 40px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #1e293b;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.form-group small {
color: #64748b;
font-size: 0.875rem;
}
.required {
color: #ef4444;
}
.submit-btn {
background: #2563eb;
color: white;
border: none;
padding: 14px 32px;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
width: 100%;
}
.submit-btn:hover {
background: #1d4ed8;
}
.submit-btn:disabled {
background: #94a3b8;
cursor: not-allowed;
}
.success-message {
background: #d1fae5;
color: #065f46;
padding: 16px;
border-radius: 6px;
margin-bottom: 20px;
display: none;
}
.error-message {
background: #fee2e2;
color: #991b1b;
padding: 16px;
border-radius: 6px;
margin-bottom: 20px;
display: none;
}
.info-box {
background: #dbeafe;
border-left: 4px solid #2563eb;
padding: 16px;
border-radius: 6px;
margin-bottom: 30px;
}
.info-box h3 {
margin-top: 0;
color: #1e40af;
}
.info-box ul {
margin: 10px 0;
padding-left: 20px;
}
.back-link {
display: inline-block;
color: #2563eb;
text-decoration: none;
margin-bottom: 20px;
}
.back-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 1rem 0; margin-bottom: 2rem;">
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<h1 style="margin: 0; font-size: 2rem;">CyPresAwards</h1>
<p style="margin: 0.5rem 0 0 0; opacity: 0.95;">Directory of Non-Profits with Cy Pres Statements</p>
</div>
<nav style="display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="index.html" style="color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600;">Search Organizations</a>
<a href="submit.html" style="color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 6px; background: rgba(255,255,255,0.2); font-weight: 600;">Add My Org</a>
<a href="cases.html" style="color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600;">Cy Pres Cases</a>
<a href="settlement-firms.html" style="color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600;">Settlement Firms</a>
</nav>
</div>
</div>
</header>
<div class="submit-container">
<a href="index.html" class="back-link">← Back to Search</a>
<h1>Add My Organization</h1>
<p>Submit your nonprofit organization to the CyPresAwards database to increase visibility for cy pres awards</p>
<div class="info-box">
<h3>Why Submit Your Organization?</h3>
<ul>
<li>Increase visibility to legal professionals seeking cy pres recipients</li>
<li>Help courts and attorneys identify qualified organizations for cy pres awards</li>
<li>Join a comprehensive database of nonprofits accepting cy pres distributions</li>
<li>Make it easier for class action settlement funds to find your organization</li>
</ul>
</div>
<div class="info-box" style="background: #f0fdf4; border-left-color: #10b981;">
<h3 style="color: #059669;">Don't have a Cy Pres page? Create one!</h3>
<p style="margin: 10px 0;">A dedicated cy pres page helps legal professionals understand your organization's eligibility and mission. Include:</p>
<ul>
<li><strong>Mission statement:</strong> Clear description of your organization's purpose and impact</li>
<li><strong>Legal topics:</strong> Areas of law relevant to your work (consumer protection, civil rights, etc.)</li>
<li><strong>Contact information:</strong> Dedicated contact for cy pres inquiries</li>
<li><strong>Past awards:</strong> Previous cy pres awards received (if applicable)</li>
<li><strong>Tax status:</strong> 501(c)(3) status confirmation and EIN</li>
<li><strong>Financial transparency:</strong> Link to annual reports or Form 990</li>
</ul>
<p style="margin: 10px 0; font-weight: 600;">💡 Tip: Add a dedicated page at yoursite.org/cy-pres or yoursite.org/legal-settlements to make it easy for attorneys to find!</p>
</div>
<div class="form-card">
<div class="success-message" id="successMessage">
✓ Your organization has been submitted successfully! It will appear in the database shortly.
</div>
<div class="error-message" id="errorMessage">
✗ <span id="errorText">An error occurred. Please try again.</span>
</div>
<form id="submitForm">
<div class="form-group">
<label for="name">Organization Name <span class="required">*</span></label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="website_url">Website URL <span class="required">*</span></label>
<input type="url" id="website_url" name="website_url" placeholder="https://example.org" required>
<small>Your organization's main website</small>
</div>
<div class="form-group">
<label for="cypres_page_url">Cy Pres Page URL</label>
<input type="url" id="cypres_page_url" name="cypres_page_url" placeholder="https://example.org/cy-pres">
<small>Direct link to your cy pres information page (if you have one)</small>
</div>
<div class="form-group">
<label for="mission_statement">Mission Statement</label>
<textarea id="mission_statement" name="mission_statement" placeholder="Describe your organization's mission..."></textarea>
</div>
<div class="form-group">
<label for="ein">EIN (Tax ID)</label>
<input type="text" id="ein" name="ein" placeholder="12-3456789">
<small>Your organization's Employer Identification Number</small>
</div>
<div class="form-group">
<label for="logo_url">Logo URL</label>
<input type="url" id="logo_url" name="logo_url" placeholder="https://example.org/logo.png">
<small>Direct link to your organization's logo</small>
</div>
<div class="form-group">
<label for="location_city">City</label>
<input type="text" id="location_city" name="location_city">
</div>
<div class="form-group">
<label for="location_state">State</label>
<input type="text" id="location_state" name="location_state" maxlength="2" placeholder="CA">
<small>Two-letter state code (e.g., CA, NY, TX)</small>
</div>
<h3>Contact Information (for verification only)</h3>
<div class="form-group">
<label for="contact_name">Your Name</label>
<input type="text" id="contact_name" name="contact_name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">
</div>
<button type="submit" class="submit-btn" id="submitBtn">Submit Organization</button>
</form>
</div>
</div>
<script>
const API_BASE_URL = window.location.origin + '/api';
document.getElementById('submitForm').addEventListener('submit', async (e) => {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
const successMsg = document.getElementById('successMessage');
const errorMsg = document.getElementById('errorMessage');
const errorText = document.getElementById('errorText');
// Hide messages
successMsg.style.display = 'none';
errorMsg.style.display = 'none';
// Disable button
submitBtn.disabled = true;
submitBtn.textContent = 'Submitting...';
// Collect form data
const formData = {
name: document.getElementById('name').value,
website_url: document.getElementById('website_url').value,
cypres_page_url: document.getElementById('cypres_page_url').value || null,
mission_statement: document.getElementById('mission_statement').value || null,
ein: document.getElementById('ein').value || null,
logo_url: document.getElementById('logo_url').value || null,
location_city: document.getElementById('location_city').value || null,
location_state: document.getElementById('location_state').value || null,
contact_name: document.getElementById('contact_name').value || null,
email: document.getElementById('email').value || null,
phone: document.getElementById('phone').value || null
};
try {
const response = await fetch(`${API_BASE_URL}/organizations/submit`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (data.success) {
successMsg.style.display = 'block';
document.getElementById('submitForm').reset();
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
// Redirect after 3 seconds
setTimeout(() => {
window.location.href = 'index.html';
}, 3000);
} else {
throw new Error(data.error || 'Submission failed');
}
} catch (error) {
console.error('Submission error:', error);
errorText.textContent = error.message || 'An error occurred. Please try again.';
errorMsg.style.display = 'block';
// Re-enable button
submitBtn.disabled = false;
submitBtn.textContent = 'Submit Organization';
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
}
});
</script>
</body>
</html>