Доработать две html страницы или создать новые с лучшим дизайном

Доработать две html страницы или создать новые с лучшим дизайном

Языки для использования:
Html, Javascript, CSS

Целевые устройства:
Телефоны, Планшеты, ПК
Страницы должны автоматически масштабироваться на всех экранах

Вводная часть:
Реализованы 2 html страницы-анкеты. Первая: index.html – для заполнения анкеты. Вторая: out – для отображения анкеты.

Задача:
Доработать страницы согласно ТЗ.

ТЗ:
Index.html
Index.html – реализовать возможность заполнения анкеты на странице, все поля можно редактировать, в некоторых полях, нужно предоставлять только выбор из пунктов. Проводить проверки заполнения полей на корректность (возраст от до и т.д.), если поле заполненно не корректно, выдавать аллерт с указанием как заполнять, при этом введенное пользователем значение не должно оставаться, если оно не верное. Все комментарии к полям должны оставаться в независимости заполнено поле или нет. Заменить некачественные иконки на качественные в одном стиле.
Требуется добавить поля в анкету index:
1. Рост – значение из диапазона 20 - 250.
2. Вес – значение из диапазона 20 – 250.
3. Телосложение: худощавое, спортивное, среднее, пара лишних кило. (на выбор один пункт)

Поля по умолчанию (Имя, Иконка, Пол, Профессия, Статус, Количество лет) должны проверяться, что заполнены. Если хоть одно поле не заполнено, то сообщать пользователю, что необходимо заполнить соответствующие поля (указать какие именно в alert и выделить их красным цветом на форме). По нажатию на любую кнопку должен вылетать аллерт, с указанием, что нажата такая-то кнопка.
По нажатию на кнопку: «ИЗМЕНИТЬ ИМЯ» должна быть возможность поменять Имя. По нажатию на кнопку «ИЗМЕНИТЬ ФОТО» должна быть возможность загрузить другой аватар пользователя.
Аватар по умолчанию в анкете /avatar/thumb_profile.jpg и является сжатой картинкой:

При нажатии на аватарку пользователя открывается полноразмерная картинка /avatar/profile.jpg на весь экран, касается обоих анкет.



Галерея Index.html - Галерея должна прокручиваться направо и налево. Фотографии, выбранные из галереи (нажатие на фотографию) должны увеличиваться на экране в полном размере и тоже прокручиваться влево-вправо в цикле. Картинки должны подтягиваться из папки, добавление соответственно копирует в папку картинку. Удаление должно происходить путем удаления фото в отображении страницы с выдачей Alert с путем к удаляемому фото, при этом галерея не должна портить свой вид, галерея должна состоять из не более чем 20 картинок по пути /images/XXX.jpg и /images/thumb_XXX.jpg, ХХХ могут быть любыми и должны передаваться параметрами через js функцию (Например: AddImageToGalery(String thumbPath)). Галерея показывает thumb_XXX и только после нажатия на картинку подгружает полноразмерною и выводит на экран.
В галерее нужно добавить возможности:
- добавления фото на страницу по кнопке «Загрузить фото»:
а) При нажатии на кнопку «Загрузить фото» должен выскакивать alert c сообщением «Добавление фото».
б) Извне функция AddImageToGallery будет вызвана с путем к файлу, который необходимо добавить на страницу.
в) После добавления должен выскакивать alert c названием пути к файлу фотографии где она лежала;
- удаления фото со страницы (крестик полупрозрачный сверху справа на фото, как в режиме просмотра больших фото, так и в обычном режиме). После удаления должен выскакивать alert c названием пути к файлу удаленной фотографии;
- фото разных размеров должны ужиматься в обычном режиме и нормально отображаться в галереи. Должна быть возможность загрузить фото в галерею и красиво отобразить. "Загрузить фото" – позволяет загрузить любую фотографию.
- ограничить максимальное количество фотографий 10 штук (20 со сжатыми). Если достигнут порог количества фотографий, сообщать об этом пользователю alert –ом при нажатии на кнопку «Загрузить фото».

По умолчанию место под галерею (если нет картинок) выглядит так:

Out.html
Out.html – стилистика второй анкеты должна совпадать с первой, но без возможности редактирования полей, кнопки меняют свои названия на другие (константы в html). Из галереи должна быть убрана возможность удалять и добавлять фото.
По нажатию на кнопку «Заблокировать» должно проверяться значение version=1 в файле config.txt. Если оно равно 1 то, выдавать alert сообщение пользователю, что анкета не поддерживает эту функцию Блокировки для пользователя (Имя). Если равно 0, то после нажатия на кнопку название должно поменяться на «Разблокировать» (она должна быть зажатой визуально, это должно быть видно пользователю) и выдать сообщение пользователю в alert, что пользователь такой-то заблокирован. При нажатии на кнопку «Разблокировать», кнопка должна меняться на «Заблокировать» и в alert должно выдаваться сообщение, что такой-то пользователь (Имя) разблокирован.

