admin/36739-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V4

Browse Source
This commit is contained in:
Flatlogic Bot 2025-12-07 22:02:28 +00:00
parent 77f93a84c2
commit 646bd7a199
10 changed files with 1148 additions and 757 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

638
assets/css/custom.css
View File

@ -1998,58 +1998,632 @@ body.menu-open {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.2);
color: var(--text-white);
padding: var(--space-2);
border-radius: 12px;
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
transition: all var(--duration-normal);
/* ------------------------------ */
/* QUESTIONNAIRE (KI-CHECK.PHP) */
/* ------------------------------ */
.questionnaire-container {
max-width: 800px;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
min-height: calc(100vh - 80px); /* Adjust for header */
display: flex;
flex-direction: column;
}
.usecase-btn:hover {
background: var(--cyan);
border-color: var(--cyan);
.welcome-screen, .question-screen, .completion-screen {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
width: 100%;
}
.welcome-screen.active, .question-screen.active, .completion-screen.active {
display: flex;
}
.fade-in {
animation: fade-in 0.5s var(--ease-smooth) forwards;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Welcome Screen */
.welcome-content {
max-width: 700px;
text-align: center;
}
.welcome-badge {
display: inline-block;
padding: 8px 20px;
background: var(--gradient-primary);
border-radius: 50px;
font: 14px var(--font-heading), bold, uppercase;
color: var(--bg-primary);
letter-spacing: 0.1em;
margin-bottom: 32px;
}
.welcome-title {
font-family: var(--font-heading);
font-size: var(--text-5xl);
font-weight: var(--weight-bold);
color: var(--text-white);
line-height: 1.2;
margin-bottom: 24px;
}
.welcome-description {
font-size: var(--text-xl);
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 48px;
}
.welcome-benefits {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 48px;
flex-wrap: wrap;
}
.benefit-item .benefit-icon {
margin-right: 8px;
color: var(--cyan);
}
.btn-start {
font-family: var(--font-heading);
font-weight: var(--weight-bold);
font-size: 18px;
color: var(--bg-primary);
background: var(--gradient-cyan);
padding: 16px 48px;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all var(--duration-normal);
text-decoration: none;
display: inline-flex;
}
.btn-start:hover {
filter: brightness(1.1);
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 245, 255, 0.3);
}
.welcome-note {
font-size: var(--text-sm);
color: var(--text-muted);
margin-top: 24px;
}
/* Progress Bar */
.progress-container {
width: 100%;
padding: var(--space-3) 0;
margin-bottom: var(--space-6);
text-align: center;
}
.progress-bar {
height: 8px;
background-color: var(--bg-tertiary);
border-radius: 4px;
width: 0;
transition: width var(--duration-normal) var(--ease-smooth);
background-image: var(--gradient-primary);
}
.progress-text {
font-family: var(--font-heading);
font-size: var(--text-sm);
color: var(--text-muted);
margin-top: var(--space-1);
font-weight: var(--weight-medium);
}
/* Question Screen */
.question-header {
width: 100%;
text-align: left;
margin-bottom: var(--space-4);
}
.section-title {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--purple);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.question-title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
color: var(--text-white);
margin-top: var(--space-1);
}
.options-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
width: 100%;
}
.option {
padding: var(--space-3);
background: var(--bg-secondary);
border: 1px solid var(--bg-tertiary);
border-radius: 12px;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-smooth);
font-size: var(--text-lg);
}
.option:hover {
background: var(--bg-tertiary);
border-color: var(--cyan);
transform: translateX(10px);
}
.option.selected {
background: var(--gradient-primary);
color: var(--bg-primary);
font-weight: var(--weight-bold);
border-color: transparent;
}
.textarea-option {
width: 100%;
min-height: 150px;
padding: var(--space-3);
background: var(--bg-secondary);
border: 1px solid var(--bg-tertiary);
border-radius: 12px;
font-family: var(--font-body);
font-size: var(--text-lg);
color: var(--text-white);
resize: vertical;
}
.textarea-option:focus {
outline: none;
border-color: var(--cyan);
box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2);
}
/* Navigation */
.navigation-buttons {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--space-6);
border-top: 1px solid var(--bg-tertiary);
padding-top: var(--space-4);
}
.btn-prev, .btn-next {
font-family: var(--font-heading);
font-weight: var(--weight-bold);
font-size: 16px;
padding: 12px 32px;
border-radius: 50px;
cursor: pointer;
transition: all var(--duration-normal);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-next {
background: var(--gradient-primary);
color: var(--bg-primary);
border: none;
}
.btn-next:hover {
filter: brightness(1.1);
}
.btn-prev {
background: transparent;
border: 1px solid var(--text-muted);
color: var(--text-muted);
}
.btn-prev:hover {
background: var(--bg-tertiary);
color: var(--text-white);
border-color: var(--text-white);
}
/* Completion Screen */
.email-capture-content, .thank-you-content {
text-align: center;
max-width: 700px;
}
#email-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-6);
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
#email-input {
font-family: var(--font-body);
font-size: 18px;
padding: 16px 24px;
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid var(--bg-tertiary);
color: var(--text-white);
text-align: center;
}
#email-input:focus {
outline: none;
border-color: var(--cyan);
box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2);
}
.consent-container {
font-size: var(--text-sm);
color: var(--text-muted);
text-align: left;
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.consent-container input {
margin-top: 4px;
flex-shrink: 0;
}
.consent-container a {
color: var(--cyan);
text-decoration: none;
}
.consent-container a:hover {
text-decoration: underline;
}
/* RESPONSIVE ADJUSTMENTS FOR SUBPAGES */
@media (max-width: 1023px) {
}
/* --- QUESTIONNAIRE STYLES --- */
.questionnaire-container {
min-height: 100vh;
background: #0A0E1A;
display: flex;
flex-direction: column;
position: relative;
overflow-x: hidden;
}
.welcome-screen {
min-height: 100vh;
padding: 120px 48px;
display: none;
align-items: center;
justify-content: center;
text-align: center;
}
.welcome-screen.active {
display: flex;
}
.welcome-content {
max-width: 700px;
}
.welcome-badge {
display: inline-block;
padding: 8px 20px;
background: var(--gradient-primary);
border-radius: 50px;
font: 14px 'Space Grotesk', bold, uppercase;
color: #0A0E1A;
letter-spacing: 0.1em;
margin-bottom: 32px;
}
.welcome-title {
font: 56px 'Space Grotesk', bold;
color: #FFFFFF;
line-height: 1.2;
margin-bottom: 24px;
}
.welcome-description {
font: 20px 'Inter', regular;
color: #CBD5E1;
line-height: 1.6;
margin-bottom: 48px;
}
.welcome-benefits {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 48px;
flex-wrap: wrap;
}
.welcome-benefits .benefit-item {
display: flex;
align-items: center;
gap: 8px;
font: 16px 'Inter', medium;
color: var(--text-gray);
}
.welcome-benefits .benefit-item span:first-child {
color: var(--cyan);
}
.btn-start {
font-family: var(--font-heading);
font-weight: var(--weight-bold);
border-radius: 50px;
padding: var(--space-2) var(--space-6);
font-size: var(--text-lg);
background: var(--gradient-primary);
color: var(--text-white);
border: none;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-smooth);
margin-bottom: 24px;
}
.btn-start:hover {
filter: brightness(1.1);
box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}
.welcome-note {
font-size: 14px;
color: var(--text-muted);
}
/* Question Screen */
.question-screen {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 48px;
}
.progress-bar-container {
width: 100%;
max-width: 800px;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
margin-bottom: 48px;
}
.progress-bar {
width: 0%;
height: 100%;
background: var(--gradient-primary);
border-radius: 4px;
transition: width 0.3s ease;
}
.question-content {
width: 100%;
max-width: 800px;
}
.question-header {
text-align: center;
margin-bottom: 48px;
}
.question-number {
font: 16px 'Space Grotesk', medium;
color: var(--cyan);
margin-bottom: 16px;
display: block;
}
.question-title {
font: 32px 'Space Grotesk', bold;
color: var(--text-white);
line-height: 1.3;
}
.options-container {
display: grid;
gap: 16px;
}
.option {
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
font-size: 18px;
color: var(--text-gray);
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.option:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--cyan);
}
.option.selected {
background: var(--gradient-primary);
color: var(--text-white);
border-color: transparent;
}
.textarea-option {
width: 100%;
min-height: 150px;
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
font-size: 18px;
color: var(--text-white);
font-family: var(--font-body);
resize: vertical;
}
.textarea-option:focus {
outline: none;
border-color: var(--cyan);
}
.navigation-buttons {
margin-top: 48px;
display: flex;
justify-content: space-between;
width: 100%;
max-width: 800px;
}
.btn-prev, .btn-next {
font-family: var(--font-body);
font-weight: var(--weight-semibold);
border-radius: 8px;
padding: 12px 24px;
border: 1px solid var(--text-muted);
background: transparent;
color: var(--text-gray);
cursor: pointer;
transition: all 0.2s ease;
}
.btn-next {
background: var(--cyan);
color: var(--bg-primary);
border-color: var(--cyan);
}
.btn-prev:hover, .btn-next:hover {
filter: brightness(1.2);
}
/* Email Capture & Thank You */
.email-capture-screen, .thank-you-screen {
text-align: center;
}
.email-capture-screen h2, .thank-you-screen h2 {
font: 32px 'Space Grotesk', bold;
color: var(--text-white);
margin-bottom: 16px;
}
.email-capture-screen p, .thank-you-screen p {
font-size: 18px;
color: var(--text-gray);
margin-bottom: 32px;
}
#email {
width: 100%;
max-width: 400px;
padding: 16px;
border-radius: 8px;
border: 1px solid var(--text-muted);
background: var(--bg-secondary);
color: var(--text-white);
font-size: 16px;
margin-bottom: 16px;
}
.consent-container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
max-width: 400px;
margin: 0 auto;
text-align: left;
}
#consent {
min-width: 16px;
min-height: 16px;
}
.consent-container label {
font-size: 14px;
color: var(--text-muted);
}
color: var(--text-gray);
padding: var(--space-2);
border-radius: 8px;
transition: all var(--duration-fast);
}
.usecase-btn:hover {
background: rgba(255,255,255,0.1);
border-color: var(--cyan);
color: var(--text-white);
}
@media (max-width: 767px) {
.page-headline {
font-size: var(--text-4xl);
}
.page-subtext {
font-size: var(--text-lg);
}
.target-cards-grid,
.target-cards-grid {
grid-template-columns: 1fr;
}
.core-abilities-grid {
grid-template-columns: 1fr;
}
.use-cases-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.page-hero-section {
padding: var(--space-8) 0;
}
.page-headline {
font-size: var(--text-3xl);
}
.timeline-bar {
grid-template-columns: 100px 1fr;
grid-template-columns: 100px 1fr 80px;
gap: var(--space-2);
}
.timeline-bar .bar-value {
grid-column: 2 / 3;
grid-row: 1;
justify-self: end;
padding-right: var(--space-2);
font-size: var(--text-base);
}
}
/* --- QUESTIONNAIRE --- */
.questionnaire-container {
min-height: 100vh;
background: var(--bg-primary);
display: flex;
flex-direction: column;
position: relative;
padding: var(--space-4);
font-family: var(--font-body);
color: var(--text-white);
}

