LendingPoint – Personal Loan Application
:root {
–lp-navy: #0a1628;
–lp-teal: #00b4a0;
–lp-teal-hover: #009a89;
–lp-white: #ffffff;
–lp-light-gray: #f5f6f8;
–lp-border: #dde1e6;
–lp-text: #1a1f2e;
–lp-text-light: #5f6b7a;
–lp-error: #d92d20;
–lp-success: #00b4a0;
–lp-input-bg: #ffffff;
–lp-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
–lp-radius: 8px;
–lp-radius-lg: 12px;
–lp-transition: 0.2s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Inter’, ‘Segoe UI’, system-ui, -apple-system, sans-serif;
background: #f0f2f5;
color: var(–lp-text);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
width: 100%;
max-width: 560px;
background: var(–lp-white);
border-radius: var(–lp-radius-lg);
box-shadow: var(–lp-shadow), 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* Header */
.header {
background: var(–lp-navy);
padding: 24px 32px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid var(–lp-teal);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo-icon {
width: 38px;
height: 38px;
background: var(–lp-teal);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px;
color: #fff;
letter-spacing: -1px;
}
.logo-text {
color: #fff;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
}
.header-badge {
background: rgba(255, 255, 255, 0.1);
color: #fff;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 6px;
}
.header-badge .dot {
width: 7px;
height: 7px;
background: #4ade80;
border-radius: 50%;
display: inline-block;
}
/* Trust Strip */
.trust-strip {
background: #f8fafb;
padding: 14px 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
border-bottom: 1px solid var(–lp-border);
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
color: var(–lp-text-light);
letter-spacing: 0.2px;
}
.trust-item svg {
width: 16px;
height: 16px;
color: var(–lp-teal);
flex-shrink: 0;
}
/* Progress */
.progress-container {
padding: 20px 32px 0;
}
.progress-steps {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
position: relative;
z-index: 1;
}
.step-circle {
width: 34px;
height: 34px;
border-radius: 50%;
background: #e8ecf1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
color: #8b95a5;
transition: all var(–lp-transition);
border: 2px solid transparent;
}
.progress-step.active .step-circle {
background: var(–lp-teal);
color: #fff;
border-color: var(–lp-teal);
box-shadow: 0 0 0 6px rgba(0, 180, 160, 0.15);
}
.progress-step.completed .step-circle {
background: #d4f5f0;
color: var(–lp-teal);
border-color: var(–lp-teal);
}
.progress-step .step-label {
font-size: 10px;
font-weight: 600;
color: #8b95a5;
letter-spacing: 0.3px;
text-transform: uppercase;
white-space: nowrap;
}
.progress-step.active .step-label {
color: var(–lp-teal);
}
.progress-step.completed .step-label {
color: var(–lp-teal);
}
.progress-bar-track {
flex: 1;
height: 3px;
background: #e8ecf1;
margin: 0 6px;
border-radius: 10px;
position: relative;
top: -11px;
z-index: 0;
}
.progress-bar-fill {
height: 100%;
background: var(–lp-teal);
border-radius: 10px;
transition: width 0.4s ease;
}
/* Form Body */
.form-body {
padding: 28px 32px 32px;
}
.form-step {
display: none;
animation: fadeSlideIn 0.35s ease forwards;
}
.form-step.active {
display: block;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.step-title {
font-size: 20px;
font-weight: 700;
color: var(–lp-navy);
margin-bottom: 4px;
letter-spacing: -0.3px;
}
.step-subtitle {
font-size: 13px;
color: var(–lp-text-light);
margin-bottom: 22px;
font-weight: 500;
}
.form-row {
display: flex;
gap: 14px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.form-group {
flex: 1;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 5px;
}
.form-group.full-width {
flex: 1 1 100%;
min-width: 100%;
}
.form-group label {
font-size: 12px;
font-weight: 700;
color: var(–lp-text);
letter-spacing: 0.2px;
text-transform: uppercase;
}
.form-group label .required {
color: var(–lp-error);
margin-left: 2px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 14px;
border: 2px solid var(–lp-border);
border-radius: var(–lp-radius);
font-size: 15px;
font-family: inherit;
color: var(–lp-text);
background: var(–lp-input-bg);
transition: all var(–lp-transition);
outline: none;
letter-spacing: 0.2px;
}
.form-group input:focus,
.form-group select:focus {
border-color: var(–lp-teal);
box-shadow: 0 0 0 4px rgba(0, 180, 160, 0.08);
background: #fff;
}
.form-group input::placeholder {
color: #b0b8c1;
}
.form-group select {
appearance: none;
-webkit-appearance: none;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’12’ height=’12’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%235f6b7a’ stroke-width=’2.5′ stroke-linecap=’round’ stroke-linejoin=’round’%3E%3Cpolyline points=’6 9 12 15 18 9’%3E%3C/polyline%3E%3C/svg%3E”);
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.form-group .input-icon-wrapper {
position: relative;
}
.form-group .input-icon-wrapper input {
padding-left: 40px;
}
.form-group .input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #8b95a5;
font-size: 15px;
pointer-events: none;
font-weight: 600;
}
.helper-text {
font-size: 11px;
color: var(–lp-text-light);
margin-top: -2px;
font-weight: 500;
}
.error-text {
font-size: 11px;
color: var(–lp-error);
margin-top: -2px;
font-weight: 600;
display: none;
}
.form-group.error input,
.form-group.error select {
border-color: var(–lp-error);
background: #fffbfb;
}
.form-group.error .error-text {
display: block;
}
/* Loan Amount Slider */
.loan-amount-display {
background: #f0fdfa;
border: 2px solid var(–lp-teal);
border-radius: var(–lp-radius-lg);
padding: 20px 24px;
text-align: center;
margin-bottom: 20px;
}
.loan-amount-display .amount {
font-size: 42px;
font-weight: 800;
color: var(–lp-navy);
letter-spacing: -2px;
line-height: 1;
}
.loan-amount-display .amount span {
font-size: 22px;
font-weight: 600;
letter-spacing: -1px;
color: var(–lp-text-light);
}
.loan-amount-display .amount-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(–lp-text-light);
font-weight: 700;
margin-top: 4px;
}
.slider-container {
margin-bottom: 20px;
}
.slider-labels {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 700;
color: var(–lp-text-light);
letter-spacing: 0.3px;
}
input[type=”range”] {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 10px;
background: linear-gradient(to right, var(–lp-teal) 0%, var(–lp-teal) 40%, #e8ecf1 40%, #e8ecf1 100%);
outline: none;
margin: 10px 0;
}
input[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 3px solid var(–lp-teal);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all var(–lp-transition);
}
input[type=”range”]::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
/* Buttons */
.btn-row {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.btn {
padding: 14px 28px;
border-radius: var(–lp-radius);
font-weight: 700;
font-size: 15px;
cursor: pointer;
letter-spacing: 0.2px;
transition: all var(–lp-transition);
border: none;
font-family: inherit;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: var(–lp-teal);
color: #fff;
flex: 1;
min-width: 160px;
}
.btn-primary:hover {
background: var(–lp-teal-hover);
box-shadow: 0 6px 20px rgba(0, 180, 160, 0.3);
transform: translateY(-1px);
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-secondary {
background: #fff;
color: var(–lp-text);
border: 2px solid var(–lp-border);
flex: 0;
min-width: 100px;
}
.btn-secondary:hover {
background: #f8f9fb;
border-color: #c0c7d1;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Footer */
.form-footer {
padding: 16px 32px;
background: #fafbfc;
border-top: 1px solid var(–lp-border);
text-align: center;
font-size: 11px;
color: var(–lp-text-light);
letter-spacing: 0.2px;
}
.form-footer a {
color: var(–lp-teal);
text-decoration: none;
font-weight: 600;
}
.form-footer a:hover {
text-decoration: underline;
}
.secure-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 8px;
font-weight: 600;
color: #8b95a5;
font-size: 11px;
}
.secure-badge svg {
width: 14px;
height: 14px;
}
/* Checkbox */
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 12px;
}
.checkbox-group input[type=”checkbox”] {
width: 18px;
height: 18px;
accent-color: var(–lp-teal);
cursor: pointer;
margin-top: 2px;
flex-shrink: 0;
}
.checkbox-group label {
font-size: 12px;
color: var(–lp-text-light);
font-weight: 500;
cursor: pointer;
line-height: 1.5;
}
.checkbox-group label a {
color: var(–lp-teal);
font-weight: 600;
text-decoration: underline;
}
/* Responsive */
@media (max-width: 600px) {
.container {
max-width: 100%;
border-radius: 0;
}
.header {
padding: 18px 20px;
}
.form-body {
padding: 20px;
}
.trust-strip {
padding: 10px 16px;
gap: 14px;
}
.form-row {
flex-direction: column;
gap: 14px;
}
.form-group {
min-width: 100%;
}
.btn-row {
flex-direction: column;
}
.btn-secondary {
order: -1;
min-width: 100%;
}
.loan-amount-display .amount {
font-size: 32px;
}
.progress-steps {
gap: 2px;
}
.step-circle {
width: 28px;
height: 28px;
font-size: 11px;
}
.progress-step .step-label {
font-size: 8px;
}
}
256-bit SSL Secure
Fast 2-Minute Application
No Hard Credit Pull
// DOM Elements
const form = document.getElementById(‘loanForm’);
const formSteps = document.querySelectorAll(‘.form-step’);
const progressSteps = document.querySelectorAll(‘.progress-step’);
const progressFill = document.getElementById(‘progressFill’);
const progressFill2 = document.getElementById(‘progressFill2’);
const progressFill3 = document.getElementById(‘progressFill3’);
const loanAmountInput = document.getElementById(‘loanAmount’);
const amountValue = document.getElementById(‘amountValue’);
const termsError = document.getElementById(‘termsError’);
const agreeTerms = document.getElementById(‘agreeTerms’);
let currentStep = 1;
const totalSteps = 4;
// Format number with commas
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);
}
// Update loan amount display
loanAmountInput.addEventListener(‘input’, function() {
const val = parseInt(this.value);
amountValue.textContent = formatNumber(val);
// Update slider gradient
const min = parseInt(this.min);
const max = parseInt(this.max);
const percent = ((val – min) / (max – min)) * 100;
this.style.background = `linear-gradient(to right, #00b4a0 0%, #00b4a0 ${percent}%, #e8ecf1 ${percent}%, #e8ecf1 100%)`;
});
// Initialize slider
loanAmountInput.dispatchEvent(new Event(‘input’));
// Update progress UI
function updateProgress(step) {
progressSteps.forEach((ps, i) => {
ps.classList.remove(‘active’, ‘completed’);
if (i + 1 = 2) progressFill.style.width = ‘100%’;
else progressFill.style.width = ‘0%’;
if (step >= 3) progressFill2.style.width = ‘100%’;
else progressFill2.style.width = ‘0%’;
if (step >= 4) progressFill3.style.width = ‘100%’;
else progressFill3.style.width = ‘0%’;
}
// Validate current step
function validateStep(step) {
let valid = true;
const stepEl = document.querySelector(`.form-step[data-step=”${step}”]`);
const requiredFields = stepEl.querySelectorAll(‘[required]’);
requiredFields.forEach(field => {
const formGroup = field.closest(‘.form-group’);
if (field.type === ‘checkbox’) {
if (!field.checked) {
valid = false;
if (field.id === ‘agreeTerms’) {
termsError.style.display = ‘block’;
}
} else {
if (field.id === ‘agreeTerms’) {
termsError.style.display = ‘none’;
}
}
} else if (!field.value.trim()) {
valid = false;
if (formGroup) formGroup.classList.add(‘error’);
} else {
if (formGroup) formGroup.classList.remove(‘error’);
// Additional validation
if (field.type === ’email’ && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value)) {
valid = false;
if (formGroup) formGroup.classList.add(‘error’);
}
if (field.id === ‘ssn’ && !/^\d{4}$/.test(field.value)) {
valid = false;
if (formGroup) formGroup.classList.add(‘error’);
}
if (field.id === ‘zip’ && !/^\d{5}$/.test(field.value)) {
valid = false;
if (formGroup) formGroup.classList.add(‘error’);
}
}
});
return valid;
}
// Navigate to step
function goToStep(step) {
formSteps.forEach(fs => fs.classList.remove(‘active’));
const target = document.querySelector(`.form-step[data-step=”${step}”]`);
if (target) target.classList.add(‘active’);
currentStep = step;
updateProgress(step);
// If going to review step, populate review data
if (step === 4) {
populateReview();
}
}
function nextStep(step) {
if (validateStep(currentStep)) {
goToStep(step);
// Scroll to top of form
document.querySelector(‘.container’).scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
}
function prevStep(step) {
goToStep(step);
document.querySelector(‘.container’).scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
// Populate review section
function populateReview() {
const purposeMap = {
‘debt’: ‘Debt Consolidation’,
‘home’: ‘Home Improvement’,
‘medical’: ‘Medical Expenses’,
‘auto’: ‘Auto Repair / Purchase’,
‘wedding’: ‘Wedding’,
‘vacation’: ‘Vacation’,
‘business’: ‘Small Business’,
‘other’: ‘Other’
};
const creditMap = {
‘excellent’: ‘Excellent (720+)’,
‘good’: ‘Good (680–719)’,
‘fair’: ‘Fair (640–679)’,
‘poor’: ‘Poor (580–639)’,
‘bad’: ‘Bad (Below 580)’,
‘unknown’: “I Don’t Know”
};
const empMap = {
‘full-time’: ‘Full-Time’,
‘part-time’: ‘Part-Time’,
‘self-employed’: ‘Self-Employed’,
‘retired’: ‘Retired’,
‘unemployed’: ‘Unemployed’,
‘other’: ‘Other’
};
document.getElementById(‘reviewAmount’).textContent = ‘$’ + formatNumber(parseInt(loanAmountInput.value));
document.getElementById(‘reviewPurpose’).textContent = purposeMap[document.getElementById(‘loanPurpose’)
.value] || ‘—’;
document.getElementById(‘reviewName’).textContent =
(document.getElementById(‘firstName’).value + ‘ ‘ + document.getElementById(‘lastName’).value).trim() ||
‘—’;
document.getElementById(‘reviewEmail’).textContent = document.getElementById(’email’).value || ‘—’;
document.getElementById(‘reviewPhone’).textContent = document.getElementById(‘phone’).value || ‘—’;
document.getElementById(‘reviewAddress’).textContent =
(document.getElementById(‘address’).value + ‘, ‘ + document.getElementById(‘city’).value + ‘, ‘ + document
.getElementById(‘state’).value + ‘ ‘ + document.getElementById(‘zip’).value).trim() || ‘—’;
document.getElementById(‘reviewEmployment’).textContent =
(empMap[document.getElementById(’employmentStatus’).value] || ”) + ‘ at ‘ + (document.getElementById(
’employer’).value || ”);
document.getElementById(‘reviewIncome’).textContent = document.getElementById(‘income’).value ?
‘$’ + formatNumber(parseInt(document.getElementById(‘income’).value.replace(/,/g, ”))) : ‘—’;
document.getElementById(‘reviewCredit’).textContent = creditMap[document.getElementById(‘creditScore’).value] ||
‘—’;
}
// Clear errors on input
document.querySelectorAll(‘input, select’).forEach(el => {
el.addEventListener(‘input’, function() {
const formGroup = this.closest(‘.form-group’);
if (formGroup && this.value.trim()) {
formGroup.classList.remove(‘error’);
}
if (this.id === ‘agreeTerms’ && this.checked) {
termsError.style.display = ‘none’;
}
});
el.addEventListener(‘change’, function() {
const formGroup = this.closest(‘.form-group’);
if (formGroup && this.value.trim()) {
formGroup.classList.remove(‘error’);
}
if (this.id === ‘agreeTerms’ && this.checked) {
termsError.style.display = ‘none’;
}
});
});
// Form submission
form.addEventListener(‘submit’, function(e) {
e.preventDefault();
if (validateStep(4)) {
// Simulate submission
const submitBtn = document.getElementById(‘submitBtn’);
submitBtn.textContent = ‘Submitting…’;
submitBtn.disabled = true;
submitBtn.style.opacity = ‘0.7’;
setTimeout(() => {
// Show success state
document.querySelector(‘.form-body’).innerHTML = `
Application Submitted!
We’re reviewing your application. You’ll hear from us within 1 business day. No hard credit pull has been made.
Reference #LP-${Math.random().toString(36).substring(2,10).toUpperCase()}
Check your email for updates.
`;
document.querySelector(‘.progress-container’).style.display = ‘none’;
document.querySelector(‘.form-footer’).innerHTML =
‘
Thank you for choosing LendingPoint. Return to home
‘;
}, 1500);
}
});
// Allow clicking on progress steps to navigate back
progressSteps.forEach(ps => {
ps.addEventListener(‘click’, function() {
const targetStep = parseInt(this.dataset.step);
// Only allow going to completed or current steps
if (targetStep <= currentStep || this.classList.contains('completed')) {
// Validate all steps up to current before allowing navigation
if (targetStep < currentStep) {
goToStep(targetStep);
}
}
});
});
// Initialize
updateProgress(1);
termsError.style.display = 'none';