Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding images, change copy

Browse Source
This commit is contained in:
AnitaYCheng
2015-02-10 14:10:59 -08:00
parent 6b2340c042
commit aed8c6f60c
3 changed files with 88 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home.html
+61 -18
View File
@@ -60,7 +60,7 @@
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-pills navbar-right">
<li><a href="/howitworks">How it works</a></li>
<li><a href="/enterprise">For business</a></li>
<li><a href="/enterprise">Corporate plans</a></li>
<li><a href="/about">About us</a></li>
<li><a href="http://blog.habitrpg.com/">Blog</a></li>
<li><a href="/contact">Contact us</a></li>
@@ -80,7 +80,7 @@
<img class="text-center" src="images/intro.jpg" /><!--insert intro images-->
<div class="introcall">
<h3>Join 150,000 players making it fun to get things done!
<small><button class="btn btn-primary gamifybutton">Gamify your life, for free</button></small>
<small><button class="btn btn-primary gamifybutton">Improve your habits today, for free!</button></small>
</h3>
</div>
<div class="presslogos">
@@ -102,7 +102,7 @@
<section id="rewards">
<h2 class="headline">Get gold to buy stuff</h2>
<h2 class="headline">Earn gold for rewards</h2>
<div class="avatarscroll">
<h2><span class="glyphicon glyphicon-check"></span></h2>
<img src="images/misc/shop_gold.png" /><img src="images/misc/shop_gold.png" /><img src="images/misc/shop_gold.png" /><br/>
@@ -117,9 +117,7 @@
<!--3rd level equipment fades in on avatar, gets affixed until more equipment presented in Features area-->
<p class="sectioninfo">
Every time you check something of your lists, you receive gold you can redeem for virtual rewards!
</p>
<p class="sectioninfo">Every time you check off a task, you earn gold to spend on virtual and real-life rewards, motivating you to beat bad habits and avoid procrastination!</p>
<div class="container-fluid">
<div class="row">
@@ -142,15 +140,48 @@
</div>
</section>
<section id="levels">
<h2 class="headline">Complete your tasks to unlock new content!
</h2>
<div class="avatarscroll">
<img src="images/Healer.png" />
<img src="images/Rogue.png" />
<img src="images/Wizard.png" />
<img src="images/Warrior.png" />
</div>
<!--Dragon pet and class costumes come in from sides-->
<p class="sectioninfo">As you level up, you can choose to reward your particular play style according to what you're motivated by: collecting pets, casting spells for fellow party members, or doing a whole lot of damage against the boss!</p>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-md-offset-7">
<div class="scrolltweet tweet popover right">
<div class="arrow"></div>
<div class="popover-content"><a href="https://twitter.com/NatJeanMiller/status/505598740242001920">I'm level 30 and riding a dragon #winning</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="scrolltweet tweet popover left">
<div class="arrow"></div>
<div class="popover-content"><a href-"https://twitter.com/ClaireThalken/status/466631598847574017">Woot! I reached level ten on HabitRPG and switched my class from warrior to rogue. Now I get to hold TWO weapons.</a></div>
</div>
</div>
</div>
</div>
</section>
<section id="health">
<h2 class="headline">Miss a daily to-do?</h2>
<h2 class="headline">Miss a daily goal?</h2>
<!--Progress bar appears next to avatar, decreases on scroll. Probably will require SVG animation-->
<h2>Lose health!</h2>
<p class="sectioninfo">
If you lose too much health, your character dies and you lose all your gold
</p>
<p class="sectioninfo">The immediate consequences help break bad habits and procrastination cycles before they cause real-world problems.</p>
<div class="container-fluid">
<div class="row">
@@ -174,12 +205,12 @@
</section>
<section id="quest">
<h2 class="headline">Fighting a boss with a group?</h2>
<h2 class="headline">Battle monsters with your friends!</h2>
<!--Boss image background, with other avatars present. Their progress bars decrease on scroll. The one on the bottom right corner could die, haha-->
<h2>Make all your friends sad!</h2>
<p class="sectioninfo">If you are playing in a Quest, every daily to-do you miss hits your friends' health too!</p>
<h2>If you slack off, they all get hurt!</h2>
<p class="sectioninfo">Playing with your friends keeps you accountable for your tasks. Issue each other Challenges to complete a goal together!</p>
<div class="container-fluid">
<div class="row">
@@ -217,7 +248,7 @@
<li data-target="#myCarousel" data-slide-to="4"><a href="#">Work</a></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-inner" style="z-index:0;">
<div class="item active health-use">
<h3>Health</h3>
<div class="carousel-content">
@@ -388,7 +419,19 @@
<div class="col-md-4 col-md-offset-7">
<div class="featuretext">
<h4>Pets and Mounts</h4>
<p>Text about pets and mounts and how fun they are. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere elit ac ex sagittis euismod. </p>
<p>With every item you check off, there's a chance that you can receive a pet and other gifts!</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<!--Achievemnt badge fade-in-->
<div class="col-md-4 col-md-offset-7">
<div class="featuretext">
<h4>Achievement Badges</h4>
<p>Do something totally awesome? Get a badge and show it off!</p>
</div>
</div>
</div>
@@ -401,7 +444,7 @@
<div class="col-md-4 col-md-offset-7">
<div class="featuretext">
<h4>Equipment and extras</h4>
<p>Text about equipment and extras and how fun they are. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere elit ac ex sagittis euismod. </p>
<p>Buy limited edition equipment, potions, and other virtual goodies in our Market with your task rewards!</p>
</div>
</div>
</div>
@@ -413,7 +456,7 @@
<div class="col-md-4 col-md-offset-7">
<div class="featuretext">
<h4>Social play</h4>
<p>Text about parties and guildes and challenges and how fun they are. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere elit ac ex sagittis euismod. </p>
<p>Join common-interest groups with like-minded people to gain inspiration and cheer each other on! Plus, you can join and create Challenges to compete against others and improve everything from health to productivity.</p>
</div>
</div>
</div>
@@ -463,7 +506,7 @@
<div id="footercall">
<h3>Join 150,000 players making it fun to get things done!
<small><button class="btn btn-primary gamifybutton">Gamify your life, for free</button></small>
<small><button class="btn btn-primary gamifybutton">Improve your habits today, for free!</button></small>
</h3>
</div>
images/Warrior.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

