<meta charset="utf-8">
<div class="header">
<h1><font face="roboto - medium">Описание интерфейса программы</font></h1>
<h2>Описание интерфейса клиентского приложения White Label</h3>
</div>
<div class="menu-container">
<ul class="accordion">
<li class="accordion_item">
<img class="main-picture" src="/download/attachments/26968566/White_Label_icon.png?version=1&modificationDate=1516894347159&api=v2">
<input name="interface-menu" type="radio" class="accordion_toggle" id="toggle-01" hidden>
<label class="accordion_trigger" for="toggle-01">Заказать</label>
<i></i>
<div class="accordion_target">
<img class="picture-01" src="/download/attachments/26968173/%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7.png">
<div class="description_text">
</br>
<ul>
<li><strong>Тип маршрута (1)</strong> - выбор маршрута <strong>"По адресу"</strong> (в маршруте есть конечная точка) или <strong>"По городу"</strong> (в маршруте есть только точка подачи).</li>
<li><strong>Формирование маршрута (2)</strong> - задание адресов начала, конца маршрута и промежуточных точек. Для удобства выбора адреса, можно использовать избранные адреса.</li>
<li><strong>Дополнительно (3)</strong> - дополнительные условия поездки, в том числе изменение <u>времени подачи</u> и контактного <u>телефона</u> пассажира.</li>
<li><strong>Изменение стоимости заказа (4)</strong> - для округления суммы и/или ускорения поиска машины.</li>
<li><strong>Тип машины (5)</strong> - выбор класса машины.</li>
<li><strong>Заказ и сброс (6)</strong> - кнопка отправки заказа и сброс введенных данных. <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=26968173"><span>Подробнее о создании заказа...</span></a></li>
</ul>
</br>
</div>
</div>
</li>
<li class="accordion_item">
<input name="interface-menu" type="radio" class="accordion_toggle" id="toggle-02" hidden>
<label class="accordion_trigger" for="toggle-02">Мои заказы</label>
<i></i>
<div class="accordion_target">
<img class="picture-02" src="/download/attachments/26968566/Мои_заказы_350.png?version=1&modificationDate=1516888646250&api=v2">
<div class="description_text">
</br>
<ul>
<li><strong>Выполняются</strong> - список выполняющихся заказов клиента.</li>
<li><strong>История</strong> - список отправленных клиентом заказов.</li>
<p>Полную информацию и маршрут по заказу можно посмотреть, нажав на текст заказа.</p>
</ul>
</br>
</div>
</div>
</li>
<li class="accordion_item">
<input name="interface-menu" type="radio" class="accordion_toggle" id="toggle-03" hidden>
<label class="accordion_trigger" for="toggle-03">Профиль</label>
<i></i>
<div class="accordion_target">
<img class="picture-03" src="/download/attachments/26968177/%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8C.png">
<div class="description_text">
</br>
<ul>
<li><strong>Имя</strong> - имя клиента.</li>
<li><strong>Номер</strong> - контактный телефон клиента.</li>
<li><strong>Город</strong> - город, в котором клиент делает заказы. Если Ваша служба работает по нескольким городам, клиент может выбрать другой город из предоставленного списка.</li>
<li><strong>Бонусы</strong> - бонусный счет клиента. Бонусы отображаются только если у Вашей службы настроена работа с бонусами.</li>
<p>Кнопка <strong>"Выход"</strong> - выход из аккаунта клиента. При следующем входе необходимо будет авторизоваться.</p>
</ul>
</br>
</div>
</div>
</li>
<li class="accordion_item">
<input name="interface-menu" type="radio" class="accordion_toggle" id="toggle-04" hidden>
<label class="accordion_trigger" for="toggle-04">Инфо</label>
<i></i>
<div class="accordion_target">
<img class="picture-04" src="/download/attachments/26968177/%D0%B8%D0%BD%D1%84%D0%BE.png">
<div class="description_text">
</br>
<ul>
<li><strong>Версия</strong> - текущая версия приложения.</li>
<li><strong>Связаться с нами</strong> - возможность обратиться в Вашу диспетчерскую и/или техподдержку в телефонном режиме или написать письмо в Вашу диспетчерскую.</li>
</ul>
</br>
</div>
</div>
</li>
</ul>
</div>
<style>
.main-picture {
position: absolute;
top: 20px;
left: -300px;
}
.menu-container * {
list-style: none;
margin: 0;
padding: 0;
}
.menu-container {
min-height: 650px;
}
.accordion {
padding: 0 0 0 400px;
}
.accordion_item {
border-bottom: 1px solid #DFE1E6;
position: relative;
}
.accordion_trigger:hover {
background-color: #F4F5F7;
}
.accordion_item:last-of-type {
border-bottom: none;
}
.accordion_trigger {
display: block;
font-weight: normal;
cursor: pointer;
padding: 1.2em;
color: #253858;
font-weight: bold;
}
.accordion_toggle {
position: absolute;
display: none;
}
.accordion_target {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.accordion_target img {
position: absolute;
left: -380px;
border: 3px solid #195177;
border-radius: 8px;
}
.picture-01,
.picture-02,
.picture-03,
.picture-04 {
width:300px;
}
.picture-01 {
top: 0px;
}
.picture-02 {
top: -54px;
}
.picture-03 {
top: -108px;
}
.picture-04 {
top: -162px;
}
.accordion_target p {
margin-bottom: 1em;
}
.description_text li {
list-style: disc inside;
}
.accordion_toggle:checked~.accordion_target {
position: static;
overflow: visible;
clip: auto;
padding: 0.2em 1.2em 0.2em 1.2em;
width: auto;
height: auto;
}
.accordion_item i {
width: 0.7em;
height: 0.7em;
display: block;
position: absolute;
right: 0;
top: 0;
margin: 1.4em;
border-color: #253858;
border-style: solid;
border-top-width: 0.3em;
border-right-width: 0.3em;
border-left-width: 0;
border-bottom-width: 0;
transform: rotate(45deg);
}
.accordion_toggle:checked~i {
border-top-width: 0;
border-right-width: 0.3em;
border-left-width: 0;
border-bottom-width: 0.3em;
}
</style>
<style>
.header {
background-image: url("/download/attachments/6817598/bg_3.png");
text-align: center;
padding: 20px;
}
.header h1,
.header span {
color: #583C00;
}
.header h2,
.header span {
color: #444444;
}
.header h1,
.header h2 {
margin: 20px;
}
.header h1 {
font-size: 48px;
}
.header h2 {
font-size: 18px;
}
.header a:link,
.menu a:link {
text-decoration: none;
}
.header a:visited,
.menu a:visited {
text-decoration: none;
}
.header span {
margin: 10px 15px 10px 15px;
font-weight: 600;
}
.header span:hover {
background-color: #4DA0EA;
border-radius: 0.5em;
margin: 0px;
padding: 10px 15px 10px 15px;
}
#title-heading {
display: none;
}
.page-metadata {
visibility: hidden;
}
</style>
|