WEB. Вёрстка сайтов
РАЗНОЕ
АВТОМАТИЧЕСКИЙ ПЕРЕВОД САЙТА С ПОМОЩЬЮ JS СКРИПТА GOOGLE TRANSLATE
Для корректной работы нашего кастомного виджета необходимо подключить файлы:
<link rel="stylesheet" href="/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="/js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
Содержимое style.css:
body {
margin: 0;
padding: 0;
}
.page {
display: flex;
min-height: 100vh;
}
/* Фиксируем позицию body, которую меняет панель гугла*/
.page_fix {
top: 0 !important;
position: static !important;
}
/* Прячем панель гугла */
.skiptranslate {
display: none !important;
}
/* language */
.language {
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
}
.language__img {
margin: 2px;
cursor: pointer;
opacity: .5;
}
.language__img:hover,
.language__img_active {
opacity: 1;
}
/* content */
.content {
text-align: center;
margin: auto;
}
Используемые флаги:
![]()
Разметка кастомного виджета:
<div class="language">
<img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
<img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img">
<img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img">
<img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img">
<img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img">
</div>
Содержимое google-translate.js:
const googleTranslateConfig = {
lang: "ru",
};
function TranslateInit() {
let code = TranslateGetCode();
// Находим флаг с выбранным языком для перевода и добавляем к нему активный класс
$('[data-google-lang="' + code + '"]').addClass('language__img_active');
if (code == googleTranslateConfig.lang) {
// Если язык по умолчанию, совпадает с языком на который переводим
// То очищаем куки
TranslateClearCookie();
}
// Инициализируем виджет с языком по умолчанию
new google.translate.TranslateElement({
pageLanguage: googleTranslateConfig.lang,
});
// Вешаем событие клик на флаги
$('[data-google-lang]').click(function () {
TranslateSetCookie($(this).attr("data-google-lang"))
// Перезагружаем страницу
window.location.reload();
});
}
function TranslateGetCode() {
// Если куки нет, то передаем дефолтный язык
let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang;
return lang.substr(-2);
}
function TranslateClearCookie() {
$.cookie('googtrans', null);
$.cookie("googtrans", null, {
domain: "." + document.domain,
});
}
function TranslateSetCookie(code) {
// Записываем куки /язык_который_переводим/язык_на_который_переводим
$.cookie('googtrans', "/auto/" + code);
$.cookie("googtrans", "/auto/" + code, {
domain: "." + document.domain,
});
}
При смене языка добавляется куки с ключом googtrans и значением вида /ru/en
- /ru — это язык который переводим
- /en — это язык на который переводим

Это стандартное поведение, поэтому я им и воспользовался для кастомизации виджета. Кликая по флажкам необходимых языков, из атрибута data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг:
Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут.
Функции добавления и очисти куки я вынес отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах. Важный момент, куки необходимо менять для основного домена и всех поддоменов.
Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны:
const googleTranslateConfig = {
lang: "ru",
};
Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут.
Функции добавления и очисти куки я вынес отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах. Важный момент, куки необходимо менять для основного домена и всех поддоменов.
Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны:

