Site Footer Update (#14134)
* first pass * second pass * third pass * fourth pass, not a lot of progress * fifth pass, slowly gettin there * breakpoint nonsense * flexbox and breakpoint nonsense * svg updates, css updates * whitespace * chore: merge upstream/develop * style(breakpoints): added responsive breakpoints, social column alignment tweaks * style(breakpoints): add xs-specific selectors and classes * style: mobile footer * style: mobile footer * style: static landing page footer * style: small tweaks to social layout * fix(translations): update website/common/locales/de/gear.json to develop * update(style): small updates * update(style): cleaning up code * update(style): cleaning up code * update(style): mobile footer updates * update(style): complete mobile footer & clean up code * update(style): add tablet breakpoint and remove rogue terms link
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
|
||||
<path fill-rule="evenodd" d="M7.145 8.006H4.903V16H1.58V8.006H0V5.182h1.58V3.354C1.58 2.045 2.202 0 4.933 0l2.461.01v2.742H5.608c-.291 0-.705.145-.705.77v1.66h2.533l-.291 2.824z"/>
|
||||
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M20,0H4C1.79,0,0,1.79,0,4V20c0,2.21,1.79,4,4,4H20c2.21,0,4-1.79,4-4V4c0-2.21-1.79-4-4-4Zm-3.72,6.66h-1.26c-1.24,0-1.63,.77-1.63,1.56v1.88h2.78l-.44,2.9h-2.33v7h-3.13v-7h-2.54v-2.9h2.54v-2.21c0-2.51,1.5-3.9,3.78-3.9,1.1,0,2.24,.2,2.24,.2v2.47Z" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 274 B After Width: | Height: | Size: 354 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 0c2.173 0 2.445.01 3.298.048.852.04 1.433.174 1.942.372.526.205.973.478 1.418.922.444.445.717.892.922 1.418.198.509.333 1.09.372 1.942C15.99 5.555 16 5.827 16 8s-.01 2.445-.048 3.298c-.04.852-.174 1.433-.372 1.942a3.924 3.924 0 0 1-.922 1.418 3.924 3.924 0 0 1-1.418.922c-.509.198-1.09.333-1.942.372-.853.04-1.125.048-3.298.048s-2.445-.009-3.298-.048c-.852-.04-1.433-.174-1.942-.372a3.924 3.924 0 0 1-1.418-.922A3.924 3.924 0 0 1 .42 13.24c-.198-.509-.333-1.09-.372-1.942C.01 10.445 0 10.173 0 8s.01-2.445.048-3.298C.088 3.85.222 3.269.42 2.76c.205-.526.478-.973.922-1.418A3.924 3.924 0 0 1 2.76.42C3.269.222 3.85.087 4.702.048 5.555.01 5.827 0 8 0zm0 3.892a4.108 4.108 0 1 0 0 8.216 4.108 4.108 0 0 0 0-8.216zm5.23-.162a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0zM8 10.667a2.666 2.666 0 1 1 0-5.333 2.666 2.666 0 0 1 0 5.333z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M14.67,12A2.67,2.67,0,1,1,12,9.33,2.67,2.67,0,0,1,14.67,12Zm3.89,0c0,1.16.1,3.66-.32,4.71a2.7,2.7,0,0,1-1.52,1.52c-1.06.42-3.55.33-4.72.33s-3.66.09-4.71-.33a2.65,2.65,0,0,1-1.52-1.52c-.42-1.05-.33-3.55-.33-4.71s-.09-3.67.33-4.72A2.65,2.65,0,0,1,7.29,5.76c1-.42,3.55-.32,4.71-.32a18,18,0,0,1,4.72.32,2.7,2.7,0,0,1,1.52,1.52C18.66,8.34,18.56,10.83,18.56,12ZM16.1,12A4.1,4.1,0,1,0,12,16.1,4.09,4.09,0,0,0,16.1,12Zm1.13-4.27a1,1,0,1,0-1,1A1,1,0,0,0,17.23,7.73ZM24,4V20a4,4,0,0,1-4,4H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H20A4,4,0,0,1,24,4ZM19.94,8.7a4.71,4.71,0,0,0-1.29-3.35A4.71,4.71,0,0,0,15.3,4.06C14,4,10,4,8.7,4.06A4.76,4.76,0,0,0,5.35,5.34,4.75,4.75,0,0,0,4.06,8.7C4,10,4,14,4.06,15.3a4.73,4.73,0,0,0,1.29,3.35A4.77,4.77,0,0,0,8.7,19.94c1.32.08,5.28.08,6.6,0a4.71,4.71,0,0,0,3.35-1.29,4.73,4.73,0,0,0,1.29-3.35C20,14,20,10,19.94,8.7Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 954 B After Width: | Height: | Size: 914 B |
3
website/client/src/assets/svg/tumblr.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM16.68,19a4.47,4.47,0,0,1-3,1C9.86,20,9,17.22,9,15.61v-4.5H7.56a.31.31,0,0,1-.31-.32V8.67a.52.52,0,0,1,.35-.5,4,4,0,0,0,2.63-3.66c0-.34.21-.51.51-.51H13a.31.31,0,0,1,.32.31v3.6h2.59a.31.31,0,0,1,.31.31v2.55a.31.31,0,0,1-.31.32H13.25v4.16c0,1.07.74,1.67,2.13,1.12a.67.67,0,0,1,.4-.07.36.36,0,0,1,.23.25l.68,2C16.75,18.71,16.8,18.89,16.68,19Z" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
|
||||
<path fill-rule="evenodd" d="M14.362 3.238c.007.141.01.281.01.424 0 4.338-3.302 9.34-9.34 9.34A9.284 9.284 0 0 1 0 11.527c.257.029.518.045.783.045a6.576 6.576 0 0 0 4.076-1.404 3.288 3.288 0 0 1-3.065-2.28 3.312 3.312 0 0 0 1.481-.056A3.288 3.288 0 0 1 .642 4.613v-.041c.444.246.949.393 1.488.41A3.28 3.28 0 0 1 .67 2.25c0-.602.162-1.166.444-1.651a9.315 9.315 0 0 0 6.766 3.43A3.28 3.28 0 0 1 11.078 0c.943 0 1.797.398 2.395 1.035a6.565 6.565 0 0 0 2.085-.797 3.289 3.289 0 0 1-1.443 1.816A6.543 6.543 0 0 0 16 1.539a6.665 6.665 0 0 1-1.638 1.699"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM18.36,8.74c0,.14,0,.29,0,.43A9.34,9.34,0,0,1,4,17a6.85,6.85,0,0,0,.79,0,6.57,6.57,0,0,0,4.07-1.4A3.29,3.29,0,0,1,5.8,13.39a4.1,4.1,0,0,0,.62,0,3.49,3.49,0,0,0,.86-.11,3.28,3.28,0,0,1-2.63-3.22v0a3.35,3.35,0,0,0,1.48.42A3.29,3.29,0,0,1,4.67,7.76,3.22,3.22,0,0,1,5.12,6.1a9.3,9.3,0,0,0,6.76,3.43,3.67,3.67,0,0,1-.08-.75,3.28,3.28,0,0,1,5.67-2.24,6.54,6.54,0,0,0,2.08-.79,3.22,3.22,0,0,1-1.44,1.8A6.67,6.67,0,0,0,20,7.05,7.31,7.31,0,0,1,18.36,8.74Z" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 645 B After Width: | Height: | Size: 622 B |
@@ -1,88 +1,105 @@
|
||||
<template>
|
||||
<div class="row footer-row">
|
||||
<div>
|
||||
<buy-gems-modal v-if="user" />
|
||||
<!--modify-inventory(v-if="isUserLoaded")-->
|
||||
<footer class="col-12 expanded">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-2">
|
||||
<h3>
|
||||
<footer>
|
||||
<!-- Product -->
|
||||
<div class="product">
|
||||
<h3>{{ $t('footerProduct') }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
|
||||
target="_blank"
|
||||
>{{ $t('mobileIOS') }}</a>
|
||||
</h3>
|
||||
<h3>
|
||||
>{{ $t('mobileIOS') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
|
||||
target="_blank"
|
||||
>{{ $t('mobileAndroid') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<h3>{{ $t('footerCompany') }}</h3>
|
||||
<ul>
|
||||
>{{ $t('mobileAndroid') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/group-plans">
|
||||
{{ $t('groupPlans') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/static/features">
|
||||
{{ $t('companyAbout') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Company -->
|
||||
<div class="company">
|
||||
<h3>{{ $t('footerCompany') }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://habitica.wordpress.com/"
|
||||
target="_blank"
|
||||
>{{ $t('companyBlog') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://blog.habitrpg.com/"
|
||||
target="_blank"
|
||||
>{{ $t('tumblr') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/static/faq">
|
||||
{{ $t('FAQ') }}
|
||||
<router-link to="/static/contact">
|
||||
{{ $t('contactUs') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://habitica.fandom.com/wiki/Whats_New"
|
||||
target="_blank"
|
||||
>{{ $t('oldNews') }}</a>
|
||||
</li>
|
||||
<!-- Commenting out merch page see https://github.com/HabitRPG/habitica/issues/12039
|
||||
<li>
|
||||
<router-link to="/static/merch">
|
||||
{{ $t('merch') }}
|
||||
</router-link>
|
||||
</li>
|
||||
-->
|
||||
<li>
|
||||
<router-link to="/static/press-kit">
|
||||
{{ $t('presskit') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/static/contact">
|
||||
{{ $t('contactUs') }}
|
||||
</router-link>
|
||||
<a
|
||||
href="https://habitica.wordpress.com/"
|
||||
target="_blank"
|
||||
>{{ $t('companyBlog') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://habitica.fandom.com/wiki/Whats_New"
|
||||
target="_blank"
|
||||
>{{ $t('oldNews') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<!-- Community -->
|
||||
<div class="community">
|
||||
<h3>{{ $t('footerCommunity') }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/community-guidelines"
|
||||
>{{ $t('communityGuidelines') }}</a>
|
||||
>{{ $t('communityGuidelines') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/hall/contributors">
|
||||
{{ $t('hall') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="user">
|
||||
<li>
|
||||
<a
|
||||
href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
|
||||
target="_blank"
|
||||
>{{ $t('companyContribute') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Support -->
|
||||
<div class="support">
|
||||
<h3>{{ $t ('support') }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link to="/static/faq">
|
||||
{{ $t('FAQ') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="user"
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
@click.prevent="openBugReportModal()"
|
||||
@@ -90,7 +107,9 @@
|
||||
{{ $t('reportBug') }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-else>
|
||||
<li
|
||||
v-else
|
||||
>
|
||||
<a
|
||||
href="mailto:admin@habitica.com?subject=Habitica Web Bug Report"
|
||||
target="_blank"
|
||||
@@ -102,61 +121,78 @@
|
||||
<a
|
||||
href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
|
||||
target="_blank"
|
||||
>{{ $t('requestFeature') }}</a>
|
||||
</li>
|
||||
<li v-html="$t('communityExtensions')"></li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.facebook.com/Habitica"
|
||||
target="_blank"
|
||||
>{{ $t('communityFacebook') }}</a>
|
||||
>{{ $t('requestFeature') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/habitica"
|
||||
href="https://habitica.fandom.com/"
|
||||
target="_blank"
|
||||
>{{ $t('communityInstagram') }}</a>
|
||||
>{{ $t('wiki') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<!-- Developers -->
|
||||
<div class="developers">
|
||||
<h3>{{ $t('footerDevs') }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="/apidoc"
|
||||
target="_blank"
|
||||
>{{ $t('APIv3') }}</a>
|
||||
>{{ $t('APIv3') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
:href="getDataDisplayToolUrl"
|
||||
target="_blank"
|
||||
>{{ $t('dataDisplayTool') }}</a>
|
||||
>{{ $t('dataDisplayTool') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
|
||||
target="_blank"
|
||||
>{{ $t('guidanceForBlacksmiths') }}</a>
|
||||
>{{ $t('guidanceForBlacksmiths') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations"
|
||||
target="_blank"
|
||||
>{{ $t('communityExtensions') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 social">
|
||||
|
||||
<!-- Help Support Habitica -->
|
||||
<div class="donate">
|
||||
<div>
|
||||
<h3>{{ $t('helpSupportHabitica') }}</h3>
|
||||
<p class="donate-text">
|
||||
{{ $t('donateText3') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="donate-button">
|
||||
<button
|
||||
class="button btn-contribute"
|
||||
@click="donate()"
|
||||
>
|
||||
<div class="text">
|
||||
💜 {{ $t('companyDonate') }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Social - Desktop/Tablet -->
|
||||
<div class="social">
|
||||
<div>
|
||||
<h3>{{ $t('footerSocial') }}</h3>
|
||||
<div class="icons">
|
||||
<a
|
||||
class="social-circle"
|
||||
href="https://twitter.com/habitica"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="social-icon svg-icon"
|
||||
v-html="icons.twitter"
|
||||
></div>
|
||||
</a>
|
||||
<a
|
||||
class="social-circle"
|
||||
href="https://www.instagram.com/habitica/"
|
||||
@@ -167,6 +203,16 @@
|
||||
v-html="icons.instagram"
|
||||
></div>
|
||||
</a>
|
||||
<a
|
||||
class="social-circle"
|
||||
href="https://twitter.com/habitica"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="social-icon svg-icon twitter"
|
||||
v-html="icons.twitter"
|
||||
></div>
|
||||
</a>
|
||||
<a
|
||||
class="social-circle"
|
||||
href="https://www.facebook.com/Habitica"
|
||||
@@ -176,73 +222,85 @@
|
||||
class="social-icon facebook svg-icon"
|
||||
v-html="icons.facebook"
|
||||
></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
{{ $t('donateText3') }}
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<button
|
||||
v-if="user"
|
||||
class="btn btn-contribute btn-front btn-flat"
|
||||
@click="donate()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon heart"
|
||||
v-html="icons.heart"
|
||||
></div>
|
||||
<div class="text">
|
||||
{{ $t('companyDonate') }}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="btn btn-contribute btn-front btn-flat"
|
||||
>
|
||||
<a
|
||||
href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
|
||||
</a><a
|
||||
class="social-circle"
|
||||
href="https://www.tumblr.com/Habitica"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="svg-icon heart"
|
||||
v-html="icons.heart"
|
||||
class="social-icon tumblr svg-icon"
|
||||
v-html="icons.tumblr"
|
||||
></div>
|
||||
<div class="text">{{ $t('companyContribute') }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
||||
<div class="hr">
|
||||
<div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-5 text-center text-md-left">
|
||||
<!-- Colophon -->
|
||||
<div class=" copyright">
|
||||
<div>
|
||||
© {{ currentYear }} Habitica. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
<div class="melior">
|
||||
<div
|
||||
class="logo svg-icon"
|
||||
v-html="icons.gryphon"
|
||||
></div>
|
||||
</div>
|
||||
<!-- DESKTOP PRIVACY & TERMS -->
|
||||
<div class="privacy-terms">
|
||||
<span class="privacy-policy">
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/privacy"
|
||||
>{{ $t('privacy') }}</a>
|
||||
</span>
|
||||
<span class="terms">
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/terms"
|
||||
>{{ $t('terms') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<!-- MOBILE PRIVACY & TERMS -->
|
||||
<div class="privacy-policy mobile desktop">
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/privacy"
|
||||
>{{ $t('privacy') }}</a>
|
||||
</div>
|
||||
<div class="mobile-terms mobile desktop">
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/terms"
|
||||
>{{ $t('terms') }}</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!IS_PRODUCTION && isUserLoaded"
|
||||
class="debug float-left"
|
||||
class="debug-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
class="debug btn-primary"
|
||||
@click="debugMenuShown = !debugMenuShown"
|
||||
>
|
||||
Toggle Debug Menu
|
||||
</button>
|
||||
<div
|
||||
v-if="debugMenuShown"
|
||||
class="debug-group"
|
||||
class="debug-toggle debug-group"
|
||||
>
|
||||
<div class="debug-pop">
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
@click="setHealthLow()"
|
||||
>Health = 1</a>
|
||||
>Reduce Health to 1</a>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
@click="addMissedDay(1)"
|
||||
@@ -300,188 +358,435 @@
|
||||
class="btn btn-secondary"
|
||||
@click="makeAdmin()"
|
||||
>Make Admin</a>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
@click="openModifyInventoryModal()"
|
||||
>Modify Inventory</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-2 text-center">
|
||||
<div
|
||||
class="logo svg-icon"
|
||||
v-html="icons.gryphon"
|
||||
></div>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 text-center text-md-right my-1">
|
||||
<span class="ml-4">
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/privacy"
|
||||
>{{ $t('privacy') }}</a>
|
||||
</span>
|
||||
<span class="ml-4">
|
||||
<a
|
||||
target="_blank"
|
||||
href="/static/terms"
|
||||
>{{ $t('terms') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
.footer-row {
|
||||
margin: 0;
|
||||
flex: 0 1 auto;
|
||||
z-index: 10;
|
||||
}
|
||||
footer {
|
||||
color: #c3c0c7;
|
||||
padding-bottom: 3em;
|
||||
a {
|
||||
color: #2995cd;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
color: #878190;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 1.71;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
box-shadow: 0 1px 3px 0 rgb(26 24 29 / 12%), 0 1px 2px 0 rgb(26 24 29 / 24%);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
margin: 0 0 .5rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
.social {
|
||||
h3 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.icons {
|
||||
|
||||
.product { grid-area: product; }
|
||||
.company { grid-area: company; }
|
||||
.community { grid-area: community; }
|
||||
.support { grid-area: support; }
|
||||
.developers { grid-area: developers; }
|
||||
|
||||
// row 2
|
||||
.donate {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
grid-area: donate;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.donate-text {
|
||||
grid-area: donate-text;
|
||||
font-size: 0.75rem;
|
||||
font-color: $gray-100;
|
||||
line-height: 1.33;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
// smaller than desktop
|
||||
@media only screen and (max-width: 992px) {
|
||||
.social-circle {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
margin-left: 0.75em !important;
|
||||
.donate-button {
|
||||
grid-area: donate-button;
|
||||
padding-top: 44px;
|
||||
}
|
||||
}
|
||||
//mobile view
|
||||
@media screen and (max-width: 770px) {
|
||||
.footer-main {
|
||||
.social {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo-container {
|
||||
order: 1;
|
||||
}
|
||||
justify-content: start;
|
||||
grid-area: social;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
// row 3
|
||||
.hr {
|
||||
color: $gray-400;
|
||||
grid-area: hr;
|
||||
}
|
||||
|
||||
// row 4
|
||||
.copyright {
|
||||
grid-area: copyright;
|
||||
line-height: 1.71;
|
||||
}
|
||||
.melior { grid-area: melior; }
|
||||
.privacy-terms {
|
||||
grid-area: privacy-terms;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
line-height: 1.71;
|
||||
}
|
||||
.terms {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// row 5
|
||||
.debug-toggle { grid-area: debug-toggle;}
|
||||
.debog-pop {
|
||||
grid-area: debug-pop;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: $gray-500;
|
||||
color: $gray-50;
|
||||
padding: 32px 142px 40px;
|
||||
a {
|
||||
color: $gray-50;
|
||||
}
|
||||
a:hover {
|
||||
color: $purple-300;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
|
||||
color: $purple-300;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
column-gap: 1.5rem;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"product company community support developers"
|
||||
"donate donate donate donate-button social"
|
||||
"donate-text donate-text donate-text donate-button social"
|
||||
"hr hr hr hr hr"
|
||||
"copyright copyright melior privacy-terms privacy-terms"
|
||||
"debug-toggle debug-toggle debug-toggle blank blank";
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: auto;
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.social-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #c3c0c7;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: $gray-50;
|
||||
display: flex;
|
||||
margin-left: 1em;
|
||||
margin: 0 8px 0 8px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #a5a1ac;
|
||||
}
|
||||
.social-icon {
|
||||
color: #e1e0e3;
|
||||
width: 16px;
|
||||
margin: auto;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
color: #e1e0e3;
|
||||
margin: 0px auto 5px;
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
.terms {
|
||||
padding-left: 16px;
|
||||
display:flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.debug-group {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
top: -300px;
|
||||
border-radius: 2px;
|
||||
padding: 2em;
|
||||
}
|
||||
.btn-contribute {
|
||||
background: #c3c0c7;
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
font-family: Roboto Condensed, sans-serif;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
font-weight: 700;
|
||||
background-color: $gray-600;
|
||||
|
||||
.btn {
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-contribute {
|
||||
background: $white;
|
||||
border-radius: 2px;
|
||||
width: 175px;
|
||||
height: 32px;
|
||||
color: $gray-50;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
background: #a5a1ac;
|
||||
.text {
|
||||
color: white;
|
||||
color:$purple-300;
|
||||
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
|
||||
&:active:not(:disabled) {
|
||||
color:$purple-300;
|
||||
border: 1px solid $purple-400;
|
||||
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
.heart {
|
||||
max-height: 25px;
|
||||
width: 18px;
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.text,
|
||||
.heart {
|
||||
|
||||
.text{
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
// media breakpoints
|
||||
|
||||
// Small devices (landscape phones, 576px and under)
|
||||
@media (max-width: 767.99px) {
|
||||
|
||||
// row 1
|
||||
.product {
|
||||
grid-area: product;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.company {
|
||||
grid-area: company;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
//row 2
|
||||
.community {
|
||||
grid-area: community;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.support {
|
||||
grid-area: support;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
//row 3
|
||||
.developers {
|
||||
grid-area: developers;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.social {
|
||||
grid-area: social;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
// row 4
|
||||
.donate {
|
||||
grid-area: donate;
|
||||
}
|
||||
// row 5
|
||||
.donate-text {
|
||||
grid-area: donate-text;
|
||||
}
|
||||
//row 6
|
||||
.donate-button {
|
||||
grid-area: donate-button;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
// row 7
|
||||
.hr {
|
||||
grid-area: hr;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
// row 8
|
||||
.copyright {
|
||||
grid-area: copyright;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
// row 9
|
||||
.privacy-terms {
|
||||
display: none;
|
||||
}
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
.privacy-policy {
|
||||
grid-area: privacy-policy;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
line-height: 1.71;
|
||||
padding-top: 10px;
|
||||
}
|
||||
//row 10
|
||||
.mobile-terms {
|
||||
grid-area: mobile-terms;
|
||||
display:grid;
|
||||
justify-content: center;
|
||||
padding: 8px 0px 16px 0px;
|
||||
}
|
||||
// row 11
|
||||
.melior { grid-area: melior; }
|
||||
|
||||
// row 12
|
||||
.debug-toggle {
|
||||
grid-area: debug-toggle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 24px 16px;
|
||||
a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
|
||||
color: $purple-300;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
column-gap: 1.5rem;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"product company"
|
||||
"community support"
|
||||
"developers social"
|
||||
"donate donate"
|
||||
"donate-text donate-text"
|
||||
"donate-button donate-button"
|
||||
"hr hr"
|
||||
"copyright copyright"
|
||||
"privacy-policy privacy-policy"
|
||||
"mobile-terms mobile-terms"
|
||||
"melior melior"
|
||||
"debug-toggle debug-toggle";
|
||||
grid-template-columns: repeat(2, 2fr);
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
.btn-contribute {
|
||||
width: 100%;
|
||||
}
|
||||
.debug {
|
||||
width: 100%;
|
||||
}
|
||||
.social-circle {
|
||||
margin: 0 6px 0 6px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Medium devices (tablets, 768px and under)
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
footer {
|
||||
padding: 24px 24px;
|
||||
a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
|
||||
color: $purple-300;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.heart svg {
|
||||
margin-top: 0.1em;
|
||||
.instagram svg {
|
||||
background-color: #e1e0e3;
|
||||
fill: #878190;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&:hover {
|
||||
fill: #6133B4;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter svg {
|
||||
background-color: #e1e0e3;
|
||||
fill: #878190;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&:hover {
|
||||
fill: #6133B4;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook svg {
|
||||
width: 10px;
|
||||
margin: 0 auto;
|
||||
background-color: #e1e0e3;
|
||||
fill: #878190;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&:hover {
|
||||
fill: #6133B4;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
&.expanded {
|
||||
padding-left: 6em;
|
||||
padding-right: 6em;
|
||||
padding-top: 3em;
|
||||
background: #e1e0e3;
|
||||
color: #878190;
|
||||
min-height: 408px;
|
||||
a {
|
||||
color: #878190;
|
||||
}
|
||||
.logo {
|
||||
color: #c3c0c7;
|
||||
}
|
||||
@media screen and (max-width: 770px) {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.tumblr svg {
|
||||
background-color: #e1e0e3;
|
||||
fill: #878190;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&:hover {
|
||||
fill: #6133B4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// modules
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
// images
|
||||
import gryphon from '@/assets/svg/gryphon.svg';
|
||||
import twitter from '@/assets/svg/twitter.svg';
|
||||
import facebook from '@/assets/svg/facebook.svg';
|
||||
import instagram from '@/assets/svg/instagram.svg';
|
||||
import tumblr from '@/assets/svg/tumblr.svg';
|
||||
import heart from '@/assets/svg/heart.svg';
|
||||
|
||||
// components & modals
|
||||
import { mapState } from '@/libs/store';
|
||||
import buyGemsModal from './payments/buyGemsModal.vue';
|
||||
import reportBug from '@/mixins/reportBug.js';
|
||||
|
||||
@@ -498,6 +803,7 @@ export default {
|
||||
twitter,
|
||||
facebook,
|
||||
instagram,
|
||||
tumblr,
|
||||
heart,
|
||||
}),
|
||||
debugMenuShown: false,
|
||||
@@ -592,9 +898,6 @@ export default {
|
||||
// Reload the website then go to Help > Admin Panel to set contributor level, etc.');
|
||||
// @TODO: sync()
|
||||
},
|
||||
openModifyInventoryModal () {
|
||||
this.$root.$emit('bv::show::modal', 'modify-inventory');
|
||||
},
|
||||
donate () {
|
||||
this.$root.$emit('bv::show::modal', 'buy-gems', { alreadyTracked: true });
|
||||
},
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.home-header {
|
||||
background: #6133b4 !important;
|
||||
background: $purple-300 !important;
|
||||
position: static;
|
||||
box-shadow: none !important;
|
||||
height: 100px !important;
|
||||
@@ -46,13 +46,13 @@
|
||||
|
||||
.nav-item a {
|
||||
font-size: 14px !important;
|
||||
color: #d5c8ff !important;
|
||||
color: $purple-600 !important;
|
||||
padding-top: 2.8em !important;
|
||||
}
|
||||
|
||||
.nav-item a:hover {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.nav-item .nav-link {
|
||||
@@ -73,20 +73,20 @@
|
||||
}
|
||||
|
||||
.white-header {
|
||||
background: #fff !important;
|
||||
background-color: #fff !important;
|
||||
background: $white !important;
|
||||
background-color: $white !important;
|
||||
|
||||
a {
|
||||
color: #271b3d !important;
|
||||
color: $header-dark-background !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #fff !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
#purple-footer {
|
||||
background-color: #271b3d;
|
||||
background-color: $header-dark-background;
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
@@ -94,19 +94,91 @@
|
||||
|
||||
footer, footer a {
|
||||
background: transparent;
|
||||
color: #d5c8ff;
|
||||
color: $purple-500;
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $purple-400;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top-color: $purple-100;
|
||||
}
|
||||
|
||||
.donate-text {
|
||||
color: $purple-500;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: #bda8ff;
|
||||
color: $purple-300;
|
||||
}
|
||||
|
||||
.social-circle, .btn-contribute {
|
||||
background: #36205d;
|
||||
color: #bda8ff;
|
||||
.colophon {
|
||||
color: $purple-500;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: #bda8ff;
|
||||
.social-circle {
|
||||
background: $purple-50;
|
||||
color: $purple-500;
|
||||
|
||||
.instagram svg {
|
||||
background-color: $purple-50;
|
||||
fill: $purple-500;
|
||||
&:hover {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter svg {
|
||||
background-color: $purple-50;
|
||||
fill: $purple-500;
|
||||
&:hover {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook svg {
|
||||
background-color: $purple-50;
|
||||
fill: $purple-500;
|
||||
&:hover {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.tumblr svg {
|
||||
background-color: $purple-50;
|
||||
fill: $purple-500;
|
||||
&:hover {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-contribute {
|
||||
background: $white;
|
||||
box-shadow: none;
|
||||
border-radius: 2px;
|
||||
width: 175px;
|
||||
height: 32px;
|
||||
color: $gray-50;
|
||||
text-align: center;
|
||||
line-height: 1.71;
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
margin: 32px 0 32px 24px;
|
||||
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.text{
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -142,7 +214,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#bottom-wrap.purple-4 {
|
||||
background-color: #271b3d;
|
||||
background-color: #271B3D;
|
||||
}
|
||||
|
||||
#bottom-wrap {
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
"termsAndAgreement": "By clicking the button below, you are indicating that you have read and agree to the <a href='/static/terms'>Terms of Service</a> and <a href='/static/privacy'>Privacy Policy</a>.",
|
||||
"chores": "Chores",
|
||||
"clearBrowserData": "Clear Browser Data",
|
||||
"communityExtensions": "<a href='https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations' target='_blank'>Add-ons & Extensions</a>",
|
||||
"communityExtensions": "Add-ons & Extensions",
|
||||
"communityFacebook": "Facebook",
|
||||
"communityInstagram": "Instagram",
|
||||
"companyAbout": "How It Works",
|
||||
"companyBlog": "Blog",
|
||||
"companyContribute": "Contribute",
|
||||
"companyDonate": "Donate",
|
||||
"companyContribute": "Contributing to Habitica",
|
||||
"companyDonate": "Donate to Habitica",
|
||||
"forgotPassword": "Forgot Password?",
|
||||
"emailNewPass": "Email a Password Reset Link",
|
||||
"forgotPasswordSteps": "Enter your username or the email address you used to register your Habitica account.",
|
||||
@@ -18,6 +18,7 @@
|
||||
"footerCommunity": "Community",
|
||||
"footerCompany": "Company",
|
||||
"footerMobile": "Mobile",
|
||||
"footerProduct": "Product",
|
||||
"footerSocial": "Social",
|
||||
"free": "Join for free",
|
||||
"guidanceForBlacksmiths": "Guidance for Blacksmiths",
|
||||
@@ -51,8 +52,8 @@
|
||||
"marketing4Lead3-1": "Want to gamify your life?",
|
||||
"marketing4Lead3-2": "Interested in running a group in education, wellness, and more?",
|
||||
"marketing4Lead3Title": "Gamify Everything",
|
||||
"mobileAndroid": "Android",
|
||||
"mobileIOS": "iOS",
|
||||
"mobileAndroid": "Android App",
|
||||
"mobileIOS": "iOS App",
|
||||
"oldNews": "News",
|
||||
"newsArchive": "News archive on Wikia (multilingual)",
|
||||
"setNewPass": "Set New Password",
|
||||
|
||||
@@ -85,7 +85,8 @@
|
||||
"newBaileyUpdate": "New Bailey Update!",
|
||||
"tellMeLater": "Tell Me Later",
|
||||
"dismissAlert": "Dismiss This Alert",
|
||||
"donateText3": "Habitica is an open source project that depends on our users for support. The money you spend on gems helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteer programmers. Thank you for your generosity!",
|
||||
"donateText3": "Habitica is an open source project that depends on our users for support. The money you spend on gems helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers",
|
||||
"helpSupportHabitica": "Help Support Habitica",
|
||||
"card": "Credit Card",
|
||||
"paymentMethods": "Purchase using",
|
||||
"paymentSuccessful": "Your payment was successful!",
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
"couponCodeRequired": "The coupon code is required.",
|
||||
"subCanceledTitle": "Subscription Canceled",
|
||||
"choosePaymentMethod": "Choose your payment method",
|
||||
"support": "SUPPORT",
|
||||
"support": "Support",
|
||||
"supportHabitica": "Support Habitica",
|
||||
"gemBenefitLeadin": "What can you buy with Gems?",
|
||||
"gemBenefit1": "Unique and fashionable costumes for your avatar.",
|
||||
|
||||