@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.trading-embed #tradingModalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
z-index: 9998;
justify-content: center;
align-items: center;
overflow: hidden;
}
.trading-embed .tradingModal {
position: relative;
max-width: 560px;
width: 90%;
max-height: 560px;
background: white;
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: modalFadeIn 0.4s ease;
}
.trading-embed #closeModal {
position: absolute;
top: 15px;
right: 15px;
background: white;
color: #999;
width: 36px;
height: 36px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.trading-embed .trading-form-container {
padding: 80px 30px 30px 30px;
height: 100%;
display: flex;
flex-direction: column;
}
.trading-embed .trading-form {
flex: 1;
overflow-y: auto;
}
.trading-embed .trading-form h2 {
text-align: center;
margin: 0 0 30px;
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #2ea352 0%, #1a8c3e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.trading-embed .progress-container {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
padding: 0 20px;
}
.trading-embed .progress-step {
width: 45px;
height: 45px;
background: #e0e0e0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #999;
font-size: 18px;
z-index: 2;
transition: all 0.4s ease;
}
.trading-embed .progress-step.active {
background: #2ea352;
color: white;
transform: scale(1.15);
box-shadow: 0 0 0 4px rgba(46, 163, 82, 0.3);
}
.trading-embed .progress-step.completed {
background: #27ae60;
color: white;
}
.trading-embed .progress-step.completed::after {
content: " ✓";
font-size: 20px;
}
.trading-embed .progress-line {
position: absolute;
top: 22px;
left: 45px;
height: 4px;
background: #e0e0e0;
width: calc(100% - 90px);
z-index: 1;
}
.trading-embed .progress-line-filled {
height: 100%;
background: linear-gradient(135deg, #2ea352 0%, #1a8c3e 100%);
width: 0;
transition: width 0.5s ease;
border-radius: 2px;
}
.trading-embed .step-indicator {
text-align: center;
margin-bottom: 20px;
color: #7f8c8d;
font-size: 14px;
font-weight: 500;
}
.trading-embed .form-step {
display: none;
animation: fadeIn 0.5s ease;
}
.trading-embed .form-step.active {
display: block;
}
.trading-embed label {
display: block;
margin-bottom: 12px;
font-weight: 600;
color: #2c3e50;
font-size: 16px;
}
.trading-embed input[type="email"],
.trading-embed textarea,
.trading-embed select {
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e8ed;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
background: #f8f9fa;
}
.trading-embed input:focus,
.trading-embed textarea:focus,
.trading-embed select:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.trading-embed textarea {
resize: vertical;
min-height: 120px;
}
.trading-embed .btn-group {
display: flex;
gap: 12px;
margin-top: 30px;
justify-content: space-between;
}
.trading-embed button {
padding: 14px 24px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
}
.trading-embed .btn-prev {
background: #95a5a6;
color: white;
}
.trading-embed .btn-next,
.trading-embed [type="submit"] {
background: linear-gradient(135deg, #2ea352 0%, #1a8c3e 100%);
color: white;
}
.trading-embed button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(46, 163, 82, 0.3);
}
.trading-embed .loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.98);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 20;
border-radius: 16px;
padding: 30px;
}
.trading-embed .spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #2ea352;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 25px;
}
.trading-embed .loading-text {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
margin: 0;
text-align: center;
}
@media (max-width: 480px) {
.trading-embed .trading-form-container {
padding: 20px;
}
.trading-embed .progress-step {
width: 35px;
height: 35px;
font-size: 14px;
}
.trading-embed .progress-container {
padding: 0 10px;
}
}
X
Bitte warten. Wir entscheiden, ob du als Tester in Frage kommst…
document.addEventListener("DOMContentLoaded", () => {
const overlay = document.getElementById("tradingModalOverlay");
const closeBtn = document.getElementById("closeModal");
const steps = document.querySelectorAll(".form-step");
const progressFill = document.getElementById("progressFill");
const stepText = document.getElementById("stepText");
const progressSteps = document.querySelectorAll(".progress-step");
const descriptions = [
"Schritt 1 von 4: Deine E-Mail Addresse",
"Schritt 2 von 4: Deine Vorerfahrung",
"Schritt 3 von 4: Deine Motivation",
"Schritt 4 von 4: Dein Zeitcommitment",
];
let currentStep = 0;
document.querySelectorAll(".openTradingModal").forEach((btn) => {
btn.addEventListener("click", () => {
overlay.style.display = "none";
void overlay.offsetHeight;
overlay.style.display = "flex";
document.body.style.overflow = "hidden";
});
});
closeBtn.addEventListener("click", () => {
overlay.style.display = "none";
document.body.style.overflow = "auto";
});
function updateProgress() {
progressSteps.forEach((s, i) => {
s.classList.toggle("active", i === currentStep);
s.classList.toggle("completed", i s.classList.toggle("active", i === n));
currentStep = n;
updateProgress();
const input = steps[n].querySelector("input, textarea, select");
if (input) {
input.focus();
if (input.tagName === "INPUT" || input.tagName === "TEXTAREA") {
input.setSelectionRange(input.value.length, input.value.length);
}
}
}
function validateStep(i) {
const inputs = steps[i].querySelectorAll(
"input[required], textarea[required], select[required]"
);
let valid = true;
inputs.forEach((inp) => {
if (!inp.value.trim()) {
inp.style.borderColor = "#e74c3c";
valid = false;
} else if (
inp.type === "email" &&
!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inp.value)
) {
inp.style.borderColor = "#e74c3c";
valid = false;
} else {
inp.style.borderColor = "#b2e6c1";
}
});
return valid;
}
window.nextStep = (n) => {
if (n {
if (n > 0) showStep(n - 1);
};
document
.getElementById("multiStepForm")
.addEventListener("submit", async (e) => {
e.preventDefault();
if (!validateStep(3)) return;
const data = {
email: document.getElementById("email").value.trim(),
experience: document.getElementById("experience").value.trim(),
motivation: document.getElementById("motivation").value.trim(),
time: document.getElementById("time").options[
document.getElementById("time").selectedIndex
].text,
};
document.querySelector(".trading-form").style.display = "none";
document.getElementById("loadingOverlay").style.display = "flex";
document.getElementById("closeModal").style.display = "none";
try {
await fetch(
"https://webhook.site/954a8af3-f914-461a-84eb-79b04e24bf4e",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
}
);
await new Promise((r) => setTimeout(r, 5000));
window.location.href =
"https://dertradingcode.de/bewerbung-tester-trading-code-kurs-erfolgreich/";
} catch (err) {
alert("Fehler beim Senden. Bitte erneut versuchen.");
document.getElementById("loadingOverlay").style.display = "none";
document.querySelector(".trading-form").style.display = "block";
document.getElementById("closeModal").style.display = "block";
}
});
document
.getElementById("multiStepForm")
.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
e.preventDefault();
const activeStepIndex = Array.from(steps).findIndex((step) =>
step.classList.contains("active")
);
if (activeStepIndex
step.querySelectorAll("input, textarea, select").forEach((input) => {
input.style.borderColor = "#e1e8ed";
})
);
}
}
window.addEventListener("beforeunload", resetModalAndForm);
});
