✨ newsletter form (#45)
This commit is contained in:
parent
d4387ff08d
commit
644bf341b5
|
|
@ -399,7 +399,57 @@
|
|||
<div id="newsletter" class="box">
|
||||
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("news_newsletter_title") ?></span>
|
||||
|
||||
<div id="newsletter-signup-form-container">
|
||||
<div id="newsletter-signup-form">
|
||||
<div class="key-value-pair">
|
||||
<div class="key">
|
||||
<span class="ti ti-at"></span>
|
||||
</div>
|
||||
<div class="value-list">
|
||||
<div class="inputwrapper">
|
||||
<input id="newsletter-signup-form-mail-address" class="value" type="email" name="mail_address" placeholder="<?= $dict->get("news_newsletter_mail_address") ?>" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-value-pair">
|
||||
<div class="key">
|
||||
<span class="ti ti-world"></span>
|
||||
</div>
|
||||
<div class="value-list">
|
||||
<div id="newsletter-signup-form-language" class="value switch" data-selected="<?= $lang->get() ?>">
|
||||
<?php foreach(["de", "en"] as $one_lang){ ?>
|
||||
<div class="option" data-value="<?= $one_lang ?>">
|
||||
<span class="text"><?= strtoupper($one_lang) ?></span>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="newsletter-signup-form-submit" class="button primary">
|
||||
<span class="text"><?= $dict->get("news_newsletter_subscribe") ?></span>
|
||||
<span class="icon ti ti-chevron-right"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="newsletter-signup-form-feedback" class="gone">
|
||||
<div id="newsletter-signup-form-feedback-wait" class="centertext gone">
|
||||
<span class="icon spinning ti ti-loader-2"></span>
|
||||
<span class="text"><?= $dict->get("news_newsletter_feedback_wait") ?></span>
|
||||
</div>
|
||||
<div id="newsletter-signup-form-feedback-success" class="centertext gone">
|
||||
<span class="icon ti ti-check"></span>
|
||||
<span class="text"><?= $dict->get("news_newsletter_feedback_success") ?></span>
|
||||
</div>
|
||||
<div id="newsletter-signup-form-feedback-failure" class="centertext gone">
|
||||
<span class="icon ti ti-x"></span>
|
||||
<span class="text"><?= $dict->get("news_newsletter_feedback_failure") ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="inline gray"><?= $dict->get("news_newsletter_note") ?></span>
|
||||
</div>
|
||||
|
||||
<div id="social-media" class="box">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
--color-white: #c5cad3;
|
||||
|
||||
--color-gray-light: #acb0b9;
|
||||
--color-gray: #828997;
|
||||
--color-gray-dark: #5c6370;
|
||||
--color-gray-dark-dark: #454b54;
|
||||
|
|
@ -101,6 +102,13 @@ span.inline {
|
|||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.gone {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -469,6 +477,49 @@ span.inline {
|
|||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#newsletter-signup-form-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#newsletter-signup-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#newsletter-signup-form-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#newsletter-signup-form-feedback .centertext {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
#newsletter-signup-form-feedback-wait {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
#newsletter-signup-form-feedback-success {
|
||||
color: var(--color-green);
|
||||
}
|
||||
#newsletter-signup-form-feedback-failure {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -511,6 +562,127 @@ span.inline {
|
|||
|
||||
|
||||
|
||||
/* FORM ELEMENTS */
|
||||
.key-value-pair {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
.key-value-pair .key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 1rem;
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
|
||||
background-color: var(--theme);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
.key-value-pair .value-list {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.key-value-pair .value {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
|
||||
padding: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
|
||||
background-color: var(--color-gray-dark-dark);
|
||||
}
|
||||
|
||||
.inputwrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.inputwrapper.valid::after, .inputwrapper.invalid::after {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
|
||||
font-family: "tabler-icons" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.inputwrapper.valid::after {
|
||||
content: "\ea5e";
|
||||
color: var(--color-green);
|
||||
}
|
||||
.inputwrapper.invalid::after {
|
||||
content: "\eb55";
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1rem;
|
||||
color: var(--color-white);
|
||||
background: none;
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--color-gray-light);
|
||||
}
|
||||
|
||||
.value.switch {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
|
||||
background: none;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.switch .option {
|
||||
padding: 1rem;
|
||||
background-color: var(--color-gray-dark-dark);
|
||||
}
|
||||
.switch .option:last-child {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
.switch .option:hover {
|
||||
background-color: var(--color-gray-dark);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch .option.selected {
|
||||
background-color: var(--theme-dark);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
width: 100%;
|
||||
|
|
@ -574,3 +746,19 @@ span.inline {
|
|||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ANIMATION KIT */
|
||||
#newsletter-signup-form-feedback .spinning {
|
||||
animation-name: spinning;
|
||||
animation-duration: 0.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes spinning {
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -366,6 +366,31 @@
|
|||
"de" => "Newsletter",
|
||||
"en" => "Newsletter"
|
||||
],
|
||||
"news_newsletter_mail_address" => [
|
||||
"de" => "Deine Lieblings-Mail-Adresse",
|
||||
"en" => "Your favorite mail address"
|
||||
],
|
||||
"news_newsletter_subscribe" => [
|
||||
"de" => "Abonnieren",
|
||||
"en" => "Subscribe"
|
||||
],
|
||||
"news_newsletter_note" => [
|
||||
"de" => "Hinweis: Der Newsletter kann je nach Mail-Anbieter unter Umständen im Spam-Ordner landen.",
|
||||
"en" => "Note: Depending on your mail provider, the newsletter may end up in your spam folder."
|
||||
],
|
||||
"news_newsletter_feedback_wait" => [
|
||||
"de" => "Wird angemeldet",
|
||||
"en" => "Signing up"
|
||||
],
|
||||
"news_newsletter_feedback_success" => [
|
||||
"de" => "Erfolgreich angemeldet",
|
||||
"en" => "Successfully signed up"
|
||||
],
|
||||
"news_newsletter_feedback_failure" => [
|
||||
"de" => "Fehler bei der Anmeldung",
|
||||
"en" => "Failed to sign up"
|
||||
],
|
||||
|
||||
"news_social_media_title" => [
|
||||
"de" => "Soziale Medien",
|
||||
"en" => "Social Media"
|
||||
|
|
|
|||
Loading…
Reference in New Issue