:root {
--green: #2e7d32;
--green-dark: #1b5e20;
--green-light: #e6f4ea;
--bg: #f4f4f4;
--card: #ffffff;
--text: #222;
--muted: #6b6b6b;
--border: #dcdcdc;
--error: #c0392b;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg);
color: var(--text);
}
header {
background: var(--green-dark);
color: white;
padding: 28px 24px;
text-align: center;
}
header h1 {
margin: 0 0 6px 0;
font-size: 24px;
}
header p {
margin: 0;
font-size: 14px;
opacity: 0.9;
}
.wrap {
max-width: 620px;
margin: 28px auto 60px auto;
padding: 0 16px;
}
form {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 28px 30px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
fieldset {
border: none;
padding: 0;
margin: 0 0 24px 0;
}
legend {
font-size: 15px;
font-weight: bold;
color: var(--green-dark);
margin-bottom: 10px;
padding: 0;
}
label.field-label {
display: block;
font-size: 13px;
font-weight: bold;
color: var(--muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px 12px;
font-size: 15px;
font-family: inherit;
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 20px;
}
input[type="text"]:focus, input[type="email"]:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 2px var(--green-light);
}
.radio-grid, .checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.option {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.option:hover { border-color: var(--green); background: var(--green-light); }
.option input { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.option.checked { border-color: var(--green); background: var(--green-light); font-weight: bold; }
.hint {
font-size: 12px;
color: var(--muted);
margin-top: -4px;
margin-bottom: 12px;
}
.error-text {
color: var(--error);
font-size: 13px;
margin: -14px 0 16px 0;
display: none;
}
.error-text.show { display: block; }
button[type="submit"] {
width: 100%;
background: var(--green);
color: white;
border: none;
padding: 13px;
font-size: 16px;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
}
button[type="submit"]:hover { background: var(--green-dark); }
.confirmation {
display: none;
background: var(--green-light);
border: 1px solid var(--green);
border-radius: 8px;
padding: 20px 24px;
margin-top: 20px;
font-size: 14px;
line-height: 1.5;
}
.confirmation.show { display: block; }
.confirmation h3 { margin-top: 0; color: var(--green-dark); }
.excel-preview {
background: white;
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
font-family: "Courier New", monospace;
font-size: 12px;
white-space: pre;
overflow-x: auto;
margin: 10px 0;
}
footer {
text-align: center;
color: var(--muted);
font-size: 12px;
margin-top: 20px;
}
Tilmelding til hold
Dansk Agility Forening København – hundetræning i København
Tak for din tilmelding!
Din e-mail-app åbner nu med en udfyldt besked til nicolascp6@gmail.com - tryk send i din mail-app for at fuldføre tilmeldingen.
Indholdet i mailen er formateret sådan, at det kan markeres og indsættes direkte i et Excel-ark (kolonnerne adskilles automatisk):
Har du spørgsmål, er du velkommen til at skrive til dafkbh@gmail.com.
const niveauer = [
"Begynder",
"Sandkasse",
"Sandkasse Fortsætter",
"Let Øvet",
"Blandet Agility / Mix",
"Øvet"
];
const dage = ["Mandag", "Tirsdag", "Onsdag", "Torsdag"];
function buildRadioOptions() {
const grid = document.getElementById('niveauGrid');
grid.innerHTML = niveauer.map((n, i) => `
${n}
`).join('');
}
function buildCheckboxOptions() {
const grid = document.getElementById('dageGrid');
grid.innerHTML = dage.map(d => `
${d}
`).join('');
}
buildRadioOptions();
buildCheckboxOptions();
// Toggle "checked" style on the surrounding label
document.addEventListener('change', (e) => {
if (e.target.matches('input[type="radio"][name="niveau"]')) {
document.querySelectorAll('#niveauGrid .option').forEach(o => o.classList.remove('checked'));
e.target.closest('.option').classList.add('checked');
}
if (e.target.matches('input[type="checkbox"][name="dage"]')) {
e.target.closest('.option').classList.toggle('checked', e.target.checked);
}
});
const MODTAGER = 'nicolascp6@gmail.com';
function emailIsValid(value) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}
const form = document.getElementById('signupForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const navn = document.getElementById('navn').value.trim();
const email = document.getElementById('email').value.trim();
const hund = document.getElementById('hund').value.trim();
const race = document.getElementById('race').value.trim();
const niveau = form.querySelector('input[name="niveau"]:checked');
const valgteDage = Array.from(form.querySelectorAll('input[name="dage"]:checked')).map(d => d.value);
let valid = true;
document.getElementById('errNavn').classList.toggle('show', navn === '');
if (navn === '') valid = false;
const emailOk = emailIsValid(email);
document.getElementById('errEmail').classList.toggle('show', !emailOk);
if (!emailOk) valid = false;
document.getElementById('errHund').classList.toggle('show', hund === '');
if (hund === '') valid = false;
document.getElementById('errRace').classList.toggle('show', race === '');
if (race === '') valid = false;
document.getElementById('errNiveau').classList.toggle('show', !niveau);
if (!niveau) valid = false;
document.getElementById('errDage').classList.toggle('show', valgteDage.length === 0);
if (valgteDage.length === 0) valid = false;
if (!valid) return;
const niveauVal = niveau.value;
const dageStr = valgteDage.join(', ');
// Tabulator-separerede rækker: kan markeres og sættes direkte ind i Excel,
// hvor hver kolonne lander i sit eget felt.
const kolonner = ['Navn', 'Email', 'Hund', 'Race', 'Niveau', 'Ugedage'];
const vaerdier = [navn, email, hund, race, niveauVal, dageStr];
const excelTekst = kolonner.join('\t') + '\n' + vaerdier.join('\t');
const confirmation = document.getElementById('confirmation');
document.getElementById('confirmText').textContent =
`${navn} (${email}) og ${hund} (${race}) - niveau: ${niveauVal} - mulige dage: ${dageStr}.`;
document.getElementById('excelPreview').textContent = excelTekst;
confirmation.classList.add('show');
confirmation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
const subject = encodeURIComponent(`Tilmelding til hold - ${navn} / ${hund}`);
const body = encodeURIComponent(
`Ny tilmelding - klar til at sætte ind i Excel (marker de to linjer nedenfor og indsæt):\n\n` +
excelTekst + '\n\n' +
`----------------------\n` +
`Navn: ${navn}\n` +
`Email: ${email}\n` +
`Hund: ${hund}\n` +
`Race: ${race}\n` +
`Niveau: ${niveauVal}\n` +
`Mulige ugedage: ${dageStr}\n`
);
window.location.href = `mailto:${MODTAGER}?subject=${subject}&body=${body}`;
});