style.css
+27 -10
View File
@@ -11,6 +11,11 @@
section {
height:100vh;
padding:30px 0;
}
section#intro {
padding:0;
}
h1, h2, h3, h4, p.sectioninfo {
@@ -21,6 +26,16 @@ h1, h2, h3, h4, p.sectioninfo {
text-align:left;
}
#levels, #quest, #features {
background-color: #eee;
}
p.sectioninfo {
display:block;
width:500px;
margin:0 auto;
}
#uses .btn-toolbar {
text-align: center;
}
@@ -46,6 +61,7 @@ h1, h2, h3, h4, p.sectioninfo {
img#myAvatar {
margin-left:50%;
left:-75px;
z-index:1;
}
img#myAvatar.affix-top {
@@ -103,6 +119,7 @@ button.gamifybutton {
.avatarscroll .scroll-armor {
margin-left:50%;
left:-75px;
z-index:2;
}
.avatarscroll .scroll-armor.affix-top {
@@ -118,7 +135,7 @@ button.gamifybutton {
.avatarscroll .scroll-armor.affix {
top: 280px;
left:0;
left:0px;
}
.avatarscroll .scroll-armor img.armor {
@@ -152,33 +169,34 @@ button.gamifybutton {
.carousel-content {
width:100%;
height:500px;
height:400px;
min-width:100%;
min-height:500px;
min-height:400px;
max-width:100%;
max-height:500px;
max-height:400px;
overflow:hidden;
display:block;
}
.health-use .carousel-content {
background:#ffffff url("images/uses/meditation-bkgd.png") no-repeat fixed center;
background:#ffffff url("images/uses/meditation-bkgd.png") no-repeat center center fixed;
}
.housework-use .carousel-content {
background:#ffffff url("images/uses/dusting-bkgd.png") no-repeat fixed center;
background:#ffffff url("images/uses/dusting-bkgd.png") no-repeat center center fixed;
}
.improvement-use .carousel-content {
background:#ffffff url("images/uses/achievement-bkgd.png") no-repeat fixed center;
background:#ffffff url("images/uses/achievement-bkgd.png") no-repeat center center fixed;
}
.school-use .carousel-content {
background:#ffffff url("images/uses/reading.png") no-repeat fixed center;
background:#ffffff url("images/uses/reading.png") no-repeat center center fixed;
}
.work-use .carousel-content {
background:#ffffff url("images/uses/coding.png") no-repeat fixed center;
background:#ffffff url("images/uses/coding.png") no-repeat center center fixed;
}
.sampletasks {
@@ -210,4 +228,3 @@ button.gamifybutton {
background-color:#eee;
padding:20px 0;
}