Skip to content

GoPhillyGo v2 Prototype #530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 20, 2016
Merged

GoPhillyGo v2 Prototype #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
afc8fb4
Initial app framework for prototype
lederer Sep 15, 2016
b3d2d5a
Prototype home page
lederer Sep 15, 2016
258024d
Prototype map page
lederer Sep 20, 2016
591c297
Step by step directions. Modals.
lederer Oct 3, 2016
ae2edd8
Prototype extras page with modal states
lederer Oct 12, 2016
3fe31c2
Prototype info pages: Learn, Explore, About
lederer Oct 13, 2016
b097daf
Protoype extras: Indego step-by-step
lederer Oct 17, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/prototype/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# MacOS
.DS_Store

# SASS
.sass-cache/

#npm
node_modules/
9 changes: 9 additions & 0 deletions src/prototype/Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = function(grunt) {

// measures the time each task takes
require('time-grunt')(grunt);

// load grunt config
require('load-grunt-config')(grunt);

};
21 changes: 21 additions & 0 deletions src/prototype/LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2016 Azavea

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
19 changes: 19 additions & 0 deletions src/prototype/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Go Philly Go v2 Prototype
Mostly HTML and SASS. Plus a bit of JS to demonstrate moving between states of the app.

---

## Installation
Run `npm install` in the project directory to install required packages.

---

## Use
Run `grunt` to watch for file changes and automatically open your browser to `localhost:3000`.

---

## What's in the prototype


## What's next
93 changes: 93 additions & 0 deletions src/prototype/app/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>GoPhillyGo | Trip Planning for Bikes, Public Transit, and Walking | Clean Air Council</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="body-info">
<header class="app-header">
<div class="brand">
<div class="slogan-start">
Walk. Ride. Pedal. Discover.
</div>
<div class="logo"><a href="#"></a></div>
<div class="slogan-end">
Next time bring your bike onboard.
</div>
</div>
<nav class="primary-nav">
<a class="nav-item" href="index.html">Directions</a>
<a class="nav-item" href="#">Explore</a>
<a class="nav-item" href="learn-index.html">Learn</a>
</nav>
</header>

<div class="main">
<h1>About GoPhillyGo</h1>

<article class="info-article">
<section class="info-article-section">
<dl class="faq">
<dt>The online mapping tool for the greater philadelphia area</dt>
<dd>Developed with state-of-the-art mapping technology, GoPhillyGo makes it easy to plan multimodal travel — combining biking + walking + public transportation within one trip — to go anywhere within the greater Philadelphia area without the use of a car. It even provides details on pedestrian and bike routes, letting users customize their trips.</dd>

<dt>Steep hills not for you?</dt>
<dd>Our easy-to-use options help you customize your route specifically to your needs. If you want to get a workout in, we can help. If you're looking for a more leisurely trip, we have you covered.</dd>

<dt>Do you have a travel preference?</dt>
<dd>GoPhillyGo lets you choose your preferred mode of transportation, including mass transit. Travel by bus, train, or trolley, hop on your bike, and even take longer walking routes. Combine methods to plan your trip.</dd>

<dt>Visit philadelphia’s hidden gems</dt>
<dd>Use GoPhillyGo to plan your trip to featured “Places We Love”.</dd>

<dt>Subscribe to stay updated</dt>
<dd>Stay up to date on all things GoPhillyGo. Enter your information below for updates on GoPhillyGo events, featured profiles, and featured content from the site.</dd>
</dl>
<p>
Questions? Email us at <a href="mailto:[email protected]">[email protected]</a>
</p>
</section>
</article>
</div>

<footer class="app-footer">
<div class="footer-subscribe">
<h2>Stay up to date</h2>
<p>
Stay up to date on all things GoPhillyGo — events, updates, featured content.
</p>
<form class="subscribe-form" action="" method="post">
<input class="subscribe-input" type="text" name="email" value="" placeholder="Your email address">
<button class="subscribe-btn" type="submit" name="subscribe-submit">Subscribe</button>
</form>
</div>
<div class="footer-follow">
<h2>Follow us</h2>
<ul class="social-sites">
<li><a class="social-twitter" target="_blank" title="Follow us on Twitter" href="https://twitter.com/go_philly_go"><i class="icon-twitter"></i></a></li>
<li><a class="social-facebook" target="_blank" title="Like us on Facebook" href="https://www.facebook.com/gophillygo"><i class="icon-facebook"></i></a></li>
<li><a class="social-instagram" target="_blank" title="Follow us on Instagram" href="https://www.instagram.com/go_philly_go/"><i class="icon-instagram"></i></a></li>
<li><a class="social-youtube" target="_blank" title="Watch us on YouTube" href="https://www.youtube.com/channel/UCJSbm760xytSCZdJ16kS1Cg"><i class="icon-youtube"></i></a></li>
</ul>
</div>
<div class="footer-about">
<a class="goto-about" title="Learn more about GoPhillyGo" href="about.html">
<h2>About</h2>
<p>
GoPhillyGo is a project of the Clean Air Council, Azavea, and Warkulwiz Design Associates. The project is funded by the William Penn Foundation.
</p>
</a>
</div>
<div class="footer-compact">
<a href="#">Explore</a>
<a href="learn-index.html">Learn</a>
</div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/prototype.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions src/prototype/app/css/main.css
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions src/prototype/app/css/main.css.map
View file
Open in desktop

Large diffs are not rendered by default.

