...
| Макрос генерирует 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 class="td-picture" style="width: 400px; height: 680px;">
<p></p>
</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">
</br>
<p>Тип маршрута</p>
<p>По <p>- По адресу</p>
<p>По <p>- По городу</p>
</br>
</div><p>Формирование маршрута</p>
</li> <p>- Начало маршрута</p>
<p>- Конец маршрута</p>
<p>- Промежуточные точки</p>
<p>Дополнительно</p>
<li class="accordion_item"> <input type="checkbox" class="accordion_toggle" id="toggle-02" hidden>
<p>- Время подачи</p>
<label class="accordion_trigger" for="toggle-02">Формирование маршрута</label>
<i></i> <p>- Контактный телефон</p>
<p>- <div class="accordion_target">
</br>Дополнительные услуги</p>
<p>Начало<p>Изменение маршрута<стоимости заказа</p>
<p>Конец<p>Тип маршрута<машины</p>
<p>Промежуточные<p>Заказ точки<и сброс</p>
</br>
</div>
</li>
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-0302" hidden>
<label class="accordion_trigger" for="toggle-0302">Дополнительные>Мои услуги<заказы</label>
<i></i>
<div class="accordion_target">
</br>
<p>Время подачи</p>
<p>Контактный телефон</p>
<p>Дополнительные услуги</p>
</br>
</div>
</li>
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-0403" hidden>
<label class="accordion_trigger" for="toggle-04">Изменение стоимости заказа<03">Профиль</label>
<i></i>
<div class="accordion_target">
</br>
<p>Изменение стоимости заказа</p>
</br>
</div>
</li>
<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">
</br>
<p>Тип машины</p>
</br>
</div>
</li>
<li class="accordion_item">
<input type="checkbox" class="accordion_toggle" id="toggle-0604" hidden>
<label class="accordion_trigger" for="toggle-06">Заказ и сброс<04">Настройки</label>
<i></i>
<div class="accordion_target">
</br>
<p>Заказ
и сброс введенных данных</p>
</br>
</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;
}
.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 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>
<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>
|
...