Skip to content

Commit eda23b9

Browse files
alexanderbyalexanderby
committed
Publish 2024-06-04
1 parent fb677ae commit eda23b9

File tree

4 files changed

+160
-20
lines changed

4 files changed

+160
-20
lines changed

‎elements/stats.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
// @ts-check
2-
import {throttle} from './utils.js';
3-
42
const ERROR_HANDLING_ENABLED = false;
53

64
/**
@@ -11,13 +9,13 @@ export function clicker(element, name) {
119
if (!element) {
1210
return;
1311
}
14-
element.addEventListener('mousedown', throttle(500, () => {
12+
element.addEventListener('mousedown', () => {
1513
const path = location.pathname;
1614
const lang = navigator.language;
1715
const time = Intl.DateTimeFormat().resolvedOptions().timeZone;
1816
const params = encodeParams(name, path, lang, time);
1917
fetch(`https://count.darkreader.app/click/v1/${params}`);
20-
}));
18+
}, {once: true});
2119
}
2220

2321
function viewer() {

‎images/paypal-honey-white.svg

Lines changed: 1 addition & 0 deletions
Loading

‎support-us/index.html

Lines changed: 105 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,29 @@ <h2>
3131
Please choose a payment method that is more convenient to you.
3232
</p>
3333

34+
<p class="radio-group tiers">
35+
<label class="radio-button">
36+
<input type="radio" name="tier" value="tier-regular" checked>
37+
Regular User
38+
</label>
39+
<label class="radio-button">
40+
<input type="radio" name="tier" value="tier-corporate">
41+
Corporate Users
42+
</label>
43+
<label class="radio-button">
44+
<input type="radio" name="tier" value="tier-discount">
45+
Discount %
46+
</label>
47+
</p>
48+
3449
<div class="fieldset-wrapper">
35-
<fieldset>
50+
<fieldset data-payment-type="regular">
3651
<legend>
3752
Debit or Credit Card
3853
</legend>
3954
<div>
4055
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
41-
<stripe-buy-button buy-button-id="buy_btn_1PNyV1J3cD62eTib1OGUERwp"
56+
<stripe-buy-button data-s="d-sup-reg" buy-button-id="buy_btn_1PNyV1J3cD62eTib1OGUERwp"
4257
publishable-key="pk_live_51ObohOJ3cD62eTibxbj84lafYC7ZktQKHQwdQ3Aa4iDpmC20JpXrhi3ZUicme54JnqPPeE2mSzigodqHEeb0X9JN0073GoEqiP">
4358
</stripe-buy-button>
4459
</div>
@@ -47,7 +62,7 @@ <h2>
4762
</small>
4863
</fieldset>
4964

50-
<fieldset>
65+
<fieldset data-payment-type="regular">
5166
<legend>
5267
PayPal
5368
</legend>
@@ -56,20 +71,20 @@ <h2>
5671
<h4 class="region-title">
5772
Region
5873
</h4>
59-
<p class="regions">
60-
<label class="region-button">
74+
<p class="radio-group regions">
75+
<label class="radio-button">
6176
<input type="radio" name="region" value="region-us">
6277
<i class="flag flag-us"></i> US
6378
</label>
64-
<label class="region-button">
79+
<label class="radio-button">
6580
<input type="radio" name="region" value="region-uk">
6681
<i class="flag flag-uk"></i> UK
6782
</label>
68-
<label class="region-button">
83+
<label class="radio-button">
6984
<input type="radio" name="region" value="region-eu">
7085
<i class="flag flag-eu"></i> EU
7186
</label>
72-
<label class="region-button">
87+
<label class="radio-button">
7388
<input type="radio" name="region" value="region-other">
7489
Other
7590
</label>
@@ -79,7 +94,7 @@ <h4 class="region-title">
7994
<div class="pay-tab" data-region-tab="region-us">
8095
<script
8196
src="https://www.paypal.com/sdk/js?client-id=BAA-OLPq9GbKnbQlmUeauRL56qmH0iFUCnoYQEQfZ_l5_M5ICrlamnuNe5JxTyQb4ApuoPXsHp60xCmIdA&components=hosted-buttons&disable-funding=venmo&currency=USD"></script>
82-
<div id="paypal-container-6GUZKB3ZK3ZEE"></div>
97+
<div id="paypal-container-6GUZKB3ZK3ZEE" data-s="d-sup-pp"></div>
8398
<script>
8499
paypal.HostedButtons({
85100
hostedButtonId: "6GUZKB3ZK3ZEE",
@@ -89,7 +104,7 @@ <h4 class="region-title">
89104
<div class="pay-tab" data-region-tab="region-uk">
90105
<script
91106
src="https://www.paypal.com/sdk/js?client-id=BAA-OLPq9GbKnbQlmUeauRL56qmH0iFUCnoYQEQfZ_l5_M5ICrlamnuNe5JxTyQb4ApuoPXsHp60xCmIdA&components=hosted-buttons&disable-funding=venmo&currency=GBP"></script>
92-
<div id="paypal-container-DRE2J7DSGZ3EC"></div>
107+
<div id="paypal-container-DRE2J7DSGZ3EC" data-s="d-sup-pp"></div>
93108
<script>
94109
paypal.HostedButtons({
95110
hostedButtonId: "DRE2J7DSGZ3EC",
@@ -99,14 +114,92 @@ <h4 class="region-title">
99114
<div class="pay-tab" data-region-tab="region-eu">
100115
<script
101116
src="https://www.paypal.com/sdk/js?client-id=BAA-OLPq9GbKnbQlmUeauRL56qmH0iFUCnoYQEQfZ_l5_M5ICrlamnuNe5JxTyQb4ApuoPXsHp60xCmIdA&components=hosted-buttons&disable-funding=venmo&currency=EUR"></script>
102-
<div id="paypal-container-364NSETFEQ4W2"></div>
117+
<div id="paypal-container-364NSETFEQ4W2" data-s="d-sup-pp"></div>
103118
<script>
104119
paypal.HostedButtons({
105120
hostedButtonId: "364NSETFEQ4W2",
106121
}).render("#paypal-container-364NSETFEQ4W2")
107122
</script>
108123
</div>
109124
</fieldset>
125+
126+
<fieldset data-payment-type="corporate">
127+
<legend>
128+
Corporate Users
129+
</legend>
130+
<p>
131+
Annual subscription, price per user
132+
</p>
133+
<stripe-buy-button data-s="d-sup-corp" buy-button-id="buy_btn_1PO2eyJ3cD62eTibkh6iY28s"
134+
publishable-key="pk_live_51ObohOJ3cD62eTibxbj84lafYC7ZktQKHQwdQ3Aa4iDpmC20JpXrhi3ZUicme54JnqPPeE2mSzigodqHEeb0X9JN0073GoEqiP">
135+
</stripe-buy-button>
136+
137+
<small>
138+
Powered by <strong>Stripe</strong>
139+
</small>
140+
</fieldset>
141+
142+
<fieldset data-payment-type="corporate">
143+
<legend>
144+
Special Pricing & Conditions
145+
</legend>
146+
<p>
147+
Please contact us for information on individual terms, payment methods (like bank transfer) and
148+
advertising on our website.
149+
</p>
150+
<p>
151+
<a href="mailto:[email protected]?subject=[Corporate]%20Your%20Request">[email protected]</a>
152+
</p>
153+
</fieldset>
154+
155+
<fieldset data-payment-type="discount">
156+
<legend>
157+
Discount
158+
</legend>
159+
<p>
160+
You can pay at a reduced price today
161+
</p>
162+
<div>
163+
<s class="discount-strike">US$4.99</s>
164+
</div>
165+
<stripe-buy-button data-s="d-sup-disc" buy-button-id="buy_btn_1PO2MZJ3cD62eTib23eYPQ6D"
166+
publishable-key="pk_live_51ObohOJ3cD62eTibxbj84lafYC7ZktQKHQwdQ3Aa4iDpmC20JpXrhi3ZUicme54JnqPPeE2mSzigodqHEeb0X9JN0073GoEqiP">
167+
</stripe-buy-button>
168+
169+
<small>
170+
Powered by <strong>Stripe</strong>
171+
</small>
172+
</fieldset>
173+
174+
<fieldset data-payment-type="discount">
175+
<legend>
176+
Honey
177+
</legend>
178+
<div>
179+
<p>
180+
Save money with <a class="honey-link" href="https://www.joinhoney.com/darkreader"
181+
target="_blank" rel="noopener" data-s="h-sup-text">PayPal Honey</a>.
182+
</p>
183+
<p class="honey-logo-wrapper">
184+
<a href="https://www.joinhoney.com/darkreader" target="_blank" rel="noopener" data-s="h-sup-img"
185+
class="honey-logo-link">
186+
PayPal Honey
187+
</a>
188+
</p>
189+
<p>
190+
<strong>Automatically search and apply coupons</strong> on 30,000+ websites when you shop
191+
online.
192+
</p>
193+
<p>
194+
Earn <strong>Cash Back</strong> at your favorite stores.
195+
The app will <strong>detect a price drop</strong> for you.
196+
</p>
197+
<p>
198+
<a href="https://www.joinhoney.com/darkreader" target="_blank" rel="noopener"
199+
data-s="h-sup-text">Learn more</a>
200+
</p>
201+
</div>
202+
</fieldset>
110203
</div>
111204

112205
<footer>
@@ -123,4 +216,4 @@ <h4 class="region-title">
123216

124217
</body>
125218

126-
</html>
219+
</html>

‎support-us/style.css

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
--color-text: #53a1b3;
66
--color-text-highlight: white;
77
--color-accent: #e96c4c;
8+
--color-honey: #f68623;
89
}
910

1011
html {
@@ -79,22 +80,22 @@ legend {
7980
margin: 0.5rem 0 0 0;
8081
}
8182

82-
.region-button {
83+
.radio-button {
8384
border-radius: 0.25rem;
8485
cursor: pointer;
8586
display: inline-block;
8687
padding: 0.5rem;
8788
}
8889

89-
.region-button input {
90+
.radio-button input {
9091
display: none;
9192
}
9293

93-
.region-button:hover {
94+
.radio-button:hover {
9495
background-color: var(--color-control-hover);
9596
}
9697

97-
.region-button:has(:checked) {
98+
.radio-button:has(:checked) {
9899
background-color: var(--color-control);
99100
color: var(--color-text-highlight);
100101
font-weight: bold;
@@ -121,6 +122,22 @@ legend {
121122
background-image: url('../images/flag-eu-24x18.png');
122123
}
123124

125+
[data-payment-type] {
126+
display: none;
127+
}
128+
129+
:has([value="tier-regular"]:checked)~* [data-payment-type="regular"] {
130+
display: flex;
131+
}
132+
133+
:has([value="tier-corporate"]:checked)~* [data-payment-type="corporate"] {
134+
display: flex;
135+
}
136+
137+
:has([value="tier-discount"]:checked)~* [data-payment-type="discount"] {
138+
display: flex;
139+
}
140+
124141
[data-region-tab] {
125142
display: none;
126143
}
@@ -168,6 +185,37 @@ legend {
168185
filter: invert(1) hue-rotate(180deg);
169186
}
170187

188+
.discount-strike {
189+
color: var(--color-accent);
190+
font-size: 2rem;
191+
}
192+
193+
.honey-link {
194+
color: var(--color-honey);
195+
font-weight: bold;
196+
}
197+
198+
.honey-logo-wrapper {
199+
text-align: center;
200+
}
201+
202+
.honey-logo-link {
203+
background-color: var(--color-honey);
204+
background-image: url('../images/paypal-honey-white.svg');
205+
background-position: center;
206+
background-repeat: no-repeat;
207+
background-size: 62.5%;
208+
border-radius: 0.5rem;
209+
display: inline-block;
210+
height: 10rem;
211+
text-indent: -999rem;
212+
width: 16rem;
213+
}
214+
215+
.honey-logo-link:hover {
216+
box-shadow: 0 0 0 1px white;
217+
}
218+
171219
footer {
172220
font-size: 0.75rem;
173221
margin-top: 1rem;

0 commit comments

Comments
 (0)