Skip to content

Воронков Валерий / krystalvpn

Go to a project
Toggle navigation
Toggle navigation pinning
Commit e8c5a706 by xcoder
Options

Add click handler for google play block; change svg block for ru and en

1 parent 1f2758c1
Expand all
Inline Side-by-side
Showing 5 changed files with 161 additions and 23 deletions
assets/_background_2.svg deleted 100644 → 0
This diff could not be displayed because it is too large.
index.html
......@@ -226,8 +226,8 @@
компьютеры, роутеры и многие другие девайсы.
</article>
<div class="gp-wrapper">
<img src="./assets/google_play.svg" alt="google play">
<div class="gp-wrapper" onclick="do_download()">
<img data-gp="ggl" src="./assets/google_play_ru.svg" alt="google play">
</div>
<div class="gp-code-wrapper">
......
index.js
......@@ -13,16 +13,45 @@ const langArr = [
},
];
window.onload = function() {
const key = "KRYSTALVPN";
window.onload = function () {
let position = null;
try {
position = JSON.parse(localStorage.getItem(key));
} catch (error) {
console.log("localStorage is not supported");
}
if (position != null) {
setOriented(position);
}
set_current_year();
};
window.addEventListener("resize", () => {
let position = null;
try {
position = JSON.parse(localStorage.getItem(key));
} catch (error) {
console.log("localStorage is not supported");
}
setOriented(position);
});
function do_download() {
window.open("https://play.google.com/store/apps/details?id=com.krystal.vpn");
}
function openLang(platform) {
const dropdownMenu = platform === "desktop" ? document.querySelector(".dropdown-menu") : document.querySelector(".dropdown-menu.mobile");
const dropdownMenu =
platform === "desktop"
? document.querySelector(".dropdown-menu")
: document.querySelector(".dropdown-menu.mobile");
if (platform === "mobile") {
const mobArrow = document.querySelector(".chevron.mobile");
......@@ -42,25 +71,40 @@ function switchLang(lang, platform) {
const ddMobile = document.querySelector("#langSwitcherMobile");
if (dd != null) {
const title = langArr.filter(elem => elem.lang === lang)[0].title;
const title = langArr.filter((elem) => elem.lang === lang)[0].title;
dd.innerHTML = title;
const activeLang = langArr.filter(elem => elem.lang !== lang)[0].lang;
const activeLangNode = document.querySelector(`[data-lang=${CSS.escape(activeLang)}]`);
const activeLang = langArr.filter((elem) => elem.lang !== lang)[0].lang;
const activeLangNode = document.querySelector(
`[data-lang=${CSS.escape(activeLang)}]`
);
if (activeLangNode != null) {
activeLangNode.classList.remove("active");
}
const langNode = document.querySelector(`[data-lang=${CSS.escape(lang)}]`);
const googlePlayImg = document.querySelector("[data-gp=ggl]");
if (langNode != null) {
langNode.classList.add("active");
}
if (googlePlayImg != null) {
if (activeLang === "en") {
googlePlayImg.src = "assets/google_play_ru.svg";
}
if (activeLang === "ru") {
googlePlayImg.src = "assets/google_play.svg";
}
}
for (const key in langDict) {
const langNode = document.querySelector(`[data-lang=${CSS.escape(key)}]`);
const langNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(key)}]`);
const langNodeMobile = document.querySelector(
`[data-lang-mobile=${CSS.escape(key)}]`
);
if (langNode != null) {
const translate = langDict[key][lang];
......@@ -77,28 +121,55 @@ function switchLang(lang, platform) {
langNodeMobile.innerHTML = translate;
}
}
if (googlePlayImg != null) {
if (activeLang === "en") {
googlePlayImg.src = "assets/google_play_ru.svg";
}
if (activeLang === "ru") {
googlePlayImg.src = "assets/google_play.svg";
}
}
}
}
if (ddMobile != null) {
const title = langArr.filter(elem => elem.lang === lang)[0].titleMobile;
const title = langArr.filter((elem) => elem.lang === lang)[0].titleMobile;
ddMobile.innerHTML = title;
const activeLang = langArr.filter(elem => elem.lang !== lang)[0].lang;
const activeLangNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(activeLang)}]`);
const activeLang = langArr.filter((elem) => elem.lang !== lang)[0].lang;
const activeLangNodeMobile = document.querySelector(
`[data-lang-mobile=${CSS.escape(activeLang)}]`
);
if (activeLangNodeMobile != null) {
activeLangNodeMobile.classList.remove("active");
}
const langNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(lang)}]`);
const langNodeMobile = document.querySelector(
`[data-lang-mobile=${CSS.escape(lang)}]`
);
const googlePlayImg = document.querySelector("[data-gp=ggl]");
if (langNodeMobile != null) {
langNodeMobile.classList.add("active");
}
if (googlePlayImg != null) {
if (activeLang === "en") {
googlePlayImg.src = "assets/google_play_ru.svg";
}
if (activeLang === "ru") {
googlePlayImg.src = "assets/google_play.svg";
}
}
for (const key in langDict) {
const langNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(key)}]`);
const langNodeMobile = document.querySelector(
`[data-lang-mobile=${CSS.escape(key)}]`
);
if (langNodeMobile != null) {
const translate = langDict[key][lang];
......@@ -123,6 +194,8 @@ function switchLang(lang, platform) {
if (dropdownMenuMobile.classList.contains("show")) {
dropdownMenuMobile.classList.remove("show");
}
switchMobileMenu();
}
if (platform === "mobile") {
......@@ -157,32 +230,77 @@ function switchMobileMenu() {
let portrait = window.matchMedia("(orientation: portrait)");
portrait.addEventListener("change", function(e) {
if(e.matches) {
portrait.addEventListener("change", function (e) {
if (e.matches) {
// Portrait mode
console.log("Portrait mode");
try {
localStorage.setItem(key, JSON.stringify("Portrait"));
} catch (error) {
console.log("localStorage is not supported");
}
setOriented("Portrait");
} else {
// Landscape
console.log("Landscape");
try {
localStorage.setItem(key, JSON.stringify("Landscape"));
} catch (error) {
console.log("localStorage is not supported");
}
setOriented("Landscape");
}
});
function setOriented(position) {
if (position === "Landscape" && mobileCheck()) {
const main = document.querySelector(".main");
const header = document.querySelector("header");
const mobileСrossWrapper = document.querySelector(".mobile-cross-wrapper");
if (main != null) {
main.classList.remove("oriented")
main.classList.add("oriented");
}
if (header != null) {
header.classList.remove("oriented")
header.classList.add("oriented");
}
} else {
// Landscape
console.log("Landscape");
if (mobileСrossWrapper != null) {
mobileСrossWrapper.classList.add("oriented");
}
}
else {
const main = document.querySelector(".main");
const header = document.querySelector("header");
const mobileСrossWrapper = document.querySelector(".mobile-cross-wrapper");
if (main != null) {
main.classList.add("oriented")
main.classList.remove("oriented");
}
if (header != null) {
header.classList.add("oriented")
header.classList.remove("oriented");
}
if (mobileСrossWrapper != null) {
mobileСrossWrapper.classList.remove("oriented");
}
});
}
}
function mobileCheck() {
let check = false;
(function(a){
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
check = true;
})(navigator.userAgent||navigator.vendor||window.opera);
var sizeCheck = ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) ;
return check || sizeCheck;
}
\ No newline at end of file
style.css
......@@ -404,6 +404,24 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
.opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .mobile-cross-wrapper.oriented {
display: block;
padding: 20px 0 0 0;
cursor: pointer;
}
.opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .mobile-cross-wrapper.oriented > img {
width: 34px;
}
.opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .menu
> span
> a {
......@@ -951,6 +969,8 @@ article.notation-one {
.main > .main-second > .card.descr > .gp-wrapper {
margin-bottom: 24px;
cursor: pointer;
}
.main > .main-second > .card.descr > .gp-code-wrapper {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!