PGR_Update_File/src/main/resources/templates/fragments/header.html

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

<head>
	<title>Header Fragment</title>
	<base th:href="${baseURL}" />
</head>


<body>
	<div th:fragment="headerFragment">
		<style>
			.header {
				background-color: #3b4858;
				padding: 10px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: white;
			}

			.header .logo-left img {
				height: 60px;
			}

			.header .title {
				text-align: center;
				flex-grow: 1;
			}

			.header .title h2 {
				margin: 0;
				font-size: 1.5rem;
			}

			.header .logos-right img {
				height: 60px;
				margin-left: 10px;
			}

			#toggleSpeech {
				background-color: white;
				color: black;
				margin: 3px;
			}

			#toggleSpeech img {
				height: 30px;
				/* Set height for the image */
				margin-right: 8px;
				/* Add some space between the image and text */
			}
		</style>
		<div class="header">
			<div class="logo-left">
				<img src="/pgr/images/gcc1.png" alt="Greater Chennai Corporation Logo">
				<!--<button id="toggleSpeech" class="btn btn-secondary">
					<img src="/staffcomplaint/images/message.png" alt="Accessibility Icon">Turn On Speech</button>-->

			</div>
			<div class="title">
				<h2>Public Grievance and Redressal System</h2>
			</div>
			<!--<button id="screenReaderButton">Read Screen</button>-->
			<div class="logos-right">
				<img src="/pgr/images/tamil.jpg" alt="Tamil Nadu Logo">
				<!--<img src="images/bt-logo.png" style="width: 100px;height: 50px;" alt="bonton Logo">-->
			</div>
		</div>
		<script th:src="@{/js/screenreader.js}"></script>
</body>

</html>