Publish 2024-10-17

Author: alexanderby

elements/mobile-side.js

@@ -310,11 +310,16 @@ section {
     /* -webkit-text-stroke: 0.0625rem; */
 }
 
+/*
 @media (max-height: 50rem) {
     .mob-qr {
         display: none;
     }
 }
+*/
+.mob-qr {
+    display: none;
+}
 `;
 
 class MobileSideElement extends HTMLElement {

elements/mobile-top-short.js

@@ -7,6 +7,7 @@ import {
 } from './utils.js';
 import {clicker} from './stats.js';
 
+const edgeURL = 'https://www.microsoft.com/edge/emmx/darkreadercollaboration';
 const safariURL = 'https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone';
 // const isEdge = navigator.userAgent.includes('Edg');
 const isMobile = navigator.userAgent.includes('Mobile');
@@ -19,30 +20,50 @@ const htmlText = `
             <div class="notch"></div>
             <div class="top">
                 <span class="darkreader">Dark Reader</span>
-                <span class="mobile">for iOS</span>
+                <span class="mobile">Mobile</span>
             </div>
             <div class="text js-text">
                 Take care of your eyes when browsing on your phone
             </div>
+            <div class="qr">
+                <img src="/images/qr-code.png">
+                Scan & Install
+            </div>
+        </div>
+    </div>
+    <div class="links-block">
+        <div class="android-wrapper">
+            <strong class="android-new-text">NEW</strong><br>
+            <i class="edge-icon"></i> <strong>Microsoft Edge</strong><br>
+            supports browser<br>
+            add-ons on <i class="android-icon"></i> <strong>Android</strong>
+            <div class="badge-wrapper">
+                <a class="badge-link" href="${edgeURL}" target="_blank" rel="noopener" data-s="drand-top-short">
+                    <img src="/images/google-play-badge.svg">
+                </a>
+            </div>
+        </div>
+        <div class="ios-wrapper">
+            <strong>Install for iPhone & iPad</strong>
             <div class="badge-wrapper">
                 <a class="badge-link" href="${safariURL}" target="_blank" rel="noopener" data-s="drios-top-short">
                     <img src="/images/app-store-badge.svg">
                 </a>
             </div>
         </div>
-        <div class="qr">
-            Scan & Install<br>
-            <img src="/images/qr-code.png">
-        </div>
     </div>
 </section>`;
 
 const cssText = `
 :host {
     --bezel: 0.125rem;
     --color-bezel: var(--color-control, #316d7c);
+    --phone-height: 18.5rem;
+    --phone-width: 15rem;
 }
 .container {
+    display: flex;
+    flex-direction: row;
     position: relative;
 }
 .phone {
@@ -53,14 +74,15 @@ const cssText = `
     box-shadow: 0 0 1rem black;
     box-sizing: border-box;
     display: flex;
+    flex: none;
     flex-direction: column;
-    height: 12.5rem;
+    height: var(--phone-height);
     justify-content: center;
-    margin-right: 1rem;
-    margin-top: 1rem;
+    margin-right: 2rem;
     position: relative;
-    width: 16rem;
+    width: var(--phone-width);
 }
+/*
 .phone::after {
     background-image: linear-gradient(to top, var(--color-bg) 1rem, #141e2400);
     bottom: -1rem;
@@ -71,6 +93,7 @@ const cssText = `
     position: absolute;
     width: 18rem;
 }
+*/
 .screen {
     align-items: center;
     background-image: linear-gradient(to bottom, var(--color-bg), black);
@@ -80,11 +103,11 @@ const cssText = `
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    height: 12rem;
+    height: calc(var(--phone-height) - 0.5rem);
     justify-content: flex-start;
     margin: 0.5rem auto 0 auto;
-    padding: 2rem 1rem 0 1rem;
-    width: 15rem;
+    padding: 2rem 0 0 0;
+    width: calc(var(--phone-width) - 1rem);
 }
 .notch {
     background-color: black;
@@ -98,7 +121,7 @@ const cssText = `
     width: 4rem;
 }
 .top {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
 }
 .top .darkreader {
     color: var(--color-highlight);
@@ -109,8 +132,10 @@ const cssText = `
 .top .mobile {
     color: white;
     font-weight: 400;
+    text-transform: uppercase;
 }
 .text {
+    color: var(--color-text);
     margin-top: 0.25rem;
     text-align: center;
 }
@@ -121,8 +146,6 @@ const cssText = `
     border-radius: 0.675rem;
     box-shadow: 0 0 0 0.0625rem hsla(0, 0%, 100%, 0), 0 0 0 var(--color-text);
     display: inline-flex;
-    position: relative;
-    top: 1rem;
     transition: all 125ms;
     width: 11rem;
     z-index: 1;
@@ -135,24 +158,47 @@ const cssText = `
     box-shadow: 0 0 0 0.0625rem hsla(0, 0%, 100%, 1), 0 0 0.75rem var(--color-text);
 }
 .qr {
-    bottom: 0.5rem;
-    font-size: 1.2rem;
-    font-weight: 300;
-    right: -11rem;
+    color: white;
+    font-weight: bold;
     margin: 0;
-    position: absolute;
     text-align: center;
 }
 .qr img {
     border-radius: 5%;
     box-shadow: 0 0 1rem black;
     display: block;
-    height: 7rem;
+    height: 8rem;
     margin: 0.5rem auto;
-    width: 7rem;
+    width: 8rem;
 }
-.qr {
-    display: none;
+.links-block {
+    color: var(--color-text);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.edge-icon {
+    background-image: url(/images/icon-edge-256x256.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+}
+.android-icon {
+    background-image: url(/images/icon-android-dark.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+}
+.android-new-text {
+    color: var(--color-highlight);
+    font-size: 1.2rem;
+    -webkit-text-stroke: 0.0625rem;
 }
 `;
 

elements/pay-tiers.js

@@ -110,14 +110,21 @@ const locales = {
         one_time: '一次性付款',
         pay_with: '',
         price_per_user: '每位用户价格',
+        region_currency: '货币',
+        we_take_care: '我们呵护您的眼睛，并提供尽可能最佳的暗黑模式。您的付款可帮助我们继续改进。',
     },
 };
 
 const htmlText = `
 <section class="pr">
     <div class="pr-wrapper">
         <h2 class="pr-heading" data-text="heading">Pay for using <span class="pr-heading__darkreader">Dark Reader</span></h2>
+        <div class="pr-description" data-text="we_take_care">
+            We take care of your eyes and provide the best dark mode possible.
+            Your payment helps us continue making enhancements.
+        </div>
         <div class="currencies">
+            <span class="currencies__text" data-text="region_currency">Currency</span>
             ${currencyButton('USD', 'flag-us')}
             ${currencyButton('EUR', 'flag-eu')}
             ${currencyButton('GBP', 'flag-uk')}
@@ -241,6 +248,12 @@ const cssText = `
     width: 2.75rem;
 }
 */
+.pr-description {
+    display: none;
+    line-height: 1;
+    margin: 0.25rem 0 0.5rem 0;
+    text-align: center;
+}
 .tiers {
     align-items: stretch;
     display: flex;
@@ -513,6 +526,10 @@ const cssText = `
     filter: none;
     opacity: 0.75;
 }
+.currencies__text {
+    display: none;
+    font-weight: 300;
+}
 .currencies__currency-connect {
     border-bottom: 1px dotted var(--color-text);
     /* display: inline-block; */
@@ -638,6 +655,47 @@ const cssText = `
     -webkit-text-stroke: unset;
     transform: none;
 }
+
+/* Verbose */
+:host([verbose]) {
+    container-type: normal;
+
+    .pr {
+        max-width: 100%;
+    }
+    .pr-wrapper {
+        margin: 0 auto;
+        max-width: 100%;
+        width: 32rem;
+    }
+    .pr-heading {
+        font-size: 2.1rem;
+        line-height: 1;
+        text-align: center;
+        -webkit-text-stroke: 0.125rem;
+    }
+    .pr-description {
+        display: block;
+    }
+    .currencies {
+        justify-content: center;
+    }
+    .currencies__text {
+        display: inline-block;
+    }
+    .tiers {
+        flex-direction: row;
+        justify-content: space-between;
+        margin: 1rem 0;
+    }
+    .tier {
+        padding: 0 1rem;
+        width: 100%;
+    }
+    .button-wrapper {
+        flex-direction: row;
+    }
+}
 `;
 
 class PayTiersElement extends HTMLElement {

elements/sponsors-top-short.js

@@ -78,6 +78,9 @@ const htmlText = `
                 </span>
             </div>
         </a>
+        <div class="pie-rating">
+            <span class="stars">★★★★★</span> 4.8 stars on Chrome Web Store
+        </div>
     </div>
 </section>`;
 
@@ -330,6 +333,7 @@ const cssText = `
     text-transform: uppercase;
 }
 .pie-top-message {
+    color: var(--color-text);
     text-align: center;
     width: 16rem;
 }
@@ -340,6 +344,15 @@ const cssText = `
 .pie-top-message .text-link:hover {
     color: white;
 }
+.pie-rating {
+    color: var(--color-text);
+    font-size: 0.75rem;
+    line-height: 1;
+    margin-top: 0.25rem;
+}
+.stars {
+    color: #fd2;
+}
 :host([horizontal]) .container {
     height: 9rem;
     padding: 1rem;