Superminaren/50ohm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into slides_css_pictures_tables

Browse Source
This commit is contained in:
Lars Weiler
2026-07-09 12:17:57 +02:00
committed by GitHub
parent 633842596e a4214b103f
commit 03b5e09686
4 changed files with 185 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/antrag/darc-antrag.css
+51
View File
@@ -0,0 +1,51 @@
/* Minimal CSS for floating CTA positioning/animation only. Uses Bootstrap button styles. */
.darc-floating {
position: fixed;
bottom: 1.25rem;
z-index: 9999;
transform: translateY(140%);
opacity: 0;
transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s 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__link {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.darc-floating__icon {
display: inline-flex;
}
.darc-floating__icon svg {
width: 1.1rem;
height: 1.1rem;
}
.darc-floating__close {
min-width: 2.5rem;
line-height: 1;
}
@media (max-width: 480px) {
.darc-floating { left: 1rem; right: 1rem; }
.darc-floating .btn-group { width: 100%; }
.darc-floating .btn { flex: 1 1 auto; }
.darc-floating__close { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.darc-floating { transition: none; }
}
assets/antrag/floating-cta.js
+98
View File
@@ -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();
}
})();
templates/html/index.html
+13 -13
View File
@@ -108,8 +108,8 @@
<h5>Mitglied werden</h5>
<p>Der <a href="https://darc.de">DARC e. V.</a> unterstützt Dich auf deinem Weg zum Amateurfunkzeugnis und ist die größte Interessensvertretung der Funkamateure in Deutschland.</p>
<div class="row row-cols-lg-2">
<div class="col"><a href="https://www.darc.de/mitgliedschaft/mitglied-werden/" class="btn btn-outline-dark w-100">Mitglied werden</a></div>
<div class="col"><a href="https://www.darc.de/mitgliedschaft/mitglied-werden/#c154065" class="btn btn-outline-dark w-100">Gastmitgliedschaft</a></div>
<div class="col"><a href="https://antrag.darc.de/?typ=voll" class="btn btn-outline-dark w-100" target="_blank">Mitglied werden</a></div>
<div class="col"><a href="https://antrag.darc.de/?typ=gast" class="btn btn-outline-dark w-100" target="_blank">Gastmitgliedschaft</a></div>
</div>
</div>
</div>
@@ -121,9 +121,9 @@
<h2>Videokurse</h2>
<p>In Zusammenarbeit mit DL2YMR ist ein Videokurs für die Klasse N entstanden, der auf seinem YouTube-Kanal abrufbar ist. Weiterhin gibt es noch Vorlesungen für N+E sowie A. </p>
<div class="d-grid gap-2 d-sm-flex flex-sm-wrap mb-5">
<a href="https://www.youtube.com/playlist?list=PLDpWnjHk5ERbcgpLPUaU0iTsD-wrmfENk" class="btn btn-primary">Zum Videokurs Klasse N</a>
<a href="https://www.youtube.com/playlist?list=PL_JZo16Mzs5XGeN5N81MwQ70dp7478VkM" class="btn btn-primary">Vorlesung Klasse N+E</a>
<a href="https://www.youtube.com/playlist?list=PL_JZo16Mzs5XebdJhoIDLNp1MObBy7F5d" class="btn btn-primary">Vorlesung Klasse A</a>
<a href="https://www.youtube.com/playlist?list=PLDpWnjHk5ERbcgpLPUaU0iTsD-wrmfENk" class="btn btn-outline-dark">Zum Videokurs Klasse N</a>
<a href="https://www.youtube.com/playlist?list=PL_JZo16Mzs5XGeN5N81MwQ70dp7478VkM" class="btn btn-outline-dark">Vorlesung Klasse N+E</a>
<a href="https://www.youtube.com/playlist?list=PL_JZo16Mzs5XebdJhoIDLNp1MObBy7F5d" class="btn btn-outline-dark">Vorlesung Klasse A</a>
</div>
</div>
<div class="feature col">
@@ -134,8 +134,8 @@
<h2>Buch Klasse N</h2>
<p>Die Lernhinhalte für die Klasse N gibt es auch als gedrucktes Buch. Es ist passend zum Online-Kurs ausgelegt.</p>
<div class="d-grid gap-2 d-md-block mb-5">
<a href="https://darcverlag.de/DARC-Amateurfunklehrgang-Klasse-N" class="btn btn-primary">Beim DARC-Verlag kaufen</a>
<a href="https://www.amazon.de/dp/388692100X" class="btn btn-primary">Amazon</a>
<a href="https://darcverlag.de/DARC-Amateurfunklehrgang-Klasse-N" class="btn btn-outline-dark">Beim DARC-Verlag kaufen</a>
<a href="https://www.amazon.de/dp/388692100X" class="btn btn-outline-dark">Amazon</a>
</div>
</div>
<div class="feature col">
@@ -145,8 +145,8 @@
<h2>Kurse</h2>
<p>Einige unserer Ortsverbände bieten Präsenz- oder Onlinekurse mit erfahrenen Ausbildern an. Finde heraus, ob es einen für dich passenden Kurs bei dir in der Nähe gibt!</p>
<div class="d-grid gap-2 d-md-block mb-5">
<a href="kurse_vor_ort_karte.html" class="btn btn-primary">Präsenz</a>
<a href="kurse_vor_ort_liste.html" class="btn btn-primary">Online</a>
<a href="kurse_vor_ort_karte.html" class="btn btn-outline-dark">Präsenz</a>
<a href="kurse_vor_ort_liste.html" class="btn btn-outline-dark">Online</a>
</div>
</div>
<div class="feature col">
@@ -156,7 +156,7 @@
<h2>Ausbildungs&shy;paten</h2>
<p>Unsere Ausbildungspaten sind erfahrene Funkamateure, die dich gerne unterstützen. Sie können mit dir auch praktisch üben und nützliche Tipps für die Praxis geben.</p>
<div class="d-grid gap-2 d-md-block mb-5">
<a href="patenkarte.html" class="btn btn-primary">Zur Patenkarte</a>
<a href="patenkarte.html" class="btn btn-outline-dark">Zur Patenkarte</a>
</div>
</div>
<div class="feature col">
@@ -166,7 +166,7 @@
<h2>Fragenkatalog</h2>
<p>Den Fragenkatalog mit den amtlichen Prüfungsfragen gibt es digital bei der <a href="https://50ohm.de/fk">Bundesnetzagentur</a>. Beim DARC-Verlag kann man auch eine gedruckte Version bestellen.</p>
<div class="d-grid gap-2 d-md-block mb-5">
<a href="https://darcverlag.de/Fragenkatalog-Klasse-N" class="btn btn-primary">Beim DARC-Verlag kaufen</a>
<a href="https://darcverlag.de/Fragenkatalog-Klasse-N" class="btn btn-outline-dark">Beim DARC-Verlag kaufen</a>
</div>
</div>
<div class="feature col">
@@ -176,8 +176,8 @@
<h2>Trainings App</h2>
<p>Zum Trainieren der Fragen gibt es die 50Ohm App. Sie ist passend zum Online-Kurs ausgelegt.</p>
<div class="d-grid gap-2 d-md-block mb-5">
<a href="https://play.google.com/store/apps/details?id=de.darc.fuenfizigohm" class="btn btn-primary">Android</a>
<a href="https://apps.apple.com/de/app/50ohm/id6474642114" class="btn btn-primary">iOS</a>
<a href="https://play.google.com/store/apps/details?id=de.darc.fuenfizigohm" class="btn btn-outline-dark">Android</a>
<a href="https://apps.apple.com/de/app/50ohm/id6474642114" class="btn btn-outline-dark">iOS</a>
</div>
</div>
</div>
templates/html/page.html
+23 -1
View File
@@ -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,27 @@
</div>
</div>
</div>
<div class="darc-antrag">
<div class="darc-floating darc-floating--right" data-darc-floating="1" data-uid="341903" data-dismissible="1">
<div class="btn-group" role="group" aria-label="DARC Mitgliedsantrag">
<a class="btn btn-primary darc-floating__link" href="https://antrag.darc.de/" target="_blank" rel="noopener noreferrer">
<span class="darc-floating__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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="btn btn-primary darc-floating__close" aria-label="Hinweis ausblenden">&times;</button>
</div>
</div>
</div>
<script src="assets/bootstrap-5.2.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
</body>