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

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

Ключ

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


Макрос генерирует HTML разметку
<meta charset="utf-8">
<div class="header">
 <h1><font  face="roboto - medium">Описание интерфейса 

...

программы</font></h1>
 <h2>Описание интерфейса клиентского приложения 

...

White Label</h3>
</div>
<table class="interface-content">
 

...

   <tr>
 

...

       <td 

...

style="width: 375px;">
            

...

<img src="/download/attachments/

...

14352482/

...

%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F%20%D0%BC%D1%82%20%D0%B4%D0%BB%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%B0.png"

...

 width="330" height="730">

        

...

</td>
        <td>
     

...

 

...

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


          

...

 

...

 

...

 

...

             

...

 

...

 <p>Строка состояния предоставляет информацию в виде значков (индикаторов) 

...

о включенных или выключенных функций </p>

    

...

 

...

 

...

             

...

 

...

        <table>

...

                  

...

 

...

         

...

 

...

 

...

  <tr>
          

...

 

...

         

...

                

...

<td><img src="/download/attachments/14352482/%D0%BE%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C%20%D0%B2%20%D1%81%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%B5.png"
              

...

 

...

 

...

 

...

 

...

 

...

 

...

  

...

                  

...

 

...

 

...

  </td>
          

...

 

...

 

...

             

...

 

...

             

...

 

...

<td>Сведения о секторах</td>
          

...

 

...

 

...

 

...

 

...

         

...

         </

...

tr>
  

...

 

...

 

...

 

...

                           <tr>
     

...

 

...

 

...

 

...

 

...

        

...

 

...

         

...

  

...

       <td> <img src="

...

/download/attachments/14352482/ic_new_message.png"></td>
   

...

 

...

     

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

     

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

    

...

   

...

<td>Непрочитанные сообщения</

...

td>
    

...

 

...

     

...

 

...

         

...

 

...

           </tr>

...

 

...

 

...

 

...

 

...

             

...

 

...

 

...

 

...

            <tr>

...

             

...

 

...

   

...

 

...

 

...

  

...

 

...

 

...

 

...

  

...

 

...

 

...

 

...

   

...

 

...

 

...

  

...

<td> <img src="/download/attachments/14352482/ic_

...

filter_

...

green.png"></td>

...

 

...

 

...

   

...

  

...

 

...

 

...

 

...

 

...

  

...

 

...

 

...

                     <td>Индикатор появляется, если включен фильтр или расширенный 

...

фильтр</td>
                                </tr>

 

...

                               <tr>
                                    <td> <img src="/download/attachments/14352482/ic_auto_take_green.png"

...

></td>
                                    <td>Индикатор появляется, если работает автовзятие</

...

td>
  

...

                              </tr>

                                <tr>
                                    <td> <img src="/download/attachments/14352482/gps_connected.png"

...

></td>
                                    <td>Индикатор работы GPS</

...

td>
   

...

                             </tr>

                                <tr>
                                    <td> <img src="/download/attachments/14352482/ic_stat_conn_on.png"

...

></td>
                                    <td>Отображение статуса водителя.</

...

td>
                                </

...

tr>

                            </

...

table>
                    </

...

li>

...

 

...

     

...

 

...

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

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

                
                                <p><strong>Встать в сектор</strong>

...

водитель выбирает: встать в выбранный сектор, сняться с сектора, 

...

посмотреть,
                                    сколько водителей уже есть в выбранном секторе, посмотреть 

...

полную информацию по секторам
                                    или уступить место в очереди сектора. <em> Если водитель находится в секторе, название сектора
                                    и очередь в нем отображаются в главном меню.</em></p>

...

                                <p><strong>Фильтр</strong> — применение фильтра для заказов по сектору или по тарифу.</p>

...

 

...

 

...

                         
                            <p><strong>Расширенный фильтр</strong> — в эфир будут поступать заказы, которые будут соответствовать условиям 

...

расширенного фильтра, а именно заданным условиям фильтрации по следующим 

...

блокам (сектор подачи, сектор назначения, тариф, тип заказа, тип 

...

расчета, шаблон адреса).</p>

...

                            <p><strong>Баланс</strong> — возможность проверить баланс счета водителя машины.</p>

...

                            <p><strong>Рейтинг</strong> — рейтинг водителя при заказах из перекидки и в рамках своей ИДС.</p>

