| Макрос генерирует HTML разметку |
|---|
<div class="header">
<h1>MobileTaxi</h1>
<h2>Описание интерфейса программы</h3>
</div>
<style>
.header {
background-image: url("/download/attachments/6817598/bg_2.png");
text-align: center;
padding: 20px;
}
.header h1,
.header h2,
.header span {
color: black;
}
.header h1,
.header h2 {
margin: 20px;
}
.header h1 {
font-size: 48px;
line-height: 1.5;
}
.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: #FFC618 ;
border-radius: 0.5em;
margin: 0px;
padding: 10px 15px 10px 15px;
}
</style>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="leftcol"><img src="/download/attachments/14352482/375px-%D0%93%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B5_%D0%BC%D0%B5%D0%BD%D1%8E.png" alt="Боковое меню"></td>
<td valign="top">
</div>
<style type="text/css">
TD.leftcol {
width: 110px; /* Ширина левой колонки с рисунком */
vertical-align: top; /* Выравнивание по верхнему краю */
}
</style>
<div class="menu-container">
<ul class="accordion">
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-01" hidden>
<label class="accordion_trigger" for="toggle-01">Строка состояния</label>
<i></i>
<div class="accordion_target">
<a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Строка состояния</span></a>
<table border="2">
<tr>
<td> 3 / 3 </td> <td>Строка состояния предоставляет</td>
</tr>
<tr>
<td><p> <img src="/download/attachments/14352482/ic_new_message.png"></td>
<td><p>Непрочитанные сообщения</p></td>
</tr>
</table>
<p> <img src="/download/attachments/14352482/ic_new_message.png">
Непрочитанные сообщения</p>
<p> <img src="/download/attachments/14352482/ic_filter_green.png">Индикатор появляется, если включен фильтр или расширенный фильтр </p>
<p><img src="/download/attachments/14352482/ic_auto_take_green.png">Индикатор появляется, если работает автовзятие</p>
<p><img src="/download/attachments/14352482/gps_connected.png">Индикатор работы GPS</p>
<p><img src="/download/attachments/14352482/ic_stat_conn_on.png">Отображение статуса водителя.</p>
</div>
</li>
</div>
<div class="menu-container">
<ul class="accordion">
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-02" hidden>
<label class="accordion_trigger" for="toggle-02">Элементы главного меню</label>
<i></i>
<div class="accordion_target">
<a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Элементы главного меню</span></a>
<p> Меню (область "3" на рисунке):
<p>Встать в сектор —
водитель выбирает: встать в выбранный сектор, сняться с сектора,
посмотреть, сколько водителей уже есть в выбранном секторе, посмотреть
полную информацию по секторам или уступить место в очереди сектора. Если водитель находится в секторе, название сектора и очередь в нем отображаются в главном меню.</p>
<p>Фильтр — применение фильтра для заказов по сектору или по тарифу.</p>
</p>
<p>Расширенный фильтр —
в эфир будут поступать заказы, которые будут соответствовать условиям
расширенного фильтра, а именно заданным условиям фильтрации по следующим
блокам (сектор подачи, сектор назначения, тариф, тип заказа, тип
расчета, шаблон адреса).</p>
<p>Баланс — возможность проверить баланс счета водителя машины.</p>
<p>Рейтинг — рейтинг водителя при заказах из перекидки.</p>
<p>Статус — позволяет поменять статус занят/свободен.</p>
</p>
</div>
</li>
<div class="menu-container">
<ul class="accordion">
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-03" hidden>
<label class="accordion_trigger" for="toggle-03">Описание закладок</label>
<i></i>
<div class="accordion_target">
<a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Описание закладок</span></a>
<p>Закладки (область "2" на рисунке):
Главная — отображает главное меню МТ.
Эфир — закладка, в которой содержится информация о "горячих" заказах .Предв. - вкладка, в которой содержится информация о "предварительных" заказах. Эту вкладку можно отключить. Для этого нужно из меню перейти "Настройки"
→ "Эфир" и снять галочку с "Вместе эфир и предварительные". Тогда
"предварительные" заказы будут отображаться во вкладке "Эфир".
Заказ — закладка, в которой содержится информация о текущих и выполненных заказах, а также входящие сообщения для водителя. Перелистывание заказов осуществляется стрелочками < и > на
панели, которая находится под вкладками. Если нажать на панель между
стрелочками, открывается папка "Мои заказы", где заказы представлены
списком.
Переходить между вкладками можно как нажимая
на их названия, так и с помощью движения пальцем по экрану в
горизонтальном направлении.
</p>
</div>
</li>
</div>
<div class="menu-container">
<ul class="accordion">
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-04" hidden>
<label class="accordion_trigger" for="toggle-04">Отображение заказов в эфире</label>
<i></i>
<div class="accordion_target">
<a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Мои заказы</span></a>
<p> Отображение заказов во вкладке Эфир зависит от класса машины, на которой работает водитель, и от настроек фильтров в приложении.
Отображение заказа в зависимости от дополнительных требований:
БН - заказ с безнальным расчетом;
П - предварительный заказ;
(УНИВЕР) - нужна машина класса "универсал";
(ЭЛИТ), (ПРЕМИУМ) - нужна машина класса "элит" или "премиум" соответственно;
(ЭКОНОМ), (МИКРОАВТ) - нужна машина класса "эконом" или "микроавтобус" соответственно.
Пользовательские классы машин, а также другие дополнительные требования особой подсветки не имеют, отображены большими буквами.
Другие метки в заказах:
R - заказ, влияющий на рейтинг;
** (или любая любая другая символьная метка) - заказ из обмена.
</p>
</div>
</li>
|
...
<tr>
<td class="leftcol"><img src="/download/attachments/14352482/375px-%D0%91%D0%BE%D0%BA%D0%BE%D0%B2%D0%BE%D0%B5_%D0%BC%D0%B5%D0%BD%D1%8E.png" alt="Боковое меню"></td>
<td valign="top">
|
...
<div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
05" hidden> <label class="accordion_trigger" for="toggle- |
...
05">Главная</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Главная</span></a> <p>Главная - вызывает главное меню приложения Спрятать вкладки - позволяет спрятать вкладки приложения ("Главная", "Эфир", "Заказ"). В начало списка - для вкладки "Эфир" - позволяет отображать начало списка заказов в эфире.</p> </div> </li> </div> <div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
06" hidden> <label class="accordion_trigger" for="toggle- |
...
06">Мои заказы</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Мои заказы</span></a> |
...
<p> Мои заказы - информация о текущих и выполненных заказах. Сообщения - входящие сообщения для водителя. </p> </div> </li> </div> <div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
07" hidden> <label class="accordion_trigger" for="toggle- |
...
07">Сообщения</label> <i></i> <div class="accordion_target"> |
...
<a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Сообщенияы</span></a> <p> Сообщения - входящие сообщения для водителя. </p> </div> </li> </div> <div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
08" hidden> <label class="accordion_trigger" for="toggle- |
...
08">GPS Карта</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>GPS Карта</span></a> <p> GPS Карта - позволяет определить местонахождение водителя, контролировать автотранспорт и маршруты движения в режиме реального времени, а также получать информацию о пробках. </p> </div> </li> </div> <div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
09" hidden> <label class="accordion_trigger" for="toggle- |
...
09">Таксометр</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Таксометр </span></a> <p> Таксометр - применяется для расчета стоимости поездки на основании данных о тарифе, о пройденном расстоянии и о затраченном на поездку времени. </p> </div> </li> </div> <div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
10" hidden> <label class="accordion_trigger" for="toggle- |
...
10">Доп. функции</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Доп. функции</span></a> <p> Доп. функции - включает в себя информацию по связи с диспетчерской, о программе, статистике по GPS и информация о последнем заказе. </p> </div> </li> |
...
</div>
<div class="menu-container">
<ul class="accordion">
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle- |
...
11" hidden> <label class="accordion_trigger" for="toggle- |
...
11">Байкал</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Байкал</span></a> <p> Байкал - экстренный вызов диспетчера в случае непредвиденной ситуации </p> </div> </li> </div> <div class="menu-container"> <ul class="accordion"> <li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle- |
...
12" hidden> <label class="accordion_trigger" for="toggle- |
...
12">Настройки</label> <i></i> <div class="accordion_target"> <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=6816466"><span>Настройки</span></a> <p> Байкал - экстренный вызов диспетчера в случае непредвиденной ситуации </p> |
...
</div> </li> </td> </tr> <style> .menu-container * { list-style: none; margin: 0; padding: 0; } .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 p { margin-bottom: 1em; } .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> |