Header image (logo)

Height limitation is 24px. If an image size is larger, it is proportionally reduced (height and width). There are no limitations for an image width. If it is greater than a screen width, a horizontal scroll will be available. Thus, the width 260px and less is recommended (the width of IPhone 4 minus 60px for the language selection element).

Top image (banner)

The image width itself is not clearly limited, but as it is located inside the main 400px block containing control elements, it should be not more than 400 px too. . If the image width is more than 400px, it is proportionally reduced. The height is not clearly limited. The higher the image, the lower is the location of control elements.

Bottom image (banner)

The image width itself is not clearly limited, but as it is located inside the main 400px block containing control elements, it should be not more than 400 px too. If the image width is more than 400px, it is proportionally reduced. Height is not clearly limited. The higher the image, the higher the initial page.

Right and left images (banners)

The banners have the top margin consistent with the top banner's bottom (i.e. 47px + top_image_height px). Maximum width is 200px, height is not clearly limited. The higher the image, the higher the initial page. If the image width is more than 200px, it is proportionally reduced. Image blocks border on the main block containing control elements. If the image width is less than 200px, it will be placed in a centre of a 200px block, and a space will seem to appear between the image and the main block.

Background

A high-quality image is needed to be correctly displayed on big screens. An image should be centred in both X and Y directions and cover the whole background area (if an image is too small, it will be stretched that will result in a loss of background quality). It is not recommended to put significant elements on a background image, as when screen size is small (smartphones), it will be almost completely covered with control elements.

Information on other elements (buttons, labels, etc.)

The following elements can be configured:

• Icon (favicon) displayed in a browser
• Transparency and background colour of a header (a band on top of the screen containing a logo and elements for language selection)
• Page background. Can be filled with a colour or an image
• A text between a top banner and buttons for user identification scenario selection ("Welcome" or another text chosen by a designer can be displayed there)
• Background (colour, transparency) and font of the text from para.3 and of the phrase "By signing up you accept the terms of User Agreement"
• Text, fill colour and border colour of the fields for entering a phone number, a password and an accreditation number
• The labels "By account", "By phone number" on the corresponding buttons
• Labels located near the fields "Login", "Password" (for example, the word "Password" can be replaced with "Accreditation number")
• Colour and text of the buttons for scenario selection: identification by phone number or logging in using an accreditation number
• Colour and content of labels located near the input fields (pnone number, last name, password, accreditation number)
• Each banner can be enabled or disabled (not be displayed)

Additional pages

In addition to the login page, other pages can be configured on the portal:

• Enter SMS code (optionally)
• Success (text: "Success, you are connected to the Internet")
• Welcome (the text is: "Is 12345 your number?") — an optional page. If a session storage period is long, a user will not see this page
• Session end (text on exceeding a traffic or time limit) — an optional page. If unlimited tariffs are used, a user will not see this page
• User agreement (a user will be redirected to this page after clicking a corresponding link)
• Access denied (an attempt to address resources prohibited by a current service or a session processing scenario)
• Session expired (a user will see this page if opens a portal and does not input any data for more than five minutes)

Language settings

When a multi-language configuration is used, text labels and banners can be created separately for each language.
The languages supported by the platform:

• Russian
• English
• Chinese
• Kazakh

A layout of banners on a portal

Banners in the mobile layout:

Banners in the tablet layout:

Banners in the desktop (laptop) layout:

Banners in the desktop (laptop) layout when a user identification scenario is selected: