Add Masked Level & Bing Map Lang

contents/lang_cn.js

@@ -67,10 +67,13 @@ export default {
     Congrats: "恭喜呀！",
     OhNo_Message: "你当前似乎没有翻墙，部分内容无法显示。",
     Congrats_Message: "你当前已经翻墙，欢迎来到新世界。",
-    maskedInfoTitle: "隐藏成功",
-    maskedInfoMessage:"信息已隐藏，现在可以安心截图了。",
+    maskedInfoTitle_1: "IP 隐藏成功",
+    maskedInfoMessage_1:"IP 信息已隐藏，截图时请注意隐私。",
+    maskedInfoTitle: "全部隐藏成功",
+    maskedInfoMessage:"所有信息已隐藏，现在可以安心截图了。",
     unmaskedInfoTitle: "取消隐藏",
     unmaskedInfoMessage:"信息已显示，截图时请注意隐私。",
+
   },
   page: {
     title:

contents/lang_en.js

@@ -69,10 +69,13 @@ export default {
       "You seem to be not connected to a VPN/proxy, some content may not be displayed.",
     Congrats_Message:
       "You are now connected to a VPN/proxy, welcome to the new world.",
-      maskedInfoTitle: "Infos masked",
-      maskedInfoMessage:"Information has been masked, you can now safely take screenshots.",
+      maskedInfoTitle_1: "IP masked",
+      maskedInfoMessage_1:"IP information has been masked, please be careful when taking screenshots.",
+      maskedInfoTitle: "All infos masked",
+      maskedInfoMessage:"All information has been masked, you can now safely take screenshots.",
       unmaskedInfoTitle: "Infos Unmasked",
       unmaskedInfoMessage:"Information has been unmasked, please be careful when taking screenshots.",
+
   },
   page: {
     title:

index.html

@@ -260,9 +260,10 @@
     </div>
 
     <!-- Info Mask BTN-->
-    <button v-if="isInfosLoaded" class="btn position-fixed" :class="isInfoMasked ? ' btn-secondary' : 'btn-success'"
-      style="bottom: 66px; right: 20px; z-index: 1050;" @click="toggleInfoMask">
-      <i :class="isInfoMasked ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
+    <button v-if="isInfosLoaded" class="btn position-fixed" 
+    :class="infoMaskLevel === 0 ? 'btn-success' : infoMaskLevel === 1 ? 'btn-warning' : 'btn-secondary'" 
+    style="bottom: 66px; right: 20px; z-index: 1050;" @click="toggleInfoMask">  
+      <i :class="infoMaskLevel === 0 ? 'bi bi-eye' : 'bi bi-eye-slash'"></i>
     </button>
 
     <!-- Search BTN -->
@@ -381,7 +382,7 @@
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
+        navigator.serviceWorker.register('service-worker.js').then(function (registration) {
           console.log('ServiceWorker Success : ', registration.scope);
         }, function (err) {
           console.log('ServiceWorker Error: ', err);

res/app.js

@@ -20,6 +20,7 @@ new Vue({
     inputIP: "",
     inputBingMapAPIKEY: "",
     bingMapAPIKEYError: false,
+    bingMapLanguage: "en",
     modalQueryResult: null,
     modalQueryError: "",
     isMapShown: false,
@@ -28,6 +29,7 @@ new Vue({
     isCardsCollapsed: false,
     isInfoMasked: false,
     isInfosLoaded: false,
+    infoMaskLevel: 0,
 
     // from contents
     connectivityTests,
@@ -164,7 +166,7 @@ new Vue({
           card.mapUrl = "";
         } else {
           card.asnlink = `https://radar.cloudflare.com/traffic/${card.asn}`;
-          card.mapUrl = `https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/${card.latitude},${card.longitude}/5?mapSize=800,640&pp=${card.latitude},${card.longitude};66&key=${this.bingMapAPIKEY}&fmt=jpeg&dpi=Large`;
+          card.mapUrl = `https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/${card.latitude},${card.longitude}/5?mapSize=800,640&pp=${card.latitude},${card.longitude};66&key=${this.bingMapAPIKEY}&fmt=jpeg&dpi=Large&c=${this.bingMapLanguage}`;
 
           // 可选改成 Google Maps 内嵌 iFrame
           // card.mapUrl = `https://www.google.com/maps?q=${card.latitude},${card.longitude}&z=2&output=embed`;
@@ -526,8 +528,10 @@ new Vue({
       const browserLanguage = navigator.language || navigator.userLanguage;
       if (browserLanguage.includes("zh")) {
         this.currentLanguage = "cn";
+        this.bingMapLanguage = "zh";
       } else {
         this.currentLanguage = "en";
+        this.bingMapLanguage = "en";
       }
     },
     updatePageTitle(lang) {
@@ -555,61 +559,81 @@ new Vue({
     },
     // 信息遮罩
     toggleInfoMask() {
-      this.isInfoMasked = !this.isInfoMasked;
-      if (this.isInfoMasked) {
+      // this.isInfoMasked = !this.isInfoMasked;
+      if (this.infoMaskLevel === 0) {
         this.originipDataCards = JSON.parse(JSON.stringify(this.ipDataCards));
         this.originstunServers = JSON.parse(JSON.stringify(this.stunServers));
         this.originleakTest = JSON.parse(JSON.stringify(this.leakTest));
+        this.infoMask();
+        this.alertStyle = "text-warning";
+        this.alertMessage = this.currentTexts.alert.maskedInfoMessage_1;
+        this.alertTitle = this.currentTexts.alert.maskedInfoTitle_1;
+        this.alertToShow = true;
+        this.showToast();
+        // this.isInfoMasked = true;
+      } else if (this.infoMaskLevel === 1) {
         this.infoMask();
         this.alertStyle = "text-success";
         this.alertMessage = this.currentTexts.alert.maskedInfoMessage;
         this.alertTitle = this.currentTexts.alert.maskedInfoTitle;
         this.alertToShow = true;
         this.showToast();
+        // this.isInfoMasked = true;
       } else {
         this.infoUnmask();
-        this.alertStyle = "text-success";
+        this.alertStyle = "text-danger";
         this.alertMessage = this.currentTexts.alert.unmaskedInfoMessage;
         this.alertTitle = this.currentTexts.alert.unmaskedInfoTitle;
         this.alertToShow = true;
         this.showToast();
+        // this.isInfoMasked = false;
       }
     },
     infoMask() {
-      this.ipDataCards.forEach((card) => {
-        card.ip = "8.8.8.8";
-        card.country_name = "United States";
-        card.country_code = "US";
-        card.region = "California";
-        card.city = "Mountain View";
-        card.latitude = "37.40599";
-        card.longitude = "-122.078514";
-        card.isp = "Google LLC";
-        card.asn = "AS15169";
-        card.mapUrl = "res/defaultMap.jpg";
-      });
-      this.stunServers.forEach((server) => {
-        server.ip = "100.100.200.100";
-      });
-      this.leakTest.forEach((server) => {
-        server.geo = "United States";
-        server.ip = "12.34.56.78";
+      if (this.infoMaskLevel === 0) {
+        this.ipDataCards.forEach((card) => {
+          card.ip = "8.8.8.8";
+        });
+        this.stunServers.forEach((server) => {
+          server.ip = "100.100.200.100";
+        });
+        this.leakTest.forEach((server) => {
+          server.ip = "12.34.56.78";
+        }
+        );
+        this.infoMaskLevel = 1;
+      } else if (this.infoMaskLevel === 1) {
+        this.ipDataCards.forEach((card) => {
+          card.country_name = "United States";
+          card.country_code = "US";
+          card.region = "California";
+          card.city = "Mountain View";
+          card.latitude = "37.40599";
+          card.longitude = "-122.078514";
+          card.isp = "Google LLC";
+          card.asn = "AS15169";
+          card.mapUrl = "res/defaultMap.jpg";
+        });
+        this.leakTest.forEach((server) => {
+          server.geo = "United States";
+        });
+        this.infoMaskLevel = 2;
       }
-      );
     },
     infoUnmask() {
       this.ipDataCards = JSON.parse(JSON.stringify(this.originipDataCards));
       this.stunServers = JSON.parse(JSON.stringify(this.originstunServers));
       this.leakTest = JSON.parse(JSON.stringify(this.originleakTest));
+      this.infoMaskLevel = 0;
     },
 
+    // Bing Map 相关
     addBingMapKey() {
-
       if (this.isValidKey(this.inputBingMapAPIKEY)) {
         this.bingMapAPIKEY = this.inputBingMapAPIKEY;
         this.ipDataCards.forEach((card) => {
           if (card.latitude && card.longitude) {
-            card.mapUrl = `https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/${card.latitude},${card.longitude}/5?mapSize=800,640&pp=${card.latitude},${card.longitude};66&key=${this.bingMapAPIKEY}&fmt=jpeg&dpi=Large`;
+            card.mapUrl = `https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/${card.latitude},${card.longitude}/5?mapSize=800,640&pp=${card.latitude},${card.longitude};66&key=${this.bingMapAPIKEY}&fmt=jpeg&dpi=Large&c=${this.bingMapLanguage}`;
           }
         }
         );
@@ -638,6 +662,20 @@ new Vue({
       const keyPattern = /^[A-Za-z0-9_-]{64}$/;
       return keyPattern.test(key);
     },
+
+    // refreshAll() {
+    //   this.checkAllIPs();
+    //   setTimeout(() => {
+    //     this.checkAllConnectivity();
+    //   }, 2500);
+    //   setTimeout(() => {
+    //     this.checkAllWebRTC();
+    //   }, 4000);
+    //   setTimeout(() => {
+    //     this.checkAllDNSLeakTest();
+    //   }, 2500);
+    // },
+
   },
 
   created() {
@@ -693,7 +731,7 @@ new Vue({
     }, 6000);
     setTimeout(() => {
       this.isInfosLoaded = true;
-    }, 6500);
+    }, 6000);
     const modalElement = document.getElementById("IPCheck");
     modalElement.addEventListener("hidden.bs.modal", this.resetModalData);
     const bingMapAPIKEYElement = document.getElementById("addBingMapKey");