...

                            <p><strong>Статус</strong> — позволяет поменять статус занят/свободен.</p>
  

...

      

...

                   
                    </li>

 

...

 

...

     

...

 

...

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

...


<p><strong>Главная</strong> — отображает главное меню МТ. 

...

 </p>
<p><strong>Эфир</strong> — закладка, в которой содержится информация о "горячих" заказах. 

...

</p>
<p><strong>Предв.</strong> — вкладка, в которой содержится информация о "предварительных" заказах. Эту вкладку можно отключить. 

...

 

...

</p>
<p><strong>Заказ</strong> — закладка, в которой содержится информация о 

...

заказах, 

...

сообщения для водителя. Перелистывание заказов осуществляется стрелочками 

...

<strong><</strong> и 

...

<strong>></strong> на 

...

панели, которая находится под вкладками. Если нажать на панель между 

...

стрелочками, открывается папка <strong>"Мои заказы"</strong>, где заказы представлены 

...

списком. 

...

Переходить между вкладками можно как нажимая 

...

на их названия, так и с помощью движения пальцем по экрану в 

...

горизонтальном направлении. 

...

</p>

                        </div>
                    </li>

...


...

 

...

     

...

 

...

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

 

...

 

...

 

...

                         <p> Отображение заказов во вкладке 

...

<strong>Эфир</strong> зависит от класса машины, на которой работает водитель, и
                                от настроек фильтров в приложении. 

...

<strong>Отображение заказа в зависимости от дополнительных 

...

требований</strong>:

...


<img src="/download/attachments/14352482/%D1%8D%D1%84%D0%B8%D1%80.png" width="330" height="730">
                                
<p> <font color="#ff0000"> <strong>БН</strong> </font>- заказ с безнальным расчетом;</p>

...


<p><font color="#ff0000"> <strong>П </strong></font> - предварительный заказ; </p>
<p><font color="#ffd700"><strong>(УНИВЕР)</strong></font>, <font color="#ffd700"><strong>(МИКРОАВТ)</strong></font> - нужна машина класса "универсал" или "микроавтобус" соответственно; </p>
<p><font color="#da70d6"><strong>(ЭЛИТ)</strong></font>, <font color="#da70d6"><strong>(ПРЕМИУМ)</strong></font> - нужна машина класса "элит" или "премиум" соответственно;</p>
<p>(ЭКОНОМ)

...

 

...

- нужна машина класса "эконом"

...

.</p>
<p>Пользовательские классы машин, а также другие дополнительные требования особой подсветки не имеют, отображены большими буквами. 

...

</p>
<p><strong>Другие метки в 

...

заказах</strong>: 

...

</p>
<p><font color="#008000"> <strong>R</strong> </font> - заказ, влияющий на рейтинг;</p>
<p> <font color="#00ffff"> <strong>**</strong> </font> (или любая любая другая символьная метка) - заказ из обмена.

...

</p>


   

...

         

...

      

...

    

...

   

...

   </p>

...

 

...

 

...

         

...

 

...

         

...

 

...

  </div>
      

...

 

...

     

...

      

...

 

...

 </li>
       

...

 

...

 

...

 

...

      </ul>
  

...

 

...

     

...

      

...

 

...

 </div>
       

...

 

...

     

...

   </td>
  

...

 

...

 </tr>
    <tr>
  

...

 

...

     

...

<td>
<img src="/download/attachments/14352482/%D0%B1%D0%BE%D0%BA%D0%BE%D0%B2%D0%BE%D0%B5%20%D0%BC%D0%B5%D0%BD%D1%8E.png" width="330" height="730">

...

 

...

       </td>
 

...

 

...

      <td>
  

...

 

...

         

...

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

...


...


        

...

 

...

     

...

      

...

 

...

       
 

...

 

...

         

...

 

...

         

...

 

...

      <p>Вызывает главное меню 

...

приложения.

...

 

...

 </p>
 <p><strong>Спрятать вкладки</strong> - позволяет спрятать вкладки приложения (<strong>Главная</strong>, <strong>Эфир</strong>, <strong>Заказ</strong>). </p>
 <p><strong>В начало списка</strong> (для вкладки <strong>Эфир</strong>) - позволяет отображать начало списка заказов в эфире. </p>


       

...

 

...

         

...

 

...

      </div>
  

