Commit 4d2cc213 authored by nursultan's avatar nursultan
Browse files

Merge branch 'features' into 'master'

Features

See merge request !2
parents 822df521 82341d8b
No preview for this file type
This diff is collapsed.
This diff is collapsed.
......@@ -595,7 +595,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
/* ---------------------------------------------------------- */
.posts {
overflow-x: hidden;
/*overflow-x: hidden;*/
}
.post-feed {
......@@ -612,7 +612,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex: 1 1 301px;
display: flex;
flex-direction: column;
overflow: hidden;
/*overflow: hidden;*/
margin: 0 0 40px;
padding: 0 20px 40px;
min-height: 220px;
......@@ -639,6 +639,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
position: relative;
display: block;
color: var(--darkgrey);
padding: 10px;
}
.post-card-content-link:hover {
......@@ -680,6 +681,39 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex-grow: 1;
display: flex;
flex-direction: column;
visibility: hidden;
opacity: 0;
width: 350px;
height: auto;
min-height: 160px;
z-index: 3;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border-radius: 10px;
transition: width 1s, height 2s, background-color 2s, transform 2s;
border: 1px solid #e31f26;
}
.post-card-content::before{
content: "";
display: block;
position: relative;
width: 30px;
height: 30px;
background-color: #fff;
border-left: 1px solid #e31f26;
border-top: 1px solid #e31f26;
top: -16px;
left: 45%;
transform: rotate(45deg);
}
.post-card:hover .post-card-content {
transform: translate3d(0, -10%, 0);
visibility: visible;
opacity: 1;
}
.post-card-excerpt {
......@@ -696,6 +730,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex;
align-items: flex-start;
padding: 0;
margin-top: auto;
}
.author-profile-image,
......@@ -735,7 +770,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
margin: 0 0 0 -6px;
width: 34px;
height: 34px;
border: #fff 2px solid;
border: #000000 2px solid;
border-radius: 100%;
}
......@@ -745,7 +780,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
z-index: 999;
display: block;
padding: 2px 8px;
color: white;
color: black;
font-size: 1.2rem;
letter-spacing: 0.2px;
white-space: nowrap;
......@@ -792,7 +827,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.post-card-byline-date {
font-size: 1.2rem;
font-size: 0.8rem;
}
.post-card-byline-date .bull {
......@@ -1869,12 +1904,12 @@ Usage (In Ghost editor):
}
.read-next .post-card-primary-tag {
color: #fff;
color: #000000;
opacity: 0.6;
}
.read-next .post-card-title {
color: #fff;
color: #000000;
opacity: 0.8;
transition: all 0.2s ease-in-out;
}
......@@ -1884,7 +1919,7 @@ Usage (In Ghost editor):
}
.read-next .post-card-excerpt {
color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 0.6);
}
.read-next .static-avatar {
......@@ -1892,11 +1927,11 @@ Usage (In Ghost editor):
}
.read-next .post-card-byline-content {
color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 0.6);
}
.read-next .post-card-byline-content a {
color: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, 0.8);
}
.read-next-card {
......@@ -1921,7 +1956,7 @@ Usage (In Ghost editor):
.read-next-card-header h3 {
margin: 0;
color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 0.6);
font-size: 1.2rem;
line-height: 1em;
font-weight: 300;
......@@ -1930,7 +1965,7 @@ Usage (In Ghost editor):
}
.read-next-card-header h3 a {
color: #fff;
color: #000000;
font-weight: 500;
text-decoration: none;
opacity: 0.8;
......@@ -1975,7 +2010,7 @@ Usage (In Ghost editor):
.read-next-card-content li a {
display: block;
color: #fff;
color: #000000;
opacity: 0.8;
}
......@@ -2000,7 +2035,7 @@ Usage (In Ghost editor):
.read-next-card-meta p {
margin: 0;
color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 0.6);
}
.read-next-card-footer {
......@@ -2011,7 +2046,7 @@ Usage (In Ghost editor):
.read-next-card-footer a {
padding: 7px 12px 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 0.6);
font-size: 1.3rem;
border-radius: 999px;
transition: all 0.35s ease-in-out;
......@@ -2845,11 +2880,11 @@ Usage (In Ghost editor):
}
.post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
color: rgba(0, 0, 0, 0.75);
}
.post-card-byline-content a:hover {
color: #fff;
color: #000000;
}
.post-card-image {
......@@ -2857,7 +2892,7 @@ Usage (In Ghost editor):
}
.post-card-title {
color: rgba(255, 255, 255, 0.85);
color: rgba(0, 0, 0, 0.85);
}
.post-card-excerpt {
......@@ -2886,11 +2921,11 @@ Usage (In Ghost editor):
}
.post-full-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75);
color: rgba(0, 0, 0, 0.75);
}
.post-full-byline-meta h4 a:hover {
color: #fff;
color: #000000;
}
.author-list-item .author-card {
......@@ -2911,25 +2946,25 @@ Usage (In Ghost editor):
.post-full-content h3,
.post-full-content h4,
.post-full-content h6 {
color: rgba(255, 255, 255, 0.9);
color: rgba(0, 0, 0, 0.9);
}
.post-full-content a {
color: #fff;
box-shadow: inset 0 -1px 0 #fff;
color: #000000;
box-shadow: inset 0 -1px 0 #000000;
}
.post-full-content strong {
color: #fff;
color: #000000;
}
.post-full-content em {
color: #fff;
color: #000000;
}
.post-full-content code {
color: #fff;
background: #000;
color: #000000;
background: #ffffff;
}
hr {
......@@ -2937,7 +2972,7 @@ Usage (In Ghost editor):
}
.post-full-content figcaption {
color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 0.6);
}
.post-full-content table td:first-child {
......
const nav_hum = document.querySelector('.ham');
const main_nav = document.querySelector('#main-nav');
let nav_hum = document.querySelector('.ham');
let main_nav = document.querySelector('#main-nav');
function active(){
const anchors = document.querySelectorAll('#main-nav a[href*="#"]');
const langs = document.querySelectorAll('.main-lang a[href*="#"]');
const numbers = document.querySelectorAll('.statistic-block span');
let numberTop = document.querySelector('.statistic-block span');
const engBlocks = document.querySelectorAll('.eng');
const rusBlocks = document.querySelectorAll('.rus');
const qazBlocks = document.querySelectorAll('.qaz');
const navText = document.querySelectorAll('#main-nav a');
const mainBtn = document.querySelector('.main--btn');
const feedbackExpert = document.querySelector('.feedback-expert');
const benefitsDemoBtn = document.querySelector('.benefits-demo--btn');
const learnMore = document.querySelector('.cc-link');
function active() {
nav_hum.classList.toggle('active');
main_nav.classList.toggle('active');
}
let navHeight = document.querySelector('#header').scrollHeight;
const anchors = document.querySelectorAll('#main-nav a[href*="#"]');
const yOffset = -navHeight + 30;
for (let anchor of anchors) {
anchor.addEventListener('click', function (e) {
......@@ -15,7 +32,7 @@ for (let anchor of anchors) {
anchor.classList.add('active');
const blockID = anchor.getAttribute('href').substr(1);
const yourElement = document.getElementById(blockID);
if (!yourElement){
if (!yourElement) {
document.location.href = `/#${blockID}`;
}
const yCoordinate = yourElement.getBoundingClientRect().top + window.pageYOffset;
......@@ -26,7 +43,7 @@ for (let anchor of anchors) {
});
}
const hash = document.location.hash;
if (hash){
if (hash) {
let topY = document.querySelector(hash).getBoundingClientRect().top + window.pageYOffset;
window.scrollBy({
top: topY + yOffset,
......@@ -34,104 +51,101 @@ if (hash){
});
}
const langs = document.querySelectorAll('.main-lang a[href*="#"]');
for (let lang of langs){
for (let lang of langs) {
lang.addEventListener('click', function () {
localStorage['lang'] = this.text;
if (this.text==='rus'){
if (this.text === 'rus') {
window.location.replace("/");
}else {
window.location.replace("/"+this.text);
} else {
window.location.replace("/" + this.text);
}
})
}
const navText = document.querySelectorAll('#main-nav a');
const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact'];
const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri'];
const engBlocks = document.querySelectorAll('.eng');
const rusBlocks = document.querySelectorAll('.rus');
const qazBlocks = document.querySelectorAll('.qaz');
const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact', 'Posts and news'];
const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri', 'Jańalyqtar jáne posttar'];
if (localStorage['lang'] === 'eng'){
if (localStorage['lang'] === 'eng') {
changeLang(engBlocks);
translate(engText);
}else if (localStorage['lang'] === 'qaz'){
} else if (localStorage['lang'] === 'qaz') {
changeLang(qazBlocks);
translate(qazText);
}else {
} else {
changeLang(rusBlocks);
}
function changeLang(values) {
for (let value of values){
for (let value of values) {
value.style = 'display:block';
}
}
function translate(array){
for (let i=0; i<array.length; i++){
function translate(array) {
for (let i = 0; i < array.length; i++) {
navText[i].innerHTML = array[i];
}
}
let numbers = document.querySelectorAll('.statistic-block span');
let numberTop = document.querySelector('.statistic-block span').getBoundingClientRect().top;
for (let number of numbers){
numberTop = numberTop ? numberTop.getBoundingClientRect().top : 0;
for (let number of numbers) {
let start = +number.innerHTML,
end = +number.dataset.max;
window.addEventListener('scroll', function onScroll() {
if(window.pageYOffset > numberTop - window.innerHeight / 2 || window.pageYOffset < numberTop - window.innerHeight / 2) {
if (window.pageYOffset > numberTop - window.innerHeight / 2 || window.pageYOffset < numberTop - window.innerHeight / 2) {
this.removeEventListener('scroll', onScroll);
let interval = setInterval(function() {
let interval = setInterval(function () {
number.innerHTML = ++start;
if(start === end) {
number.innerHTML = end+'%';
if (start === end) {
number.innerHTML = end + '%';
clearInterval(interval);
}
}, 10);
}
});
}
function showModal(){
function showModal() {
document.body.style = "overflow:hidden";
document.querySelector('.feedback-form').classList.toggle('active');
document.querySelector('.feedback-form iframe').setAttribute('scrolling', 'auto');
}
function closeModal(value){
function closeModal(value) {
document.body.style = "overflow:inherit";
document.querySelector(value).classList.toggle('active');
}
document.querySelector('.main--btn').addEventListener('click', showModal);
document.querySelector('.feedback-expert').addEventListener('click', showModal);
if (mainBtn) {
mainBtn.addEventListener('click', showModal);
}
document.querySelector('.benefits-demo--btn').addEventListener('click', showModal);
if (feedbackExpert) {
feedbackExpert.addEventListener('click', showModal);
}
document.querySelector('.footer-btn--'+localStorage['lang']).addEventListener('click',function () {
document.body.style = "overflow:hidden";
document.querySelector('.private-police').classList.toggle('active');
} );
if (benefitsDemoBtn) {
benefitsDemoBtn.addEventListener('click', showModal);
}
const learnMore = document.querySelector('.cc-link');
learnMore.removeAttribute('target');
learnMore.addEventListener('click', function () {
if (learnMore) {
learnMore.removeAttribute('target');
learnMore.addEventListener('click', function () {
document.body.style = "overflow:hidden";
document.querySelector('.cookie-modal').classList.toggle('active');
});
});
}
if( window.innerWidth <= 425 ){
if (window.innerWidth <= 425) {
const usabilityCards = document.querySelectorAll('.usability-card');
const usabilityTooltip = document.querySelectorAll('.usability-card--tooltip');
for (let usabilityCard of usabilityCards){
for (let usabilityCard of usabilityCards) {
usabilityCard.addEventListener('click', function () {
if(!this.querySelector('.usability-card--tooltip').classList.contains('hover')){
usabilityTooltip.forEach(i => i.classList.remove('hover') );
if (!this.querySelector('.usability-card--tooltip').classList.contains('hover')) {
usabilityTooltip.forEach(i => i.classList.remove('hover'));
}
this.querySelector('.usability-card--tooltip').classList.toggle('hover');
})
......
This diff is collapsed.
......@@ -33,9 +33,12 @@
</script>
<main id="site-main">
<div class="main-info">
<div>
<p>
Improve your overall equipment effectiveness (OEE), <br/> reduce the cost per unit <br/>with real-time control
</p>
<span>SCADA HMI II<b>o</b>T MES</span>
</div>
<button class="main--btn">Contact us</button>
</div>
<!------------- preview section start ---------------------->
......@@ -334,7 +337,7 @@
<object type="image/svg+xml" data="../assets/images/02.svg"></object>
<div>
<span>CONNECTIVITY</span>
<p>sending data to cloud</p>
<p>sending data</p>
</div>
</div>
<div class="howItWorks-schema--item schema-03">
......
......@@ -35,9 +35,12 @@
<main id="site-main">
<div class="main-info">
<div>
<p>
Увеличение общей эффективности производства, <br/>снижение затрат на единицу продукции, <br/>управление в режиме реального времени
</p>
<span>SCADA HMI II<b>o</b>T MES</span>
</div>
<button class="main--btn">связаться с нами</button>
</div>
<!------------- preview section start ---------------------->
......@@ -339,7 +342,7 @@
<object type="image/svg+xml" data="assets/images/02.svg"></object>
<div>
<span>СОЕДИНЕНИЕ</span>
<p>отправка данных в облако</p>
<p>отправка данных</p>
</div>
</div>
<div class="howItWorks-schema--item schema-03">
......
......@@ -34,9 +34,12 @@
</script>
<main id="site-main">
<div class="main-info">
<div>
<p>
Óndiristiń jalpy tıimdiligin arttyrý ,<br/> óndiriletin ónim birligine shyǵyndaryn azaıtý, <br/>naqty ýaqyt rejıminde baqylaý
</p>
<span>SCADA HMI II<b>o</b>T MES</span>
</div>
<button class="main--btn">Bizben baılanysý</button>
</div>
<!------------- preview section start ---------------------->
......@@ -335,7 +338,7 @@
<object type="image/svg+xml" data="../assets/images/02.svg"></object>
<div>
<span>QAÝİPSİZDİK</span>
<p>óńdelgen aqparat bulttyq keńistigine jiberiledi</p>
<p>óńdelgen aqparatty jiberu</p>
</div>
</div>
<div class="howItWorks-schema--item schema-03">
......
{{!--
Wow what the hell is going on in here even?
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.
If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
with a `no-image` class so we can style it accordingly.
--}}
{{#if background}}
<style type="text/css">
.responsive-header-img {
background-image: url({{img_url background size='xl'}});
}
@media(max-width: 1000px) {
.responsive-header-img {
background-image: url({{img_url background size='l'}});
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
background-image: image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
}
}
@media(max-width: 600px) {
.responsive-header-img {
background-image: url({{img_url background size='m'}});
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
background-image: image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
}
}
</style>
<div class="outer site-header-background responsive-header-img">
{{else}}
<div class="outer site-header-background no-image">
{{/if}}
\ No newline at end of file
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg>
\ No newline at end of file
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
dur="0.5s" repeatCount="indefinite" />
</path>
</svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,