Publish 2024-06-04

darkreader · Jun 4, 2024 · eda23b9 · eda23b9
1 parent fb677ae
commit eda23b9
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 20 deletions.
diff --git a/elements/stats.js b/elements/stats.js
@@ -1,6 +1,4 @@
 // @ts-check
-import {throttle} from './utils.js';
-
 const ERROR_HANDLING_ENABLED = false;
 
 /**
@@ -11,13 +9,13 @@ export function clicker(element, name) {
     if (!element) {
         return;
     }
-    element.addEventListener('mousedown', throttle(500, () => {
+    element.addEventListener('mousedown', () => {
         const path = location.pathname;
         const lang = navigator.language;
         const time = Intl.DateTimeFormat().resolvedOptions().timeZone;
         const params = encodeParams(name, path, lang, time);
         fetch(`https://count.darkreader.app/click/v1/${params}`);
-    }));
+    }, {once: true});
 }
 
 function viewer() {

diff --git a/images/paypal-honey-white.svg b/images/paypal-honey-white.svg
diff --git a/support-us/index.html b/support-us/index.html
@@ -31,14 +31,29 @@ <h2>
         Please choose a payment method that is more convenient to you.
     </p>
 
+    <p class="radio-group tiers">
+        <label class="radio-button">
+            <input type="radio" name="tier" value="tier-regular" checked>
+            Regular User
+        </label>
+        <label class="radio-button">
+            <input type="radio" name="tier" value="tier-corporate">
+            Corporate Users
+        </label>
+        <label class="radio-button">
+            <input type="radio" name="tier" value="tier-discount">
+            Discount %
+        </label>
+    </p>
+
     <div class="fieldset-wrapper">
-        <fieldset>
+        <fieldset data-payment-type="regular">
             <legend>
                 Debit or Credit Card
             </legend>
             <div>
                 <script async src="https://js.stripe.com/v3/buy-button.js"></script>
-                <stripe-buy-button buy-button-id="buy_btn_1PNyV1J3cD62eTib1OGUERwp"
+                <stripe-buy-button data-s="d-sup-reg" buy-button-id="buy_btn_1PNyV1J3cD62eTib1OGUERwp"
                     publishable-key="pk_live_51ObohOJ3cD62eTibxbj84lafYC7ZktQKHQwdQ3Aa4iDpmC20JpXrhi3ZUicme54JnqPPeE2mSzigodqHEeb0X9JN0073GoEqiP">
                 </stripe-buy-button>
             </div>
@@ -47,7 +62,7 @@ <h2>
             </small>
         </fieldset>
 
-        <fieldset>
+        <fieldset data-payment-type="regular">
             <legend>
                 PayPal
             </legend>
@@ -56,20 +71,20 @@ <h2>
                 <h4 class="region-title">
                     Region
                 </h4>
-                <p class="regions">
-                    <label class="region-button">
+                <p class="radio-group regions">
+                    <label class="radio-button">
                         <input type="radio" name="region" value="region-us">
                         <i class="flag flag-us"></i> US
                     </label>
-                    <label class="region-button">
+                    <label class="radio-button">
                         <input type="radio" name="region" value="region-uk">
                         <i class="flag flag-uk"></i> UK
                     </label>
-                    <label class="region-button">
+                    <label class="radio-button">
                         <input type="radio" name="region" value="region-eu">
                         <i class="flag flag-eu"></i> EU
                     </label>
-                    <label class="region-button">
+                    <label class="radio-button">
                         <input type="radio" name="region" value="region-other">
                         Other
                     </label>
@@ -79,7 +94,7 @@ <h4 class="region-title">
             <div class="pay-tab" data-region-tab="region-us">
                 <script
                     src="https://www.paypal.com/sdk/js?client-id=BAA-OLPq9GbKnbQlmUeauRL56qmH0iFUCnoYQEQfZ_l5_M5ICrlamnuNe5JxTyQb4ApuoPXsHp60xCmIdA&components=hosted-buttons&disable-funding=venmo&currency=USD"></script>
-                <div id="paypal-container-6GUZKB3ZK3ZEE"></div>
+                <div id="paypal-container-6GUZKB3ZK3ZEE" data-s="d-sup-pp"></div>
                 <script>
                     paypal.HostedButtons({
                         hostedButtonId: "6GUZKB3ZK3ZEE",
@@ -89,7 +104,7 @@ <h4 class="region-title">
             <div class="pay-tab" data-region-tab="region-uk">
                 <script
                     src="https://www.paypal.com/sdk/js?client-id=BAA-OLPq9GbKnbQlmUeauRL56qmH0iFUCnoYQEQfZ_l5_M5ICrlamnuNe5JxTyQb4ApuoPXsHp60xCmIdA&components=hosted-buttons&disable-funding=venmo&currency=GBP"></script>
-                <div id="paypal-container-DRE2J7DSGZ3EC"></div>
+                <div id="paypal-container-DRE2J7DSGZ3EC" data-s="d-sup-pp"></div>
                 <script>
                     paypal.HostedButtons({
                         hostedButtonId: "DRE2J7DSGZ3EC",
@@ -99,14 +114,92 @@ <h4 class="region-title">
             <div class="pay-tab" data-region-tab="region-eu">
                 <script
                     src="https://www.paypal.com/sdk/js?client-id=BAA-OLPq9GbKnbQlmUeauRL56qmH0iFUCnoYQEQfZ_l5_M5ICrlamnuNe5JxTyQb4ApuoPXsHp60xCmIdA&components=hosted-buttons&disable-funding=venmo&currency=EUR"></script>
-                <div id="paypal-container-364NSETFEQ4W2"></div>
+                <div id="paypal-container-364NSETFEQ4W2" data-s="d-sup-pp"></div>
                 <script>
                     paypal.HostedButtons({
                         hostedButtonId: "364NSETFEQ4W2",
                     }).render("#paypal-container-364NSETFEQ4W2")
                 </script>
             </div>
         </fieldset>
+
+        <fieldset data-payment-type="corporate">
+            <legend>
+                Corporate Users
+            </legend>
+            <p>
+                Annual subscription, price per user
+            </p>
+            <stripe-buy-button data-s="d-sup-corp" buy-button-id="buy_btn_1PO2eyJ3cD62eTibkh6iY28s"
+                publishable-key="pk_live_51ObohOJ3cD62eTibxbj84lafYC7ZktQKHQwdQ3Aa4iDpmC20JpXrhi3ZUicme54JnqPPeE2mSzigodqHEeb0X9JN0073GoEqiP">
+            </stripe-buy-button>
+
+            <small>
+                Powered by <strong>Stripe</strong>
+            </small>
+        </fieldset>
+
+        <fieldset data-payment-type="corporate">
+            <legend>
+                Special Pricing & Conditions
+            </legend>
+            <p>
+                Please contact us for information on individual terms, payment methods (like bank transfer) and
+                advertising on our website.
+            </p>
+            <p>
+                <a href="mailto:[email protected]?subject=[Corporate]%20Your%20Request">[email protected]</a>
+            </p>
+        </fieldset>
+
+        <fieldset data-payment-type="discount">
+            <legend>
+                Discount
+            </legend>
+            <p>
+                You can pay at a reduced price today
+            </p>
+            <div>
+                <s class="discount-strike">US$4.99</s>
+            </div>
+            <stripe-buy-button data-s="d-sup-disc" buy-button-id="buy_btn_1PO2MZJ3cD62eTib23eYPQ6D"
+                publishable-key="pk_live_51ObohOJ3cD62eTibxbj84lafYC7ZktQKHQwdQ3Aa4iDpmC20JpXrhi3ZUicme54JnqPPeE2mSzigodqHEeb0X9JN0073GoEqiP">
+            </stripe-buy-button>
+
+            <small>
+                Powered by <strong>Stripe</strong>
+            </small>
+        </fieldset>
+
+        <fieldset data-payment-type="discount">
+            <legend>
+                Honey
+            </legend>
+            <div>
+                <p>
+                    Save money with <a class="honey-link" href="https://www.joinhoney.com/darkreader"
+                        target="_blank" rel="noopener" data-s="h-sup-text">PayPal Honey</a>.
+                </p>
+                <p class="honey-logo-wrapper">
+                    <a href="https://www.joinhoney.com/darkreader" target="_blank" rel="noopener" data-s="h-sup-img"
+                        class="honey-logo-link">
+                        PayPal Honey
+                    </a>
+                </p>
+                <p>
+                    <strong>Automatically search and apply coupons</strong> on 30,000+ websites when you shop
+                    online.
+                </p>
+                <p>
+                    Earn <strong>Cash Back</strong> at your favorite stores.
+                    The app will <strong>detect a price drop</strong> for you.
+                </p>
+                <p>
+                    <a href="https://www.joinhoney.com/darkreader" target="_blank" rel="noopener"
+                        data-s="h-sup-text">Learn more</a>
+                </p>
+            </div>
+        </fieldset>
     </div>
 
     <footer>
@@ -123,4 +216,4 @@ <h4 class="region-title">
 
 </body>
 
-</html>
+</html>
diff --git a/support-us/style.css b/support-us/style.css
@@ -5,6 +5,7 @@
     --color-text: #53a1b3;
     --color-text-highlight: white;
     --color-accent: #e96c4c;
+    --color-honey: #f68623;
 }
 
 html {
@@ -79,22 +80,22 @@ legend {
     margin: 0.5rem 0 0 0;
 }
 
-.region-button {
+.radio-button {
     border-radius: 0.25rem;
     cursor: pointer;
     display: inline-block;
     padding: 0.5rem;
 }
 
-.region-button input {
+.radio-button input {
     display: none;
 }
 
-.region-button:hover {
+.radio-button:hover {
     background-color: var(--color-control-hover);
 }
 
-.region-button:has(:checked) {
+.radio-button:has(:checked) {
     background-color: var(--color-control);
     color: var(--color-text-highlight);
     font-weight: bold;
@@ -121,6 +122,22 @@ legend {
     background-image: url('../images/flag-eu-24x18.png');
 }
 
+[data-payment-type] {
+    display: none;
+}
+
+:has([value="tier-regular"]:checked)~* [data-payment-type="regular"] {
+    display: flex;
+}
+
+:has([value="tier-corporate"]:checked)~* [data-payment-type="corporate"] {
+    display: flex;
+}
+
+:has([value="tier-discount"]:checked)~* [data-payment-type="discount"] {
+    display: flex;
+}
+
 [data-region-tab] {
     display: none;
 }
@@ -168,6 +185,37 @@ legend {
     filter: invert(1) hue-rotate(180deg);
 }
 
+.discount-strike {
+    color: var(--color-accent);
+    font-size: 2rem;
+}
+
+.honey-link {
+    color: var(--color-honey);
+    font-weight: bold;
+}
+
+.honey-logo-wrapper {
+    text-align: center;
+}
+
+.honey-logo-link {
+    background-color: var(--color-honey);
+    background-image: url('../images/paypal-honey-white.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 62.5%;
+    border-radius: 0.5rem;
+    display: inline-block;
+    height: 10rem;
+    text-indent: -999rem;
+    width: 16rem;
+}
+
+.honey-logo-link:hover {
+    box-shadow: 0 0 0 1px white;
+}
+
 footer {
     font-size: 0.75rem;
     margin-top: 1rem;