Skip to content

Commit dd82027

Browse files
alexanderbyalexanderby
committed
Publish 2025-11-07
1 parent d5e6a1f commit dd82027

File tree

2 files changed

+65
-10
lines changed

2 files changed

+65
-10
lines changed

‎elements/pay-tiers.js‎

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,15 @@ const Prices = {
7878
CNY: '¥138.00',
7979
AUD: '$29.99',
8080
},
81+
SAVE: {
82+
USD: '$10.00',
83+
GBP: '£8.00',
84+
EUR: '€10.00',
85+
JPY: '¥1,500',
86+
CAD: '$13.00',
87+
CNY: '¥70.00',
88+
AUD: '$15.00',
89+
},
8190
};
8291

8392
const DEFAULT_CURRENCY = country === 'GB' ? 'GBP' : country === 'JP' ? 'JPY' : country === 'CA' ? 'CAD' : country === 'AU' ? 'AUD' : country === 'CN' ? 'CNY' : isEUCountry ? 'EUR' : 'USD';
@@ -104,10 +113,10 @@ const today = new Date();
104113
const formatDate = (locale) => today.toLocaleDateString(locale, { month: 'long', day: 'numeric' });
105114

106115
const takeCareMsgEnUS = [
107-
`Today is <strong>${formatDate('en-US')}</strong>, and we're kindly asking you to complete the payment to keep Dark Reader going.`,
108-
`For <strong>over 10 years</strong>, Dark Reader has helped millions of people with migraines, photophobia, and light sensitivity.`,
116+
`Today is <strong>${formatDate('en-US')}</strong>, and we kindly ask you to complete the payment to keep Dark Reader going.`,
117+
`<strong>Every day</strong>, Dark Reader helps millions of people with migraines, photophobia, and light sensitivity.`,
109118
`Please <strong>make a payment now</strong> or soon after trying the app.`,
110-
`Take part in spreading dark mode across the internet and help making the web easier on everyone's eyes.`,
119+
`Take part in spreading dark mode and making the internet easier on everyone's eyes.`,
111120
].join(' ');
112121

