refactor: first inclusion of darc member registration
This commit is contained in:
Matthias Jung
@@ -0,0 +1,273 @@
|
||||
/* ==========================================================================
|
||||
DARC Mitgliedsantrag – Buttons, Banner & Floating CTA
|
||||
Feste, kontrastgeprüfte Palette (nicht durch Redakteure änderbar):
|
||||
Hintergrund #2aa6da (DARC-Blau)
|
||||
Schrift #16294a (Dunkelnavy) → Kontrast 5,2:1
|
||||
Hover #4cb8e6 (aufgehellt) → Kontrast 6,4:1
|
||||
========================================================================== */
|
||||
|
||||
.darc-antrag {
|
||||
--darc-blue: #00ADEF;
|
||||
--darc-blue-hover: #4cb8e6;
|
||||
--darc-navy: #16294a;
|
||||
--darc-radius: 5px;
|
||||
--darc-font: inherit;
|
||||
font-family: var(--darc-font);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
.darc-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55em;
|
||||
padding: 0.75em 1.4em;
|
||||
min-height: 44px;
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border-radius: var(--darc-radius);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: transform .12s ease, background-color .12s ease, color .12s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.darc-btn:hover { transform: translateY(-1px); }
|
||||
.darc-btn:focus-visible { outline: 3px solid var(--darc-navy); outline-offset: 2px; }
|
||||
|
||||
.darc-btn__icon { display: inline-flex; }
|
||||
.darc-btn__label { white-space: nowrap; }
|
||||
.darc-btn__arrow { width: 1.1em; height: 1.1em; transition: transform .12s ease; }
|
||||
.darc-btn:hover .darc-btn__arrow { transform: translateX(3px); }
|
||||
.darc-icon { width: 1.25em; height: 1.25em; }
|
||||
|
||||
/* Primär (gefüllt): Navy-Schrift auf DARC-Blau */
|
||||
.darc-btn--primary {
|
||||
background: var(--darc-blue);
|
||||
color: #fff;
|
||||
}
|
||||
.darc-btn--primary:hover {
|
||||
background: var(--darc-blue-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Outline: Navy-Schrift, blauer Rahmen */
|
||||
.darc-btn--outline {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border-color: var(--darc-blue);
|
||||
}
|
||||
.darc-btn--outline:hover {
|
||||
background: var(--darc-blue);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pille mit Icon */
|
||||
.darc-btn--pill {
|
||||
background: var(--darc-blue);
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.7em 1.5em;
|
||||
}
|
||||
.darc-btn--pill:hover { background: var(--darc-blue-hover); color: #fff; }
|
||||
|
||||
/* ==========================================================================
|
||||
Banner – breit (Streifen)
|
||||
========================================================================== */
|
||||
.darc-banner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem 1.5rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: 14px;
|
||||
background: var(--darc-blue);
|
||||
color: var(--darc-navy);
|
||||
}
|
||||
.darc-banner__body { display: flex; align-items: center; gap: 1rem; min-width: 0; }
|
||||
.darc-banner__icon .darc-icon { width: 2.2em; height: 2.2em; }
|
||||
.darc-banner__headline { margin: 0; font-size: 1.3rem; font-weight: 800; }
|
||||
.darc-banner__sub { margin: .15rem 0 0; font-size: .95rem; }
|
||||
/* CTA auf dem blauen Banner: weiße Fläche mit Navy-Schrift (hoher Kontrast).
|
||||
Dezente Navy-Outline, damit der Button auch auf sehr hellen Seiten und am
|
||||
helleren Rand des Banners klar abgegrenzt bleibt. */
|
||||
.darc-banner__cta {
|
||||
background: #ffffff;
|
||||
color: var(--darc-navy);
|
||||
border-color: rgba(22, 41, 74, .3);
|
||||
box-shadow: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.darc-banner__cta:hover {
|
||||
background: #eaf6fc;
|
||||
color: var(--darc-navy);
|
||||
border-color: rgba(22, 41, 74, .55);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Banner – Karte mit Vorteilen
|
||||
========================================================================== */
|
||||
.darc-card {
|
||||
max-width: 420px;
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4eef3;
|
||||
color: var(--darc-navy);
|
||||
}
|
||||
.darc-card__head { display: flex; align-items: center; gap: .75rem; }
|
||||
.darc-card__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.6rem; height: 2.6rem;
|
||||
border-radius: 50%;
|
||||
background: var(--darc-blue);
|
||||
color: var(--darc-navy);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.darc-card__icon .darc-icon { width: 1.4em; height: 1.4em; }
|
||||
.darc-card__headline { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--darc-navy); }
|
||||
.darc-card__sub { margin: .85rem 0 0; font-size: .95rem; opacity: .85; }
|
||||
.darc-card__benefits {
|
||||
list-style: none !important;
|
||||
margin: 1rem 0 1.25rem;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
}
|
||||
/* !important, damit eingebettete Host-Themes (z. B. darc.de) keine Aufzählungs-
|
||||
punkte auf die li zurückbringen. */
|
||||
.darc-card__benefits li {
|
||||
list-style: none !important;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-left: 1.6rem;
|
||||
font-size: .95rem;
|
||||
}
|
||||
.darc-card__benefits li::marker { content: none; }
|
||||
.darc-card__benefits li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; top: .15rem;
|
||||
width: 1.1rem; height: 1.1rem;
|
||||
background: no-repeat center/contain
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316294a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
|
||||
}
|
||||
.darc-card__cta { width: 100%; justify-content: center; }
|
||||
|
||||
/* Schmale Sidebar-Variante (max. 240px) ---------------------------------- */
|
||||
.darc-card--sidebar {
|
||||
max-width: 240px;
|
||||
padding: 1rem;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.darc-card--sidebar .darc-card__head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: .5rem;
|
||||
}
|
||||
.darc-card--sidebar .darc-card__icon { width: 2.1rem; height: 2.1rem; }
|
||||
.darc-card--sidebar .darc-card__headline {
|
||||
font-size: .95rem;
|
||||
line-height: 1.2;
|
||||
hyphens: none;
|
||||
text-wrap: balance; /* falls doch zwei Zeilen: ausgewogen statt einzelnes Wort */
|
||||
}
|
||||
.darc-card--sidebar .darc-card__sub { margin-top: .55rem; font-size: .85rem; }
|
||||
.darc-card--sidebar .darc-card__benefits {
|
||||
margin: .85rem 0 1rem;
|
||||
gap: .4rem;
|
||||
}
|
||||
.darc-card--sidebar .darc-card__benefits li {
|
||||
padding-left: 1.4rem;
|
||||
font-size: .82rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.darc-card--sidebar .darc-card__benefits li::before {
|
||||
width: .95rem; height: .95rem; top: .1rem;
|
||||
}
|
||||
.darc-card--sidebar .darc-card__cta {
|
||||
padding: .6em 1em;
|
||||
font-size: .92rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Text-Link (dezent)
|
||||
========================================================================== */
|
||||
.darc-inline-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .4em;
|
||||
color: var(--darc-navy);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
.darc-inline-link .darc-icon { width: 1.1em; height: 1.1em; }
|
||||
.darc-inline-link__arrow { width: 1em; height: 1em; transition: transform .12s ease; }
|
||||
.darc-inline-link:hover { border-bottom-color: currentColor; }
|
||||
.darc-inline-link:hover .darc-inline-link__arrow { transform: translateX(3px); }
|
||||
|
||||
/* ==========================================================================
|
||||
Floating CTA (mitlaufend)
|
||||
========================================================================== */
|
||||
.darc-floating {
|
||||
position: fixed;
|
||||
bottom: 1.25rem;
|
||||
z-index: 9999;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
border-radius: 8px;
|
||||
background: var(--darc-blue);
|
||||
color: var(--darc-navy);
|
||||
transform: translateY(140%);
|
||||
opacity: 0;
|
||||
transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, background-color .12s ease;
|
||||
}
|
||||
.darc-floating--right { right: 1.25rem; }
|
||||
.darc-floating--left { left: 1.25rem; }
|
||||
.darc-floating.is-visible { transform: translateY(0); opacity: 1; }
|
||||
.darc-floating[hidden] { display: none; }
|
||||
.darc-floating:hover { background: var(--darc-blue-hover); }
|
||||
|
||||
.darc-floating__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .55em;
|
||||
padding: 0.8em 1.3em;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.darc-floating__icon .darc-icon { width: 1.3em; height: 1.3em; }
|
||||
.darc-floating__close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2em;
|
||||
padding: 0 .6em 0 .2em;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(22, 41, 74, .3);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.darc-floating__close svg { width: 1.1em; height: 1.1em; }
|
||||
.darc-floating__close:hover { background: rgba(22, 41, 74, .12); }
|
||||
.darc-floating :focus-visible { outline: 2px solid var(--darc-navy); outline-offset: 2px; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.darc-floating { left: 1rem; right: 1rem; justify-content: center; }
|
||||
.darc-floating__label { font-size: .95rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.darc-btn, .darc-btn__arrow, .darc-floating, .darc-inline-link__arrow { transition: none; }
|
||||
.darc-btn:hover { transform: none; }
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* DARC Mitgliedsantrag – Floating CTA
|
||||
*
|
||||
* Blendet den mitlaufenden Button automatisch nach kurzer Verzögerung ein,
|
||||
* damit er auch auf großen Bildschirmen / kurzen Seiten ohne Scrollen sichtbar
|
||||
* ist. Wird vorher gescrollt, erscheint er sofort.
|
||||
*
|
||||
* Es werden KEINE personenbezogenen Daten und keine dauerhaften Marker
|
||||
* gespeichert – nur ein sessionStorage-Flag pro Element, das beim Schließen des
|
||||
* Tabs verfällt.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var REVEAL_DELAY = 800; // ms: spätestens nach dieser Zeit einblenden.
|
||||
var REVEAL_AFTER = 200; // px Scroll-Tiefe, ab der sofort eingeblendet wird.
|
||||
|
||||
function storageKey(el) {
|
||||
return 'darcFloatingDismissed_' + (el.getAttribute('data-uid') || '0');
|
||||
}
|
||||
|
||||
function isDismissed(el) {
|
||||
if (el.getAttribute('data-dismissible') !== '1') {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
return window.sessionStorage.getItem(storageKey(el)) === '1';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function dismiss(el) {
|
||||
el.classList.remove('is-visible');
|
||||
window.setTimeout(function () { el.setAttribute('hidden', 'hidden'); }, 350);
|
||||
try {
|
||||
window.sessionStorage.setItem(storageKey(el), '1');
|
||||
} catch (e) { /* sessionStorage nicht verfügbar – egal */ }
|
||||
}
|
||||
|
||||
function reveal(el) {
|
||||
el.removeAttribute('hidden');
|
||||
// Doppeltes rAF, damit der Display-Wechsel die Transition auslöst.
|
||||
window.requestAnimationFrame(function () {
|
||||
window.requestAnimationFrame(function () { el.classList.add('is-visible'); });
|
||||
});
|
||||
}
|
||||
|
||||
function setup(el) {
|
||||
if (isDismissed(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var closeBtn = el.querySelector('.darc-floating__close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', function () { dismiss(el); });
|
||||
}
|
||||
|
||||
var shown = false;
|
||||
var timer = null;
|
||||
|
||||
function show() {
|
||||
if (shown) {
|
||||
return;
|
||||
}
|
||||
shown = true;
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
if (timer) {
|
||||
window.clearTimeout(timer);
|
||||
}
|
||||
reveal(el);
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if ((window.pageYOffset || document.documentElement.scrollTop) > REVEAL_AFTER) {
|
||||
show();
|
||||
}
|
||||
}
|
||||
|
||||
// Garantierte Einblendung nach kurzer Verzögerung (auch ohne Scrollen).
|
||||
timer = window.setTimeout(show, REVEAL_DELAY);
|
||||
// Früher einblenden, sobald der Besucher scrollt.
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
}
|
||||
|
||||
function init() {
|
||||
var elements = Array.prototype.slice.call(
|
||||
document.querySelectorAll('[data-darc-floating]')
|
||||
);
|
||||
elements.forEach(setup);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -9,6 +9,7 @@
|
||||
<link rel="icon" href="assets/favicon/icon.svg" type="image/svg+xml">
|
||||
<link rel="mask-icon" href="assets/favicon/mask-icon.svg" color="#00ADEF">
|
||||
<link href="assets/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/antrag/darc-antrag.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/style-fiftyohm.css?ts=202312172012">
|
||||
<link rel="stylesheet" href="assets/style-course.css?ts=202312172012">
|
||||
<link rel="stylesheet" href="assets/katex/katex.min.css">
|
||||
@@ -16,6 +17,7 @@
|
||||
<script defer src="assets/katex/auto-render.min.js"></script>
|
||||
<script defer src="assets/latex.js"></script>
|
||||
<script defer src="assets/script.js"></script>
|
||||
<script defer src="assets/antrag/floating-cta.js"></script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -164,7 +166,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="darc-antrag">
|
||||
<div class="darc-floating darc-floating--right" data-darc-floating="1" data-uid="341903" data-dismissible="1">
|
||||
<a class="darc-floating__link" href="https://antrag.darc.de/" target="_blank">
|
||||
<span class="darc-floating__icon">
|
||||
<!-- Amateurfunk-/Antennen-Icon (dezent, erbt die Textfarbe) -->
|
||||
<svg class="darc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<path d="M12 20v-7"></path>
|
||||
<circle cx="12" cy="11" r="2"></circle>
|
||||
<path d="M7.8 6.2a6 6 0 0 0 0 8.5"></path>
|
||||
<path d="M16.2 6.2a6 6 0 0 1 0 8.5"></path>
|
||||
<path d="M5 3.7a9.5 9.5 0 0 0 0 13.4"></path>
|
||||
<path d="M19 3.7a9.5 9.5 0 0 1 0 13.4"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="darc-floating__label">DARC Mitglied werden</span>
|
||||
</a>
|
||||
<button type="button" class="darc-floating__close" aria-label="Hinweis ausblenden">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<path d="M6 6l12 12"></path>
|
||||
<path d="M18 6L6 18"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/bootstrap-5.2.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user