-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (67 loc) · 5.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>cplouffe.github.io by cplouffe</title>
</head>
<body>
<header>
<div class="inner">
<h1>cplouffe.github.io</h1>
<h2>reac.TOR - Toronto Event Mapping</h2>
<a href="https://github.com/cplouffe" class="button"><small>Follow me on</small> GitHub</a>
</div>
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<p><img src="https://raw.githubusercontent.com/cplouffe/TechTrek_Idol_2014/master/reac.TOR/img/reactor-logo.png" alt="alt text" title="reac.TOR"></p>
<p>Team Members: Cameron Plouffe, Michael Luubert, Krista Amolins</p>
<h2>
<a name="reactor-helps-you-get-reactive-in-toronto" class="anchor" href="#reactor-helps-you-get-reactive-in-toronto"><span class="octicon octicon-link"></span></a>reac.TOR helps you get reactive in Toronto</h2>
<p><strong>Why plan ahead when you can live in the moment?</strong> reac.TOR shows you what's going on in your neighbourhood and around the city today, tomorrow, or this weekend. The app aggregates data from several popular event listing sites, drawing them all on a single map so you can see what's happening where you are or where you'll be and decide whether you want to go listen to an up-and-coming band at the local pub, cheer on your favourite team, take in a show, or simply join in the fun at a community festival... And it can easily be adapted for other cities!</p>
<h2>
<a name="reactor-shows-you-where" class="anchor" href="#reactor-shows-you-where"><span class="octicon octicon-link"></span></a>reac.TOR shows you WHERE</h2>
<p>There are a number of different event listing sites - blogTO, InsideToronto, Just Shows, ... - and one thing they all have in common is that they don't map their events (or, at best, use Google Maps or OpenStreetMap to show the location of a single event). This makes it difficult for anyone unfamiliar with the city - or simply wanting to know what's happening around them - to find the events that matter to them.
With reac.TOR, you can choose to zoom to a particular region or neighbourhood in the city to see what's going on in that area.</p>
<h2>
<a name="reactor-is-responsive" class="anchor" href="#reactor-is-responsive"><span class="octicon octicon-link"></span></a>reac.TOR is responsive</h2>
<p>Designed for mobile devices, event clustering keeps the map from getting too cluttered at any scale and at any screen size. Simply click on a cluster to break it into smaller clusters or individual events. Colour-coded events help you quickly spot the events you're most interested in.</p>
<p>reac.TOR will only give you the essential information - what, when, where - when you click on an event feature. Need more? Click on More Info and a secondary pop-up appears with the category, price, and description, plus a link to the original event listing.</p>
<h2>
<a name="reactor-puts-you-in-control" class="anchor" href="#reactor-puts-you-in-control"><span class="octicon octicon-link"></span></a>reac.TOR puts you in control</h2>
<p>Every day, there are dozens of different events across the city. reac.TOR's filters allow you to choose the <strong>date</strong>, the <strong>price</strong>, and the <strong>type of event</strong> so you only see the events you want to see. You can also choose the source to see events from.</p>
<p><strong>Don't be proactive - get reactive!</strong></p>
<h2>
<a name="setup--development" class="anchor" href="#setup--development"><span class="octicon octicon-link"></span></a>Setup & Development</h2>
<p>To run the development environment for reac.TOR, you will need:</p>
<ol>
<li><a href="http://nodejs.org/">Node.js</a></li>
<li><a href="http://gruntjs.com/">Grunt</a></li>
<li><a href="http://bower.io/">Bower</a></li>
<li>
<a href="https://www.ruby-lang.org/en/downloads/">Ruby</a> and <a href="http://compass-style.org/install/">Compass</a> (to compile SASS)</li>
</ol><p>Install <code>node</code> on your system by following <a href="https://github.com/joyent/node/wiki/Installation#installing-without-building">these instructions</a>.</p>
<p>Once Node.js is installed, install the Grunt and Bower command line utilities by running <code>npm install -g grunt-cli</code> and <code>npm install -g bower</code> in your console.</p>
<p>Clone the reac.TOR repository and <code>cd</code> into its root directory.</p>
<p>Run <code>npm install</code>, and then <code>bower install</code> to pull down required packages and external dependencies for reac.TOR.</p>
<p>When developing, run the Grunt development task to watch SASS and Handlebars files and keep CSS and HTML files current:</p>
<pre><code>grunt dev
</code></pre>
</section>
<aside id="sidebar">
<p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
</aside>
</div>
</div>
</body>
</html>