113122
const locales = {
@@ -124,6 +133,9 @@ const locales = {
124133
pay_with: '',
125134
price_per_user: '每位用户价格',
126135
region_currency: '货币',
136+
pay: '支付',
137+
save: '节省',
138+
hint: '在工作中使用？<br>请老板支付<br>辅助功能软件的费用。',
127139
we_take_care: '我们呵护您的眼睛，并提供尽可能最佳的暗黑模式。您的付款可帮助我们继续改进。',
128140
},
129141
de: {
@@ -133,11 +145,13 @@ const locales = {
133145
one_time: 'Einmalzahlung',
134146
price_per_user: 'Preis pro Benutzer',
135147
pay: 'Zahlen',
148+
save: 'Sparen',
149+
hint: 'Nutzung am Arbeitsplatz?<br>Bitten Sie Ihren Chef,<br>die Kosten für<br>Barrierefreiheits-<br>Software zu übernehmen.',
136150
we_take_care: [
137151
`Heute ist <strong>${formatDate('de')}</strong>, und wir bitten Sie höflich, die Zahlung abzuschließen, damit Dark Reader weiterlaufen kann.`,
138-
`Sei <strong>über 10 Jahren</strong>, hilft Dark Reader Millionen von Menschen mit Migräne, Photophobie und Lichtempfindlichkeit.`,
152+
`<strong>Tagtäglich</strong> hilft Dark Reader Millionen von Menschen mit Migräne, Photophobie und Lichtempfindlichkeit.`,
139153
`Bitte <strong>tätigen Sie jetzt oder</strong> kurz nach dem Ausprobieren der App eine Zahlung.`,
140-
`Beteiligen Sie sich an der Verbreitung des Dunkelmodus im Internet und helfen Sie dabei, das Web für alle Augen angenehmer zu gestalten.`,
154+
`Hilf mit, den Dunkelmodus zu verbreiten und das Internet augenschonender zu gestalten.`,
141155
].join(' '),
142156
},
143157
fr: {
@@ -147,6 +161,8 @@ const locales = {
147161
one_time: 'Paiement unique',
148162
price_per_user: 'Prix par utilisateur',
149163
pay: 'Payer',
164+
save: 'Économisez',
165+
hint: `Vous l'utilisez au travail?<br>Demandez à votre patron<br>de payer le logiciel<br>d'accessibilité.`,
150166
we_take_care: [
151167
`Aujourd'hui c'est <strong>${formatDate('fr')}</strong>, et nous vous demandons de bien vouloir effectuer le paiement pour que Dark Reader continue.`,
152168
`Depuis <strong>plus de 10 ans</strong>, Dark Reader a aidé des millions de personnes souffrant de migraines, de photophobie et de sensibilité à la lumière.`,
@@ -161,6 +177,8 @@ const locales = {
161177
one_time: 'Pago único',
162178
price_per_user: 'Precio por usuario',
163179
pay: 'Pagar',
180+
save: 'Ahorra',
181+
hint: '¿Lo usas en el trabajo?<br>Pídele a tu jefe que<br>pague el software de<br>accesibilidad.',
164182
we_take_care: [
165183
`Hoy es <strong>${formatDate('es')}</strong>, y te pedimos que completes el pago para que Dark Reader siga funcionando.`,
166184
`For <strong>más de 10 años</strong>, Dark Reader ha ayudado a millones de personas con migrañas, fotofobia y sensibilidad a la luz.`,
@@ -175,6 +193,8 @@ const locales = {
175193
one_time: 'Eenmalige betaling',
176194
price_per_user: 'Prijs per gebruiker',
177195
pay: 'Betaling',
196+
save: 'Bespaar',
197+
hint: 'Gebruikt u het op het werk?<br>Vraag uw baas om<br>te betalen voor<br>toegankelijkheidssoftware.',
178198
we_take_care: [
179199
`Vandaag is het <strong>${formatDate('nl')}</strong>, en we vragen u vriendelijk om de betaling te voltooien om Dark Reader te kunnen blijven gebruiken.`,
180200
`Dark Reader helpt <strong>al meer dan 10 jaar</strong>, miljoenen mensen met migraine, fotofobie en lichtgevoeligheid.`,
@@ -189,6 +209,8 @@ const locales = {
189209
one_time: '1回限りの支払い',
190210
price_per_user: 'ユーザーあたりの価格',
191211
pay: '支払う',
212+
save: '節約',
213+
hint: '職場で使用していますか?<br>上司にアクセシビリティ<br>ソフトウェアの費用を負担<br>してもらいます。',
192214
we_take_care: [
193215
`今日は <strong>${formatDate('ja')}</strong>, Dark Readerを継続するために、お支払いを完了していただきますようお願いいたします。`,
194216
`Dark Readerは10年以上にわたり、片頭痛、羞明、光過敏症に悩む何百万人もの方々を支援してきました。`,
@@ -225,6 +247,7 @@ const htmlText = `
225247
<span class="tier__desc" data-text="regular">Individual use</span>
226248
<span class="tier__connect"></span>
227249
<span class="tier__price js-price-regular">${DEFAULT_PRICE_REGULAR}</span>
250+
<span class="tier__save"><span data-text="save">Save</span> <strong class="js-price-save">${Prices.SAVE[DEFAULT_CURRENCY]}</strong></span>
228251
</div>
229252
<div class="tier__bottom" data-text="one_time">
230253
One-time payment
@@ -247,6 +270,7 @@ const htmlText = `
247270
<span class="tier__desc" data-text="corporate">Organizations</span>
248271
<span class="tier__connect"></span>
249272
<span class="tier__price js-price-corporate">${DEFAULT_PRICE_CORP}</span>
273+
<span class="tier__hint" data-text="hint">Using at work?<br>Ask boss to pay<br>for accessibility<br>software.</span>
250274
</div>
251275
<div class="tier__bottom" data-text="price_per_user">
252276
Price per user
@@ -498,6 +522,31 @@ const cssText = `
498522
position: relative;
499523
top: 0.375rem;
500524
}
525+
.tier__save {
526+
background-color: hsl(165, 65%, 25%);
527+
border-radius: 0.25rem;
528+
color: hsl(130, 60%, 75%);
529+
display: none;
530+
font-size: 0.75rem;
531+
font-weight: bold;
532+
left: calc(100% + 0.5rem);
533+
padding: 0.5rem;
534+
position: absolute;
535+
text-align: center;
536+
top: 0;
537+
white-space: nowrap;
538+
}
539+
.tier__hint {
540+
display: none;
541+
font-size: 0.75rem;
542+
left: calc(100% + 0.5rem);
543+
line-height: 1;
544+
height: 1.5rem;
545+
position: absolute;
546+
text-align: left;
547+
top: 0.125rem;
548+
white-space: pre;
549+
}
501550
/*
502551
.tier:hover {
503552
color: white;
@@ -908,11 +957,17 @@ darkreader-donate-mascot {
908957
padding: 0rem;
909958
*/
910959
}
960+
.tier__save {
961+
display: inline-block;
962+
}
963+
.tier__hint {
964+
display: inline-block;
965+
}
911966
.button-wrapper {
912967
flex-direction: row;
913968
}
914969
.payment-wrapper {
915-
margin-left: 8rem;
970+
margin-left: 4rem;
916971
margin-top: 0.5rem;
917972
position: relative;
918973
}
@@ -985,6 +1040,7 @@ class PayTiersElement extends HTMLElement {
9851040
s('.js-price-regular').each((node) => node.textContent = Prices.REGULAR[currency]);
9861041
s('.js-price-discount').each((node) => node.textContent = Prices.DISCOUNT[currency]);
9871042
s('.js-price-corporate').each((node) => node.textContent = Prices.CORPORATE[currency]);
1043+
s('.js-price-save').each((node) => node.textContent = Prices.SAVE[currency]);
9881044
s('.js-currency-text').each((node) => node.textContent = currency);
9891045
};
9901046

‎support-us/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@
2727
<darkreader-pay-tiers align-left></darkreader-pay-tiers>
2828
<script type="module" src="/elements/pay-tiers.js"></script>
2929
<div>
30-
<p>
31-
By completing the payment you will be able to hide payment messages in the app.
32-
See <a href="https://darkreader.org/terms/" target="_blank">terms and conditions</a>.
33-
</p>
3430
<h3><img src="/images/darkreader-icon-256x256.png" style="height: 1em; width: 1em;"> Dark Reader</h3>
3531
<p>
3632
<ul>
@@ -54,6 +50,9 @@ <h3><img src="/images/darkreader-icon-256x256.png" style="height: 1em; width: 1e
5450
</li>
5551
</ul>
5652
</p>
53+
<p>
54+
See <a href="https://darkreader.org/terms/" target="_blank">terms and conditions</a>.
55+
</p>
5756
</div>
5857
</div>
5958

0 commit comments

Comments
 (0)