82 lines
3.6 KiB
HTML
82 lines
3.6 KiB
HTML
{{ define "main" }}
|
|
{{ $heroBg := resources.Get "images/visuels/incontournable-haut-pays-velay.jpg" }}
|
|
<section class="hero" {{ if $heroBg }}style="background-image: url('{{ $heroBg.RelPermalink }}')"{{ end }}>
|
|
<h1 class="hero-headline">
|
|
<span class="text-primary">{{ site.Params.hero.line1before }}</span> <span class="text-highlight">{{ site.Params.hero.line1highlight }}</span> <span class="text-primary">{{ site.Params.hero.line1after }}</span><br>
|
|
<span class="text-highlight">{{ site.Params.hero.line2highlight }}</span> <span class="text-primary">{{ site.Params.hero.line2after }}</span>
|
|
</h1>
|
|
</section>
|
|
|
|
<section class="search-block">
|
|
<h2 class="search-title">{{ site.Params.search.title }}</h2>
|
|
<form class="search-form">
|
|
{{ $iconLocation := resources.Get "images/picto/location_on_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
|
|
{{ $iconCalendar := resources.Get "images/picto/calendar_today_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
|
|
{{ $iconSchedule := resources.Get "images/picto/schedule_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
|
|
{{ $iconSearch := resources.Get "images/picto/search_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
|
|
|
|
{{ $iconSwap := resources.Get "images/picto/sync_alt_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
|
|
|
|
<div class="form-group-locations">
|
|
<div class="form-group">
|
|
<label for="depart">
|
|
{{ if $iconLocation }}<img src="{{ $iconLocation.RelPermalink }}" alt="" class="label-icon" />{{ end }}
|
|
{{ site.Params.search.labelDepart }}
|
|
</label>
|
|
<input type="text" id="depart" name="depart" placeholder="" />
|
|
</div>
|
|
|
|
<button type="button" class="swap-btn" onclick="swapLocations()" aria-label="Inverser départ et destination">
|
|
{{ if $iconSwap }}<img src="{{ $iconSwap.RelPermalink }}" alt="" />{{ end }}
|
|
</button>
|
|
|
|
<div class="form-group">
|
|
<label for="destination">
|
|
{{ if $iconLocation }}<img src="{{ $iconLocation.RelPermalink }}" alt="" class="label-icon" />{{ end }}
|
|
{{ site.Params.search.labelDestination }}
|
|
</label>
|
|
<input type="text" id="destination" name="destination" placeholder="" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group-row">
|
|
<div class="form-group">
|
|
<label for="date">
|
|
{{ if $iconCalendar }}<img src="{{ $iconCalendar.RelPermalink }}" alt="" class="label-icon" />{{ end }}
|
|
{{ site.Params.search.labelDate }}
|
|
</label>
|
|
<input type="date" id="date" name="date" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="heure">
|
|
{{ if $iconSchedule }}<img src="{{ $iconSchedule.RelPermalink }}" alt="" class="label-icon" />{{ end }}
|
|
{{ site.Params.search.labelHeure }}
|
|
</label>
|
|
<input type="time" id="heure" name="heure" />
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="search-btn">
|
|
{{ if $iconSearch }}<img src="{{ $iconSearch.RelPermalink }}" alt="" class="btn-icon" />{{ end }}
|
|
{{ site.Params.search.buttonText }}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="video-block">
|
|
<h2 class="video-title">{{ site.Params.video.title }}</h2>
|
|
{{ $video := resources.Get "videos/video_presentation_mms43.mp4" }}
|
|
{{ if $video }}
|
|
<div class="video-container">
|
|
<video controls>
|
|
<source src="{{ $video.RelPermalink }}" type="video/mp4" />
|
|
Votre navigateur ne supporte pas la lecture de vidéos.
|
|
</video>
|
|
</div>
|
|
{{ end }}
|
|
</section>
|
|
|
|
{{ .Content }}
|
|
{{ end }}
|