Skip to content
This repository was archived by the owner on Sep 6, 2020. It is now read-only.

Updated for Helping Hands Index #50

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated for Helping Hands Index #50

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
243 changes: 243 additions & 0 deletions _projects/helpinghands/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelpingHands</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

<script>
$(document).ready(function(){
$('.prototype').slick({
dots: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>

</head>
<body>

<div class="col-md-6 col-md-offset-3 wrapper">

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#problem">Problem</a>
</li>
<li>
<a class="page-scroll" href="#solution">Solution</a>
</li>
<li>
<a class="page-scroll" href="#prototype">Prototype</a>
</li>
<li>
<a class="page-scroll" href="#video">Video</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#documents">Documents</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Logo -->
<img src="project_thumb.png" alt="HelpingHands" class="col-md-6 col-md-offset-3">

<!-- Tagline -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2 class="center">Lifting you off the street</h2>
</div>
</div>

<div class="spacer"></div>
<!-- The Problem -->
<div class="row center">
<h1 class="section-heading">The <span class="branding-green">Problem</span></h1>

<p class="lead">Newly homeless people don't have knowledge of available resources and struggle with the isolation of life on the streets.</p>
</div>

<div class="spacer"></div>
<!-- Our Solution -->
<div class="row center">
<h1 class="section-heading">Our <span class="branding-green">Solution</span></h1>

<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/home.png" class="col-md-12 team-pic" width="140px">
<p class="lead">To tackle this issue, we will install HelpingHands units, interactive displays with access to a helpline, across the city.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/detail.png" class="col-md-12 team-pic" width="140px">
<p class="lead">HelpingHands allows you to see available resources within a city.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/call.png" class="col-md-12 team-pic" width="140px">
<p class="lead">HelpingHands also allows you to call a volunteer for assistance.</p>
</div>
</div>
</div>
</div>

<div class="spacer"></div>
<!-- Prototype -->
<div class="row center">
<h1 class="section-heading">HelpingHands <span class="branding-green">Prototype</span></h1>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/home.png" class="col-md-12 team-pic" width="140px">
<p class="lead">Choose an option from the home screen</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/map.png" class="col-md-12 team-pic" width="140px">
<p class="lead">A map with relevant locations appears on the screen</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/detail.png" class="col-md-12 team-pic" width="140px">
<p class="lead">After selecting a location, directions and specific information appear</p>
</div>
</div>
</div>
<div class="spacer2"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/options.png" class="col-md-12 team-pic" width="140px">
<p class="lead">If you select talk, the topics you can speak with a volunteer appear</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/call.png" class="col-md-12 team-pic" width="140px">
<p class="lead">Once you've selected an option, you are prompted to call a helpline</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/end.png" class="col-md-12 team-pic" width="140px">
<p class="lead">The blue end call button is a solution to the issue of red-green colorblindness</p>
</div>
</div>
</div>
</div>

<div class="spacer"></div>
<!-- Video -->
<div class="row center">
<h1 class="section-heading">HelpingHands <span class="branding-green">Video</span></h1>
<div class="spacer"></div>
<<iframe width="560" height="315" src="https://www.youtube.com/embed/R3ZbLQo1mJU" frameborder="0" allowfullscreen></iframe>
</div>

<div class="spacer"></div>
<!-- Team -->
<div class="row center">
<h1 class="section-heading">The <span class="branding-green">Team</span></h1>

<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/shiv.jpg" class="col-md-12 team-pic" width="140px">
<p class="lead">Shiv<br><b>Ahluwalia</b></p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/awet.jpg" class="col-md-12 team-pic" width="140px">
<p class="lead">Awet<br><b>Alazar</b></p>
</div>
</div>
</div>

</div>
</div>


<div class="spacer"></div>
<!-- Documents -->
<div class="row center">
<h1 class="section-heading">Our <span class="branding-green">Documents</span></h1>

<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<a href="docs/initial_report.pdf">Initial Report</a>
<p>This report outlines our initial problem statement, contextual inquiries and task analysis.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<a href="docs/initial_presentation.pdf">Initial Presentation</a>
<p>This presentation shows the problem we are solving, contextual inquiries, task analysis, some design sketches and storyboards.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<a href="docs/final_report.pdf">Final Report</a>
<p>This report presents the problem we are solving, an overview of design process, and our usability tests. We conclude with a digital prototype.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<a href="docs/final_presentation">Final Presentation</a>
<p>This presentation presents the problem we are solving, an overview of the design process, and our usability tests. We conclude with a digital prototype.</p>
</div>
</div>
</div>
</div>
</div>

</div>

</body>
</html>