Spaces:
Running
Running
Ctrl+K
- 1.52 kB initial commit
- 210 Bytes # Professional Website Prompt for USA Combat Benefits Fund ## Project Overview Create a responsive, secure web application for the "USA Combat Benefits Fund" that allows veterans to verify their eligibility and access benefits. The system will validate user identity through name verification, date of birth, and spouse information. ## Technical Requirements - **Frontend**: HTML5, CSS3, JavaScript (with responsive design) - **Framework**: Bootstrap 5 for responsive layout - **Validation**: Client-side form validation with JavaScript - **Security**: HTTPS, input sanitization - **Compatibility**: Mobile-first design, works on all modern browsers ## Core Features ### 1. Responsive Benefits Verification Form (HTML) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>USA Combat Benefits Fund - Eligibility Verification</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="styles.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <header class="row bg-dark text-white p-3"> <div class="col-md-8"> <h1>USA Combat Benefits Fund</h1> <p class="lead">Verification Portal for Veterans</p> </div> <div class="col-md-4 text-md-end"> <img src="us-flag.png" alt="US Flag" class="img-fluid" style="max-height: 80px;"> </div> </header> <main class="row justify-content-center mt-4"> <div class="col-lg-8 col-md-10"> <div class="card shadow"> <div class="card-header bg-primary text-white"> <h2 class="h5 mb-0">Benefits Eligibility Verification</h2> </div> <div class="card-body"> <form id="verificationForm" novalidate> <!-- Personal Information --> <fieldset class="mb-4"> <legend class="h6">Personal Information</legend> <div class="row g-3"> <div class="col-md-6"> <label for="firstName" class="form-label">First Name*</label> <input type="text" class="form-control" id="firstName" required> <div class="invalid-feedback">Please provide your first name.</div> </div> <div class="col-md-6"> <label for="lastName" class="form-label">Last Name*</label> <input type="text" class="form-control" id="lastName" required> <div class="invalid-feedback">Please provide your last name.</div> </div> <div class="col-md-6"> <label for="dob" class="form-label">Date of Birth*</label> <input type="date" class="form-control" id="dob" required> <div class="invalid-feedback">Please provide your date of birth.</div> </div> <div class="col-md-6"> <label for="ssn" class="form-label">Last 4 of SSN*</label> <input type="text" class="form-control" id="ssn" pattern="\d{4}" required> <div class="invalid-feedback">Please provide last 4 digits of your SSN.</div> </div> </div> </fieldset> <!-- Spouse Information --> <fieldset class="mb-4"> <legend class="h6">Spouse Information (if applicable)</legend> <div class="row g-3"> <div class="col-md-6"> <label for="spouseFirstName" class="form-label">Spouse First Name</label> <input type="text" class="form-control" id="spouseFirstName"> </div> <div class="col-md-6"> <label for="spouseLastName" class="form-label">Spouse Last Name</label> <input type="text" class="form-control" id="spouseLastName"> </div> <div class="col-md-6"> <label for="spouseDob" class="form-label">Spouse Date of Birth</label> <input type="date" class="form-control" id="spouseDob"> </div> </div> </fieldset> <!-- Military Service --> <fieldset class="mb-4"> <legend class="h6">Military Service Information*</legend> <div class="row g-3"> <div class="col-md-6"> <label for="branch" class="form-label">Branch of Service*</label> <select class="form-select" id="branch" required> <option value="">Select Branch</option> <option value="army">Army</option> <option value="navy">Navy</option> <option value="air-force">Air Force</option> <option value="marines">Marines</option> <option value="coast-guard">Coast Guard</option> </select> <div class="invalid-feedback">Please select your branch of service.</div> </div> <div class="col-md-6"> <label for="serviceNumber" class="form-label">Service Number*</label> <input type="text" class="form-control" id="serviceNumber" required> <div class="invalid-feedback">Please provide your service number.</div> </div> </div> </fieldset> <div class="d-grid gap-2 d-md-flex justify-content-md-end"> <button type="reset" class="btn btn-secondary me-md-2">Reset Form</button> <button type="submit" class="btn btn-primary">Verify Eligibility</button> </div> </form> </div> </div> <div class="mt-4 text-center"> <p>Need assistance? Call our support line: <strong>1-800-USA-VETS</strong></p> </div> </div> </main> <footer class="row bg-dark text-white p-3 mt-4"> <div class="col-12 text-center"> <p class="mb-0">© 2023 USA Combat Benefits Fund. All rights reserved.</p> </div> </footer> </div> <!-- Bootstrap 5 JS Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Custom JavaScript --> <script src="validation.js"></script> </body> </html> ``` ### 2. Responsive JavaScript Validation ```javascript // validation.js document.addEventListener('DOMContentLoaded', function() { // Form validation const form = document.getElementById('verificationForm'); form.addEventListener('submit', function(event) { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); if (form.checkValidity()) { // Simulate verification process verifyEligibility(); event.preventDefault(); // Prevent actual form submission for demo } }, false); // SSN input formatting const ssnInput = document.getElementById('ssn'); ssnInput.addEventListener('input', function() { this.value = this.value.replace(/\D/g, '').slice(0, 4); }); // Service number validation const serviceNumberInput = document.getElementById('serviceNumber'); serviceNumberInput.addEventListener('input', function() { this.value = this.value.toUpperCase(); }); // Responsive adjustments function adjustLayout() { const screenWidth = window.innerWidth; const formCard = document.querySelector('.card'); if (screenWidth < 768) { formCard.classList.remove('shadow'); } else { formCard.classList.add('shadow'); } } window.addEventListener('resize', adjustLayout); adjustLayout(); // Initial call }); function verifyEligibility() { // Show loading state const submitBtn = document.querySelector('#verificationForm button[type="submit"]'); submitBtn.disabled = true; submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Verifying...'; // Simulate API call setTimeout(function() { // Show results modal const resultModal = new bootstrap.Modal(document.getElementById('verificationResult')); resultModal.show(); // Reset button submitBtn.disabled = false; submitBtn.textContent = 'Verify Eligibility'; }, 2000); } ``` ### 3. Responsive CSS (styles.css) ```css /* Base Styles */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #212529; } .card { transition: box-shadow 0.3s ease; } /* Form Styling */ .form-label { font-weight: 500; } .invalid-feedback { font-size: 0.875rem; } /* Responsive Adjustments */ @media (max-width: 767.98px) { .card-header h2 { font-size: 1.1rem; } fieldset legend { font-size: 0.95rem; } .btn { width: 100%; margin-bottom: 0.5rem; } .d-md-flex.justify-content-md-end { justify-content: center !important; } } @media (min-width: 768px) { .card { margin-top: 2rem; } } /* Accessibility Focus Styles */ .form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } /* Loading State */ .spinner-border { vertical-align: text-top; } ``` ## Additional Requirements 1. **Security Features**: - All form submissions via HTTPS - Input sanitization on client and server side - CAPTCHA for form submission - Session timeout after 15 minutes of inactivity 2. **Responsive Design Must-Haves**: - Mobile-first approach - Fluid grid system - Flexible images - Media queries for different breakpoints - Touch-friendly form elements 3. **Performance Optimization**: - Minified CSS and JavaScript - Optimized images - Lazy loading for non-critical resources - Proper caching headers 4. **Accessibility Compliance**: - WCAG 2.1 AA standards - Proper ARIA labels - Keyboard navigation support - Sufficient color contrast 5. **Browser Compatibility**: - Chrome (latest 2 versions) - Firefox (latest 2 versions) - Safari (latest 2 versions) - Edge (latest 2 versions) - Mobile Safari and Chrome ## Design Specifications - **Color Scheme**: - Primary: #0d6efd (Bootstrap primary blue) - Secondary: #6c757d (Bootstrap secondary gray) - Accent: #198754 (Bootstrap success green) - Background: #f8f9fa (Light gray) - **Typography**: - Primary: 'Segoe UI', system-ui, sans-serif - Fallback: Tahoma, Geneva, Verdana, sans-serif - Base font size: 16px (with responsive adjustments) - **Spacing System**: - 4px base unit - 0.5rem (8px) increments - Responsive padding/margins - Initial Deployment
- 32.6 kB # Professional Website Prompt for USA Combat Benefits Fund ## Project Overview Create a responsive, secure web application for the "USA Combat Benefits Fund" that allows veterans to verify their eligibility and access benefits. The system will validate user identity through name verification, date of birth, and spouse information. ## Technical Requirements - **Frontend**: HTML5, CSS3, JavaScript (with responsive design) - **Framework**: Bootstrap 5 for responsive layout - **Validation**: Client-side form validation with JavaScript - **Security**: HTTPS, input sanitization - **Compatibility**: Mobile-first design, works on all modern browsers ## Core Features ### 1. Responsive Benefits Verification Form (HTML) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>USA Combat Benefits Fund - Eligibility Verification</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="styles.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <header class="row bg-dark text-white p-3"> <div class="col-md-8"> <h1>USA Combat Benefits Fund</h1> <p class="lead">Verification Portal for Veterans</p> </div> <div class="col-md-4 text-md-end"> <img src="us-flag.png" alt="US Flag" class="img-fluid" style="max-height: 80px;"> </div> </header> <main class="row justify-content-center mt-4"> <div class="col-lg-8 col-md-10"> <div class="card shadow"> <div class="card-header bg-primary text-white"> <h2 class="h5 mb-0">Benefits Eligibility Verification</h2> </div> <div class="card-body"> <form id="verificationForm" novalidate> <!-- Personal Information --> <fieldset class="mb-4"> <legend class="h6">Personal Information</legend> <div class="row g-3"> <div class="col-md-6"> <label for="firstName" class="form-label">First Name*</label> <input type="text" class="form-control" id="firstName" required> <div class="invalid-feedback">Please provide your first name.</div> </div> <div class="col-md-6"> <label for="lastName" class="form-label">Last Name*</label> <input type="text" class="form-control" id="lastName" required> <div class="invalid-feedback">Please provide your last name.</div> </div> <div class="col-md-6"> <label for="dob" class="form-label">Date of Birth*</label> <input type="date" class="form-control" id="dob" required> <div class="invalid-feedback">Please provide your date of birth.</div> </div> <div class="col-md-6"> <label for="ssn" class="form-label">Last 4 of SSN*</label> <input type="text" class="form-control" id="ssn" pattern="\d{4}" required> <div class="invalid-feedback">Please provide last 4 digits of your SSN.</div> </div> </div> </fieldset> <!-- Spouse Information --> <fieldset class="mb-4"> <legend class="h6">Spouse Information (if applicable)</legend> <div class="row g-3"> <div class="col-md-6"> <label for="spouseFirstName" class="form-label">Spouse First Name</label> <input type="text" class="form-control" id="spouseFirstName"> </div> <div class="col-md-6"> <label for="spouseLastName" class="form-label">Spouse Last Name</label> <input type="text" class="form-control" id="spouseLastName"> </div> <div class="col-md-6"> <label for="spouseDob" class="form-label">Spouse Date of Birth</label> <input type="date" class="form-control" id="spouseDob"> </div> </div> </fieldset> <!-- Military Service --> <fieldset class="mb-4"> <legend class="h6">Military Service Information*</legend> <div class="row g-3"> <div class="col-md-6"> <label for="branch" class="form-label">Branch of Service*</label> <select class="form-select" id="branch" required> <option value="">Select Branch</option> <option value="army">Army</option> <option value="navy">Navy</option> <option value="air-force">Air Force</option> <option value="marines">Marines</option> <option value="coast-guard">Coast Guard</option> </select> <div class="invalid-feedback">Please select your branch of service.</div> </div> <div class="col-md-6"> <label for="serviceNumber" class="form-label">Service Number*</label> <input type="text" class="form-control" id="serviceNumber" required> <div class="invalid-feedback">Please provide your service number.</div> </div> </div> </fieldset> <div class="d-grid gap-2 d-md-flex justify-content-md-end"> <button type="reset" class="btn btn-secondary me-md-2">Reset Form</button> <button type="submit" class="btn btn-primary">Verify Eligibility</button> </div> </form> </div> </div> <div class="mt-4 text-center"> <p>Need assistance? Call our support line: <strong>1-800-USA-VETS</strong></p> </div> </div> </main> <footer class="row bg-dark text-white p-3 mt-4"> <div class="col-12 text-center"> <p class="mb-0">© 2023 USA Combat Benefits Fund. All rights reserved.</p> </div> </footer> </div> <!-- Bootstrap 5 JS Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Custom JavaScript --> <script src="validation.js"></script> </body> </html> ``` ### 2. Responsive JavaScript Validation ```javascript // validation.js document.addEventListener('DOMContentLoaded', function() { // Form validation const form = document.getElementById('verificationForm'); form.addEventListener('submit', function(event) { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); if (form.checkValidity()) { // Simulate verification process verifyEligibility(); event.preventDefault(); // Prevent actual form submission for demo } }, false); // SSN input formatting const ssnInput = document.getElementById('ssn'); ssnInput.addEventListener('input', function() { this.value = this.value.replace(/\D/g, '').slice(0, 4); }); // Service number validation const serviceNumberInput = document.getElementById('serviceNumber'); serviceNumberInput.addEventListener('input', function() { this.value = this.value.toUpperCase(); }); // Responsive adjustments function adjustLayout() { const screenWidth = window.innerWidth; const formCard = document.querySelector('.card'); if (screenWidth < 768) { formCard.classList.remove('shadow'); } else { formCard.classList.add('shadow'); } } window.addEventListener('resize', adjustLayout); adjustLayout(); // Initial call }); function verifyEligibility() { // Show loading state const submitBtn = document.querySelector('#verificationForm button[type="submit"]'); submitBtn.disabled = true; submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Verifying...'; // Simulate API call setTimeout(function() { // Show results modal const resultModal = new bootstrap.Modal(document.getElementById('verificationResult')); resultModal.show(); // Reset button submitBtn.disabled = false; submitBtn.textContent = 'Verify Eligibility'; }, 2000); } ``` ### 3. Responsive CSS (styles.css) ```css /* Base Styles */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #212529; } .card { transition: box-shadow 0.3s ease; } /* Form Styling */ .form-label { font-weight: 500; } .invalid-feedback { font-size: 0.875rem; } /* Responsive Adjustments */ @media (max-width: 767.98px) { .card-header h2 { font-size: 1.1rem; } fieldset legend { font-size: 0.95rem; } .btn { width: 100%; margin-bottom: 0.5rem; } .d-md-flex.justify-content-md-end { justify-content: center !important; } } @media (min-width: 768px) { .card { margin-top: 2rem; } } /* Accessibility Focus Styles */ .form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } /* Loading State */ .spinner-border { vertical-align: text-top; } ``` ## Additional Requirements 1. **Security Features**: - All form submissions via HTTPS - Input sanitization on client and server side - CAPTCHA for form submission - Session timeout after 15 minutes of inactivity 2. **Responsive Design Must-Haves**: - Mobile-first approach - Fluid grid system - Flexible images - Media queries for different breakpoints - Touch-friendly form elements 3. **Performance Optimization**: - Minified CSS and JavaScript - Optimized images - Lazy loading for non-critical resources - Proper caching headers 4. **Accessibility Compliance**: - WCAG 2.1 AA standards - Proper ARIA labels - Keyboard navigation support - Sufficient color contrast 5. **Browser Compatibility**: - Chrome (latest 2 versions) - Firefox (latest 2 versions) - Safari (latest 2 versions) - Edge (latest 2 versions) - Mobile Safari and Chrome ## Design Specifications - **Color Scheme**: - Primary: #0d6efd (Bootstrap primary blue) - Secondary: #6c757d (Bootstrap secondary gray) - Accent: #198754 (Bootstrap success green) - Background: #f8f9fa (Light gray) - **Typography**: - Primary: 'Segoe UI', system-ui, sans-serif - Fallback: Tahoma, Geneva, Verdana, sans-serif - Base font size: 16px (with responsive adjustments) - **Spacing System**: - 4px base unit - 0.5rem (8px) increments - Responsive padding/margins - Initial Deployment
- 388 Bytes initial commit