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

<meta charset="utf-8">
<div class="header">
 <h1><font  face="roboto - medium">Описание интерфейса программы</font></h1>
 <h2>Описание интерфейса клиентского приложения White Label</h3>
</div>          
  <img
class="main-picture" src="/download/attachments/26968566/White_Label_icon.png?version=1&modificationDate=1516894347159&api=v2">   <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/26968566/Order_WL_350.png?version=1&modificationDate=1516877110928&api=v226968173/%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/2696856626968177/Профиль_350%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8C.png?version=1&modificationDate=1516888646913&api=v2">
				<div class="description_text">
					</br>
					<ul>
						<li><strong>Имя</strong> - имя клиента.</li>
						<li><strong>Телефон<<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/2696856626968177/Настройки_350%D0%B8%D0%BD%D1%84%D0%BE.png?version=1&modificationDate=1516888646609&api=v2">
				<div class="description_text">
					</br>
					<ul>
						<li><strong>О программе<<li><strong>Версия</strong> - текущая версия приложения.</li>
						<p>Кнопка<li><strong>Связаться <strong>"Позвонить в техподдержку"<с нами</strong> - возможность обратиться в Вашу диспетчерскую и/или техподдержку в случаетелефонном неисправности приложениярежиме или написать письмо в Вашу диспетчерскую.</p>li>
					</ul>
					</br>
				</div>
           	</div>
        </li>

     </ul>
 </div>


			  
              
<style>


	.main-picture {
		position: absolute;
		top: 280px20px;
		left: 140px-300px;
	}
    .menu-container * {
        list-style: none;
        margin: 0;
        padding: 0;
    }


	.menu-container {
		min-height: 620px650px;
    }

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