gccmanpower/src/main/resources/templates/modals/login-modal.html

<div th:fragment="login-modal">
	<!-- Overlay -->
	<div id="login-modal" class="login-modal-overlay">
		<!-- Modal Box -->
		<div class="login-modal-box">
			<span class="close-btn" onclick="closeLoginModal()">&times;</span>
			<h3 class="login-title">Login</h3>
			<form id="otp-form" class="login-form">
				<label for="mobNum" class="form-label">Mobile Number <span class="req">*</span></label>
				<select id="mobNum" name="mobNum" class="form-input" required>
					<option value="">-- Select Mobile Number --</option>
				</select>
				<!--<input type="tel" id="mobNum" name="mobNum" placeholder="Enter your mobile number" required
					class="form-input">-->
				<!-- Hidden OTP Section (initially hidden) -->
				<div id="otp-section" style="display: none; margin-top: 15px;">
					<label for="otp" class="form-label">Enter OTP <span class="req">*</span></label>
					<input type="number" id="otp" name="otp" placeholder="Enter received OTP" class="form-input"
						maxlength="5">
				</div>
				<!-- Button Row -->
				<div class="btn-row" id="button-section">
					<button type="submit" id="send-otp-btn" class="login-btn-send">Get OTP</button>
				</div>
			</form>
			<!-- Message -->
			<p id="otp-message" style="text-align:center; margin-top:10px; color:#333;"></p>
		</div>
	</div>
</div>