В готовой анкете (out.html) должны отображаться, только те поля, которые заполнены. Для тестирования данной перестройки анкеты out, создать скрипт (эмулятор заполнения анкеты), который будет посылать в анкету тег и содержимое для заполнения поля. При этом должен быть скрипт, который будет убирать соответствующие поля, если оно не заполнено. В качестве стартовой анкеты можно брать анкету index и на ее основе сформировать анкету out.


Галерея out.html -
При просмотре больших фото, на каждом фото в правом углу иконки: сохранить, переслать, комментировать, лайкнуть, счетчик лайков. При нажатии на кнопку должна вызываться своя функция js с alert c путем к файлу фотографии и названием нажатой кнопки. К тому же при нажатии на кнопку лайкнуть счетчик лайков увеличивается на 1. Лайкнуть одно и тоже фото больше 1 раза нельзя.



Во вложении пример не заполненной анкеты (index.html) и заполненной анкеты (out.html).




Скачать файл


Бюджет: 2000 руб.
Город: Москва
Вид предложения: Удаленная работа (разовый заказ)
Оплата: с банковской карты физлица
Категория: Разработка сайтов

Добавлено: 23.04.2020 в 23:20




Сделайте предложение по проекту:


Для того чтобы ответить на предложение, вам необходимо авторизоваться или зарегистрироваться на сайте


Комментарии:
Aleksandr Vorobyev    27.04.2020   18:55:09    от 1 до 10 часов    от 1 до 1 Руб  

Добрый день!
Буду рад выполнить Ваш проект.
Имею хороший опыт работы в веб- разработке.

Мои контакты для связи:
Viber: +7 983 620 93 56
WhatsApp: +7 983 620 93 56
Telegram: +7 983 620 93 56

1) https://formeducationforme.ru/Shop/
2) https://formeducationforme.ru/project/
Сергей Карпенко    18.05.2020   16:08:34   

Здравствуйте!
Если готовы, то можно работать за указанную стоимость.
Алексей Новиков    27.04.2020   12:38:00    от 1 до 1 часов    от 1 до 1 Руб  

Добрый день!
Готов взяться за ваш проект.
Имею десятилетний опыт работы в веб- разработке.Свою работу выполняю качественно и быстро. Всегда довожу проект до конца и соблюдаю сроки.

Напишите мне и мы все обсудим.
Мои контакты для связи:
Viber: +7 910 517-93-89
WhatsApp: +7 910 517-93-89
Telegram: +7 910 517-93-89
Skype:GuliverLand

Примеры моих последних работ:
https://rzdtour.com/
http://комфорт-окно.рф/
https://ailama.site/
http://нетсервис.рф/
http://kk.gcstart.ru/
https://insaitlip.ru/
https://ремонт-окон-в-калуге.мастероконплюс.рф/index...
https://starttele.com/
http://kanikuly33.ru/
https://retrotourism.ru/
http://proartsite.ru/
Дмитрий Долгий    26.04.2020   12:58:08     

Здравствуйте! Заинтересовала задача
обращайтесь

telegamm krulovd
email: krulovd@bk.ru
Nikodim Nikу    25.04.2020   10:32:09     

Подскажу кто реально сможет сделать - пишите на equilaybrium@mail.ru Со ссылкой на проект.
Кемран Кутумов    24.04.2020   02:46:12    от 2000 до 3000 Руб  

Здравствуйте, Сергей!

Хорошо ознакомился с вашим проектом. Готов быстро и качественно выполнить ваше задание.

Занимаюсь разработкой сайтов больше 3 года. Есть опыт работы в веб студии от 1 года.

Давайте обсудим Ваш проект прямо сейчас в мессенджере...
Телеграм: @CameronClass
VK: https://vk.com/cameron_class
Mail: kamrankutumov@gmail.com

Обращайтесь сделаю все на высоком уровне и за короткий срок, с учетом всех ваших пожеланий.
Буду рад сотрудничать с уважением Кемран!



+ HTML5, CSS3, JavaScript, PHP, MySQL, Ajax.
+ Laravel / Wordpress / Opencart
+ Bootstrap 4 / UIkit / Foundation
+ LESS/SCSS
+ GitHub
+ Кроссбраузерность (Chrome 54+, Firefox 50+, InternetExplorer 11+, Safari Mac OS 8+, Opera 41+, Yandex 14.12+, iOS, Android, WindowsPhone).
+ Responsive.
+ Блочная фиксированная / резиновая верстка.
+ Адаптивная верстка.
+ Написание простого, читабельного, контекстно независимого кода.
+ Аккуратный, логичный, продуманный код.
+ Соблюдение стандартов W3C.
+ SEO-верстка.
+ Адаптация / внедрение плагинов.
+ Использование спрайтов.
+ Подключение нестандартных шрифтов (@font-face, cufon, google web fonts).
+ Реализация pixel perfect.
+ Комментарии.