Skip to content

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

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 2c1667e4 by xcoder
Options

1. добавить фавикон 

2. Добавить рабочий куар и скачать - открытие ссылки: https://play.google.com/store/apps/details?id=com.krystal.vpn
3. сделать меню на мобиле по макету: https://www.figma.com/file/kfys2N1bygQKTDz2vvBGAl/KRYSTAL-VPN-LANDING2?node-id=0-1&t=vhrNSsg6xN9XmXB9-0
4. исправить на компе вторую картинку с рукой и мобилой
5. Языки в меню только 2: русс и англ.
6. Ссылку под QR убрать, не понимаю зачем она там
1 parent 873af9f5
Inline Side-by-side
Showing 5 changed files with 301 additions and 58 deletions
assets/cross.svg 0 → 100644
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="11.5634" width="1.98834" height="14.9389" rx="0.99417" transform="rotate(45 11.5634 0)" fill="#00B8F0"/>
<rect x="0.80777" y="1.37655" width="1.94674" height="14.9389" rx="0.97337" transform="rotate(-45 0.80777 1.37655)" fill="#00B8F0"/>
</svg>
index.html
......@@ -20,26 +20,26 @@
</li>
<li class="nav-item detailed">
<div class="menu">
<span data-lang="functions">
<a href="#functions">Функции</a>
<span>
<a data-lang="functions" href="#functions">Функции</a>
</span>
<span data-lang="download-menu">
<a href="#download">Скачать</a>
<span>
<a data-lang="download-menu" href="#download">Скачать</a>
</span>
<span data-lang="contact-us">
<a href="#download">Контакты</a>
<span>
<a data-lang="contact-us" href="#download">Контакты</a>
</span>
</div>
<div class="dropdown">
<div class="chevron"></div>
<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()"
onclick="openLang('desktop')"
>
Русский
</div>
......@@ -47,13 +47,13 @@
<span
class="dropdown-item active"
data-lang="ru"
onclick="switchLang('ru')"
onclick="switchLang('ru', 'desktop')"
>Русский</span
>
<span
class="dropdown-item"
data-lang="en"
onclick="switchLang('en')"
onclick="switchLang('en', 'desktop')"
>English</span
>
</div>
......@@ -66,17 +66,61 @@
</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 data-lang="functions">
<a href="#functions">Функции</a>
<span>
<a data-lang-mobile="functions" href="#functions">Функции</a>
</span>
<span data-lang="download-menu">
<a href="#download">Скачать</a>
<span>
<a data-lang-mobile="download-menu" href="#download">Скачать</a>
</span>
<span data-lang="contact-us">
<a href="#download">Контакты</a>
<span>
<a data-lang-mobile="contact-us" href="#download">Контакты</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"
id="langSwitcherMobile"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
onclick="openLang('mobile')"
>
RU
</div>
<div class="dropdown-menu mobile" aria-labelledby="langSwitcher">
<span
class="dropdown-item active"
data-lang-mobile="ru"
onclick="switchLang('ru', 'mobile')"
>RU</span
>
<span
class="dropdown-item"
data-lang-mobile="en"
onclick="switchLang('en', 'mobile')"
>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()">
получить KRYSTALVPN
</button>
</div>
</div>
<button type="button" data-lang="download" class="btn download" onclick="do_download()">
......@@ -188,11 +232,9 @@
</div>
<div class="gp-code-wrapper">
<a href="https://play.google.com/store/apps/details?id=com.krystal.vpn">
<img src="./assets/code.svg" alt="google play code">
</div>
<div class="gp-link">
https://play.google.com/store/apps/details?id=tw.mobileapp.qrcode.banner&hl=ru&gl=US
</a>
</div>
</div>
<div class="card bcg-two">
......
index.js
......@@ -2,11 +2,13 @@ const langArr = [
{
lang: "ru",
title: "Русский",
titleMobile: "RU",
active: true,
},
{
lang: "en",
title: "English",
titleMobile: "EN",
active: false,
},
];
......@@ -16,19 +18,21 @@ window.onload = function() {
};
function do_download() {
console.log("do download!");
window.open("https://play.google.com/store/apps/details?id=com.krystal.vpn");
}
function openLang() {
const dropdownMenu = document.querySelector(".dropdown-menu");
function openLang(platform) {
console.log(platform);
const dropdownMenu = platform === "desktop" ? document.querySelector(".dropdown-menu") : document.querySelector(".dropdown-menu.mobile");
if (dropdownMenu != null) {
dropdownMenu.classList.toggle("show");
}
}
function switchLang(lang) {
function switchLang(lang, platform) {
const dd = document.querySelector("#langSwitcher");
const ddMobile = document.querySelector("#langSwitcherMobile");
if (dd != null) {
const title = langArr.filter(elem => elem.lang === lang)[0].title;
......@@ -49,6 +53,7 @@ function switchLang(lang) {
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];
......@@ -57,10 +62,61 @@ function switchLang(lang) {
langNode.innerHTML = translate;
}
}
if (langNodeMobile != null) {
const translate = langDict[key][lang];
if (translate != null) {
langNodeMobile.innerHTML = translate;
}
}
}
}
if (ddMobile != null) {
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)}]`);
if (activeLangNodeMobile != null) {
activeLangNodeMobile.classList.remove("active");
}
const langNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(lang)}]`);
if (langNodeMobile != null) {
langNodeMobile.classList.add("active");
}
for (const key in langDict) {
const langNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(key)}]`);
openLang();
if (langNodeMobile != null) {
const translate = langDict[key][lang];
if (translate != null) {
langNodeMobile.innerHTML = translate;
}
}
}
}
const dropdownMenu = document.querySelector(".dropdown-menu");
const dropdownMenuMobile = document.querySelector(".dropdown-menu.mobile");
if (dropdownMenu != null) {
if (dropdownMenu.classList.contains("show")) {
dropdownMenu.classList.remove("show");
}
}
if (dropdownMenuMobile != null) {
if (dropdownMenuMobile.classList.contains("show")) {
dropdownMenuMobile.classList.remove("show");
}
}
}
function set_current_year() {
......@@ -104,4 +160,4 @@ portrait.addEventListener("change", function(e) {
main.classList.add("oriented")
}
}
})
\ No newline at end of file
});
lang.js
......@@ -81,4 +81,16 @@ const langDict = {
"ru": "Скачать KRYSTALVPN",
"en": "Download KRYSTALVPN",
},
"functions": {
"ru": "Функции",
"en": "Functions",
},
"contact-us": {
"ru": "Контакты",
"en": "Contact us",
},
"download-menu": {
"ru": "Скачать",
"en": "Download",
},
};
\ No newline at end of file
style.css
......@@ -251,27 +251,72 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
}
.opened-mob-menu.show {
display: block;
height: 100vh;
width: 80%;
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
position: fixed;
z-index: 100;
top: 65px;
top: 0px;
left: 0px;
padding: 0 22px;
background-color: #4f00ad;
}
.opened-mob-menu.show > .menu {
.opened-mob-menu.show > .mobile-menu-container {
display: flex;
flex-direction: column;
}
padding: 6px;
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 50px 0 0 2px;
}
.opened-mob-menu.show > .menu > span {
margin-bottom: 6px;
.opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .mobile-cross-wrapper {
display: none;
}
@media screen and (max-width: 680px) {
.opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .mobile-cross-wrapper {
display: block;
padding: 50px 0 0 0;
cursor: pointer;
}
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .mobile-cross-wrapper > img {
width: 34px;
}
}
.opened-mob-menu.show > .menu > span > a {
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span {
max-width: max-content;
margin-bottom: 30px;
}
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 500;
......@@ -280,18 +325,104 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
margin: 0 16px;
color: #0f309b;
color: #fff;
text-decoration: none;
}
.opened-mob-menu.show > .menu > span > a:first-child {
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a:first-child {
margin: 0 0 0 16px;
}
.opened-mob-menu.show > .menu > span > a:last-child {
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a:last-child {
margin: 0 16px 0 0px;
}
hr.delimeter {
height: 2px;
width: 100%;
color: #00b8f0;
}
.dropdown.mobile {
width: 100px;
display: flex;
}
.dropdown.mobile > .dropdown-menu.mobile.show {
background-color: transparent;
border: 0;
}
.dropdown.mobile > .dropdown-menu.mobile.show > .dropdown-item {
width: 54px;
color: #00b8f0;
}
.dropdown.mobile > .dropdown-menu.mobile.show > .dropdown-item:hover {
background-color: transparent;
}
.dropdown.mobile > .chevron.mobile {
width: 12px;
position: relative;
}
.dropdown.mobile > .chevron.mobile::before {
width: 12px;
height: 12px;
display: inline-block;
border-style: solid;
border-width: 2px 2px 0 0;
content: "";
left: 0;
position: relative;
top: 13px;
color: #00b8f0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
vertical-align: top;
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
-o-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
}
.mobile-download-btn-wrapper {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 38px;
}
.mobile-download-btn-wrapper > .btn.download.mobile {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
width: 220px;
padding: 18px 0px;
background-color: #00b8f0;
border-radius: 103px;
cursor: pointer;
}
.main {
display: flex;
flex-direction: column;
......@@ -697,23 +828,6 @@ article.notation-one {
margin-bottom: 20px;
}
.main > .main-second > .card.descr > .gp-link {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 16px;
color: #ffffff;
text-align: end;
}
@media screen and (max-width: 680px) {
.main > .main-second > .card.descr > .gp-link {
text-align: center;
}
}
.main-third {
height: 266px;
width: 100%;
......@@ -793,17 +907,32 @@ article.notation-one {
padding: 0px 0 8px 0;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top > .descr-top__title-top {
.main.oriented
> .main-first
> .card.bcg-one
> .card.descr
> .descr-top
> .descr-top__title-top {
font-size: 20px;
padding: 0px 0 6px 0;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top__title-bottom > .title__colored {
.main.oriented
> .main-first
> .card.bcg-one
> .card.descr
> .descr-top__title-bottom
> .title__colored {
font-size: 20px;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top__title-bottom > .title__uncolored {
.main.oriented
> .main-first
> .card.bcg-one
> .card.descr
> .descr-top__title-bottom
> .title__uncolored {
font-size: 20px;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!