Files
RetirementCalculator/src/views/questionnaire.ejs
T

73 lines
5.0 KiB
Plaintext

<%- include("./partials/fileHeader") %>
<%- include("./partials/header") %>
<main class="container mx-auto p-4">
<h2 class="text-xl font-semibold mb-4">Welcome: <%= user.name %></h2>
<div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
<h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
<form action="/questionnaire" method="post" class="space-y-4">
<div>
<label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
<input type="date" name="dob" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="education" class="block text-sm font-medium text-gray-700">Education</label>
<select name="education" id="education" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="primary">Primary (Elementary)</option>
<option value="secondary">Secondary (High School)</option>
<option value="tertiary">Tertiary (College/University)</option>
<option value="postgraduate">Postgraduate (Master's/PhD)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Marital Status</label>
<div class="mt-1 space-x-4">
<label class="inline-flex items-center">
<input type="radio" name="maritalStatus" value="single" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-700">Single</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="maritalStatus" value="married" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-700">Married</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="maritalStatus" value="divorced" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-700">Divorced</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="maritalStatus" value="widowed" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-700">Widowed</span>
</label>
</div>
</div>
<div>
<label for="income" class="block text-sm font-medium text-gray-700">Annual Gross Income</label>
<input type="number" name="income" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="expenses" class="block text-sm font-medium text-gray-700">Monthly Expenses</label>
<input type="number" name="expenses" min="0" placeholder="e.g., 2000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="assets" class="block text-sm font-medium text-gray-700">Net Worth</label>
<input type="number" name="assets" min="0" placeholder="Estimated Net Worth" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="liabilities" class="block text-sm font-medium text-gray-700">Liabilities</label>
<input type="number" name="liabilities" min="0" placeholder="Estimated Liabilities" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Submit Questionnaire</button>
</div>
</form>
</div>
</main>
<%- include("./partials/navBar") %>
<%- include("./partials/scriptLoader") %>
<%- include("./partials/footer") %>