Skip to content

Commit

Permalink
Merge pull request #36 from CYPIAPT-LNDSE/WTC-10-personality-page
Browse files Browse the repository at this point in the history
WTC-10-personality page, relates is issue #10
  • Loading branch information
des-des authored Feb 2, 2017
2 parents 653b0a4 + ce750a5 commit fad49b8
Show file tree
Hide file tree
Showing 9 changed files with 210 additions and 27 deletions.
17 changes: 10 additions & 7 deletions choose-an-avatar.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,26 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates">
<link rel="stylesheet" href="lib/materialize/dist/css/materialize.css" media="screen,projection"/>
<link rel="stylesheet" href="main.css">

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
<div class="avatar">
<h1 class="avatar__title">Choose an animal</h1>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="assets/lion.svg"></a>
<a class="carousel-item" href="#two!"><img src="assets/lion.svg"></a>
<a class="carousel-item" href="#three!"><img src="assets/lion.svg"></a>
<div class="avatar__text">
<h1 class="avatar__title">Choose your character</h1>
</div>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="assets/lion.svg"></a>
<a class="carousel-item" href="#two!"><img src="assets/lion.svg"></a>
<a class="carousel-item" href="#three!"><img src="assets/lion.svg"></a>
</div>
</div>
</div>

<script src="swipe.js"></script>
<script src="lib/jquery-3.1.1.min.js"></script>
<script src="lib/materialize/dist/js/materialize.js"></script>
<script src="index.js"></script>
Expand Down
8 changes: 5 additions & 3 deletions eating.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates">
<link rel="stylesheet" href="main.css">

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
<div class="eating">
<h1 class="eating__text">How are you eating?</h1>
<div class="eating__text">
<h2 class="eating__title">How are you eating?</h2>
</div>
<p class="eating__text">
Slide to choose how many fruit and vegetables you eat per day.
</p>
Expand Down Expand Up @@ -44,5 +45,6 @@ <h1 class="eating__text">How are you eating?</h1>

