forked from markus/AMPERION_Webpage
Commit12082000
This commit is contained in:
parent
b6fe872a80
commit
0962f9325b
30 changed files with 1536 additions and 862 deletions
|
|
@ -1,80 +1,190 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
{{ partial "page-title.html" . }}
|
||||
{{/* ========= Datenquellen: Impressum > params.contact > params (alt) ========= */}}
|
||||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||
|
||||
<section class="contact-form">
|
||||
<div class="container">
|
||||
{{ with site.Params.contact.form }}{{ if .enable -}}
|
||||
<div class="row">
|
||||
<form method="POST" {{ if .use_netlify }}name="{{ printf "contact_%s" $.Language.Lang }}" action="{{ "/message_sent" | relLangURL }}" netlify netlify-honeypot="nhp"{{ else }}name="contact" action="{{ .action | safeURL }}"{{ end }}>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="form-group">
|
||||
<label for="name" hidden>{{ i18n "contact_form_name" }}</label>
|
||||
<input id="name" name="name" type="text" class="form-control" placeholder="{{ i18n "contact_form_name" }}" required>
|
||||
{{ $addr := or
|
||||
(and $impressum $impressum.Params.location)
|
||||
(or site.Params.contact.location site.Params.location) }}
|
||||
|
||||
{{ $email := or
|
||||
(and $impressum $impressum.Params.email)
|
||||
(or site.Params.contact.email site.Params.email) }}
|
||||
|
||||
{{ $phone1 := or
|
||||
(and $impressum $impressum.Params.telefon)
|
||||
(or site.Params.contact.phone1 site.Params.phone1) }}
|
||||
|
||||
{{ $phone2 := or
|
||||
(and $impressum $impressum.Params.telefon2)
|
||||
(or site.Params.contact.phone2 site.Params.phone2) }}
|
||||
|
||||
<style>
|
||||
/* Nur Hilfsstyles – keine Typo-Overrides */
|
||||
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
||||
.contact-wrap{padding:56px 0}
|
||||
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
|
||||
.card-pad{padding:24px}
|
||||
.stack{display:grid;gap:16px}
|
||||
.stack-lg{display:grid;gap:24px}
|
||||
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
|
||||
.info-item{display:flex;gap:.75rem;align-items:flex-start}
|
||||
.info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623}
|
||||
|
||||
/* CTA-Buttons & Socials: wir nutzen eure Klassen, nur Layout-Hooks */
|
||||
.cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
|
||||
.cta__social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
.cta__social-link{width:56px;height:56px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.06)}
|
||||
|
||||
/* Formular-Grid */
|
||||
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
|
||||
@media(min-width:768px){.form-grid{grid-template-columns:1fr 1fr}}
|
||||
.form-group{display:flex;flex-direction:column;gap:.4rem}
|
||||
.form-group.full{grid-column:1 / -1}
|
||||
.form-control{
|
||||
width:100%;background:#fff;color:inherit;
|
||||
border:1px solid rgba(0,0,0,.12);border-radius:12px;
|
||||
padding:.85rem 1rem;outline:0;transition:border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
textarea.form-control{min-height:160px;resize:vertical}
|
||||
.form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)}
|
||||
.form-legal{margin:0;opacity:.9} /* p-Standardgröße bleibt erhalten */
|
||||
.card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */
|
||||
|
||||
</style>
|
||||
|
||||
<section class="contact-wrap">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<!-- ===== Kontakt-Infos ===== -->
|
||||
<div class="col-lg-5" data-reveal>
|
||||
<div class="card card-pad stack-lg">
|
||||
<div class="stack">
|
||||
<h3>Kontakt</h3>
|
||||
<ul class="info-list" style="display:grid;gap:12px;justify-items:center;text-align:center">
|
||||
{{ with $addr }}
|
||||
<li class="info-item">
|
||||
<div class="txt">{{ . | markdownify }}</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $email }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="mailto:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone1 }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone2 }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" hidden>{{ i18n "contact_form_email" }}</label>
|
||||
<input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="{{ i18n "contact_form_email" }}" required>
|
||||
|
||||
<div class="stack">
|
||||
<h3>Folgen Sie uns</h3>
|
||||
<div class="cta__social">
|
||||
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<img src="/images/social/instagram.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||
<img src="/images/social/linkedin.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<img src="/images/social/facebook.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="subject" hidden>{{ i18n "contact_form_subject" }}</label>
|
||||
<input id="subject" name="subject" type="text" class="form-control" placeholder="{{ i18n "contact_form_subject" }}" required>
|
||||
</div>
|
||||
{{ if .use_netlify -}}
|
||||
<div class="form-group-h">
|
||||
<input name="nhp" type="text" class="form-control" placeholder="Are you made of flesh and bone?">
|
||||
</div>
|
||||
{{- end }}
|
||||
{{ if .use_recaptcha -}}
|
||||
<div class="form-group-h">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Formular ===== -->
|
||||
<div class="col-lg-7" data-reveal>
|
||||
{{ with site.Params.contact.form }}{{ if .enable }}
|
||||
{{ $formName := printf "contact_%s" $.Language.Lang }}
|
||||
<form
|
||||
method="POST"
|
||||
class="card card-pad stack"
|
||||
{{ if .use_netlify }}
|
||||
name="{{ $formName }}" netlify netlify-honeypot="nhp" action="{{ "/message_sent" | relLangURL }}"
|
||||
{{ else }}
|
||||
name="contact" action="{{ .action | safeURL }}"
|
||||
{{ end }}
|
||||
>
|
||||
{{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }}
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="name" class="visually-hidden">Name</label>
|
||||
<input id="name" name="name" type="text" class="form-control" placeholder="Name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="visually-hidden">E-Mail</label>
|
||||
<input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="E-Mail" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company" class="visually-hidden">Unternehmen</label>
|
||||
<input id="company" name="company" type="text" class="form-control" placeholder="Unternehmen (optional)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone" class="visually-hidden">Telefon</label>
|
||||
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Telefon (optional)">
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label for="subject" class="visually-hidden">Betreff</label>
|
||||
<input id="subject" name="subject" type="text" class="form-control" placeholder="Betreff" required>
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label for="message" class="visually-hidden">Ihre Nachricht</label>
|
||||
<textarea id="message" name="message" class="form-control" rows="6" placeholder="Ihre Nachricht …" required></textarea>
|
||||
</div>
|
||||
|
||||
{{ if .use_netlify }}
|
||||
<div class="form-group full" style="display:none;">
|
||||
<label>Bitte nicht ausfüllen</label>
|
||||
<input name="nhp" type="text">
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .use_recaptcha }}
|
||||
<input type="hidden" id="captchaResponse" name="g-recaptcha-response">
|
||||
{{ end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="form-group-2">
|
||||
<label for="message" hidden>{{ i18n "contact_form_message" }}</label>
|
||||
<textarea id="message" name="message" class="form-control" rows="4" placeholder="{{ i18n "contact_form_message" }}" required></textarea>
|
||||
</div>
|
||||
<button class="btn btn-default" type="submit">{{ i18n "submit" }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{- end }}{{ end }}
|
||||
<div class="contact-box row">
|
||||
{{ with site.Params.contact -}}
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<h2>{{ i18n "address_title" }}</h2>
|
||||
<ul class="address-block">
|
||||
{{ $add_address_descriptors := .address_descriptors }}
|
||||
{{ with site.Params.location }}<li><i class="fas fa-map-marker-alt"></i>{{ if $add_address_descriptors }}{{ i18n "location" | printf "%s: " }}{{ end }}<div>{{ . | markdownify }}</div></li>{{ end }}
|
||||
{{ with site.Params.email }}<li><i class="fas fa-envelope"></i>{{ if $add_address_descriptors }}{{ i18n "email" | printf "%s: " }}{{ end }}{{ partial "cloak_email" . }}</li>{{ end }}
|
||||
{{ with site.Params.phone }}<li><i class="fas fa-tty"></i>{{ if $add_address_descriptors }}{{ i18n "phone" | printf "%s: " }}{{ end }}{{ . }}</li>{{ end }}
|
||||
</ul>
|
||||
<ul class="social-icons">
|
||||
{{ range site.Params.social -}}
|
||||
<li><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{ if site.Params.gmap.enable -}}
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="google-map">
|
||||
<div class="map" id="map" data-latitude="{{ site.Params.gmap.map_latitude }}" data-longitude="{{ site.Params.gmap.map_longitude }}" data-marker="{{ site.Params.gmap.map_marker | relURL }}" data-marker-name="{{ site.Title }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="form-legal">
|
||||
<label>
|
||||
<input type="checkbox" required>
|
||||
Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<button class="cta__btn" type="submit">
|
||||
<span aria-hidden="true">➜</span><span>Nachricht senden</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{{ end }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{/* Reveal Init (falls global nicht vorhanden) */}}
|
||||
<script>
|
||||
(function(){
|
||||
if (window.__contactRevealInit) return; window.__contactRevealInit = true;
|
||||
var els = document.querySelectorAll("[data-reveal]");
|
||||
if (!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
|
||||
var io = new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(entry){ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); }});
|
||||
}, {threshold:.12});
|
||||
els.forEach(e=>io.observe(e));
|
||||
})();
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue