История страницы

<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 class="td-picture" style="width: 400px; height: 680px;">
            <p></p>
        </td>
        <td>
            <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          <input name="interface-menu" type="checkboxradio" class="accordion_toggle" id="toggle-01" hidden>
                        <label class="accordion_trigger" for="toggle-01">Заказать</label>
                        <i></i>
						<div class="accordion_target">
							</br><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">
			<p>Тип маршрута</p>
                        		<p>- По адресу</p>		</br>
								<p>- По городу</p>
<ul>
							<p>Формирование маршрута</p>
                        		<p>- Начало маршрута</p><li><strong>Тип маршрута (1)</strong> - выбор маршрута <strong>"По адресу"</strong> (в маршруте есть конечная точка) или <strong>"По городу"</strong> (в маршруте есть только точка подачи).</li>
								<p>- Конец маршрута</p>
								<p>- Промежуточные точки</p>
							<p>Дополнительно</p>
                        		<p>- Время подачи</p>
   <li><strong>Формирование маршрута (2)</strong> - задание адресов начала, конца маршрута и промежуточных точек. Для удобства выбора адреса, можно использовать избранные адреса.</li>
						<li><strong>Дополнительно (3)</strong> - дополнительные условия поездки, в том числе изменение <u>времени подачи</u> и контактного <u>телефона</u> пассажира.</li>
             	      		<p>- Контактный телефон</p>   <li><strong>Изменение стоимости заказа (4)</strong> - для округления суммы и/или ускорения поиска          	 		<p>- Дополнительные услуги</p>
                        	<p>Изменение стоимости заказа</p>машины.</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>
							<p>Тип машины</p></ul>
							<p>Заказ и сброс</p></br>
							</br>div>
						</div>
                    </li>
                    <li class="accordion_item">
            <input            <input name="interface-menu" type="checkboxradio" 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="accordiondescription_targettext">
							</br>
					<ul>
		</br>
          				<li><strong>Выполняются</strong> - список выполняющихся заказов клиента.</li>
						<li><strong>История</strong> - список отправленных клиентом заказов.</li>
				</div>
             		<p>Полную информацию и маршрут по заказу можно посмотреть, нажав на текст заказа.</p>
					</ul>
					</br>
				</div>
      </li>     	</div>
        </li>

        <li class="accordion_item">
            <input            <input name="interface-menu" type="checkboxradio" 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="accordiondescription_targettext">
							</br>
					<ul>
						<li><strong>Имя</strong> - имя клиента.</li>
						<li><strong>Номер</strong> - контактный телефон клиента.</br>
           				</div>
                    </li>


li>
						<li><strong>Город</strong> - город, в котором клиент делает заказы. Если Ваша служба работает по нескольким городам, клиент может выбрать другой город из предоставленного списка.</li>
						<li><strong>Бонусы</strong> - бонусный счет клиента. Бонусы отображаются только если у Вашей службы настроена работа с бонусами.</li>
						<p>Кнопка <strong>"Выход"</strong> - выход из аккаунта клиента. При следующем входе необходимо будет авторизоваться.</p>
					</ul>
					</br>
				</div>
           	</div>
       <li class="accordion_item"> </li>


       <li class="accordion_item">
             <input name="interface-menu" type="checkboxradio" 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="accordiondescription_targettext">
							</br>
					<ul>
						<li><strong>Версия</strong> - текущая версия приложения.</li>
						<li><strong>Связаться с нами</strong> - возможность обратиться в Вашу диспетчерскую и/или техподдержку в телефонном режиме или написать письмо в 	
Вашу диспетчерскую.</li>
					</ul>
					</br>
           				</div>
           	</div>
        </li>

                </ul>
 </div>


			  
         </div>     
<style>


	.main-picture {
		position: absolute;
		top: 20px;
		left:  </td>-300px;
	}
    </tr>
    
</table>
<style>
    .menu-container * {
        list-style: none;
        margin: 0;
        padding: 0;
    }


   	.interfacemenu-contentcontainer {
        width		min-height: 100%650px;
    }

    .interface-content td 	.accordion {
        vertical-alignpadding: top;0     }


	.interface-content .td-picture {
		background: url(/download/attachments/26968566/Order_WL_350.png?version=1&modificationDate=1516877110928&api=v2&effects=drop-shadow) no-repeat 0 00 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>