Scribd
Upload
70 views36 pages

Index

The document outlines the HTML and CSS structure for a loan application interface, including styles for various components such as buttons, forms, and navigation. It features a color scheme, typography, and layout specifications to ensure a user-friendly experience. The design incorporates elements like a progress stepper, document checklist, and signature area to facilitate the loan application process.

Uploaded by

Aaditya Saxena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
70 views36 pages

Index

The document outlines the HTML and CSS structure for a loan application interface, including styles for various components such as buttons, forms, and navigation. It features a color scheme, typography, and layout specifications to ensure a user-friendly experience. The design incorporates elements like a progress stepper, document checklist, and signature area to facilitate the loan application process.

Uploaded by

Aaditya Saxena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 36

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NLB Loan Application</title>
<style>
/* Global Variables */
:root {
--nbl-primary: #0052A5;
--nbl-primary-light: #e6f0fa;
--nbl-primary-dark: #003d7a;
--nbl-secondary: #6c757d;
--nbl-success: #28a745;
--nbl-danger: #dc3545;
--nbl-warning: #ffc107;
--nbl-info: #17a2b8;
--nbl-light: #f8f9fa;
--nbl-dark: #343a40;
--nbl-white: #ffffff;
--nbl-gray-100: #f8f9fa;
--nbl-gray-200: #e9ecef;
--nbl-gray-300: #dee2e6;
--nbl-gray-400: #ced4da;
--nbl-gray-500: #adb5bd;
--nbl-gray-600: #6c757d;
--nbl-gray-700: #495057;
--nbl-gray-800: #343a40;
--nbl-gray-900: #212529;

--nbl-border-radius: 8px;
--nbl-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--nbl-transition: all 0.3s ease;
}

/* Base Styles */
body {
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.5;
color: var(--nbl-gray-800);
background-color: var(--nbl-gray-100);
margin: 0;
padding: 0;
}

/* Container */
.nbl-application-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1rem;
display: none;
}

.nbl-application-container.active {
display: block;
}

/* Typography */
h2 {
font-size: 1.75rem;
font-weight: 600;
color: var(--nbl-gray-900);
margin-bottom: 1.5rem;
}

h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--nbl-gray-800);
margin-bottom: 1rem;
}

h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.75rem;
}

h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}

p {
margin-bottom: 1rem;
}

.nbl-instructions {
color: var(--nbl-gray-600);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}

/* Progress Stepper */
.nbl-stepper {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
position: relative;
}

.nbl-stepper::before {
content: "";
position: absolute;
top: 24px;
left: 40px;
right: 40px;
height: 2px;
background-color: var(--nbl-gray-300);
z-index: 1;
}

.nbl-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
flex: 1;
}

.nbl-step-indicator {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--nbl-white);
border: 2px solid var(--nbl-gray-300);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--nbl-gray-600);
transition: var(--nbl-transition);
}

.nbl-step-label {
font-size: 0.85rem;
color: var(--nbl-gray-600);
font-weight: 500;
}

.nbl-step.active .nbl-step-indicator {
background-color: var(--nbl-primary);
border-color: var(--nbl-primary);
color: var(--nbl-white);
}

.nbl-step.active .nbl-step-label {
color: var(--nbl-primary);
font-weight: 600;
}

.nbl-step.completed .nbl-step-indicator {
background-color: var(--nbl-success);
border-color: var(--nbl-success);
color: var(--nbl-white);
}

/* Form Section */
.nbl-form-section {
width: 100%;
}

.nbl-form-card {
background-color: var(--nbl-white);
border-radius: var(--nbl-border-radius);
box-shadow: var(--nbl-box-shadow);
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: var(--nbl-transition);
}

.nbl-form-card:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* Form Layout */
.nbl-form-row {
display: flex;
flex-wrap: wrap;
margin: -0.5rem;
margin-bottom: 1rem;
}

.nbl-form-field {
flex: 1 0 calc(50% - 1rem);
margin: 0.5rem;
min-width: 250px;
}

.nbl-form-field.full-width {
flex: 1 0 calc(100% - 1rem);
}

/* Form Components */
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
font-size: 0.9rem;
color: var(--nbl-gray-700);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--nbl-gray-300);
border-radius: var(--nbl-border-radius);
font-size: 1rem;
color: var(--nbl-gray-800);
transition: var(--nbl-transition);
background-color: var(--nbl-white);
}

input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--nbl-primary);
box-shadow: 0 0 0 3px rgba(0, 82, 165, 0.15);
}

input[readonly] {
background-color: var(--nbl-gray-100);
cursor: not-allowed;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 0.5rem;
transform: scale(1.2);
}

textarea {
resize: vertical;
min-height: 80px;
}

/* Sliders */
.nbl-slider-container {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.25rem;
}

.nbl-slider-container input[type="range"] {
flex: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--nbl-gray-300);
border-radius: 3px;
outline: none;
}

.nbl-slider-container input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--nbl-primary);
cursor: pointer;
}

.nbl-slider-container input[type="number"] {
width: 120px;
flex-shrink: 0;
}

.nbl-slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--nbl-gray-600);
}

/* Buttons */
.nbl-button {
padding: 0.75rem 1.5rem;
border-radius: var(--nbl-border-radius);
font-weight: 500;
font-size: 1rem;
cursor: pointer;
transition: var(--nbl-transition);
border: none;
}

.nbl-button.primary {
background-color: var(--nbl-primary);
color: var(--nbl-white);
}

.nbl-button.primary:hover {
background-color: var(--nbl-primary-dark);
}

.nbl-button.secondary {
background-color: var(--nbl-white);
color: var(--nbl-primary);
border: 1px solid var(--nbl-primary);
}

.nbl-button.secondary:hover {
background-color: var(--nbl-primary-light);
}

.nbl-button.text {
background-color: transparent;
color: var(--nbl-primary);
padding: 0.5rem 1rem;
}

.nbl-button.text:hover {
background-color: var(--nbl-primary-light);
}

.nbl-icon-button {
background: transparent;
border: none;
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: var(--nbl-transition);
}

.nbl-icon-button:hover {
background-color: var(--nbl-gray-200);
}

/* Navigation */
.nbl-navigation {
display: flex;
justify-content: space-between;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--nbl-gray-200);
}

