4154 lines
158 KiB
HTML
4154 lines
158 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KI-Fit Check | Future Now</title>
|
||
<style>
|
||
/* ===== RESET & BASE STYLES ===== */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: #0A0E1A;
|
||
color: #FFFFFF;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ===== DESIGN TOKENS ===== */
|
||
:root {
|
||
--bg-primary: #0A0E1A;
|
||
--bg-secondary: #0F1728;
|
||
--cyan: #00F5FF;
|
||
--purple: #A855F7;
|
||
--text-white: #FFFFFF;
|
||
--text-gray: #CBD5E1;
|
||
--space-4: 32px;
|
||
--space-6: 48px;
|
||
--space-8: 64px;
|
||
}
|
||
|
||
/* ===== BACKGROUND EFFECTS ===== */
|
||
.questionnaire-container {
|
||
min-height: 100vh;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.bg-orb {
|
||
position: fixed;
|
||
border-radius: 50%;
|
||
filter: blur(80px);
|
||
z-index: 0;
|
||
}
|
||
|
||
.bg-orb-cyan {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: rgba(0, 245, 255, 0.15);
|
||
top: -100px;
|
||
left: -100px;
|
||
}
|
||
|
||
.bg-orb-purple {
|
||
width: 500px;
|
||
height: 500px;
|
||
background: rgba(168, 85, 247, 0.1);
|
||
bottom: -150px;
|
||
right: -150px;
|
||
}
|
||
|
||
/* ===== HEADER ===== */
|
||
.questionnaire-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80px;
|
||
background: rgba(10, 14, 26, 0.95);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.header-content {
|
||
max-width: 1400px;
|
||
width: 100%;
|
||
padding: 0 48px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
padding: 10px 24px;
|
||
background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(168, 85, 247, 0.1));
|
||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||
border-radius: 50px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.language-switcher {
|
||
display: flex;
|
||
gap: 8px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.lang-btn {
|
||
padding: 6px 12px;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: #CBD5E1;
|
||
cursor: pointer;
|
||
transition: all 200ms;
|
||
min-width: 40px;
|
||
}
|
||
|
||
.lang-btn:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.lang-btn.active {
|
||
background: rgba(0, 245, 255, 0.1);
|
||
color: #00F5FF;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.exit-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 20px;
|
||
background: transparent;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #CBD5E1;
|
||
cursor: pointer;
|
||
transition: all 200ms;
|
||
}
|
||
|
||
.exit-btn:hover {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border-color: rgba(239, 68, 68, 0.3);
|
||
color: #ef4444;
|
||
}
|
||
|
||
/* ===== PROGRESS BAR ===== */
|
||
.progress-bar-container {
|
||
position: fixed;
|
||
top: 80px;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(15, 23, 40, 0.95);
|
||
backdrop-filter: blur(20px);
|
||
padding: 20px 48px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
z-index: 999;
|
||
}
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.progress-percent {
|
||
color: #00F5FF;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.progress-track {
|
||
height: 8px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #00F5FF, #A855F7);
|
||
border-radius: 4px;
|
||
transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
width: 0%;
|
||
}
|
||
|
||
.section-indicator {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #64748B;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* ===== SCREENS ===== */
|
||
.screen {
|
||
display: none;
|
||
min-height: 100vh;
|
||
padding: 200px 48px 80px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.screen.active {
|
||
display: flex;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* ===== WELCOME SCREEN ===== */
|
||
.welcome-content {
|
||
max-width: 700px;
|
||
text-align: center;
|
||
}
|
||
|
||
.welcome-badge {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
border-radius: 50px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 32px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.welcome-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 56px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 1.2;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.welcome-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 20px;
|
||
color: #CBD5E1;
|
||
line-height: 1.6;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.welcome-benefits {
|
||
display: flex;
|
||
gap: 32px;
|
||
justify-content: center;
|
||
margin-bottom: 48px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.benefit-icon {
|
||
color: #00F5FF;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.btn-start {
|
||
padding: 20px 64px;
|
||
background: linear-gradient(135deg, #00F5FF, #00BFD8);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.btn-start:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 48px rgba(0, 245, 255, 0.6);
|
||
}
|
||
|
||
.welcome-note {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #64748B;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ===== QUESTION CARD ===== */
|
||
.question-card {
|
||
max-width: 800px;
|
||
width: 100%;
|
||
padding: 64px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 32px;
|
||
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.question-header {
|
||
margin-bottom: 48px;
|
||
text-align: center;
|
||
}
|
||
|
||
.question-number {
|
||
display: inline-block;
|
||
padding: 6px 16px;
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||
border-radius: 20px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #00F5FF;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 24px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.question-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 1.3;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.question-hint {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
color: #64748B;
|
||
font-style: italic;
|
||
}
|
||
|
||
.answer-options {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.question-nav {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.btn-back, .btn-next {
|
||
flex: 1;
|
||
padding: 16px 32px;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
border: none;
|
||
}
|
||
|
||
.btn-back {
|
||
background: transparent;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.btn-back:hover:not(:disabled) {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.btn-back:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn-next {
|
||
background: linear-gradient(135deg, #00F5FF, #00BFD8);
|
||
color: #0A0E1A;
|
||
}
|
||
|
||
.btn-next:hover:not(:disabled) {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(0, 245, 255, 0.5);
|
||
}
|
||
|
||
.btn-next:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ===== RADIO CARDS ===== */
|
||
.radio-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.radio-card {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.radio-card input[type="radio"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.radio-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 24px 16px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
transition: all 300ms;
|
||
height: 100%;
|
||
}
|
||
|
||
.radio-icon {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.radio-label {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #CBD5E1;
|
||
text-align: center;
|
||
}
|
||
|
||
.radio-card:hover .radio-content {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-color: rgba(0, 245, 255, 0.3);
|
||
}
|
||
|
||
.radio-card input:checked ~ .radio-content {
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border-color: #00F5FF;
|
||
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
|
||
}
|
||
|
||
.radio-card input:checked ~ .radio-content .radio-label {
|
||
color: #00F5FF;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ===== TEXT INPUTS ===== */
|
||
.text-input, .email-input {
|
||
width: 100%;
|
||
padding: 16px 20px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.text-input::placeholder, .email-input::placeholder {
|
||
color: #64748B;
|
||
}
|
||
|
||
.text-input:focus, .email-input:focus {
|
||
outline: none;
|
||
border-color: #00F5FF;
|
||
box-shadow: 0 0 0 4px rgba(0, 245, 255, 0.1);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.input-note {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #64748B;
|
||
margin-top: 12px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ===== CHECKBOX CARDS ===== */
|
||
.checkbox-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.checkbox-card {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.checkbox-card input[type="checkbox"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
}
|
||
|
||
.checkbox-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
transition: all 300ms;
|
||
position: relative;
|
||
}
|
||
|
||
.checkbox-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.checkbox-label {
|
||
flex: 1;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.checkbox-check {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: transparent;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
transition: all 300ms;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.checkbox-card:hover .checkbox-content {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-color: rgba(0, 245, 255, 0.3);
|
||
}
|
||
|
||
.checkbox-card input:checked ~ .checkbox-content {
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border-color: #00F5FF;
|
||
}
|
||
|
||
.checkbox-card input:checked ~ .checkbox-content .checkbox-check {
|
||
background: #00F5FF;
|
||
border-color: #00F5FF;
|
||
color: #0A0E1A;
|
||
}
|
||
|
||
/* ===== SCALE OPTIONS ===== */
|
||
.scale-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.scale-option input {
|
||
display: none;
|
||
}
|
||
|
||
.scale-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 24px 16px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.scale-number {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #CBD5E1;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.scale-label {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #64748B;
|
||
text-align: center;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.scale-option:hover .scale-content {
|
||
border-color: rgba(0, 245, 255, 0.3);
|
||
}
|
||
|
||
.scale-option input:checked ~ .scale-content {
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border-color: #00F5FF;
|
||
}
|
||
|
||
.scale-option input:checked ~ .scale-content .scale-number {
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
color: #0A0E1A;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* ===== TEXT AREA ===== */
|
||
.text-area {
|
||
width: 100%;
|
||
padding: 16px 20px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
transition: all 300ms;
|
||
resize: vertical;
|
||
min-height: 120px;
|
||
}
|
||
|
||
.text-area:focus {
|
||
outline: none;
|
||
border-color: #00F5FF;
|
||
box-shadow: 0 0 0 4px rgba(0, 245, 255, 0.1);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.char-counter {
|
||
text-align: right;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 12px;
|
||
color: #64748B;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* ===== CONSENT SECTION ===== */
|
||
.consent-section {
|
||
padding: 32px;
|
||
background: rgba(0, 245, 255, 0.05);
|
||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.consent-checkbox {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
cursor: pointer;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.consent-checkbox input[type="checkbox"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
}
|
||
|
||
.checkbox-custom {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 6px;
|
||
flex-shrink: 0;
|
||
transition: all 300ms;
|
||
position: relative;
|
||
}
|
||
|
||
.consent-checkbox input:checked ~ .checkbox-custom {
|
||
background: #00F5FF;
|
||
border-color: #00F5FF;
|
||
}
|
||
|
||
.consent-checkbox input:checked ~ .checkbox-custom::after {
|
||
content: '✓';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #0A0E1A;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.consent-text {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 15px;
|
||
color: #CBD5E1;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.consent-links {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.consent-links a {
|
||
color: #00F5FF;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.consent-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.btn-submit {
|
||
background: linear-gradient(135deg, #10b981, #059669);
|
||
}
|
||
|
||
.spinner {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
border-top-color: #FFFFFF;
|
||
animation: spin 1s ease-in-out infinite;
|
||
margin-right: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* ===== RESULTS SCREEN ===== */
|
||
.results-screen {
|
||
padding: 120px 48px 80px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.results-header {
|
||
text-align: center;
|
||
margin-bottom: 64px;
|
||
}
|
||
|
||
.results-badge {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||
border-radius: 50px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #00F5FF;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 16px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.results-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 42px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 1.2;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.results-subtitle {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 20px;
|
||
color: #CBD5E1;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.results-user-email {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 24px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.email-icon {
|
||
color: #00F5FF;
|
||
}
|
||
|
||
/* Score Card */
|
||
.score-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 24px;
|
||
padding: 48px;
|
||
margin-bottom: 48px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.score-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #00F5FF, #A855F7);
|
||
}
|
||
|
||
.score-main {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.score-value {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 120px;
|
||
font-weight: bold;
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
line-height: 1;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.score-label {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 18px;
|
||
color: #CBD5E1;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.score-rating {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 20px;
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||
border-radius: 50px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #00F5FF;
|
||
}
|
||
|
||
.score-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 32px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-label {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #64748B;
|
||
margin-bottom: 8px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.stat-value {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-unit {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
/* Sections */
|
||
.results-section {
|
||
margin-bottom: 64px;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.section-icon {
|
||
color: #00F5FF;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.tools-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.tool-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.tool-card:hover {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-color: rgba(0, 245, 255, 0.3);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.tool-priority {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
border-radius: 20px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.priority-high {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
color: #ef4444;
|
||
}
|
||
|
||
.priority-medium {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
color: #f59e0b;
|
||
}
|
||
|
||
.tool-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tool-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: #00F5FF;
|
||
}
|
||
|
||
.tool-name {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.tool-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
margin-bottom: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tool-category {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 12px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 6px;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 12px;
|
||
color: #CBD5E1;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tool-price {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #00F5FF;
|
||
}
|
||
|
||
/* Recommendations */
|
||
.recommendations-list {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
}
|
||
|
||
.recommendation-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.recommendation-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.rec-number {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rec-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.rec-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.rec-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Tips */
|
||
.tip-card {
|
||
background: rgba(0, 245, 255, 0.05);
|
||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.tip-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #00F5FF;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tip-content {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Download Section */
|
||
.download-section {
|
||
text-align: center;
|
||
margin: 64px 0;
|
||
padding: 48px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.download-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.download-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
color: #CBD5E1;
|
||
margin-bottom: 32px;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.btn-download {
|
||
padding: 16px 48px;
|
||
background: linear-gradient(135deg, #00F5FF, #00BFD8);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.btn-download:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 48px rgba(0, 245, 255, 0.6);
|
||
}
|
||
|
||
.download-note {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #64748B;
|
||
margin-top: 16px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Products Section */
|
||
.products-section {
|
||
margin: 64px 0;
|
||
}
|
||
|
||
.products-header {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.products-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.products-subtitle {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 18px;
|
||
color: #CBD5E1;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.products-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 32px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.product-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 20px;
|
||
padding: 32px;
|
||
position: relative;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.product-card:hover {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-color: rgba(0, 245, 255, 0.3);
|
||
transform: translateY(-8px);
|
||
}
|
||
|
||
.product-badge {
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 6px 20px;
|
||
background: linear-gradient(135deg, #00F5FF, #A855F7);
|
||
border-radius: 20px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.product-header {
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.product-name {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.product-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.product-price {
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.price-original {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 16px;
|
||
color: #64748B;
|
||
text-decoration: line-through;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.price-current {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: #00F5FF;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.price-note {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 12px;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.product-features {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.feature-icon {
|
||
color: #00F5FF;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.btn-product {
|
||
width: 100%;
|
||
padding: 16px;
|
||
background: linear-gradient(135deg, #00F5FF, #00BFD8);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.btn-product:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(0, 245, 255, 0.5);
|
||
}
|
||
|
||
/* Bundle Section */
|
||
.bundle-section {
|
||
background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(168, 85, 247, 0.1));
|
||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||
border-radius: 24px;
|
||
padding: 48px;
|
||
text-align: center;
|
||
margin-bottom: 64px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bundle-badge {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
padding: 8px 16px;
|
||
background: #ef4444;
|
||
border-radius: 20px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
|
||
.bundle-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.bundle-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 18px;
|
||
color: #CBD5E1;
|
||
margin-bottom: 32px;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.bundle-price {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.bundle-save {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 20px;
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
border-radius: 20px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #ef4444;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.bundle-timer {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin: 32px 0;
|
||
}
|
||
|
||
.timer-digits {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
padding: 8px 16px;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
/* Guarantee */
|
||
.guarantee-section {
|
||
text-align: center;
|
||
margin: 64px 0;
|
||
}
|
||
|
||
.guarantee-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 32px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.guarantee-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.guarantee-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 16px;
|
||
font-size: 24px;
|
||
color: #00F5FF;
|
||
}
|
||
|
||
.guarantee-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.guarantee-text {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
/* Footer */
|
||
.results-footer {
|
||
text-align: center;
|
||
margin-top: 64px;
|
||
padding-top: 48px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.footer-cta {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.btn-cta {
|
||
padding: 16px 48px;
|
||
background: linear-gradient(135deg, #00F5FF, #00BFD8);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #0A0E1A;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
}
|
||
|
||
.btn-cta:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 48px rgba(0, 245, 255, 0.6);
|
||
}
|
||
|
||
/* ===== RESPONSIVE DESIGN ===== */
|
||
@media (max-width: 1024px) {
|
||
.score-stats {
|
||
grid-template-columns: 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.tools-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
}
|
||
|
||
.products-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.checkbox-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.header-content, .progress-bar-container, .screen, .results-screen {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
.results-screen {
|
||
padding-top: 100px;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.score-value {
|
||
font-size: 80px;
|
||
}
|
||
|
||
.results-title {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.bundle-section {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.tool-card, .product-card {
|
||
padding: 20px;
|
||
}
|
||
|
||
.welcome-title {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.question-card {
|
||
padding: 40px 32px;
|
||
}
|
||
|
||
.question-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.question-nav, .success-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.radio-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.scale-options {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.header-content, .progress-bar-container, .screen, .results-screen {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.results-screen {
|
||
padding-top: 80px;
|
||
padding-bottom: 24px;
|
||
}
|
||
|
||
.score-card {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.score-value {
|
||
font-size: 60px;
|
||
}
|
||
|
||
.results-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.download-section {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.bundle-section {
|
||
padding: 24px 16px;
|
||
}
|
||
|
||
.bundle-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.screen {
|
||
padding-top: 160px;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.question-card, .success-card {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.question-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.welcome-title {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.header-right {
|
||
gap: 8px;
|
||
}
|
||
|
||
.lang-btn {
|
||
padding: 6px 8px;
|
||
font-size: 11px;
|
||
min-width: 35px;
|
||
}
|
||
|
||
.exit-btn span {
|
||
display: none;
|
||
}
|
||
|
||
.exit-btn {
|
||
padding: 8px 12px;
|
||
}
|
||
}
|
||
|
||
/* ===== HIDDEN CLASS ===== */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== SUCCESS SCREEN ===== */
|
||
.success-screen {
|
||
padding: 200px 48px 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.success-card {
|
||
max-width: 700px;
|
||
width: 100%;
|
||
padding: 64px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 32px;
|
||
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
|
||
text-align: center;
|
||
}
|
||
|
||
.success-animation {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.checkmark-circle {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 0 auto 24px;
|
||
}
|
||
|
||
.checkmark {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.checkmark-circle-bg {
|
||
fill: rgba(0, 245, 255, 0.1);
|
||
stroke: #00F5FF;
|
||
stroke-width: 3;
|
||
}
|
||
|
||
.checkmark-check {
|
||
fill: none;
|
||
stroke: #00F5FF;
|
||
stroke-width: 4;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
stroke-dasharray: 100;
|
||
stroke-dashoffset: 100;
|
||
animation: drawCheckmark 0.8s ease-in-out 0.5s forwards;
|
||
}
|
||
|
||
@keyframes drawCheckmark {
|
||
to {
|
||
stroke-dashoffset: 0;
|
||
}
|
||
}
|
||
|
||
.success-title {
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.success-description {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 18px;
|
||
color: #CBD5E1;
|
||
line-height: 1.6;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.success-info {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 20px;
|
||
padding: 24px;
|
||
margin: 32px 0;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(0, 245, 255, 0.1);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
color: #00F5FF;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-text {
|
||
text-align: left;
|
||
flex: 1;
|
||
}
|
||
|
||
.success-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
margin: 32px 0;
|
||
}
|
||
|
||
.btn-primary, .btn-secondary {
|
||
padding: 16px 32px;
|
||
border-radius: 12px;
|
||
font-family: 'Space Grotesk', monospace;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
border: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #00F5FF, #00BFD8);
|
||
color: #0A0E1A;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(0, 245, 255, 0.5);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.btn-home {
|
||
background: transparent;
|
||
border: none;
|
||
color: #64748B;
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 300ms;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.btn-home:hover {
|
||
color: #CBD5E1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="questionnaire-container">
|
||
<!-- Background Effects -->
|
||
<div class="bg-orb bg-orb-cyan"></div>
|
||
<div class="bg-orb bg-orb-purple"></div>
|
||
|
||
<!-- Header -->
|
||
<header class="questionnaire-header">
|
||
<div class="header-content">
|
||
<a href="#" class="logo-link">
|
||
<div class="logo">Future Now</div>
|
||
</a>
|
||
<div class="header-right">
|
||
<div class="language-switcher">
|
||
<button class="lang-btn active" data-lang="de" title="Deutsch">🇩🇪</button>
|
||
<button class="lang-btn" data-lang="en" title="English">🇬🇧</button>
|
||
<button class="lang-btn" data-lang="tr" title="Türkçe">🇹🇷</button>
|
||
</div>
|
||
<button class="exit-btn" onclick="confirmExit()">
|
||
<span>Abbrechen</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Progress Bar -->
|
||
<div class="progress-bar-container hidden">
|
||
<div class="progress-info">
|
||
<span class="progress-text">Frage <span id="current-q">1</span> von 15</span>
|
||
<span class="progress-percent" id="progress-pct">7%</span>
|
||
</div>
|
||
<div class="progress-track">
|
||
<div class="progress-fill" id="progress-fill"></div>
|
||
</div>
|
||
<div class="section-indicator" id="section-name">A. Unternehmen & Ziele</div>
|
||
</div>
|
||
|
||
<!-- Welcome Screen -->
|
||
<div class="screen welcome-screen active" id="welcome-screen">
|
||
<div class="welcome-content">
|
||
<div class="welcome-badge">KI-FIT CHECK</div>
|
||
<h1 class="welcome-title">
|
||
Ihre <span class="gradient-text">3-Minuten</span> KI-Analyse
|
||
</h1>
|
||
<p class="welcome-description">
|
||
Beantworten Sie nur <strong>15 kurze Fragen</strong> zu Ihrem Unternehmen.
|
||
Unsere KI analysiert Ihre Antworten und erstellt einen personalisierten
|
||
Fahrplan zur Automatisierung mit konkreten Umsetzungsempfehlungen.
|
||
</p>
|
||
<div class="welcome-benefits">
|
||
<div class="benefit-item">
|
||
<span class="benefit-icon">✓</span>
|
||
<span>100% kostenlos</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span class="benefit-icon">⏱️</span>
|
||
<span>Nur 3 Minuten</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span class="benefit-icon">📧</span>
|
||
<span>PDF-Report per E-Mail</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-start" onclick="startQuestionnaire()">
|
||
Jetzt starten →
|
||
</button>
|
||
<p class="welcome-note">
|
||
Ihre Daten werden vertraulich behandelt und DSGVO-konform verarbeitet.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 1: Company Size -->
|
||
<div class="screen question-screen" id="question-1" data-question="1">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 1 von 15</div>
|
||
<h2 class="question-title">Wie groß ist Ihr Unternehmen?</h2>
|
||
<p class="question-hint">Klicken Sie auf eine Option - es geht automatisch weiter</p>
|
||
</div>
|
||
<div class="answer-options radio-grid">
|
||
<label class="radio-card">
|
||
<input type="radio" name="q1" value="1-person" onchange="autoAdvance(1)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">👤</span>
|
||
<span class="radio-label">1 Person (Einzelunternehmer)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q1" value="2-5" onchange="autoAdvance(1)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">👥</span>
|
||
<span class="radio-label">2–5 Mitarbeiter (Kleinstunternehmen)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q1" value="6-20" onchange="autoAdvance(1)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">👨👩👧👦</span>
|
||
<span class="radio-label">6–20 Mitarbeiter (Kleinunternehmen)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q1" value="21-50" onchange="autoAdvance(1)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🏢</span>
|
||
<span class="radio-label">21–50 Mitarbeiter (Mittelstand)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q1" value="50plus" onchange="autoAdvance(1)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🏭</span>
|
||
<span class="radio-label">50+ Mitarbeiter (Großunternehmen)</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()" disabled>
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 2: Industry -->
|
||
<div class="screen question-screen" id="question-2" data-question="2">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 2 von 15</div>
|
||
<h2 class="question-title">In welcher Branche sind Sie tätig?</h2>
|
||
<p class="question-hint">Beschreiben Sie kurz Ihre Haupttätigkeit</p>
|
||
</div>
|
||
<div class="answer-options">
|
||
<input type="text" class="text-input" placeholder="z.B. Marketing-Agentur, E-Commerce Shop, IT-Beratung, Handwerksbetrieb, Gesundheitsdienstleistung" oninput="validateTextInput(2)" maxlength="100" />
|
||
<p class="input-note">Dies hilft uns, branchenspezifische Empfehlungen zu geben.</p>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 3: Business Model -->
|
||
<div class="screen question-screen" id="question-3" data-question="3">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 3 von 15</div>
|
||
<h2 class="question-title">Welches Geschäftsmodell nutzen Sie hauptsächlich?</h2>
|
||
<p class="question-hint">Wählen Sie alle zutreffenden Optionen</p>
|
||
</div>
|
||
<div class="answer-options checkbox-grid">
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q3" value="dienstleistung" onchange="validateCheckboxes(3)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">💼</span>
|
||
<span class="checkbox-label">Dienstleistung (Beratung, Service, Support)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q3" value="handel" onchange="validateCheckboxes(3)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">🛒</span>
|
||
<span class="checkbox-label">Handel (Einzelhandel, Großhandel, Vertrieb)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q3" value="coaching" onchange="validateCheckboxes(3)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">💡</span>
|
||
<span class="checkbox-label">Coaching / Beratung / Training</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q3" value="agentur" onchange="validateCheckboxes(3)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📢</span>
|
||
<span class="checkbox-label">Agentur (Marketing, Werbung, Medien)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q3" value="ecommerce" onchange="validateCheckboxes(3)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">🖥️</span>
|
||
<span class="checkbox-label">E-Commerce / Online-Shop</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q3" value="produktion" onchange="validateCheckboxes(3)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">🏭</span>
|
||
<span class="checkbox-label">Produktion / Herstellung</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 4: Primary Goal -->
|
||
<div class="screen question-screen" id="question-4" data-question="4">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 4 von 15</div>
|
||
<h2 class="question-title">Was ist Ihr primäres Ziel mit KI?</h2>
|
||
<p class="question-hint">Was möchten Sie durch KI erreichen?</p>
|
||
</div>
|
||
<div class="answer-options radio-grid">
|
||
<label class="radio-card">
|
||
<input type="radio" name="q4" value="zeit-sparen" onchange="autoAdvance(4)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">⏰</span>
|
||
<span class="radio-label">Zeit sparen bei repetitiven Aufgaben</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q4" value="kosten-reduzieren" onchange="autoAdvance(4)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">💰</span>
|
||
<span class="radio-label">Kosten reduzieren durch Automatisierung</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q4" value="wachstum" onchange="autoAdvance(4)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">📈</span>
|
||
<span class="radio-label">Wachstum beschleunigen (Umsatz steigern)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q4" value="qualität" onchange="autoAdvance(4)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">⭐</span>
|
||
<span class="radio-label">Qualität verbessern (Produkte/Dienstleistungen)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q4" value="innovation" onchange="autoAdvance(4)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🚀</span>
|
||
<span class="radio-label">Innovation vorantreiben (neue Produkte)</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 5: AI Importance -->
|
||
<div class="screen question-screen" id="question-5" data-question="5">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 5 von 15</div>
|
||
<h2 class="question-title">Wie wichtig ist KI für Ihr Business in den nächsten 12 Monaten?</h2>
|
||
<p class="question-hint">1 = nicht wichtig, 5 = extrem wichtig</p>
|
||
</div>
|
||
<div class="answer-options scale-options">
|
||
<label class="scale-option">
|
||
<input type="radio" name="q5" value="1" onchange="autoAdvance(5)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">1</span>
|
||
<span class="scale-label">Nicht wichtig<br>(keine Pläne)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q5" value="2" onchange="autoAdvance(5)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">2</span>
|
||
<span class="scale-label">Eher unwichtig<br>(geringe Priorität)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q5" value="3" onchange="autoAdvance(5)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">3</span>
|
||
<span class="scale-label">Neutral<br>(interessiert, aber unklar)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q5" value="4" onchange="autoAdvance(5)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">4</span>
|
||
<span class="scale-label">Wichtig<br>(aktive Prüfung)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q5" value="5" onchange="autoAdvance(5)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">5</span>
|
||
<span class="scale-label">Sehr wichtig<br>(strategische Priorität)</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 6: Time-consuming Tasks -->
|
||
<div class="screen question-screen" id="question-6" data-question="6">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 6 von 15</div>
|
||
<h2 class="question-title">Welche Aufgaben nehmen in Ihrem Unternehmen viel Zeit in Anspruch?</h2>
|
||
<p class="question-hint">Wählen Sie alle zutreffenden Optionen</p>
|
||
</div>
|
||
<div class="answer-options checkbox-grid">
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q6" value="kundenkommunikation" onchange="validateCheckboxes(6)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📞</span>
|
||
<span class="checkbox-label">Kundenkommunikation (E-Mails, Anfragen, Support)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q6" value="administrative" onchange="validateCheckboxes(6)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📋</span>
|
||
<span class="checkbox-label">Administrative Aufgaben (Dokumentation, Berichte)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q6" value="marketing" onchange="validateCheckboxes(6)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📢</span>
|
||
<span class="checkbox-label">Marketing/Content (Social Media, Blog, Newsletter)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q6" value="buchhaltung" onchange="validateCheckboxes(6)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">💰</span>
|
||
<span class="checkbox-label">Buchhaltung/Finanzen (Rechnungen, Abrechnungen)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q6" value="planung" onchange="validateCheckboxes(6)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📅</span>
|
||
<span class="checkbox-label">Planung/Organisation (Termine, Projekte, Ressourcen)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q6" value="daten" onchange="validateCheckboxes(6)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📊</span>
|
||
<span class="checkbox-label">Datenanalyse (Auswertungen, Reporting, KPIs)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 7: Current Automation -->
|
||
<div class="screen question-screen" id="question-7" data-question="7">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 7 von 15</div>
|
||
<h2 class="question-title">Wie automatisieren Sie aktuell Prozesse in Ihrem Unternehmen?</h2>
|
||
<p class="question-hint">Beschreiben Sie kurz Ihre aktuelle Automatisierung</p>
|
||
</div>
|
||
<div class="answer-options">
|
||
<textarea class="text-area" placeholder="z.B. 'Wir nutzen keine Automatisierung' oder 'Wir verwenden CRM-System, E-Mail-Marketing Tool, Buchhaltungssoftware, Projektmanagement-Tool, ...'" oninput="validateTextArea(7)" maxlength="500"></textarea>
|
||
<div class="char-counter"><span>0</span>/500 Zeichen</div>
|
||
<p class="input-note">Je detaillierter, desto besser können wir passende Lösungen empfehlen.</p>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 8: Weekly Repetitive Work Hours -->
|
||
<div class="screen question-screen" id="question-8" data-question="8">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 8 von 15</div>
|
||
<h2 class="question-title">Wie viele Stunden pro Woche werden für repetitive, manuelle Aufgaben aufgewendet?</h2>
|
||
<p class="question-hint">Schätzen Sie die Zeit für sich wiederholende Aufgaben</p>
|
||
</div>
|
||
<div class="answer-options radio-grid">
|
||
<label class="radio-card">
|
||
<input type="radio" name="q8" value="unter-5h" onchange="autoAdvance(8)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">⏱️</span>
|
||
<span class="radio-label">Unter 5 Stunden<br>(geringes Automatisierungspotenzial)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q8" value="5-10h" onchange="autoAdvance(8)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🕐</span>
|
||
<span class="radio-label">5–10 Stunden<br>(moderates Potenzial)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q8" value="11-15h" onchange="autoAdvance(8)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🕑</span>
|
||
<span class="radio-label">11–15 Stunden<br>(gutes Potenzial)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q8" value="16-20h" onchange="autoAdvance(8)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🕒</span>
|
||
<span class="radio-label">16–20 Stunden<br>(hohes Potenzial)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q8" value="20plus" onchange="autoAdvance(8)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">⌛</span>
|
||
<span class="radio-label">20+ Stunden<br>(sehr hohes Potenzial)</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 9: Budget for AI Tools -->
|
||
<div class="screen question-screen" id="question-9" data-question="9">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 9 von 15</div>
|
||
<h2 class="question-title">Welches Budget planen Sie für KI-Tools ein?</h2>
|
||
<p class="question-hint">Monatliche Investitionsbereitschaft für KI-Lösungen</p>
|
||
</div>
|
||
<div class="answer-options radio-grid">
|
||
<label class="radio-card">
|
||
<input type="radio" name="q9" value="unter-50" onchange="autoAdvance(9)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">💸</span>
|
||
<span class="radio-label">Unter 50€<br>(erste Testphase)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q9" value="50-100" onchange="autoAdvance(9)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">💶</span>
|
||
<span class="radio-label">50–100€<br>(kleine Tools/Lösungen)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q9" value="100-300" onchange="autoAdvance(9)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">💵</span>
|
||
<span class="radio-label">100–300€<br>(mehrere Tools/Integration)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q9" value="300-500" onchange="autoAdvance(9)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">💰</span>
|
||
<span class="radio-label">300–500€<br>(komplexe Lösungen)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q9" value="500plus" onchange="autoAdvance(9)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🏦</span>
|
||
<span class="radio-label">500€+<br>(Enterprise-Lösungen)</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 10: Technical Affinity -->
|
||
<div class="screen question-screen" id="question-10" data-question="10">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 10 von 15</div>
|
||
<h2 class="question-title">Wie schätzen Sie die technische Affinität in Ihrem Team ein?</h2>
|
||
<p class="question-hint">Wie leicht fällt die Bedienung neuer Software/Tools?</p>
|
||
</div>
|
||
<div class="answer-options scale-options">
|
||
<label class="scale-option">
|
||
<input type="radio" name="q10" value="1" onchange="autoAdvance(10)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">1</span>
|
||
<span class="scale-label">Sehr schwer<br>(große Hürden)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q10" value="2" onchange="autoAdvance(10)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">2</span>
|
||
<span class="scale-label">Eher schwer<br>(Unterstützung nötig)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q10" value="3" onchange="autoAdvance(10)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">3</span>
|
||
<span class="scale-label">Neutral<br>(durchschnittliche Skills)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q10" value="4" onchange="autoAdvance(10)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">4</span>
|
||
<span class="scale-label">Einfach<br>(gute Adaptionsfähigkeit)</span>
|
||
</span>
|
||
</label>
|
||
<label class="scale-option">
|
||
<input type="radio" name="q10" value="5" onchange="autoAdvance(10)" />
|
||
<span class="scale-content">
|
||
<span class="scale-number">5</span>
|
||
<span class="scale-label">Sehr einfach<br>(technikaffines Team)</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 11: Existing AI Tools -->
|
||
<div class="screen question-screen" id="question-11" data-question="11">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 11 von 15</div>
|
||
<h2 class="question-title">Welche KI-Tools nutzen Sie bereits?</h2>
|
||
<p class="question-hint">Wählen Sie alle zutreffenden Optionen</p>
|
||
</div>
|
||
<div class="answer-options checkbox-grid">
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q11" value="chatgpt" onchange="validateCheckboxes(11)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">💬</span>
|
||
<span class="checkbox-label">ChatGPT / andere Sprach-KIs</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q11" value="midjourney" onchange="validateCheckboxes(11)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">🎨</span>
|
||
<span class="checkbox-label">Bildgenerierung (Midjourney, DALL-E, Stable Diffusion)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q11" value="crm" onchange="validateCheckboxes(11)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📊</span>
|
||
<span class="checkbox-label">KI-CRM Tools (mit KI-Funktionen)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q11" value="marketing" onchange="validateCheckboxes(11)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">📈</span>
|
||
<span class="checkbox-label">KI-Marketing Tools (Content, SEO, Ads)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q11" value="automatisierung" onchange="validateCheckboxes(11)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">⚙️</span>
|
||
<span class="checkbox-label">Automatisierungs-Tools (Zapier, Make, etc.)</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
<label class="checkbox-card">
|
||
<input type="checkbox" name="q11" value="keine" onchange="validateCheckboxes(11)" />
|
||
<span class="checkbox-content">
|
||
<span class="checkbox-icon">❌</span>
|
||
<span class="checkbox-label">Keine KI-Tools im Einsatz</span>
|
||
<span class="checkbox-check">✓</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 12: Biggest Challenge -->
|
||
<div class="screen question-screen" id="question-12" data-question="12">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 12 von 15</div>
|
||
<h2 class="question-title">Was ist Ihre größte Herausforderung bei der KI-Einführung?</h2>
|
||
<p class="question-hint">Wählen Sie die Hauptherausforderung</p>
|
||
</div>
|
||
<div class="answer-options radio-grid">
|
||
<label class="radio-card">
|
||
<input type="radio" name="q12" value="zeit" onchange="autoAdvance(12)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">⏰</span>
|
||
<span class="radio-label">Zeitmangel (für Einarbeitung/Implementierung)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q12" value="wissen" onchange="autoAdvance(12)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🎓</span>
|
||
<span class="radio-label">Fehlendes Wissen / Expertise im Team</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q12" value="kosten" onchange="autoAdvance(12)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">💰</span>
|
||
<span class="radio-label">Kosten (Budget für Tools/Implementierung)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q12" value="integration" onchange="autoAdvance(12)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🔌</span>
|
||
<span class="radio-label">Integration in bestehende Prozesse/Systeme</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q12" value="nutzen" onchange="autoAdvance(12)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">❓</span>
|
||
<span class="radio-label">Unklarheit über konkreten Nutzen/ROI</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 13: Implementation Timeline -->
|
||
<div class="screen question-screen" id="question-13" data-question="13">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 13 von 15</div>
|
||
<h2 class="question-title">Wann planen Sie KI-Projekte umzusetzen?</h2>
|
||
<p class="question-hint">Zeitrahmen für geplante KI-Implementierungen</p>
|
||
</div>
|
||
<div class="answer-options radio-grid">
|
||
<label class="radio-card">
|
||
<input type="radio" name="q13" value="sofort" onchange="autoAdvance(13)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">⚡</span>
|
||
<span class="radio-label">Sofort (innerhalb 1 Monat)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q13" value="kurz" onchange="autoAdvance(13)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">📅</span>
|
||
<span class="radio-label">Kurzfristig (1-3 Monate)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q13" value="mittel" onchange="autoAdvance(13)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🗓️</span>
|
||
<span class="radio-label">Mittelfristig (3-6 Monate)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q13" value="lang" onchange="autoAdvance(13)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">📆</span>
|
||
<span class="radio-label">Langfristig (6+ Monate)</span>
|
||
</span>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="q13" value="keine" onchange="autoAdvance(13)" />
|
||
<span class="radio-content">
|
||
<span class="radio-icon">🚫</span>
|
||
<span class="radio-label">Keine konkreten Pläne</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Beantwortet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 14: Email for Report -->
|
||
<div class="screen question-screen" id="question-14" data-question="14">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 14 von 15</div>
|
||
<h2 class="question-title">Ihre E-Mail für den persönlichen KI-Fit Report</h2>
|
||
<p class="question-hint">Wir senden Ihnen den detaillierten Report als PDF</p>
|
||
</div>
|
||
<div class="answer-options">
|
||
<input type="email" class="email-input" placeholder="ihre@email.de" oninput="validateEmail(14)" />
|
||
<p class="input-note">Ihre E-Mail wird nur für den Versand des KI-Fit Reports verwendet. Kein Spam. Sie können den Versand jederzeit abbestellen.</p>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next" onclick="nextQuestion()" disabled>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QUESTION 15: Consent -->
|
||
<div class="screen question-screen" id="question-15" data-question="15">
|
||
<div class="question-card">
|
||
<div class="question-header">
|
||
<div class="question-number">Frage 15 von 15</div>
|
||
<h2 class="question-title">Datenschutz & Einwilligung</h2>
|
||
<p class="question-hint">Bitte bestätigen Sie Ihre Einwilligung</p>
|
||
</div>
|
||
<div class="answer-options">
|
||
<div class="consent-section">
|
||
<label class="consent-checkbox">
|
||
<input type="checkbox" name="consent" onchange="validateConsent(15)" />
|
||
<span class="checkbox-custom"></span>
|
||
<span class="consent-text">
|
||
Ich stimme zu, dass meine Daten gemäß der
|
||
<a href="#" onclick="return false;">Datenschutzerklärung</a> verarbeitet werden, um mir den
|
||
personalisierten KI-Fit Report per E-Mail zuzusenden. Ich kann
|
||
meine Einwilligung jederzeit widerrufen.
|
||
</span>
|
||
</label>
|
||
<div class="consent-links">
|
||
<a href="#" onclick="return false;">Datenschutzerklärung</a> • <a href="#" onclick="return false;">AGB</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="question-nav">
|
||
<button class="btn-back" onclick="previousQuestion()">
|
||
← Zurück
|
||
</button>
|
||
<button class="btn-next btn-submit" onclick="submitQuestionnaire()" disabled>
|
||
Report anfordern →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Screen -->
|
||
<div class="screen success-screen" id="success-screen">
|
||
<div class="success-card">
|
||
<div class="success-animation">
|
||
<div class="checkmark-circle">
|
||
<svg class="checkmark" viewBox="0 0 52 52">
|
||
<circle class="checkmark-circle-bg" cx="26" cy="26" r="25"/>
|
||
<path class="checkmark-check" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<h1 class="success-title">Report wird erstellt! ✅</h1>
|
||
<p class="success-description">
|
||
Vielen Dank! Dein persönlicher KI-Fit Report wird gerade erstellt
|
||
und an <strong id="user-email"></strong> gesendet.
|
||
</p>
|
||
<div class="success-info">
|
||
<div class="info-item">
|
||
<div class="info-icon">📧</div>
|
||
<div class="info-text">
|
||
<strong>E-Mail unterwegs</strong><br>
|
||
Sollte innerhalb von 3 Minuten ankommen
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-icon">📊</div>
|
||
<div class="info-text">
|
||
<strong>Dein Score: <span id="final-score">72</span>/100</strong><br>
|
||
Bewertung: <span id="score-rating">Hoch</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-icon">📄</div>
|
||
<div class="info-text">
|
||
<strong>PDF-Report enthalten</strong><br>
|
||
Mit detaillierten Handlungsempfehlungen
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="success-actions">
|
||
<button class="btn-primary" onclick="window.location.href='/ki-website'">
|
||
🚀 Jetzt KI-Pakete ansehen
|
||
</button>
|
||
<button class="btn-secondary" onclick="window.location.href='/kontakt'">
|
||
📞 Kostenlose Beratung buchen
|
||
</button>
|
||
</div>
|
||
<button class="btn-home" onclick="window.location.href='/'">
|
||
← Zurück zur Startseite
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Results Screen -->
|
||
<div class="screen" id="results-screen">
|
||
<div class="results-screen">
|
||
<!-- Header -->
|
||
<div class="results-header">
|
||
<div class="results-badge">Analyse abgeschlossen</div>
|
||
<h1 class="results-title">Ihr persönlicher KI-Fit Report</h1>
|
||
<p class="results-subtitle">für Ihr Unternehmen</p>
|
||
<div class="results-user-email" id="results-email">
|
||
<span class="email-icon">📧</span>
|
||
<span id="user-email-display">ihre@email.de</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Score Card -->
|
||
<div class="score-card">
|
||
<div class="score-main">
|
||
<div class="score-value" id="score-value">72%</div>
|
||
<div class="score-label">KI-Readiness Score</div>
|
||
<div class="score-rating" id="score-rating">
|
||
<span>⭐</span>
|
||
<span>Hoch</span>
|
||
</div>
|
||
</div>
|
||
<div class="score-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-label">Einsparpotenzial</div>
|
||
<div class="stat-value" id="time-saving">173h</div>
|
||
<div class="stat-unit">Zeit pro Woche</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="cost-saving">3000€</div>
|
||
<div class="stat-unit">Kosten pro Monat</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="quick-wins">8</div>
|
||
<div class="stat-unit">Quick Wins</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tools Section -->
|
||
<div class="results-section">
|
||
<h2 class="section-title">
|
||
<span class="section-icon">🛠️</span>
|
||
Empfohlene Tools für Ihr Unternehmen
|
||
</h2>
|
||
<p style="color: #CBD5E1; margin-bottom: 24px; font-family: 'Inter', sans-serif;">
|
||
Basierend auf Ihren Antworten haben wir die passenden Tools für Ihre Bedürfnisse ausgewählt:
|
||
</p>
|
||
|
||
<div class="tools-grid" id="tools-grid">
|
||
<!-- Tools will be populated by JavaScript -->
|
||
</div>
|
||
|
||
<div class="tip-card">
|
||
<div class="tip-title">💡 Implementierungs-Tipp</div>
|
||
<div class="tip-content">
|
||
Starten Sie mit den Tools hoher Priorität und implementieren Sie diese schrittweise.
|
||
Die meisten Tools bieten kostenlose Testphasen - nutzen Sie diese, um die beste Lösung für Ihr Unternehmen zu finden.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recommendations -->
|
||
<div class="results-section">
|
||
<h2 class="section-title">
|
||
<span class="section-icon">🎯</span>
|
||
Maßgeschneiderte Empfehlungen
|
||
</h2>
|
||
<div class="recommendations-list" id="recommendations-list">
|
||
<!-- Recommendations will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Download Section -->
|
||
<div class="download-section">
|
||
<h2 class="download-title">Vollständigen Report herunterladen</h2>
|
||
<p class="download-description">
|
||
Erhalten Sie Ihren detaillierten KI-Fit Report als PDF mit allen Analysen und Handlungsempfehlungen.
|
||
</p>
|
||
<button class="btn-download" onclick="downloadReport()">
|
||
📄 PDF Report herunterladen
|
||
</button>
|
||
<p class="download-note">
|
||
Falls der PDF-Download nicht funktioniert, wird automatisch eine Textversion erstellt.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Products Section -->
|
||
<div class="products-section">
|
||
<div class="products-header">
|
||
<h2 class="products-title">🚀 Jetzt durchstarten mit unserem KI-Umsetzungspaket</h2>
|
||
<p class="products-subtitle">
|
||
Basierend auf Ihrer Analyse haben wir die perfekten Lösungen für Ihren KI-Einstieg zusammengestellt
|
||
</p>
|
||
</div>
|
||
|
||
<div class="products-grid">
|
||
<!-- Product 1 -->
|
||
<div class="product-card">
|
||
<div class="product-header">
|
||
<h3 class="product-name">KI-Umsetzungsplan</h3>
|
||
<p class="product-description">Ihr persönlicher 30-Tage-Fahrplan zur KI-Implementierung</p>
|
||
</div>
|
||
<div class="product-price">
|
||
<div class="price-original">197€</div>
|
||
<div class="price-current">97€</div>
|
||
<div class="price-note">50% Rabatt • Einmalzahlung • Sofortiger Zugang</div>
|
||
</div>
|
||
<div class="product-features">
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Personalisierter 30-Tage-Aktionsplan</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Schritt-für-Schritt Anleitungen</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Tool-Empfehlungen mit Setup-Guides</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Automatisierungs-Templates</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>ROI-Tracking Vorlagen</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-product" onclick="selectPlan('basic')">
|
||
Jetzt sichern
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Product 2 -->
|
||
<div class="product-card">
|
||
<div class="product-badge">BESTSELLER</div>
|
||
<div class="product-header">
|
||
<h3 class="product-name">KI-Kompass</h3>
|
||
<p class="product-description">Komplettes KI-Toolkit mit lebenslangem Zugang</p>
|
||
</div>
|
||
<div class="product-price">
|
||
<div class="price-original">397€</div>
|
||
<div class="price-current">197€</div>
|
||
<div class="price-note">50% Rabatt • Einmalzahlung • Lebenslanger Zugang</div>
|
||
</div>
|
||
<div class="product-features">
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Alles aus dem Umsetzungsplan</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>100+ KI-Tool Datenbank</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Prompt-Bibliothek (500+ Prompts)</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Automatisierungs-Workflows</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Monatliche Updates & neue Tools</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">✓</span>
|
||
<span>Exklusive Community (Telegram)</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-product" onclick="selectPlan('premium')">
|
||
Jetzt sichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bundle Offer -->
|
||
<div class="bundle-section">
|
||
<div class="bundle-badge">LIMITIERTES ANGEBOT</div>
|
||
<h2 class="bundle-title">🎯 Komplett-Paket: Umsetzungsplan + KI-Kompass</h2>
|
||
<p class="bundle-description">
|
||
Holen Sie sich beide Produkte zum Sonderpreis und starten Sie noch heute mit Ihrer KI-Transformation.
|
||
Nur für die nächsten 24 Stunden verfügbar!
|
||
</p>
|
||
<div class="bundle-price">
|
||
<div class="bundle-save">
|
||
<span>🔥</span>
|
||
<span>50€ SPAREN</span>
|
||
</div>
|
||
<div style="font-family: 'Space Grotesk', monospace; font-size: 48px; font-weight: bold; color: #FFFFFF; margin: 16px 0;">
|
||
147€
|
||
</div>
|
||
<div style="font-family: 'Inter', sans-serif; font-size: 18px; color: #CBD5E1; text-decoration: line-through;">
|
||
294€
|
||
</div>
|
||
</div>
|
||
<div class="bundle-timer">
|
||
<div style="font-size: 14px; color: #CBD5E1; margin-bottom: 8px;">Angebot läuft ab in:</div>
|
||
<div class="timer-digits" id="countdown-timer">23:45:12</div>
|
||
</div>
|
||
<button class="btn-cta" onclick="selectPlan('bundle')" style="width: 100%; max-width: 400px;">
|
||
Komplett-Paket sichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Guarantee -->
|
||
<div class="guarantee-section">
|
||
<h2 class="section-title" style="text-align: center;">Ihre Garantien</h2>
|
||
<div class="guarantee-grid">
|
||
<div class="guarantee-item">
|
||
<div class="guarantee-icon">✅</div>
|
||
<h3 class="guarantee-title">30-Tage Geld-zurück-Garantie</h3>
|
||
<p class="guarantee-text">Nicht zufrieden? Geld zurück, ohne Wenn und Aber.</p>
|
||
</div>
|
||
<div class="guarantee-item">
|
||
<div class="guarantee-icon">⚡</div>
|
||
<h3 class="guarantee-title">Sofortiger Zugang</h3>
|
||
<p class="guarantee-text">Nach dem Kauf erhalten Sie sofort Zugang zu allen Inhalten.</p>
|
||
</div>
|
||
<div class="guarantee-item">
|
||
<div class="guarantee-icon">👨💼</div>
|
||
<h3 class="guarantee-title">Premium Support</h3>
|
||
<p class="guarantee-text">Persönlicher Support bei Fragen zur Umsetzung.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer CTA -->
|
||
<div class="results-footer">
|
||
<h2 class="footer-cta">Bereit für den nächsten Schritt?</h2>
|
||
<p style="color: #CBD5E1; margin-bottom: 24px; font-family: 'Inter', sans-serif; font-size: 18px;">
|
||
Lassen Sie uns gemeinsam Ihre KI-Strategie entwickeln und umsetzen.
|
||
</p>
|
||
<button class="btn-cta" onclick="window.location.href='/kontakt'">
|
||
Kostenlose Beratung vereinbaren
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// ===== STATE MANAGEMENT =====
|
||
const questionnaireState = {
|
||
currentQuestion: 1,
|
||
totalQuestions: 15,
|
||
answers: {},
|
||
startTime: null,
|
||
userEmail: '',
|
||
sections: {
|
||
A: { name: 'Unternehmen & Ziele', questions: [1, 2, 3, 4, 5] },
|
||
B: { name: 'Engpässe & Automatisierung', questions: [6, 7, 8, 9, 10] },
|
||
C: { name: 'Bereitschaft & Umsetzung', questions: [11, 12, 13, 14, 15] }
|
||
}
|
||
};
|
||
|
||
// ===== LANGUAGE SYSTEM =====
|
||
const languageSystem = {
|
||
currentLanguage: 'de',
|
||
languages: {
|
||
de: { name: 'Deutsch', code: 'de', flag: '🇩🇪' },
|
||
en: { name: 'English', code: 'en', flag: '🇬🇧' },
|
||
tr: { name: 'Türkçe', code: 'tr', flag: '🇹🇷' }
|
||
},
|
||
|
||
// Email templates by language
|
||
emailTemplates: {
|
||
de: {
|
||
subject: "Ihre KI-Readiness-Bewertung - Score: {score}/100",
|
||
greeting: "Sehr geehrte Damen und Herren,",
|
||
thanks: "vielen Dank für Ihre Teilnahme an der KI-Readiness-Bewertung.",
|
||
results: "Ihre Ergebnisse:",
|
||
company: "Unternehmen:",
|
||
industry: "Branche:",
|
||
score: "KI-Readiness-Score:",
|
||
rating: "Bewertung:",
|
||
attachment: "Das beigefügte PDF enthält Ihre detaillierte Analyse und Handlungsempfehlungen.",
|
||
closing: "Mit freundlichen Grüßen",
|
||
signature: "Ihr KI-Readiness Team"
|
||
},
|
||
en: {
|
||
subject: "Your AI Readiness Assessment - Score: {score}/100",
|
||
greeting: "Dear Sir or Madam,",
|
||
thanks: "thank you for participating in the AI Readiness Assessment.",
|
||
results: "Your results:",
|
||
company: "Company:",
|
||
industry: "Industry:",
|
||
score: "AI Readiness Score:",
|
||
rating: "Rating:",
|
||
attachment: "The attached PDF contains your detailed analysis and recommendations.",
|
||
closing: "Best regards",
|
||
signature: "Your AI Readiness Team"
|
||
},
|
||
tr: {
|
||
subject: "Yapay Zeka Hazırlık Değerlendirmeniz - Skor: {score}/100",
|
||
greeting: "Sayın Yetkili,",
|
||
thanks: "Yapay Zeka Hazırlık Değerlendirmesi'ne katıldığınız için teşekkür ederiz.",
|
||
results: "Sonuçlarınız:",
|
||
company: "Şirket:",
|
||
industry: "Sektör:",
|
||
score: "Yapay Zeka Hazırlık Skoru:",
|
||
rating: "Değerlendirme:",
|
||
attachment: "Ekli PDF, detaylı analizinizi ve önerilerinizi içermektedir.",
|
||
closing: "Saygılarımızla",
|
||
signature: "Yapay Zeka Hazırlık Ekibiniz"
|
||
}
|
||
},
|
||
|
||
// PDF templates by language
|
||
pdfTemplates: {
|
||
de: {
|
||
title: "KI-READINESS BEWERTUNG",
|
||
subtitle: "Professionelle Analyse & Strategische Handlungsempfehlungen",
|
||
company: "Unternehmen:",
|
||
industry: "Branche:",
|
||
size: "Unternehmensgröße:",
|
||
date: "Bewertungsdatum:",
|
||
scoreTitle: "IHRE KI-READINESS BEWERTUNG",
|
||
points: "Punkte",
|
||
executiveSummary: "EXECUTIVE SUMMARY",
|
||
strengths: "IHRE STÄRKEN",
|
||
improvements: "VERBESSERUNGSBEREICHE",
|
||
recommendations: "EMPFOHLENE KI-ANWENDUNGSFÄLLE",
|
||
quickWins: "QUICK WINS - SOFORT UMSETZBAR",
|
||
roadmap: "STRATEGISCHE ROADMAP",
|
||
budget: "BUDGET-EMPFEHLUNG",
|
||
nextSteps: "NÄCHSTE KONKRETE SCHRITTE",
|
||
footer: "Dieser Bericht wurde automatisch generiert und dient als strategische Entscheidungsgrundlage."
|
||
},
|
||
en: {
|
||
title: "AI READINESS ASSESSMENT",
|
||
subtitle: "Professional Analysis & Strategic Recommendations",
|
||
company: "Company:",
|
||
industry: "Industry:",
|
||
size: "Company Size:",
|
||
date: "Assessment Date:",
|
||
scoreTitle: "YOUR AI READINESS ASSESSMENT",
|
||
points: "Points",
|
||
executiveSummary: "EXECUTIVE SUMMARY",
|
||
strengths: "YOUR STRENGTHS",
|
||
improvements: "AREAS FOR IMPROVEMENT",
|
||
recommendations: "RECOMMENDED AI USE CASES",
|
||
quickWins: "QUICK WINS - IMMEDIATELY ACTIONABLE",
|
||
roadmap: "STRATEGIC ROADMAP",
|
||
budget: "BUDGET RECOMMENDATIONS",
|
||
nextSteps: "NEXT CONCRETE STEPS",
|
||
footer: "This report was automatically generated and serves as a strategic basis for decision making."
|
||
},
|
||
tr: {
|
||
title: "YAPAY ZEKA HAZIRLIK DEĞERLENDİRMESİ",
|
||
subtitle: "Profesyonel Analiz & Stratejik Öneriler",
|
||
company: "Şirket:",
|
||
industry: "Sektör:",
|
||
size: "Şirket Büyüklüğü:",
|
||
date: "Değerlendirme Tarihi:",
|
||
scoreTitle: "YAPAY ZEKA HAZIRLIK DEĞERLENDİRMENİZ",
|
||
points: "Puan",
|
||
executiveSummary: "YÖNETİCİ ÖZETİ",
|
||
strengths: "GÜÇLÜ YÖNLERİNİZ",
|
||
improvements: "GELİŞTİRİLECEK ALANLAR",
|
||
recommendations: "ÖNERİLEN YAPAY ZEKA UYGULAMALARI",
|
||
quickWins: "HIZLI KAZANIMLAR - HEMEN UYGULANABİLİR",
|
||
roadmap: "STRATEJİK YOL HARİTASI",
|
||
budget: "BÜTÇE ÖNERİLERİ",
|
||
nextSteps: "SONRAKİ ADIMLAR",
|
||
footer: "Bu rapor otomatik olarak oluşturulmuştur ve stratejik karar verme için temel oluşturur."
|
||
}
|
||
}
|
||
};
|
||
|
||
// ===== TOOLS DATABASE =====
|
||
const toolsDatabase = [
|
||
{
|
||
name: "Pipedrive",
|
||
category: "CRM & Vertrieb",
|
||
priority: "high",
|
||
icon: "📊",
|
||
description: "Einfaches, visuelles CRM für den Vertrieb",
|
||
price: "ab 14€/Monat",
|
||
recommendedFor: ["dienstleistung", "agentur", "coaching"]
|
||
},
|
||
{
|
||
name: "Zapier",
|
||
category: "Automatisierung",
|
||
priority: "high",
|
||
icon: "⚙️",
|
||
description: "Verbinden Sie über 5,000 Apps ohne Code",
|
||
price: "ab 19€/Monat",
|
||
recommendedFor: ["ecommerce", "handel", "dienstleistung"]
|
||
},
|
||
{
|
||
name: "ChatGPT Plus",
|
||
category: "Content & Kreativität",
|
||
priority: "medium",
|
||
icon: "💬",
|
||
description: "Erweiterte KI für Texte, Ideen & Analyse",
|
||
price: "20€/Monat",
|
||
recommendedFor: ["marketing", "content", "beratung"]
|
||
},
|
||
{
|
||
name: "Notion AI",
|
||
category: "Produktivität",
|
||
priority: "medium",
|
||
icon: "📝",
|
||
description: "KI-gestütztes Notizen & Projektmanagement",
|
||
price: "8€/Monat",
|
||
recommendedFor: ["coaching", "beratung", "agentur"]
|
||
},
|
||
{
|
||
name: "Canva Pro",
|
||
category: "Design & Marketing",
|
||
priority: "medium",
|
||
icon: "🎨",
|
||
description: "KI-basierte Design-Tools für Grafiken",
|
||
price: "12€/Monat",
|
||
recommendedFor: ["marketing", "social media", "ecommerce"]
|
||
},
|
||
{
|
||
name: "Jasper AI",
|
||
category: "Content Marketing",
|
||
priority: "high",
|
||
icon: "✍️",
|
||
description: "Professionelle KI für Marketing-Texte",
|
||
price: "39€/Monat",
|
||
recommendedFor: ["marketing", "content", "ecommerce"]
|
||
},
|
||
{
|
||
name: "Calendly",
|
||
category: "Terminplanung",
|
||
priority: "low",
|
||
icon: "📅",
|
||
description: "Automatisierte Terminbuchung",
|
||
price: "8€/Monat",
|
||
recommendedFor: ["dienstleistung", "coaching", "beratung"]
|
||
},
|
||
{
|
||
name: "QuickBooks",
|
||
category: "Buchhaltung",
|
||
priority: "medium",
|
||
icon: "💰",
|
||
description: "KI-gestützte Buchhaltung & Finanzen",
|
||
price: "25€/Monat",
|
||
recommendedFor: ["handel", "dienstleistung", "ecommerce"]
|
||
}
|
||
];
|
||
|
||
// ===== RECOMMENDATIONS DATABASE =====
|
||
const recommendationsDatabase = [
|
||
{
|
||
title: "Ausbau bestehender Automatisierungen",
|
||
description: "Identifizieren Sie repetitive Prozesse und automatisieren Sie diese schrittweise."
|
||
},
|
||
{
|
||
title: "KI-Tools für Kundenservice implementieren",
|
||
description: "Nutzen Sie Chatbots für 24/7 Support und reduzieren Sie Anfragezeiten um 40%."
|
||
},
|
||
{
|
||
title: "Datenanalyse systematisch aufbauen",
|
||
description: "Implementieren Sie KI-gestützte Reporting-Tools für bessere Entscheidungsgrundlagen."
|
||
},
|
||
{
|
||
title: "Team für KI-Anwendungen schulen",
|
||
description: "Regelmäßige Workshops zur effektiven Nutzung von KI-Tools durchführen."
|
||
},
|
||
{
|
||
title: "Kosten-Nutzen-Analyse für KI-Projekte",
|
||
description: "Erstellen Sie einen klaren ROI-Fahrplan für jede KI-Implementierung."
|
||
},
|
||
{
|
||
title: "Skalierung mit KI vorbereiten",
|
||
description: "Implementieren Sie skalierbare KI-Lösungen für zukünftiges Wachstum."
|
||
},
|
||
{
|
||
title: "Innovationsmanagement etablieren",
|
||
description: "Regelmäßige Reviews neuer KI-Tools und Technologien durchführen."
|
||
},
|
||
{
|
||
title: "KI-Governance implementieren",
|
||
description: "Klare Richtlinien für den Einsatz von KI im Unternehmen definieren."
|
||
}
|
||
];
|
||
|
||
// ===== INITIALIZATION =====
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
initializeLanguage();
|
||
loadProgress();
|
||
setupKeyboardNavigation();
|
||
startCountdownTimer();
|
||
|
||
// Initialize character counter for textarea
|
||
const textarea = document.querySelector('.text-area');
|
||
if (textarea) {
|
||
textarea.addEventListener('input', function() {
|
||
const counter = this.parentElement.querySelector('.char-counter span');
|
||
if (counter) {
|
||
counter.textContent = this.value.length;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// ===== LANGUAGE FUNCTIONS =====
|
||
function initializeLanguage() {
|
||
// Try to get saved language from localStorage
|
||
const savedLang = localStorage.getItem('ki-fit-language');
|
||
if (savedLang && languageSystem.languages[savedLang]) {
|
||
applyLanguage(savedLang);
|
||
} else {
|
||
// Try to detect browser language
|
||
const browserLang = navigator.language.substring(0, 2);
|
||
if (languageSystem.languages[browserLang]) {
|
||
applyLanguage(browserLang);
|
||
} else {
|
||
// Default to German
|
||
applyLanguage('de');
|
||
}
|
||
}
|
||
}
|
||
|
||
function applyLanguage(langCode) {
|
||
languageSystem.currentLanguage = langCode;
|
||
localStorage.setItem('ki-fit-language', langCode);
|
||
|
||
// Update language switcher buttons
|
||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||
if (btn.dataset.lang === langCode) {
|
||
btn.classList.add('active');
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// Update UI elements based on language
|
||
updateUIForLanguage(langCode);
|
||
}
|
||
|
||
function updateUIForLanguage(langCode) {
|
||
// Update exit button text
|
||
const exitBtn = document.querySelector('.exit-btn span');
|
||
if (exitBtn) {
|
||
if (langCode === 'de') exitBtn.textContent = 'Abbrechen';
|
||
else if (langCode === 'en') exitBtn.textContent = 'Cancel';
|
||
else if (langCode === 'tr') exitBtn.textContent = 'İptal';
|
||
}
|
||
|
||
// Update start button text
|
||
const startBtn = document.querySelector('.btn-start');
|
||
if (startBtn) {
|
||
if (langCode === 'de') startBtn.textContent = 'Jetzt starten →';
|
||
else if (langCode === 'en') startBtn.textContent = 'Start Now →';
|
||
else if (langCode === 'tr') startBtn.textContent = 'Şimdi Başla →';
|
||
}
|
||
|
||
// Update welcome note
|
||
const welcomeNote = document.querySelector('.welcome-note');
|
||
if (welcomeNote) {
|
||
if (langCode === 'de') welcomeNote.textContent = 'Ihre Daten werden vertraulich behandelt und DSGVO-konform verarbeitet.';
|
||
else if (langCode === 'en') welcomeNote.textContent = 'Your data will be treated confidentially and processed in compliance with GDPR.';
|
||
else if (langCode === 'tr') welcomeNote.textContent = 'Verileriniz gizli tutulacak ve GDPR uyumlu şekilde işlenecektir.';
|
||
}
|
||
}
|
||
|
||
// ===== NAVIGATION FUNCTIONS =====
|
||
function startQuestionnaire() {
|
||
questionnaireState.startTime = new Date();
|
||
document.querySelector('.progress-bar-container').classList.remove('hidden');
|
||
showQuestion(1);
|
||
}
|
||
|
||
function showQuestion(questionNum) {
|
||
// Hide all screens
|
||
document.querySelectorAll('.screen').forEach(screen => {
|
||
screen.classList.remove('active');
|
||
});
|
||
|
||
// Show the requested question
|
||
const questionScreen = document.getElementById(`question-${questionNum}`);
|
||
if (questionScreen) {
|
||
questionScreen.classList.add('active');
|
||
questionnaireState.currentQuestion = questionNum;
|
||
updateProgress();
|
||
restoreAnswer(questionNum);
|
||
|
||
// Focus on first input if available
|
||
setTimeout(() => {
|
||
const input = questionScreen.querySelector('input, textarea');
|
||
if (input) input.focus();
|
||
}, 100);
|
||
}
|
||
}
|
||
|
||
function nextQuestion() {
|
||
saveAnswer(questionnaireState.currentQuestion);
|
||
|
||
if (questionnaireState.currentQuestion < questionnaireState.totalQuestions) {
|
||
showQuestion(questionnaireState.currentQuestion + 1);
|
||
} else {
|
||
submitQuestionnaire();
|
||
}
|
||
}
|
||
|
||
function previousQuestion() {
|
||
if (questionnaireState.currentQuestion > 1) {
|
||
saveAnswer(questionnaireState.currentQuestion);
|
||
showQuestion(questionnaireState.currentQuestion - 1);
|
||
}
|
||
}
|
||
|
||
function autoAdvance(questionNum) {
|
||
saveAnswer(questionNum);
|
||
|
||
// Auto-advance after selection
|
||
setTimeout(() => {
|
||
if (questionnaireState.currentQuestion === questionNum) {
|
||
nextQuestion();
|
||
}
|
||
}, 500);
|
||
}
|
||
|
||
// ===== VALIDATION FUNCTIONS =====
|
||
function validateTextInput(questionNum) {
|
||
const input = document.querySelector(`#question-${questionNum} .text-input`);
|
||
const nextBtn = document.querySelector(`#question-${questionNum} .btn-next`);
|
||
|
||
if (input && nextBtn) {
|
||
const isValid = input.value.trim().length >= 2;
|
||
nextBtn.disabled = !isValid;
|
||
|
||
if (isValid) {
|
||
input.style.borderColor = '#00F5FF';
|
||
} else {
|
||
input.style.borderColor = 'rgba(255, 255, 255, 0.1)';
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function validateCheckboxes(questionNum) {
|
||
const checkboxes = document.querySelectorAll(`#question-${questionNum} input[type="checkbox"]`);
|
||
const nextBtn = document.querySelector(`#question-${questionNum} .btn-next`);
|
||
|
||
if (checkboxes.length > 0 && nextBtn) {
|
||
let checkedCount = 0;
|
||
checkboxes.forEach(cb => {
|
||
if (cb.checked) checkedCount++;
|
||
});
|
||
|
||
const isValid = checkedCount > 0;
|
||
nextBtn.disabled = !isValid;
|
||
|
||
return isValid;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function validateTextArea(questionNum) {
|
||
const textarea = document.querySelector(`#question-${questionNum} .text-area`);
|
||
const nextBtn = document.querySelector(`#question-${questionNum} .btn-next`);
|
||
|
||
if (textarea && nextBtn) {
|
||
const isValid = textarea.value.trim().length >= 10;
|
||
nextBtn.disabled = !isValid;
|
||
|
||
if (isValid) {
|
||
textarea.style.borderColor = '#00F5FF';
|
||
} else {
|
||
textarea.style.borderColor = 'rgba(255, 255, 255, 0.1)';
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function validateEmail(questionNum) {
|
||
const emailInput = document.querySelector(`#question-${questionNum} .email-input`);
|
||
const nextBtn = document.querySelector(`#question-${questionNum} .btn-next`);
|
||
|
||
if (emailInput && nextBtn) {
|
||
const email = emailInput.value.trim();
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
const isValid = emailRegex.test(email);
|
||
|
||
nextBtn.disabled = !isValid;
|
||
|
||
if (isValid) {
|
||
emailInput.style.borderColor = '#00F5FF';
|
||
questionnaireState.userEmail = email;
|
||
} else {
|
||
emailInput.style.borderColor = 'rgba(255, 255, 255, 0.1)';
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function validateConsent(questionNum) {
|
||
const consentCheckbox = document.querySelector(`#question-${questionNum} input[name="consent"]`);
|
||
const submitBtn = document.querySelector(`#question-${questionNum} .btn-submit`);
|
||
|
||
if (consentCheckbox && submitBtn) {
|
||
submitBtn.disabled = !consentCheckbox.checked;
|
||
return consentCheckbox.checked;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// ===== DATA MANAGEMENT =====
|
||
function saveAnswer(questionNum) {
|
||
const questionScreen = document.getElementById(`question-${questionNum}`);
|
||
if (!questionScreen) return;
|
||
|
||
let answer = null;
|
||
|
||
// Handle radio buttons
|
||
const radio = questionScreen.querySelector('input[type="radio"]:checked');
|
||
if (radio) {
|
||
answer = radio.value;
|
||
}
|
||
|
||
// Handle checkboxes
|
||
const checkboxes = questionScreen.querySelectorAll('input[type="checkbox"]:checked');
|
||
if (checkboxes.length > 0) {
|
||
answer = Array.from(checkboxes).map(cb => cb.value);
|
||
}
|
||
|
||
// Handle text input
|
||
const textInput = questionScreen.querySelector('.text-input');
|
||
if (textInput && textInput.value.trim()) {
|
||
answer = textInput.value.trim();
|
||
}
|
||
|
||
// Handle textarea
|
||
const textarea = questionScreen.querySelector('.text-area');
|
||
if (textarea && textarea.value.trim()) {
|
||
answer = textarea.value.trim();
|
||
}
|
||
|
||
// Handle email input
|
||
const emailInput = questionScreen.querySelector('.email-input');
|
||
if (emailInput && emailInput.value.trim()) {
|
||
answer = emailInput.value.trim();
|
||
questionnaireState.userEmail = answer;
|
||
}
|
||
|
||
// Handle consent checkbox
|
||
const consentCheckbox = questionScreen.querySelector('input[name="consent"]');
|
||
if (consentCheckbox) {
|
||
answer = consentCheckbox.checked;
|
||
}
|
||
|
||
if (answer !== null) {
|
||
questionnaireState.answers[questionNum] = answer;
|
||
autoSave();
|
||
}
|
||
}
|
||
|
||
function restoreAnswer(questionNum) {
|
||
const answer = questionnaireState.answers[questionNum];
|
||
if (!answer) return;
|
||
|
||
const questionScreen = document.getElementById(`question-${questionNum}`);
|
||
if (!questionScreen) return;
|
||
|
||
// Handle radio buttons
|
||
const radios = questionScreen.querySelectorAll('input[type="radio"]');
|
||
if (radios.length > 0) {
|
||
radios.forEach(radio => {
|
||
radio.checked = radio.value === answer;
|
||
});
|
||
}
|
||
|
||
// Handle checkboxes
|
||
if (Array.isArray(answer)) {
|
||
const checkboxes = questionScreen.querySelectorAll('input[type="checkbox"]');
|
||
checkboxes.forEach(cb => {
|
||
cb.checked = answer.includes(cb.value);
|
||
});
|
||
}
|
||
|
||
// Handle text input
|
||
const textInput = questionScreen.querySelector('.text-input');
|
||
if (textInput && typeof answer === 'string') {
|
||
textInput.value = answer;
|
||
}
|
||
|
||
// Handle textarea
|
||
const textarea = questionScreen.querySelector('.text-area');
|
||
if (textarea && typeof answer === 'string') {
|
||
textarea.value = answer;
|
||
// Update character counter
|
||
const counter = textarea.parentElement.querySelector('.char-counter span');
|
||
if (counter) {
|
||
counter.textContent = answer.length;
|
||
}
|
||
}
|
||
|
||
// Handle email input
|
||
const emailInput = questionScreen.querySelector('.email-input');
|
||
if (emailInput && typeof answer === 'string') {
|
||
emailInput.value = answer;
|
||
}
|
||
|
||
// Handle consent checkbox
|
||
const consentCheckbox = questionScreen.querySelector('input[name="consent"]');
|
||
if (consentCheckbox && typeof answer === 'boolean') {
|
||
consentCheckbox.checked = answer;
|
||
}
|
||
|
||
// Update button states
|
||
validateTextInput(questionNum);
|
||
validateCheckboxes(questionNum);
|
||
validateTextArea(questionNum);
|
||
validateEmail(questionNum);
|
||
validateConsent(questionNum);
|
||
}
|
||
|
||
function autoSave() {
|
||
const progress = {
|
||
currentQuestion: questionnaireState.currentQuestion,
|
||
answers: questionnaireState.answers,
|
||
userEmail: questionnaireState.userEmail,
|
||
timestamp: new Date().getTime()
|
||
};
|
||
|
||
try {
|
||
localStorage.setItem('ki-fit-progress', JSON.stringify(progress));
|
||
} catch (e) {
|
||
console.warn('Could not save progress to localStorage:', e);
|
||
}
|
||
}
|
||
|
||
function loadProgress() {
|
||
try {
|
||
const saved = localStorage.getItem('ki-fit-progress');
|
||
if (saved) {
|
||
const progress = JSON.parse(saved);
|
||
|
||
// Check if saved progress is not too old (7 days)
|
||
const oneWeekAgo = new Date().getTime() - (7 * 24 * 60 * 60 * 1000);
|
||
if (progress.timestamp && progress.timestamp > oneWeekAgo) {
|
||
questionnaireState.currentQuestion = progress.currentQuestion || 1;
|
||
questionnaireState.answers = progress.answers || {};
|
||
questionnaireState.userEmail = progress.userEmail || '';
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn('Could not load progress from localStorage:', e);
|
||
}
|
||
}
|
||
|
||
// ===== PROGRESS BAR FUNCTIONS =====
|
||
function updateProgress() {
|
||
const questionNum = questionnaireState.currentQuestion;
|
||
const totalQuestions = questionnaireState.totalQuestions;
|
||
|
||
// Update progress text
|
||
document.getElementById('current-q').textContent = questionNum;
|
||
const percent = Math.round((questionNum / totalQuestions) * 100);
|
||
document.getElementById('progress-pct').textContent = percent + '%';
|
||
|
||
// Update progress bar
|
||
document.getElementById('progress-fill').style.width = percent + '%';
|
||
|
||
// Update section indicator
|
||
let section = '';
|
||
for (const [key, sec] of Object.entries(questionnaireState.sections)) {
|
||
if (sec.questions.includes(questionNum)) {
|
||
section = `${key}. ${sec.name}`;
|
||
break;
|
||
}
|
||
}
|
||
document.getElementById('section-name').textContent = section;
|
||
}
|
||
|
||
// ===== RESULTS GENERATION =====
|
||
function calculateKIReadinessScore(answers) {
|
||
let score = 0;
|
||
|
||
// Company size (10 points max)
|
||
const sizeMap = {
|
||
'1-person': 5,
|
||
'2-5': 7,
|
||
'6-20': 9,
|
||
'21-50': 10,
|
||
'50plus': 10
|
||
};
|
||
score += sizeMap[answers[1]] || 5;
|
||
|
||
// Digital maturity (20 points max)
|
||
score += parseInt(answers[5] || 1) * 4;
|
||
|
||
// Time spent on admin (15 points - less time = higher readiness)
|
||
const timeMap = {
|
||
'unter-5h': 15,
|
||
'5-10h': 12,
|
||
'11-15h': 9,
|
||
'16-20h': 6,
|
||
'20plus': 3
|
||
};
|
||
score += timeMap[answers[8]] || 6;
|
||
|
||
// Automation areas selected (15 points - more = higher readiness)
|
||
const autoAreas = answers[9]?.length || 0;
|
||
score += Math.min(15, autoAreas * 2);
|
||
|
||
// Current AI usage (15 points)
|
||
const aiTools = answers[11]?.length || 0;
|
||
if (aiTools === 0 || (Array.isArray(answers[11]) && answers[11].includes('keine'))) {
|
||
score += 5;
|
||
} else {
|
||
score += Math.min(15, aiTools * 3);
|
||
}
|
||
|
||
// Technology openness (15 points)
|
||
score += parseInt(answers[10] || 1) * 3;
|
||
|
||
// Implementation speed (10 points)
|
||
const speedMap = {
|
||
'sofort': 10,
|
||
'kurz': 8,
|
||
'mittel': 6,
|
||
'lang': 4,
|
||
'keine': 2
|
||
};
|
||
score += speedMap[answers[13]] || 4;
|
||
|
||
// Primary goal importance (10 points)
|
||
const goalMap = {
|
||
'zeit-sparen': 8,
|
||
'kosten-reduzieren': 7,
|
||
'wachstum': 9,
|
||
'qualität': 8,
|
||
'innovation': 10
|
||
};
|
||
score += goalMap[answers[4]] || 5;
|
||
|
||
return Math.min(100, Math.max(0, score));
|
||
}
|
||
|
||
function getScoreRating(score) {
|
||
if (score >= 80) return 'Sehr Hoch';
|
||
if (score >= 65) return 'Hoch';
|
||
if (score >= 45) return 'Mittel';
|
||
if (score >= 25) return 'Gering';
|
||
return 'Sehr Gering';
|
||
}
|
||
|
||
function calculateTimeSaving(answers) {
|
||
const timeMap = {
|
||
'unter-5h': 5,
|
||
'5-10h': 12,
|
||
'11-15h': 20,
|
||
'16-20h': 35,
|
||
'20plus': 50
|
||
};
|
||
|
||
const baseHours = timeMap[answers[8]] || 10;
|
||
const multiplier = answers[10] ? parseInt(answers[10]) : 3;
|
||
|
||
return Math.round(baseHours * (multiplier / 3));
|
||
}
|
||
|
||
function calculateCostSaving(answers) {
|
||
const budgetMap = {
|
||
'unter-50': 100,
|
||
'50-100': 300,
|
||
'100-300': 800,
|
||
'300-500': 1500,
|
||
'500plus': 3000
|
||
};
|
||
|
||
const baseCost = budgetMap[answers[9]] || 500;
|
||
const timeSaving = calculateTimeSaving(answers);
|
||
|
||
// Assume average hourly rate of 50€
|
||
return Math.round(baseCost + (timeSaving * 50 * 4.33)); // Monthly
|
||
}
|
||
|
||
function calculateQuickWins(answers) {
|
||
let count = 0;
|
||
|
||
// Count selected automation areas
|
||
if (answers[6] && Array.isArray(answers[6])) {
|
||
count += Math.min(answers[6].length, 3);
|
||
}
|
||
|
||
// Add for AI importance
|
||
if (answers[5] && parseInt(answers[5]) >= 3) {
|
||
count += 2;
|
||
}
|
||
|
||
// Add for implementation speed
|
||
if (answers[13] && ['sofort', 'kurz'].includes(answers[13])) {
|
||
count += 3;
|
||
}
|
||
|
||
return Math.min(10, Math.max(1, count));
|
||
}
|
||
|
||
function generatePersonalizedTools(answers) {
|
||
const recommendedTools = [];
|
||
|
||
// Filter tools based on business model
|
||
const businessModels = answers[3] || [];
|
||
const timeConsumingTasks = answers[6] || [];
|
||
|
||
toolsDatabase.forEach(tool => {
|
||
let matches = 0;
|
||
|
||
// Check if tool matches business model
|
||
if (tool.recommendedFor.some(model => businessModels.includes(model))) {
|
||
matches += 2;
|
||
}
|
||
|
||
// Check if tool category matches time-consuming tasks
|
||
if (timeConsumingTasks.includes('kundenkommunikation') && tool.category.includes('CRM')) {
|
||
matches += 2;
|
||
}
|
||
if (timeConsumingTasks.includes('marketing') && tool.category.includes('Marketing')) {
|
||
matches += 2;
|
||
}
|
||
if (timeConsumingTasks.includes('administrative') && tool.category.includes('Produktivität')) {
|
||
matches += 1;
|
||
}
|
||
|
||
if (matches > 0) {
|
||
recommendedTools.push({
|
||
...tool,
|
||
matchScore: matches
|
||
});
|
||
}
|
||
});
|
||
|
||
// Sort by match score and limit to 5
|
||
return recommendedTools
|
||
.sort((a, b) => b.matchScore - a.matchScore)
|
||
.slice(0, 5);
|
||
}
|
||
|
||
function generatePersonalizedRecommendations(answers, score) {
|
||
const recommendations = [];
|
||
const rating = getScoreRating(score);
|
||
|
||
// Add recommendations based on score
|
||
if (score < 50) {
|
||
recommendations.push({
|
||
title: "Grundlagen schaffen",
|
||
description: "Starten Sie mit einfachen KI-Tools wie ChatGPT für Content-Erstellung und Automatisierungs-Grundlagen."
|
||
});
|
||
}
|
||
|
||
if (score >= 50 && score < 75) {
|
||
recommendations.push({
|
||
title: "Prozesse systematisch automatisieren",
|
||
description: "Identifizieren Sie die 3 wichtigsten repetitiven Prozesse und automatisieren Sie diese mit KI-Tools."
|
||
});
|
||
}
|
||
|
||
if (score >= 75) {
|
||
recommendations.push({
|
||
title: "KI-Strategie entwickeln",
|
||
description: "Erstellen Sie eine umfassende KI-Roadmap mit klaren Zielen, Budget und Zeitplan."
|
||
});
|
||
}
|
||
|
||
// Add recommendations based on specific answers
|
||
if (answers[12] === 'zeit') {
|
||
recommendations.push({
|
||
title: "Zeitmanagement mit KI optimieren",
|
||
description: "Nutzen Sie KI für Priorisierung, Terminplanung und Fokussierung auf wertschöpfende Aufgaben."
|
||
});
|
||
}
|
||
|
||
if (answers[12] === 'wissen') {
|
||
recommendations.push({
|
||
title: "KI-Schulungsprogramm implementieren",
|
||
description: "Regelmäßige Workshops und Ressourcen für Ihr Team zur effektiven KI-Nutzung."
|
||
});
|
||
}
|
||
|
||
// Add general recommendations from database
|
||
const generalRecs = recommendationsDatabase.slice(0, 4 - recommendations.length);
|
||
recommendations.push(...generalRecs);
|
||
|
||
return recommendations.slice(0, 4);
|
||
}
|
||
|
||
// ===== SUBMISSION & RESULTS =====
|
||
async function submitQuestionnaire() {
|
||
// Show loading state
|
||
const submitBtn = document.querySelector('.btn-submit');
|
||
if (submitBtn) {
|
||
submitBtn.disabled = true;
|
||
submitBtn.innerHTML = '<span class="spinner"></span> Wird erstellt...';
|
||
}
|
||
|
||
// Save final answer
|
||
saveAnswer(questionnaireState.currentQuestion);
|
||
|
||
// Calculate results
|
||
const score = calculateKIReadinessScore(questionnaireState.answers);
|
||
const rating = getScoreRating(score);
|
||
const timeSaving = calculateTimeSaving(questionnaireState.answers);
|
||
const costSaving = calculateCostSaving(questionnaireState.answers);
|
||
const quickWins = calculateQuickWins(questionnaireState.answers);
|
||
const recommendedTools = generatePersonalizedTools(questionnaireState.answers);
|
||
const recommendations = generatePersonalizedRecommendations(questionnaireState.answers, score);
|
||
|
||
// Simulate processing delay
|
||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||
|
||
// Show success screen
|
||
showSuccessScreen(score, rating);
|
||
|
||
// Clear saved progress
|
||
localStorage.removeItem('ki-fit-progress');
|
||
|
||
// In a real implementation, you would send the email here
|
||
// For demo purposes, we'll just show a success message
|
||
console.log('Email would be sent to:', questionnaireState.userEmail);
|
||
console.log('Score:', score);
|
||
console.log('Recommendations:', recommendations);
|
||
}
|
||
|
||
function showSuccessScreen(score, rating) {
|
||
// Hide all screens
|
||
document.querySelectorAll('.screen').forEach(screen => {
|
||
screen.classList.remove('active');
|
||
});
|
||
|
||
// Show success screen
|
||
const successScreen = document.getElementById('success-screen');
|
||
if (successScreen) {
|
||
successScreen.classList.add('active');
|
||
|
||
// Update success screen content
|
||
const emailElement = document.getElementById('user-email');
|
||
if (emailElement) {
|
||
emailElement.textContent = questionnaireState.userEmail;
|
||
}
|
||
|
||
const scoreElement = document.getElementById('final-score');
|
||
if (scoreElement) {
|
||
scoreElement.textContent = score;
|
||
}
|
||
|
||
const ratingElement = document.getElementById('score-rating');
|
||
if (ratingElement) {
|
||
ratingElement.textContent = rating;
|
||
}
|
||
|
||
// After 3 seconds, show results screen
|
||
setTimeout(() => {
|
||
showResultsScreen(score, rating);
|
||
}, 3000);
|
||
}
|
||
}
|
||
|
||
function showResultsScreen(score, rating) {
|
||
// Hide all screens
|
||
document.querySelectorAll('.screen').forEach(screen => {
|
||
screen.classList.remove('active');
|
||
});
|
||
|
||
// Show results screen
|
||
const resultsScreen = document.getElementById('results-screen');
|
||
if (resultsScreen) {
|
||
resultsScreen.classList.add('active');
|
||
|
||
// Update results
|
||
document.getElementById('score-value').textContent = score + '%';
|
||
document.getElementById('score-rating').querySelector('span:last-child').textContent = rating;
|
||
|
||
const timeSaving = calculateTimeSaving(questionnaireState.answers);
|
||
const costSaving = calculateCostSaving(questionnaireState.answers);
|
||
const quickWins = calculateQuickWins(questionnaireState.answers);
|
||
|
||
document.getElementById('time-saving').textContent = timeSaving + 'h';
|
||
document.getElementById('cost-saving').textContent = costSaving + '€';
|
||
document.getElementById('quick-wins').textContent = quickWins;
|
||
|
||
document.getElementById('user-email-display').textContent = questionnaireState.userEmail;
|
||
|
||
// Populate tools
|
||
const toolsGrid = document.getElementById('tools-grid');
|
||
if (toolsGrid) {
|
||
const recommendedTools = generatePersonalizedTools(questionnaireState.answers);
|
||
toolsGrid.innerHTML = '';
|
||
|
||
recommendedTools.forEach((tool, index) => {
|
||
const toolCard = document.createElement('div');
|
||
toolCard.className = 'tool-card';
|
||
toolCard.innerHTML = `
|
||
<div class="tool-priority ${tool.priority === 'high' ? 'priority-high' : 'priority-medium'}">
|
||
<span>${tool.priority === 'high' ? '🔥' : '⭐'}</span>
|
||
<span>${tool.priority === 'high' ? 'Hohe' : 'Mittlere'} Priorität</span>
|
||
</div>
|
||
<div class="tool-header">
|
||
<div class="tool-icon">${tool.icon}</div>
|
||
<h3 class="tool-name">${tool.name}</h3>
|
||
</div>
|
||
<p class="tool-description">${tool.description}</p>
|
||
<div class="tool-category">
|
||
<span>📁</span>
|
||
<span>${tool.category}</span>
|
||
</div>
|
||
<div class="tool-price">${tool.price}</div>
|
||
`;
|
||
toolsGrid.appendChild(toolCard);
|
||
});
|
||
}
|
||
|
||
// Populate recommendations
|
||
const recommendationsList = document.getElementById('recommendations-list');
|
||
if (recommendationsList) {
|
||
const recommendations = generatePersonalizedRecommendations(questionnaireState.answers, score);
|
||
recommendationsList.innerHTML = '';
|
||
|
||
recommendations.forEach((rec, index) => {
|
||
const recItem = document.createElement('div');
|
||
recItem.className = 'recommendation-item';
|
||
recItem.innerHTML = `
|
||
<div class="rec-number">${index + 1}</div>
|
||
<div class="rec-content">
|
||
<h4 class="rec-title">${rec.title}</h4>
|
||
<p class="rec-description">${rec.description}</p>
|
||
</div>
|
||
`;
|
||
recommendationsList.appendChild(recItem);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// ===== EMAIL & PDF FUNCTIONS =====
|
||
function sendDemoEmail(email, score, rating) {
|
||
// This is a demo function - in production, you would call your backend
|
||
const template = languageSystem.emailTemplates[languageSystem.currentLanguage];
|
||
|
||
const emailBody = `
|
||
${template.greeting}
|
||
|
||
${template.thanks}
|
||
|
||
${template.results}
|
||
|
||
${template.company} ${questionnaireState.answers[2] || 'Ihr Unternehmen'}
|
||
${template.industry} ${questionnaireState.answers[2] || 'Nicht angegeben'}
|
||
${template.score} ${score}/100
|
||
${template.rating} ${rating}
|
||
|
||
${template.attachment}
|
||
|
||
${template.closing},
|
||
${template.signature}
|
||
`;
|
||
|
||
console.log('Demo Email sent to:', email);
|
||
console.log('Subject:', template.subject.replace('{score}', score));
|
||
console.log('Body:', emailBody);
|
||
|
||
// In a real implementation, you would use:
|
||
// fetch('/api/send-email', { method: 'POST', body: JSON.stringify({ email, subject, body }) })
|
||
}
|
||
|
||
function generatePDFContent() {
|
||
const template = languageSystem.pdfTemplates[languageSystem.currentLanguage];
|
||
const score = calculateKIReadinessScore(questionnaireState.answers);
|
||
const rating = getScoreRating(score);
|
||
|
||
return `
|
||
${template.title}
|
||
${template.subtitle}
|
||
|
||
${template.company} ${questionnaireState.answers[2] || 'Ihr Unternehmen'}
|
||
${template.industry} ${questionnaireState.answers[2] || 'Nicht angegeben'}
|
||
${template.size} ${questionnaireState.answers[1] || 'Nicht angegeben'}
|
||
${template.date} ${new Date().toLocaleDateString()}
|
||
|
||
${template.scoreTitle}
|
||
${score}/100 ${template.points}
|
||
${rating}
|
||
|
||
${template.executiveSummary}
|
||
Basierend auf Ihrer Bewertung haben wir eine umfassende Analyse durchgeführt.
|
||
|
||
${template.strengths}
|
||
- Hohe Technologieaffinität
|
||
- Klare Ziele definiert
|
||
- Bereitschaft zur Implementierung
|
||
|
||
${template.improvements}
|
||
- Systematische Prozessanalyse
|
||
- Budgetplanung optimieren
|
||
- Team-Schulung verstärken
|
||
|
||
${template.recommendations}
|
||
1. Kundenservice-Automatisierung
|
||
2. Content-Generierung mit KI
|
||
3. Datenanalyse & Reporting
|
||
4. Prozessoptimierung
|
||
|
||
${template.quickWins}
|
||
- ChatGPT für E-Mail-Vorlagen
|
||
- Automatische Terminbuchung
|
||
- Social Media Content Planner
|
||
|
||
${template.roadmap}
|
||
Phase 1 (0-3 Monate): Grundlagen & Quick Wins
|
||
Phase 2 (4-6 Monate): Prozessautomatisierung
|
||
Phase 3 (7-12 Monate): Skalierung & Innovation
|
||
|
||
${template.budget}
|
||
Monatliches Budget: 300-500€ für KI-Tools
|
||
Jährliche Investition: 5,000-8,000€
|
||
ROI-Erwartung: 6-12 Monate
|
||
|
||
${template.nextSteps}
|
||
1. Pilotprojekt auswählen
|
||
2. Tools evaluieren
|
||
3. Team schulen
|
||
4. Implementierung starten
|
||
|
||
${template.footer}
|
||
`;
|
||
}
|
||
|
||
// ===== UI & UTILITY FUNCTIONS =====
|
||
function startCountdownTimer() {
|
||
const timerElement = document.getElementById('countdown-timer');
|
||
if (!timerElement) return;
|
||
|
||
// Set timer to 24 hours from now
|
||
let hours = 23;
|
||
let minutes = 59;
|
||
let seconds = 59;
|
||
|
||
function updateTimer() {
|
||
timerElement.textContent =
|
||
`${hours.toString().padStart(2, '0')}:` +
|
||
`${minutes.toString().padStart(2, '0')}:` +
|
||
`${seconds.toString().padStart(2, '0')}`;
|
||
|
||
seconds--;
|
||
if (seconds < 0) {
|
||
seconds = 59;
|
||
minutes--;
|
||
if (minutes < 0) {
|
||
minutes = 59;
|
||
hours--;
|
||
if (hours < 0) {
|
||
hours = 0;
|
||
minutes = 0;
|
||
seconds = 0;
|
||
clearInterval(timerInterval);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
updateTimer();
|
||
const timerInterval = setInterval(updateTimer, 1000);
|
||
}
|
||
|
||
function downloadReport() {
|
||
const pdfContent = generatePDFContent();
|
||
const blob = new Blob([pdfContent], { type: 'application/pdf' });
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `KI-Fit-Report-${questionnaireState.userEmail || 'report'}.pdf`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
alert('PDF-Report wird heruntergeladen. In der Produktion würde eine E-Mail mit dem Report gesendet werden.');
|
||
}
|
||
|
||
function selectPlan(planType) {
|
||
const plans = {
|
||
basic: { name: 'KI-Umsetzungsplan', price: '97€' },
|
||
premium: { name: 'KI-Kompass', price: '197€' },
|
||
bundle: { name: 'Komplett-Paket', price: '147€' }
|
||
};
|
||
|
||
const plan = plans[planType];
|
||
if (plan) {
|
||
alert(`Danke für Ihr Interesse am ${plan.name} für ${plan.price}! In der Produktion würden Sie zur Bezahlung weitergeleitet.`);
|
||
|
||
// In production, redirect to payment page
|
||
// window.location.href = `/checkout?plan=${planType}`;
|
||
}
|
||
}
|
||
|
||
function confirmExit() {
|
||
if (confirm('Möchten Sie wirklich abbrechen? Ihr Fortschritt geht verloren.')) {
|
||
// Clear progress and redirect to homepage
|
||
localStorage.removeItem('ki-fit-progress');
|
||
window.location.href = '/';
|
||
}
|
||
}
|
||
|
||
function setupKeyboardNavigation() {
|
||
document.addEventListener('keydown', function(e) {
|
||
// Only handle keyboard navigation when on a question screen
|
||
const currentScreen = document.querySelector('.screen.active');
|
||
if (!currentScreen || !currentScreen.classList.contains('question-screen')) {
|
||
return;
|
||
}
|
||
|
||
const questionNum = parseInt(currentScreen.dataset.question);
|
||
|
||
switch(e.key) {
|
||
case 'ArrowLeft':
|
||
e.preventDefault();
|
||
if (questionNum > 1) {
|
||
previousQuestion();
|
||
}
|
||
break;
|
||
|
||
case 'ArrowRight':
|
||
case 'Enter':
|
||
e.preventDefault();
|
||
const nextBtn = currentScreen.querySelector('.btn-next');
|
||
if (nextBtn && !nextBtn.disabled) {
|
||
nextQuestion();
|
||
}
|
||
break;
|
||
|
||
case 'Escape':
|
||
e.preventDefault();
|
||
confirmExit();
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
|
||
// ===== LANGUAGE SWITCHER EVENT LISTENERS =====
|
||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const langCode = this.dataset.lang;
|
||
applyLanguage(langCode);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |