Про верстку, логіці, диваків і порталах МТС

Ремарка — даний текст є лише моє особисте оцінне судження і не претендує на абсолютну істину.

Передісторія. Осіння ніч, відсутність роботи, інтернет. Скінчився. Як зазвичай це буває, закінчився трафік на мтс-ном тариф.

«Гаразд», — подумав я, спробую оплатити з мобільного.

На дворі 2016 рік, це має бути просто і зручно. Компанія МТС так не думала.

Спроба зайти на рендомний сайт благополучно перенаправила на pay.mts.ru. Ну, спасибі, маршрутизація спрацювала.

  1. Перший дзвіночок, як завжди, пролунав при авторизації. Пароль авторизації виду
    dShJS4
    Товариші, навіть сбер надсилає цифрові паролі на підтвердження платежу.
    Ні, ну серйозно, ви пробували вбити на клавіатурі смартфона цифро-буквений пароль букв різного регістру? Нереально зручно

  2. Форма поповнення(зроблена iframe-му) за адресою pay.mts.ru/webportal/payments/3565/Tula з iframe за адресою mts.platbox.com/mts?product_id=0000002&mobile=0 при закінчився трафік не працює. Швидше за все, мережевий фільтр при закінченні трафіку допускає домени *.mts.ru та не допускає * platbox.com. Ідеально.

    Нотаріально засвідчений (ні, звичайно ж ні) скріншот

  3. Поматерившись, включаю хот-спот і заходжу з ноутбука. Хм, напис «Особистий кабінет»… може бути, це та сама двері, через яку Аліса потрапить у країну чудес?

    Аліса потрапила на другу авторизацію. Можливо, я щось пропустив в історії, або у своєму розвитку, але якщо вже робите крос-доменну авторизацію, то робіть її скрізь однаково.
    Домен pay.mts.ru перев'язаний куками з собою і mts.ru там навіть є якийсь auth-back-url і sessionid-services… але щось не працює.

    Куки
    Для тих, кого зацікавила друга підкреслена напис. Цей сайт дуже любить iframe. Настільки любить iframe, що віджет користувача з балансом підтягується саме їм. І так, там 8 дівов, гірка скриптів і куки від login.mts.ru заради того, щоб вивести піб, баланс та два посилання.

    Риємося в смс-ках, щоб знайти пароль.

  4. Оп. Смс про засобах і послугах приходять з коректного символьного імені МТС, а паролі з якогось номера 3339. Це здорово спрощує пошуки.

    до РечіВідповідь на запит балансу прийшов з символьного імені Balance. До чого б це… а так, у мене двухсимочный телефон, і гадати по якій з сімок прийшло смс дуже цікаво. Спасибі. Потрібно зайти в канал і подивитися іконки.

  5. Всі ми люди, всі ми костылим помиляємося. Добре, посилання «поповнити на 1000 рублів» кидається в очі відразу.

    Посиланняimage

    Рефлекторно натискаю на неї коліщатком (вона ж повинна скерувати мене на форму оплати, чи не так ?). Не так. Не зрозумів. Дивимося на неї під інспектором… ага. button. Ок, може все відкриється тут? Отримуємо перенаправлення, сторінка перезавантажується. Цікаво, а що заважало просто обернути цей button посилання, раз вже він перезавантажує сторінку? Здоровий глузд

  6. Після всіх мук оплата вдалася. Як законослухняна людина і громадянин, я все-таки вирішив відправити feedback про користування цього творіння божевільного художника. Форма для feedback-а знайшлася відразу. Textarea 256 пікселів шириною з можливістю розтягнути її по вертикалі, а не по горизонталі. Чимось схоже на кроплення книги скарг продукцією залоз скунса, щоб багато не написали.

    Форма ОСimage

    Ви питаєте в мене ПІБ та email? О Боже, я залягання на вашому сайті, ви знаєте мій номер телефону, у вас були мої дані при реєстрації сімки, і ви просите у мене персональні дані на формі ОС? Навіть небо, навіть Аллах не знав такої ганьби! Всередині кнопки відправити захований span з текстом. Просто span з текстом. Прибрав span, залишив текст. Нічого не змінилося.

  7. Чекбокси. Чекбокси це окрема пісня.

    <label>
    <div class="jq-checkbox checkbox" unselectable="on" style="-webkit-user-select: none; display: inline-block; position: relative; overflow: hidden;">
    <input class="checkbox" type="checkbox" style="position: absolute; z-index: -1; opacity: 0; margin: 0px; padding:0px;">
    <div class="jq-checkbox__div">
    </div>
    </div>
    Дзвінок на контактний номер
    </label>
    

    Ви думаєте, чекбокс це input? Немає. Чекбокс тут тільки в якості елемента доступності» для слабо зрячих з голосовими браузерами. Насправді, чекбокс це блок з класом jq-checkbox в якості рамки, і готельний блок jq-checkbox__div в якості красивою червоною галки. А на input, якщо придивитися, чи висить чудова зв'язка z-index: -1; opacity: 0.

    Верстальщику, що зробив це, рекомендую брати участь в акціях (будь-який, але краще на червоній площі) одного пітерського художника. Хоча б галочку через :after зробили б, якщо хочеться такий трюк зі схованим чекбоксів. Але взагалі подібне краще робити через код виду:

    <label class="checkbox">
    <input autocomplete="off" id="cb_region_95" type="checkbox" value="true">
    <label for="cb_region_95"></label>
    </label>
    

    Або не выеживаться залишити трохи стилізовані стандартні чекбокси.
2016 рік, один з трьох основних операторів країни, сайт виглядає… ну як-то ось так:

Одна з форм оплатиimage

Не реактивний, не зручний ні сліпий, ні зрячим, однаково жахливо виглядає і на мобільниках, і на широких екранах.

А форма зворотного зв'язку, до речі, надіслала в бек-офісі запит на інший сайт і впала з 500й. Може бути, неекранована верстка в пост-параметрі не сподобалася.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.