|
| 1 | +// @ts-check |
| 2 | + |
| 3 | +import './sponsors-graph.js'; |
| 4 | +import './sponsors-top-short.js'; |
| 5 | +import './pay-tiers.js'; |
| 6 | +import {country, isEUCountry, isHCountry, isPCountry} from './locales.js'; |
| 7 | +import {clicker} from './stats.js'; |
| 8 | +import { |
| 9 | + createHTMLElement as html, |
| 10 | +} from './utils.js'; |
| 11 | + |
| 12 | +const safariURL = 'https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone'; |
| 13 | +const edgeURL = 'https://www.microsoft.com/edge/emmx/darkreadercollaboration'; |
| 14 | + |
| 15 | +const isEdge = navigator.userAgent.includes('Edg'); |
| 16 | +const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrom'); |
| 17 | +const language = navigator.language || 'en'; |
| 18 | + |
| 19 | +const buttonIcon = `<span class="b-icon${isEdge ? ' b-icon--edge' : isSafari ? ' b-icon--safari' : ''}"></span>`; |
| 20 | + |
| 21 | +const htmlText = ` |
| 22 | +<section class="mob"> |
| 23 | + <div class="mob-subtitle"> |
| 24 | + <div class="mob-subtitle__news"> |
| 25 | + Breaking News |
| 26 | + </div> |
| 27 | + <a class="mob-text-link" href="${edgeURL}" target="_blank" rel="noopener" data-s="drand-side-text"> |
| 28 | + <span class="mob-text-link__darkreader">Dark Reader</span> is now<br>available for |
| 29 | + <span class="mob-text-link__android">Android</span>! |
| 30 | + </a> |
| 31 | + </div> |
| 32 | + <div class="mob-badge-wrapper"> |
| 33 | + <a class="mob-badge-link" href="${edgeURL}" target="_blank" rel="noopener" data-s="drand-side-badge"> |
| 34 | + <img src="/images/google-play-badge.svg"> |
| 35 | + </a> |
| 36 | + </div> |
| 37 | + <div class="mob-description"> |
| 38 | + <a href="${edgeURL}" target="_blank" rel="noopener" data-s="drand-side-text"> |
| 39 | + Check out exclusive <strong>Premium Themes & Custom Colors</strong> |
| 40 | + </a> |
| 41 | + </div> |
| 42 | + <div class="mob-qr-2"> |
| 43 | + <img class="just-qr" src="/images/qr-code.png"> |
| 44 | + <div class="mob-description"> |
| 45 | + Simply <strong>scan the QR code</strong> to install on your phone |
| 46 | + </div> |
| 47 | + </div> |
| 48 | + <div class="mob-qr"> |
| 49 | + <div class="mob-qr-wrapper"> |
| 50 | + <img src="/images/plus-screen-1.png" class="mob-screenshot mob-screenshot--visible"> |
| 51 | + <img src="/images/plus-screen-3.png" class="mob-screenshot"> |
| 52 | + <img src="/images/plus-screen-2.png" class="mob-screenshot"> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + <div class="mob-description"> |
| 56 | + Browser extensions for Android |
| 57 | + are brought to you by<br> |
| 58 | + <i class="mob-description__edge-icon"></i> <strong>Microsoft Edge</strong> |
| 59 | + </div> |
| 60 | + <div class="mob-description"> |
| 61 | + Having iPhone or iPad? |
| 62 | + <a href="${safariURL}" target="_blank" rel="noopener" data-s="drios-side-text"> |
| 63 | + Download on the App Store |
| 64 | + </a> |
| 65 | + </div> |
| 66 | +</section> |
| 67 | +`; |
| 68 | + |
| 69 | +const outlineFilter = 'drop-shadow(0.0625rem 0 0 hsla(0, 0%, 100%, 1)) drop-shadow(-0.0625rem 0 0 hsla(0, 0%, 100%, 1)) drop-shadow(0 0.0625rem 0 hsla(0, 0%, 100%, 1)) drop-shadow(0 -0.0625rem 0 hsla(0, 0%, 100%, 1))'; |
| 70 | + |
| 71 | +const cssText = ` |
| 72 | +a { |
| 73 | + color: var(--color-text); |
| 74 | + outline: none; |
| 75 | + transition: color 125ms; |
| 76 | +} |
| 77 | +a:hover { |
| 78 | + color: var(--color-text-hover); |
| 79 | +} |
| 80 | +:host { |
| 81 | + width: 16rem; |
| 82 | +} |
| 83 | +.heading { |
| 84 | + color: var(--color-highlight); |
| 85 | + font-size: 1.05rem; |
| 86 | + line-height: 1.25rem; |
| 87 | + margin: 0 0 0.75rem 0; |
| 88 | + -webkit-text-stroke: 0.0625rem; |
| 89 | + text-transform: uppercase; |
| 90 | +} |
| 91 | +section { |
| 92 | + align-items: center; |
| 93 | + display: flex; |
| 94 | + flex-direction: column; |
| 95 | + margin-bottom: 0.75rem; |
| 96 | + position: relative; |
| 97 | +} |
| 98 | +
|
| 99 | +.mob { |
| 100 | + align-items: center; |
| 101 | + gap: 1rem; |
| 102 | + margin-top: 1rem; |
| 103 | + width: 14rem; |
| 104 | +} |
| 105 | +.mob-subtitle { |
| 106 | + font-weight: bold; |
| 107 | + text-align: center; |
| 108 | + width: 100%; |
| 109 | +} |
| 110 | +.mob-subtitle__news { |
| 111 | + background-color: var(--color-highlight); |
| 112 | + color: white; |
| 113 | + font-size: 1.25rem; |
| 114 | + font-weight: bold; |
| 115 | + margin: 0 auto 0.5rem auto; |
| 116 | + text-align: center; |
| 117 | + transform: skewX(-10deg); |
| 118 | + width: 100%; |
| 119 | +} |
| 120 | +.mob-text-link { |
| 121 | + border-bottom: 1px solid transparent; |
| 122 | + text-decoration: none; |
| 123 | +} |
| 124 | +.mob-text-link__darkreader { |
| 125 | + color: var(--color-highlight); |
| 126 | + font-weight: bold; |
| 127 | + text-transform: uppercase; |
| 128 | + transition: color 125ms; |
| 129 | + -webkit-text-stroke: 0.0625rem; |
| 130 | +} |
| 131 | +.mob-text-link__android { |
| 132 | + color: #61dc6e; |
| 133 | + font-weight: bold; |
| 134 | + text-transform: uppercase; |
| 135 | + transition: color 125ms; |
| 136 | + -webkit-text-stroke: 0.0625rem; |
| 137 | +} |
| 138 | +.mob-text-link:hover { |
| 139 | + border-bottom-color: var(--color-text-hover); |
| 140 | + transition: all 125ms; |
| 141 | +} |
| 142 | +.mob-text-link:hover .mob-text-link__darkreader, |
| 143 | +.mob-text-link:hover .mob-text-link__android { |
| 144 | + color: var(--color-text-hover); |
| 145 | +} |
| 146 | +.mob-badge-wrapper { |
| 147 | + text-align: center; |
| 148 | + width: 100%; |
| 149 | +} |
| 150 | +.mob-badge-link { |
| 151 | + border-radius: 0.4rem; |
| 152 | + box-shadow: 0 0 0 0.0625rem hsla(0, 0%, 100%, 0), 0 0 0 var(--color-text); |
| 153 | + display: inline-flex; |
| 154 | + position: relative; |
| 155 | + transition: all 125ms; |
| 156 | + width: 11rem; |
| 157 | +} |
| 158 | +.mob-badge-link img { |
| 159 | + display: inline-block; |
| 160 | + width: 100%; |
| 161 | +} |
| 162 | +.mob-badge-link:hover { |
| 163 | + box-shadow: 0 0 0 0.0625rem hsla(0, 0%, 100%, 1), 0 0 0.75rem var(--color-text); |
| 164 | +} |
| 165 | +.mob-description { |
| 166 | + text-align: center; |
| 167 | + width: 100%; |
| 168 | +} |
| 169 | +.mob-description__edge-icon { |
| 170 | + background-image: url(/images/icon-edge-256x256.svg); |
| 171 | + background-position: center; |
| 172 | + background-repeat: no-repeat; |
| 173 | + background-size: contain; |
| 174 | + display: inline-block; |
| 175 | + height: 1rem; |
| 176 | + width: 1rem; |
| 177 | +} |
| 178 | +.mob-qr-2 { |
| 179 | + align-items: center; |
| 180 | + display: flex; |
| 181 | + flex-direction: row; |
| 182 | +} |
| 183 | +.just-qr { |
| 184 | + border-radius: 5%; |
| 185 | + box-shadow: 0 0.25rem 1rem black; |
| 186 | + display: inline-block; |
| 187 | + float: left; |
| 188 | + height: 6.5rem; |
| 189 | + margin-left: 0.5rem; |
| 190 | + margin-right: 0.5rem; |
| 191 | + width: 6.5rem; |
| 192 | +} |
| 193 | +.mob-qr { |
| 194 | + align-items: center; |
| 195 | + background-image: linear-gradient(150deg, var(--color-control), var(--color-bg)); |
| 196 | + bottom: 0.5rem; |
| 197 | + border-radius: 1rem; |
| 198 | + box-shadow: 0 0.25rem 1rem black; |
| 199 | + display: flex; |
| 200 | + flex-direction: column; |
| 201 | + font-size: 0.75rem; |
| 202 | + font-weight: bold; |
| 203 | + justify-content: center; |
| 204 | + margin: 0; |
| 205 | + padding: 0.0625rem; |
| 206 | + text-align: center; |
| 207 | +} |
| 208 | +.mob-qr-wrapper { |
| 209 | + align-items: center; |
| 210 | + background-color: black; |
| 211 | + border-radius: 0.9125rem; |
| 212 | + display: flex; |
| 213 | + flex-direction: column; |
| 214 | + gap: 0.5rem; |
| 215 | + justify-content: center; |
| 216 | + overflow: hidden; |
| 217 | + padding: 0.125rem; |
| 218 | + position: relative; |
| 219 | + top: 0rem; |
| 220 | +} |
| 221 | +.mob-qr-wrapper::before { |
| 222 | + background-color: black; |
| 223 | + border-radius: 0.175rem; |
| 224 | + content: ""; |
| 225 | + height: 0.375rem; |
| 226 | + position: absolute; |
| 227 | + top: 0.5rem; |
| 228 | + width: 1.75rem; |
| 229 | +} |
| 230 | +.mob-screenshot { |
| 231 | + border-radius: 0.7875rem; |
| 232 | + display: block; |
| 233 | + height: auto; |
| 234 | + opacity: 1; |
| 235 | + transition: opacity 500ms; |
| 236 | + width: 13rem; |
| 237 | +} |
| 238 | +.mob-screenshot:not(:first-child) { |
| 239 | + left: 0.125rem; |
| 240 | + opacity: 0; |
| 241 | + position: absolute; |
| 242 | + top: 0.125rem; |
| 243 | +} |
| 244 | +.mob-screenshot:not(:first-child).mob-screenshot--visible { |
| 245 | + opacity: 1; |
| 246 | +} |
| 247 | +`; |
| 248 | + |
| 249 | +class MobileSideElement extends HTMLElement { |
| 250 | + constructor() { |
| 251 | + super(); |
| 252 | + const shadowRoot = this.attachShadow({mode: 'open'}); |
| 253 | + const style = html('style', {}, cssText); |
| 254 | + shadowRoot.append(style); |
| 255 | + style.insertAdjacentHTML('afterend', htmlText); |
| 256 | + |
| 257 | + shadowRoot.querySelectorAll('[data-s]').forEach((node) => clicker(node, node.getAttribute('data-s') ?? '')); |
| 258 | + |
| 259 | + shadowRoot.host.classList.toggle('c-cn', document.documentElement.lang === 'zh-CN'); |
| 260 | + |
| 261 | + let i = 0; |
| 262 | + const images = shadowRoot.querySelectorAll('.mob-screenshot'); |
| 263 | + setInterval(() => { |
| 264 | + i++; |
| 265 | + if (i === images.length) { |
| 266 | + i = 0; |
| 267 | + } |
| 268 | + images.forEach((el, j) => { |
| 269 | + el.classList.toggle('mob-screenshot--visible', i === j); |
| 270 | + }); |
| 271 | + }, 4000); |
| 272 | + } |
| 273 | +} |
| 274 | + |
| 275 | +customElements.define('darkreader-mobile-side', MobileSideElement); |
0 commit comments