.nbl-navigation .nbl-button + .nbl-button {


margin-left: 1rem;
}

/* Upload Area */
.nbl-upload-area {
margin: 1.5rem 0;
}

.nbl-dropzone {
border: 2px dashed var(--nbl-gray-300);
border-radius: var(--nbl-border-radius);
padding: 2rem;
background-color: var(--nbl-gray-100);
transition: var(--nbl-transition);
}

.nbl-dropzone:hover {
border-color: var(--nbl-primary);
background-color: var(--nbl-primary-light);
}

.nbl-dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.nbl-upload-icon {
margin-bottom: 1rem;
}

.nbl-upload-text {
color: var(--nbl-gray-700);
}

/* Document Lists */
.nbl-document-checklist {
margin: 1.5rem 0;
}

.nbl-checklist-item {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
padding: 0.5rem 0;
}

.nbl-checklist-status {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 0.75rem;
border: 2px solid var(--nbl-gray-300);
}

.nbl-checklist-status.incomplete {
border-color: var(--nbl-warning);
}

.nbl-checklist-status.complete {
background-color: var(--nbl-success);
border-color: var(--nbl-success);
}

.nbl-checklist-status.optional {
border-style: dashed;
}

.nbl-checklist-text {
font-size: 0.95rem;
}

.nbl-checklist-item.required .nbl-checklist-text::after {
content: " *";
color: var(--nbl-danger);
}

/* Uploaded Files */
.nbl-uploaded-list {
margin-bottom: 1.5rem;
}

.nbl-uploaded-item {
display: flex;
align-items: center;
padding: 0.75rem;
border: 1px solid var(--nbl-gray-200);
border-radius: var(--nbl-border-radius);
margin-bottom: 0.75rem;
background-color: var(--nbl-gray-50);
}

.nbl-uploaded-icon {
margin-right: 1rem;
}

.nbl-uploaded-details {
flex: 1;
}

.nbl-uploaded-name {
font-weight: 500;
margin-bottom: 0.25rem;
}

.nbl-uploaded-meta {
font-size: 0.85rem;
color: var(--nbl-gray-600);
}

.nbl-uploaded-status {
margin-right: 1rem;
}

.nbl-status {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}
.nbl-status.verifying {
background-color: var(--nbl-warning);
color: var(--nbl-dark);
}

.nbl-status.verified {
background-color: var(--nbl-success);
color: var(--nbl-white);
}

.nbl-status.rejected {
background-color: var(--nbl-danger);
color: var(--nbl-white);
}

/* Document List in Review */


.nbl-document-list {
margin-bottom: 1rem;
}

.nbl-document-item {
display: flex;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--nbl-gray-200);
}

.nbl-document-item:last-child {
border-bottom: none;
}

.nbl-document-icon {
margin-right: 1rem;
}

.nbl-document-name {
font-weight: 500;
margin-bottom: 0.25rem;
}

.nbl-document-meta {
font-size: 0.85rem;
color: var(--nbl-gray-600);
}

/* Review Page */
.nbl-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.nbl-review-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.nbl-review-item {
margin-bottom: 0.5rem;
}

.nbl-review-label {
font-size: 0.85rem;
color: var(--nbl-gray-600);
margin-bottom: 0.25rem;
}

.nbl-review-value {
font-weight: 500;
}

.nbl-terms-container {
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--nbl-gray-300);
border-radius: var(--nbl-border-radius);
padding: 1rem;
margin-bottom: 1.5rem;
background-color: var(--nbl-gray-50);
}

.nbl-consent-checkboxes {
margin: 1.5rem 0;
}

.nbl-consent-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}

.nbl-consent-item input {
margin-top: 0.25rem;
}

.nbl-consent-item label {
margin-bottom: 0;
}

/* Signature Area */
.nbl-signature-area {
margin: 1.5rem 0;
}

.nbl-signature-box {
height: 150px;
border: 1px solid var(--nbl-gray-300);
border-radius: var(--nbl-border-radius);
margin-bottom: 1rem;
background-color: var(--nbl-gray-50);
position: relative;
overflow: hidden;
}

.nbl-signature-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--nbl-gray-500);
font-style: italic;
pointer-events: none;
}

/* Confirmation Page */
.nbl-success-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 0;
}

.nbl-success-icon {
margin-bottom: 1.5rem;
}

.nbl-confirmation-details {
background-color: var(--nbl-primary-light);
border-radius: var(--nbl-border-radius);
padding: 1.5rem;
margin: 1.5rem 0;
text-align: left;
width: 100%;
max-width: 600px;
}

.nbl-confirmation-item {
margin-bottom: 1rem;
}

.nbl-confirmation-item:last-child {
margin-bottom: 0;
}

.nbl-confirmation-label {
font-size: 0.85rem;
color: var(--nbl-gray-600);
margin-bottom: 0.25rem;
}

.nbl-confirmation-value {
font-weight: 600;
font-size: 1.1rem;
}

.nbl-steps-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}

.nbl-step-item {
display: flex;
margin-bottom: 1.5rem;
align-items: flex-start;
}

.nbl-step-item:last-child {
margin-bottom: 0;
}

.nbl-step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--nbl-primary);
color: var(--nbl-white);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-right: 1rem;
flex-shrink: 0;
}

.nbl-step-content {
flex: 1;
text-align: left;
}

.nbl-step-title {
font-weight: 600;
margin-bottom: 0.25rem;
}

.nbl-step-description {
font-size: 0.95rem;
color: var(--nbl-gray-600);
}

.nbl-contact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}

.nbl-contact-item {
display: flex;
align-items: center;
}

.nbl-contact-icon {
margin-right: 0.75rem;
}

.nbl-contact-title {
font-size: 0.85rem;
color: var(--nbl-gray-600);
margin-bottom: 0.25rem;
}
.nbl-contact-value {
font-weight: 500;
}

/* Form Toggle (for co-applicant) */


.nbl-form-toggle {
margin: 1rem 0;
display: flex;
align-items: center;
}

/* Appian Compatibility Styles */


.appian-custom-component {
margin: 0;
padding: 0;
}

.appian-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 2px solid var(--nbl-gray-400);
border-radius: 3px;
margin-right: 0.5rem;
position: relative;
top: 4px;
}

