VictoriaHallBooking_V1/target/classes/templates/index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Victoria Hall Booking</title>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
	<style>
		/* Add your custom styles here */
		/* For example:
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        */
	</style>
</head>

<body>
	<!-- Loading overlay -->
	<div th:if="${loading}" class="loading-overlay">
		<div class="spinner-border text-primary" role="status">
			<span class="sr-only">Loading...</span>
		</div>
	</div>

	<div class="container mt-5">
		<h1 class="mb-4">Victoria Hall Booking</h1>
		<form th:action="@{/book}" method="post">
			<div class="form-group">
				<label for="eventName">Event Name</label>
				<input type="text" class="form-control" id="eventName" name="eventName" required>
			</div>
			<div class="form-group">
				<label for="eventDate">Event Date</label>
				<input type="date" class="form-control" id="eventDate" name="eventDate" required>
			</div>
			<div class="form-group">
				<label for="eventTime">Event Time</label>
				<input type="time" class="form-control" id="eventTime" name="eventTime" required>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary">Submit</button>
			</div>
		</form>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>