index.hbs

{{!-- Home Page --}}
{{!< default}}
<main>
	<div class="hero">
		<div class="org-name">UC BERKELEY IEEE</div>
		<div class="org-description">ADVANCING TECHNOLOGY FOR HUMANITY</div>
		<div class="org-age">Since 1912</div>
		<div id="scroll-btn">
			<div class="arrow"></div>
		</div>
	</div>

	<div id="slide-show">
		<div id="fwd-btn" class="btn">
			<div class="arrow"></div>
		</div>
		<div class="image-container">
			<div class="image-list">
				<img src="{{asset 'images/hope.jpg'}}" caption="Students in IEEE's EE 198: Hands-On PCB Engineering class learn to design their own printed circuit boards. This student project is a 5x5 color LED matrix powered by an Arduino Nano. Find out more about Hands-On PCB Engineering."></img>
				<img src="{{asset 'images/antenna.jpg'}}" caption="IEEE members putting the final touches on Cory Hall's new Low-Earth-Orbit satellite ground terminal. This ground terminal is capable of 50W dual-band operation on the 2-meter and 70-centimeter amateur radio bands. Learn more about amateur radio at UC Berkeley."></img>
				<img src="{{asset 'images/micromouse.jpg'}}" caption="A maze-solving 'micromouse' zips its way to the finish line. Learn how to build your own record-setting micromouse by taking IEEE'S EE 198: Micromouse."></img>
			</div>
		</div>
		<div id="slide-caption"></div>
		<div id="bkw-btn" class="btn">
			<div class="arrow"></div>
		</div>
	</div>

	<div id="dw-home-features">
		<section class="left">
			<h1>STUDENT LEADERS</h1>
			<p>The <b>UC Berkeley IEEE</b> Student Branch was established in 1912 and has been one of the most <b>active</b> engineering student organizations on campus ever since. </p>
			<a class="btn" href="/about">ABOUT US</a>
		</section>

		<section class="right">
			<h1>CONNECT TO OTHERS</h1>
			<p>We aim to promote <b>professional development</b>, encourage <b>academic growth</b>, and organize <b>social activities</b> within the greater engineering community.</p>
			<a class="btn" href="/events">UPCOMING EVENTS</a>
		</section>

		<section class="left">
			<h1>BUILD A COMMUNITY</h1>
			<p>With <b>500+ general members and 50+ officers and directors</b>, we continue to support engineers in their all of their endeavors. Anyone with an <b>interest in technology</b> are welcome to join. We accept everyone! </p>
			<a class="btn" href="/join">JOIN US</a>
		</section>
	</div>
</main>
<script>
	let imgs = Array.from(document.querySelectorAll('.image-list img'));
	let cap = document.querySelector('#slide-caption');
	let index = 0;
	const slideContainer = document.querySelector('#slide-show .image-container');
	slideContainer.offsetWidth;

	document.querySelector('#bkw-btn').onclick = () => {
		index = (imgs.length + index + 1) % imgs.length;
		document.querySelector('#slide-show .image-list').scroll({
			left: index * slideContainer.offsetWidth,
			behavior: 'smooth'
		});
		cap.innerText = imgs[index].getAttribute('caption');
	};

	document.querySelector('#fwd-btn').onclick = () => {
		index = (imgs.length + index - 1) % imgs.length;
		document.querySelector('#slide-show .image-list').scroll({
			left: index * slideContainer.offsetWidth,
			behavior: 'smooth'
		});
		cap.innerText = imgs[index].getAttribute('caption');
	};
	cap.innerText = imgs[index].getAttribute('caption');

	function resizeSlide() {
		cap.remove();
		if (window.innerWidth < 1265) {
			document.querySelector('#slide-show').after(cap);
		} else {
			document.querySelector('#bkw-btn').before(cap);
		}
	}
	resizeSlide();

	window.addEventListener('resize', resizeSlide);
</script>