.appian-checkbox input[type="checkbox"]:checked {
background-color: var(--nbl-primary);
border-color: var(--nbl-primary);
}

.appian-checkbox input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
color: white;
font-size: 12px;
top: -2px;
left: 3px;
}

.appian-date-picker {
position: relative;
}

.appian-date-picker input[type="date"] {
padding-right: 30px;
}

.appian-date-picker::after {
content: '📅';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.appian-select {
position: relative;
}

.appian-select select {
appearance: none;
-webkit-appearance: none;
padding-right: 30px;
}

.appian-select::after {
content: '▼';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 12px;
color: var(--nbl-primary);
}

/* Animation Effects */
.nbl-fade-in {
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.nbl-slide-in {
animation: slideIn 0.3s ease;
}

@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.nbl-form-card {
padding: 1.25rem;
}

.nbl-form-field {
flex: 1 0 100%;
}

.nbl-navigation {
flex-direction: column-reverse;
gap: 1rem;
}

.nbl-navigation .nbl-button {
width: 100%;
margin: 0.5rem 0;
}

.nbl-navigation .nbl-button + .nbl-button {


margin-left: 0;
}

.nbl-stepper::before {
top: 17px;
left: 25px;
right: 25px;
}

.nbl-step-indicator {
width: 34px;
height: 34px;
font-size: 0.85rem;
}

.nbl-step-label {
font-size: 0.75rem;
}

.nbl-confirmation-details {
padding: 1rem;
}

.nbl-contact-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
</style>
</head>
<body>
<!-- Personal/Business Information Page -->
<div class="nbl-application-container active" id="personal-info-page">
<!-- Progress Stepper -->
<div class="nbl-stepper">
<div class="nbl-step active">
<div class="nbl-step-indicator">1</div>
<div class="nbl-step-label">Personal Info</div>
</div>
<div class="nbl-step">
<div class="nbl-step-indicator">2</div>
<div class="nbl-step-label">Loan Details</div>
</div>
<div class="nbl-step">
<div class="nbl-step-indicator">3</div>
<div class="nbl-step-label">Documents</div>
</div>
<div class="nbl-step">
<div class="nbl-step-indicator">4</div>
<div class="nbl-step-label">Review</div>
</div>
</div>

<!-- Form Section -->


<div class="nbl-form-section">
<h2>Personal Information</h2>
<div class="nbl-form-card">
<h3>Basic Details</h3>
<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="firstName">First Name*</label>
<input type="text" id="firstName" required>
</div>
<div class="nbl-form-field">
<label for="lastName">Last Name*</label>
<input type="text" id="lastName" required>
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field appian-date-picker">
<label for="dateOfBirth">Date of Birth*</label>
<input type="date" id="dateOfBirth" required>
</div>
<div class="nbl-form-field">
<label for="idNumber">ID Number*</label>
<input type="text" id="idNumber" required>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Contact Information</h3>
<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="email">Email Address*</label>
<input type="email" id="email" required>
</div>
<div class="nbl-form-field">
<label for="phone">Phone Number*</label>
<input type="tel" id="phone" required>
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field full-width">
<label for="address">Street Address*</label>
<input type="text" id="address" required>
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="city">City*</label>
<input type="text" id="city" required>
</div>
<div class="nbl-form-field">
<label for="postalCode">Postal Code*</label>
<input type="text" id="postalCode" required>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Employment Details</h3>
<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="employer">Current Employer*</label>
<input type="text" id="employer" required>
</div>
<div class="nbl-form-field">
<label for="position">Position/Title*</label>
<input type="text" id="position" required>
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="employmentYears">Years at Current Job*</label>
<input type="number" id="employmentYears" min="0" step="0.5" required>
</div>
<div class="nbl-form-field appian-select">
<label for="employmentType">Employment Type*</label>
<select id="employmentType" required>
<option value="">Please select</option>
<option value="fullTime">Full-time</option>
<option value="partTime">Part-time</option>
<option value="contract">Contract</option>
<option value="selfEmployed">Self-employed</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Income Information</h3>
<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="monthlyIncome">Monthly Net Income (€)*</label>
<input type="number" id="monthlyIncome" min="0" step="0.01" required>
</div>
<div class="nbl-form-field">
<label for="additionalIncome">Additional Monthly Income (€)</label>
<input type="number" id="additionalIncome" min="0" step="0.01">
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field full-width">
<label for="incomeSource">Source of Additional Income</label>
<input type="text" id="incomeSource">
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Financial Obligations</h3>
<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="existingLoans">Monthly Loan Payments (€)</label>
<input type="number" id="existingLoans" min="0" step="0.01">
</div>
<div class="nbl-form-field">
<label for="otherObligations">Other Monthly Obligations (€)</label>
<input type="number" id="otherObligations" min="0" step="0.01">
</div>
</div>
</div>

<div class="nbl-navigation">
<button class="nbl-button secondary" onclick="saveDraft()">Save as
Draft</button>
<button class="nbl-button primary" onclick="navigateTo('loan-
details')">Continue to Loan Details</button>
</div>
</div>
</div>

<!-- Loan Details Page -->


<div class="nbl-application-container" id="loan-details-page">
<!-- Progress Stepper (Step 2 active) -->
<div class="nbl-stepper">
<div class="nbl-step completed">
<div class="nbl-step-indicator">✓</div>
<div class="nbl-step-label">Personal Info</div>
</div>
<div class="nbl-step active">
<div class="nbl-step-indicator">2</div>
<div class="nbl-step-label">Loan Details</div>
</div>
<div class="nbl-step">
<div class="nbl-step-indicator">3</div>
<div class="nbl-step-label">Documents</div>
</div>
<div class="nbl-step">
<div class="nbl-step-indicator">4</div>
<div class="nbl-step-label">Review</div>
</div>
</div>

<!-- Form Section -->


<div class="nbl-form-section">
<h2>Loan Details</h2>

<div class="nbl-form-card">
<h3>Loan Request</h3>
<div class="nbl-form-row">
<div class="nbl-form-field full-width">
<label for="loanAmount">Loan Amount (€)*</label>
<div class="nbl-slider-container">
<input type="range" id="loanAmountSlider" min="1000" max="100000"
step="1000" value="50000">
<input type="number" id="loanAmount" min="1000" max="100000"
step="1000" value="50000" required>
</div>
<div class="nbl-slider-labels">
<span>€1,000</span>
<span>€100,000</span>
</div>
</div>
</div>
<div class="nbl-form-row">
<div class="nbl-form-field appian-select">
<label for="loanPurpose">Purpose of Loan*</label>
<select id="loanPurpose" required>
<option value="">Please select</option>
<option value="homeImprovement">Home Improvement</option>
<option value="debtConsolidation">Debt Consolidation</option>
<option value="education">Education</option>
<option value="travel">Travel</option>
<option value="medical">Medical Expenses</option>
<option value="other">Other</option>
</select>
</div>
<div class="nbl-form-field">
<label for="otherPurpose">If Other, Please Specify</label>
<input type="text" id="otherPurpose">
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Repayment Terms</h3>
<div class="nbl-form-row">
<div class="nbl-form-field full-width">
<label for="repaymentPeriod">Repayment Period (Years)*</label>
<div class="nbl-slider-container">
<input type="range" id="repaymentPeriodSlider" min="1" max="15"
step="1" value="5">
<input type="number" id="repaymentPeriod" min="1" max="15" step="1"
value="5" required>
</div>
<div class="nbl-slider-labels">
<span>1 year</span>
<span>15 years</span>
</div>
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field appian-select">
<label for="paymentDate">Preferred Payment Day*</label>
<select id="paymentDate" required>
<option value="">Please select</option>
<option value="1">1st of month</option>
<option value="5">5th of month</option>
<option value="10">10th of month</option>
<option value="15">15th of month</option>
<option value="20">20th of month</option>
<option value="25">25th of month</option>
</select>
</div>
<div class="nbl-form-field">
<label for="estimatedPayment">Estimated Monthly Payment</label>
<input type="text" id="estimatedPayment" readonly value="€942.15">
</div>
</div>
</div>
<div class="nbl-form-card">
<h3>Collateral Information</h3>
<div class="nbl-form-row">
<div class="nbl-form-field appian-select">
<label for="collateralType">Collateral Type</label>
<select id="collateralType">
<option value="">None</option>
<option value="realEstate">Real Estate</option>
<option value="vehicle">Vehicle</option>
<option value="deposit">Fixed Deposit</option>
<option value="other">Other</option>
</select>
</div>
<div class="nbl-form-field">
<label for="collateralValue">Estimated Value (€)</label>
<input type="number" id="collateralValue" min="0" step="0.01">
</div>
</div>

<div class="nbl-form-row">
<div class="nbl-form-field full-width">
<label for="collateralDescription">Description</label>
<textarea id="collateralDescription" rows="3"></textarea>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Co-Applicant (Optional)</h3>
<div class="nbl-form-toggle appian-checkbox">
<input type="checkbox" id="hasCoApplicant">
<label for="hasCoApplicant">Add a co-applicant to this
application</label>
</div>

<div class="nbl-co-applicant-fields" style="display: none;">


<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="coFirstName">Co-Applicant First Name*</label>
<input type="text" id="coFirstName">
</div>
<div class="nbl-form-field">
<label for="coLastName">Co-Applicant Last Name*</label>
<input type="text" id="coLastName">
</div>
</div>
<div class="nbl-form-row">
<div class="nbl-form-field">
<label for="coEmail">Co-Applicant Email*</label>
<input type="email" id="coEmail">
</div>
<div class="nbl-form-field">
<label for="coPhone">Co-Applicant Phone*</label>
<input type="tel" id="coPhone">
</div>
</div>
</div>
</div>
<div class="nbl-navigation">
<button class="nbl-button secondary" onclick="navigateTo('personal-
info')">Back</button>
<button class="nbl-button secondary" onclick="saveDraft()">Save as
Draft</button>
<button class="nbl-button primary"
onclick="navigateTo('documents')">Continue to Documents</button>
</div>
</div>
</div>

<!-- Document Upload Page -->


<div class="nbl-application-container" id="documents-page">
<!-- Progress Stepper (Step 3 active) -->
<div class="nbl-stepper">
<div class="nbl-step completed">
<div class="nbl-step-indicator">✓</div>
<div class="nbl-step-label">Personal Info</div>
</div>
<div class="nbl-step completed">
<div class="nbl-step-indicator">✓</div>
<div class="nbl-step-label">Loan Details</div>
</div>
<div class="nbl-step active">
<div class="nbl-step-indicator">3</div>
<div class="nbl-step-label">Documents</div>
</div>
<div class="nbl-step">
<div class="nbl-step-indicator">4</div>
<div class="nbl-step-label">Review</div>
</div>
</div>

<!-- Form Section -->


<div class="nbl-form-section">
<h2>Document Upload</h2>

<div class="nbl-form-card">
<h3>Required Documents</h3>
<p class="nbl-instructions">Please upload the following documents to
proceed with your application. Accepted formats: PDF, JPG, PNG (max 10MB per
file).</p>

<div class="nbl-document-checklist">
<div class="nbl-checklist-item ">
<div class="nbl-checklist-status incomplete"></div>
<div class="nbl-checklist-text">Valid ID card or passport</div>
</div>
<div class="nbl-checklist-item ">
<div class="nbl-checklist-status incomplete"></div>
<div class="nbl-checklist-text">Last 3 payslips</div>
</div>
<div class="nbl-checklist-item ">
<div class="nbl-checklist-status incomplete"></div>
<div class="nbl-checklist-text">Bank statements (last 3 months)</div>
</div>
<div class="nbl-checklist-item">
<div class="nbl-checklist-status optional"></div>
<div class="nbl-checklist-text">Collateral documentation (if
applicable)</div>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Upload Documents</h3>
<div class="nbl-form-row">
<div class="nbl-form-field appian-select">
<label for="documentType">Document Type*</label>
<select id="documentType" required>
<option value="">Please select</option>
<option value="id">ID Card/Passport</option>
<option value="payslip">Payslip</option>
<option value="bankStatement">Bank Statement</option>
<option value="collateral">Collateral Documentation</option>
<option value="other">Other Supporting Document</option>
</select>
</div>
<div class="nbl-form-field">
<label for="documentDescription">Description</label>
<input type="text" id="documentDescription" placeholder="e.g., January
2025 Payslip">
</div>
</div>

<div class="nbl-upload-area">
<div class="nbl-dropzone">
<input type="file" id="fileInput" accept=".pdf,.jpg,.png"
style="display: none;">
<div class="nbl-dropzone-content">
<div class="nbl-upload-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none">
<path d="M12 15V3M12 3L7 8M12 3L17 8" stroke="#0052A5" stroke-
width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 15V17C3 18.6569 4.34315 20 6 20H18C19.6569 20 21
18.6569 21 17V15" stroke="#0052A5" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"/>
</svg>
</div>
<div class="nbl-upload-text">
<p>Drag and drop files here or</p>
<button class="nbl-button secondary"
onclick="document.getElementById('fileInput').click()">Browse Files</button>
</div>
</div>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Uploaded Documents</h3>
<div class="nbl-uploaded-list" id="uploadedDocuments">
<!-- Documents will be dynamically added here -->
</div>

<button class="nbl-button secondary" onclick="resetUploadForm()">Add More


Documents</button>
</div>
<div class="nbl-navigation">
<button class="nbl-button secondary" onclick="navigateTo('loan-
details')">Back</button>
<button class="nbl-button secondary" onclick="saveDraft()">Save as
Draft</button>
<button class="nbl-button primary" onclick="navigateTo('review')">Continue
to Review</button>
</div>
</div>
</div>

<!-- Review & Submit Page -->


<div class="nbl-application-container" id="review-page">
<!-- Progress Stepper (Step 4 active) -->
<div class="nbl-stepper">
<div class="nbl-step completed">
<div class="nbl-step-indicator">✓</div>
<div class="nbl-step-label">Personal Info</div>
</div>
<div class="nbl-step completed">
<div class="nbl-step-indicator">✓</div>
<div class="nbl-step-label">Loan Details</div>
</div>
<div class="nbl-step completed">
<div class="nbl-step-indicator">✓</div>
<div class="nbl-step-label">Documents</div>
</div>
<div class="nbl-step active">
<div class="nbl-step-indicator">4</div>
<div class="nbl-step-label">Review</div>
</div>
</div>

<!-- Form Section -->


<div class="nbl-form-section">
<h2>Review Your Application</h2>
<p class="nbl-instructions">Please review all information before submitting
your application. You can edit any section by clicking the Edit button.</p>

<div class="nbl-form-card">
<div class="nbl-section-header">
<h3>Personal Information</h3>
<button class="nbl-button text" onclick="navigateTo('personal-
info')">Edit</button>
</div>

<div class="nbl-review-grid" id="personalInfoReview">


<!-- Populated dynamically -->
</div>
</div>

<div class="nbl-form-card">
<div class="nbl-section-header">
<h3>Employment & Income</h3>
<button class="nbl-button text" onclick="navigateTo('personal-
info')">Edit</button>
</div>
<div class="nbl-review-grid" id="employmentIncomeReview">
<!-- Populated dynamically -->
</div>
</div>

<div class="nbl-form-card">
<div class="nbl-section-header">
<h3>Loan Details</h3>
<button class="nbl-button text" onclick="navigateTo('loan-
details')">Edit</button>
</div>

<div class="nbl-review-grid" id="loanDetailsReview">


<!-- Populated dynamically -->
</div>
</div>

<div class="nbl-form-card">
<div class="nbl-section-header">
<h3>Uploaded Documents</h3>
<button class="nbl-button text"
onclick="navigateTo('documents')">Edit</button>
</div>

<div class="nbl-document-list" id="documentsReview">


<!-- Populated dynamically -->
</div>
</div>

<div class="nbl-form-card">
<h3>Terms & Conditions</h3>

<div class="nbl-terms-container">
<div class="nbl-terms-scroll">
<h4>Loan Agreement Terms</h4>
<p>This Loan Agreement (the "Agreement") is entered into between NLB
Group (the "Lender") and the applicant (the "Borrower") as identified in this
application.</p>

<h5>1. Loan Terms</h5>


<p>The Lender agrees to provide a loan to the Borrower in the amount
and for the purpose specified in this application, subject to approval. The loan
shall be repaid over the period specified, with interest calculated at the
prevailing rate at the time of approval.</p>

<h5>2. Repayment</h5>
<p>The Borrower agrees to repay the loan in equal monthly installments
on the date selected, comprising principal and interest, for the duration of the
loan term. Early repayment options are available subject to the terms outlined in
the full agreement.</p>

<h5>3. Default</h5>
<p>Failure to make timely payments may result in default. In the event
of default, additional fees may apply and the entire outstanding balance may become
immediately due and payable at the Lender's discretion.</p>

<p>By accepting these terms, the Borrower acknowledges having read and
understood all conditions of this loan application and agrees to be bound by them
upon approval.</p>
</div>
</div>

<div class="nbl-consent-checkboxes">
<div class="nbl-consent-item appian-checkbox">
<input type="checkbox" id="termsConsent" required>
<label for="termsConsent">I have read and agree to the Terms and
Conditions</label>
</div>

<div class="nbl-consent-item appian-checkbox">


<input type="checkbox" id="gdprConsent" required>
<label for="gdprConsent">I consent to NLB Group processing my personal
data in accordance with the <a href="#">Privacy Policy</a></label>
</div>

<div class="nbl-consent-item appian-checkbox">


<input type="checkbox" id="communicationConsent">
<label for="communicationConsent">I would like to receive updates about
NLB products and services (optional)</label>
</div>
</div>
</div>

<div class="nbl-form-card">
<h3>Electronic Signature</h3>
<p class="nbl-instructions">Please sign below to confirm your application.
By signing, you certify that all information provided is true and accurate.</p>

<div class="nbl-signature-area">
<div class="nbl-signature-box">
<canvas id="signatureCanvas"></canvas>
<div class="nbl-signature-placeholder">Click or tap to sign</div>
</div>
<button class="nbl-button secondary" onclick="clearSignature()">Clear
Signature</button>
</div>
</div>

<div class="nbl-navigation">
<button class="nbl-button secondary"
onclick="navigateTo('documents')">Back</button>
<button class="nbl-button secondary" onclick="saveDraft()">Save as
Draft</button>
<button class="nbl-button primary" onclick="submitApplication()">Submit
Application</button>
</div>
</div>
</div>

<!-- Confirmation Page -->


<div class="nbl-application-container" id="confirmation-page">
<!-- Success Message -->
<div class="nbl-success-container nbl-fade-in">
<div class="nbl-success-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="#28a745" stroke-width="2"
fill="none"/>
<path d="M8 12L11 15L16 9" stroke="#28a745" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"/>
</svg>
</div>

<h2>Application Submitted Successfully!</h2>


<p class="nbl-instructions">Thank you for submitting your loan application.
Your application has been received and is now being processed.</p>

<div class="nbl-confirmation-details">
<div class="nbl-confirmation-item">
<div class="nbl-confirmation-label">Application ID</div>
<div class="nbl-confirmation-value">NLB-LOAN-25042025-8724</div>
</div>
<div class="nbl-confirmation-item">
<div class="nbl-confirmation-label">Submission Date</div>
<div class="nbl-confirmation-value">April 25, 2025</div>
</div>
<div class="nbl-confirmation-item">
<div class="nbl-confirmation-label">Estimated Processing Time</div>
<div class="nbl-confirmation-value">3-5 business days</div>
</div>
</div>

<div class="nbl-form-card">
<h3>What Happens Next?</h3>
<ol class="nbl-steps-list">
<li class="nbl-step-item">
<div class="nbl-step-number">1</div>
<div class="nbl-step-content">
<div class="nbl-step-title">Application Review</div>
<div class="nbl-step-description">Our team will review your
application and documentation within 1-2 business days.</div>
</div>
</li>
<li class="nbl-step-item">
<div class="nbl-step-number">2</div>
<div class="nbl-step-content">
<div class="nbl-step-title">Credit Assessment</div>
<div class="nbl-step-description">We'll conduct a credit assessment
to determine loan eligibility and conditions.</div>
</div>
</li>
<li class="nbl-step-item">
<div class="nbl-step-number">3</div>
<div class="nbl-step-content">
<div class="nbl-step-title">Decision Notification</div>
<div class="nbl-step-description">You'll receive an email
notification with the loan decision and any additional requirements.</div>
</div>
</li>
<li class="nbl-step-item">
<div class="nbl-step-number">4</div>
<div class="nbl-step-content">
<div class="nbl-step-title">Loan Disbursal</div>
<div class="nbl-step-description">Upon approval, funds will be
disbursed to your designated account within 24 hours after final agreement.</div>
</div>
</li>
</ol>
</div>

<div class="nbl-form-card">
<h3>Contact Information</h3>
<p>If you have any questions about your application, please contact us:</p>
<div class="nbl-contact-grid">
<div class="nbl-contact-item">
<div class="nbl-contact-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 16.92V19.92C22 20.4704 21.7893 20.9987 21.4142
21.3738C21.0391 21.7489 20.5109 21.96 19.96 21.96C18.4536 21.8577 16.9782 21.5011
15.6 20.9C14.2969 20.3354 13.1046 19.5726 12.07 18.65C11.151 17.7282 10.3882
16.6515 9.82 15.38C9.19745 13.9661 8.83765 12.4477 8.75 10.9C8.75012 10.3502
8.95865 9.82222 9.33026 9.44686C9.70188 9.07151 10.2283 8.85652 10.78
8.85H13.78C14.2337 8.84532 14.6724 9.01417 15.0077 9.32449C15.343 9.63482 15.5484
10.0651 15.58 10.52C15.63 11.33 15.78 12.13 16.03 12.89C16.1479 13.2197 16.1668
13.5741 16.0843 13.9128C16.0017 14.2515 15.8209 14.5605 15.56 14.8L14.57
15.79C15.0896 16.9066 15.8324 17.9125 16.75 18.74C17.5775 19.6576 18.5834 20.4004
19.7 20.92L20.69 19.93C20.9295 19.6691 21.2385 19.4883 21.5772 19.4057C21.9159
19.3232 22.2703 19.3421 22.6 19.46C23.36 19.71 24.16 19.86 24.97 19.91C25.4262
19.9415 25.8577 20.1487 26.1679 20.487C26.478 20.8252 26.6448 21.2667 26.64
21.72L22 16.92Z" stroke="#0052A5" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"/>
</svg>
</div>
<div class="nbl-contact-info">
<div class="nbl-contact-title">Phone</div>
<div class="nbl-contact-value">+386 1 477 2000</div>
</div>
</div>
<div class="nbl-contact-item">
<div class="nbl-contact-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9
20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="#0052A5" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"/>
<path d="M22 6L12 13L2 6" stroke="#0052A5" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nbl-contact-info">
<div class="nbl-contact-title">Email</div>
<div class="nbl-contact-value">[email protected]</div>
</div>
</div>
</div>
</div>

<div class="nbl-navigation">
<button class="nbl-button secondary" onclick="window.print()">Print
Confirmation</button>
<button class="nbl-button primary" onclick="navigateTo('personal-
info')">Return to Dashboard</button>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Application state
let applicationData = {
personalInfo: {},
loanDetails: {},
documents: [],
signature: null
};

// Page navigation
const pages = {
'personal-info': document.getElementById('personal-info-page'),
'loan-details': document.getElementById('loan-details-page'),
'documents': document.getElementById('documents-page'),
'review': document.getElementById('review-page'),
'confirmation': document.getElementById('confirmation-page')
};

function navigateTo(page) {
// Validate current page before navigating
const currentPage = Object.keys(pages).find(key =>
pages[key].classList.contains('active'));
if (currentPage && !validatePage(currentPage)) {
alert('Please fill all required fields correctly.');
return;
}

// Save data from current page


if (currentPage) {
savePageData(currentPage);
}

// Show new page


Object.values(pages).forEach(p => p.classList.remove('active'));
pages[page].classList.add('active');

// Update review page if navigating to it


if (page === 'review') {
updateReviewPage();
}
}

function validatePage(page) {
const requiredFields = pages[page].querySelectorAll('[required]');
for (let field of requiredFields) {
if (!field.value.trim()) {
return false;
}
}
return true;
}

function savePageData(page) {
if (page === 'personal-info') {
applicationData.personalInfo = {
firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
dateOfBirth: document.getElementById('dateOfBirth').value,
idNumber: document.getElementById('idNumber').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value,
address: document.getElementById('address').value,
city: document.getElementById('city').value,
postalCode: document.getElementById('postalCode').value,
employer: document.getElementById('employer').value,
position: document.getElementById('position').value,
employmentYears: document.getElementById('employmentYears').value,
employmentType: document.getElementById('employmentType').value,
monthlyIncome: document.getElementById('monthlyIncome').value,
additionalIncome: document.getElementById('additionalIncome').value,
incomeSource: document.getElementById('incomeSource').value,
existingLoans: document.getElementById('existingLoans').value,
otherObligations: document.getElementById('otherObligations').value
};
} else if (page === 'loan-details') {
applicationData.loanDetails = {
loanAmount: document.getElementById('loanAmount').value,
loanPurpose: document.getElementById('loanPurpose').value,
otherPurpose: document.getElementById('otherPurpose').value,
repaymentPeriod: document.getElementById('repaymentPeriod').value,
paymentDate: document.getElementById('paymentDate').value,
estimatedPayment: document.getElementById('estimatedPayment').value,
collateralType: document.getElementById('collateralType').value,
collateralValue: document.getElementById('collateralValue').value,
collateralDescription:
document.getElementById('collateralDescription').value,
hasCoApplicant: document.getElementById('hasCoApplicant').checked,
coFirstName: document.getElementById('coFirstName').value,
coLastName: document.getElementById('coLastName').value,
coEmail: document.getElementById('coEmail').value,
coPhone: document.getElementById('coPhone').value
};
}
}

function saveDraft() {
const currentPage = Object.keys(pages).find(key =>
pages[key].classList.contains('active'));
savePageData(currentPage);
alert('Draft saved successfully!');
}

function updateReviewPage() {
const personalInfoReview = document.getElementById('personalInfoReview');
const employmentIncomeReview =
document.getElementById('employmentIncomeReview');
const loanDetailsReview = document.getElementById('loanDetailsReview');
const documentsReview = document.getElementById('documentsReview');

personalInfoReview.innerHTML = `
<div class="nbl-review-item">
<div class="nbl-review-label">Full Name</div>
<div class="nbl-review-value">${applicationData.personalInfo.firstName
|| ''} ${applicationData.personalInfo.lastName || ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Date of Birth</div>
<div class="nbl-review-value">$
{applicationData.personalInfo.dateOfBirth || ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">ID Number</div>
<div class="nbl-review-value">${applicationData.personalInfo.idNumber
|| ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Email</div>
<div class="nbl-review-value">${applicationData.personalInfo.email ||
''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Phone</div>
<div class="nbl-review-value">${applicationData.personalInfo.phone ||
''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Address</div>
<div class="nbl-review-value">${applicationData.personalInfo.address ||
''}, ${applicationData.personalInfo.city || ''}, $
{applicationData.personalInfo.postalCode || ''}</div>
</div>
`;

employmentIncomeReview.innerHTML = `
<div class="nbl-review-item">
<div class="nbl-review-label">Employer</div>
<div class="nbl-review-value">${applicationData.personalInfo.employer
|| ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Position</div>
<div class="nbl-review-value">${applicationData.personalInfo.position
|| ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Years Employed</div>
<div class="nbl-review-value">$
{applicationData.personalInfo.employmentYears || ''} years</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Monthly Income</div>
<div class="nbl-review-value">€$
{applicationData.personalInfo.monthlyIncome || '0'}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Additional Income</div>
<div class="nbl-review-value">€$
{applicationData.personalInfo.additionalIncome || '0'}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Monthly Obligations</div>
<div class="nbl-review-value">€$
{(parseFloat(applicationData.personalInfo.existingLoans || 0) +
parseFloat(applicationData.personalInfo.otherObligations || 0)).toFixed(2)}</div>
</div>
`;

loanDetailsReview.innerHTML = `
<div class="nbl-review-item">
<div class="nbl-review-label">Loan Amount</div>
<div class="nbl-review-value">€${applicationData.loanDetails.loanAmount
|| '0'}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Purpose</div>
<div class="nbl-review-value">${applicationData.loanDetails.loanPurpose
=== 'other' ? applicationData.loanDetails.otherPurpose :
applicationData.loanDetails.loanPurpose || ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Repayment Period</div>
<div class="nbl-review-value">$
{applicationData.loanDetails.repaymentPeriod || ''} years</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Payment Date</div>
<div class="nbl-review-value">${applicationData.loanDetails.paymentDate
|| ''}th of month</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Est. Monthly Payment</div>
<div class="nbl-review-value">$
{applicationData.loanDetails.estimatedPayment || ''}</div>
</div>
<div class="nbl-review-item">
<div class="nbl-review-label">Collateral</div>
<div class="nbl-review-value">$
{applicationData.loanDetails.collateralType || 'None'}</div>
</div>
`;

documentsReview.innerHTML = applicationData.documents.map(doc => `


<div class="nbl-document-item">
<div class="nbl-document-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071
2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893
5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20
20.5304 20 20V8L14 2Z" stroke="#0052A5" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M14 2V8H20" stroke="#0052A5" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nbl-document-details">
<div class="nbl-document-name">${doc.name}</div>
<div class="nbl-document-meta">${doc.type} • ${doc.size} • $
{doc.status}</div>
</div>
</div>
`).join('');
}

// Slider functionality
const loanAmountSlider = document.getElementById('loanAmountSlider');
const loanAmountInput = document.getElementById('loanAmount');
const repaymentPeriodSlider =
document.getElementById('repaymentPeriodSlider');
const repaymentPeriodInput = document.getElementById('repaymentPeriod');
const estimatedPaymentEl = document.getElementById('estimatedPayment');

if (loanAmountSlider && loanAmountInput) {


loanAmountSlider.addEventListener('input', function() {
loanAmountInput.value = this.value;
updateEstimatedPayment();
});

loanAmountInput.addEventListener('input', function() {
if (this.value >= 1000 && this.value <= 100000) {
loanAmountSlider.value = this.value;
updateEstimatedPayment();
}
});
}

if (repaymentPeriodSlider && repaymentPeriodInput) {


repaymentPeriodSlider.addEventListener('input', function() {
repaymentPeriodInput.value = this.value;
updateEstimatedPayment();
});

repaymentPeriodInput.addEventListener('input', function() {
if (this.value >= 1 && this.value <= 15) {
repaymentPeriodSlider.value = this.value;
updateEstimatedPayment();
}
});
}

function updateEstimatedPayment() {
if (!estimatedPaymentEl) return;

const loanAmount = parseFloat(loanAmountInput.value);


const repaymentYears = parseFloat(repaymentPeriodInput.value);
const interestRate = 0.045; // 4.5% annual interest

if (isNaN(loanAmount) || isNaN(repaymentYears)) {
estimatedPaymentEl.value = '€0.00';
return;
}

const monthlyRate = interestRate / 12;


const loanTermMonths = repaymentYears * 12;
const payment = loanAmount * monthlyRate * Math.pow(1 + monthlyRate,
loanTermMonths) / (Math.pow(1 + monthlyRate, loanTermMonths) - 1);

estimatedPaymentEl.value = '€' + payment.toFixed(2);


}

// Co-applicant toggle
const coApplicantCheckbox = document.getElementById('hasCoApplicant');
const coApplicantFields = document.querySelector('.nbl-co-applicant-fields');

if (coApplicantCheckbox && coApplicantFields) {


coApplicantCheckbox.addEventListener('change', function() {
coApplicantFields.style.display = this.checked ? 'block' : 'none';
const coFields = coApplicantFields.querySelectorAll('input');
coFields.forEach(field => {
field.required = this.checked;
});
});
}

// File upload handling


const fileInput = document.getElementById('fileInput');
const documentTypeSelect = document.getElementById('documentType');
const documentDescriptionInput =
document.getElementById('documentDescription');
const uploadedDocumentsList = document.getElementById('uploadedDocuments');

if (fileInput) {
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file && documentTypeSelect.value) {
if (file.size > 10 * 1024 * 1024) {
alert('File size exceeds 10MB limit.');
return;
}
const docType =
documentTypeSelect.options[documentTypeSelect.selectedIndex].text;
const description = documentDescriptionInput.value || docType;
const size = (file.size / 1024).toFixed(2) + ' KB';

const doc = {
name: file.name,
type: docType,
size: size,
status: 'Verifying'
};

applicationData.documents.push(doc);
updateDocumentList();
updateChecklist(docType);
resetUploadForm();
}
});
}

