gallery.html

---
layout: default
title: Shape Downloads
---

<div class="container">
	<div class="page-header row col-xs-12">
		<h1>Shape Downloads</h1>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<p>
				Looking for some shapes to add some visual flair to your presentation? Check out the Shape Libraries below for bundles of themed-shapes, or download individual shapes from our Shape Gallery.
			</p>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<h2>Shape Libraries</h2>
			<p>
				Here are some libraries you can import into the <a href="{{ site.baseurl }}/docs/shapes-lab.html">Shapes Lab</a> and use - just download the libraries you want and follow the steps <a href="{{ site.baseurl }}/docs/shapes-lab.html#shapes-lab-import">here</a>.
			</p>
			<p>
				If you've created a library that you'd like to share, email it to us at <a href="mailto:pptlabs@comp.nus.edu.sg">pptlabs@comp.nus.edu.sg</a>!
			</p>
			<p>
				Please ensure that you have the appropriate copyright/license for any shapes included in libraries you send. (If you notice any copyright violations in any of the shapes libraries submitted here, please inform us at the email address above; all libraries are user-submitted.)
			</p>
			<p class="btn btn-default" data-bind="click: toggleShapeLibraries, visible: !isLibrarySectionOpen()">
				<i class="glyphicon glyphicon-plus"></i>
				Show Libraries
			</p>
			<p class="btn btn-default" data-bind="click: toggleShapeLibraries, visible: isLibrarySectionOpen">
				<i class="glyphicon glyphicon-minus"></i>
				Hide Libraries
			</p>
		</div>
	</div>

	<div id="shape-libraries" class="collapsed">
		{% for library in site.data.libraries %}
		<div class="row">
			<div class="col-xs-12 gallery-header">
				<h3>{{library.name}} <small><a href="{{ site.baseurl }}/gallery/{{library.file}}">[Download]</a></small></h3>
			</div>

			<div class="col-xs-6">
				<img class="box-shadow fit" src="{{ site.baseurl }}/gallery/{{library.images.example}}">
			</div>

			<div class="col-xs-6">
				<p>
					{{library.description}}
				</p>
				<p>
					Contains <span class="accent">{{library.numberIncluded}}</span> shapes.
					Submitted by <strong>{{library.submitter}}</strong>.
				</p>
				<img src="{{ site.baseurl }}/gallery/{{library.images.contents}}">
			</div>
		</div>
		{% endfor %}
	</div>

	<div class="row col-xs-12">
		<h2>Shape Gallery</h2>
		<p>Here are some shapes that can be downloaded on their own, and imported into the Shapes Lab. Just click the one you want!</p>
		<p class="btn btn-default" data-bind="click: toggleShapeGallery, visible: !isGallerySectionOpen()">
			<i class="glyphicon glyphicon-plus"></i>
			Show Gallery
		</p>
		<p class="btn btn-default" data-bind="click: toggleShapeGallery, visible: isGallerySectionOpen">
			<i class="glyphicon glyphicon-minus"></i>
			Hide Gallery
		</p>
	</div>

	<div id="shape-gallery" class="collapsed row col-xs-12 shape-gallery">
		<input type="text" class="search-box" placeholder="Search shapes..." data-bind="textInput: filterText">
		<div data-bind="foreach: shapes">
			<a class="shape" data-bind="attr: { href: link }" data-proofer-ignore>
				<img data-bind="attr: { src: image }">
				<div>
					<h4>
						<span data-bind="text: name"></span>
						<small data-bind="if: licenseTerms" data-toggle="tooltip">
							<i class="glyphicon glyphicon-info-sign" data-bind="attr: { title: licenseTerms }" data-toggle="tooltip"></i>
						</small>
					</h4>
				</div>
				<!-- ko if: submitter -->
					<small data-bind="text: 'Submitted by ' + submitter()"></small>
				<!-- /ko -->
					
				<p data-bind="text: description"></p>
				<p><small>Tags: <span data-bind="text: tags().join(', ')"></span></small></p>
			</a>
		</div>
	</div>
</div>

<script>
	var shapes = {{ site.data.shapes | jsonify }};
</script>
<script src="{{ site.baseurl }}/js/knockout-3.2.0.js"></script>
<script src="{{ site.baseurl }}/js/galleries.js"></script>