Добрый день. Необходимо сделать небольшие доработки в html/css/js на моем проекте. Адрес проекта: https://1.medgain.biz/ , кабинет - https://1.medgain.biz/account.html
1. Переделать графики с панели администратора https://www.1.medgain.biz/adminpanel/index.html на такой дизайн - файл https://www.1.medgain.biz/04.jpeg , но без "10% APY". Просто вот такой зеленый график. Сверху над графиком https://www.1.medgain.biz/adminpanel/index.html есть переключатели "Депозиты | USD" Всего/Новых, а также "Новых пользователей" Всего/Новых. Оформить вот эти переключатели можно как тут - https://www.1.medgain.biz/02.webp (All-time/monthly/yearly). Толко в нашей зеленой расцветке (в цветовой палитре графика). Также, при наведении курсора на тот или иной день (на кружочек) - должно показываться число (сколько именно кол-ва депозитов/итд. в числовом формате за тот или иной день). Всего дней в графиках будет 7.
2. Оформить панель администратора в лучшем виде (размещение объектов/графиков/таблиц/меню) - все подходит. Но нужно как-то стильно оформить, возможно, в таком же стиле как и график с прошлого пункта.
На главной странице кабинета есть "Показаны с 1 по 15 из 132 записей" , а справа - номера страниц. Номера страниц оформить в таком стиле - https://www.1.medgain.biz/01.jpeg
На главной, там где балансы - биткоин, эфириум, лайткоин - оформить 1:1 как на сайте https://lineone.piniastudio.com/dashboards-crypto-1.html - справа. Там шрифт красивее, и градиент есть на рамочках. Так же и оформить другие криптовалюты, просто под фирменный дизайн самих криптовалют (рамочку). Также, на этом же сайте есть "Latest Activities" - можно так же оформить историю операций на главной странице в админке. Просто вместо "ACTIVITY" - писать "пользователь". Итд. Без иконок слева.
Также оформлять и другие таблицы из панели администратора.
Шрифт переделать на более красивый по всей админке. Возможно, на такой, как написано "Bitcoin" на сайте https://lineone.piniastudio.com/dashboards-crypto-1.html
3. Анимация в логотипе сверху js (что бы полочки в фирменном значке двигались, как на картинке https://www.1.medgain.biz/1.gif ) Это мне подходит. Но проблема в том - что анимированый лого в формате .gif на белом фоне, и если сделать на прозрачном фоне .gif - будут пиксели с анимацией (палочками движущимися). А так как при скролле главной страницы логотип везде присутствует, то он должен быть только либо в прозрачном формате, либо в .svg (как сейчас - https://1.medgain.biz/logo.svg) , но как-то нужно написать на JS что бы конкретные палочки двигались то вверх то вниз.
4. Дизайн личного кабинета улучшить https://1.medgain.biz/account.html
Что бы хотелось - главная кабинета как-то скудно сейчас выглядит, хотелось бы с этими что-то сделать. Не нравится расположение справа иконок. Возможно, сделать также как и слева функция "Select cryptocurrency", а дальше в зависимости какую криптовалюту выберет человек - показывать крупным планом "Referral bonus", "Invested", "Earned" каждой конкретной криптовалюты. Возможно еще как-то, подумайте, как бы можно было бы красиво оформить.
Или даже можно что бы один раз человек выбрал криптовалюту - слева в разделе "Select cryptocurrency", а справа уже что бы также показывался баланс от выбранной криптовалюты слева.
5. В личном кабинете анимированная gif по центру - хочется сделать её с дополнительными эффектами. Возможно, взять её в такой вот щит https://www.1.medgain.biz/06.jpeg где вместо замочка будет наша анимация. Но убрать при этом все маленькие картинки - FaceID, отпечаток и снизу еще иконку.
Все остальные файлы по личному кабинету находятся у вас в архиве.
6. Значки переключателей страниц внизу историй операций https://1.medgain.biz/history.html оформить вот так — https://www.1.medgain.biz/01.jpeg, а саму таблицу - как таблица https://lineone.piniastudio.com/dashboards-crypto-1.html, только с нашими ячейками и данными (без иконок слева). Также, возле "History list" сделать выпадающий список как тут https://www.1.medgain.biz/08.png - "Status". Что бы пользователь мог отфильтровать нужные ему истории операций по выбранной категории.
По странице https://1.medgain.biz/settings.html возражений нет, вроде там и так все хорошо.
Подумайте еще, как можно было бы оформить сами вкладки в личном кабинете (Dashboard/Your deposits/Affiliate program/Financial history/Personal settings). Вроде как выглядят достойно, но возможно, у вас будет лучше какой-то вариант под наш дизайн
7. Сделать тикет-систему в личном кабинете. Таким образом, что бы человек писал запрос и получал ответы непосредственно в личном кабинете (от вас толькo html/css/js, не программирование). Сделать новый пункт в меню кабинета после "Personal settings" - "Ticket". На главной в разделе тикетов должно быть: список тикетов пользователя актуальных и закрытых (в двух разных таблицах), и кнопка «создать тикет». При нажатии на эту кнопку - открывается форма, в которой нужно указать поля: «тема обращения», выбрать департамент к кому идет обращение (из выпадающего списка) , «текст обращения». После - кнопка «отправить». После нажатия на кнопку «отправить» человек должен попадать к своему созданному тикету. Оформление должно быть приметно как в Сообщениях на iPhone, но что бы дизайн соответствовал нашему проекту конечно же. То есть, там должна быть тема письма, которую указал пользователь, ID его обращение в системе, и название департамента куда он адресовал обращение. После - его сообщение. В тикете можно добавить еще сообщение от пользователя (даже если после первого сообщения не было ответа от оператора). Также, у человека должна быть сверху тикета (там где название его и другая информация) - кнопка «закрыть тикет». То есть, пользователь сам может закрыть тикет свой даже если в нем не отписался еще оператор. Далее, если тикет закрыт (не важно кем, пользователем или оператором) - должно появится «оцените качество обслуживания», где можно выставить звездочку от 1 до 5.
8. Сделать тикет-систему в панели администратора (только html/css/js). Таблицу, где будет список тикетов , с темой и предварительным куском сообщения (что бы влезло в одно строчку, дальше - «….», и продолжение будет когда я открою этот тикет). В самом тикете должна быть кнопка «закрыть тикет» (красная) и поле, где оператор может написать сообщение с кнопкой «отправить» (синяя).
9. На главной странице сайта есть картинка https://www.1.medgain.biz/images/5percent_v3.png. Нужно сделать её анимированной на JS. Как сделано это на сайте https://web.archive.org/web/20220807094752/https://www.joinburst.com/ в разделе "Burst Secure". Что бы картинка плавно то вверх то вниз опускалась.
Готов работать как с предоплатой , так и без неё. Покажите свое портфолио возможно, с аналогичными работами или похожие на такие.
Цель - улучшить текущий дизайн платформы.
Файлы стилей, всех картинок и файлов прикрепил к проекту.
Что не нужно делать - не нужно править faq, how to start , signup , login , forgot password, contact.
В принципе, эти страницы выглядят красиво и я бы не стал их редактировать, там все в норме.
И другие страницы личного кабинета (многие из них) я бы оставил как они есть. Но если вы предложите варианты оформления более красивые - я рассмотрю их.
Писaть в тelegрам youtube_buy
Скачать архив с файлами: https://dropmefiles.com/m0PIl
Цена договорная, как оцените
Бюджет: 5500 UAH Срок: 12 дней
"Здравствуйте!
Опытный разработчик HTML и CSS, JS опыт работы более 4х лет, на счету много успешно реализованных проектов, сделаю всё в лучшем виде по оговоренным срокам.Пишите, обсудим все подробности."
Есть действующий production-сайт с каталогом товаров, карточками моделей и информационными страницами. Стек frontend: — Next.js; — React; — TypeScript; — существующая компонентная система; — staging и production environments. Есть согласованное визуальное направление и дизайн новой главной страницы. Необходимо внедрить его в существующий проект, адаптировать под desktop/tablet/mobile и привести все основные типы страниц сайта к единой обновлённой стилистике. Полный редизайн продукта и изменение бизнес-логики не требуются. ОБЯЗАТЕЛЬНЫЙ SCOPE 1. Новая главная страница — реализовать главную страницу по предоставленному дизайну; — сохранить существующую функциональность, ссылки и маршрутизацию; — корректно подключить согласованные секции и CTA; — использовать существующие данные и API; — предусмотреть корректное отображение динамического контента. Основные типы секций: — header/navigation; — hero; — информационные блоки; — карточки моделей/предложений; — аналитические или market insight блоки; — CTA-секции; — footer. Точный состав секций будет предоставлен выбранному исполнителю вместе с макетом. 2. Responsive Необходимо реализовать: — desktop; — tablet; — mobile; — промежуточные разрешения; — корректное поведение сеток, карточек, меню, кнопок и типографики; — отсутствие горизонтального скролла и визуальных конфликтов. 3. Типографика и общие стили — внедрить новые согласованные шрифты; — привести размеры, веса, line-height и интервалы к единой системе; — обновить стили кнопок, карточек, полей, бейджей и заголовков; — по возможности использовать общие design tokens или CSS variables; — не дублировать стили отдельно для каждой страницы без необходимости. 4. Унификация существующих страниц Проверить и привести к новой стилистике основные типы страниц: — каталог; — карточка модели / PDP; — информационные страницы; — header; — footer; — формы; — модальные окна; — существующие CTA; — loading / empty / error states, если они уже присутствуют в проекте. Речь идёт о визуальной унификации существующих компонентов, а не о полном индивидуальном редизайне каждой страницы. 5. Каталог Проверить: — сетку карточек; — изображения; — название, reference и цену; — фильтры и сортировки; — кнопки и ссылки; — desktop/mobile отображение; — loading и empty states; — отсутствие визуальных сдвигов при загрузке. 6. PDP Проверить: — галерею; — основной информационный блок; — цену и CTA; — аналитические секции; — таблицы и метрики; — About Watch; — desktop/mobile компоновку; — длинные названия, references и отсутствующие данные. Необходимо сохранить текущую функциональность и существующие контракты API. 7. Header и Footer — единая стилистика на всех страницах; — responsive navigation; — mobile menu; — корректные active/hover/focus states; — отсутствие расхождений между главной, каталогом и PDP. 8. Состояния интерфейса Для динамических блоков проверить: — loading; — empty data; — API error; — insufficient data; — отсутствующее изображение; — отсутствующая цена; — длинный текст; — мобильное отображение. Не требуется разрабатывать новую сложную бизнес-логику. Необходимо корректно визуализировать уже существующие состояния. 9. Качество и производительность — не ухудшить SEO и текущую индексацию; — сохранить корректные metadata и semantic HTML; — не создавать критических layout shifts; — оптимизировать изображения и шрифты; — учитывать reduced motion для анимаций; — проверить базовую доступность: focus states, contrast, keyboard navigation; — не подключать тяжёлые библиотеки без обоснованной необходимости. 10. Staging и QA — развернуть изменения на staging; — проверить основные типы страниц; — проверить desktop, tablet и mobile; — устранить визуальные и responsive-баги; — после приёмки выполнить production deployment; — обеспечить исправление багов по реализованному scope не менее 7 календарных дней после выкладки. РЕЗУЛЬТАТ РАБОТЫ — Pull Request с frontend-кодом; — реализованная новая главная; — responsive desktop/tablet/mobile; — единые шрифты, карточки и базовые UI-компоненты; — визуально согласованные каталог, PDP и информационные страницы; — staging deployment; — исправление найденных визуальных ошибок; — production deployment; — краткое описание изменённых компонентов; — 7-дневный bug-fix period после приёмки. ACCEPTANCE CRITERIA 1. Главная соответствует предоставленному дизайну. 2. Все секции корректно работают на desktop, tablet и mobile. 3. Header и footer единообразны на всех страницах. 4. Каталог и PDP визуально соответствуют новой системе. 5. Текущая функциональность сайта не нарушена. 6. API-контракты и backend-логика не изменены без согласования. 7. Нет горизонтального скролла и критических layout shifts. 8. Шрифты и изображения загружаются корректно. 9. Loading, empty и error states отображаются без поломки layout. 10. Изменения проверены на staging и развернуты в production. 11. Исправлены визуальные ошибки, обнаруженные при приёмке в рамках согласованного scope. ЧТО НЕ ТРЕБУЕТСЯ — разработка backend; — изменение бизнес-логики; — создание нового каталога или CMS; — разработка нового API; — полный редизайн каждой информационной страницы; — новые пользовательские функции, отсутствующие в макетах; — разработка сложной дизайн-системы с нуля; — создание нового проекта вместо доработки существующего; — изменение SEO-структуры без отдельного согласования. ТРЕБОВАНИЯ К ИСПОЛНИТЕЛЮ — уверенный Next.js / React / TypeScript; — опыт работы с существующими production-проектами; — качественная responsive-вёрстка; — опыт внедрения дизайна из Figma; — компонентный подход; — уверенная работа с CSS / CSS Modules / Tailwind или существующей системой проекта; — понимание Core Web Vitals; — Git / Pull Request workflow; — умение работать через staging. В ОТКЛИКЕ ОБЯЗАТЕЛЬНО УКАЗАТЬ 1. Fixed price за полный обязательный scope. 2. Срок выполнения в рабочих днях. 3. Оценку в часах. 4. Когда готовы начать. 5. Ссылки на 2–3 релевантных проекта на Next.js/React. 6. Есть ли опыт работы с каталогами, карточками товаров или аналитическими интерфейсами. 7. Что потребуется для точной оценки до начала работы. 8. Входят ли в цену: — staging; — responsive QA; — production deployment; — исправление багов; — 7-дневный bug-fix period. Шаблонные отклики без просмотра требований и без конкретной оценки рассматриваться не будут. Доступ к production на первом этапе не предоставляется. Работа начинается после ограниченного code review и разворачивается через staging.
ТЕХНИЧЕ ЗАДАНИЕ Обновление интернет-магазина bp.ua О проекте Действующий интернет-магазин парфюмерии на OpenCart 2.x. Нужно перенести на OpenCart 4.x, обновить дизайн и функционал, сохранить все данные, интеграции и SEO. Сайт двуязычный (украинский + русский). Ищем исполнителя (или команду) для backend и frontend. Можно откликаться на одну часть или на обе.Часть 1. Backend (OpenCart 4)Миграция Развертывание чистого OpenCart 4.x (последняя стабильная ветка), PHP 8.1+. Перенос данных: товары, категории, атрибуты, опции, бренды, клиенты, заказы, отзывы, контент-страницы. Сохранение SEO-URL (ЧПУ) один-в-один; карта 301-редиректов со старых адресов. Прямого апгрейда 2.x → 4.x нет: только чистое развертывание + контролируемый перенос.API-интеграция с поставщиком (приоритет) Портирование существующей кастомной доработки обмена с сервером поставщика (цены + остатки). Автоматическая синхронизация по расписанию (cron), лог ошибок, ручной запуск. Скрытие/статус для позиций, которых нет в наличии. Поддержка каталога 2 000+ позиций.Модули Новая Почта: выбор отделений/поштоматов, автоформирование ТТН из админки. Оплата: подключение платежной системы (LiqPay / Fondy / WayForPay — согласовать), наложенный платеж. Чекаут: серверная логика, гостевой заказ, статусы, уведомления клиенту. Массовый импорт/обновление товаров из прайса (xlsx/csv), привязка фото по артикулу/штрихкоду.Двуязычность (uk / ru) Два языка магазина: uk-UA (основной) и ru-RU. Двуязычные поля товаров, категорий, контент-страниц, мета-тегов. Отдельные SEO-URL для каждого языка, теги hreflang, канонические URL. 301-редиректы со старых URL обоих языков (проверить текущую схему: /ru/, поддомен или параметр). Письма покупателю — на языке сессии клиента.Блог Сохранить существующий раздел статей https://blog.bp.ua/. Перенести существующие статьи (uk/ru) с сохранением URL и 301-редиректами где нужно. Двуязычность, корректная SEO-разметка статей. Раздел блога должен оставаться редактируемым из админки.SEO (серверное) Замена стороннего SEO-модуля на нативный механизм OC4. Генерация sitemap.xml (отдельные языковые ветки), корректный robots.txt. Микроразметка Schema.org (Product, Offer, BreadcrumbList, Article для блога).Производительность и безопасность Кеш (OPcache + встроенный OC4), оптимизация запросов, gzip/brotli, HTTP/2. Изображения: WebP, resize с кешированием. HTTPS, 2FA в админке, актуальные патчи, ежедневные бэкапы. Core Web Vitals в «зеленой» зоне на мобильном.Порядок работ Все работы ведутся на staging. Старый сайт работает до полного тестирования нового. Переключение на прод — с возможностью отката 30 дней. Часть 2. Frontend (дизайн + верстка)Дизайн Стиль: минималистичный, премиальный, много «воздуха», акцент на фото товара. Мобильный-первый подход (большинство трафика — мобильный). Дизайн-система в Figma: палитра, типографика, компоненты, состояния. Макеты ключевых экранов (десктоп + мобильный): главная, каталог, карточка товара, бренд-страница, корзина, чекаут, поиск, блог и страница статьи.Верстка Семантический HTML5, чистый CSS, адаптив (mobile-first). Интеграция в twig-шаблоны OpenCart 4 (не статика), работа с живыми данными. Изображения: WebP, lazy-load, srcset. Шрифт с полной кириллицей (uk/ru). Кроссбраузерность: Chrome, Safari, Firefox, Edge + iOS/Android. Core Web Vitals: LCP < 2.5 c, CLS < 0.1, INP < 200 мс (мобильный).Функционал интерфейса Фасетные фильтры каталога: бренд, тип, объем, нота, пол, цена. Карточка товара: фото, описание, ноты, формат/объем, отзывы, «с этим покупают». Quick view, список желаний, сравнение, бейджи (новинка, хит, лимитированное количество). Адаптивный чекаут с минимумом шагов, автозаполнение Новой Почты. Раздел блога: список статей и страница статьи в стиле сайта.Двуязычность (uk / ru) Переключатель языков в шапке, корректный на мобильном. Верстка учитывает разную длину строк в двух языках. Весь текст темы — через языковые переменные OC4 (без «зашитого» текста). Приемка и сотрудничествоЧто передать на завершение Backend: доступы (сервер, БД, админка, репозиторий), краткая документация по доработкам и cron, инструкция по развертыванию/откату, список сторонних модулей. Frontend: Figma-файл с дизайн-системой и экранами, код темы (twig + CSS/JS), инструкция по изменению баннеров/контента.Критерии приемки (коротко)
https://www.figma.com/design/bSzGOmDb3scdsBgjR3hHLb/Robo?node-id=0-1&p=f https://robo.org.ua/index.php?route=product/product&path=145802278&product_id=237 Задача: редизайн страницы товара и отзывов на главной Сайт уже разработан и полностью работает. Дизайнер подготовил новый дизайн в Figma, который нужно реализовать на существующем сайте. Необходимо: верстать новый дизайн в соответствии с макетом; интегрировать его в текущий сайт; адаптировать страницы под мобильные устройства, планшеты и компьютеры; проверить корректную работу кнопок, форм, меню и других элементов; обеспечить максимально точное соответствие макету. Разрабатывать сайт с нуля не нужно — необходимо лишь выполнить редизайн и заменить текущее оформление на новое.
Вирус в настоящее время проник на сайт. Сайт не функционирует должным образом. В частности, главная страница работает некорректно. Нам нужен разработчик, который сможет исправить эту ошибку как можно скорее.
Есть воронка продаж для интернет магазина который мы хотим повторить у себя Выглядит она вот так Основной лендинг (товар который основной в продаже например рубашка ) Потом страница чек аут (где человек вводит свои данные и выбирает сколько например рубашек он хочет купить) Потом он идет дальше по воронке и ему предлагают допродажу 1 (носки) + потом допродажу 2 (трусы) и финал страница спасибо Как это должно работать в плане перехода по страницам и логике вы можете посмотреть здесь (нужно дойти до конца до страницы спасибо)https://3plus3.heroman.com.ua/standard/ У нас есть примеры страниц которые мы хотим сделать у себя То есть для нас по сути мы скопируем дизайн - верстаем - заполняем под наш товар Страницы с допродажами будут такие же по дизайну и структуре как в сайте что кинул выше (трусы) Вам заполнять не надо будет страницы инфой только собрать скелет - чтобы заявка правильно приходила Также придумывать структуру тоже не нужно страницы От вас по сути Скопировать и сверстать Настроить чтобы технически правильно работало Показать как с этим работать чтобы могли сами это делать Есть 2 конструктора сайтов на примете, с 1 плотно работаем сейчас и нужно понять можно ли на нем такое развернуть (но я читал в гпт можно)