2015-04-02 17:32:49 +00:00
doctype html
html(ng-app='habitrpg', ng-controller='RootCtrl')
head
meta(charset='utf-8')
link(href='http://fonts.googleapis.com/css?family=Lato:400,700', rel='stylesheet', type='text/css')
title HabitRPG | Gamify Your Life
meta(name='description', content='')
meta(name='keywords', content='')
meta(name='author', content='')
meta(name='geo.placename', content='')
//if IE
meta(http-equiv='imagetoolbar', content='no')
meta(name='viewport', content='width=device-width, maximum-scale=1')
meta(property='og:title', content='')
meta(property='og:description', content='')
meta(property='og:url', content='')
meta(property='og:image', content='')
meta(property='og:site_name', content='')
link(rel='canonical', href='', type='text/html')
//-link(rel='sitemap', type='application/xml', title='Sitemap', href='/sitemap.xml')
link(rel='shortcut icon', href='/images/favicon-8b58f6a1.ico')
//if lt IE 9
script(src='//html5shim.googlecode.com/svn/trunk/html5.js')
2013-09-01 16:56:43 +00:00
2015-04-03 18:42:03 +00:00
link(rel='stylesheet', type='text/css', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css')
2015-04-02 17:32:49 +00:00
script(type='text/javascript').
window.env = !{JSON.stringify(env)};
!= env.getManifestFiles("tmp_static_front")
2013-09-01 16:56:43 +00:00
2015-04-03 18:42:03 +00:00
script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js')
script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js')
script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js')
2015-04-02 17:32:49 +00:00
body(ng-controller='AuthCtrl')
include ./login-modal
.mobile-container
header#header
nav.navbar.navbar-default.navbar-static-top
.container-fluid
// Brand and toggle get grouped for better mobile display
.navbar-header
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#')
2015-04-03 18:42:03 +00:00
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/icon175x175.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/habitrpg_pixel.png')
2015-04-02 17:32:49 +00:00
// Collect the nav links, forms, and other content for toggling
#bs-example-navbar-collapse-1.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
li
2015-04-02 23:41:38 +00:00
a(href='/static/features')=env.t('companyAbout')
2015-04-02 17:32:49 +00:00
li
2015-04-02 23:41:38 +00:00
a(href='/static/plans')=env.t('groupPlans')
2015-04-02 17:32:49 +00:00
li
2015-04-02 23:41:38 +00:00
a(href='http://blog.habitrpg.com/')=env.t('companyBlog')
2015-04-02 17:32:49 +00:00
li
2015-04-02 23:41:38 +00:00
a(href='/static/press-kit')=env.t('presskit')
2015-04-02 17:32:49 +00:00
li
2015-04-02 23:41:38 +00:00
a(href='/static/contact')=env.t('contactUs')
2015-04-02 17:32:49 +00:00
li
button#header-play-button.btn.btn-primary.navbar-btn.navbar-right(ng-click='playButtonClick()') Play HabitRPG
#intro
h1 Motivate yourself and your team!
2015-04-04 01:47:04 +00:00
img.center-block.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/intro.png')
2015-04-02 17:32:49 +00:00
// insert intro images
.introcall.bg-success
h4
| Join 200,000 players making it fun to achieve goals!
small
button.btn.btn-primary.btn-lg.gamifybutton(ng-click='playButtonClick()') Play for free
.presslogos.text-center
| Featured in
br
2015-04-03 18:42:03 +00:00
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/lifehacker.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/nyt-logo.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/makeuseof.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/Forbes_logo.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/Cnetlogo.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/Fast-Company-logo.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/kickstarter-logo.png')
2015-04-02 17:32:49 +00:00
#intro-text
.container-fluid
.row
.col-md-8.col-md-offset-2
p.lead.text-center
| HabitRPG is a free habit building and productivity app that treats your real life like a game. With in-game rewards and punishments to motivate you and a strong social network to inspire you, HabitRPG can help you achieve your goals to become healthy, hard-working, and happy.
section#testimonial-carousel.bg-info
.container-fluid
.row
.col-md-3.col-md-offset-1
h2 What people say...
2015-04-03 18:42:03 +00:00
img.img-say.img-responsive.visible-lg-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/publicSpaces.png')
2015-04-02 17:32:49 +00:00
// Testimonials
.col-md-8.col-sm-10.col-sx-10
#quote-carousel.carousel.slide(data-interval='4000', data-ride='carousel')
// Bottom Carousel Indicators
ol.carousel-indicators
li.active(data-target='#quote-carousel', data-slide-to='0')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/Drag0nsilver.png', alt='')
2015-04-02 17:32:49 +00:00
li(data-target='#quote-carousel', data-slide-to='1')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/frabjabulous.png', alt='')
2015-04-02 17:32:49 +00:00
li(data-target='#quote-carousel', data-slide-to='2')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/AndeeLiao.png', alt='')
2015-04-02 17:32:49 +00:00
li(data-target='#quote-carousel', data-slide-to='3')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/AlexandraSo.png', alt='')
2015-04-02 17:32:49 +00:00
// Carousel Slides / Quotes
.carousel-inner.text-center
// Quote 1
.item.active
blockquote
.row
.col-sm-8.col-sm-offset-2
p
| I can't tell you how many time and task tracking systems I've tried over the decades... HRPG is the only thing I've used that actually helps me get things done rather than just list them.
small Drag0nsilver
// Quote 2
.item
blockquote
.row
.col-sm-8.col-sm-offset-2
p
| HabitRPG is the reason I got a killer, high-paying job... and even more miraculous, I'm now a daily flosser!
small frabjabulous
// Quote 3
.item
blockquote
.row
.col-sm-8.col-sm-offset-2
p
| Awesome product, just started a few days ago and already more conscious and productive with my time!
small AndeeLiao
.item
blockquote
.row
.col-sm-8.col-sm-offset-2
p
| Couldn't NOT talk about HabitRPG during my speech in Madrid. Must-have tool for freelancers who still need a boss.
small _AlexandraSo_
// Carousel Buttons Next/Prev
a.left.carousel-control(data-slide='prev', href='#quote-carousel')
i.fa.fa-chevron-left
a.right.carousel-control(data-slide='next', href='#quote-carousel')
i.fa.fa-chevron-right
button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(ng-click='playButtonClick()') Gamify your life today!
section#uses
h2 Players use HabitRPG to manage...
.container-fluid
#myCarousel.carousel.slide(data-interval='4000', data-ride='carousel')
ul.nav.nav-pills.nav-justified
li.active(data-target='#myCarousel', data-slide-to='0')
a(href='#') Work
li(data-target='#myCarousel', data-slide-to='1')
a(href='#') Health
li(data-target='#myCarousel', data-slide-to='2')
a(href='#') Teams
li(data-target='#myCarousel', data-slide-to='3')
a(href='#') School
li(data-target='#myCarousel', data-slide-to='4')
a(href='#') Goals
li(data-target='#myCarousel', data-slide-to='5')
a(href='#') Chores
// Wrapper for slides
.carousel-inner(style='z-index:0;')
.item.active.work-use
h3
| Work
br
small
a(href='/business.html') Use HabitRPG at your business
.carousel-content.row
.sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
h4 Sample Habits
div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Confirm 1 page of Inventory
br
div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') 20 mins Filing
br
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Sort and Process Inbox
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Prepare 1 Document for Client
br
div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Call Clients/Put Off Phone Calls
2015-04-03 18:42:03 +00:00
img.sample-img.visible-lg-inline-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/coding.png')
2015-04-02 17:32:49 +00:00
.usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='frabjabulous', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/frabjabulous.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| HabitRPG is the reason I got a killer, high-paying job... and even more miraculous, I'm now a daily flosser
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='_AlexandraSo_', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/AlexandraSo.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| Couldn't NOT talk about HabitRPG during my speech in Madrid. Must-have tool for freelancers who still need a boss.
// End item
.item.health-use
h3 Health
.carousel-content.row
.sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
h4 Sample Habits
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Drink Water/Soda
br
div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Chew Gum/Smoke
br
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Take Stairs/Elevator
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(255, 207, 66); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Eat Healthy/Junk Food
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Break a Sweat for 1 hr
2015-04-03 18:42:03 +00:00
img.sample-img.visible-lg-inline-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/clipart-rosemonkeyct-meditation.png')
2015-04-02 17:32:49 +00:00
.usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='EvaGantz', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/EvaGantz.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| My very first dentist appointment where the hygienist was actually excited about my flossing habits. Thanks Habitrpg!
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='supermouse35', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/supermouse35.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| I'm exercising more and I haven't forgotten to take my meds for months! Thanks, Habit. :D
// End Item
.item.team-use
h3 Teams
.carousel-content.row
.sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
h4 Sample To-Dos
div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
span(style='padding: 0.5em 0px 0em 0em; color: #666;') ☐
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Outline Meeting Itinerary for Tuesday
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
span(style='padding: 0.5em 0px 0em 0em; color: #666;') ☐
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Brainstorm Growth Hacking
br
div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
span(style='padding: 0.5em 0px 0em 0em; color: #666;') ☐
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Discuss this week’s KPIs
br
2015-04-03 18:42:03 +00:00
img.sample-img.visible-lg-inline-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/publicSpaces.png')
2015-04-02 17:32:49 +00:00
.usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='Althaire', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/Althaire.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| Having a quest constantly on really motivates me to do all my dailies and do all my to-dos. My biggest motivation is not letting my party down.
// End Item
.item.school-use
h3 School
.carousel-content.row
.sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
h4 Sample Habits
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Finish 1 Assignment
br
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Study 1 hour
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Meet with Study Group
br
div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Notes for 1 Chapter
br
div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(90, 98, 223); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Read 1 Chapter
2015-04-03 18:42:03 +00:00
img.sample-img.visible-lg-inline-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/reading.png')
2015-04-02 17:32:49 +00:00
.usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='InfH', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/InfH.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content HabitRPG has really helped me impart structure to my life in graduate school.
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='Drei-M', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/Drei-M.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| When I discovered HabitRPG last summer, I had just failed about half of my exams. Thanks to the Dailies… I was able to organize and discipline myself, and I actually passed all my exams with really good grades a month ago.
// End Item
.item.improvement-use
h3 Goals
.carousel-content.row
.sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
h4 Sample Dailies
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Practice Piano for 1 Hour
br
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Work on article for publication
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Work on blog post
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Japanese lesson on Duolingo
br
div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Read an Informative Article
2015-04-03 18:42:03 +00:00
img.sample-img.visible-lg-inline-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/gaining_an_achievement_by_cosmic_caterpillar-d7uyv5z.png')
2015-04-02 17:32:49 +00:00
.usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='Kazui', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/Kazui.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| Before HabitRPG, I was stuck with my thesis, as well as dissatisfied with my personal discipline regarding housework and things like learning vocabulary and studying Go theory. It turns out breaking down these tasks into smaller manageable checklists is quite the thing to keep me motivated and constantly working
// End Item
.item.housework-use
h3 Chores
.carousel-content.row
.sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
h4 Sample Dailies
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Put Dirty Clothes in Hamper
br
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') 20 mins of Housework
br
div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Wash a Load of Dishes
br
div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Tidy One Room
br
div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
.task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
|
.task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') Wash and Dry a Load of Clothes
2015-04-03 18:42:03 +00:00
img.sample-img.visible-lg-inline-block(src='https://s3.amazonaws.com/habitrpg-assets/front/images/uses/dusting_by_leephon.png')
2015-04-02 17:32:49 +00:00
.usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='autumnesquirrel', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/autumnesquirrel.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content I'm procrastinating less on work and housework and pay bills on time.
.usetweet-group
2015-04-03 18:42:03 +00:00
img(data-toggle='tooltip', data-placement='top', title='irishfeet123', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/irishfeet123.png')
2015-04-02 17:32:49 +00:00
.usetweet.tweet.popover.right
.arrow
.popover-content
| I've had horrible habits with clearing my place completely after meals and leaving cups all over the place. HabitRPG has cured that!
// End Item
// End Carousel
button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(ng-click='playButtonClick()') Gamify your life today!
section#rewards.bg-warning.container-fluid
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
h2.headline Complete a task to earn gold!
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12.col-xs-12
p.sectioninfo
| Spend gold on virtual and real-life rewards.
br
br
| Instant rewards keep you motivated!
.scrolltweet.hidden-xs.hidden-sm
2015-04-03 18:42:03 +00:00
img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Elmi', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/Elmi.png')
2015-04-02 17:32:49 +00:00
.tweet.popover.right.pull-right
.arrow
.popover-content Every morning I'm looking forward to getting up so I can earn some gold!
.col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2.well-lg
.avatarscroll
h2
span.glyphicon.glyphicon-check
h2
span.glyphicon.glyphicon-arrow-down
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/misc/shop_gold.png')
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/misc/shop_gold.png')
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/misc/shop_gold.png')
2015-04-02 17:32:49 +00:00
h2
span.glyphicon.glyphicon-arrow-down
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/TVreward.png')
2015-04-02 17:32:49 +00:00
button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') Gamify your life today!
section#levels.container-fluid
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
h2.headline As you stay productive, you unlock new content!
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
p.sectioninfo
| Achieve your goals and level up.
br
br
| Unlock new motivational tools, such as pet collecting, random rewards, spell-casting, and more!
.scrolltweet.hidden-xs.hidden-sm
2015-04-03 18:42:03 +00:00
img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='16bitFil', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/16bitFil.png')
2015-04-02 17:32:49 +00:00
.tweet.popover.right.pull-right
.arrow
.popover-content
| I'm getting my jobs and tasks done in record time thanks to HabitRPG. I'm just always so eager to reach my next level-up!
.col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2
.avatarscroll
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/avatar/avatarstatic.png')
2015-04-02 17:32:49 +00:00
h2
span.glyphicon.glyphicon-arrow-down
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/SAMPLEadventurers.png')
2015-04-02 17:32:49 +00:00
button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') Gamify your life today!
section#health.bg-danger.container-fluid
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
h2.headline Miss a daily goal?
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
h2 Lose health!
p.sectioninfo Break bad habits and procrastination cycles with immediate consequences.
.scrolltweet.hidden-xs.hidden-sm
2015-04-03 18:42:03 +00:00
img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Zelah Meyer', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/Zelah_Meyer.png')
2015-04-02 17:32:49 +00:00
.tweet.popover.right.pull-right
.arrow
.popover-content
| With HabitRPG, I can be persuaded to go to bed on time by the thought of gaining points for an early night or losing health for a late one!
.col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2.well-lg
h2
span.glyphicon.glyphicon-unchecked
.health-progress
.meter-label(tooltip='Health')
span.glyphicon.glyphicon-heart
.meter.health
.bar
div(style='width:100%;')
h2
span.glyphicon.glyphicon-arrow-down
.health-progress
.meter-label(tooltip='Health')
span.glyphicon.glyphicon-heart
.meter.health
.bar
div(style='width:50%;')
button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') Gamify your life today!
section#quest.container-fluid
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
h2.headline Battle monsters with your friends!
.row
.col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
h2 If you slack off, they all get hurt!
p.sectioninfo
| Playing with your friends keeps you accountable for your tasks.
br
| Issue each other Challenges to complete a goal together!
.scrolltweet.hidden-xs.hidden-sm
2015-04-03 18:42:03 +00:00
img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='skysailor', src='https://s3.amazonaws.com/habitrpg-assets/front/images/testimonials/skysailor.png')
2015-04-02 17:32:49 +00:00
.tweet.popover.right.pull-right
.arrow
.popover-content
| My party and our quests keep me engaged in the game, which keeps me motivated to get things done and change my life in positive ways
.col-lg-4.col-md-6.col-md-offset-1.col-lg-offset-1.col-sm-10.well.col-xs-10.col-xs-offset-1.col-sm-offset-1.well-lg
2015-04-03 18:42:03 +00:00
img.clearfix.img-responsive.center-block(style='padding-bottom:30px;', src="https://s3.amazonaws.com/habitrpg-assets/front/images/Quest_dilatory_drag'onSmall.png")
2015-04-02 17:32:49 +00:00
.row
.col-lg-5.col-md-5.col-sm-5.col-sm-offset-0.col-xs-5.col-xs-offset-0
.health-progress
.meter-label(tooltip='Health')
span.glyphicon.glyphicon-heart
.meter.health
.bar
div(style='width:20%;')
.quest-friend-img
2015-04-03 18:42:03 +00:00
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/party/AnnaCosplay.png')
2015-04-02 17:32:49 +00:00
.col-md-1.col-sm-1.col-xs-1
h2
span.glyphicon.glyphicon-arrow-right
.col-lg-5.col-md-offset-1.col-md-5.col-sm-5.col-sm-offset-0.col-xs-5.col-xs-offset-0
.health-progress
.meter-label(tooltip='Health')
span.glyphicon.glyphicon-heart
.meter.health
.bar
div(style='width:0%;')
.quest-friend-img
2015-04-03 18:42:03 +00:00
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/party/GrimReaper.png')
2015-04-02 17:32:49 +00:00
button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') Gamify your life today!
section#features.bg-info.container-fluid
.row
h2 We also feature...
.row
.col-md-4.col-md-offset-2.col-sm-6
.feature-img
2015-04-03 18:42:03 +00:00
img.center-block.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/Mount.png')
2015-04-02 17:32:49 +00:00
.featuretext
h4 Pets and Mounts
p
| Eggs and items drop when you complete your tasks. Be as productive as possible to collect pets and mounts!
.col-md-4.col-sm-6
.feature-img.center-block
2015-04-03 18:42:03 +00:00
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/achievement-triadbingo.png')
img(src='https://s3.amazonaws.com/habitrpg-assets/front/images/achievement-perfect.png')
2015-04-02 17:32:49 +00:00
.featuretext
h4 Achievement Badges
p Do something totally awesome? Get a badge and show it off!
.row
.col-md-4.col-md-offset-2.col-sm-6
.feature-img
2015-04-03 18:42:03 +00:00
img.center-block.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/Promo_springclasses2015.png')
2015-04-02 17:32:49 +00:00
.featuretext
h4 Equipment and extras
p
| Buy limited edition equipment, potions, and other virtual goodies in our Market with your task rewards!
.col-md-4.col-sm-6
.feature-img
2015-04-03 18:42:03 +00:00
img.center-block.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/Party-Header.png')
2015-04-02 17:32:49 +00:00
.featuretext
h4 Social play
p
| Join common-interest groups with like-minded people. Create Challenges to compete against other users.
button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') Gamify your life today!
#footercall
.container-fluid
.row
.col-md-10
h3 Join 200,000 players making it fun to achieve goals!
.row
.col-md-4.col-md-offset-4
button.btn.btn-primary.btn-lg.btn-block(ng-click='playButtonClick()') Play for free!
footer.footer
.container-fluid.shoutout
2015-04-04 18:03:57 +00:00
h4 HabitRPG contributors use
2015-04-02 17:32:49 +00:00
.row
.col-lg-2.col-md-2.col-md-offset-1.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
a(href='http://ionicframework.com/')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/ionic-logo-horizontal-transparent.png')
2015-04-02 17:32:49 +00:00
.col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
a(href='https://www.jetbrains.com/webstorm/')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/logo_webstorm.png')
2015-04-02 17:32:49 +00:00
.col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
a(href='http://github.com/')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/GitHub_Logo.png')
2015-04-02 17:32:49 +00:00
.col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
a(href='https://trello.com/')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/trello-logo-blue.png')
2015-04-02 17:32:49 +00:00
.col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
a(href='https://slack.com/')
2015-04-03 18:42:03 +00:00
img.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/presslogos/landing_slack_hash_wordmark_logo.png')
2015-04-02 23:22:36 +00:00
2015-04-02 17:32:49 +00:00
.row.footer-content
2015-04-02 23:22:36 +00:00
include ../shared/footer
2015-04-02 17:32:49 +00:00
// Footer scripts
// Use carousel initialize
script(type='text/javascript').
$(document).ready( function() {
2015-04-03 18:48:36 +00:00
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('#myCarousel .nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('#myCarousel .nav').children().length -1;
var current = $('#myCarousel .nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('#myCarousel .nav li').first().addClass('active');
}
}
clickEvent = false;
});
2015-04-02 17:32:49 +00:00
});
// Tooltips
script(type='text/javascript').
$(function () {
2015-04-03 18:48:36 +00:00
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
2015-04-02 17:32:49 +00:00
})
// Hack fix for carousel (http://stackoverflow.com/a/22182184/362790)
script.
angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
.controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
}]).directive('carousel', [function () {
return {}
}]);