340
assets/js/questionnaire.js Normal file
View File

@ -0,0 +1,340 @@
document.addEventListener('DOMContentLoaded', () => {
//
});
const questions = [
// SECTION A: Unternehmensprofil (Q1-5) - Placeholders
{
section: "Unternehmensprofil",
question: "In welcher Branche ist Ihr Unternehmen tätig?",
type: "single",
options: ["Tech", "Handel", "Dienstleistung", "Handwerk", "Industrie", "Sonstiges"]
},
{
section: "Unternehmensprofil",
question: "Wie viele Mitarbeiter hat Ihr Unternehmen?",
type: "single",
options: ["1-10", "11-50", "51-200", "201-1000", "1000+"]
},
{
section: "Unternehmensprofil",
question: "Was ist Ihre Rolle im Unternehmen?",
type: "single",
options: ["Geschäftsführer", "Abteilungsleiter", "Mitarbeiter", "Selbstständig"]
},
{
section: "Unternehmensprofil",
question: "Wie vertraut sind Sie mit KI-Technologien?",
type: "single",
options: ["Sehr vertraut", "Etwas vertraut", "Wenig vertraut", "Gar nicht vertraut"]
},
{
section: "Unternehmensprofil",
question: "Nutzt Ihr Unternehmen bereits KI-Anwendungen?",
type: "single",
options: ["Ja, intensiv", "Ja, teilweise", "Nein, aber geplant", "Nein"]
},
// SECTION B: ZIELE & PRIORITÄTEN (Q6-10)
{
section: "Ziele & Prioritäten",
question: "Welches Ziel möchtest du in den nächsten 30 Tagen erreichen?",
type: "multiple",
options: ["mehr Leads", "mehr Umsatz", "Zeit sparen", "Prozesse automatisieren", "besseren Überblick gewinnen", "Sonstiges"]
},
{
section: "Ziele & Prioritäten",
question: "Was ist langfristig dein wichtigstes Unternehmensziel?",
type: "single",
auto_advance: true,
options: ["Wachstum", "Automatisierung", "weniger Stress", "Skalierung", "Gewinnmaximierung"]
},
{
section: "Ziele & Prioritäten",
question: "Welche Kennzahlen sind dir aktuell am wichtigsten?",
type: "multiple",
options: ["Leads", "Umsatz", "Gewinn", "Zeitersparnis", "Effizienz", "Kundenzufriedenheit"]
},
{
section: "Ziele & Prioritäten",
question: "Wie schnell erwartest du sichtbare Ergebnisse?",
type: "single",
auto_advance: true,
options: ["1–7 Tage", "7–14 Tage", "30 Tage", "egal – Hauptsache nachhaltig"]
},
{
section: "Ziele & Prioritäten",
question: "Welche deiner Aufgaben möchtest du am liebsten sofort abgeben?",
type: "multiple",
options: ["Social Media", "Backoffice", "Kundenservice", "Sales", "Terminverwaltung", "E-Mails", "Angebote", "Rechnungen"]
},
// SECTION C: ENGPASSANALYSE (Q11-15)
{
section: "Engpassanalyse",
question: "Welche Aufgabe kostet dich derzeit am meisten Zeit pro Woche?",
type: "single",
options: ["Nachrichten beantworten", "Verwaltung", "Angebote", "Content-Erstellung", "Support", "Rechnungen"]
},
{
section: "Engpassanalyse",
question: "Wo entstehen deine meisten Fehler oder Verzögerungen?",
type: "single",
options: ["Manuelle Prozesse", "Fehlende Struktur", "Kommunikation", "Tools", "Datenpflege"]
},
{
section: "Engpassanalyse",
question: "Welche Prozesse sind aktuell komplett unstrukturiert?",
type: "multiple",
options: ["Kundenanfragen", "Sales", "Onboarding", "Backoffice", "Content", "Marketing"]
},
{
section: "Engpassanalyse",
question: "Welche deiner Abläufe fühlst du als „Flaschenhals"?",
type: "textarea",
max_chars: 500
},
{
section: "Engpassanalyse",
question: "Wie viel Zeit verbringst du wöchentlich mit Admin-Aufgaben?",
type: "single",
options: ["0-5h", "6-10h", "11-15h", "16-20h", "20+ Stunden"]
},
// SECTION D: AUTOMATISIERUNGSPOTENZIALE (Q16-20)
{
section: "Automatisierungspotenziale",
question: "Welche KI-Bereiche möchtest du nutzen?",
type: "multiple",
options: ["Content-Erstellung", "Social Media", "Marketing", "Sales", "Backoffice", "Analyse"]
},
{
section: "Automatisierungspotenziale",
question: "Wie wiederkehrend sind die Aufgaben, die du automatisieren möchtest?",
type: "single",
options: ["Täglich", "Wöchentlich", "Monatlich", "Selten", "Einmalig"]
},
{
section: "Automatisierungspotenziale",
question: "Welche Software-Tools sind bei dir im Einsatz?",
type: "textarea",
placeholder: "z.B. Excel, HubSpot, Salesforce, etc.",
max_chars: 500,
},
{
section: "Automatisierungspotenziale",
question: "Wie gut sind deine Unternehmensdaten dokumentiert und zugänglich?",
type: "single",
options: ["Sehr gut", "Gut", "Mittel", "Schlecht", "Sehr schlecht"]
},
{
section: "Automatisierungspotenziale",
question: "Welches Budget hast du für die KI-Integration vorgesehen?",
type: "single",
options: ["Keins", "< 1.000€", "1.000€ - 5.000€", "5.000€ - 10.000€", "> 10.000€"]
},
// SECTION E: MINDSET & BEREITSCHAFT (Q21-25)
{
section: "Mindset & Bereitschaft",
question: "Wie offen ist dein Team für die Einführung neuer Technologien?",
type: "single",
options: ["Sehr offen", "Offen", "Neutral", "Eher skeptisch", "Ablehnend"]
},
{
section: "Mindset & Bereitschaft",
question: "Hast du interne Ressourcen (Personal, Know-how) für ein KI-Projekt?",
type: "single",
options: ["Ja, umfassend", "Ja, teilweise", "Wenig", "Nein"]
},
{
section: "Mindset & Bereitschaft",
question: "Wie wichtig ist dir die Datensicherheit bei der Nutzung von KI?",
type: "single",
options: ["Extrem wichtig", "Sehr wichtig", "Wichtig", "Weniger wichtig"]
},
{
section: "Mindset & Bereitschaft",
question: "Was ist deine größte Sorge bei der Einführung von KI?",
type: "textarea",
placeholder: "z.B. Kosten, Sicherheit, Akzeptanz im Team",
max_chars: 500,
},
{
section: "Mindset & Bereitschaft",
question: "Bist du bereit, bestehende Prozesse anzupassen, um KI effektiv zu nutzen?",
type: "single",
options: ["Ja, absolut", "Ja, wenn nötig", "Eher ungerne", "Nein"]
},
];
let currentQuestionIndex = 0;
const userAnswers = {};
function startQuestionnaire() {
document.querySelector('.welcome-screen').classList.remove('active');
document.querySelector('.question-screen').classList.add('active');
displayQuestion();
}
function displayQuestion() {
const questionData = questions[currentQuestionIndex];
const container = document.getElementById('question-container');
container.innerHTML = '';
container.classList.remove('fade-in');
void container.offsetWidth; // Trigger reflow
container.classList.add('fade-in');
// Update Section Title
document.querySelector('.section-title').textContent = `Abschnitt: ${questionData.section}`;
let content = `
<h2 class="question-title">${questionData.question}</h2>
<div class="options-container">
`;
if (questionData.type === 'single' || questionData.type === 'multiple') {
questionData.options.forEach(option => {
const isSelected = (userAnswers[currentQuestionIndex] && (questionData.type === 'single' ? userAnswers[currentQuestionIndex] === option : userAnswers[currentQuestionIndex].includes(option)));
content += `
<div
class="option ${isSelected ? 'selected' : ''}"
onclick="selectOption(this, '${option}', '${questionData.type}', ${questionData.auto_advance || false})">
${option}
</div>`;
});
} else if (questionData.type === 'textarea') {
const value = userAnswers[currentQuestionIndex] || '';
content += `<textarea class="textarea-option" maxlength="${questionData.max_chars || 500}" placeholder="${questionData.placeholder || 'Deine Antwort...'}" oninput="handleTextarea(this.value)">${value}</textarea>`;
}
content += '</div>';
container.innerHTML = content;
updateProgress();
updateNavigation();
}
function selectOption(element, option, type, autoAdvance) {
if (type === 'single') {
userAnswers[currentQuestionIndex] = option;
// visual selection is handled in the next displayQuestion call
if (autoAdvance) {
setTimeout(nextQuestion, 300);
}
} else { // multiple
if (!userAnswers[currentQuestionIndex]) {
userAnswers[currentQuestionIndex] = [];
}
const index = userAnswers[currentQuestionIndex].indexOf(option);
if (index > -1) {
userAnswers[currentQuestionIndex].splice(index, 1);
} else {
userAnswers[currentQuestionIndex].push(option);
}
}
displayQuestion(); // Re-render to show selection state
}
function handleTextarea(value) {
userAnswers[currentQuestionIndex] = value;
}
function nextQuestion() {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
displayQuestion();
} else {
showCompletionScreen();
}
}
function prevQuestion() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
displayQuestion();
}
}
function updateProgress() {
const progress = (currentQuestionIndex / questions.length) * 100;
document.querySelector('.progress-bar').style.width = `${progress}%`;
document.querySelector('.progress-text').textContent = `Frage ${currentQuestionIndex + 1} / ${questions.length}`;
}
function updateNavigation() {
document.querySelector('.btn-prev').style.display = currentQuestionIndex > 0 ? 'inline-flex' : 'none';
const nextButton = document.querySelector('.btn-next');
if (currentQuestionIndex === questions.length - 1) {
nextButton.textContent = 'Abschliessen ›';
} else {
nextButton.textContent = 'Weiter →';
}
}
function showCompletionScreen() {
document.querySelector('.question-screen').classList.remove('active');
const completionContainer = document.querySelector('.completion-screen');
completionContainer.classList.add('active');
completionContainer.innerHTML = `
<div class="email-capture-content fade-in">
<div class="welcome-badge">LETZTER SCHRITT</div>
<h1 class="welcome-title"> <span class="gradient-text">Report</span> anfordern</h1>
<p class="welcome-description">
Fast geschafft! Geben Sie Ihre E-Mail-Adresse ein, um Ihren personalisierten KI-Fahrplan sofort zu erhalten.
</p>
<form id="email-form" onsubmit="submitQuestionnaire(event)">
<input type="email" id="email-input" placeholder="deine.email@beispiel.com" required>
<div class="consent-container">
<input type="checkbox" id="consent-checkbox" required>
<label for="consent-checkbox">
Ich stimme der Verarbeitung meiner Daten gemäß der <a href="/datenschutz" target="_blank">Datenschutzerklärung</a> zu und möchte den Report per E-Mail erhalten.
</label>
</div>
<button type="submit" class="btn-start">Report jetzt anfordern →</button>
</form>
</div>
`;
}
function submitQuestionnaire(event) {
event.preventDefault();
const email = document.getElementById('email-input').value;
const consent = document.getElementById('consent-checkbox').checked;
if (!consent) {
alert("Bitte stimmen Sie der Datenverarbeitung zu.");
return;
}
console.log("Email:", email);
console.log("Answers:", userAnswers);
// Show thank you message
const completionContainer = document.querySelector('.completion-screen');
completionContainer.innerHTML = `
<div class="thank-you-content fade-in">
<div class="welcome-badge">VIELEN DANK</div>
<h1 class="welcome-title">Ihr <span class="gradient-text">KI-Report</span> ist unterwegs!</h1>
<p class="welcome-description">
Wir haben mit der Analyse begonnen. Ihr personalisierter Fahrplan zur Automatisierung wird in wenigen Minuten in Ihrem Posteingang sein.
</p>
<div class="welcome-benefits">
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span>Analyse gestartet</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">📫</span>
<span>E-Mail versandt</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">🚀</span>
<span>Automatisierung wartet</span>
</div>
</div>
<a href="/" class="btn-start">Zurück zur Startseite</a>
</div>
`;
}