Как сделать заставку на сайт на CSS и JavaScript
Задачу можно сформулировать так: при первом посещении сайта посетителю показывается "заставка", а при дальнейшем перемещении по внутренним ссылкам — главная страница.
Собственно говоря, есть два варианта:
-
sessionStorage — заставка нужна при каждом новом открытии вкладки (не страницы),
-
localStorage — заставка нужна для одного человека только один раз за всю его историю посещения сайта.
<div id="pop-up">
<div onclick="popUp()">посмотреть
реализацию</div>
</div>
Это самый упрощённый вариант. Количество элементов в заставке (например, наличие социальных кнопок) каждый определяет сам.
Скрипт хорош тем, что не нарушает правил Google AdSense, заставка не перекрывает рекламные объявления, так как те не загружаются. Но код JavaScript нужно расположить выше кода AdSense.
JavaScript / jQuery
var popup = document.getElementById('pop-up');
function popUp() {
sessionStorage.setItem('popup', 'none');
location.reload();
}
if(sessionStorage.getItem('popup') || !window.sessionStorage) {
popup.parentNode.removeChild(popup);
}else{
if(window.stop !== undefined) {
window.stop();
} else if (document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
}
Стили CSS
#pop-up {
position: fixed; top: 0; bottom: 0; left: 0; right: 0;
z-index: 100;
background: rgba(0,0,0,.5) url(http://www.afsklyar.ru/zaglu1.jpg) no-repeat 50% 50%;
background-size: cover;
}
#pop-up div {
position: absolute;
right: 10%;
top: 20%;
padding: 3%;
border-radius: 3%;
font-size: 300%;
white-space: pre-wrap;
line-height: 100%;
color: #fff;
background: red;
cursor: pointer;
}
Координаты городов России (центры)
- Москва
55.75, 37.62
- Абакан
53.72, 91.43
- Адлер
43.43, 39.92
- Азов
47.11, 39.42
- Александров
56.4, 38.71
- Алексин
54.51, 37.07
- Альметьевск
54.9, 52.32
- Анадырь
64.73, 177.51
- Анапа
44.89, 37.32
- Ангарск
52.54, 103.89
- Анжеро-Судженск
56.08, 86.03
- Апатиты
67.56, 33.4
- Арзамас
55.39, 43.84
- Армавир
44.99, 41.12
- Арсеньев
44.15, 133.28
- Артём
43.36, 132.19
- Архангельск
64.54, 40.54
- Асбест
57.01, 61.46
- Астрахань
46.35, 48.04
- Ачинск
56.27, 90.5
- Балаково
52.03, 47.8
- Балахна
56.49, 43.6
- Балашиха
55.81, 37.96
- Балашов
51.55, 43.17
- Барнаул
53.36, 83.76
- Батайск
47.14, 39.75
- Белгород
50.61, 36.58
- Белебей
54.12, 54.12
- Белово
54.42, 86.3
- Белогорск
50.92, 128.48
- Белорецк
53.96, 58.4
- Белореченск
44.77, 39.88
- Бердск
54.76, 83.1
- Березники
59.41, 56.82
- Берёзовский
55.6, 86.2
- Бийск
52.54, 85.21
- Биробиджан
48.79, 132.92
- Благовещенск
50.28, 127.54
- Бор
56.36, 44.07
- Борисоглебск
51.37, 42.08
- Боровичи
58.39, 33.92
- Братск
56.13, 101.61
- Брянск
53.25, 34.37
- Бугульма
54.54, 52.8
- Бугуруслан
53.66, 52.44
- Будённовск
44.78, 44.17
- Бузулук
52.78, 52.26
- Буйнакск
42.82, 47.12
- Великие Луки
56.34, 30.55
- Великий Новгород
58.52, 31.27
- Верхняя Пышма
56.97, 60.58
- Видное
55.55, 37.71
- Владивосток
43.11, 131.87
- Владикавказ
43.04, 44.67
- Владимир
56.14, 40.4
- Волгоград
48.72, 44.5
- Волгодонск
47.51, 42.15
- Волжск
55.87, 48.36
- Волжский
48.79, 44.78
- Вологда
59.22, 39.88
- Вольск
52.05, 47.38
- Воркута
67.5, 64.05
- Воронеж
51.67, 39.18
- Воскресенск
55.32, 38.65
- Восточное Дегунино
55.88, 37.56
- Воткинск
57.05, 53.99
- Выборг
60.71, 28.75
- Выкса
55.32, 42.17
- Вышний Волочек
57.59, 34.56
- Вязьма
55.21, 34.3
- Гатчина
59.58, 30.13
- Геленджик
44.56, 38.08
- Георгиевск
44.15, 43.47
- Глазов
58.14, 52.66
- Горно-Алтайск
51.96, 85.92
- Грозный
43.31, 45.69
- Губкин
51.28, 37.55
- Гуково
48.06, 39.94
- Гусь-Хрустальный
55.61, 40.65
- Дербент
42.07, 48.29
- Дзержинск
56.24, 43.46
- Димитровград
54.21, 49.62
- Дмитров
56.34, 37.52
- Долгопрудный
55.95, 37.5
- Домодедово
55.44, 37.75
- Донецк
48.34, 39.96
- Дубна
56.73, 37.17
- Егорьевск
55.38, 39.03
- Ейск
46.71, 38.27
- Екатеринбург
56.85, 60.61
- Елабуга
55.76, 52.06
- Елец
52.62, 38.5
- Ессентуки
44.04, 42.86
- Железногорск
56.25, 93.53
- Железногорск
52.33, 35.37
- Железнодорожный
55.74, 38.02
- Жигулевск
53.4, 49.5
- Жуковский
55.6, 38.12
- Заречный
53.13, 46.58
- Заречный
53.2, 45.19
- Заринск
53.71, 84.95
- Зеленогорск
56.11, 94.6
- Зеленоград
55.98, 37.18
- Зеленодольск
55.84, 48.52
- Златоуст
55.17, 59.65
- Иваново
57, 40.97
- Ивантеевка
55.97, 37.92
- Ижевск
56.85, 53.2
- Иркутск
52.3, 104.3
- Искитим
54.64, 83.3
- Ишим
56.11, 69.49
- Ишимбай
53.45, 56.04
- Йошкар-Ола
56.64, 47.89
- Казань
55.79, 49.12
- Калининград
54.71, 20.51
- Калуга
54.53, 36.28
- Каменск
48.32, 40.26
- Каменск-Уральский
56.42, 61.93
- Камышин
50.1, 45.42
- Канск
56.2, 95.72
- Каспийск
42.88, 47.64
- Кемерово
55.33, 86.08
- Кизляр
43.85, 46.71
- Кимры
56.87, 37.35
- Кингисепп
59.37, 28.61
- Кинешма
57.44, 42.13
- Кириши
59.45, 32.02
- Киров
58.6, 49.66
- Кирово-Чепецк
58.55, 50.04
- Киселёвск
53.99, 86.66
- Кисловодск
43.91, 42.72
- Климовск
55.36, 37.53
- Клин
56.33, 36.73
- Клинцы
52.76, 32.24
- Ковров
56.36, 41.32
- Когалым
62.27, 74.48
- Коломна
55.08, 38.78
- Колпино
59.75, 30.59
- Комсомольск-на-Амуре
50.55, 137.01
- Копейск
55.12, 61.63
- Королёв
55.91, 37.83
- Кострома
57.77, 40.93
- Котлас
61.26, 46.65
- Красногорск
55.82, 37.33
- Краснодар
45.04, 38.98
- Краснокаменск
50.1, 118.04
- Краснокамск
58.08, 55.76
- Краснотурьинск
59.77, 60.21
- Красноярск
56.02, 92.87
- Кропоткин
45.44, 40.58
- Крымск
44.93, 37.99
- Кстово
56.15, 44.2
- Кузнецк
53.12, 46.6
- Кумертау
52.77, 55.78
- Кунгур
57.44, 56.96
- Курган
55.45, 65.33
- Курск
51.74, 36.19
- Кызыл
51.71, 94.45
- Лабинск
44.63, 40.74
- Лениногорск
54.6, 52.46
- Ленинск-Кузнецкий
54.66, 86.17
- Лесной
57.62, 63.08
- Лесосибирск
58.24, 92.48
- Ливны
52.43, 37.61
- Липецк
52.6, 39.57
- Лиски
50.98, 39.52
- Лобня
56.01, 37.48
- Лысьва
58.11, 57.81
- Лыткарино
55.58, 37.91
- Люберцы
55.68, 37.89
- Магадан
59.56, 150.8
- Магас
43.22, 44.77
- Магнитогорск
53.42, 59.05
- Майкоп
44.61, 40.11
- Махачкала
42.98, 47.5
- Междуреченск
53.69, 88.06
- Мелеуз
52.96, 55.93
- Миасс
55.05, 60.11
- Минеральные Воды
44.21, 43.14
- Минусинск
53.71, 91.69
- Михайловка
50.06, 43.24
- Михайловск
45.13, 42.03
- Мичуринск
52.9, 40.49
- Мурманск
68.98, 33.09
- Муром
55.58, 42.04
- Мытищи
55.91, 37.73
- Набережные Челны
55.73, 52.41
- Назарово
56.01, 90.4
- Назрань
43.23, 44.77
- Нальчик
43.5, 43.62
- Наро-Фоминск
55.39, 36.73
- Нарьян-Мар
67.64, 53
- Находка
42.81, 132.87
- Невинномысск
44.63, 41.94
- Нерюнгри
56.67, 124.64
- Нефтекамск
56.09, 54.27
- Нефтеюганск
61.1, 72.6
- Нижневартовск
60.93, 76.55
- Нижнекамск
55.64, 51.82
- Нижний Новгород
56.33, 44
- Нижний Тагил
57.92, 59.97
- Ново-Переделкино
55.65, 37.34
- Новоалтайск
53.39, 83.94
- Новокузнецк
53.76, 87.11
- Новокуйбышевск
53.1, 49.95
- Новомосковск
54.01, 38.28
- Новороссийск
44.72, 37.77
- Новосибирск
55.04, 82.93
- Новотроицк
51.2, 58.33
- Новоуральск
57.24, 60.08
- Новочебоксарск
56.11, 47.48
- Новочеркасск
47.42, 40.09
- Новошахтинск
47.76, 39.93
- Новый Уренгой
66.08, 76.63
- Ногинск
55.87, 38.44
- Норильск
69.35, 88.2
- Ноябрьск
63.19, 75.44
- Нягань
62.14, 65.39
- Обнинск
55.1, 36.61
- Одинцово
55.68, 37.28
- Озёрск
55.76, 60.7
- Октябрьский
54.48, 53.47
- Омск
54.99, 73.37
- Орёл
52.97, 36.08
- Оренбург
51.77, 55.1
- Орехово-Зуево
55.81, 38.96
- Орск
51.2, 58.57
- Отрадный
53.38, 51.35
- Павлово
55.97, 43.09
- Павловский Посад
55.78, 38.65
- Пенза
53.2, 45
- Первоуральск
56.91, 59.94
- Пермь
58.01, 56.25
- Петергоф
59.88, 29.9
- Петрозаводск
61.78, 34.35
- Петропавловск-Камчатский
53.04, 158.65
- Подольск
55.42, 37.55
- Полевской
56.44, 60.19
- Прокопьевск
53.91, 86.72
- Прохладный
43.76, 44.03
- Псков
57.81, 28.35
- Пушкин
59.71, 30.4
- Пушкино
56.02, 37.87
- Пятигорск
44.05, 43.06
- Раменское
55.57, 38.23
- Ревда
56.8, 59.93
- Реутов
55.76, 37.86
- Ржев
56.26, 34.33
- Рославль
53.95, 32.86
- Россошь
51.12, 38.51
- Россошь
50.2, 39.57
- Ростов-на-Дону
47.23, 39.72
- Рубцовск
51.51, 81.21
- Рыбинск
58.04, 38.84
- Рязань
54.63, 39.69
- Салават
53.38, 55.91
- Салехард
66.53, 66.6
- Сальск
46.47, 41.54
- Самара
53.2, 50.15
- Санкт-Петербург
59.94, 30.31
- Саранск
54.18, 45.17
- Сарапул
56.48, 53.8
- Саратов
51.54, 46.01
- Саров
54.94, 43.32
- Свободный
51.38, 128.14
- Северодвинск
64.56, 39.83
- Североморск
69.07, 33.42
- Северск
56.6, 84.89
- Сергиев Посад
56.3, 38.13
- Серов
59.6, 60.58
- Серпухов
54.92, 37.41
- Сибай
52.72, 58.67
- Славянск-на-Кубани
45.26, 38.13
- Смоленск
54.78, 32.04
- Снежинск
56.09, 60.73
- Соликамск
59.63, 56.77
- Солнечногорск
56.18, 36.98
- Сосновый Бор
59.9, 29.09
- Сочи
43.6, 39.73
- Ставрополь
45.04, 41.97
- Старый Оскол
51.3, 37.84
- Стерлитамак
53.62, 55.95
- Ступино
54.9, 38.07
- Сунжа
43.32, 45.05
- Сургут
61.25, 73.42
- Сызрань
53.16, 48.47
- Сыктывкар
61.68, 50.81
- Таганрог
47.24, 38.9
- Талнах
69.49, 88.4
- Тамбов
52.73, 41.44
- Тверь
56.86, 35.9
- Тимашёвск
45.62, 38.95
- Тихвин
59.65, 33.53
- Тихорецк
45.85, 40.13
- Тобольск
58.2, 68.25
- Тольятти
53.53, 49.35
- Томск
56.5, 84.97
- Троицк
54.1, 61.58
- Туапсе
44.11, 39.08
- Туймазы
54.61, 53.71
- Тула
54.2, 37.62
- Тулун
54.56, 100.58
- Тюмень
57.15, 65.53
- Узловая
53.98, 38.17
- Улан-Удэ
51.83, 107.61
- Ульяновск
54.33, 48.39
- Усолье-Сибирское
52.75, 103.65
- Уссурийск
43.8, 131.95
- Усть-Илимск
58, 102.66
- Уфа
54.74, 55.97
- Ухта
63.57, 53.68
- Фрязево
55.73, 38.46
- Фрязино
55.96, 38.05
- Хабаровск
48.48, 135.08
- Ханты-Мансийск
61, 69
- Хасавюрт
43.25, 46.59
- Химки
55.9, 37.43
- Чайковский
56.77, 54.11
- Чапаевск
52.98, 49.71
- Чебоксары
56.13, 47.25
- Челябинск
55.15, 61.43
- Черёмушки
55.66, 37.56
- Черемхово
53.16, 103.07
- Череповец
59.13, 37.9
- Черкесск
44.22, 42.06
- Черногорск
53.82, 91.28
- Чехов
55.15, 37.48
- Чистополь
55.36, 50.64
- Чита
52.03, 113.5
- Чусовой
58.3, 57.81
- Шадринск
56.09, 63.63
- Шахты
47.71, 40.21
- Шуя
56.85, 41.39
- Щекино
54.01, 37.52
- Щёлково
55.93, 37.97
- Эжва
61.81, 50.73
- Электросталь
55.79, 38.45
- Элиста
46.31, 44.26
- Энгельс
51.48, 46.11
- Южно-Сахалинск
46.95, 142.74
- Якутск
62.03, 129.73
- Ярославль
57.63, 39.87
Положение об использовании cookies
Размещаем следующий код javascript в макете сайта, перед тегом </body>
<script>
function checkCookies(){
let cookieDate = localStorage.getItem('cookieDate');
let cookieNotification = document.getElementById('cookieBlock');
let cookieBtn = cookieNotification.querySelector('.cookie_accept');
// Если записи про кукисы нет или она просрочена на 1 месяц, то показываем информацию про кукисы
if( !cookieDate || (+cookieDate + 2592000) < Date.now() ){
cookieNotification.classList.add('show');
}
// При клике на кнопку, в локальное хранилище записывается текущая дата в системе UNIX
cookieBtn.addEventListener('click', function(){
localStorage.setItem( 'cookieDate', Date.now() );
cookieNotification.classList.remove('show');
})
}
checkCookies();
$(function() {
$('.btn-close').on('click', function(){
$('#cookieBlock').removeClass('show');
});
});
</script>
и код, который будет показывать окно с сообщением
<div id="cookieBlock" class="alert alert-dismissable">
<span class="pe-4">Мы используем файлы cookie и другие аналитичекие данные. Они помогают нам улучшить ваше взаимодействие с сайтом. Оставаясь на сайте, вы даете согласие на обработку пользовательских данных. <a href="/cookies/" target="_blank" class="yellow">Положение об использовании cookie</a></span>
<button type="button" class="btn btn-secondary cookie_accept">Принять</button>
<button type="button" class="btn-close ms-4" data-bs-dismiss="alert" aria-hidden="true" title="Закрыть"></button>
</div>Стили CSS
/*******************************/
#cookieBlock {
position:fixed;
display:none;
bottom:0;
left:0;
right:0;
z-index:1001;
margin:0;
background-color: hsla(0, 0%, 20%, 0.95);;
padding:30px 120px 30px 80px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
#cookieBlock.show{
display: flex;
}
#cookieBlock .btn-close {
background: transparent url(/images/cross.svg) center center no-repeat;
}
/*******************************/
Разрешение экрана
Для соотношения сторон 4:3
1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536.
Для соотношения сторон 16:9:
1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160.
Для соотношения сторон 16:10:
1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400.
Самыми популярными сегодня являются разрешения:
1920х1080, 1280х1024, 1366x768.