diff --git a/common/locales/en/merch.json b/common/locales/en/merch.json new file mode 100644 index 0000000000..d39bbc87b9 --- /dev/null +++ b/common/locales/en/merch.json @@ -0,0 +1,13 @@ +{ + "merch" : "Merchandise", + + "merch-teespring-summary" : "Teespring is a platform that makes it easy for anyone to create and sell high-quality products people love, with no cost or risk.", + "merch-teespring-goto" : "Get a Habitica T-shirt", + + "merch-teespring-eu-summary" : "EUROPEAN VERSION : Teespring is a platform that makes it easy for anyone to create and sell high-quality products people love, with no cost or risk.", + "merch-teespring-eu-goto" : "Get a Habitica T-shirt (EU)", + + "merch-stickermule-summary" : "Stick proud Melior wherever you (or someone else) need a reminder of both present and future accomplishments!", + "merch-stickermule-goto" : "Get Habitica stickers" + +} diff --git a/website/public/css/static.styl b/website/public/css/static.styl index 60a03024e8..7134a2b1e7 100644 --- a/website/public/css/static.styl +++ b/website/public/css/static.styl @@ -69,3 +69,33 @@ a.h2.accordion.collapsed:before color: grey content: "\e080" margin-right: 0.5em + +// Merch Page + +.merch-block + border: 1px dotted #553889 + border-radius: 6px + padding: 15px + margin-bottom: 20px + &:hover + background: #f5f5f5 + div + width 100% + text-align center + padding: 30px 0 + a img + display inline + max-width: 350px + img + display: block + max-width: 200px + .btn + width 100% + background-color: #553889 + margin-top: 20px + color: #ffffff + &:hover + color: #ffffff + background-color: #452d6e + border-color: #342253 + diff --git a/website/public/merch/stickermule-logo.png b/website/public/merch/stickermule-logo.png new file mode 100644 index 0000000000..669fa37b56 Binary files /dev/null and b/website/public/merch/stickermule-logo.png differ diff --git a/website/public/merch/stickermule-logo.svg b/website/public/merch/stickermule-logo.svg new file mode 100644 index 0000000000..b5872e92d8 --- /dev/null +++ b/website/public/merch/stickermule-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/public/merch/stickermule.png b/website/public/merch/stickermule.png new file mode 100644 index 0000000000..8ef82d7d00 Binary files /dev/null and b/website/public/merch/stickermule.png differ diff --git a/website/public/merch/teespring-eu-logo.png b/website/public/merch/teespring-eu-logo.png new file mode 100644 index 0000000000..9f8521c38e Binary files /dev/null and b/website/public/merch/teespring-eu-logo.png differ diff --git a/website/public/merch/teespring-eu.png b/website/public/merch/teespring-eu.png new file mode 100644 index 0000000000..9b07d25201 Binary files /dev/null and b/website/public/merch/teespring-eu.png differ diff --git a/website/public/merch/teespring-logo.png b/website/public/merch/teespring-logo.png new file mode 100644 index 0000000000..9f8521c38e Binary files /dev/null and b/website/public/merch/teespring-logo.png differ diff --git a/website/public/merch/teespring-logo.svg b/website/public/merch/teespring-logo.svg new file mode 100644 index 0000000000..11372d4b3a --- /dev/null +++ b/website/public/merch/teespring-logo.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + diff --git a/website/public/merch/teespring.png b/website/public/merch/teespring.png new file mode 100644 index 0000000000..5a601dd2a7 Binary files /dev/null and b/website/public/merch/teespring.png differ diff --git a/website/src/routes/pages.js b/website/src/routes/pages.js index cff75476be..25c211402d 100644 --- a/website/src/routes/pages.js +++ b/website/src/routes/pages.js @@ -18,7 +18,7 @@ router.get('/', i18n.getUserLanguage, locals, function(req, res) { // -------- Static Pages -------- -var pages = ['front', 'privacy', 'terms', 'api', 'features', 'videos', 'contact', 'plans', 'new-stuff', 'community-guidelines', 'old-news', 'press-kit', 'faq', 'overview', 'apps', 'clear-browser-data']; +var pages = ['front', 'privacy', 'terms', 'api', 'features', 'videos', 'contact', 'plans', 'new-stuff', 'community-guidelines', 'old-news', 'press-kit', 'faq', 'overview', 'apps', 'clear-browser-data', 'merch']; _.each(pages, function(name){ router.get('/static/' + name, i18n.getUserLanguage, locals, function(req, res) { diff --git a/website/views/shared/footer.jade b/website/views/shared/footer.jade index a8b04b4728..0f5bc5c041 100644 --- a/website/views/shared/footer.jade +++ b/website/views/shared/footer.jade @@ -36,6 +36,8 @@ footer.footer(ng-controller='FooterCtrl') a(href='/static/terms')=env.t('companyTerms') li a(href='/static/contact')=env.t('contactUs') + li + a(href='/static/merch')=env.t('merch') .col-sm-3 h4=env.t('footerCommunity') ul.list-unstyled diff --git a/website/views/static/merch.jade b/website/views/static/merch.jade new file mode 100644 index 0000000000..b83c8bd450 --- /dev/null +++ b/website/views/static/merch.jade @@ -0,0 +1,47 @@ +extends ./layout + +// Merchandise page : when adding a merchandise make sure to add following resources + + image of merchandise -- MERCHANT.KEY.png -- eg. teespring.png + + logo of merchant -- MERCHANT.KEY-logo.png -- eg. teespring-logo.png + + update merch.json with extra info about merchandise + - merch-MERCHANT.KEY-summary -- eg. merch-teespring-summary -> Teespring is and will always be... + - merch-MERCHANT.KEY-goto -- eg. merch-teespring-goto -> Get myself a Habitica T-Shirts + + update this page with an extra merchant (var merchants) + - key (used in locale files) + - logo (do we have a logo for this merchant, true || false) + - name (if no logo, this will be shown instead) + - link + eg. -> merchants.push({key: 'teespring', logo: true, name: 'Teespring', link: 'https://teespring.com/habitica-gryphon-t-shirt'}) + +block vars + - var layoutEnv = env + + - var merchants = [] + - merchants.push({key: 'teespring', logo: true, name: 'Teespring', link: 'https://teespring.com/habitica-gryphon-t-shirt'}) + - merchants.push({key: 'teespring-eu', logo: true, name: 'Teespring (EU)', link: 'https://teespring.com/habitica-gryphon-t-shirt_eu'}) + - merchants.push({key: 'stickermule', logo: true, name: 'Stickermule', link: 'https://www.stickermule.com/uk/marketplace/9317-habitica-gryphon-sticker'}) + +block title + title=env.t('merch') + +block content + .row + .col-md-12 + .page-header + h3=env.t('merch') + + // Merchandise block - START + each merchant, index in merchants + if (index+1) % 2 !== 0 + .row + + .col-lg-6.col-md-6.col-sm-12 + .merch-block + if merchant.logo + img(src="/merch/" + "#{merchant.key}" + "-logo.png") + else + h3=merchant.name + div: a(href="#{merchant.link}" target='_blank'): img.img-rendering-auto(src="/merch/" + "#{merchant.key}" + ".png") + p=env.t('merch-' + merchant.key + '-summary') + a.btn(href="#{merchant.link}" target='_blank')=env.t('merch-' + merchant.key + '-goto') + // Merchandise block - END