139
einsatzmoeglichkeiten.php
View File

@ -20,83 +20,7 @@
</head>
<body>
<header id="mainHeader">
<div class="inner-container">
<div class="logo-container">
<a href="/" class="logo-text">Future Now</a>
</div>
<nav class="main-nav">
<a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
<div class="nav-dropdown">
<button class="nav-link active">
<?php echo $t['nav_why_ai']; ?>
<span class="chevron">▼</span>
</button>
<div class="dropdown-menu">
<a href="fuer-wen.php" class="dropdown-item">
<div class="dropdown-item-icon">👥</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
</div>
</a>
<a href="warum-jetzt.php" class="dropdown-item">
<div class="dropdown-item-icon">⚡</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
</div>
</a>
<a href="was-ist-ki.php" class="dropdown-item">
<div class="dropdown-item-icon">🧠</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
</div>
</a>
<a href="einsatzmoeglichkeiten.php" class="dropdown-item active">
<div class="dropdown-item-icon">🚀</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
</div>
</a>
</div>
</div>
<a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
</nav>
<div class="header-right">
<div class="lang-switcher-container">
<button class="lang-switcher" id="langSwitcherBtn">
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
<span><?php echo strtoupper($lang); ?></span>
<span class="chevron">▼</span>
</button>
<div class="lang-dropdown" id="langDropdown">
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
</div>
</div>
<button class="cart-button">
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
<button class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<?php include 'includes/header.php'; ?>
<main class="page-main">
<section class="page-hero-section">
@ -282,66 +206,7 @@
</section>
</main>
<footer id="main-footer">
<div class="container-custom">
<div class="footer-grid">
<!-- Column 1: Company Info -->
<div class="footer-column">
<div class="footer-logo">Future Now</div>
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
<a href="mailto:info@future-now.online" class="footer-email">
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@future-now.online
</a>
</div>
<!-- Column 2: Quick Links -->
<div class="footer-column">
<h4 class="footer-heading">Quick Links</h4>
<nav class="footer-links">
<a href="fuer-wen.php">Für wen?</a>
<a href="warum-jetzt.php">Warum jetzt?</a>
<a href="was-ist-ki.php">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php">Einsatz</a>
</nav>
</div>
<!-- Column 3: Legal -->
<div class="footer-column">
<h4 class="footer-heading">Rechtliches</h4>
<nav class="footer-links">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="#cookies">Cookie-Einstellungen</a>
</nav>
</div>
<!-- Column 4: Newsletter -->
<div class="footer-column" id="newsletter">
<h4 class="footer-heading">KI-Updates erhalten</h4>
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn">L</a>
<a href="#" aria-label="Xing">X</a>
</div>
</div>
</div>
</footer>
<?php include 'includes/footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>

139
fuer-wen.php
View File

@ -20,83 +20,7 @@
</head>
<body>
<header id="mainHeader">
<div class="inner-container">
<div class="logo-container">
<a href="/" class="logo-text">Future Now</a>
</div>
<nav class="main-nav">
<a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
<div class="nav-dropdown">
<button class="nav-link active">
<?php echo $t['nav_why_ai']; ?>
<span class="chevron">▼</span>
</button>
<div class="dropdown-menu">
<a href="fuer-wen.php" class="dropdown-item active">
<div class="dropdown-item-icon">👥</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
</div>
</a>
<a href="warum-jetzt.php" class="dropdown-item">
<div class="dropdown-item-icon">⚡</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
</div>
</a>
<a href="was-ist-ki.php" class="dropdown-item">
<div class="dropdown-item-icon">🧠</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
</div>
</a>
<a href="einsatzmoeglichkeiten.php" class="dropdown-item">
<div class="dropdown-item-icon">🚀</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
</div>
</a>
</div>
</div>
<a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
</nav>
<div class="header-right">
<div class="lang-switcher-container">
<button class="lang-switcher" id="langSwitcherBtn">
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
<span><?php echo strtoupper($lang); ?></span>
<span class="chevron">▼</span>
</button>
<div class="lang-dropdown" id="langDropdown">
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
</div>
</div>
<button class="cart-button">
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
<button class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<?php include 'includes/header.php'; ?>
<main class="page-main">
<section class="page-hero-section">
@ -178,66 +102,7 @@
</section>
</main>
<footer id="main-footer">
<div class="container-custom">
<div class="footer-grid">
<!-- Column 1: Company Info -->
<div class="footer-column">
<div class="footer-logo">Future Now</div>
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
<a href="mailto:info@future-now.online" class="footer-email">
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@future-now.online
</a>
</div>
<!-- Column 2: Quick Links -->
<div class="footer-column">
<h4 class="footer-heading">Quick Links</h4>
<nav class="footer-links">
<a href="fuer-wen.php">Für wen?</a>
<a href="warum-jetzt.php">Warum jetzt?</a>
<a href="was-ist-ki.php">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php">Einsatz</a>
</nav>
</div>
<!-- Column 3: Legal -->
<div class="footer-column">
<h4 class="footer-heading">Rechtliches</h4>
<nav class="footer-links">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="#cookies">Cookie-Einstellungen</a>
</nav>
</div>
<!-- Column 4: Newsletter -->
<div class="footer-column" id="newsletter">
<h4 class="footer-heading">KI-Updates erhalten</h4>
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn">L</a>
<a href="#" aria-label="Xing">X</a>
</div>
</div>
</div>
</footer>
<?php include 'includes/footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>

62
includes/footer.php Normal file
View File

@ -0,0 +1,62 @@
<footer id="main-footer">
<div class="container-custom">
<div class="footer-grid">
<!-- Column 1: Company Info -->
<div class="footer-column">
<div class="footer-logo">Future Now</div>
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
<a href="mailto:info@future-now.online" class="footer-email">
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@future-now.online
</a>
</div>
<!-- Column 2: Quick Links -->
<div class="footer-column">
<h4 class="footer-heading">Quick Links</h4>
<nav class="footer-links">
<a href="fuer-wen.php">Für wen?</a>
<a href="warum-jetzt.php">Warum jetzt?</a>
<a href="was-ist-ki.php">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php">Einsatz</a>
<a href="ki-check.php">KI-Check</a>
<a href="#blog">Blog</a>
</nav>
</div>
<!-- Column 3: Legal -->
<div class="footer-column">
<h4 class="footer-heading">Rechtliches</h4>
<nav class="footer-links">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="#cookies">Cookie-Einstellungen</a>
</nav>
</div>
<!-- Column 4: Newsletter -->
<div class="footer-column" id="newsletter">
<h4 class="footer-heading">KI-Updates erhalten</h4>
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn">L</a>
<a href="#" aria-label="Xing">X</a>
</div>
</div>
</div>
</footer>