function updateDocumentList() {
uploadedDocumentsList.innerHTML = applicationData.documents.map((doc, index) => `
<div class="nbl-uploaded-item">
<div class="nbl-uploaded-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071
2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893
5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20
20.5304 20 20V8L14 2Z" stroke="#0052A5" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M14 2V8H20" stroke="#0052A5" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nbl-uploaded-details">
<div class="nbl-uploaded-name">${doc.name}</div>
<div class="nbl-uploaded-meta">${doc.type} • ${doc.size}</div>
</div>
<div class="nbl-uploaded-status">
<span class="nbl-status ${doc.status.toLowerCase()}">${doc.status}</span>
</div>
<button class="nbl-icon-button" onclick="removeDocument(${index})">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM19
4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" fill="#dc3545"/>
</svg>
</button>
</div>
`).join('');
}

function removeDocument(index) {
const doc = applicationData.documents[index];
applicationData.documents.splice(index, 1);
updateDocumentList();
updateChecklist(doc.type, true);
}

function updateChecklist(docType, remove = false) {


const checklistItems = document.querySelectorAll('.nbl-checklist-item');
checklistItems.forEach(item => {
const text = item.querySelector('.nbl-checklist-text').textContent;
if (text.includes(docType)) {
const status = item.querySelector('.nbl-checklist-status');
if (remove) {
status.classList.remove('complete');
status.classList.add('incomplete');
} else {
status.classList.remove('incomplete');
status.classList.add('complete');
}
}
});
}

