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 @@ ...@@ -20,26 +20,26 @@
</li> </li>
<li class="nav-item detailed"> <li class="nav-item detailed">
<div class="menu"> <div class="menu">
<span data-lang="functions"> <span>
<a href="#functions">Функции</a> <a data-lang="functions" href="#functions">Функции</a>
</span> </span>
<span data-lang="download-menu"> <span>
<a href="#download">Скачать</a> <a data-lang="download-menu" href="#download">Скачать</a>
</span> </span>
<span data-lang="contact-us"> <span>
<a href="#download">Контакты</a> <a data-lang="contact-us" href="#download">Контакты</a>
</span> </span>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<div class="chevron"></div> <div class="chevron"onclick="openLang('desktop')"></div>
<div <div
class="btn lng-switcher" class="btn lng-switcher"
id="langSwitcher" id="langSwitcher"
data-toggle="dropdown" data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
onclick="openLang()" onclick="openLang('desktop')"
> >
Русский Русский
</div> </div>
...@@ -47,13 +47,13 @@ ...@@ -47,13 +47,13 @@
<span <span
class="dropdown-item active" class="dropdown-item active"
data-lang="ru" data-lang="ru"
onclick="switchLang('ru')" onclick="switchLang('ru', 'desktop')"
>Русский</span >Русский</span
> >
<span <span
class="dropdown-item" class="dropdown-item"
data-lang="en" data-lang="en"
onclick="switchLang('en')" onclick="switchLang('en', 'desktop')"
>English</span >English</span
> >
</div> </div>
...@@ -66,17 +66,61 @@ ...@@ -66,17 +66,61 @@
</div> </div>
<div id="opened-menu" class="opened-mob-menu"> <div id="opened-menu" class="opened-mob-menu">
<div class="mobile-menu-container">
<div class="top-mobile-section">
<div class="menu" onclick="switchMobileMenu()"> <div class="menu" onclick="switchMobileMenu()">
<span data-lang="functions"> <span>
<a href="#functions">Функции</a> <a data-lang-mobile="functions" href="#functions">Функции</a>
</span> </span>
<span data-lang="download-menu"> <span>
<a href="#download">Скачать</a> <a data-lang-mobile="download-menu" href="#download">Скачать</a>
</span> </span>
<span data-lang="contact-us"> <span>
<a href="#download">Контакты</a> <a data-lang-mobile="contact-us" href="#download">Контакты</a>
</span> </span>
</div> </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> </div>
<button type="button" data-lang="download" class="btn download" onclick="do_download()"> <button type="button" data-lang="download" class="btn download" onclick="do_download()">
...@@ -188,11 +232,9 @@ ...@@ -188,11 +232,9 @@
</div> </div>
<div class="gp-code-wrapper"> <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"> <img src="./assets/code.svg" alt="google play code">
</div> </a>
<div class="gp-link">
https://play.google.com/store/apps/details?id=tw.mobileapp.qrcode.banner&hl=ru&gl=US
</div> </div>
</div> </div>
<div class="card bcg-two"> <div class="card bcg-two">
......
index.js
...@@ -2,11 +2,13 @@ const langArr = [ ...@@ -2,11 +2,13 @@ const langArr = [
{ {
lang: "ru", lang: "ru",
title: "Русский", title: "Русский",
titleMobile: "RU",
active: true, active: true,
}, },
{ {
lang: "en", lang: "en",
title: "English", title: "English",
titleMobile: "EN",
active: false, active: false,
}, },
]; ];
...@@ -16,19 +18,21 @@ window.onload = function() { ...@@ -16,19 +18,21 @@ window.onload = function() {
}; };
function do_download() { function do_download() {
console.log("do download!"); window.open("https://play.google.com/store/apps/details?id=com.krystal.vpn");
} }
function openLang() { function openLang(platform) {
const dropdownMenu = document.querySelector(".dropdown-menu"); console.log(platform);
const dropdownMenu = platform === "desktop" ? document.querySelector(".dropdown-menu") : document.querySelector(".dropdown-menu.mobile");
if (dropdownMenu != null) { if (dropdownMenu != null) {
dropdownMenu.classList.toggle("show"); dropdownMenu.classList.toggle("show");
} }
} }
function switchLang(lang) { function switchLang(lang, platform) {
const dd = document.querySelector("#langSwitcher"); const dd = document.querySelector("#langSwitcher");
const ddMobile = document.querySelector("#langSwitcherMobile");
if (dd != null) { if (dd != null) {
const title = langArr.filter(elem => elem.lang === lang)[0].title; const title = langArr.filter(elem => elem.lang === lang)[0].title;
...@@ -49,6 +53,7 @@ function switchLang(lang) { ...@@ -49,6 +53,7 @@ function switchLang(lang) {
for (const key in langDict) { for (const key in langDict) {
const langNode = document.querySelector(`[data-lang=${CSS.escape(key)}]`); const langNode = document.querySelector(`[data-lang=${CSS.escape(key)}]`);
const langNodeMobile = document.querySelector(`[data-lang-mobile=${CSS.escape(key)}]`);
if (langNode != null) { if (langNode != null) {
const translate = langDict[key][lang]; const translate = langDict[key][lang];
...@@ -57,10 +62,61 @@ function switchLang(lang) { ...@@ -57,10 +62,61 @@ function switchLang(lang) {
langNode.innerHTML = translate; 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() { function set_current_year() {
...@@ -104,4 +160,4 @@ portrait.addEventListener("change", function(e) { ...@@ -104,4 +160,4 @@ portrait.addEventListener("change", function(e) {
main.classList.add("oriented") main.classList.add("oriented")
} }
} }
})
\ No newline at end of file \ No newline at end of file
});
lang.js
...@@ -81,4 +81,16 @@ const langDict = { ...@@ -81,4 +81,16 @@ const langDict = {
"ru": "Скачать KRYSTALVPN", "ru": "Скачать KRYSTALVPN",
"en": "Download 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 \ No newline at end of file
style.css
...@@ -251,27 +251,72 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -251,27 +251,72 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
} }
.opened-mob-menu.show { .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; 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; display: flex;
flex-direction: column; 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 { .opened-mob-menu.show
margin-bottom: 6px; > .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-family: "RobotoRegular";
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
...@@ -280,18 +325,104 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -280,18 +325,104 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
margin: 0 16px; margin: 0 16px;
color: #0f309b; color: #fff;
text-decoration: none; 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; 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; 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 { .main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -697,23 +828,6 @@ article.notation-one { ...@@ -697,23 +828,6 @@ article.notation-one {
margin-bottom: 20px; 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 { .main-third {
height: 266px; height: 266px;
width: 100%; width: 100%;
...@@ -793,17 +907,32 @@ article.notation-one { ...@@ -793,17 +907,32 @@ article.notation-one {
padding: 0px 0 8px 0; 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; font-size: 20px;
padding: 0px 0 6px 0; 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; 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; 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!