<script src="lib/jquery-3.1.1.min.js"></script>
<script src="slider.js"></script>
<script src="swipe.js"></script>
</body>
</html>
6 changes: 3 additions & 3 deletions feelings.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates" >
<link rel="stylesheet" href="main.css">

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
<div class="feelings">
<div class="feelings__text">
<p class="feelings__title">How are you feeling today?<p>
<h2 class="feelings__title">How are you feeling today?<h2>
<img class="emoji" src="assets/emoji-happy.svg" alt="Happy Face"></img>
<img class="emoji" src="assets/emoji-sad.svg" alt="Happy Face"></img>
<img class="emoji" src="assets/emoji-indifferent.svg" alt="Happy Face"></img>
</div>
</div>
<script src="swipe.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions finished.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates" >
<link rel="stylesheet" href="main.css">

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
Expand All @@ -22,5 +21,6 @@ <h5 class="medium-text finished__header">Download your answers</h5>
</div>
</div>
</div>
<script src="swipe.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates" >
<link rel="stylesheet" href="main.css">

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
Expand All @@ -17,5 +16,6 @@ <h1 class="welcome__title margin-top-0px">Welcome to <br> CAMHS</h1>
We would like to get to know you better. Swipe left to get started.
</p>
</div>
<script src="swipe.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions introduction.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates" >
<link rel="stylesheet" href="main.css">

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
Expand All @@ -21,5 +20,6 @@
<input class="text-input" type="text" autofocus="">
</div>
</div>
<script src="swipe.js"></script>
</body>
</html>
83 changes: 75 additions & 8 deletions main.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ body {
.eating,
.finish,
.avatar,
.personality,
.feelings {
display: flex;
flex-direction: column;
color: #fff;
padding: 70px 100px;
}
.welcome__title,
.avatar__title {
.welcome__title {
font-family: 'Henny Penny', cursive;
font-size: 4rem;
margin: auto;
Expand All @@ -37,25 +37,42 @@ body {
.welcome__text,
.introduction__text,
.eating__text,
.finish__text {
.feelings__text,
.finish__text,
.personality__text,
.avatar__text {
margin: 40px 0;
padding: 0 25px;
font-size: 2.2rem;
text-align: center;
}
.eating__text {
margin: 10px 0;
}
.avatar {
padding: 0 10px;
padding: 0;
}
.personality__title {
margin-top: 0px;
}
.eating__title {
margin-top: 20px;
}
.avatar__title {
margin-top: 65px;
margin-bottom: 0px;
padding: 0 20px;
}
.carousel {
height: 900px;
height: 805px;
perspective: 300px;
}
.carousel .carousel-item {
width: 400px;
top: -300px;
}
.carousel .indicators {
bottom: 250px;
bottom: 230px;
}
.introduction__text {
margin-top: 15px;
Expand Down Expand Up @@ -84,11 +101,12 @@ body {
width: 200px;
}
.feelings__title {
margin-top: 0px;
margin-bottom: 50px;
}
.eating__slider {
width: 500px;
margin: 0 auto;
margin: 0 auto 20px auto;
position: relative;
padding-top: 160px;
padding-bottom: 160px;
Expand Down Expand Up @@ -270,8 +288,57 @@ body {
[type="checkbox"]:not(:checked):focus + span:before {
border: 1px dotted blue;
}

/* hover style just for information */
span:hover:before {
border: 1px solid #4778d9!important;
}
.personality__types {
color: black;
height: 360px;
}
.personality__shape {
background-color: #FCF74C;
display: inline-block;
border-radius: 50%;
margin: 10px 10px 20px 0;
}
.characteristics {
cursor: pointer;
padding: 15px 15px;
text-align: center;
display: inline-block;
margin: 10px;
font-size: 1.5em;
}
.rotate-10 {
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari */
transform: rotate(10deg);
}
.rotate-45 {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
.rotate-90 {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
.rotate-315 {
-ms-transform: rotate(315deg); /* IE 9 */
-webkit-transform: rotate(315deg); /* Safari */
transform: rotate(315deg);
}
.rotate-330 {
-ms-transform: rotate(330deg); /* IE 9 */
-webkit-transform: rotate(330deg); /* Safari */
transform: rotate(330deg);
}
.emotions {
width: 510px;
margin: 0 0 0 auto;
}
.row {
margin-left: 40px;
}
53 changes: 53 additions & 0 deletions personality.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates" >
<link rel="stylesheet" href="main.css">
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<title>Welcome to CAMHS</title>
</head>
<body>
<div class="personality">
<div class="personality__text">
<h2 class="personality__title">How would you describe yourself?</h2>
</div>
<div class="personality__types emotions">
<div class="row">
<div class="personality__shape rotate-10">
<p class="characteristics">fun</p>
</div>
<div class="personality__shape rotate-45">
<p class="characteristics">sad</p>
</div>
<div class="personality__shape">
<p class="characteristics">angry</p>
</div>
</div>
<div class="personality__shape rotate-330">
<p class="characteristics">friendly</p>
</div>
<div class="personality__shape rotate-10">
<p class="characteristics">kind</p>
</div>
<div class="personality__shape rotate-330">
<p class="characteristics">sociable</p>
</div>
<div class="personality__shape rotate-10">
<p class="characteristics">boring</p>
</div>
<div class="personality__shape rotate-330">
<p class="characteristics">crazy</p>
</div>
<div class="personality__shape">
<p class="characteristics">loving</p>
</div>
</div>
<div class="personality__text">
<p>Other:<p>
<input class="text-input" type="text" autofocus="">
</div>
<script src="swipe.js"></script>
</body>
</html>
58 changes: 58 additions & 0 deletions swipe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
function swipe(direction){
var endpoint = window.location.href.split('/')[7];
var forward, backward;

// Homepage to choose an avatar page
if (endpoint === 'index.html'){
forward = 'choose-an-avatar.html',
backward = ''
};

// Avatar to introduction page
if (endpoint === 'choose-an-avatar.html'){
forward = 'introduction.html',
backward = 'index.html'
};

// Introduction to feelings page
if (endpoint === 'introduction.html'){
forward = 'feelings.html',
backward = 'choose-an-avatar.html'
};

// Feelings page to eating page
if (endpoint === 'feelings.html'){
forward = 'eating.html',
backward = 'introduction.html'
};

// Eating page to finish page
if (endpoint === 'eating.html'){
forward = 'personality.html',
backward = 'feelings.html'
};

// Eating page to finish page
if (endpoint === 'personality.html'){
forward = 'finished.html',
backward = 'eating.html'
};

// Eating page to finish page
if (endpoint === 'finished.html'){
forward = '',
backward = 'eating.html'
};

if(direction === "swipeleft" && event.target.tagName !== 'IMG'){
window.location.href = forward;
}

if(direction === "swiperight" && event.target.tagName !== 'IMG'){
window.location.href = backward;
}
}

// The if statement stops the carousel from triggering the page swipe
Hammer(document.body).on("swipeleft", function(){ swipe("swipeleft") });
Hammer(document.body).on("swiperight", function(){ swipe("swiperight") });

0 comments on commit fad49b8

Please sign in to comment.