mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-18 01:42:20 +00:00
feat(homepage): start cleaning up homepage, add navbar for play button & upcoming links
This commit is contained in:
Tyler Renelle
parent
2e18f0eb82
commit
0ddaae4d75
8 changed files with 179 additions and 140 deletions
|
|
@ -75,20 +75,9 @@ code {
|
|||
align: left !important;
|
||||
}
|
||||
|
||||
.static-footer
|
||||
position:fixed
|
||||
left:0px
|
||||
bottom:10px
|
||||
height:60px
|
||||
width:100%
|
||||
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
|
||||
.btn
|
||||
box-shadow: 0 0 75px #494141;
|
||||
display:inline
|
||||
font-size: 40px
|
||||
width:150px
|
||||
height:50px
|
||||
margin: 0 auto
|
||||
.frontpage-play-button
|
||||
box-shadow: 0 0 40px #494141;
|
||||
display:inline
|
||||
font-size: 20px
|
||||
width:100px
|
||||
height:50px
|
||||
|
|
@ -35,26 +35,22 @@ router.get('/static/api', middleware.locals, function(req, res) {
|
|||
res.render('static/api', {env: res.locals.habitrpg});
|
||||
});
|
||||
|
||||
router.get('/static/about', middleware.locals, function(req, res) {
|
||||
res.render('static/about', {env: res.locals.habitrpg});
|
||||
});
|
||||
|
||||
router.get('/static/contact', middleware.locals, function(req, res) {
|
||||
res.render('static/contact', {env: res.locals.habitrpg});
|
||||
});
|
||||
|
||||
router.get('/static/pricing', middleware.locals, function(req, res) {
|
||||
res.render('static/pricing', {env: res.locals.habitrpg});
|
||||
});
|
||||
|
||||
// --------- Redirects --------
|
||||
|
||||
router.get('/splash.html', function(req, res) {
|
||||
res.redirect('/static/front');
|
||||
});
|
||||
|
||||
router.get('/static/about', function(req, res) {
|
||||
res.redirect('http://community.habitrpg.com/node/97');
|
||||
});
|
||||
|
||||
router.get('/static/team', function(req, res) {
|
||||
res.redirect('http://community.habitrpg.com/node/96');
|
||||
});
|
||||
|
||||
router.get('/static/extensions', function(req, res) {
|
||||
res.redirect('http://community.habitrpg.com/extensions');
|
||||
});
|
||||
|
||||
router.get('/static/faq', function(req, res) {
|
||||
res.redirect('http://community.habitrpg.com/faq-page');
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
20
views/static/about.jade
Normal file
20
views/static/about.jade
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
extends ./layout
|
||||
|
||||
block vars
|
||||
- var layoutEnv = env
|
||||
- var menuItem = 'about'
|
||||
|
||||
block title
|
||||
title About
|
||||
|
||||
block content
|
||||
.container
|
||||
p(style='height:600;')
|
||||
iframe(src='//player.vimeo.com/video/76557040', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
|
||||
p=env.t('landingp1')
|
||||
h2=env.t('landingp2header')
|
||||
p=env.t('landingp2')
|
||||
h2=env.t('landingp3header')
|
||||
p=env.t('landingp3')
|
||||
h2=env.t('landingp4header')
|
||||
p=env.t('landingp4')
|
||||
12
views/static/contact.jade
Normal file
12
views/static/contact.jade
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
extends ./layout
|
||||
block vars
|
||||
- var layoutEnv = env
|
||||
- var menuItem = 'contact'
|
||||
block title
|
||||
title Contact
|
||||
block content
|
||||
// Probably just add linkks to the respective contact locations?
|
||||
// Bugs? Github
|
||||
// Feature requests? Trello
|
||||
// Enterprise? Click the "pricing" tab
|
||||
/// etc
|
||||
|
|
@ -2,114 +2,42 @@ extends ./layout
|
|||
//Trick needed to pass 'env' to ./layout
|
||||
block vars
|
||||
- var layoutEnv = env
|
||||
- var menuItem = 'home'
|
||||
|
||||
block title
|
||||
title=env.t('titleFront')
|
||||
|
||||
block content
|
||||
div(ng-app='habitrpgStatic',ng-controller='AuthCtrl')
|
||||
#wrap
|
||||
//-include ./header
|
||||
.container
|
||||
.marketing
|
||||
//we need to use something that's not jumbotron for this, but still keep it centered
|
||||
//could someone write something else to make it pretty?
|
||||
img(src='/bower_components/habitrpg-shared/img/logo/habitrpg_pixel.png', alt='HabitRPG logo')
|
||||
//this image needs to be replaced by something more enticing, that shows off the features of hRPG
|
||||
//while acting similarly to a logo
|
||||
h1=env.t('tagline')
|
||||
//we'd want the tagline centered, for sure, and a bit more pop, but without using jumbotron
|
||||
//it could also be part of the image, as long as the alt text included it
|
||||
//in fact, I think I really want it on the image, rather than as text, but language issues
|
||||
br
|
||||
p=env.t('landingp1')
|
||||
h2=env.t('landingp2header')
|
||||
//images in these parts could be useful, too
|
||||
//if there's a language workaround, image headers? people like pictures!
|
||||
p=env.t('landingp2')
|
||||
h2=env.t('landingp3header')
|
||||
//I'm not sold on "Consquences as the title here. Anyone got a better idea?
|
||||
p=env.t('landingp3')
|
||||
h2=env.t('landingp4header')
|
||||
p=env.t('landingp4')
|
||||
//- TODO
|
||||
h2=env.t('landingend')
|
||||
p
|
||||
=env.t('landingend2')
|
||||
a(href="FEATURESPAGEHERE")=env.t('landingfeatureslink')
|
||||
=env.t('landingend3')
|
||||
a(href="ENTERPRISEPAGEHERE")=env.t('landingadminlink')
|
||||
=env.t('landingend4')
|
||||
//play button needs to be moved into a footer and be size fixed, due to no jumbotron
|
||||
.static-footer
|
||||
a.btn.btn-primary.btn-large(ng-click='playButtonClick()')=env.t('playButton')
|
||||
|
||||
.modal.fade#login-modal(style='display:none')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.modal-header
|
||||
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
|
||||
h4.modal-title=env.t('loginAndReg')
|
||||
.modal-body
|
||||
a(href='/auth/facebook')
|
||||
img(src='/bower_components/habitrpg-shared/img/facebook-login-register.jpeg', alt=env.t('loginFacebookAlt'))
|
||||
//can we add in google auth? I like google auth
|
||||
h3 Or
|
||||
ul.nav.nav-tabs
|
||||
li.active
|
||||
a(data-toggle='tab',data-target='#login-tab')=env.t('login')
|
||||
li
|
||||
a(data-toggle='tab',data-target='#register-tab')=env.t('register')
|
||||
|
||||
.tab-content
|
||||
.tab-pane.active#login-tab
|
||||
form(ng-submit='auth()', method='POST')
|
||||
.control-group
|
||||
input(type='text', ng-model='loginUsername', placeholder=env.t('username'), name='username')
|
||||
.control-group
|
||||
input(type='password', ng-model='loginPassword', placeholder=env.t('password'), name='password')
|
||||
//-.control-group
|
||||
label.checkbox
|
||||
input(type='checkbox', ng-click='useUUID = !useUUID')
|
||||
=env.t('useUUID')
|
||||
.control-group
|
||||
input.btn.btn-primary(type='submit', value=env.t('login'))
|
||||
|
||||
small=env.t('passMan')
|
||||
|
||||
// good god accordions have html ceremony
|
||||
#forgot-password-accordion.accordion
|
||||
.accordion-group
|
||||
.accordion-heading
|
||||
a.accordion-toggle(data-toggle='collapse', data-parent='#forgot-password-accordion', href='#forgot-password-group')=env.t('forgotPass')
|
||||
#forgot-password-group.accordion-body.collapse
|
||||
.accordion-inner
|
||||
form#derby-auth-password-reset(ng-submit='passwordReset(passwordResetEmail)')
|
||||
h3=env.t('emailNewPass')
|
||||
//.alert.alert-success {.success.passwordReset}
|
||||
//.control-group.{#if..errors.passwordReset}error{/}
|
||||
.control-group
|
||||
input(type='text', name='email', placeholder=env.t('email') , ng-model='passwordResetEmail')
|
||||
//span.help-inline {.errors.passwordReset}
|
||||
input.btn(type='submit', value=env.t('submit'))
|
||||
|
||||
|
||||
|
||||
|
||||
.tab-pane#register-tab
|
||||
form(ng-submit='register()', name='registrationForm')
|
||||
.control-group
|
||||
input(type='text', ng-model='registerVals.username', placeholder=env.t('username'), required)
|
||||
.control-group
|
||||
input(type='email', ng-model='registerVals.email', placeholder=env.t('email'), required)
|
||||
.control-group
|
||||
input(type='password', ng-model='registerVals.password', placeholder=env.t('password'), required)
|
||||
.control-group
|
||||
input(type='password', ng-model='registerVals.confirmPassword', placeholder=env.t('passConfirm'), required)
|
||||
.control-group
|
||||
small=env.t('accept1Terms')
|
||||
a(href='/static/terms' target='_blank')=env.t('terms')
|
||||
=env.t('accept2Terms')
|
||||
a(href='/static/privacy' target='_blank')=env.t('privacy')
|
||||
| .
|
||||
input.btn.btn-primary(type='submit', value=env.t('register'))
|
||||
#wrap
|
||||
//-include ./header
|
||||
.marketing
|
||||
//we need to use something that's not jumbotron for this, but still keep it centered
|
||||
//could someone write something else to make it pretty?
|
||||
img(src='/bower_components/habitrpg-shared/img/logo/habitrpg_pixel.png', alt='HabitRPG logo')
|
||||
//this image needs to be replaced by something more enticing, that shows off the features of hRPG
|
||||
//while acting similarly to a logo
|
||||
h1(style='margin:10px 0 20px 0')=env.t('tagline')
|
||||
p
|
||||
button.btn.btn-primary.btn-large.frontpage-play-button(ng-click='playButtonClick()')=env.t('playButton')
|
||||
//we'd want the tagline centered, for sure, and a bit more pop, but without using jumbotron
|
||||
//it could also be part of the image, as long as the alt text included it
|
||||
//in fact, I think I really want it on the image, rather than as text, but language issues
|
||||
br
|
||||
p=env.t('landingp1')
|
||||
h2=env.t('landingp2header')
|
||||
//images in these parts could be useful, too
|
||||
//if there's a language workaround, image headers? people like pictures!
|
||||
p=env.t('landingp2')
|
||||
h2=env.t('landingp3header')
|
||||
//I'm not sold on "Consquences as the title here. Anyone got a better idea?
|
||||
p=env.t('landingp3')
|
||||
h2=env.t('landingp4header')
|
||||
p=env.t('landingp4')
|
||||
//- TODO
|
||||
h2=env.t('landingend')
|
||||
p
|
||||
=env.t('landingend2')
|
||||
a(href="FEATURESPAGEHERE")=env.t('landingfeatureslink')
|
||||
=env.t('landingend3')
|
||||
a(href="ENTERPRISEPAGEHERE")=env.t('landingadminlink')
|
||||
=env.t('landingend4')
|
||||
|
|
|
|||
|
|
@ -18,6 +18,23 @@ html
|
|||
$.getScript("//s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire");
|
||||
|
||||
body
|
||||
block content
|
||||
div(ng-app='habitrpgStatic',ng-controller='AuthCtrl',style='margin-top:60px;')
|
||||
include ./login-modal
|
||||
.navbar.navbar-inverse.navbar.navbar-inverse.navbar-fixed-top
|
||||
.navbar-inner
|
||||
.container
|
||||
a.pull-right.btn.btn-primary(ng-click='playButtonClick()')=env.t('playButton')
|
||||
|
||||
ul.nav
|
||||
li(class='#{menuItem=="home" ? "active" : ""}')
|
||||
a(href='/static/front') Home
|
||||
li(class='#{menuItem=="about" ? "active" : ""}')
|
||||
a(href='/static/about') About
|
||||
//li(class='#{menuItem=="pricing" ? "active" : ""}')
|
||||
a(href='/static/pricing') Pricing
|
||||
//li(class='#{menuItem=="contact" ? "active" : ""}')
|
||||
a(href='/static/contact') Contact
|
||||
.container
|
||||
block content
|
||||
|
||||
include ../shared/footer
|
||||
69
views/static/login-modal.jade
Normal file
69
views/static/login-modal.jade
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.modal.fade#login-modal(style='display:none')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.modal-header
|
||||
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
|
||||
h4.modal-title=env.t('loginAndReg')
|
||||
.modal-body
|
||||
a(href='/auth/facebook')
|
||||
img(src='/bower_components/habitrpg-shared/img/facebook-login-register.jpeg', alt=env.t('loginFacebookAlt'))
|
||||
//can we add in google auth? I like google auth
|
||||
h3 Or
|
||||
ul.nav.nav-tabs
|
||||
li.active
|
||||
a(data-toggle='tab',data-target='#login-tab')=env.t('login')
|
||||
li
|
||||
a(data-toggle='tab',data-target='#register-tab')=env.t('register')
|
||||
|
||||
.tab-content
|
||||
.tab-pane.active#login-tab
|
||||
form(ng-submit='auth()', method='POST')
|
||||
.control-group
|
||||
input(type='text', ng-model='loginUsername', placeholder=env.t('username'), name='username')
|
||||
.control-group
|
||||
input(type='password', ng-model='loginPassword', placeholder=env.t('password'), name='password')
|
||||
//-.control-group
|
||||
label.checkbox
|
||||
input(type='checkbox', ng-click='useUUID = !useUUID')
|
||||
=env.t('useUUID')
|
||||
.control-group
|
||||
input.btn.btn-primary(type='submit', value=env.t('login'))
|
||||
|
||||
small=env.t('passMan')
|
||||
|
||||
// good god accordions have html ceremony
|
||||
#forgot-password-accordion.accordion
|
||||
.accordion-group
|
||||
.accordion-heading
|
||||
a.accordion-toggle(data-toggle='collapse', data-parent='#forgot-password-accordion', href='#forgot-password-group')=env.t('forgotPass')
|
||||
#forgot-password-group.accordion-body.collapse
|
||||
.accordion-inner
|
||||
form#derby-auth-password-reset(ng-submit='passwordReset(passwordResetEmail)')
|
||||
h3=env.t('emailNewPass')
|
||||
//.alert.alert-success {.success.passwordReset}
|
||||
//.control-group.{#if..errors.passwordReset}error{/}
|
||||
.control-group
|
||||
input(type='text', name='email', placeholder=env.t('email') , ng-model='passwordResetEmail')
|
||||
//span.help-inline {.errors.passwordReset}
|
||||
input.btn(type='submit', value=env.t('submit'))
|
||||
|
||||
|
||||
|
||||
|
||||
.tab-pane#register-tab
|
||||
form(ng-submit='register()', name='registrationForm')
|
||||
.control-group
|
||||
input(type='text', ng-model='registerVals.username', placeholder=env.t('username'), required)
|
||||
.control-group
|
||||
input(type='email', ng-model='registerVals.email', placeholder=env.t('email'), required)
|
||||
.control-group
|
||||
input(type='password', ng-model='registerVals.password', placeholder=env.t('password'), required)
|
||||
.control-group
|
||||
input(type='password', ng-model='registerVals.confirmPassword', placeholder=env.t('passConfirm'), required)
|
||||
.control-group
|
||||
small=env.t('accept1Terms')
|
||||
a(href='/static/terms' target='_blank')=env.t('terms')
|
||||
=env.t('accept2Terms')
|
||||
a(href='/static/privacy' target='_blank')=env.t('privacy')
|
||||
| .
|
||||
input.btn.btn-primary(type='submit', value=env.t('register'))
|
||||
8
views/static/pricing.jade
Normal file
8
views/static/pricing.jade
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
extends ./layout
|
||||
block vars
|
||||
- var layoutEnv = env
|
||||
- var menuItem = 'pricing'
|
||||
block title
|
||||
title Pricing
|
||||
block content
|
||||
// content here
|
||||
Loading…
Reference in a new issue