function resetUploadForm() {
documentTypeSelect.value = '';
documentDescriptionInput.value = '';
fileInput.value = '';
}

// Signature canvas
const signatureCanvas = document.getElementById('signatureCanvas');
const signaturePlaceholder = document.querySelector('.nbl-signature-placeholder');
const ctx = signatureCanvas.getContext('2d');
let isDrawing = false;

function resizeCanvas() {
const ratio = window.devicePixelRatio || 1;
signatureCanvas.width = signatureCanvas.offsetWidth * ratio;
signatureCanvas.height = signatureCanvas.offsetHeight * ratio;
ctx.scale(ratio, ratio);
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

function getEventPosition(e) {
const rect = signatureCanvas.getBoundingClientRect();
const scaleX = signatureCanvas.width / rect.width;
const scaleY = signatureCanvas.height / rect.height;
let clientX = e.clientX;
let clientY = e.clientY;

if (e.touches && e.touches.length > 0) {


clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
}

return {
x: (clientX - rect.left) * scaleX,
y: (clientY - rect.top) * scaleY
};
}

signatureCanvas.addEventListener('mousedown', startDrawing);
signatureCanvas.addEventListener('mousemove', draw);
signatureCanvas.addEventListener('mouseup', stopDrawing);
signatureCanvas.addEventListener('mouseout', stopDrawing);

signatureCanvas.addEventListener('touchstart', startDrawing);
signatureCanvas.addEventListener('touchmove', draw);
signatureCanvas.addEventListener('touchend', stopDrawing);

function startDrawing(e) {
e.preventDefault();
isDrawing = true;
const pos = getEventPosition(e);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
signaturePlaceholder.style.display = 'none';
}

function draw(e) {
e.preventDefault();
if (!isDrawing) return;
const pos = getEventPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}

function stopDrawing() {
if (isDrawing) {
isDrawing = false;
applicationData.signature = signatureCanvas.toDataURL();
}
}

function clearSignature() {
ctx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height);
applicationData.signature = null;
signaturePlaceholder.style.display = 'block';
}

// Form submission
function submitApplication() {
if (!validatePage('review')) {
alert('Please complete all required fields, agree to the terms, and provide a
signature.');
return;
}

savePageData('review');
navigateTo('confirmation');
}

// Expose functions to global scope for inline event handlers


window.navigateTo = navigateTo;
window.saveDraft = saveDraft;
window.removeDocument = removeDocument;
window.resetUploadForm = resetUploadForm;
window.clearSignature = clearSignature;
window.submitApplication = submitApplication;

// Initialize estimated payment


updateEstimatedPayment();
});
</script>

You might also like