Skip to content

Commit 04f41cc

Browse files
alexanderbyalexanderby
committed
Publish 2024-09-26
1 parent 130748f commit 04f41cc

File tree

2 files changed

+65
-28
lines changed

2 files changed

+65
-28
lines changed

‎elements/pay-tiers.js‎

Lines changed: 64 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -101,12 +101,15 @@ const locales = {
101101
cn: {
102102
heading: '支付 Dark Reader 使用费',
103103
heading_short: '使用费',
104-
regular: '定期使用',
105-
discount: '偶尔使用',
106-
corporate: '企业用户',
104+
regular: '个人使用',
105+
discount: '折扣',
106+
corporate: '对于组织',
107107
card: '借记卡或信用卡',
108108
card_short: '支付',
109109
more: '更多的选择',
110+
one_time: '一次性付款',
111+
pay_with: '',
112+
price_per_user: '每位用户价格',
110113
},
111114
};
112115

@@ -128,27 +131,42 @@ const htmlText = `
128131
</div>
129132
<div class="tiers">
130133
<label class="tier">
131-
<input type="radio" name="tier" value="${Tiers.REGULAR}" checked>
132-
<span class="tier__desc" data-text="regular">Regular use</span>
133-
<span class="tier__connect"></span>
134-
<span class="tier__price js-price-regular">${DEFAULT_PRICE_REGULAR}</span>
134+
<div class="tier__top">
135+
<input type="radio" name="tier" value="${Tiers.REGULAR}" checked>
136+
<span class="tier__desc" data-text="regular">Individual use</span>
137+
<span class="tier__connect"></span>
138+
<span class="tier__price js-price-regular">${DEFAULT_PRICE_REGULAR}</span>
139+
</div>
140+
<div class="tier__bottom" data-text="one_time">
141+
One-time payment
142+
</div>
135143
</label>
136-
<label class="tier">
137-
<input type="radio" name="tier" value="${Tiers.DISCOUNT}">
138-
<span class="tier__desc" data-text="discount">Occasional use</span>
139-
<span class="tier__connect"></span>
140-
<span class="tier__price js-price-discount">${DEFAULT_PRICE_DISCOUNT}</span>
144+
<label class="tier" style="display: none;">
145+
<div class="tier__top">
146+
<input type="radio" name="tier" value="${Tiers.DISCOUNT}">
147+
<span class="tier__desc" data-text="discount">Discount</span>
148+
<span class="tier__connect"></span>
149+
<span class="tier__price js-price-discount">${DEFAULT_PRICE_DISCOUNT}</span>
150+
</div>
151+
<div class="tier__bottom" data-text="one_time">
152+
One-time payment
153+
</div>
141154
</label>
142155
<label class="tier">
143-
<input type="radio" name="tier" value="${Tiers.CORPORATE}">
144-
<span class="tier__desc" data-text="corporate">Corporate users</span>
145-
<span class="tier__connect"></span>
146-
<span class="tier__price js-price-corporate">${DEFAULT_PRICE_CORP}</span>
156+
<div class="tier__top">
157+
<input type="radio" name="tier" value="${Tiers.CORPORATE}">
158+
<span class="tier__desc" data-text="corporate">Organizations</span>
159+
<span class="tier__connect"></span>
160+
<span class="tier__price js-price-corporate">${DEFAULT_PRICE_CORP}</span>
161+
</div>
162+
<div class="tier__bottom" data-text="price_per_user">
163+
Price per user
164+
</div>
147165
</label>
148166
</div>
149167
<div class="button-wrapper">
150168
<a class="button-link button-link--paypal js-link-paypal" href="${DEFAULT_LINK_PAYPAL}" target="_blank" rel="noopener" data-s="d-side-paypal">
151-
<span class="button-link__text">Pay with <span class="button-link__text--paypal">PayPal</span></span>
169+
<span class="button-link__text"><span data-text="pay_with">Pay with</span> <span class="button-link__text--paypal">PayPal</span></span>
152170
</a>
153171
<a class="button-link button-link--card js-link-stripe" href="${DEFAULT_LINK_STRIPE}" target="_blank" rel="noopener" data-s="d-side-stripe">
154172
<i class="button-link__card-icon js-card-icon"></i>
@@ -266,20 +284,30 @@ const cssText = `
266284
width: 100%;
267285
}
268286
.tier {
269-
align-items: center;
270287
cursor: pointer;
271288
display: inline-flex;
272-
height: 1.5rem;
289+
flex-direction: column;
290+
padding: 0.25rem 0;
291+
}
292+
.tier__top {
293+
align-items: center;
294+
display: flex;
273295
flex-direction: row;
274296
gap: 0.25rem;
297+
line-height: 1;
275298
position: relative;
276299
transition: all 125ms;
277300
width: 100%;
278301
}
302+
.tier__bottom {
303+
font-size: 0.75rem;
304+
line-height: 1;
305+
margin-left: 1.25rem;
306+
}
279307
.tier input {
280308
display: none;
281309
}
282-
.tier::before {
310+
.tier__top::before {
283311
background-color: transparent;
284312
border: 1px solid var(--color-control);
285313
border-radius: 50%;
@@ -289,17 +317,19 @@ const cssText = `
289317
flex: none;
290318
height: 1rem;
291319
line-height: 1rem;
320+
position: relative;
292321
text-align: center;
322+
top: 0.375rem;
293323
transition: all 125ms;
294324
width: 1rem;
295325
}
296-
.tier:has(:checked)::before {
326+
.tier__top:has(:checked)::before {
297327
background-color: var(--color-control);
298328
}
299-
.tier:has(:checked) .tier__connect {
329+
.tier__top:has(:checked) .tier__connect {
300330
border-bottom-color: white;
301331
}
302-
.tier:has(:checked)::after {
332+
.tier__top:has(:checked)::after {
303333
background-color: transparent;
304334
border-left: 2px solid white;
305335
border-bottom: 2px solid white;
@@ -308,7 +338,7 @@ const cssText = `
308338
height: 0.25rem;
309339
left: 0.175rem;
310340
position: absolute;
311-
top: 0.5rem;
341+
top: 0.625rem;
312342
transform-origin: 50% 50%;
313343
transform: rotate(-45deg);
314344
width: 0.5rem;
@@ -327,13 +357,17 @@ const cssText = `
327357
flex: auto;
328358
height: 0;
329359
opacity: 0.5;
360+
position: relative;
361+
top: 0.375rem;
330362
width: 100%;
331363
}
332364
.tier__price {
333365
display: inline-block;
334366
flex: none;
335367
font-weight: bold;
336368
justify-self: flex-end;
369+
position: relative;
370+
top: 0.375rem;
337371
}
338372
/*
339373
.tier:hover {
@@ -500,17 +534,20 @@ const cssText = `
500534
.currency-button {
501535
cursor: pointer;
502536
display: inline-block;
503-
filter: grayscale(1) brightness(0.75);
537+
filter: grayscale(1);
504538
flex: none;
539+
opacity: 0.5;
505540
}
506541
.currency-button input {
507542
display: none;
508543
}
509544
.currency-button:has(:checked) {
510545
filter: none;
546+
opacity: 1;
511547
}
512548
.currency-button:not(:has(:checked)):hover {
513549
filter: none;
550+
opacity: 0.75;
514551
}
515552
.currencies__currency-connect {
516553
border-bottom: 1px dotted var(--color-text);
@@ -767,11 +804,11 @@ class PayTiersElement extends HTMLElement {
767804
});
768805
s('.js-link-paypal').each((node) => {
769806
/** @type {HTMLAnchorElement} */(node).href = tier === Tiers.DISCOUNT ? Links.PayPal.DISCOUNT[currency] : Links.PayPal.REGULAR[currency];
770-
node.classList.toggle('button-link--inactive', tier === Tiers.CORPORATE || currency === 'CNY');
807+
node.classList.toggle('button-link--inactive', tier === Tiers.CORPORATE);
771808
});
772809
s('.js-link-other').each((node) => {
773810
/** @type {HTMLAnchorElement} */(node).href = tier === Tiers.DISCOUNT ? Links.Redirect.DISCOUNT : tier === Tiers.CORPORATE ? Links.Redirect.CORPORATE : Links.Redirect.REGULAR;
774-
node.classList.toggle('button-link--inactive', tier !== Tiers.CORPORATE && currency !== 'CNY');
811+
node.classList.toggle('button-link--inactive', tier !== Tiers.CORPORATE);
775812
});
776813

777814
s('.js-price-regular').each((node) => node.textContent = Prices.REGULAR[currency]);

‎plus/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ <h3 class="slogan">
8484
insertCarouselCard();
8585
</script>
8686
</div>
87-
<div class="carousel-card" style="--bg: hsl(165, 25%, 10%); --text: hsl(80, 25%, 50%);">
87+
<div class="carousel-card" style="--bg: hsl(210, 25%, 10%); --text: hsl(80, 25%, 50%);">
8888
<script>
8989
insertCarouselCard();
9090
</script>

0 commit comments

Comments
 (0)