...

 

...

         

...

 

...

       </li>

...


...

         

...

 

...

         

...

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

...

 

...

         

...

 

...

     

...

 

...

  

...

 

...

 

...

 

...

 

...

   

...

 <p> Информация о текущих и 

...

выполненных <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=8552945#id-Приемзаказа,сообщенияпозаказу-ПриемзаказаСведенияозаказах">заказах</a>.
       

...

 

...

                    </

...

p>

...

 

...

    

...

 

...

     

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

      </div>
    

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

    

...

     </

...

li>



 

...

 

...

     

...

 

...

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

                            <p>
                                Входящие <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552945#id-Приемзаказа,сообщенияпозаказу-СообщенияСообщения">сообщения</a> для водителя.
              

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 </p>


                        </div>
        

...

  

...

 

...

 

...

     

...

 

...

  </li>



...

					<li class="accordion_item">
                        <input type="checkbox" class="accordion_toggle" id="toggle-

...

08" hidden>
                        <label class="accordion_trigger" for="toggle-

...

08"

...

>Связь</label>
                        <i></i>
                        <div class="accordion_target">

                            <p>
                                Быстрый доступ к <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552909"

...

>связи</

...

a> 

...

с 

...

диспетчерской.

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

               </p>


                        </div>
                    </li>


...

 

...

 

...

     

...

 

...

            <li class="accordion_item">
                        <input type="checkbox" class="accordion_toggle" id="toggle-

...

09" hidden>
                        <label class="accordion_trigger" for="toggle-

...

09"

...

>GPS карта</label>
                        <i></i>
                        <div class="accordion_target">

...

 

...

                           <p><a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552890&src=contextnavpagetreemode">GPS карта</a> позволяет определить местонахождение водителя, контролировать автотранспорт и маршруты движения в режиме реального времени, а также получать информацию о пробках.
                            </p>
                        </div>
                    </li>

 

...

 

...

 

...

     

...

 

...

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

...

                          <p><a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552900&src=contextnavpagetreemode">Таксометр</a> применяется для расчета стоимости поездки на основании данных о тарифе, о пройденном расстоянии и о затраченном на поездку времени.
                            </p>

                        </div>
                    </li>

   

...

 

...

 

...

     

...

 

...

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

 

...

                           <p><a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552909"

...

>Доп. 

...

функции</

...

a> 

...

включают 

...

в 

...

себя информацию 

...

о 

...

программе, 

...

статистике 

...

по 

...

GPS 

...

и 

...

о 

...

последнем 

...

заказе.

...

  

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

 

...

                  </p>

                        </div>
                    </li>



...

 

...

 

...

     

...

 

...

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

...

                            <p><a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552909#id-Связьсдиспетчеромидополнительныефункции-Сигнал"Байкал"Сигнал"Байкал"">Экстренный вызов</a> диспетчера в случае непредвиденной ситуации
                            </p>


                        </div>
                    </li>

    

...

 

...

 

...

     

...

 

...

        

...

<li class="accordion_item">
                        <input type="checkbox" class="accordion_toggle" id="toggle-

...

13" hidden>
                        <label class="accordion_trigger" for="toggle-

...

13"

...

>Настройки</label>
                        <i></i>
                        <div class="accordion_target">
                            <p>Позволяют <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

8552923&src=contextnavpagetreemode">настроить</a>: эфир,звук, вибрацию, оформление, время подачи по-умолчанию, очистить память, обновление, передачу GPS.</p>
							
      

...

         

...

         </div>

...

 

...

     

...

 

...

             </li>




   <li class="accordion_item">
                        <input type="checkbox" class="accordion_toggle" id="toggle-

...

14" hidden>
                        <label class="accordion_trigger" for="toggle-

...

14"

...

>Выход</label>
                        <i></i>
                        <div class="accordion_target">

 

...

                           <p><a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=

...

12779624#id-Статус,рейтинг,баланс-Вход/ВыходизмодуляВход/Выходизмодуля">"Выход"</a> позволяет открыться, закрыться, выйти с закрытием, выйти без закрытия.</p>


...

                        </div>
                    </li>







 </ul>
            </div>
        </td>
    </tr>
</table>

...

<style>
    .menu-container * {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .interface-content {
        width: 100%;
    }

    .interface-content td {
        vertical-align: top;
    }

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


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