115
includes/header.php Normal file
View File

@ -0,0 +1,115 @@
<header id="mainHeader">
<div class="inner-container">
<div class="logo-container">
<span class="logo-text">Future Now</span>
</div>
<nav class="main-nav">
<a href="index.php#home" class="nav-link active"><?php echo $t['nav_home']; ?></a>
<div class="nav-dropdown">
<button class="nav-link">
<?php echo $t['nav_why_ai']; ?>
<span class="chevron">▼</span>
</button>
<div class="dropdown-menu">
<a href="fuer-wen.php" class="dropdown-item">
<div class="dropdown-item-icon">👥</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
</div>
</a>
<a href="warum-jetzt.php" class="dropdown-item">
<div class="dropdown-item-icon">⚡</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
</div>
</a>
<a href="was-ist-ki.php" class="dropdown-item">
<div class="dropdown-item-icon">🧠</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
</div>
</a>
<a href="einsatzmoeglichkeiten.php" class="dropdown-item">
<div class="dropdown-item-icon">🚀</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
</div>
</a>
</div>
</div>
<a href="ki-check.php" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
</nav>
<div class="header-right">
<div class="lang-switcher-container">
<button class="lang-switcher" id="langSwitcherBtn">
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
<span><?php echo strtoupper($lang); ?></span>
<span class="chevron">▼</span>
</button>
<div class="lang-dropdown" id="langDropdown">
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
</div>
</div>
<button class="cart-button">
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
<button class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
<button class="mobile-close" id="closeMobileMenu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<div class="mobile-menu-content">
<nav class="mobile-nav">
<a href="index.php#home" class="mobile-nav-link">Home</a>
<div class="mobile-nav-section">
<button class="mobile-nav-link section-toggle">
Warum KI?
<span class="toggle-icon">▼</span>
</button>
<div class="mobile-subsection">
<a href="fuer-wen.php" class="mobile-subnav-link">Für wen ist KI?</a>
<a href="warum-jetzt.php" class="mobile-subnav-link">Warum jetzt handeln?</a>
<a href="was-ist-ki.php" class="mobile-subnav-link">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php" class="mobile-subnav-link">Einsatzmöglichkeiten</a>
</div>
</div>
<a href="ki-check.php" class="mobile-nav-link">KI-Check</a>
<a href="#ueber-uns" class="mobile-nav-link">Über uns</a>
</nav>
<div class="mobile-menu-footer">
<a href="ki-check.php" class="btn btn-primary">Jetzt KI-Check starten</a>
<div class="lang-switcher-mobile">
<span>Sprache:</span>
<a href="#" class="active">DE</a>
<a href="#">EN</a>
</div>
</div>
</div>
</div>

