<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Takk for din innmelding - Lykkelige barn</title>
<style>
/* Generell stil basert på observasjoner fra lykkeligebarn.no */
body {
font-family: Arial, sans-serif; /* Antatt font */
line-height: 1.6;
color: #333;
background-color: #f9f9f9; /* Lys bakgrunn */
margin: 0;
padding: 20px;
text-align: center;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
}
h1 {
color: #0056b3; /* Bruker en mørkere blå for overskrift */
font-size: 2em;
margin-bottom: 20px;
text-align: center;
}
h2 {
font-size: 1.5em;
color: #333;
margin-top: 30px;
margin-bottom: 15px;
}
p {
margin-bottom: 15px;
}
/* Knappestiler */
.button-group {
display: flex;
flex-direction: column;
gap: 15px;
margin: 30px 0;
align-items: center;
}
.btn {
padding: 15px 30px;
border: none;
border-radius: 50px; /* Rund knapp */
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: background-color 0.3s ease;
width: 100%;
max-width: 350px;
}
.btn-vipps {
background-color: #ff6600; /* Oransje */
color: white;
box-shadow: 0 4px 6px rgba(255, 102, 0, 0.3);
}
.btn-vipps:hover {
background-color: #e65c00;
}
.btn-bank {
background-color: #007bff; /* Blå */
color: white;
box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
}
.btn-bank:hover {
background-color: #0056b3;
}
/* Nettbank-detaljer (Pop-up/Modal-lignende) */
.bank-details-container {
margin-top: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f4f4f4;
display: none; /* Skjult som standard */
text-align: left;
}
.bank-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dotted #ccc;
}
.bank-detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-weight: bold;
flex-basis: 30%;
}
.detail-value {
flex-basis: 50%;
font-family: monospace;
background-color: #eee;
padding: 3px 5px;
border-radius: 3px;
text-align: right;
}
.copy-btn {
background: none;
border: none;
color: #007bff;
cursor: pointer;
font-size: 0.9em;
margin-left: 10px;
padding: 5px;
transition: color 0.2s;
}
.copy-btn:hover {
color: #0056b3;
}
.copy-btn:active {
color: green;
}
.copy-group {
display: flex;
align-items: center;
flex-basis: 20%;
justify-content: flex-end;
}
/* E-post info seksjon */
.email-info {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.email-info h3 {
color: #cc0000; /* Rød for NB-viktig */
font-size: 1.2em;
}
.email-info ul {
list-style-type: none;
padding-left: 0;
}
.email-info li {
margin-bottom: 10px;
}
.domain-list {
font-weight: bold;
}
/* JavaScript for funksjonalitet */
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Tusen takk for din innmelding!</h1>
<p>Du er nå registrert som medlem av Lykkelige barn. For å fullføre innmeldingen og aktivere ditt medlemskap, ber vi deg betale medlemskontingenten.</p>
<h2>Fullfør innmeldingen ved å betale medlemskontingenten:</h2>
<div class="button-group">
<!-- Vipps/Kort Knapp -->
<a href="https://betal.vipps.no/13spie" class="btn btn-vipps" target="_blank">
Betal med Kort eller Vipps
</a>
<!-- Nettbank Knapp -->
<button id="toggleBankDetails" class="btn btn-bank">
Betal via nettbank
</button>
</div>
<!-- Nettbank Detaljer -->
<div id="bankDetails" class="bank-details-container">
<p>Bruk følgende informasjon for å betale medlemskontingenten via nettbank. Husk å inkludere KID-nummeret for korrekt registrering av betalingen.</p>
<div class="bank-detail-row">
<span class="detail-label">Kontonummer:</span>
<div class="copy-group">
<span id="accountNumber" class="detail-value">15039715314</span>
<button class="copy-btn" data-target="accountNumber" title="Kopier kontonummer">Kopier</button>
</div>
</div>
<div class="bank-detail-row">
<span class="detail-label">Beløp:</span>
<div class="copy-group">
<span id="amount" class="detail-value">450,-</span>
<button class="copy-btn" data-target="amount" title="Kopier beløp">Kopier</button>
</div>
</div>
<div class="bank-detail-row">
<span class="detail-label">KID:</span>
<div class="copy-group">
<!-- Dette feltet flettes inn dynamisk på den faktiske siden -->
<span id="kidNumber" class="detail-value">9999999999999</span>
<button class="copy-btn" data-target="kidNumber" title="Kopier KID-nummer">Kopier</button>
</div>
</div>
<p style="margin-top: 15px; font-size: 0.9em;">* KID-nummeret ovenfor er et eksempel. På den faktiske landingssiden vil ditt unike KID-nummer flettes inn automatisk.</p>
</div>
<!-- E-post Informasjon Seksjon -->
<div class="email-info">
<h2>Viktig informasjon om e-post:</h2>
<p>Du vil straks motta en bekreftelse på e-post. Hvis du ikke mottar velkomstmail fra oss, ber vi deg lese følgende:</p>
<h3>NB - viktig:</h3>
<p>Vi opplever dessverre tidvis at enkelte e-poster fra oss havner i søppelpost / spamfilter hos enkelte e-posttjenester (særlig outlook.com, hotmail.com o.l.).</p>
<p>Vi anbefaler at du setter opp domenene <span class="domain-list">lykkeligebarn.no</span>, <span class="domain-list">unicornis.no</span> og <span class="domain-list">easyquest.no</span> som trygge avsendere (hvitelistet) på din e-postkonto, slik at du sikrer at du mottar e-post fra oss i innboksen.</p>
<p>Sjekk hjelpefunksjonaliteten for epost-tjenesten du benytter for å få hjelp til hvordan dette konfigureres. Hvis du fortsatt ikke mottar e-post, ta kontakt på <a href="mailto:stig.kleven@lykkeligebarn.no">stig.kleven@lykkeligebarn.no</a>.</p>
<p style="font-size: 0.9em; color: #666;">
*) <span class="domain-list">unicornis.no</span> er et domenet som benyttes av vårt medlemssystem (en del info går ut derfra) og <span class="domain-list">easyquest.no</span> er verktøyet vi bruker for utsendelse av medlemsundersøkelser.
</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggleBankDetails');
const bankDetails = document.getElementById('bankDetails');
const copyButtons = document.querySelectorAll('.copy-btn');
// Funksjonalitet for å vise/skjule nettbankdetaljer
toggleButton.addEventListener('click', function() {
const isHidden = bankDetails.style.display === 'none' || bankDetails.style.display === '';
bankDetails.style.display = isHidden ? 'block' : 'none';
toggleButton.textContent = isHidden ? 'Skjul nettbankdetaljer' : 'Betal via nettbank';
});
// Funksjonalitet for å kopiere tekst
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const targetId = this.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
if (targetElement) {
// Bruk navigator.clipboard.writeText for moderne nettlesere
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(targetElement.textContent.trim()).then(() => {
const originalText = this.textContent;
this.textContent = 'Kopiert!';
setTimeout(() => {
this.textContent = originalText;
}, 1500);
}).catch(err => {
console.error('Kunne ikke kopiere tekst: ', err);
// Fallback for eldre nettlesere
fallbackCopyTextToClipboard(targetElement.textContent.trim(), this);
});
} else {
// Fallback for eldre nettlesere
fallbackCopyTextToClipboard(targetElement.textContent.trim(), this);
}
}
});
});
function fallbackCopyTextToClipboard(text, button) {
const textArea = document.createElement("textarea");
textArea.value = text;
// Unngå at tekstområdet vises
textArea.style.position = "fixed";
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
const originalText = button.textContent;
button.textContent = successful ? 'Kopiert!' : 'Feil!';
setTimeout(() => {
button.textContent = originalText;
}, 1500);
} catch (err) {
console.error('Fallback: Kunne ikke kopiere tekst', err);
}
document.body.removeChild(textArea);
}
});
</script>
</body>
</html>
