Бюджет: 500 UAH Термін: 1 день
Сделаю
= -= =- =- =- =- =- =- =- =- = -= -= - =-= -=- = -= -= -= -= -= -=- =- =-
Не переходит по указанным ссылкам в слайдере, нужно чтобы при клике на ссылку переходили.
| <div class="container"> | |
| <div class="slider"> | |
| <div class="slider__wrapper"> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="https://happy-travel.kz/upload/userfiles/images/osobennosti-otdykha-v-period-ramadan.jpg" title="Особенности отдыха в период Рамадана в ОАЭ, Турция, Египет, Тунис" alt="Особенности отдыха в период Рамадана" > | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="https://happy-travel.kz/article/osobennosti-otdykha-v-period-ramadan.php">Особенности отдыха в период Рамадана</a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="https://happy-travel.kz/i/dubai-food-uae.jpg" title="Сколько стоит покушать в Дубаи за пределами отеля" alt="Цены на еду в Дубае" > | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="/uae/skolko-stoit-pokushat-v-dubai-za-predelami-otelya.php">Сколько стоит поесть в ОАЭ вне отеля</a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="/i/festival-tyulpanov-stambul.jpg" Title="Стамбульский Фестиваль Тюльпанов" alt="Фестиваль Тюльпанов"> | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="https://happy-travel.kz/turkey/festival_tyulpanov.php">Фестиваль Тюльпанов</a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="https://happy-travel.kz/i/paris.jpg" Title="6 топ-мест к посещению во Франции" alt="Самые значимые места во Франции"> | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="https://happy-travel.kz/france/index.php">6 топ-мест к посещению во Франции </a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="https://happy-travel.kz/i/luchshie-semeynye-oteli-v-turtsii.jpg" Title="Лучшие отелей для семейного отдыха в Турции" alt="Топ-10 отелей для семейного отдыха в Турции"> | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="https://happy-travel.kz/turkey/top-10-family-hotels.php">Топ-10 семейных отелей Турции</a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="https://happy-travel.kz/i/top10-molodejnyh-otelei-turcii.jpg" Title="Топ-10 отели Турции для молодежи 2019" alt="Топ-10 молодежных отелей Турции"> | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="https://happy-travel.kz/turkey/top10hotels.php">Топ-10 молодежных отелей Турции</a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="https://happy-travel.kz/i/turkey-kappadokiya.jpg" Title="Туры в Каппадокию из Алматы" alt="Туры в Каппадокию"> | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="https://happy-travel.kz/turkey/%D0%BA%D0%B0%D0%BF%D0%BF%D0%B0%D0%B4%D0%BE%D0%BA%D0%B8%D1%8F.php">Туры в Каппадокию</a></p> | |
| </div> | |
| </div> | |
| <div class="slider__item"> | |
| <div class="slider__content"> | |
| <div class="slider__content_header"> | |
| <img class="slider__content_img" src="/i/10-poleznyh-prilozhenija-dlja-puteshestvij.jpg" Title="10 самых полезных приложений для путешественников" alt="10 полезных приложений для путешественников"> | |
| </div> | |
| <p class="slider__content_title"><a class="sl" href="/ru/sovety/apps.php">10 полезных приложений для путешественников</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <a class="slider__control slider__control_left" role="button"></a> | |
| <a class="slider__control slider__control_right" role="button"></a> | |
| </div> | |
| </div> | |
<script> 'use strict';
var multiItemSlider = (function () {
function _isElementVisible(element) {
var rect = element.getBoundingClientRect(),
vWidth = window.innerWidth || doc.documentElement.clientWidth,
vHeight = window.innerHeight || doc.documentElement.clientHeight,
elemFromPoint = function (x, y) { return document.elementFromPoint(x, y) };
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
return (
element.contains(elemFromPoint(rect.left, rect.top))
|| element.contains(elemFromPoint(rect.right, rect.top))
|| element.contains(elemFromPoint(rect.right, rect.bottom))
|| element.contains(elemFromPoint(rect.left, rect.bottom))
);
}
return function (selector, config) {
var
_mainElement = document.querySelector(selector),
_sliderWrapper = _mainElement.querySelector('.slider__wrapper'),
_sliderItems = _mainElement.querySelectorAll('.slider__item'),
_sliderControls = _mainElement.querySelectorAll('.slider__control'),
_sliderControlLeft = _mainElement.querySelector('.slider__control_left'),
_sliderControlRight = _mainElement.querySelector('.slider__control_right'),
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width),
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width),
_html = _mainElement.innerHTML,
_positionLeftItem = 0,
_transform = 0,
_step = _itemWidth / _wrapperWidth * 100,
_items = [],
_interval = 0,
_states = [
{ active: false, minWidth: 0, count: 1 },
{ active: false, minWidth: 576, count: 2 },
{ active: false, minWidth: 992, count: 3 },
{ active: false, minWidth: 1200, count: 4 },
],
_config = {
isCycling: false,
direction: 'right',
interval: 5000,
pause: true
};
for (var key in config) {
if (key in _config) {
_config[key] = config[key];
}
}
_sliderItems.forEach(function (item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var _setActive = function () {
var _index = 0;
var width = parseFloat(document.body.clientWidth);
_states.forEach(function (item, index, arr) {
_states[index].active = false;
if (width >= _states[index].minWidth)
_index = index;
});
_states[_index].active = true;
}
var _getActive = function () {
var _index;
_states.forEach(function (item, index, arr) {
if (_states[index].active) {
_index = index;
}
});
return _index;
}
var position = {
getItemMin: function () {
var indexItem = 0;
_items.forEach(function (item, index) {
if (item.position < _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getItemMax: function () {
var indexItem = 0;
_items.forEach(function (item, index) {
if (item.position > _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getMin: function () {
return _items[position.getItemMin()].position;
},
getMax: function () {
return _items[position.getItemMax()].position;
}
}
var _transformItem = function (direction) {
var nextItem;
if (!_isElementVisible(_mainElement)) {
return;
}
if (direction === 'right') {
_positionLeftItem++;
if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) {
nextItem = position.getItemMin();
_items[nextItem].position = position.getMax() + 1;
_items[nextItem].transform += _items.length * 100;
_items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
}
_transform -= _step;
}
if (direction === 'left') {
_positionLeftItem--;
if (_positionLeftItem < position.getMin()) {
nextItem = position.getItemMax();
_items[nextItem].position = position.getMin() - 1;
_items[nextItem].transform -= _items.length * 100;
_items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
}
_transform += _step;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
var _cycle = function (direction) {
if (!_config.isCycling) {
return;
}
_interval = setInterval(function () {
_transformItem(direction);
}, _config.interval);
}
var _controlClick = function (e) {
e.preventDefault();
if (e.target.classList.contains('slider__control')) {
var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
_transformItem(direction);
clearInterval(_interval);
_cycle(_config.direction);
}
};
var _handleVisibilityChange = function () {
if (document.visibilityState === "hidden") {
clearInterval(_interval);
} else {
clearInterval(_interval);
_cycle(_config.direction);
}
}
var _refresh = function () {
clearInterval(_interval);
_mainElement.innerHTML = _html;
_sliderWrapper = _mainElement.querySelector('.slider__wrapper');
_sliderItems = _mainElement.querySelectorAll('.slider__item');
_sliderControls = _mainElement.querySelectorAll('.slider__control');
_sliderControlLeft = _mainElement.querySelector('.slider__control_left');
_sliderControlRight = _mainElement.querySelector('.slider__control_right');
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width);
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width);
_positionLeftItem = 0;
_transform = 0;
_step = _itemWidth / _wrapperWidth * 100;
_items = [];
_sliderItems.forEach(function (item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
}
var _setUpListeners = function () {
_mainElement.addEventListener('click', _controlClick);
if (_config.pause && _config.isCycling) {
_mainElement.addEventListener('mouseenter', function () {
clearInterval(_interval);
});
_mainElement.addEventListener('mouseleave', function () {
clearInterval(_interval);
_cycle(_config.direction);
});
}
document.addEventListener('visibilitychange', _handleVisibilityChange, false);
window.addEventListener('resize', function () {
var
_index = 0,
width = parseFloat(document.body.clientWidth);
_states.forEach(function (item, index, arr) {
if (width >= _states[index].minWidth)
_index = index;
});
if (_index !== _getActive()) {
_setActive();
_refresh();
}
});
}
// инициализация
_setUpListeners();
if (document.visibilityState === "visible") {
_cycle(_config.direction);
}
_setActive();
return {
right: function () {
_transformItem('right');
},
left: function () {
_transformItem('left');
},
stop: function () {
_config.isCycling = false;
clearInterval(_interval);
},
cycle: function () {
_config.isCycling = true;
clearInterval(_interval);
_cycle();
}
}
}
}());
var slider = multiItemSlider('.slider', {
isCycling: true
})</script><style> /*! * chiefSlider (https://itchief.ru/lessons/php/feedback-form-for-website) * Copyright 2018 Alexander Maltsev * Licensed under MIT (https://github.com/itchief/feedback-form/blob/master/LICENSE) */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #fff; } .slider { position: relative; overflow: hidden; max-width: 1600px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } .slider__wrapper { display: flex; transition: transform 0.6s ease; } .slider__item { flex: 0 0 100%; max-width: 100%; padding-left: 10px; padding-right: 10px; } @media (min-width: 576px) { .slider__item { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 992px) { .slider__item { flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 1200px) { .slider__item { flex: 0 0 25%; max-width: 25%; } } .slider__control { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 50px; color: #fff; text-align: center; bottom: 0; background: #fff; } .slider__control:hover, .slider__control:focus { color: #fff; text-decoration: none; outline: 0; } .slider__control_left { left: 0; } .slider__control_right { right: 0; } .slider__control::before { content: ''; display: inline-block; width: 20px; height: 20px; background: transparent no-repeat center center; background-size: 100% 100%; } .slider__control_left::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23424242' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); } .slider__control_right::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23424242' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); } .slider__content_header { position: relative; } .slider__content_img { display: block; height: auto; max-width: 100%; } .slider__content_section { position: absolute; bottom: 0; left: 0; background: #009688; color: #fff; padding: 4px 8px; } .slider__content_title { background: #f5f5f5; color: #424242; white-space: normal; font-weight: 700; font-size: 20px; line-height: 1.3; padding: 10px 15px; margin: 0; height: 52px; } .slider__content_footer { background: #f5f5f5; display: flex; padding: 20px 15px; color: #616161; } .slider__content_avatar { flex: 0 0 40px; max-width: 40px; } .slider__content_photo { display: block; height: auto; max-width: 100%; border-radius: 50%; } .slider__content_author { margin-left: 8px; line-height: 40px; } .slider__content_icon { height: 18px; margin-top: 12px; margin-left: auto; } .slider__content_views { margin-left: 4px; line-height: 40px; } </style> |
Бюджет: 500 UAH Термін: 1 день
Сделаю
= -= =- =- =- =- =- =- =- =- = -= -= - =-= -=- = -= -= -= -= -= -=- =- =-
Бюджет: 200 UAH Термін: 1 день
Привет выполню сейчас
понял в чем проблема
@HacerTo118
c ув.Данил
В мене в google exel є деяка логіка яка повязана з інтеграцією з апі Нової Пошти і апі Турбосмс. Взагалом все працює норм, але треба дописати деякий функціонал. Всі деталі при переписці. Доступ до ексель і коду я дам. Для виконавця взагалом обов'язково мати досвід роботи google exel JS в Apps Script
Всім привіт, потрібно створити сайт для створення івентів та продажу квитків. Можливі варіанти на готовому шаблоні, фреймворк, або ваш варіант. Бажано щоб у вас був досід роботи в розробці сайтів для продажу квитків. Приклади сайтів надішлемо у приватні повідомлення. За необхідності створимо прототип. Якщо ви раніше працювали над створенням подібних сайтів надішліть будь ласка приклади в приватні повідомлення. Деталі обговоримо в приватних повідомленнях. Дякую і гарного дня!
Сайт працює на фреймворку Next.js (на базі React). Потрібно зробити всі пункти за ТЗ. ТЗ додається у файлу. Чекаю на пропозиції.
Сайт для оцінки: https://copy.eurobrands-shop.de/ Завдання: виправити frontend-баги на рівні теми Magento 2 / Amasty theme: CSS/LESS/JS, mobile, RTL, minicart, language dropdown, layout shift/CLS. Формат роботи: - без локального розгортання Magento; - робота через DevTools + вихідники теми; - правки в CSS/LESS/JS/template-файлах теми; - результат: diff / коміт / архів змінених файлів; - деплой і збірка на нашій стороні; - робота через безпечну угоду; - NDA до передачі вихідників/доступів. Що потрібно перевірити і оцінити: 1. RTL / арабська версія: - телефон у шапці відображається некоректно; - зміщення елементів у header, minicart, wishlist/account, product page; - відступи, direction, unicode-bidi, позиціонування. 2. Header: - language dropdown; - cart/wishlist; - hit-area іконок. 3. Minicart: - нестабільно відкривається на деяких сторінках; - перевірити Console / Network / Event Listeners / customer-data / z-index / overlay. 4. Mobile: - бейджі корзини/wishlist занадто великі; - блок Categories стискається/обрізається; - mobile menu / Menu-Account. 5. Product page: - layout shift / CLS зображення; - Add to Cart / Quantity / BOX / PALLET в RTL. 6. Wishlist/account: - /wishlist/ - /mwishlist/ - вкладки, Back button, переповнення лічильників. Проблемні URL: - https://copy.eurobrands-shop.de/alpro - https://copy.eurobrands-shop.de/producers - https://copy.eurobrands-shop.de/wishlist/ - https://copy.eurobrands-shop.de/mwishlist/ В відповіді напишіть: 1. Чи є досвід з Magento 2 frontend? 2. Чи є досвід RTL? 3. Скільки годин потрібно на перший етап? 4. Яка вартість? 5. Коли можете почати? 6. Які доступи потрібні? 7. Чи готові працювати через безпечну угоду і підписати NDA? Важливо: потрібен конкретний результат — виправлення або технічне пояснення по кожному пункту: виправлено / не відтворюється / не frontend-проблема.
Опис замовлення: Шукаємо досвідченого frontend-розробника/фахівця з OpenCart для оптимізації швидкості завантаження сайту (категорії та картки товарів) під вимоги Google Core Web Vitals. Про проект: * CMS: OpenCart. * Специфіка: Сайт працює в режимі каталогу (кошика та оформлення замовлення немає). * Об'єм: 2900 позицій. * Серверна частина: Вже оптимізована (працює на OpenLiteSpeed). * Стек: Робота ведеться виключно з кодом шаблону, модифікаторами та фронтендом. Без роботи із базою даних. Що потрібно зробити (Технічне завдання): 1. Відкладене завантаження скриптів (Delay JS): * Проблема: Сторонні скрипти аналітики (GTM, Google Tag) блокують основний потік на мобільних пристроях приблизно на 4.3 секунди. * Завдання: Налаштувати відкладений запуск цих скриптів. Скрипти повинні активуватися строго по першій дії користувача (перший скролл, тап по екрану або рух миші). * Важливо: Збір статистики, аналітика та робота реклами мають зберегтися у повному обсязі. 2. Виправлення метрики CLS (Стабільність верстки): * Проблема: Сторінка «стрибає» і зсувається під час завантаження картинок. * Завдання: У файлах стилів або шаблону теми жорстко прописати HTML-атрибути width і heightдля всіх зображень товарів у каталозі (листингах) та картках товару. * Мета: Зарезервувати місце під зображення в DOM-дереві до їх фактичного завантаження, щоб унеможливити зсув контенту. Перевірити, щоб адаптивність (CSS) не зламалася. 3. Оптимізація критичного шляху (LCP): * Завдання: Прописати для основного (головного) зображення товару першому екрані тег fetchpriority="high". Це дасть браузеру команду завантажувати головне фото товару у пріоритетному порядку. Вимоги до виконавця та умови приймання: 1. Без зайвих модулів: Робота виконується чистим кодом/модифікаторами, без встановлення додаткових сторонніх чи платних плагінів оптимізації. 2. Безпека та верстка: Ви несете повну відповідальність за верстку. Після внесення правок візуальне відображення сайту на мобільних та ПК, а також функціонал (фільтри, перемикання фото в галереї, меню) повинні залишитися без змін. 3. Критерій здачі роботи (DoD): Надання скріншота та посилання на живий тест звіту Google PageSpeed Insights (для мобільної версії). Показник продуктивності має бути не нижчим за 75 балів, а метрика CLS — не більше 0.1 (у зеленій зоні). Правки вносити строго через модифікатори (OCMOD) або копію теми, щоб не затерти оновлення ядра. У відгуку, будь ласка, вкажіть: 1. Чи був досвід налаштування Delay JS саме для GTM на OpenCart? 2. Термін виконання завдання. 3. Вартість роботи.