mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 07:07:35 +01:00
138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
<template lang="pug">
|
|
b-modal#world-boss-info(title="", size='md', :hide-footer="true", :hide-header="true")
|
|
.modal-header.d-flex
|
|
.left-hearts
|
|
.quest_dysheartener_modal
|
|
.phobia_dysheartener_modal
|
|
.right-hearts
|
|
.modal-body
|
|
.row
|
|
.col-12.text-center
|
|
h2 {{ $t('whatIsWorldBoss') }}
|
|
p.text-center {{ $t('worldBossDesc') }}
|
|
.row
|
|
.col-12
|
|
.bullet-point.d-flex.align-items-center.justify-content-left(v-for='bullet in bullets')
|
|
.check-icon
|
|
.svg-icon.red-check(v-html="icons.redCheck")
|
|
.info {{ $t(bullet) }}
|
|
.row
|
|
.col-12.text-center
|
|
a(href='http://habitica.wikia.com/wiki/World_Bosses' target='_blank').footer-link {{ $t('worldBossLink') }}
|
|
</template>
|
|
|
|
<style>
|
|
#world-boss-info .modal-body {
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.modal-header {
|
|
background-image: linear-gradient(to right, #410f2a, #931f4d 50%, #410f2a);
|
|
margin-bottom: .25em;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5em !important;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #931f4d;
|
|
}
|
|
|
|
p, .info {
|
|
font-size: 16px;
|
|
color: #4e4a57;
|
|
}
|
|
|
|
.info {
|
|
max-width: 400px;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.bullet-point {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.check-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 1000px;
|
|
border: solid 2px #e1e0e3;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.left-hearts, .right-hearts {
|
|
background-size: 100%;
|
|
margin: 1em;
|
|
width: 109px;
|
|
height: 70px;
|
|
}
|
|
|
|
.left-hearts {
|
|
background-image: url('~client/assets/images/world-boss/left-hearts@3x.png');
|
|
}
|
|
|
|
.right-hearts {
|
|
background-image: url('~client/assets/images/world-boss/right-hearts@3x.png');
|
|
}
|
|
|
|
.red-check {
|
|
width: 15px;
|
|
height: 10px;
|
|
margin-top: 0.6em;
|
|
margin-left: .5em;
|
|
}
|
|
|
|
.quest_dysheartener_modal, .phobia_dysheartener_modal {
|
|
width: 219px;
|
|
height: 120px;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.quest_dysheartener_modal {
|
|
background-image: url('~client/assets/images/world-boss/mantis-static@3x.png');
|
|
}
|
|
|
|
.phobia_dysheartener_modal {
|
|
display: none;
|
|
background-image: url('~client/assets/images/world-boss/heart-translucent-shadow@3x.png');
|
|
}
|
|
|
|
.footer-link {
|
|
color: #2995cd;
|
|
margin-bottom: 1.5em;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import redCheck from 'assets/svg/check-red.svg';
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
redCheck,
|
|
}),
|
|
bullets: [
|
|
'worldBossBullet1',
|
|
'worldBossBullet2',
|
|
'worldBossBullet3',
|
|
'worldBossBullet4',
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
close () {
|
|
this.$root.$emit('bv::hide::modal', 'world-boss-info');
|
|
},
|
|
},
|
|
};
|
|
</script>
|