179
index.php
View File

@ -21,121 +21,7 @@
</head>
<body>
<header id="mainHeader">
<div class="inner-container">
<div class="logo-container">
<span class="logo-text">Future Now</span>
</div>
<nav class="main-nav">
<a href="#home" class="nav-link active"><?php echo $t['nav_home']; ?></a>
<div class="nav-dropdown">
<button class="nav-link">
<?php echo $t['nav_why_ai']; ?>
<span class="chevron">▼</span>
</button>
<div class="dropdown-menu">
<a href="fuer-wen.php" class="dropdown-item">
<div class="dropdown-item-icon">👥</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
</div>
</a>
<a href="warum-jetzt.php" class="dropdown-item">
<div class="dropdown-item-icon">⚡</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
</div>
</a>
<a href="was-ist-ki.php" class="dropdown-item">
<div class="dropdown-item-icon">🧠</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
</div>
</a>
<a href="einsatzmoeglichkeiten.php" class="dropdown-item">
<div class="dropdown-item-icon">🚀</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
</div>
</a>
</div>
</div>
<a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
</nav>
<div class="header-right">
<div class="lang-switcher-container">
<button class="lang-switcher" id="langSwitcherBtn">
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
<span><?php echo strtoupper($lang); ?></span>
<span class="chevron">▼</span>
</button>
<div class="lang-dropdown" id="langDropdown">
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
</div>
</div>
<button class="cart-button">
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
<button class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
<button class="mobile-close" id="closeMobileMenu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<div class="mobile-menu-content">
<nav class="mobile-nav">
<a href="#home" class="mobile-nav-link">Home</a>
<div class="mobile-nav-section">
<button class="mobile-nav-link section-toggle">
Warum KI?
<span class="toggle-icon">▼</span>
</button>
<div class="mobile-subsection">
<a href="fuer-wen.php" class="mobile-subnav-link">Für wen ist KI?</a>
<a href="warum-jetzt.php" class="mobile-subnav-link">Warum jetzt handeln?</a>
<a href="was-ist-ki.php" class="mobile-subnav-link">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php" class="mobile-subnav-link">Einsatzmöglichkeiten</a>
</div>
</div>
<a href="#ki-check" class="mobile-nav-link">KI-Check</a>
<a href="#ueber-uns" class="mobile-nav-link">Über uns</a>
</nav>
<div class="mobile-menu-footer">
<a href="#ki-check" class="btn btn-primary">Jetzt KI-Check starten</a>
<div class="lang-switcher-mobile">
<span>Sprache:</span>
<a href="#" class="active">DE</a>
<a href="#">EN</a>
</div>
</div>
</div>
</div>
<?php include 'includes/header.php'; ?>
<main>
<section id="home" class="hero-section">
@ -332,68 +218,7 @@
</section>
</main>
<footer id="main-footer">
<div class="container-custom">
<div class="footer-grid">
<!-- Column 1: Company Info -->
<div class="footer-column">
<div class="footer-logo">Future Now</div>
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
<a href="mailto:info@future-now.online" class="footer-email">
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@future-now.online
</a>
</div>
<!-- Column 2: Quick Links -->
<div class="footer-column">
<h4 class="footer-heading">Quick Links</h4>
<nav class="footer-links">
<a href="fuer-wen.php">Für wen?</a>
<a href="warum-jetzt.php">Warum jetzt?</a>
<a href="was-ist-ki.php">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php">Einsatz</a>
<a href="#ki-check">KI-Check</a>
<a href="#blog">Blog</a>
</nav>
</div>
<!-- Column 3: Legal -->
<div class="footer-column">
<h4 class="footer-heading">Rechtliches</h4>
<nav class="footer-links">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="#cookies">Cookie-Einstellungen</a>
</nav>
</div>
<!-- Column 4: Newsletter -->
<div class="footer-column" id="newsletter">
<h4 class="footer-heading">KI-Updates erhalten</h4>
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn">L</a>
<a href="#" aria-label="Xing">X</a>
</div>
</div>
</div>
</footer>
<?php include 'includes/footer.php'; ?>
<!-- COOKIE BANNER -->
<div class="cookie-banner" id="cookieBanner">

15
ki-check.php Normal file
View File

@ -0,0 +1,15 @@
<?php
include 'includes/header.php';
?>
<div class="questionnaire-container">
<div class="welcome-screen">
<h1>AI Readiness Check</h1>
<p>This is the welcome screen.</p>
<button class="btn-start">Start</button>
</div>
</div>
<?php
include 'includes/footer.php';
?>

139
warum-jetzt.php
View File

