About layout, logic, eccentrics and MTS portals

Remark - this text is only my personal value judgment and does not pretend to be absolute truth.

Prehistory Autumn night, lack of work, Internet. Is over. As it usually happens, the traffic at the mobile tariff ended.

“Ok,” I thought, I'll try to pay with my mobile.
')
It's 2016, it should be easy and convenient. MTS did not think so.

An attempt to enter a random site successfully redirected to pay.mts.ru. Well, thanks, the routing worked.

1. The first bell, as usual, sounded during authorization. View authorization password

   dShJS4

   Comrades, even Sber sends digital passwords to confirm payment.
   No, well, seriously, have you tried to type a alphanumeric password with different case letters on the keyboard of your smartphone? Unrealistically convenient
   
   
2. The replenishment form (made by iframe) at pay.mts.ru/webportal/payments/3565/Tula with iframe at mts.platbox.com/mts?product_id=0000002&mobile=0 does not work when traffic ends. Most likely, the network filter at the end of traffic allows * .mts.ru domains and does not allow * platbox.com. Perfect.
   
   
   Notarized (no, of course not) screenshot

   
   
   
   
3. Pating, turn on the hot spot and go from the laptop. Hmm, the inscription "My Account" ... maybe this is the very door through which Alice will get into wonderland?
   
   Alice got on the second authorization. Maybe I missed something in history or in my development, but if you do cross-domain authorization, do it everywhere and in the same way.
   The pay.mts.ru domain is tied with cookies and mts.ru, there is even some auth-back-url and sessionid-services ... but something is not working .
   
   
   Cookies

   
   For those who are interested in the second underlined inscription. This site is very fond of iframe. He loves the iframe so much that the user’s widget with a balance is pulled by him. And yes, there are 8 divs, a pile of scripts and cookies from login.mts.ru in order to display full name, balance and two links.
   
   
   We rummage in SMS to find the password.
   
   
4. Op. SMS about the facilities and services come from the correct symbolic name of the MTS, and passwords from a certain number 3339. This greatly simplifies the search.
   
   
   By the way

   The answer to the balance request came from the symbolic name Balance. What would it be ... and yes, I have a two-digit phone, and it is very interesting to guess which of the sims the SMS came in. Thank. You need to go to the channel and see the icons.
   
   
   
5. We are all human, we are all crutches wrong. Well, the link "refill for 1000 rubles" catches the eye immediately.
   
   
   Link

   
   
   
   Reflexively I press it with a wheel (it should redirect me to the form of payment, shouldn’t it?) . Not this way. Not understood. We look at her under the inspector ... yeah. button. Ok, can everything open here? We receive the redirection, the page reloads. Interestingly, and what prevented simply wrap this button in the link, since it reloads the page? Common sense
   
   
6. After all the torment payment was a success. As a law-abiding person and citizen, I still decided to send feedback on the use of this creation by a mad artist. The form for feedback was found immediately. Textarea 256 pixels wide with the ability to stretch it vertically, but not horizontally. Something like splashing the plaintive book with the production of skunk glands so that they don’t write much.
   
   
   OS form

   
   
   
   Are you asking me for a full name and email? Oh God, I am logged in on your site, do you know my phone number, did you have my data when registering a sim card, and you ask me for personal data on the OS form? Even the sky, even Allah did not know such a shame! Inside the send button is a hidden span with text. Just span with text. Removed the span, left the text. Nothing changed.
   
   
7. Checkboxes. Checkboxes are a separate song.
   
   

   <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> 

   
   Do you think checkbox is input? Not. The checkbox is here only as an “accessibility element” for the weak sighted with voice browsers. In fact, the checkbox is a block with the jq-checkbox class as a frame, and a hotel block with jq-checkbox__div as a beautiful red jackdaw. And on input, if you look closely, there is a great bunch of z-index hanging : -1; opacity: 0.
   
   The layout designer who did this, I recommend to participate in promotions (any, but better on the red square) of a St. Petersburg artist. At least a tick through: after would do if you want such a trick with a hidden checkbox. But in general this is best done through the code of the form:
   
   

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

   
   Or not to leave, leaving a little stylized standard checkboxes.

2016, one of the three main operators in the country, the site looks like ... well, something like this:


Not reactive, not comfortable, neither blind nor sighted, looks equally terrible on mobile phones, and on wide screens.

And the feedback form, by the way, sent a request to the other site in the back-up and dropped from the 500th. Maybe the unshielded layout in the post-parameter did not like.