EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Migrate to tailwindcss

Browse Source
This commit is contained in:
Björn Fromme
2021-08-24 17:38:54 +02:00
parent 6d0ce2e518
commit 75e34f5d85
28 changed files with 254 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Classes/ViewHelpers/ContainerViewHelper.php
+19 -12
View File
@@ -59,9 +59,9 @@ class ContainerViewHelper extends AbstractViewHelper
parent::initializeArguments();
$this->registerArgument('content', 'string', 'The content');
$this->registerArgument('cssClasses', 'string', 'Additional css classes');
$this->registerArgument('rteContent', 'boolean', 'Is rte content', false, false);
$this->registerArgument('data', 'Array', 'The data', true);
$this->registerArgument('cssClasses', 'string', 'Additional CSS classes');
$this->registerArgument('rteContent', 'boolean', 'Is RTE content', false, false);
$this->registerArgument('data', 'Array', 'The record data', true);
}
/**
@@ -90,17 +90,24 @@ class ContainerViewHelper extends AbstractViewHelper
$classes[] = $arguments['cssClasses'];
}
$scaleTop = empty($data['space_before_class']) ? static::$scale['default'] : static::$scale[$data['space_before_class']];
$scaleBottom = empty($data['space_after_class']) ? static::$scale['default'] : static::$scale[$data['space_after_class']];
$classes[] = sprintf('pt-%d', $scaleTop);
$classes[] = sprintf('pb-%d', $scaleBottom);
if ('default' !== $data['frame_class']) {
$classes[] = $data['frame_class'];
if (!empty($arguments['data']['space_before_class'])) {
$scaleTop = static::$scale[$arguments['data']['space_before_class']];
$classes[] = sprintf('pt-%d', $scaleTop);
} elseif (true === $arguments['rteContent']) {
$scaleTop = static::$scale['default'];
$classes[] = sprintf('pt-%d', $scaleTop);
}
if (true === $arguments['rteContent'] || count($classes) > 0) {
if (!empty($arguments['data']['space_after_class'])) {
$scaleBottom = static::$scale[$arguments['data']['space_after_class']];
$classes[] = sprintf('pb-%d', $scaleBottom);
}
if ('default' !== $arguments['data']['frame_class']) {
$classes[] = $arguments['data']['frame_class'];
}
if (count($classes) > 0) {
return sprintf('<div class="%s"%s>%s</div>', implode(' ', $classes), $arguments['rteContent'] ? ' data-rte-content' : '', $content);
}
public/typo3conf/ext/ep_theme/Configuration/TSconfig/Page/TCEFORM.tsconfig
+4
View File
@@ -105,6 +105,10 @@ TCEFORM {
}
space_before_class {
types {
gridelements_pi1.disabled = 1
list.disabled = 1
}
removeItems := addToList(extra-small, small, medium, extra-large)
altLabels.. = Standard
addItems {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/lazy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teasergrid_controller.js
+24
View File
@@ -0,0 +1,24 @@
import { Controller } from 'stimulus'
export default class extends Controller {
static classes = [ 'grid' ]
static targets = [
'icon',
'container',
]
static values = { disabled: Boolean }
toggle(e) {
e.preventDefault()
this.disabledValue = !this.disabledValue
}
disabledValueChanged() {
this.containerTarget.classList.toggle(this.gridClass, this.disabledValue === false)
let icon = this.disabledValue ? '#icon-grid' : '#icon-block'
this.iconTarget.setAttribute('href', icon)
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss
+19
View File
@@ -0,0 +1,19 @@
.product-teaser {
@apply relative;
}
.product-teaser__icon {
@apply w-4 h-4 md:w-8 md:h-8;
}
.product-teaser__concept {
@apply text-sm md:text-base;
}
.product-teaser__content {
@apply px-2 py-4 md:p-4;
}
.product-teaser__product {
@apply pl-8 md:pl-10;
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss
-389
View File
@@ -1,389 +0,0 @@
@keyframes stayvisible {
from {
visibility: visible;
}
to {
visibility: visible;
}
}
@-ms-keyframes donothing {
0% {
}
100% {
}
}
.teaserbox {
display: block;
text-decoration: none;
color: theme('colors.gray.800');
margin-bottom: 20px;
position: relative;
&:hover {
color: theme('colors.gray.800');
}
&--concept {
margin-top: 10px;
transition: all .5s ease-in-out;
@screen lg {
&:hover {
transform: translateY(-10px);
box-shadow: 0 15px 59px -9px rgba(0, 0, 0, 0.2);
.teaserbox__button {
opacity: 1;
}
}
}
}
&--flippable {
perspective: 1000px;
margin: 20px 0 40px;
@screen lg {
height: 450px;
margin: 30px 0;
}
}
&--landscape {
@screen md {
display: flex;
flex-wrap: nowrap;
&:not(:last-child) {
padding-bottom: 20px;
border-bottom: 2px solid theme('colors.gray.400');
}
}
}
span {
display: block;
}
hr {
margin: 8px 0;
}
p, ul {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
.teaserbox__image {
position: relative;
.teaserbox--landscape & {
@screen md {
flex: 0 0 260px;
}
@screen lg {
flex: 0 0 320px;
}
}
&--social-media {
height: 0;
padding-bottom: 100%;
background-size: cover;
}
}
.teaserbox__icon {
position: absolute;
z-index: 10;
top: 8px;
left: 8px;
color: white;
font-size: 125%;
}
.teaserbox__main {
height: auto;
border-width: 2px;
border-color: theme('colors.gray.200');
border-style: none solid;
padding: 8px;
display: flex;
flex-direction: column;
.teaserbox--default & {
min-height: 280px;
@screen md {
min-height: 260px;
}
@screen lg {
min-height: 220px;
}
}
.teaserbox--country &,
.teaserbox--region &,
.teaserbox--city & {
min-height: 170px;
overflow: hidden;
}
.teaserbox--hotel & {
min-height: 300px;
}
.teaserbox--product & {
border-style: none solid solid;
min-height: 250px;
@screen md {
min-height: 230px;
}
}
.teaserbox--concept & {
min-height: 130px;
border-style: none solid solid;
}
.teaserbox--landscape & {
height: auto;
border-style: none;
@screen md {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
padding: 8px 16px;
border-style: none;
}
}
.teaserbox--searchresult & {
padding: 16px 0;
border: none;
@screen md {
padding: 0 16px;
}
}
&--fixed-height {
height: 100px;
border-bottom: 12px solid white;
overflow: hidden;
}
}
.teaserbox__aside {
display: block;
padding: 8px;
border-width: 2px;
border-color: theme('colors.gray.600');
border-style: none solid solid;
@screen md {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 300px;
border-style: solid solid solid none;
}
.teaserbox--searchresult &,
.teaserbox--landscape & {
border: none;
@screen md {
flex: 0 0 220px;
padding: 0;
}
}
}
.teaserbox__header {
padding-bottom: 8px;
@screen md {
min-height: 100px;
padding-bottom: 0;
}
.teaserbox--searchresult & {
min-height: 0;
}
}
.teaserbox__flag {
position: absolute;
z-index: 10;
top: 0;
left: 0;
border-style: none solid solid none;
border-width: 2px;
border-color: white;
}
.teaserbox__button {
margin: -2px 0 0;
&--fadein {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.teaserbox--flippable & {
@screen lg {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
}
}
}
.teaserbox__flip {
width: 100%;
height: 100%;
display: block;
color: inherit;
&:hover {
color: theme('colors.gray.800');
}
&:focus,
&:active {
color: theme('colors.gray.800');
outline: none;
}
@screen lg {
transition: 0.5s ease-out;
transform-style: preserve-3d;
backface-visibility: visible;
.teaserbox--flippable:hover & {
transform: rotateY(180deg);
}
}
}
.teaserbox__side {
@screen lg {
width: 100%;
height: 100%;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
}
.teaserbox__side--front {
@screen lg {
animation: stayvisible 0.5s both;
visibility: visible;
transform: rotateY(0deg);
.teaserbox--flippable:hover & {
animation: stayvisible 0.5s both;
visibility: hidden;
}
}
}
.teaserbox__side--back {
@screen lg {
animation: stayvisible 0.5s both;
visibility: hidden;
transform: rotateY(-180deg);
.teaserbox--flippable:hover & {
animation: stayvisible 0.5s both;
visibility: visible;
}
}
}
.teaserbox__back {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 20px;
background-color: theme('colors.ep.primary');
color: white;
@screen lg {
display: block;
}
}
.teaserbox-watchlist {
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 48px;
height: 48px;
display: block;
color: white;
&:hover,
&:focus,
&:visited,
&:active {
color: white;
}
cursor: pointer;
padding: 4px 0 0 28px;
&:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
display: block;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+2 -2
View File
@@ -14,11 +14,9 @@
// LEGACY
@import "components/product";
@import "components/searchresult";
@import "components/teaserbox";
}
@layer components {
@import "components/tooltips";
@import "components/background";
@import "components/badges";
@import "components/buttons";
@@ -32,7 +30,9 @@
@import "components/misc";
@import "components/searchbar";
@import "components/slider";
@import "components/teaser";
@import "components/tiles";
@import "components/tooltips";
}
@layer utilities {
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/FluidStyledContent/Bare.html
+1
View File
@@ -0,0 +1 @@
<f:render section="Main" optional="true"/>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
+14 -11
View File
@@ -1,23 +1,26 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink class="teaserbox teaserbox--city" parameter="{city.detailPage}" title="{city.name}">
<div class="teaserbox__image">
<img class="teaserbox__flag"
src="{f:uri.image(src: '{ep:flagiconSource(country: city.country)}')}"
alt="{city.country.name}"/>
<f:link.typolink parameter="{city.detailPage}"
title="{city.name}"
class="flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="#icon-flag-{city.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<f:render partial="TeaserImage" arguments="{image: city.teaserImage}"/>
</div>
<div class="teaserbox__main">
<span class="headline headline--3 headline--teaser">{city.name}</span>
<hr>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<span class="headline--3 mb-4">
{city.name}
</span>
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<button class="button button--full teaserbox__button">{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}</button>
<button class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button>
</f:link.typolink>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html
+13 -11
View File
@@ -1,21 +1,23 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink class="teaserbox teaserbox--concept" parameter="{concept.detailPage}" title="{concept.name}">
<div class="teaserbox__image">
<f:render partial="TeaserImage" arguments="{image: concept.teaserImage}"/>
<f:if condition="{concept.code}">
<div class="concept-badge concept-badge--{concept.code}">{concept.name}</div>
</f:if>
</div>
<div class="teaserbox__main">
<f:link.typolink parameter="{concept.detailPage}"
title="{concept.name}"
class="flex flex-col">
<f:render partial="TeaserImage" arguments="{image: concept.teaserImage}"/>
<f:if condition="{concept.code}">
<div class="bg-concept-{concept.code} text-white uppercase leading-none p-2">
{concept.name}
</div>
</f:if>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<button class="button button--full teaserbox__button teaserbox__button--fadein">{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}</button>
<button class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button>
</f:link.typolink>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
+20 -14
View File
@@ -1,30 +1,36 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink class="teaserbox teaserbox--hotel" parameter="{hotel.detailPage}" title="{hotel.name}">
<div class="teaserbox__image">
<img class="teaserbox__flag"
src="{hotel.country.flag}"
alt="{hotel.country.name}"/>
<f:link.typolink parameter="{hotel.detailPage}"
title="{hotel.name}"
class="flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="#icon-flag-{hotel.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<f:render partial="TeaserImage" arguments="{image: hotel.images.original.0}"/>
</div>
<div class="teaserbox__main">
<span class="headline headline--3 headline--teaser">{hotel.name -> f:format.nl2br()}</span>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<span class="headline--3 mb-4">
{hotel.name -> f:format.nl2br()}
</span>
<f:if condition="{hotel.category}">
<span class="searchresult-item__category"><strong>Kategorie</strong> {hotel.category}</span>
<span class="searchresult-item__category">
<strong>Kategorie</strong> {hotel.category}
</span>
</f:if>
<hr>
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
<f:if condition="{hotel.available} != -1">
<hr>
<span class="teaserbox__price"><strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')}</strong></span>
<span class="teaserbox__price">
<strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')}</strong>
</span>
</f:if>
</div>
<button class="button button--full teaserbox__button">{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}</button>
<button class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button>
</f:link.typolink>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
+2
View File
@@ -34,6 +34,8 @@
<symbol id="icon-mountainbike" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M400 96a48 48 0 1 0-48-48 48 48 0 0 0 48 48zm224 256h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.62 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 405.2 352H400a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67a110.94 110.94 0 0 0 20.9 8.65v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 618.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm-272-96h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.63 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 21.2 352H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67A110.94 110.94 0 0 0 96 490.8v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 234.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm273-237.27a24 24 0 0 0 15 5.27h64a24 24 0 0 0 0-48h-55.59L351 109.27a24 24 0 0 0-30.62.51l-112 96a24 24 0 0 0 2.31 38.22L296 300.84V416a24 24 0 0 0 48 0V288a24 24 0 0 0-10.69-20l-43.23-28.82 70.73-60.63zM159.19 172a35.53 35.53 0 0 0 49.45 3.77l87.3-74.45c16.82-14.24 14.56-37 3.27-49.84C270 18.45 219 13.88 185.93 42L132.2 87.91a34.9 34.9 0 0 0-3.26 49.85zm57.88-93.5c9.92-8.42 24-9.35 35.65-3.43l-65.64 56-13.54-15.31z"/></symbol>
<symbol id="icon-hotel" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
<symbol id="icon-sportclub" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
<symbol id="icon-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4,9.333C4,6.408 6.408,4 9.333,4L14.667,4C17.592,4 20,6.408 20,9.333L20,14.667C20,17.592 17.592,20 14.667,20L9.333,20C6.408,20 4,17.592 4,14.667L4,9.333Z"></path></symbol>
<symbol id="icon-grid" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></symbol>
<!-- Flags -->
<symbol id="icon-flag-at" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></symbol>
<symbol id="icon-flag-ch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d52b1e" d="M0 0h640v480H0z"/><g fill="#fff"><path d="M170 195h300v90H170z"/><path d="M275 90h90v300h-90z"/></g></g></symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 22 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+62 -37
View File
@@ -3,19 +3,19 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="relative">
<div class="product-teaser">
<div class="absolute top-0 left-0 z-10 inset-x-0 flex justify-between items-center bg-ep-primary-80">
<div class="w-2/3 flex items-center">
<div class="bg-ep-primary p-2 mr-4 text-white">
<f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
<svg class="w-8 h-8 fill-current text-white">
<svg class="product-teaser__icon text-white">
<use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
</svg>
</f:alias>
</div>
<span class="text-white uppercase font-semibold">
{teaser.concept.name}
</span>
<span class="product-teaser__concept text-white uppercase font-semibold">
{teaser.concept.name}
</span>
</div>
<button type="button"
class="px-2"
@@ -34,6 +34,7 @@
class="block sm:flex sm:flex-wrap bg-white">
<div class="relative w-full">
<img class="block w-full h-auto lazyload"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')}"
data-src="{f:uri.image(image: teaser.product.images.original.0, width: '640', height: '480c')}"
width="640" height="480" />
</div>
@@ -43,40 +44,64 @@
</f:section>
<f:section name="TeaserContent">
<div class="w-full flex items-start py-4 px-4">
<svg class="w-10 h-6 mr-2 mt-8">
<use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/>
</svg>
<div class="flex-1 pt-1">
<div class="text-gray-800 leading-none">
{teaser.product.name}
<div class="product-teaser__content w-full">
<div class="product-teaser__product text-gray-800 leading-none pb-1">
{teaser.product.name}
</div>
<div class="flex items-baseline">
<div class="w-8 md:w-10 pr-2">
<svg class="w-6 h-4 md:w-8 md:h-6">
<use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/>
</svg>
</div>
<div class="pt-2 h-32 text-gray-800 text-3xl leading-none font-bold">
{teaser.region.name}
</div>
<div class="pb-2 text-gray-800 text-xl font-bold">
{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}
</div>
<ul class="list-none p-0 m-0 w-2/3 text-gray-800 divide-y divide-gray-400">
<li>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</li>
<li>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</li>
<li>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</li>
<li>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</li>
</ul>
<div class="bg-ep-primary text-white font-bold px-4 py-1 mt-10 mb-4">
<div class="lg:inline-block">
ab <span class="text-3xl mx-1">{teaser.minPrice} €</span>
<div class="flex-1">
<div class="h-16 md:h-24 text-gray-800 text-lg md:text-3xl leading-none font-bold">
{teaser.region.name}
</div>
<div class="lg:inline-block">
p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
<div class="pb-2 text-gray-800 text-lg md:text-xl font-bold">
{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}
</div>
<ul class="list-none p-0 m-0 text-gray-800 divide-y divide-gray-400">
<li class="flex items-center space-x-1">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-check"></use>
</svg>
<span>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</span>
</li>
<li class="flex items-center space-x-1">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-check"></use>
</svg>
<span>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</span>
</li>
<li class="flex items-center space-x-1">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-check"></use>
</svg>
<span>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</span>
</li>
<li class="flex items-center space-x-1">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-check"></use>
</svg>
<span>
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</span>
</li>
</ul>
<div class="bg-ep-primary text-white font-bold px-4 py-1 mt-8">
<div class="lg:inline-block">
ab <span class="text-xl md:text-3xl mx-1">{teaser.minPrice} €</span>
</div>
<div class="text-sm md:text-base lg:inline-block">
p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</div>
</div>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
+14 -11
View File
@@ -1,23 +1,26 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink class="teaserbox teaserbox--region" parameter="{region.detailPage}" title="{region.name}">
<div class="teaserbox__image">
<img class="teaserbox__flag"
src="{f:uri.image(src: '{ep:flagiconSource(country: region.country)}')}"
alt="{region.country.name}"/>
<f:link.typolink parameter="{region.detailPage}"
title="{region.name}"
class="flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="#icon-flag-{region.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<f:render partial="TeaserImage" arguments="{image: region.teaserImages.0}"/>
</div>
<div class="teaserbox__main">
<span class="headline headline--3 headline--teaser">{region.name}</span>
<hr>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<span class="headline--3 mb-4">
{region.name}
</span>
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<button class="button button--full teaserbox__button">{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}</button>
<button class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button>
</f:link.typolink>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+7 -9
View File
@@ -1,24 +1,22 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink parameter="{data.header_link}"
class="teaserbox teaserbox--default">
<div class="teaserbox__image">
class="flex flex-col">
<div class="relative">
<f:if condition="{context.country}">
<f:image class="teaserbox__flag"
src="{ep:flagiconSource(country: context.country)}"
alt="{context.country.name}"/>
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="#icon-flag-{context.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
</f:if>
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
</div>
<div class="teaserbox__main" data-rte-content>
<span class="headline headline--3 headline--teaser">
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<span class="headline--3 mb-4">
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
</span>
<hr>
{data.bodytext -> f:format.html()}
</div>
<button class="button w-full">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSubpages.html
+1 -1
View File
@@ -8,7 +8,7 @@
<div class="flex flex-col space-y-2 mb-8">
<f:for each="{menu}" as="page">
<f:link.typolink parameter="{page.data.uid}"
class="button button--light w-full{f:if(condition: '{page.active}', then: ' active')}">
class="button button--light w-full{f:if(condition: '{page.active}', then: ' button--active')}">
{page.data.title}
</f:link.typolink>
</f:for>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Teaser.html
+1 -1
View File
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:switch expression="{data.layout}">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserBookingLink.html
+1 -1
View File
@@ -2,7 +2,7 @@
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:if condition="{teaser.dates}">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCity.html
+1 -1
View File
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="City/Teaser" section="Teaser" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserConcept.html
+1 -1
View File
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="Concept/Teaser" section="Teaser" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
+1 -1
View File
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:link.typolink class="teaserbox teaserbox--country" parameter="{country.detailPage}" title="{country.name}">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserHotel.html
+1 -1
View File
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="Hotel/Teaser" section="Teaser" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserProduct.html
+1 -1
View File
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:if condition="{teaser.dates}">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserRegion.html
+1 -1
View File
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="Region/Teaser" section="Teaser" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Gridelements/Halves.html
+3 -3
View File
@@ -26,14 +26,14 @@
</f:section>
<f:section name="Grid">
<div class="grid grid-cols-2 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<f:if condition="{data.tx_gridelements_view_column_21 -> v:format.trim()}">
<div class="col-span-2 md:col-span-1">
<div>
{data.tx_gridelements_view_column_21 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_22 -> v:format.trim()}">
<div class="col-span-2 md:col-span-1">
<div>
{data.tx_gridelements_view_column_22 -> f:format.raw()}
</div>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Gridelements/Quarters.html
+5 -22
View File
@@ -1,6 +1,5 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
@@ -26,27 +25,11 @@
</f:section>
<f:section name="Grid">
<div class="grid grid-cols-4 gap-8">
<f:if condition="{data.tx_gridelements_view_column_41 -> v:format.trim()}">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_41 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_42 -> v:format.trim()}">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_42 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_43 -> v:format.trim()}">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_43 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_44 -> v:format.trim()}">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_44 -> f:format.raw()}
</div>
</f:if>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{data.tx_gridelements_view_column_41 -> f:format.raw()}
{data.tx_gridelements_view_column_42 -> f:format.raw()}
{data.tx_gridelements_view_column_43 -> f:format.raw()}
{data.tx_gridelements_view_column_44 -> f:format.raw()}
</div>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Gridelements/Thirds.html
+11 -36
View File
@@ -1,47 +1,22 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<f:if condition="{data.header_layout} != 100">
<f:if condition="{data.header}">
<ep:container data="{data}">
<f:render section="Header" arguments="{_all}"/>
</ep:container>
<ep:container data="{data}" cssClasses="py-8">
<f:if condition="{data.header_layout} != 100">
<f:if condition="{data.header}">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:if>
</f:if>
</f:if>
<div>
<ep:container data="{data}" cssClasses="slider slider--thirds">
<f:render section="Grid" arguments="{_all}"/>
</ep:container>
</div>
</f:section>
<f:section name="Header">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:section>
<f:section name="Grid">
<div class="grid grid-cols-3 gap-8">
<f:if condition="{data.tx_gridelements_view_column_31 -> v:format.trim()}">
<div class="col-span-3 md:col-span-1">
{data.tx_gridelements_view_column_31 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_32 -> v:format.trim()}">
<div class="col-span-3 md:col-span-1">
{data.tx_gridelements_view_column_32 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_33 -> v:format.trim()}">
<div class="col-span-3 md:col-span-1">
{data.tx_gridelements_view_column_33 -> f:format.raw()}
</div>
</f:if>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{data.tx_gridelements_view_column_31 -> f:format.raw()}
{data.tx_gridelements_view_column_32 -> f:format.raw()}
{data.tx_gridelements_view_column_33 -> f:format.raw()}
</div>
</ep:container>
</f:section>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+25 -28
View File
@@ -11,38 +11,35 @@
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
</div>
</f:if>
<div class="container">
<f:render section="Teasers" arguments="{_all}"/>
<f:if condition="{settings.showMoreLink}">
<div class="text-right mt-4">
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
action="staticresult" controller="Search"
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">
Alle anzeigen
</f:link.action>
<div class="container"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2">
<f:if condition="{teasers}">
<button class="inline-block sm:hidden mb-2"
data-action="teasergrid#toggle">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-block"
data-teasergrid-target="icon"></use>
</svg>
</button>
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{teasers}" as="teaser">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
</f:for>
</div>
<f:if condition="{settings.showMoreLink}">
<div class="text-right mt-4">
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
action="staticresult" controller="Search"
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">
Alle anzeigen
</f:link.action>
</div>
</f:if>
</f:if>
</div>
</div>
</f:section>
<f:section name="Teasers">
<f:if condition="{teasers}">
<f:if condition="{settings.layout} == 'rows'">
<f:then>
<f:for each="{teasers}" as="teaser">
<f:render partial="Product/TeaserWide" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
</f:for>
</f:then>
<f:else>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<f:for each="{teasers}" as="teaser">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
</f:for>
</div>
</f:else>
</f:if>
</f:if>
</f:section>
</html>