@ -20,83 +20,7 @@
</head>
<body>
<header id="mainHeader">
<div class="inner-container">
<div class="logo-container">
<a href="/" class="logo-text">Future Now</a>
</div>
<nav class="main-nav">
<a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
<div class="nav-dropdown">
<button class="nav-link active">
<?php echo $t['nav_why_ai']; ?>
<span class="chevron">▼</span>
</button>
<div class="dropdown-menu">
<a href="fuer-wen.php" class="dropdown-item">
<div class="dropdown-item-icon">👥</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
</div>
</a>
<a href="warum-jetzt.php" class="dropdown-item active">
<div class="dropdown-item-icon">⚡</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
</div>
</a>
<a href="was-ist-ki.php" class="dropdown-item">
<div class="dropdown-item-icon">🧠</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
</div>
</a>
<a href="einsatzmoeglichkeiten.php" class="dropdown-item">
<div class="dropdown-item-icon">🚀</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
</div>
</a>
</div>
</div>
<a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
</nav>
<div class="header-right">
<div class="lang-switcher-container">
<button class="lang-switcher" id="langSwitcherBtn">
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
<span><?php echo strtoupper($lang); ?></span>
<span class="chevron">▼</span>
</button>
<div class="lang-dropdown" id="langDropdown">
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
</div>
</div>
<button class="cart-button">
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
<button class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<?php include 'includes/header.php'; ?>
<main class="page-main">
<section class="page-hero-section">
@ -170,66 +94,7 @@
</section>
</main>
<footer id="main-footer">
<div class="container-custom">
<div class="footer-grid">
<!-- Column 1: Company Info -->
<div class="footer-column">
<div class="footer-logo">Future Now</div>
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
<a href="mailto:info@future-now.online" class="footer-email">
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@future-now.online
</a>
</div>
<!-- Column 2: Quick Links -->
<div class="footer-column">
<h4 class="footer-heading">Quick Links</h4>
<nav class="footer-links">
<a href="fuer-wen.php">Für wen?</a>
<a href="warum-jetzt.php">Warum jetzt?</a>
<a href="was-ist-ki.php">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php">Einsatz</a>
</nav>
</div>
<!-- Column 3: Legal -->
<div class="footer-column">
<h4 class="footer-heading">Rechtliches</h4>
<nav class="footer-links">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="#cookies">Cookie-Einstellungen</a>
</nav>
</div>
<!-- Column 4: Newsletter -->
<div class="footer-column" id="newsletter">
<h4 class="footer-heading">KI-Updates erhalten</h4>
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn">L</a>
<a href="#" aria-label="Xing">X</a>
</div>
</div>
</div>
</footer>
<?php include 'includes/footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>

139
was-ist-ki.php
View File

@ -20,83 +20,7 @@
</head>
<body>
<header id="mainHeader">
<div class="inner-container">
<div class="logo-container">
<a href="/" class="logo-text">Future Now</a>
</div>
<nav class="main-nav">
<a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
<div class="nav-dropdown">
<button class="nav-link active">
<?php echo $t['nav_why_ai']; ?>
<span class="chevron">▼</span>
</button>
<div class="dropdown-menu">
<a href="fuer-wen.php" class="dropdown-item">
<div class="dropdown-item-icon">👥</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
</div>
</a>
<a href="warum-jetzt.php" class="dropdown-item">
<div class="dropdown-item-icon">⚡</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
</div>
</a>
<a href="was-ist-ki.php" class="dropdown-item active">
<div class="dropdown-item-icon">🧠</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
</div>
</a>
<a href="einsatzmoeglichkeiten.php" class="dropdown-item">
<div class="dropdown-item-icon">🚀</div>
<div class="dropdown-item-text">
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
</div>
</a>
</div>
</div>
<a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
</nav>
<div class="header-right">
<div class="lang-switcher-container">
<button class="lang-switcher" id="langSwitcherBtn">
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
<span><?php echo strtoupper($lang); ?></span>
<span class="chevron">▼</span>
</button>
<div class="lang-dropdown" id="langDropdown">
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
</div>
</div>
<button class="cart-button">
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
<button class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<?php include 'includes/header.php'; ?>
<main class="page-main">
<section class="page-hero-section">
@ -150,66 +74,7 @@
</main>
<footer id="main-footer">
<div class="container-custom">
<div class="footer-grid">
<!-- Column 1: Company Info -->
<div class="footer-column">
<div class="footer-logo">Future Now</div>
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
<a href="mailto:info@future-now.online" class="footer-email">
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@future-now.online
</a>
</div>
<!-- Column 2: Quick Links -->
<div class="footer-column">
<h4 class="footer-heading">Quick Links</h4>
<nav class="footer-links">
<a href="fuer-wen.php">Für wen?</a>
<a href="warum-jetzt.php">Warum jetzt?</a>
<a href="was-ist-ki.php">Was ist KI?</a>
<a href="einsatzmoeglichkeiten.php">Einsatz</a>
</nav>
</div>
<!-- Column 3: Legal -->
<div class="footer-column">
<h4 class="footer-heading">Rechtliches</h4>
<nav class="footer-links">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="#cookies">Cookie-Einstellungen</a>
</nav>
</div>
<!-- Column 4: Newsletter -->
<div class="footer-column" id="newsletter">
<h4 class="footer-heading">KI-Updates erhalten</h4>
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn">L</a>
<a href="#" aria-label="Xing">X</a>
</div>
</div>
</div>
</footer>
<?php include 'includes/footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>