mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-04-25 16:09:59 -05:00
104 lines
4.9 KiB
Handlebars
104 lines
4.9 KiB
Handlebars
<link rel="stylesheet" href="/assets/css/upgrade.css" />
|
|
<div class="wrapper">
|
|
<a href="/account" class="back-arrow">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
<span>Back</span>
|
|
</a>
|
|
|
|
<div class="account-form-wrapper">
|
|
<a class="logotype" href="/">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
|
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
|
<g id="logo" transform="translate(553 467)">
|
|
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
|
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
|
<path id="XMLID_15_"
|
|
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
|
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
|
<path id="XMLID_14_"
|
|
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
|
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
|
<path id="XMLID_9_"
|
|
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
|
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
|
</g>
|
|
</g>
|
|
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
|
font-family="Poppins-Bold, Poppins" font-weight="700">
|
|
<tspan x="0" y="0">Pretendo</tspan>
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
|
|
<h1 class="title dot">Upgrade</h1>
|
|
<p class="caption">
|
|
Reaching the monthly goal will make Pretendo a full time job, providing better quality updates at a faster rate.
|
|
</p>
|
|
|
|
<div class="progress-bar-wrapper">
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div>
|
|
</div>
|
|
<p>
|
|
<span>${{donationCache.total_dollars}}</span> of <span>${{donationCache.goal_dollars}}</span>/month, <span>${{donationCache.completed_real}}%</span> of the monthly goal.
|
|
</p>
|
|
</div>
|
|
<form method="post" data-current-tier="{{currentTier}}">
|
|
{{#each tiers}}
|
|
<input type="radio" class="tier-radio" data-tier-name="{{this.name}}" name="tier" value="{{this.price_id}}" id="{{this.price_id}}" />
|
|
<label class="tier" for="{{this.price_id}}">
|
|
<div class="tier-thumbnail">
|
|
<img src="{{this.thumbnail}}" width="100%" height="auto" alt="Tier icon" />
|
|
</div>
|
|
<div class="tier-text">
|
|
<p class="tier-name">{{this.name}}</p>
|
|
<div class="tier-perks">
|
|
{{#each this.perks}}
|
|
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
|
<p>{{this}}</p>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<p class="price">
|
|
<span>{{this.price}}</span> / month
|
|
</p>
|
|
</label>
|
|
{{/each}}
|
|
|
|
<div class="button-wrapper">
|
|
<button class="disabled" type="submit" id="submitButton">Select a tier</button>
|
|
<button class="unsubscribe hidden" id="unsubModalShowButton">Unsubscribe</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="unsub-modal-wrapper hidden">
|
|
<div class="unsub-modal">
|
|
<h1 class="title dot">Unsubscribe</h1>
|
|
<p class="unsub-modal-caption">Are you sure you want to unsubscribe from <span>tiername</span>?
|
|
You will lose access to the perks associated with that tier.</p>
|
|
<div class="unsub-modal-button-wrapper">
|
|
<button class="cancel" id="unsubModalCloseButton">Cancel</button>
|
|
<button class="confirm" id="unsubModalConfirmButton">Unsubscribe</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="switch-tier-modal-wrapper hidden">
|
|
<div class="switch-tier-modal">
|
|
<h1 class="title dot">Change tier</h1>
|
|
<p class="switch-tier-modal-caption">Are you sure you want to unsubscribe
|
|
from <span class="oldtier">oldtiername</span> and subscribe to <span class="newtier">newtiername</span>?</p>
|
|
<div class="switch-tier-modal-button-wrapper">
|
|
<button class="cancel" id="switchTierCloseButton">Cancel</button>
|
|
<button class="confirm" id="switchTierConfirmButton">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/js/upgrade.js" /> |