Add iOS QR code

uku · Mar 5, 2024 · c9aa3eb · c9aa3eb
1 parent 91754c8
commit c9aa3eb
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -60,7 +60,10 @@
     "message": "Unblock Youku is now offering RIFT VPN for your phone, enjoy your favorite TV shows and music anytime, anywhere."
   },
   "rift_scan_message":{
-    "message": "Scan the QR code to download Android app: "
+    "message": "Scan for Android"
+  },
+  "rift_scan_ios_message":{
+    "message": "Scan for iOS"
   },
   "rift_qr_title":{
     "message": "Want to use it on your phone? "

diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
@@ -60,7 +60,10 @@
     "message": "Unblock Youku 现在为您的手机提供 RIFT VPN，随时随地畅享您喜爱的电视节目和音乐。"
   },
   "rift_scan_message":{
-    "message": "扫描二维码下载安卓应用："
+    "message": "扫描下载安卓客户端："
+  },
+  "rift_scan_ios_message":{
+    "message": "扫描下载苹果客户端："
   },
   "rift_qr_title":{
     "message": "想在手机上使用 Unblock Youku？"

diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json
@@ -60,7 +60,10 @@
     "message": "Unblock Youku 现在为您的手机提供 RIFT VPN，随时随地畅享您喜爱的电视节目和音乐。"
   },
   "rift_scan_message": {
-    "message": "扫描二维码下载安卓应用："
+    "message": "掃描下載安卓應用: "
+  },
+  "rift_scan_ios_message":{
+    "message": "掃描下載iOS應用: "
   },
   "rift_qr_title": {
     "message": "想在手机上使用 Unblock Youku？"

diff --git a/src/img/rift-vpn-qr-ios.jpg b/src/img/rift-vpn-qr-ios.jpg
diff --git a/src/popup.html b/src/popup.html
@@ -15,13 +15,26 @@
 
 <body>
     <div id="wrapper" class="container-fluid">
-        <div id="rift_qr">
+        <div id="qr_codes_container" style="text-align: left;">
+            <!-- Rift VPN QR code for general use -->
             <div><strong></strong><span class="label label-success">NEW</span></div>
-            <div class="text-center" style="margin-top:20px;margin-bottom:20px;">
-                <p id="rift_scan_message"></p>
-                <img src="img/rift-vpn-qr.png" alt="Rift VPN QR code">
+
+            <!-- Container for QR codes displayed side by side -->
+            <div style="display: flex; justify-content: space-around; align-items: flex-start; margin-top: 20px;">
+                <!-- Rift VPN QR code for general use -->
+                <div id="rift_qr" class="text-center">
+                    <p id="rift_scan_message"></p>
+                    <img src="img/rift-vpn-qr.png" alt="Rift VPN QR code" style="width: auto; height: 140px;">
+                </div>
+
+                <!-- iOS-specific Rift VPN QR code -->
+                <div id="rift_ios_qr" class="text-center">
+                    <p id="rift_scan_ios_message"></p>
+                    <img src="img/rift-vpn-qr-ios.jpg" alt="Rift VPN iOS QR code" style="width: auto; height: 140px;">
+                </div>
             </div>
         </div>
+
 
         <div id="intro" class="text-center"style="margin-top:20px;margin-bottom:20px;">
             <p id="rift_intro_message"></p>

diff --git a/src/popup.mjs b/src/popup.mjs
@@ -8,12 +8,13 @@ import * as Icon from './modules/_icon.mjs';
 // Set the translated texts for the options page
 (function() {
   const getMsg = chrome.i18n.getMessage;
-  $('div#rift_qr strong').html(getMsg('rift_qr_title'));
+  $('div#qr_codes_container strong').html(getMsg('rift_qr_title'));
   $('div#support strong').html(getMsg('support_title'));
   $('p#support_message').html(getMsg('support_message'));
   $('button#learn_rift_button').html(getMsg('learn_rift_button'));
   $('p#rift_intro_message').html(getMsg('rift_intro_message'));
   $('p#rift_scan_message').html(getMsg('rift_scan_message'));
+  $('p#rift_scan_ios_message').html(getMsg('rift_scan_ios_message'));
   $('a#support_link').attr('href', getMsg('donation_url'));
   $('button#support_button').html(getMsg('support_button'));