index.html

---
layout: default
permalink: /
---

<div class="blue-grey lighten-5">
	<!-- Header -->
	<div class="container section row center">
		<div class="col s12 m4 offset-m4">
			<img src="/assets/img/cybersocks_transparent.png" alt="CyberSOCKS" class="responsive-img center pad-top" />
			<hr>
		</div>
		<div class="col s12 center">
			<h3>CyberSOCKS Regional</h3>
			<h6>{% include location.html %}&nbsp;&nbsp;{{ site.location }} on <span class="blue-text">{{ site.date.regional }}</span></h6>
		</div>
	</div>

<!-- FINAL Participating Teams -->
<div class="bg-gradient bg-clock">
	<div class="row row0 pad-center">
		<br>
		<div class="col s12 center">
			<h5 class="focus">Competing Teams <i class="fa fa-bar-chart" aria-hidden="true"></i></h5>
			<h6>in the CyberSOCKS Final Round</h6>
		</div>
		<div class="col s12"><br></div>
		{% for team in site.data.final %}
			<div class="col s10 offset-s1 m4 l3">
				<div class="card-panel white team">
					{{ team.team }}<span class="badge blue">{{ team.rank }}</span>
					<a onclick="$('#rank{{ team.rank }}').modal('open')"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
				</div>
			</div>
			<div id="rank{{ team.rank }}" class="modal bottom-sheet">
				<div class="modal-content row">
					<h4>{{ team.team }}</h4>
					<p>{{ team.university }}</p>
					<div class="chip hoverable" title="{{ team.country | capitalize }}">
						<img src="/assets/img/{{ team.country }}.png" alt="{{ team.country }}">
						Rank {{ team.rank }}
					</div><br><br>
					<div class="col s12 m8 offset-m2 left-align">
						<ul class="collapsible" data-collapsible="accordion">
							<li>
								<div class="collapsible-header blue white-text active"><i class="material-icons">people</i>Team Members</div>
								<div class="collapsible-body">
									<ul class="collection">
										{% for member in team.members %}
										{% assign name = member.name | split: ' ' %}
										{% capture casedname %}{% for each in name %}{{ each | capitalize }} {% endfor %}{% endcapture %}
										<li class="collection-item">{{ casedname }}<a class="pull-right" href="{{ member.email | prepend: "mailto:" }}"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
										{% endfor %}
									</ul>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<nav class="chal blue">
					<div class="nav-wrapper">
						<div class="col s12">
							<a class="breadcrumb title">QUALS</a>
							<a class="breadcrumb point">{{ team.quals }}</a>
							<a class="breadcrumb title">FINAL</a>
							<a class="breadcrumb point">{{ team.final }}</a>
						</div>
					</div>
				</nav>
				<button class="modal-action modal-close btn-floating grey waves-effect waves-light hoverable mclose"><i class="fa fa-times" aria-hidden="true"></i></button>
			</div>
		{% endfor %}
	</div>
	<br>
</div>

<!-- Qualification Rounds -->
<div id="twrap">
	<div id="twrapcover">
		<div class="container-fluid section row center">
			<h4 class="flow-text">CyberSOCKS Qualification Rounds</h4>
			<div class="col s12">
				{% for country in site.data.country %}
				<li>{% if country.name != "Malaysia" %}&bull;{% endif %}<a href="{{ country.name | downcase }}">&nbsp;&nbsp;{{ country.name }}&nbsp;</a></li>
				{% endfor %}
				<p>{{ site.date.quals }}</p>
			</div>
			<div class="pad-down-very-large hide-on-small-only"></div>
			<div class="row row0 pad-center center">
				<br>
				<div class="col s12 m6">
					<h5 class="focus">Participating Teams <i class="fa fa-bar-chart" aria-hidden="true"></i></h5>
					<h6>in the CyberSOCKS Qualification Rounds</h6>
				</div>
				<div class="col s12 hide-on-med-and-up">
					<br>
				</div>
				{% for country in site.data.country %}
				<div class="col s6 m3">
					<div id="{{ country.name }}">fetching data...</div><br>
					<div class="chip">
						<a href="{{ country.name | downcase }}">{{ country.name }}</a>
					</div>
				</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>

<!-- Main Sponsors -->
<div class="sponsor-bg">
	<div class="section center row pad-down-large">
		<h5 class="pad-top pad-down">CyberSOCKS is brought to you by</h5>
		{% for sponsor in site.data.sponsors %}
		<div class="col s6 m3">
			<div class="card-panel hoverable blue-grey lighten-5">
				<a href="{{ sponsor.url }}" target="blank"><img class="responsive-img focus" src="{{ sponsor.base }}" alt="{{ sponsor.name }}" /></a>
			</div>
		</div>
		{% endfor %}
	</div>
</div>

<div class="container section row center">
	<div class="col s4 offset-s4">
		<a href="http://tourismperakmalaysia.com/" target="_blank"><img src="/assets/img/tourism-perak-logo.png" alt="Tourism Perak 2017" class="responsive-img focus" /></a>
	</div>
</div>

<!-- More Information -->
<div class="row row1 info-link">
	{% for info in site.data.resources %}
		{% if info.id != "committee" %}
		<a href="/resources">
			<div class="col s3 center focus info {{ info.color }}">
				<i class="material-icons">{{ info.icon }}</i><br>{{ info.name }}
			</div>
		</a>
		{% endif %}
	{% endfor %}
</div>