news.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>News - Embodied Perception and Interaction Lab (EmPACT) Lab</title>
	<link rel="icon" type="image/svg+xml" href="assets/essential_images/robot-favicon.svg?v=1">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
	<link rel="stylesheet" href="assets/css/style.css">
	
	<!-- Custom Mobile Navbar Fix -->
	<style>
		/* Custom hamburger menu with red bars */
		@media (max-width: 767px) {
			.navbar-toggle {
				display: block !important;
				position: relative !important;
				z-index: 10000 !important;
				background-color: transparent !important;
				border: none !important;
				padding: 12px !important;
				margin: 10px 15px !important;
				float: right !important;
				cursor: pointer !important;
				pointer-events: auto !important;
				width: 50px;
				height: 50px;
			}
			.navbar-toggle .icon-bar {
				display: block !important;
				width: 30px !important;
				height: 4px !important;
				background-color: #dc2626 !important;
				border-radius: 2px !important;
				margin: 5px 0 !important;
				transition: all 0.3s ease !important;
			}
			.navbar-toggle:hover .icon-bar {
				background-color: #991b1b !important;
			}
			.navbar-collapse {
				max-height: none !important;
				overflow: visible !important;
				background-color: #fff !important;
				border-top: 2px solid #dc2626 !important;
				transform-origin: top;
				transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
			}
			.navbar-collapse.collapse {
				display: block !important;
				transform: scaleY(0) !important;
				opacity: 0 !important;
				max-height: 0 !important;
				overflow: hidden !important;
			}
			.navbar-collapse.collapse.in {
				transform: scaleY(1) !important;
				opacity: 1 !important;
				max-height: 500px !important;
				overflow-y: visible !important;
			}
		}
	</style>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"><img src="assets/essential_images/empact_logo.jpg" alt="EmPACT Lab"></a>
			</div>
			<div class="collapse navbar-collapse" id="navbar-collapse-main">
				<ul class="nav navbar-nav pull-right mainNav">
					<li><a href="index.html">Home</a></li>
					<li><a href="research.html">Research</a></li>
					<li><a href="people.html">People</a></li>
					<li><a href="publication.html">Publication</a></li>
					<li class="active"><a href="news.html">News</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>

	<header id="head" class="secondary">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<h1>Latest News</h1>
					<p>Stay updated with the latest developments from EmPACT Lab</p>
				</div>
			</div>
		</div>
	</header>

	<section class="container news-page">
		<div id="newsContainer" class="news-directory" aria-live="polite">
			<p class="news-status">Loading news…</p>
		</div>
	</section>

	<footer id="footer">
		<div class="footer2">
			<div class="container">
				<div class="row">
					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="simplenav">
								<a href="index.html">Home</a> | 
								<a href="research.html">Research</a> |
								<a href="people.html">People</a> |
								<a href="publication.html">Publication</a> |
								<a href="news.html">News</a> |
								<a href="contact.html">Contact</a>
							</p>
						</div>
					</div>
					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="text-right">Copyright &copy; 2026 EmPACT Lab @ NTU Singapore</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	<script src="assets/js/custom.js"></script>
	<script src="assets/js/news-from-csv.js?v=20260829-6"></script>
	
	<!-- Custom Mobile Navbar Script -->
	<script>
	(function() {
		var isToggling = false;
		
		function toggleMenu() {
			if (isToggling) return;
			isToggling = true;
			
			var collapse = document.getElementById('navbar-collapse-main');
			if (collapse.classList.contains('in')) {
				collapse.classList.remove('in');
			} else {
				collapse.classList.add('in');
			}
			
			setTimeout(function() { isToggling = false; }, 300);
		}
		
		window.addEventListener('load', function() {
			var toggleBtn = document.querySelector('.navbar-toggle');
			if (toggleBtn) {
				toggleBtn.addEventListener('click', toggleMenu);
				toggleBtn.addEventListener('touchend', function(e) {
					e.preventDefault();
					toggleMenu();
				});
			}
			
			// Close menu when clicking on links
			var navLinks = document.querySelectorAll('.navbar-collapse a');
			for (var i = 0; i < navLinks.length; i++) {
				navLinks[i].addEventListener('click', function() {
					document.getElementById('navbar-collapse-main').classList.remove('in');
				});
			}
		});
	})();
	</script>
</body>
</html>