132 changes: 132 additions & 0 deletions src/prototype/app/explore-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>GoPhillyGo | Trip Planning for Bikes, Public Transit, and Walking | Clean Air Council</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="body-info">
<header class="app-header">
<div class="brand">
<div class="slogan-start">
Walk. Ride. Pedal. Discover.
</div>
<div class="logo"><a href="#"></a></div>
<div class="slogan-end">
Next time bring your bike onboard.
</div>
</div>
<nav class="primary-nav">
<a class="nav-item" href="index.html">Directions</a>
<a class="nav-item on" href="#">Explore</a>
<a class="nav-item" href="learn-index.html">Learn</a>
</nav>
</header>

<div class="main">
<h1><a href="index.html">Places We Love</a></h1>

<article class="info-article">
<header class="info-article-header">
<div class="info-article-image-hero" style="background-image: url('../images/places/independence-seaport-lg.jpg');"></div>
<h2 class="info-article-title">Independence Seaport Museum</h2>
</header>
<section class="info-article-section">
<p>
Independence Seaport Museum maintains one of the largest maritime collections in North America, combining more than 25,000 artifacts with hands-on exhibits and large-scale ship models. The Museum is currently constructing a full-size waterline model of an American topsail schooner of the late 18th century period. During construction, visitors can experience the atmosphere at one of Philadelphia’s first shipyards while getting hands-on and trying out traditional boatbuilding techniques. Additionally, the Museum features a traditional wooden boat shop, the J. Welles Henderson Archives and Library and a 530-seat concert hall, home to the Penn’s Landing Playhouse. The Museum also includes two National Historic Landmark ships—the Spanish-American War cruiser, Olympia, and the World War II submarine Becuna.
</p>
<p>
Admission is $15.00 for Adults, $10 for children 3-12 and Seniors, Museum members and children 2 and under are free.
</p>
<p class="info-article-p-link-inline">
<a href="#" target="_blank">Event Calendar</a>
</p>
<p class="info-article-p-link-inline">
<a href="http://www.phillyseaport.org/" target="_blank">www.phillyseaport.org</a>
</p>
</section>
</article>

<div class="summaries-list">
<h3>More great, green places around Philly</h3>

<a href="explore-detail.html" class="preview-card-link">
<div class="preview-card">
<img class="preview-photo" src="images/places/john-heinz.png" width="308" height="204" alt="John Heinz National Wildlife Refuge" />
<div class="preview-details">
<h2>John Heinz National Wildlife Refuge</h2>
<p class="lede">
John Heinz National Wildlife Refuge at Tinicum is the nation's first urban refuge, and was established in 1972 to preserve, restore and develop the natural area known as Tinicum Marsh.
</p>
</div>
</div>
</a>
<a href="explore-detail.html" class="preview-card-link">
<div class="preview-card">
<img class="preview-photo" src="images/places/john-heinz.png" width="308" height="204" alt="John Heinz National Wildlife Refuge" />
<div class="preview-details">
<h2>John Heinz National Wildlife Refuge</h2>
<p class="lede">
John Heinz National Wildlife Refuge at Tinicum is the nation's first urban refuge, and was established in 1972 to preserve, restore and develop the natural area known as Tinicum Marsh.
</p>
</div>
</div>
</a>
<a href="explore-detail.html" class="preview-card-link">
<div class="preview-card">
<img class="preview-photo" src="images/places/john-heinz.png" width="308" height="204" alt="John Heinz National Wildlife Refuge" />
<div class="preview-details">
<h2>John Heinz National Wildlife Refuge</h2>
<p class="lede">
John Heinz National Wildlife Refuge at Tinicum is the nation's first urban refuge, and was established in 1972 to preserve, restore and develop the natural area known as Tinicum Marsh.
</p>
</div>
</div>
</a>

<div class="more-link">
<a href="index.html">See them all</a>
</div>
</div>
</div>

<footer class="app-footer">
<div class="footer-subscribe">
<h2>Stay up to date</h2>
<p>
Stay up to date on all things GoPhillyGo — events, updates, featured content.
</p>
<form class="subscribe-form" action="" method="post">
<input class="subscribe-input" type="text" name="email" value="" placeholder="Your email address">
<button class="subscribe-btn" type="submit" name="subscribe-submit">Subscribe</button>
</form>
</div>
<div class="footer-follow">
<h2>Follow us</h2>
<ul class="social-sites">
<li><a class="social-twitter" target="_blank" title="Follow us on Twitter" href="https://twitter.com/go_philly_go"><i class="icon-twitter"></i></a></li>
<li><a class="social-facebook" target="_blank" title="Like us on Facebook" href="https://www.facebook.com/gophillygo"><i class="icon-facebook"></i></a></li>
<li><a class="social-instagram" target="_blank" title="Follow us on Instagram" href="https://www.instagram.com/go_philly_go/"><i class="icon-instagram"></i></a></li>
<li><a class="social-youtube" target="_blank" title="Watch us on YouTube" href="https://www.youtube.com/channel/UCJSbm760xytSCZdJ16kS1Cg"><i class="icon-youtube"></i></a></li>
</ul>
</div>
<div class="footer-about">
<a class="goto-about" title="Learn more about GoPhillyGo" href="about.html">
<h2>About</h2>
<p>
GoPhillyGo is a project of the Clean Air Council, Azavea, and Warkulwiz Design Associates. The project is funded by the William Penn Foundation.
</p>
</a>
</div>
<div class="footer-compact">
<a href="#">Explore</a>
<a href="learn-index.html">Learn</a>
</div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/prototype.js"></script>
</body>
</html>
Loading