<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta property="og:url" content="https://xpecto.tech/" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Xpecto" />
		<meta
			name="description"
			content="Xpecto is science and technology festival of Indian
        Institute of Technology, Mandi. It has been ramped up to
        include the most electrifying events, prompting great
        discoveries, as well as enthralling brainstorming and
        grand prizes."
		/>
		<meta
			name="keywords"
			content="Event, Expect, Innovate, Achieve, IIT Mandi, TechFest 2022, Xpecto, Technical festival, Techfest IIT Mandi,
        Xpecto 2022, First Technical Festival, Techfest IIT Mandi"
		/>
		<link
			rel="icon"
			type="image/x-icon"
			href="images/xpecto-logo-header.png"
		/>
		<script
			src="https://kit.fontawesome.com/a1542a4884.js"
			crossorigin="anonymous"
		></script>
		<!-- <link rel="stylesheet" href="./static/styles/page.css" /> -->
		<link rel="stylesheet" href="styles/style.css" />
		<!-- <link rel="stylesheet" href="./static/styles/profile.css" /> -->

		<title>Timeline | Xpecto</title>
	</head>

	<style>
		body {
			background: url("images/svg/circles.svg");
		}
		.prof-container {
			padding-top: 6rem;
		}
		.active {
			transform: translateY(-15px);
			color: cyan;
			box-shadow: 0 0 75px -15px cyan;
		}
	</style>

	<body>
		<!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
		<%- include ('partials/navbar.ejs') %>
		<!-- -----HEADER END----- -->

		<div class="" id="page">
			<div class="prof-container">
				<!-- <div class="content"></div> -->
				<!-- <h1>TERMS AND CONDITIONS</h1> -->
				<div class="card">
					<div class="dates-dot">
						<div class="dot dot-1 active">
							<div class="date_">13<br />May</div>
							<!-- <span class="circle"></span> -->
						</div>
						<div class="dot dot-2">
							<div class="date_">14<br />May</div>
							<!-- <span class="circle"></span> -->
						</div>
						<div class="dot dot-3">
							<div class="date_">15<br />May</div>
							<!-- <span class="circle"></span> -->
						</div>
						<div class="dot dot-4">
							<div class="date_">16<br />May</div>
							<!-- <span class="circle"></span> -->
						</div>
					</div>

					<% for(let i =0; i<schedule.length; i++) {%> 	
					<div class="block block-<%= i+1 %>">
						<h3><%= schedule[i].schedule_day %></h3>
						<div class="schedule-container">
							<% for(let j =0; j<schedule[i].info.length; j++) {%>
								<div class="schedule">
									<div class="schedule-event">
										<%= schedule[i].info[j].schedule_event %> 
									</div>
									<div class="schedule-time"><%= schedule[i].info[j].schedule_time %></div>
								</div>
								<hr />
							<%}%>
						</div>
					</div>
					<%}%>
				</div>
			</div>
		</div>
		<script src="scripts/script.js"></script>
		<script src="scripts/ejs.js"></script>
		<script src="scripts/timeline.js"></script>
	</body>
</html>
