Дерево страниц

Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.


Макрос генерирует 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>