Skip to content

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

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

VPN-45 A bunch of fixes for desktop and mobile

1 parent b34435f7
Inline Side-by-side
Showing 4 changed files with 328 additions and 162 deletions
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="image/svg+xml" href="favicons/favicon.svg" rel="icon" /> <link type="image/svg+xml" href="favicons/favicon.svg" rel="icon" />
<link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css?ver=1.08" /> <link rel="stylesheet" href="style.css?ver=1.15" />
<title>KrystalVPN</title> <title>KrystalVPN</title>
</head> </head>
<body> <body>
...@@ -43,17 +43,19 @@ ...@@ -43,17 +43,19 @@
Русский Русский
</div> </div>
<div class="dropdown-menu" aria-labelledby="langSwitcher"> <div class="dropdown-menu" aria-labelledby="langSwitcher">
<span <a
class="dropdown-item active" class="dropdown-item active"
data-lang="ru" data-lang="ru"
onclick="switchLang('ru', 'desktop')" onclick="switchLang('ru', 'desktop')"
>Русский</span href=""
>Русский</a
> >
<span <a
class="dropdown-item" class="dropdown-item"
data-lang="en" data-lang="en"
onclick="switchLang('en', 'desktop')" onclick="switchLang('en', 'desktop')"
>English</span href="./index_en.html"
>English</a
> >
</div> </div>
</div> </div>
...@@ -97,17 +99,19 @@ ...@@ -97,17 +99,19 @@
RU RU
</div> </div>
<div class="dropdown-menu mobile" aria-labelledby="langSwitcher"> <div class="dropdown-menu mobile" aria-labelledby="langSwitcher">
<span <a
class="dropdown-item active" class="dropdown-item active"
data-lang-mobile="ru" data-lang-mobile="ru"
onclick="switchLang('ru', 'mobile')" onclick="switchLang('ru', 'mobile')"
>RU</span href=""
>RU</a
> >
<span <a
class="dropdown-item" class="dropdown-item"
data-lang-mobile="en" data-lang-mobile="en"
onclick="switchLang('en', 'mobile')" onclick="switchLang('en', 'mobile')"
>EN</span href="./index_en.html"
>EN</a
> >
</div> </div>
<div class="chevron mobile" <div class="chevron mobile"
...@@ -155,7 +159,7 @@ ...@@ -155,7 +159,7 @@
Защищенный доступ в любой точке мира Защищенный доступ в любой точке мира
</div> </div>
<div class="d-card-wrapper__content" data-lang="servers"> <div class="d-card-wrapper__content" data-lang="servers">
Надежное подключение к виртуальной частной сети (ВПН) из любой Надежное подключение к виртуальной частной сети (VPN) из любой
точки мира. Наши высокоскоростные серверы в 94 странах помогут точки мира. Наши высокоскоростные серверы в 94 странах помогут
вам взять контроль в свои руки. вам взять контроль в свои руки.
</div> </div>
...@@ -278,7 +282,6 @@ ...@@ -278,7 +282,6 @@
</div> </div>
</footer> </footer>
<script src="bootstrap.min.js"></script> <script src="bootstrap.min.js"></script>
<script src="lang.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>
index.js
...@@ -32,12 +32,37 @@ window.onload = function () { ...@@ -32,12 +32,37 @@ window.onload = function () {
console.log("localStorage is not supported"); console.log("localStorage is not supported");
} }
const _path = window.location.pathname.split("/");
const path = _path[_path.length -1];
if (langStr == null) { if (langStr == null) {
const lang = getLangFromBrowser(); const lang = getLangFromBrowser();
switchLang(lang, platform); switchLang(lang, platform);
if (lang === "en") {
if (path !== "index_en.html") {
window.location.href = "./index_en.html";
}
}
else {
if (path !== "index.html") {
window.location.href = "./index.html";
}
}
} }
else { else {
switchLang(langStr, platform); switchLang(langStr, platform);
if (langStr === "en") {
if (path !== "index_en.html") {
window.location.href = "./index_en.html";
}
}
else {
if (path !== "index.html") {
window.location.href = "./index.html";
}
}
} }
try { try {
...@@ -132,39 +157,6 @@ function switchLang(lang, platform) { ...@@ -132,39 +157,6 @@ function switchLang(lang, platform) {
googlePlayImg.src = "assets/google_play.svg"; 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)}]`
);
if (langNode != null) {
const translate = langDict[key][lang];
if (translate != null) {
langNode.innerHTML = translate;
}
}
if (langNodeMobile != null) {
const translate = langDict[key][lang];
if (translate != null) {
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) { if (ddMobile != null) {
...@@ -198,20 +190,6 @@ function switchLang(lang, platform) { ...@@ -198,20 +190,6 @@ function switchLang(lang, platform) {
googlePlayImg.src = "assets/google_play.svg"; googlePlayImg.src = "assets/google_play.svg";
} }
} }
for (const key in langDict) {
const langNodeMobile = document.querySelector(
`[data-lang-mobile=${CSS.escape(key)}]`
);
if (langNodeMobile != null) {
const translate = langDict[key][lang];
if (translate != null) {
langNodeMobile.innerHTML = translate;
}
}
}
} }
const dropdownMenu = document.querySelector(".dropdown-menu"); const dropdownMenu = document.querySelector(".dropdown-menu");
...@@ -228,8 +206,9 @@ function switchLang(lang, platform) { ...@@ -228,8 +206,9 @@ function switchLang(lang, platform) {
dropdownMenuMobile.classList.remove("show"); dropdownMenuMobile.classList.remove("show");
} }
if (mobileCheck()) { const openedMenu = document.querySelector("#opened-menu");
switchMobileMenu(); if (mobileCheck() && openedMenu.classList.contains("show")) {
openedMenu.classList.remove("show");
} }
} }
...@@ -237,7 +216,9 @@ function switchLang(lang, platform) { ...@@ -237,7 +216,9 @@ function switchLang(lang, platform) {
const mobArrow = document.querySelector(".chevron.mobile"); const mobArrow = document.querySelector(".chevron.mobile");
if (mobArrow != null) { if (mobArrow != null) {
mobArrow.classList.toggle("rotated"); if (mobArrow.classList.contains("rotated")) {
mobArrow.classList.remove("rotated");
}
} }
} }
} }
......
index_en.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="image/svg+xml" href="favicons/favicon.svg" rel="icon" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css?ver=1.15" />
<title>KrystalVPN</title>
</head>
<body>
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item">
<img src="assets/krystal_logo.svg" alt="krystal header" />
<span class="header_title-one">krystal</span>
<span class="header_title-two">vpn</span>
</li>
<li class="nav-item detailed">
<div class="menu">
<span>
<a data-lang="functions" href="#functions">Functions</a>
</span>
<span>
<a data-lang="download-menu" href="#download">Download</a>
</span>
<span>
<a data-lang="contact-us" href="#contact-us">Contact us</a>
</span>
</div>
<div class="dropdown">
<div class="chevron"onclick="openLang('desktop')"></div>
<div
class="btn lng-switcher"
id="langSwitcher"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
onclick="openLang('desktop')"
>
English
</div>
<div class="dropdown-menu" aria-labelledby="langSwitcher">
<a
class="dropdown-item active"
data-lang="ru"
onclick="switchLang('ru', 'desktop')"
href="./index.html"
>Русский</a
>
<a
class="dropdown-item"
data-lang="en"
onclick="switchLang('en', 'desktop')"
href=""
>English</a
>
</div>
</div>
<div class="humburger" onclick="switchMobileMenu()">
<div class="humburger-line"></div>
<div class="humburger-line"></div>
<div class="humburger-line"></div>
</div>
<div id="opened-menu" class="opened-mob-menu">
<div class="mobile-menu-container">
<div class="top-mobile-section">
<div class="menu" onclick="switchMobileMenu()">
<span>
<a data-lang-mobile="functions" href="#functions">Functions</a>
</span>
<span>
<a data-lang-mobile="download-menu" href="#download">Download</a>
</span>
<span>
<a data-lang-mobile="contact-us" href="#contact-us">Contact us</a>
</span>
</div>
<div class="mobile-cross-wrapper">
<img src="assets/cross.svg" alt="mobile cross" onclick="switchMobileMenu()">
</div>
</div>
<hr class="delimeter">
<div class="dropdown mobile">
<div
class="btn lng-switcher mobile"
id="langSwitcherMobile"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
onclick="openLang('mobile')"
>
RU
</div>
<div class="dropdown-menu mobile" aria-labelledby="langSwitcher">
<a
class="dropdown-item active"
data-lang-mobile="ru"
onclick="switchLang('ru', 'mobile')"
href="./index.html"
>RU</a
>
<span
class="dropdown-item"
data-lang-mobile="en"
onclick="switchLang('en', 'mobile')"
href=""
>EN</span
>
</div>
<div class="chevron mobile"
onclick="openLang('mobile')"></div>
</div>
</div>
<div class="mobile-download-btn-wrapper">
<button type="button" data-lang-mobile="download-mob" class="btn download mobile" onclick="do_download()">
Get KRYSTALVPN
</button>
</div>
</div>
<button type="button" data-lang="download" class="btn download" onclick="do_download()">
Download KRYSTALVPN
</button>
</li>
</ul>
</header>
<div class="main">
<div class="main-first">
<div class="card bcg-one">
<img src="./assets/background_1.svg" alt="background image one" />
</div>
<div id="functions" class="card descr">
<div class="descr-top">
<div class="descr-top__title-top" data-lang="truely">
Discover for real
</div>
<div class="descr-top__title-bottom">
<span class="title__colored" data-lang="fast">fast and safe</span>
<span class="title__uncolored" data-lang="vpn-service">VPN-service</span>
</div>
</div>
<div class="descr-bottom">
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/planet.svg" alt="description logo" />
<img class="mob" src="./assets/planet_blue.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="d-card-wrapper__title" data-lang="world-points">
Secure access anywhere in the world
</div>
<div class="d-card-wrapper__content" data-lang="servers">
Reliable connection to a virtual private network (VPN) from any points of the world. Our high-speed servers in 94 countries will help
you take control into your own hands.
</div>
</div>
</div>
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/speed.svg" alt="description logo" />
<img class="mob" src="./assets/speed_blue.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="lng d-card-wrapper__title" data-lang="speed">
High speed everywhere and always
</div>
<div class="d-card-wrapper__content" data-lang="details">
Our VPN is built for speed and uses next generation technology.
</div>
</div>
</div>
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/safe.svg" alt="description logo" />
<img class="mob" src="./assets/safe_blue.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="d-card-wrapper__title" data-lang="safety">
Secure Internet in a couple of seconds
</div>
<div class="d-card-wrapper__content" data-lang="description">
Using the Internet does not mean that everyone should see your personal data. Do you shop online or connect
to Wi-Fi in a cafe, you can provide more serious protection of your personal information.
</div>
</div>
</div>
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/cashback.svg" alt="description logo" />
<img class="mob" src="./assets/cashback_blue.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="d-card-wrapper__title" data-lang="guarantees">
30 days money back guarantee
</div>
<div class="d-card-wrapper__content" data-lang="our-service">
Our VPN-service is easy to use. As is our guarantee. If you don't like something, we will refund your money. Any
questions, no risk.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-second">
<div id="download" class="card descr">
<div class="third-description-wrapper">
<div class="third-top-title" data-lang="can-use">
Can be used
</div>
<span class="third-top-second" data-lang="all-devs">on all devices</span>
</div>
<article class="notation-one" data-lang="subscribes">
By subscribing to Krystal VPN, you will get convenient applications for all your devices, including phones, tablets,
computers, routers and many other devices.
</article>
<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">
<img src="./assets/qr-code.gif" alt="google play code">
</div>
</div>
<div class="card bcg-two">
<img src="./assets/background_2.png" alt="background image two" />
</div>
</div>
<div class="main-third">
<div id="contact-us" class="main-third__title" data-lang="support-onl">
Our experts are available 24/7 via live chat and email,
to help you with installation and troubleshooting.
</div>
<div class="support-btn">
<button type="button" data-lang="support" class="btn support" onclick="do_support()">
Contact us
</button>
</div>
</div>
<footer class="footer mobile">
<div class="text-center first">
<img src="assets/krystal_logo.svg" alt="krystal footer" />
<span class="footer_title-one">krystal</span>
<span class="footer_title-two">vpn</span>
</div>
<div class="text-center second">
&copy;
<span class="year"></span>
<span data-lang="rights">All rights reserved.</span>
</div>
</footer>
</div>
<footer class="footer">
<div class="text-center first">
<img src="assets/krystal_logo.svg" alt="krystal footer" />
<span class="footer_title-one">krystal</span>
<span class="footer_title-two">vpn</span>
</div>
<div class="text-center second">
&copy;
<span class="year"></span>
<span data-lang="rights">All rights reserved.</span>
</div>
</footer>
<script src="bootstrap.min.js"></script>
<script src="index.js"></script>
</body>
</html>
lang.js deleted 100644 → 0
const langDict = {
"rights": {
"ru": "Все права защищены.",
"en": "All rights reserved.",
},
"support": {
"ru": "Связаться с нами",
"en": "Contact us",
},
"support-onl": {
"ru": `Наши специалисты доступны 24/7 в онлайн-чате и по электронной почте,
чтобы помочь вам с установкой и устранением неполадок.`,
"en": `Our experts are available 24/7 via live chat and email,
to help you with installation and troubleshooting.`,
},
"can-use": {
"ru": "Можно использовать",
"en": "Can be used",
},
"all-devs": {
"ru": "на всех устройствах",
"en": "on all devices",
},
"subscribes": {
"ru": `Оформив подписку на Krystal VPN, вы получите удобные приложения для всех ваших устройств, включая телефоны, планшеты,
компьютеры, роутеры и многие другие девайсы.`,
"en": `By subscribing to Krystal VPN, you will get convenient applications for all your devices, including phones, tablets,
computers, routers and many other devices.`,
},
"our-service": {
"ru": `Наш VPN-сервис прост в использовании. Как и наша гарантия. Если вам что-то не нравится, мы вернем ваши деньги. Никаких
вопросов, никакого риска.`,
"en": `Our VPN-service is easy to use. As is our guarantee. If you don't like something, we will refund your money. Any
questions, no risk.`,
},
"guarantees": {
"ru": `Гарантия возврата денег 30 дней`,
"en": `30 days money back guarantee`,
},
"description": {
"ru": `Использование Интернета не означает, что все должны видеть ваши личные данные. Совершаете ли вы покупки онлайн или
подключаетесь к Wi-Fi в кафе, вы можете обеспечить более серьезную защиту своей персональной информации.`,
"en": `Using the Internet does not mean that everyone should see your personal data. Do you shop online or connect
to Wi-Fi in a cafe, you can provide more serious protection of your personal information.`,
},
"safety": {
"ru": "Безопасный Интернет за пару секунд",
"en": "Secure Internet in a couple of seconds",
},
"details": {
"ru": `Наша VPN-сеть создана для скорости и использует технологии нового поколения.`,
"en": `Our VPN is built for speed and uses next generation technology.`,
},
"speed": {
"ru": "Высокая скорость везде и всегда",
"en": "High speed everywhere and always",
},
"servers": {
"ru": `Надежное подключение к виртуальной частной сети (ВПН) из любой точки мира. Наши высокоскоростные серверы в 94 странах помогут
вам взять контроль в свои руки.`,
"en": `Reliable connection to a virtual private network (VPN) from any points of the world. Our high-speed servers in 94 countries will help
you take control into your own hands.`,
},
"world-points": {
"ru": "Защищенный доступ в любой точке мира",
"en": "Secure access anywhere in the world",
},
"vpn-service": {
"ru": "VPN-сервис",
"en": "VPN-service",
},
"fast": {
"ru": "быстрый и безопасный",
"en": "fast and safe",
},
"truely": {
"ru": "Открой для себя по-настоящему",
"en": "Discover for real",
},
"download": {
"ru": "Скачать KRYSTALVPN",
"en": "Download KRYSTALVPN",
},
"functions": {
"ru": "Функции",
"en": "Functions",
},
"contact-us": {
"ru": "Контакты",
"en": "Contact us",
},
"download-menu": {
"ru": "Скачать",
"en": "Download",
},
"download-mob": {
"ru": "Получить KRYSTALVPN",
"en": "Get KRYSTALVPN",
},
};
\ No newline at end of file \ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!