Skip to content

Commit fe9446d

Browse files
alexanderbyalexanderby
committed
Publish 2024-10-21
1 parent 1878731 commit fe9446d

File tree

1 file changed

+143
-32
lines changed

1 file changed

+143
-32
lines changed

‎qr/index.html‎

Lines changed: 143 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,13 @@
1818
<style>
1919
html {
2020
background-color: #141e24;
21+
-webkit-tap-highlight-color: transparent;
2122
}
2223

2324
body {
2425
background-color: #141e24;
25-
color: #c2bcb8;
26-
font-family: Helvetica Neue, sans-serif;
26+
color: #adaca5;
27+
font-family: system-ui, sans-serif;
2728
max-width: 40em;
2829
margin: 0 auto;
2930
padding: 1em
@@ -36,59 +37,169 @@
3637
color: #e96c4c;
3738
}
3839

39-
.banner,
40-
.banner__image {
41-
display: inline-block;
40+
.title {
41+
font-size: 2.15rem;
4242
margin: 0;
43-
width: 100%;
43+
}
44+
45+
.title-darkreader {
46+
color: #e96c4c;
47+
font-weight: 900;
48+
text-transform: uppercase;
49+
}
50+
51+
.title-mobile {
52+
color: white;
53+
font-weight: 100;
54+
text-transform: uppercase;
4455
}
4556

4657
a {
4758
color: #53a1b3;
59+
word-break: break-word;
60+
}
61+
62+
strong {
63+
color: #d2d1ca;
64+
}
65+
66+
.store-badge {
67+
display: inline-block;
68+
margin: 1rem 0;
69+
width: 16rem;
70+
}
71+
72+
.mini-instruction {
73+
align-items: center;
74+
color: white;
75+
display: flex;
76+
flex-direction: row;
77+
font-size: 3rem;
78+
gap: 1rem;
79+
margin: 1rem 0;
80+
}
81+
82+
.mini-instruction-icon {
83+
display: inline-block;
84+
height: 4rem;
85+
width: 4rem;
4886
}
4987
</style>
5088
</head>
5189

5290
<body>
53-
<a class="banner" href="/">
54-
<img class="banner__image" src="/images/darkreader-main.svg" />
55-
</a>
56-
57-
<h3>
58-
Please wait while you are being redirected...
59-
</h3>
60-
61-
<p>
62-
If you haven't been redirected automatically, please use the following installation links:
63-
</p>
64-
65-
<h3>Android</h3>
66-
<p>
67-
<a
68-
href="https://www.microsoft.com/edge/emmx/darkreadercollaboration">https://www.microsoft.com/edge/emmx/darkreadercollaboration</a>
69-
</p>
70-
71-
<h3>iOS & iPadOS</h3>
72-
<p>
73-
<a
74-
href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone">https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone</a>
75-
</p>
91+
<h1 class="title">
92+
<span class="title-darkreader">Dark Reader</span> <span class="title-mobile">Mobile</span>
93+
</h1>
94+
95+
<section id="ios-redirect" style="display: none;">
96+
<h3>
97+
Please wait while you are being redirected to the App Store
98+
</h3>
99+
<p>
100+
If you haven't been redirected automatically, please use the following link:<br>
101+
<a data-s="drios-qr-manual"
102+
href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone">
103+
<img src="/images/app-store-badge.svg" class="store-badge">
104+
</a><br>
105+
<a data-s="drios-qr-manual"
106+
href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180">
107+
https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180
108+
</a>
109+
</p>
110+
</section>
111+
112+
<section id="android-static" style="display: none;">
113+
<h3>Dark Reader for Android</h3>
114+
<p class="mini-instruction">
115+
<img class="mini-instruction-icon" src="/images/icon-android-dark.svg">
116+
➡
117+
<img class="mini-instruction-icon" src="/images/icon-edge-256x256.svg">
118+
➡
119+
<img class="mini-instruction-icon" src="/images/icon-256.png">
120+
</p>
121+
<p>
122+
Please follow this link to install <strong style="white-space: pre;">Microsoft Edge</strong> browser
123+
with <strong style="white-space: pre;">Dark Reader</strong> included:<br>
124+
<a data-s="drand-qr-badge"
125+
href="https://www.microsoft.com/edge/emmx/darkreadercollaboration">
126+
<img src="/images/google-play-badge.svg" class="store-badge">
127+
</a><br>
128+
<a data-s="drand-qr-text"
129+
href="https://www.microsoft.com/edge/emmx/darkreadercollaboration">
130+
https://www.microsoft.com/edge/emmx/darkreadercollaboration
131+
</a>
132+
</p>
133+
</section>
134+
135+
<section id="unrecognized">
136+
<h3>
137+
iOS & iPadOS
138+
</h3>
139+
<p>
140+
Please use the following link:<br>
141+
<a data-s="drios-qr-badge"
142+
href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180">
143+
<img src="/images/app-store-badge.svg" class="store-badge">
144+
</a><br>
145+
<a data-s="drios-qr-text"
146+
href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180">
147+
https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180
148+
</a>
149+
</p>
150+
<h3>Android</h3>
151+
<p class="mini-instruction">
152+
<img class="mini-instruction-icon" src="/images/icon-android-dark.svg">
153+
➡
154+
<img class="mini-instruction-icon" src="/images/icon-edge-256x256.svg">
155+
➡
156+
<img class="mini-instruction-icon" src="/images/icon-256.png">
157+
</p>
158+
<p>
159+
Please use the following link to install <strong style="white-space: pre;">Microsoft Edge</strong> browser
160+
with <strong style="white-space: pre;">Dark Reader</strong> included:<br>
161+
<a data-s="drand-qr-badge"
162+
href="https://www.microsoft.com/edge/emmx/darkreadercollaboration">
163+
<img src="/images/google-play-badge.svg" class="store-badge">
164+
</a><br>
165+
<a data-s="drand-qr-text"
166+
href="https://www.microsoft.com/edge/emmx/darkreadercollaboration">
167+
https://www.microsoft.com/edge/emmx/darkreadercollaboration
168+
</a>
169+
</p>
170+
</section>
76171

77172
<footer>
78173
<p>
79174
© 2024 Dark Reader Ltd
80175
</p>
81176
</footer>
82177

178+
<script>
179+
(() => {
180+
const sectionIosRedirect = document.getElementById('ios-redirect');
181+
const sectionAndroidStatic = document.getElementById('android-static');
182+
const sectionUnrecognized = document.getElementById('unrecognized');
183+
const ua = navigator.userAgent.toLocaleLowerCase();
184+
if (ua.includes('iphone')) {
185+
sectionIosRedirect.style.display = 'block';
186+
sectionAndroidStatic.style.display = 'none';
187+
sectionUnrecognized.style.display = 'none';
188+
} else if (ua.includes('android')) {
189+
sectionIosRedirect.style.display = 'none';
190+
sectionAndroidStatic.style.display = 'block';
191+
sectionUnrecognized.style.display = 'none';
192+
}
193+
})();
194+
</script>
195+
83196
<script type="module" src="/elements/stats.js"></script>
84197

85198
<script defer>
86199
setTimeout(() => {
87200
const ua = navigator.userAgent.toLocaleLowerCase();
88-
if (ua.includes('iphone') || ua.includes('macintosh')) {
201+
if (ua.includes('iphone')) {
89202
location.replace('https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone');
90-
} else if (ua.includes('android')) {
91-
location.replace('https://www.microsoft.com/edge/emmx/darkreadercollaboration');
92203
}
93204
}, 2000);
94205
</script>

0 commit comments

Comments
 (0)