mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-15 05:37:22 +01:00
old client structure
This commit is contained in:
Matteo Pagliazzi
252
website/client/src/components/static/groupPlans.vue
Normal file
252
website/client/src/components/static/groupPlans.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template lang="pug">
|
||||
.group-plan-static.text-center
|
||||
amazon-payments-modal
|
||||
.container
|
||||
.row.top
|
||||
.top-left
|
||||
.col-6.offset-3
|
||||
img.party(src='../../assets/images/group-plans-static/party@3x.png')
|
||||
h1 {{ $t('groupPlanTitle') }}
|
||||
p {{ $t('groupPlanDesc') }}
|
||||
.pricing
|
||||
span Just
|
||||
span.number $9
|
||||
span.bold per month +
|
||||
span.number $3
|
||||
span.bold per member*
|
||||
.text-center
|
||||
button.btn.btn-primary.cta-button(@click="goToNewGroupPage()") {{ $t('getStarted') }}
|
||||
small {{ $t('billedMonthly') }}
|
||||
.top-right
|
||||
.row
|
||||
.text-col.col-12.col-md-6.text-left
|
||||
h2 {{ $t('teamBasedTasksList') }}
|
||||
p {{ $t('teamBasedTasksListDesc') }}
|
||||
.col-12.col-md-6
|
||||
.team-based(v-html='svg.teamBased')
|
||||
.row
|
||||
.col-12.col-md-6
|
||||
.group-management(v-html='svg.groupManagement')
|
||||
.text-col.col-12.col-md-6.text-left
|
||||
h2 {{ $t('groupManagementControls') }}
|
||||
p {{ $t('groupManagementControlsDesc') }}
|
||||
.row
|
||||
.col-12.col-md-6.offset-md-3.text-center
|
||||
img.big-gem(src='../../assets/images/group-plans-static/big-gem@3x.png')
|
||||
h2 {{ $t('inGameBenefits') }}
|
||||
p {{ $t('inGameBenefitsDesc') }}
|
||||
.row
|
||||
.bot-left
|
||||
.col-6.offset-3
|
||||
h2.purple {{ $t('inspireYourParty') }}
|
||||
.pricing
|
||||
span Just
|
||||
span.number $9
|
||||
span.bold per month +
|
||||
span.number $3
|
||||
span.bold per member*
|
||||
.text-center
|
||||
button.btn.btn-primary.cta-button(@click="goToNewGroupPage()") {{ $t('getStarted') }}
|
||||
small {{ $t('billedMonthly') }}
|
||||
.bot-right
|
||||
b-modal#group-plan(title="", size='md', :hide-footer='true', :hide-header='true')
|
||||
div(v-if='modalPage === "account"')
|
||||
h2 {{ $t('letsMakeAccount') }}
|
||||
auth-form(@authenticate='authenticate()')
|
||||
div(v-if='modalPage === "purchaseGroup"')
|
||||
create-group-modal-pages
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Varela Round', sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.party {
|
||||
width: 386px;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.team-based {
|
||||
background-image: url('../../assets/images/group-plans-static/group-management@3x.png');
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
height: 356px;
|
||||
width: 411px;
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
.group-management {
|
||||
background-image: url('../../assets/images/group-plans-static/team-based@3x.png');
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
height: 294px;
|
||||
width: 411px;
|
||||
}
|
||||
|
||||
.top-left, .top-right, .bot-left, .bot-right {
|
||||
width: 273px;
|
||||
height: 396px;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
background-image: url('../../assets/images/group-plans-static/top-left@3x.png');
|
||||
left: 4em;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
background-image: url('../../assets/images/group-plans-static/top-right@3x.png');
|
||||
right: 4em;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.bot-left {
|
||||
background-image: url('../../assets/images/group-plans-static/bot-left@3x.png');
|
||||
left: 4em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
.bot-right {
|
||||
background-image: url('../../assets/images/group-plans-static/bot-right@3x.png');
|
||||
right: 4em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
color: #34313a;
|
||||
line-height: 1.17;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 29px;
|
||||
color: #34313a;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #6133b4;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
color: #878190;
|
||||
}
|
||||
|
||||
.group-plan-static {
|
||||
margin-top: 6em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-top: 10em;
|
||||
margin-bottom: 10em;
|
||||
}
|
||||
|
||||
.text-col {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.big-gem {
|
||||
width: 138.5px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
font-family: 'Varela Round', sans-serif;
|
||||
font-weight: normal;
|
||||
padding: 1em 2em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 4px;
|
||||
background-color: #6133b4;
|
||||
box-shadow: inset 0 -4px 0 0 rgba(52, 49, 58, 0.4);
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pricing {
|
||||
color: #878190;
|
||||
font-size: 24px;
|
||||
|
||||
span {
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #1ca372;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 16px;
|
||||
color: #a5a1ac;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import * as Analytics from 'client/libs/analytics';
|
||||
import { setup as setupPayments } from 'client/libs/payments';
|
||||
import amazonPaymentsModal from 'client/components/payments/amazonModal';
|
||||
import StaticHeader from './header.vue';
|
||||
import AuthForm from '../auth/authForm.vue';
|
||||
import CreateGroupModalPages from '../group-plans/createGroupModalPages.vue';
|
||||
|
||||
import party from '../../assets/images/group-plans-static/party.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StaticHeader,
|
||||
AuthForm,
|
||||
CreateGroupModalPages,
|
||||
amazonPaymentsModal,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
svg: {
|
||||
party,
|
||||
},
|
||||
modalTitle: this.$t('register'),
|
||||
modalPage: 'account',
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
// Load external scripts after the app has been rendered
|
||||
setupPayments();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goToNewGroupPage () {
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'group-plans-static',
|
||||
eventAction: 'view',
|
||||
eventLabel: 'view-auth-form',
|
||||
});
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'group-plan');
|
||||
},
|
||||
authenticate () {
|
||||
this.modalPage = 'purchaseGroup';
|
||||
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'group-plans-static',
|
||||
eventAction: 'view',
|
||||
eventLabel: 'create-group',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user