Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show pricing on homepage #295

Merged
merged 6 commits into from
Nov 2, 2024
Merged

Show pricing on homepage #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1bf3271
Pricing on homepage
Lakeyzer Nov 2, 2024
337dbe4
Pricing in sidebar
Lakeyzer Nov 2, 2024
f7e15ec
Pricing in header on home
Lakeyzer Nov 2, 2024
6a0f2d6
Fix refresh on pricing page
Lakeyzer Nov 2, 2024
7bdb35c
Add digital DM screen to default perks
HarmlessHarm Nov 2, 2024
3d8a177
Custom prefix
HarmlessHarm Nov 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions src/components/Sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,14 +196,12 @@
<hr />
</template>
<q-list @click="setSideSmallScreen(false)">
<q-item clickable to="/patreon">
<q-item clickable v-ripple to="/patreon">
<q-item-section avatar>
<i aria-hidden="true" class="fas fa-coins" />
</q-item-section>
<q-item-section>
<q-btn no-caps color="primary" to="/patreon" class="full-width bg-patreon-red">
Subscribe
</q-btn>
{{ $store.getters.user ? "Get subscription" : "Pricing" }}
</q-item-section>
<q-tooltip
v-if="$store.getters.side_collapsed"
Expand Down
108 changes: 83 additions & 25 deletions src/components/Tiers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,17 @@
</div>
<div class="card-body">
<div class="top">
<h2>{{ t.price }}</h2>
<span class="price" :class="{ 'patreon-red': t.name === 'Free' }">{{
t.price
}}</span>
<em v-if="t.price === 'Free'" class="neutral-2 sub">forever</em>
<em v-else class="neutral-2 sub">per month</em>
</div>
<ul>
<li v-for="(benefit, key) in default_benefits" :key="key">
<i class="fas fa-check green" aria-hidden="true" />
{{ benefit }}
</li>
<li v-for="(benefit, key) in benefits" :key="key">
<i
v-if="typeof t.benefits[key] === 'boolean'"
Expand All @@ -41,26 +47,58 @@
<span v-if="key === 'character_sync'" class="neutral-3">*</span>
</span>
</li>
</ul>
<ul class="storage">
<li v-for="storage_type in storage" :key="storage_type">
<i
aria-hidden="true"
v-if="t.benefits[storage_type] == 'infinite'"
class="green far fa-infinity"
/>
<span v-else class="green">{{ t.benefits[storage_type] }}</span>
<span>
{{ storageType(storage_type, t.benefits[storage_type]) }}
<span v-if="storage_type === 'encounters'" class="neutral-3">
(per campaign)
</span>
<li>
<i class="fas fa-check green" aria-hidden="true" />
<span
class="d-flex justify-content-between items-center pointer"
@click="show_storage = !show_storage"
>
<span
><strong>{{ storage_size[t.name] }}</strong> storage</span
>
<i
class="fas fa-chevron-down"
aria-hidden="true"
:class="{ open: show_storage }"
/>
</span>
</li>
</ul>
<q-slide-transition v-show="show_storage">
<ul class="storage">
<li v-for="storage_type in storage" :key="storage_type">
<i
aria-hidden="true"
v-if="t.benefits[storage_type] == 'infinite'"
class="green far fa-infinity"
/>
<span v-else class="green">{{ t.benefits[storage_type] }}</span>
<span>
<span
v-if="['npcs', 'spells', 'reminders', 'items'].includes(storage_type)"
class="neutral-3"
>
Custom
</span>
{{ storageType(storage_type, t.benefits[storage_type]) }}
<span v-if="storage_type === 'encounters'" class="neutral-3">
(per campaign)
</span>
</span>
</li>
</ul>
</q-slide-transition>
</div>
<div slot="footer" v-if="t.price != 'Free'">
<div slot="footer">
<router-link
v-if="t.price === 'Free'"
class="btn btn-block btn-square bg-patreon-red"
:to="!user ? '/sign-up' : '/content'"
>
Use for Free
</router-link>
<a
v-else
:href="'https://www.patreon.com/join/shieldmaidenapp/checkout?rid=' + t['.key']"
target="_blank"
rel="noopener"
Expand Down Expand Up @@ -99,6 +137,14 @@ export default {
return {
loading: true,
show_storage: false,
default_benefits: [
"Combat tracker",
"Encounter builder",
"Digital DM Screen",
"Public Initiative List",
"Monster creator",
"Spell creator",
],
benefits: {
character_sync: {
title: "Character sync",
Expand All @@ -112,9 +158,12 @@ export default {
import: {
title: "Import content",
},
storage: {
title: "Storage",
},
},
storage_size: {
Free: "Small",
"Folk Hero": "Medium",
Noble: "Large",
Deity: "Infinite",
},
legacy_tiers,
storage: ["campaigns", "encounters", "players", "npcs", "spells", "reminders", "items"],
Expand All @@ -129,7 +178,7 @@ export default {
};
},
computed: {
...mapGetters(["tier"]),
...mapGetters(["user", "tier"]),
},
methods: {
storageType(type, count) {
Expand Down Expand Up @@ -157,12 +206,14 @@ export default {
}
}
.card-body {
padding: 0;
padding: 0 0 15px 0;

.top {
padding: 15px;
h2 {
margin-bottom: 0 !important;
.price {
font-size: 25px;
font-weight: bold;
margin-right: 5px;
}
i.sub {
display: block;
Expand All @@ -180,13 +231,20 @@ export default {
line-height: 35px;
align-items: center;
font-size: 15px;
padding: 0 5px 0 15px;
padding: 0 15px;
color: $neutral-1;
margin-bottom: 1px;

.fa-chevron-down {
transition: all 0.2s linear;

&.open {
transform: rotate(-180deg);
}
}
}
&.storage {
padding-left: 20px;
margin-bottom: 15px;

li {
font-size: 13px;
Expand Down
15 changes: 3 additions & 12 deletions src/components/header/UserMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
</div>
</q-popup-proxy>
</div>
<button v-else class="btn btn-clear bg-neutral-6 user-btn">
<button v-else class="btn btn-clear btn-sm bg-neutral-6 user-btn">
<i class="fas fa-user-circle" />
<q-popup-proxy
:dark="$store.getters.theme === 'dark'"
Expand All @@ -91,12 +91,6 @@
>
<div class="bg-neutral-8">
<q-list>
<q-item clickable v-close-popup href="https://discord.gg/dU59jgvcuq">
<q-item-section avatar
><i aria-hidden="true" class="fab fa-discord"></i
></q-item-section>
<q-item-section>Join our Discord</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="sign_in_dialog = true">
<q-item-section avatar
><i aria-hidden="true" class="fas fa-sign-in"></i
Expand Down Expand Up @@ -188,12 +182,9 @@ export default {
}
}
.user-btn {
font-size: 22px;
border-radius: 999px;
height: 38px;
width: 38px;
box-sizing: border-box;
padding: 0;
font-size: 22px;
padding: 0 8px;
}
}
</style>
4 changes: 2 additions & 2 deletions src/components/home/Builder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
<div class="container">
<div class="head">
<h2>Build great encounters</h2>
<span>
<div class="text">
Our encounter builder is easy to use and lets you use your own custom monsters.
</span>
</div>
</div>

<video
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/Campaign.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
<div class="container">
<div class="head">
<h2>Campaign Manager</h2>
<span>
<div class="text">
Our tool started out as a combat tracker for Dungeons & Dragons, but it has grown a lot.
Over time it has become so much more than that, but if you simply want to run your
encounters it is still perfect for just that.
</span>
</div>
</div>

<div class="row q-col-gutter-xl mb-5">
Expand Down
Loading
Loading