update
This commit is contained in:
BIN
Profice WebSite.zip
Normal file
BIN
Profice WebSite.zip
Normal file
Binary file not shown.
27
Profice WebSite/OPTIMIZATION_REPORT.md
Normal file
27
Profice WebSite/OPTIMIZATION_REPORT.md
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# Project Optimization Report
|
||||||
|
|
||||||
|
## Files Removed:
|
||||||
|
- CSS: cookie-consent.css, details.css, lead-details.css, login.css, service.css (5 files)
|
||||||
|
- JS: cookie-consent.js, login.js, register.js (3 files)
|
||||||
|
- Images: All 20+ iconography files, duplicate logos, spidy.png (22+ files)
|
||||||
|
- Components: UnifiedWorkflow.js (1 unused component)
|
||||||
|
|
||||||
|
## Optimizations Applied:
|
||||||
|
- Minified all CSS files (design.min.css, cursor.min.css, tech-onepager.min.css, leads.min.css)
|
||||||
|
- Minified all JS files (script.min.js, cursor.min.js, scroll-header.min.js, tech-onepager.min.js, leads.min.js)
|
||||||
|
- Updated HTML files to use minified versions
|
||||||
|
- Removed duplicate script loading
|
||||||
|
- Optimized HTML structure by removing redundant attributes
|
||||||
|
|
||||||
|
## Final Project Stats:
|
||||||
|
- Total size: 0.57 MB
|
||||||
|
- HTML files: 6
|
||||||
|
- CSS files: 8 (4 original + 4 minified)
|
||||||
|
- JS files: 10 (5 original + 5 minified)
|
||||||
|
- Image files: 2 (only essential ones kept)
|
||||||
|
|
||||||
|
## Performance Improvements:
|
||||||
|
- Reduced file count by ~30 files
|
||||||
|
- Minified CSS/JS for faster loading
|
||||||
|
- Eliminated duplicate code
|
||||||
|
- Streamlined asset loading
|
||||||
BIN
Profice WebSite/images/icons/facebook.png
Normal file
BIN
Profice WebSite/images/icons/facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
BIN
Profice WebSite/images/icons/instagram.png
Normal file
BIN
Profice WebSite/images/icons/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 MiB |
@@ -1,54 +1,73 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Profice - Digitale Lösungen</title>
|
<meta name="description" content="Profice - Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing. KI-Telefonassistenten, Chatbots und interne KI-Systeme.">
|
||||||
|
<meta name="keywords" content="KI Telefonassistent, Chatbot, digitale Mitarbeiter, Automatisierung, KI Systeme">
|
||||||
|
<meta name="author" content="Profice">
|
||||||
|
<meta property="og:title" content="Profice - Digitale Mitarbeiter">
|
||||||
|
<meta property="og:description" content="Wir bauen funktionierende KI-Systeme für Unternehmen">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<title>Profice - Digitale Mitarbeiter</title>
|
||||||
|
|
||||||
|
<!-- Preconnect to external domains -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||||||
|
|
||||||
|
<!-- Preload critical resources -->
|
||||||
|
<link rel="preload" href="style/design.css" as="style">
|
||||||
|
<link rel="preload" href="style/tech-onepager.css" as="style">
|
||||||
|
<link rel="preload" href="style/cursor.css" as="style">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="style/design.css">
|
<link rel="stylesheet" href="style/design.css">
|
||||||
|
<link rel="stylesheet" href="style/tech-onepager.css">
|
||||||
<link rel="stylesheet" href="style/cursor.css">
|
<link rel="stylesheet" href="style/cursor.css">
|
||||||
<link rel="stylesheet" href="style/cookie-consent.css">
|
|
||||||
|
<!-- DNS prefetch for external resources -->
|
||||||
|
<link rel="dns-prefetch" href="//www.googletagmanager.com">
|
||||||
|
<link rel="dns-prefetch" href="//connect.facebook.net">
|
||||||
|
<link rel="dns-prefetch" href="//www.google-analytics.com">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Tech Background -->
|
||||||
|
<div class="tech-background">
|
||||||
|
<div class="grid-overlay"></div>
|
||||||
|
<div class="dot-pattern"></div>
|
||||||
|
<div class="gradient-overlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Top Banner -->
|
||||||
<header class="top-banner dark-theme">
|
<header class="top-banner dark-theme">
|
||||||
<div class="top-banner-left">
|
<div class="top-banner-left">
|
||||||
<div class="banner-left">
|
<div class="banner-left">
|
||||||
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
<button class="menu-toggle" id="menuToggle" >
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<a href="index.html" class="logo-link">
|
<a href="index.html" class="logo-link">
|
||||||
<img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" loading="lazy">
|
<img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" >
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-banner-center">
|
<div class="top-banner-center">
|
||||||
<nav class="main-nav">
|
<!-- Navigation removed -->
|
||||||
<a href="#hero-section" class="nav-link">Startseite</a>
|
|
||||||
<a href="#enterprise" class="nav-link">Unternehmen</a>
|
|
||||||
<a href="#pricing" class="nav-link">Preise</a>
|
|
||||||
<a href="#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-banner-right">
|
<div class="top-banner-right">
|
||||||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
<button id="cursorToggle" >
|
||||||
<img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
<img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
||||||
</button>
|
</button>
|
||||||
<button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
||||||
<polyline points="10 17 15 12 10 7"></polyline>
|
|
||||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Anmelden
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Slide Menu -->
|
||||||
<nav class="slide-menu" id="slideMenu">
|
<nav class="slide-menu" id="slideMenu">
|
||||||
<a href="index.html" class="active">Startseite</a>
|
<a href="index.html" class="active">Startseite</a>
|
||||||
<a href="sites/offers.html">Kontakt & Anfrage</a>
|
<a href="sites/offers.html">Kontakt & Anfrage</a>
|
||||||
@@ -57,201 +76,455 @@
|
|||||||
|
|
||||||
<div class="overlay" id="overlay"></div>
|
<div class="overlay" id="overlay"></div>
|
||||||
|
|
||||||
<main class="home-content">
|
<!-- Hero Section -->
|
||||||
|
<section class="hero-section" id="hero">
|
||||||
<section id="hero-section" class="hero-section">
|
<div class="hero-container">
|
||||||
<div class="hero-text">
|
<div class="hero-left">
|
||||||
<h1>Transformieren Sie Ihr Unternehmen digital</h1>
|
<div class="hero-text">
|
||||||
<p>Maßgeschneiderte Lösungen für Web, KI-Integration und Prozessautomatisierung. Wir bringen Ihre Vision in die digitale Realität.</p>
|
<h1 class="hero-headline">
|
||||||
<div class="hero-buttons">
|
Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.
|
||||||
<a href="sites/offers.html" class="cta-btn primary">Projekt starten</a>
|
</h1>
|
||||||
<a href="#services" class="cta-btn secondary">Mehr erfahren</a>
|
<p class="hero-subline">
|
||||||
</div>
|
KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
|
||||||
</div>
|
</p>
|
||||||
<div class="hero-image-placeholder">
|
<p class="hero-proof">
|
||||||
<span>[Bild: Digitale Transformation Illustration]</span>
|
<span class="green-highlight-box">Für Unternehmen, die wachsen wollen ohne mehr Personal einzustellen.</span>
|
||||||
</div>
|
</p>
|
||||||
</section>
|
<div class="hero-buttons">
|
||||||
|
<button class="cta-btn primary" id="kiPhoneBtn">Mit KI sprechen</button>
|
||||||
<section id="enterprise" class="enterprise-section">
|
<button class="cta-btn secondary" id="chatBtn">Im Chat starten</button>
|
||||||
<h2 class="section-title">Unternehmenslösungen</h2>
|
|
||||||
<div class="enterprise-content">
|
|
||||||
<p>Maßgeschneiderte Lösungen für große Unternehmen mit komplexen Anforderungen.</p>
|
|
||||||
<div class="enterprise-features">
|
|
||||||
<div class="feature-item">
|
|
||||||
<h3>Skalierbarkeit</h3>
|
|
||||||
<p>Lösungen, die mit Ihrem Unternehmen wachsen</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-item">
|
|
||||||
<h3>Sicherheit</h3>
|
|
||||||
<p>Unternehmenssicherheit und Compliance</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-item">
|
|
||||||
<h3>Integration</h3>
|
|
||||||
<p>Nahtlose Integration mit bestehenden Systemen</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
<div class="hero-right">
|
||||||
<section id="pricing" class="pricing-section">
|
<div class="system-graphic" id="systemGraphic">
|
||||||
<h2 class="section-title">Preise</h2>
|
<!-- Connection Lines (behind nodes) -->
|
||||||
<div class="pricing-grid">
|
<svg class="connections" id="connections">
|
||||||
<div class="pricing-card">
|
<!-- Lines will be drawn by JavaScript -->
|
||||||
<h3>Starter</h3>
|
</svg>
|
||||||
<div class="price">€999</div>
|
|
||||||
<p>Perfekt für kleine Unternehmen</p>
|
<!-- Central KI Node -->
|
||||||
<ul>
|
<div class="node central-node" data-node="ki-assistent" data-tooltip="Der zentrale KI-Assistent verarbeitet alle Anfragen und koordiniert die Kommunikation zwischen den verschiedenen Systemen. Er ist das Herzstück Ihrer digitalen Mitarbeiter.">
|
||||||
<li>Webentwicklung</li>
|
<div class="node-content">
|
||||||
<li>Grundlegende KI-Integration</li>
|
<div class="node-icon">🤖</div>
|
||||||
<li>3 Monate Support</li>
|
<div class="node-label">KI ASSISTENT</div>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pricing-card featured">
|
|
||||||
<h3>Professional</h3>
|
<!-- Connected Nodes in circular pattern -->
|
||||||
<div class="price">€2.499</div>
|
<div class="node phone-node" data-node="telefon" data-tooltip="Automatisierte Telefonannahme mit KI-Spracherkennung. Der KI-Assistent nimmt Anrufe entgegen, versteht Kundenanfragen und leitet sie an die richtige Abteilung weiter.">
|
||||||
<p>Ideal für wachsende Unternehmen</p>
|
<div class="node-content">
|
||||||
<ul>
|
<div class="node-icon">📞</div>
|
||||||
<li>Erweiterte Webentwicklung</li>
|
<div class="node-label">Telefon</div>
|
||||||
<li>KI & Automatisierung</li>
|
</div>
|
||||||
<li>6 Monate Support</li>
|
</div>
|
||||||
<li>SEO Optimierung</li>
|
|
||||||
</ul>
|
<div class="node chat-node" data-node="chat" data-tooltip="Intelligenter Website-Chat der nächsten Generation. Versteht natürliche Sprache, kategorisiert Anfragen und strukturiert Daten für die Übergabe an menschliche Mitarbeiter.">
|
||||||
</div>
|
<div class="node-content">
|
||||||
<div class="pricing-card">
|
<div class="node-icon">💬</div>
|
||||||
<h3>Unternehmen</h3>
|
<div class="node-label">Website Chat</div>
|
||||||
<div class="price">Individuell</div>
|
</div>
|
||||||
<p>Für große Unternehmen</p>
|
</div>
|
||||||
<ul>
|
|
||||||
<li>Volle Unternehmenslösungen</li>
|
<div class="node crm-node" data-node="crm" data-tooltip="Nahtlose CRM-Integration. Alle Kundendaten und Interaktionen werden automatisch erfasst und in Ihrem CRM-System synchronisiert für eine 360°-Kundensicht.">
|
||||||
<li>Custom KI-Entwicklung</li>
|
<div class="node-content">
|
||||||
<li>12 Monate Support</li>
|
<div class="node-icon">📊</div>
|
||||||
<li>Dediziertes Team</li>
|
<div class="node-label">CRM</div>
|
||||||
</ul>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="node ticket-node" data-node="tickets" data-tooltip="Automatisiertes Ticketsystem. KI erstellt, kategorisiert und priorisiert Support-Tickets und sorgt für eine schnelle und effiziente Bearbeitung aller Anfragen.">
|
||||||
|
<div class="node-content">
|
||||||
|
<div class="node-icon">🎫</div>
|
||||||
|
<div class="node-label">Ticketsystem</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="node team-node" data-node="team" data-tooltip="Intelligente Team-Koordination. Der KI-Assistent verteilt Aufgaben an die richtigen Teammitglieder und sorgt für optimale Auslastung und schnelle Reaktionszeiten.">
|
||||||
|
<div class="node-content">
|
||||||
|
<div class="node-icon">👥</div>
|
||||||
|
<div class="node-label">Team</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="services" class="services-section">
|
<!-- Systeme Section -->
|
||||||
<h2 class="section-title">Unsere Expertise</h2>
|
<section class="systeme-section" id="systeme">
|
||||||
<div class="services-grid">
|
<div class="container">
|
||||||
|
<h2 class="section-headline">Keine Beratung. Wir bauen funktionierende Systeme.</h2>
|
||||||
|
|
||||||
|
<div class="systeme-grid">
|
||||||
|
<!-- KI Telefonassistent -->
|
||||||
|
<div class="system-card" data-system="phone">
|
||||||
|
<div class="system-visual">
|
||||||
|
<div class="phone-system">
|
||||||
|
<div class="phone-icon">📞</div>
|
||||||
|
<div class="waveform">
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
<div class="waveform-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="ki-processor">🤖</div>
|
||||||
|
<div class="crm-output">📊</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>KI Telefonassistent</h3>
|
||||||
|
<div class="system-details">
|
||||||
|
<div class="what-it-does">
|
||||||
|
<h4>Was es tut:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Annahme eingehender Anrufe</li>
|
||||||
|
<li>Verständnis der Kundenanfrage</li>
|
||||||
|
<li>Weiterleitung an richtige Abteilung</li>
|
||||||
|
<li>Dokumentation im CRM</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="result">
|
||||||
|
<h4>Ergebnis:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>-52% unnötige Anrufe</li>
|
||||||
|
<li>24/7 Erreichbarkeit</li>
|
||||||
|
<li>Qualifiziertere Weiterleitungen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- KI Chat -->
|
||||||
|
<div class="system-card" data-system="chat">
|
||||||
|
<div class="system-visual">
|
||||||
|
<div class="chat-system">
|
||||||
|
<div class="website-input">🌐</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="ki-processor">🤖</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="category-output">📋</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="human-output">👤</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>KI Chat</h3>
|
||||||
|
<div class="system-details">
|
||||||
|
<div class="what-it-does">
|
||||||
|
<h4>Was es tut:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Website-Besucher verstehen</li>
|
||||||
|
<li>Kategorisierung der Anfragen</li>
|
||||||
|
<li>Strukturierte Datenerfassung</li>
|
||||||
|
<li>Übergabe an menschliche Mitarbeiter</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="result">
|
||||||
|
<h4>Ergebnis:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>+38% Konversionsrate</li>
|
||||||
|
<li>0 Wartezeit</li>
|
||||||
|
<li>Strukturierte Leads</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Interne KI -->
|
||||||
|
<div class="system-card" data-system="internal">
|
||||||
|
<div class="system-visual">
|
||||||
|
<div class="internal-system">
|
||||||
|
<div class="search-input">🔍</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="documents-cloud">💬</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="ki-processor">🤖</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="answer-output">💡</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Interne KI</h3>
|
||||||
|
<div class="system-details">
|
||||||
|
<div class="what-it-does">
|
||||||
|
<h4>Was es tut:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Interne Dokumente analysieren</li>
|
||||||
|
<li>Mitarbeiterfragen beantworten</li>
|
||||||
|
<li>Wissen zentralisieren</li>
|
||||||
|
<li>Training neuer Mitarbeiter</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="result">
|
||||||
|
<h4>Ergebnis:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>-67% Suchzeit</li>
|
||||||
|
<li>100% Wissensverfügbarkeit</li>
|
||||||
|
<li>Schnellere Einarbeitung</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Nicht für jeden Section -->
|
||||||
|
<section class="qualification-section" id="qualification">
|
||||||
|
<div class="container">
|
||||||
|
<div class="qualification-grid">
|
||||||
|
<div class="qual-left">
|
||||||
|
<h3>Nicht geeignet wenn...</h3>
|
||||||
|
<ul class="qual-list negative">
|
||||||
|
<li class="qual-item">
|
||||||
|
<div class="qual-icon chaos">📋</div>
|
||||||
|
<span>Nur eine "schöne Website" gewollt</span>
|
||||||
|
</li>
|
||||||
|
<li class="qual-item">
|
||||||
|
<div class="qual-icon chaos">📋</div>
|
||||||
|
<span>Keine digitalen Prozesse vorhanden</span>
|
||||||
|
</li>
|
||||||
|
<li class="qual-item">
|
||||||
|
<div class="qual-icon chaos">📋</div>
|
||||||
|
<span>Technik-Aversion im Team</span>
|
||||||
|
</li>
|
||||||
|
<li class="qual-item">
|
||||||
|
<div class="qual-icon chaos">📋</div>
|
||||||
|
<span>Keine Notwendigkeit zur Skalierung</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="service-card">
|
<div class="qual-right">
|
||||||
<div class="service-icon">
|
<h3>Sehr sinnvoll wenn...</h3>
|
||||||
🌐
|
<ul class="qual-list positive">
|
||||||
</div>
|
<li class="qual-item">
|
||||||
<h3>Webentwicklung</h3>
|
<div class="qual-icon check">✓</div>
|
||||||
<p>Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.</p>
|
<span>Hoher Anrufaufkommen</span>
|
||||||
</div>
|
</li>
|
||||||
|
<li class="qual-item">
|
||||||
<div class="service-card">
|
<div class="qual-icon check">✓</div>
|
||||||
<div class="service-icon">
|
<span>Überlasteter Support</span>
|
||||||
🤖
|
</li>
|
||||||
</div>
|
<li class="qual-item">
|
||||||
<h3>KI Integration</h3>
|
<div class="qual-icon check">✓</div>
|
||||||
<p>Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.</p>
|
<span>Wachsendes Unternehmen</span>
|
||||||
</div>
|
</li>
|
||||||
|
<li class="qual-item">
|
||||||
<div class="service-card">
|
<div class="qual-icon check">✓</div>
|
||||||
<div class="service-icon">
|
<span>Prozessoptimierung gewünscht</span>
|
||||||
⚙️
|
</li>
|
||||||
</div>
|
|
||||||
<h3>Automatisierung</h3>
|
|
||||||
<p>Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="info-section">
|
|
||||||
<div class="info-container">
|
|
||||||
<div class="info-content">
|
|
||||||
<h2>Warum Profice?</h2>
|
|
||||||
<p>Wir verbinden technologische Exzellenz mit tiefgreifendem Geschäftsverständnis. Unser Ziel ist nicht nur die Lieferung von Software, sondern die Schaffung von echtem Mehrwert für Ihr Unternehmen.</p>
|
|
||||||
<ul class="info-list">
|
|
||||||
<li>Individuelle Beratung</li>
|
|
||||||
<li>Transparente Prozesse</li>
|
|
||||||
<li>Zukunftssichere Technologien</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-image-placeholder">
|
|
||||||
<span>[Bild: Team bei der Arbeit]</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Cookie Consent Banner -->
|
|
||||||
<div id="cookieBanner" class="cookie-banner" role="dialog" aria-labelledby="cookieTitle" aria-describedby="cookieDescription">
|
|
||||||
<div class="cookie-banner-content">
|
|
||||||
<div class="cookie-text">
|
|
||||||
<h3 id="cookieTitle">Cookie-Einstellungen</h3>
|
|
||||||
<p id="cookieDescription">
|
|
||||||
Wir verwenden Cookies, um Ihre Erfahrung zu verbessern und unsere Website zu analysieren.
|
|
||||||
Durch die Nutzung unserer Website stimmen Sie unserem <a href="#privacy">Datenschutz</a> zu.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="cookie-buttons">
|
|
||||||
<button id="cookieAcceptAll" class="cookie-btn cookie-btn-primary">Alle akzeptieren</button>
|
|
||||||
<button id="cookieRejectAll" class="cookie-btn cookie-btn-secondary">Alle ablehnen</button>
|
|
||||||
<button id="cookieSettings" class="cookie-btn cookie-btn-settings">Einstellungen</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<!-- Cookie Settings Modal -->
|
<!-- 3 Schritte Section -->
|
||||||
<div id="cookieModal" class="cookie-modal" role="dialog" aria-labelledby="cookieModalTitle" aria-modal="true">
|
<section class="process-section" id="process">
|
||||||
<div class="cookie-modal-content">
|
<div class="container">
|
||||||
<div class="cookie-modal-header">
|
<h2 class="section-headline">In 3 Schritten zum digitalen Mitarbeiter.</h2>
|
||||||
<h2 id="cookieModalTitle">Cookie-Einstellungen</h2>
|
|
||||||
<button id="cookieModalClose" class="cookie-modal-close" aria-label="Schließen">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cookie-option">
|
<div class="process-line" id="processLine">
|
||||||
<div class="cookie-option-header">
|
<div class="process-step active" data-step="1">
|
||||||
<h3 class="cookie-option-title">Notwendige Cookies</h3>
|
<div class="step-circle">1</div>
|
||||||
<div id="cookie-toggle-necessary" class="cookie-toggle active disabled" role="switch" aria-checked="true" aria-disabled="true">
|
<div class="step-label">Analyse</div>
|
||||||
<div class="cookie-toggle-slider"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="cookie-option-description">
|
<div class="process-connector" id="connector1"></div>
|
||||||
Diese Cookies sind für die Funktionsweise der Website unerlässlich und können nicht in Ihren Browsern deaktiviert werden.
|
<div class="process-step" data-step="2">
|
||||||
</p>
|
<div class="step-circle">2</div>
|
||||||
</div>
|
<div class="step-label">Bau</div>
|
||||||
|
|
||||||
<div class="cookie-option">
|
|
||||||
<div class="cookie-option-header">
|
|
||||||
<h3 class="cookie-option-title">Analyse-Cookies</h3>
|
|
||||||
<div id="cookie-toggle-analytics" class="cookie-toggle" role="switch" aria-checked="false">
|
|
||||||
<div class="cookie-toggle-slider"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="cookie-option-description">
|
<div class="process-connector" id="connector2"></div>
|
||||||
Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren, indem sie Informationen anonym sammeln und melden.
|
<div class="process-step" data-step="3">
|
||||||
</p>
|
<div class="step-circle">3</div>
|
||||||
</div>
|
<div class="step-label">Betrieb</div>
|
||||||
|
|
||||||
<div class="cookie-option">
|
|
||||||
<div class="cookie-option-header">
|
|
||||||
<h3 class="cookie-option-title">Marketing-Cookies</h3>
|
|
||||||
<div id="cookie-toggle-marketing" class="cookie-toggle" role="switch" aria-checked="false">
|
|
||||||
<div class="cookie-toggle-slider"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="cookie-option-description">
|
|
||||||
Diese Cookies werden verwendet, um Besucher über Websites hinweg zu verfolgen, um relevante Anzeigen zu zeigen.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cookie-modal-footer">
|
<div class="process-details">
|
||||||
<button id="cookieSavePreferences" class="cookie-btn cookie-btn-primary">Einstellungen speichern</button>
|
<div class="step-detail" data-step-detail="1">
|
||||||
|
<h3>1. Analyse</h3>
|
||||||
|
<p>Wir verstehen eure aktuellen Prozesse, identifizieren Automatisierungspotenziale und definieren klare Ziele.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-detail" data-step-detail="2">
|
||||||
|
<h3>2. Bau</h3>
|
||||||
|
<p>Entwicklung der KI-Systeme, Integration in bestehende Tools und umfangreiche Tests.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-detail" data-step-detail="3">
|
||||||
|
<h3>3. Betrieb</h3>
|
||||||
|
<p>Go-live, Monitoring, kontinuierliche Optimierung und Schulung eures Teams.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
|
<!-- Ergebnisse Section -->
|
||||||
|
<section class="results-section" id="results">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-headline">Messbare Ergebnisse</h2>
|
||||||
|
|
||||||
|
<div class="results-grid">
|
||||||
|
<div class="data-card glass-morphism">
|
||||||
|
<div class="card-metric">-52%</div>
|
||||||
|
<div class="card-label">Unnötige Anrufe</div>
|
||||||
|
<div class="card-detail">Durch KI-Vorfilterung</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-card glass-morphism">
|
||||||
|
<div class="card-metric">24/7</div>
|
||||||
|
<div class="card-label">Automatisierte Antworten</div>
|
||||||
|
<div class="card-detail">Ohne Ausfallzeiten</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-card glass-morphism">
|
||||||
|
<div class="card-metric">+38%</div>
|
||||||
|
<div class="card-label">Konversionsrate</div>
|
||||||
|
<div class="card-detail">Durch sofortige Reaktion</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-card glass-morphism">
|
||||||
|
<div class="card-metric">-67%</div>
|
||||||
|
<div class="card-label">Suchzeit intern</div>
|
||||||
|
<div class="card-detail">Durch Wissens-KI</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-card glass-morphism">
|
||||||
|
<div class="card-metric">0</div>
|
||||||
|
<div class="card-label">Wartezeit</div>
|
||||||
|
<div class="card-detail">Sofortige Verfügbarkeit</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-card glass-morphism">
|
||||||
|
<div class="card-metric">100%</div>
|
||||||
|
<div class="card-label">Wissensverfügbarkeit</div>
|
||||||
|
<div class="card-detail">Im gesamten Team</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Interaction Section -->
|
||||||
|
<section class="interaction-section" id="interaction">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-headline">Sprich nicht mit uns. Sprich mit unserem System.</h2>
|
||||||
|
|
||||||
|
<div class="interaction-cards">
|
||||||
|
<div class="interaction-card" id="phoneInteraction">
|
||||||
|
<div class="card-visual">
|
||||||
|
<div class="microphone">
|
||||||
|
<div class="mic-icon">🎤</div>
|
||||||
|
<div class="pulse-ring"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>KI Telefon</h3>
|
||||||
|
<p>Teste unseren KI-Telefonassistenten jetzt</p>
|
||||||
|
<button class="interaction-btn primary">Jetzt anrufen</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="interaction-card" id="chatInteraction">
|
||||||
|
<h3>KI Chat</h3>
|
||||||
|
<p>Starte eine Konversation mit unserer KI</p>
|
||||||
|
<div class="card-visual">
|
||||||
|
<div class="chat-window">
|
||||||
|
<div class="chat-header">KI Support</div>
|
||||||
|
<div class="chat-messages">
|
||||||
|
</div>
|
||||||
|
<div class="chat-input-container">
|
||||||
|
<input type="text" class="chat-input" placeholder="Ihre Nachricht..." maxlength="500">
|
||||||
|
<button class="chat-send" type="button">
|
||||||
|
<img src="images/icons/iconography-02.png" alt="Senden">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer Banner -->
|
||||||
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||||
|
<style>
|
||||||
|
.footer-banner a { color: white !important; }
|
||||||
|
</style>
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Company Info Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-description">
|
||||||
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Services</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#systeme" class="footer-link">KI Systeme</a>
|
||||||
|
<a href="#interaction" class="footer-link">Demo</a>
|
||||||
|
<a href="sites/offers.html" class="footer-link">Kontakt</a>
|
||||||
|
<a href="sites/leads.html" class="footer-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legal Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Rechtliches</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
<a href="#" class="footer-link">AGB</a>
|
||||||
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Kontakt</h4>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+49 123 456789</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>info@profice.de</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-media">
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||||||
|
<img src="images/icons/instagram.png" alt="Instagram" width="40" height="40">
|
||||||
|
</a>
|
||||||
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||||||
|
<img src="images/icons/facebook.png" alt="Facebook" width="40" height="40">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-bottom-content">
|
||||||
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#" class="footer-link">Datenschutz</a>
|
||||||
|
<span class="separator">•</span>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Optimized script loading -->
|
||||||
<script src="scripts/script.js" defer></script>
|
<script src="scripts/script.js" defer></script>
|
||||||
<script src="scripts/cookie-consent.js" defer></script>
|
<script src="scripts/tech-onepager.js" defer></script>
|
||||||
<script src="scripts/cursor.js" defer></script>
|
<script src="scripts/cursor.js" defer></script>
|
||||||
<script src="scripts/scroll-header.js" defer></script>
|
<script src="scripts/scroll-header.js" defer></script>
|
||||||
|
<script src="scripts/chat.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -48,8 +48,8 @@ define('USE_PRODUCTION', false); // Use test webhook for debugging
|
|||||||
define('DEBUG_MODE', true); // Enable debug to see errors
|
define('DEBUG_MODE', true); // Enable debug to see errors
|
||||||
|
|
||||||
// N8N Webhooks
|
// N8N Webhooks
|
||||||
define('WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8207-1e335e64518f');
|
define('WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/8658d57e-2348-4046-90a5-7551708f8d50');
|
||||||
define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f');
|
define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/8658d57e-2348-4046-90a5-7551708f8d50');
|
||||||
define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST);
|
define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST);
|
||||||
|
|
||||||
// Google Analytics
|
// Google Analytics
|
||||||
@@ -492,30 +492,6 @@ function handleContactForm($data) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLoginForm($data) {
|
|
||||||
$required = ['email', 'password'];
|
|
||||||
foreach ($required as $field) {
|
|
||||||
if (empty($data[$field])) {
|
|
||||||
sendResponse(false, "Pflichtfeld fehlt: {$field}", null, 400);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add your login logic here
|
|
||||||
sendResponse(true, 'Login erfolgreich');
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleRegisterForm($data) {
|
|
||||||
$required = ['name', 'email', 'password'];
|
|
||||||
foreach ($required as $field) {
|
|
||||||
if (empty($data[$field])) {
|
|
||||||
sendResponse(false, "Pflichtfeld fehlt: {$field}", null, 400);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add your registration logic here
|
|
||||||
sendResponse(true, 'Registrierung erfolgreich');
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleLeadForm($data) {
|
function handleLeadForm($data) {
|
||||||
// Handle lead form submissions
|
// Handle lead form submissions
|
||||||
$leadId = storeLead($data);
|
$leadId = storeLead($data);
|
||||||
@@ -549,6 +525,49 @@ function handleGetTrackingConfig($data) {
|
|||||||
sendResponse(true, 'Tracking-Konfiguration', $config);
|
sendResponse(true, 'Tracking-Konfiguration', $config);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleChatMessage($data) {
|
||||||
|
$message = sanitizeInput($data['message'] ?? '');
|
||||||
|
$sessionId = sanitizeInput($data['session_id'] ?? uniqid('chat_'));
|
||||||
|
|
||||||
|
if (empty($message)) {
|
||||||
|
sendResponse(false, 'Nachricht darf nicht leer sein', null, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
$chatData = [
|
||||||
|
'type' => 'chat_message',
|
||||||
|
'session_id' => $sessionId,
|
||||||
|
'message' => $message,
|
||||||
|
'timestamp' => date('c'),
|
||||||
|
'source' => 'website_chat',
|
||||||
|
'ip_address' => getClientIP(),
|
||||||
|
'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? ''
|
||||||
|
];
|
||||||
|
|
||||||
|
// Send to webhook
|
||||||
|
$webhookResult = sendToWebhook($chatData);
|
||||||
|
|
||||||
|
$debugData = DEBUG_MODE ? [
|
||||||
|
'session_id' => $sessionId,
|
||||||
|
'webhook_result' => $webhookResult,
|
||||||
|
'webhook_url' => WEBHOOK_URL
|
||||||
|
] : null;
|
||||||
|
|
||||||
|
if ($webhookResult['success']) {
|
||||||
|
// Try to parse response from webhook
|
||||||
|
$response = json_decode($webhookResult['response'], true);
|
||||||
|
$aiResponse = $response['message'] ?? 'Vielen Dank für Ihre Nachricht. Ich melde mich so schnell wie möglich bei Ihnen.';
|
||||||
|
|
||||||
|
sendResponse(true, 'Nachricht gesendet', array_merge($debugData, [
|
||||||
|
'session_id' => $sessionId,
|
||||||
|
'ai_response' => $aiResponse,
|
||||||
|
'timestamp' => date('c')
|
||||||
|
]));
|
||||||
|
} else {
|
||||||
|
error_log('Chat webhook failed: ' . json_encode($webhookResult));
|
||||||
|
sendResponse(false, 'Chat-Service derzeit nicht verfügbar. Bitte versuchen Sie es später erneut.', $debugData, 503);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function handleTrackEvent($data) {
|
function handleTrackEvent($data) {
|
||||||
$eventName = $data['event_name'] ?? '';
|
$eventName = $data['event_name'] ?? '';
|
||||||
$eventData = $data['event_data'] ?? [];
|
$eventData = $data['event_data'] ?? [];
|
||||||
@@ -605,12 +624,6 @@ try {
|
|||||||
case 'contact':
|
case 'contact':
|
||||||
handleContactForm($data);
|
handleContactForm($data);
|
||||||
break;
|
break;
|
||||||
case 'login':
|
|
||||||
handleLoginForm($data);
|
|
||||||
break;
|
|
||||||
case 'register':
|
|
||||||
handleRegisterForm($data);
|
|
||||||
break;
|
|
||||||
case 'lead':
|
case 'lead':
|
||||||
handleLeadForm($data);
|
handleLeadForm($data);
|
||||||
break;
|
break;
|
||||||
@@ -626,6 +639,9 @@ try {
|
|||||||
case 'track_event':
|
case 'track_event':
|
||||||
handleTrackEvent($data);
|
handleTrackEvent($data);
|
||||||
break;
|
break;
|
||||||
|
case 'chat':
|
||||||
|
handleChatMessage($data);
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
sendResponse(false, 'Ungültiger Anfragetyp', null, 400);
|
sendResponse(false, 'Ungültiger Anfragetyp', null, 400);
|
||||||
}
|
}
|
||||||
|
|||||||
429
Profice WebSite/scripts/chat.js
Normal file
429
Profice WebSite/scripts/chat.js
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
/**
|
||||||
|
* KI Chat Widget - Functional Chat Interface
|
||||||
|
* Integrates with existing chat widget in KI Chat card
|
||||||
|
* Connects to N8N webhook via send.php
|
||||||
|
*/
|
||||||
|
|
||||||
|
class KIChat {
|
||||||
|
constructor() {
|
||||||
|
this.sessionId = this.generateSessionId();
|
||||||
|
this.isTyping = false;
|
||||||
|
this.messages = [];
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.bindEvents();
|
||||||
|
this.loadChatHistory();
|
||||||
|
this.setupExistingChat();
|
||||||
|
}
|
||||||
|
|
||||||
|
generateSessionId() {
|
||||||
|
return 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents() {
|
||||||
|
// Chat button clicks
|
||||||
|
const chatBtn = document.getElementById('chatBtn');
|
||||||
|
const interactionBtn = document.querySelector('#chatInteraction .interaction-btn');
|
||||||
|
|
||||||
|
if (chatBtn) {
|
||||||
|
chatBtn.addEventListener('click', () => this.scrollToChat());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (interactionBtn) {
|
||||||
|
interactionBtn.addEventListener('click', () => this.focusInput());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send message on Enter in existing chat
|
||||||
|
const existingInput = document.querySelector('#chatInteraction .chat-input');
|
||||||
|
if (existingInput) {
|
||||||
|
existingInput.addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
this.sendMessage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send button click
|
||||||
|
const sendBtn = document.querySelector('#chatInteraction .chat-send');
|
||||||
|
if (sendBtn) {
|
||||||
|
sendBtn.addEventListener('click', () => this.sendMessage());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setupExistingChat() {
|
||||||
|
const chatMessages = document.querySelector('#chatInteraction .chat-messages');
|
||||||
|
const chatInput = document.querySelector('#chatInteraction .chat-input');
|
||||||
|
const sendBtn = document.querySelector('#chatInteraction .chat-send');
|
||||||
|
|
||||||
|
// Add click event listener to the send button
|
||||||
|
if (sendBtn) {
|
||||||
|
sendBtn.addEventListener('click', () => this.sendMessage());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add welcome message
|
||||||
|
if (this.messages.length === 0 && chatMessages) {
|
||||||
|
this.addMessage('ki', 'Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen helfen?');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateChatDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToChat() {
|
||||||
|
const chatInteraction = document.getElementById('chatInteraction');
|
||||||
|
if (chatInteraction) {
|
||||||
|
chatInteraction.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||||
|
setTimeout(() => this.focusInput(), 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
focusInput() {
|
||||||
|
const inputField = document.querySelector('#chatInteraction .chat-input');
|
||||||
|
if (inputField) {
|
||||||
|
inputField.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addMessage(sender, text, timestamp = Date.now()) {
|
||||||
|
this.messages.push({
|
||||||
|
sender: sender,
|
||||||
|
text: text,
|
||||||
|
timestamp: timestamp
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keep only last 50 messages
|
||||||
|
if (this.messages.length > 50) {
|
||||||
|
this.messages = this.messages.slice(-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saveChatHistory();
|
||||||
|
this.updateChatDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateChatDisplay() {
|
||||||
|
const chatMessages = document.querySelector('#chatInteraction .chat-messages');
|
||||||
|
if (chatMessages) {
|
||||||
|
// Clear existing messages except typing indicator
|
||||||
|
const typingIndicator = chatMessages.querySelector('.typing-indicator');
|
||||||
|
chatMessages.innerHTML = '';
|
||||||
|
|
||||||
|
// Add all messages
|
||||||
|
this.messages.forEach(msg => {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = `chat-message ${msg.sender}`;
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div class="message-content">${this.escapeHtml(msg.text)}</div>
|
||||||
|
<div class="message-time">${this.formatTime(msg.timestamp)}</div>
|
||||||
|
`;
|
||||||
|
chatMessages.appendChild(messageDiv);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Re-add typing indicator if needed
|
||||||
|
if (typingIndicator && this.isTyping) {
|
||||||
|
chatMessages.appendChild(typingIndicator);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollToBottom();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async sendMessage() {
|
||||||
|
const inputField = document.querySelector('#chatInteraction .chat-input');
|
||||||
|
const message = inputField?.value?.trim();
|
||||||
|
|
||||||
|
if (!message || this.isTyping) return;
|
||||||
|
|
||||||
|
// Add user message
|
||||||
|
this.addMessage('user', message);
|
||||||
|
inputField.value = '';
|
||||||
|
|
||||||
|
// Show typing indicator
|
||||||
|
this.showTypingIndicator();
|
||||||
|
this.isTyping = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('scripts/add/send.php', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'chat',
|
||||||
|
message: message,
|
||||||
|
session_id: this.sessionId
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
this.addMessage('ki', data.data.ai_response, data.data.timestamp);
|
||||||
|
} else {
|
||||||
|
this.addMessage('ki', 'Entschuldigung, es gab ein Problem. Bitte versuchen Sie es später erneut.');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Chat error:', error);
|
||||||
|
this.addMessage('ki', 'Verbindung zum Server fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.');
|
||||||
|
} finally {
|
||||||
|
this.hideTypingIndicator();
|
||||||
|
this.isTyping = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showTypingIndicator() {
|
||||||
|
const chatMessages = document.querySelector('#chatInteraction .chat-messages');
|
||||||
|
if (chatMessages && !chatMessages.querySelector('.typing-indicator')) {
|
||||||
|
const typingHTML = `
|
||||||
|
<div class="chat-message ki typing">
|
||||||
|
<div class="message-content">
|
||||||
|
<div class="typing-indicator">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
chatMessages.insertAdjacentHTML('beforeend', typingHTML);
|
||||||
|
this.scrollToBottom();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hideTypingIndicator() {
|
||||||
|
const typingIndicator = document.querySelector('#chatInteraction .typing');
|
||||||
|
if (typingIndicator) {
|
||||||
|
typingIndicator.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToBottom() {
|
||||||
|
const chatMessages = document.querySelector('#chatInteraction .chat-messages');
|
||||||
|
if (chatMessages) {
|
||||||
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
saveChatHistory() {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(`ki_chat_${this.sessionId}`, JSON.stringify(this.messages));
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Could not save chat history:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadChatHistory() {
|
||||||
|
try {
|
||||||
|
const saved = localStorage.getItem(`ki_chat_${this.sessionId}`);
|
||||||
|
if (saved) {
|
||||||
|
this.messages = JSON.parse(saved);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Could not load chat history:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
formatTime(timestamp) {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
return date.toLocaleTimeString('de-DE', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize chat when DOM is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
window.kiChat = new KIChat();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add CSS for enhanced chat functionality
|
||||||
|
const chatStyles = `
|
||||||
|
#chatInteraction {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--primary-dark);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--primary-mid);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .card-visual {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-window {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(79, 71, 71, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-header {
|
||||||
|
background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-messages {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
background: transparent;
|
||||||
|
max-height: 300px !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
min-height: 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message.user {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message.ki {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .message-content {
|
||||||
|
background: transparent;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: none;
|
||||||
|
word-wrap: break-word;
|
||||||
|
line-height: 1.4;
|
||||||
|
max-width: 70%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message.user .message-content {
|
||||||
|
background: var(--accent-green);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message.ki .message-content {
|
||||||
|
background: var(--accent-green);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .message-time {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 4px;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message.ki .message-time {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-message.user .message-time {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-input-container .interaction-btn {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 12px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-send {
|
||||||
|
background: var(--accent-teal);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(38, 166, 154, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-send:hover {
|
||||||
|
background: #1e8e82;
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-send:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-send img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#chatInteraction .card-visual {
|
||||||
|
min-height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-messages {
|
||||||
|
min-height: 200px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-input-container {
|
||||||
|
padding: 12px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-input {
|
||||||
|
padding: 10px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatInteraction .chat-send {
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Inject CSS
|
||||||
|
const styleSheet = document.createElement('style');
|
||||||
|
styleSheet.textContent = chatStyles;
|
||||||
|
document.head.appendChild(styleSheet);
|
||||||
@@ -1,423 +0,0 @@
|
|||||||
/**
|
|
||||||
* Cookie Consent Management System
|
|
||||||
* All sensitive data (tracking IDs, URLs) are loaded from server-side PHP
|
|
||||||
* Includes fallback for local file access (no server)
|
|
||||||
*
|
|
||||||
* @version 2.1.0
|
|
||||||
*/
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// CONFIGURATION
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
const cookieCategories = ['necessary', 'analytics', 'marketing'];
|
|
||||||
const API_ENDPOINT = 'scripts/add/send.php';
|
|
||||||
|
|
||||||
// Detect if running from file:// protocol (no server)
|
|
||||||
const isLocalFile = window.location.protocol === 'file:';
|
|
||||||
|
|
||||||
let consentState = {
|
|
||||||
hasConsented: false,
|
|
||||||
preferences: {}
|
|
||||||
};
|
|
||||||
|
|
||||||
let previousPreferences = {};
|
|
||||||
let trackingScripts = {};
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// DATALAYER INTEGRATION
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
|
|
||||||
function pushConsentToDataLayer(preferences) {
|
|
||||||
window.dataLayer.push({
|
|
||||||
'event': 'consent_update',
|
|
||||||
'consent': {
|
|
||||||
'analytics_storage': preferences.analytics ? 'granted' : 'denied',
|
|
||||||
'ad_storage': preferences.marketing ? 'granted' : 'denied',
|
|
||||||
'functionality_storage': preferences.necessary ? 'granted' : 'denied',
|
|
||||||
'personalization_storage': preferences.marketing ? 'granted' : 'denied',
|
|
||||||
'security_storage': 'granted'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function setDefaultConsent() {
|
|
||||||
window.dataLayer.push({
|
|
||||||
'event': 'consent_default',
|
|
||||||
'consent': {
|
|
||||||
'analytics_storage': 'denied',
|
|
||||||
'ad_storage': 'denied',
|
|
||||||
'functionality_storage': 'granted',
|
|
||||||
'personalization_storage': 'denied',
|
|
||||||
'security_storage': 'granted',
|
|
||||||
'wait_for_update': 500
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// STORAGE (API + LOCALSTORAGE FALLBACK)
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
async function saveConsentToStorage(preferences) {
|
|
||||||
// Always save to localStorage as backup
|
|
||||||
const consentData = {
|
|
||||||
hasConsented: true,
|
|
||||||
preferences: preferences,
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
};
|
|
||||||
localStorage.setItem('cookieConsent', JSON.stringify(consentData));
|
|
||||||
|
|
||||||
// Try API if not local file
|
|
||||||
if (!isLocalFile) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(API_ENDPOINT, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ type: 'cookie_consent', preferences })
|
|
||||||
});
|
|
||||||
const result = await response.json();
|
|
||||||
if (result.success && result.data && result.data.scripts) {
|
|
||||||
trackingScripts = result.data.scripts;
|
|
||||||
}
|
|
||||||
return result.success;
|
|
||||||
} catch (e) {
|
|
||||||
// API failed, localStorage already saved
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getConsentFromStorage() {
|
|
||||||
// Try localStorage first (faster)
|
|
||||||
const localConsent = localStorage.getItem('cookieConsent');
|
|
||||||
if (localConsent) {
|
|
||||||
try {
|
|
||||||
return JSON.parse(localConsent);
|
|
||||||
} catch (e) {
|
|
||||||
localStorage.removeItem('cookieConsent');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Try API if not local file
|
|
||||||
if (!isLocalFile) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(API_ENDPOINT, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ type: 'get_cookie_consent' })
|
|
||||||
});
|
|
||||||
const result = await response.json();
|
|
||||||
if (result.success && result.data) {
|
|
||||||
if (result.data.scripts) {
|
|
||||||
trackingScripts = result.data.scripts;
|
|
||||||
}
|
|
||||||
// Cache in localStorage
|
|
||||||
localStorage.setItem('cookieConsent', JSON.stringify(result.data));
|
|
||||||
return result.data;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
// API unavailable
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// SCRIPT LOADING
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
function loadTrackingScripts() {
|
|
||||||
if (!trackingScripts || Object.keys(trackingScripts).length === 0) return;
|
|
||||||
|
|
||||||
if (trackingScripts.ga && consentState.preferences.analytics) {
|
|
||||||
loadGoogleAnalytics(trackingScripts.ga);
|
|
||||||
}
|
|
||||||
if (trackingScripts.gtm && consentState.preferences.analytics) {
|
|
||||||
loadGTM(trackingScripts.gtm);
|
|
||||||
}
|
|
||||||
if (trackingScripts.fb && consentState.preferences.marketing) {
|
|
||||||
loadFacebookPixel(trackingScripts.fb);
|
|
||||||
}
|
|
||||||
if (trackingScripts.gads && consentState.preferences.marketing) {
|
|
||||||
loadGoogleAds(trackingScripts.gads);
|
|
||||||
}
|
|
||||||
if (trackingScripts.linkedin && consentState.preferences.marketing) {
|
|
||||||
loadLinkedIn(trackingScripts.linkedin);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadScript(src, callback) {
|
|
||||||
const script = document.createElement('script');
|
|
||||||
script.src = src;
|
|
||||||
script.async = true;
|
|
||||||
if (callback) script.onload = callback;
|
|
||||||
document.head.appendChild(script);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadGoogleAnalytics(config) {
|
|
||||||
if (!config.src || !config.config || !config.config.id) return;
|
|
||||||
loadScript(config.src, function() {
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){dataLayer.push(arguments);}
|
|
||||||
window.gtag = gtag;
|
|
||||||
gtag('js', new Date());
|
|
||||||
gtag('config', config.config.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadGTM(config) {
|
|
||||||
if (!config.id) return;
|
|
||||||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
||||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
||||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
||||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
||||||
})(window,document,'script','dataLayer',config.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadFacebookPixel(config) {
|
|
||||||
if (!config.id) return;
|
|
||||||
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
|
||||||
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
|
|
||||||
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
|
|
||||||
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
|
|
||||||
document,'script','https://connect.facebook.net/en_US/fbevents.js');
|
|
||||||
fbq('init', config.id);
|
|
||||||
fbq('track', 'PageView');
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadGoogleAds(config) {
|
|
||||||
if (!config.id) return;
|
|
||||||
loadScript('https://www.googletagmanager.com/gtag/js?id=' + config.id, function() {
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){dataLayer.push(arguments);}
|
|
||||||
gtag('js', new Date());
|
|
||||||
gtag('config', config.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLinkedIn(config) {
|
|
||||||
if (!config.id) return;
|
|
||||||
window._linkedin_partner_id = config.id;
|
|
||||||
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
|
|
||||||
window._linkedin_data_partner_ids.push(config.id);
|
|
||||||
loadScript('https://snap.licdn.com/li.lms-analytics/insight.min.js');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// COOKIE DELETION
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
const cookiePatterns = {
|
|
||||||
analytics: ['_ga', '_gid', '_gat', '__utma', '__utmb', '__utmc', '__utmz'],
|
|
||||||
marketing: ['_fbp', '_fbc', 'fr', '_gcl_au', '_gcl_aw', 'IDE', 'DSID', 'NID']
|
|
||||||
};
|
|
||||||
|
|
||||||
function deleteCookie(name) {
|
|
||||||
const paths = ['/', window.location.pathname];
|
|
||||||
const domains = ['', window.location.hostname, '.' + window.location.hostname];
|
|
||||||
|
|
||||||
paths.forEach(path => {
|
|
||||||
domains.forEach(domain => {
|
|
||||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}${domain ? '; domain=' + domain : ''}`;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteCookiesForCategory(category) {
|
|
||||||
const patterns = cookiePatterns[category] || [];
|
|
||||||
const allCookies = document.cookie.split(';');
|
|
||||||
|
|
||||||
allCookies.forEach(cookie => {
|
|
||||||
const cookieName = cookie.split('=')[0].trim();
|
|
||||||
patterns.forEach(pattern => {
|
|
||||||
if (cookieName.startsWith(pattern)) {
|
|
||||||
deleteCookie(cookieName);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlePreferenceChanges(newPreferences) {
|
|
||||||
Object.keys(cookiePatterns).forEach(category => {
|
|
||||||
if (previousPreferences[category] === true && newPreferences[category] === false) {
|
|
||||||
deleteCookiesForCategory(category);
|
|
||||||
window.dataLayer.push({ 'event': 'consent_revoked', 'consent_category': category });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
previousPreferences = { ...newPreferences };
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// DOM ELEMENTS
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
const cookieBanner = document.getElementById('cookieBanner');
|
|
||||||
const cookieModal = document.getElementById('cookieModal');
|
|
||||||
const acceptAllBtn = document.getElementById('cookieAcceptAll');
|
|
||||||
const rejectAllBtn = document.getElementById('cookieRejectAll');
|
|
||||||
const settingsBtn = document.getElementById('cookieSettings');
|
|
||||||
const modalCloseBtn = document.getElementById('cookieModalClose');
|
|
||||||
const savePreferencesBtn = document.getElementById('cookieSavePreferences');
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// CORE FUNCTIONS
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
async function initCookieConsent() {
|
|
||||||
setDefaultConsent();
|
|
||||||
|
|
||||||
const savedConsent = await getConsentFromStorage();
|
|
||||||
|
|
||||||
if (savedConsent && savedConsent.hasConsented) {
|
|
||||||
consentState = {
|
|
||||||
hasConsented: true,
|
|
||||||
preferences: savedConsent.preferences || {}
|
|
||||||
};
|
|
||||||
previousPreferences = { ...consentState.preferences };
|
|
||||||
applyConsentPreferences();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show banner after short delay
|
|
||||||
setTimeout(() => {
|
|
||||||
if (cookieBanner) cookieBanner.classList.add('show');
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyConsentPreferences() {
|
|
||||||
pushConsentToDataLayer(consentState.preferences);
|
|
||||||
loadTrackingScripts();
|
|
||||||
window.dispatchEvent(new CustomEvent('cookieConsentUpdated', { detail: consentState.preferences }));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveConsent(preferences) {
|
|
||||||
handlePreferenceChanges(preferences);
|
|
||||||
await saveConsentToStorage(preferences);
|
|
||||||
|
|
||||||
consentState = {
|
|
||||||
hasConsented: true,
|
|
||||||
preferences: preferences,
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
};
|
|
||||||
|
|
||||||
applyConsentPreferences();
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideBanner() {
|
|
||||||
if (cookieBanner) cookieBanner.classList.remove('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSettingsModal() {
|
|
||||||
if (cookieModal) {
|
|
||||||
cookieModal.classList.add('show');
|
|
||||||
populateSettingsModal();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideSettingsModal() {
|
|
||||||
if (cookieModal) cookieModal.classList.remove('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
function populateSettingsModal() {
|
|
||||||
cookieCategories.forEach(key => {
|
|
||||||
const toggle = document.getElementById(`cookie-toggle-${key}`);
|
|
||||||
if (!toggle) return;
|
|
||||||
|
|
||||||
const isEnabled = consentState.preferences[key] || false;
|
|
||||||
const isRequired = key === 'necessary';
|
|
||||||
|
|
||||||
if (isRequired) {
|
|
||||||
toggle.classList.add('active', 'disabled');
|
|
||||||
toggle.setAttribute('aria-checked', 'true');
|
|
||||||
toggle.setAttribute('aria-disabled', 'true');
|
|
||||||
} else {
|
|
||||||
toggle.classList.toggle('active', isEnabled);
|
|
||||||
toggle.setAttribute('aria-checked', isEnabled ? 'true' : 'false');
|
|
||||||
toggle.onclick = () => {
|
|
||||||
toggle.classList.toggle('active');
|
|
||||||
toggle.setAttribute('aria-checked', toggle.classList.contains('active') ? 'true' : 'false');
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getModalPreferences() {
|
|
||||||
const preferences = {};
|
|
||||||
cookieCategories.forEach(key => {
|
|
||||||
const toggle = document.getElementById(`cookie-toggle-${key}`);
|
|
||||||
preferences[key] = key === 'necessary' ? true : (toggle ? toggle.classList.contains('active') : false);
|
|
||||||
});
|
|
||||||
return preferences;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// EVENT LISTENERS
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
if (acceptAllBtn) {
|
|
||||||
acceptAllBtn.addEventListener('click', () => {
|
|
||||||
const preferences = {};
|
|
||||||
cookieCategories.forEach(key => preferences[key] = true);
|
|
||||||
saveConsent(preferences);
|
|
||||||
hideBanner();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rejectAllBtn) {
|
|
||||||
rejectAllBtn.addEventListener('click', () => {
|
|
||||||
saveConsent({ necessary: true, analytics: false, marketing: false });
|
|
||||||
hideBanner();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (settingsBtn) {
|
|
||||||
settingsBtn.addEventListener('click', showSettingsModal);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (modalCloseBtn) {
|
|
||||||
modalCloseBtn.addEventListener('click', hideSettingsModal);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (savePreferencesBtn) {
|
|
||||||
savePreferencesBtn.addEventListener('click', () => {
|
|
||||||
saveConsent(getModalPreferences());
|
|
||||||
hideSettingsModal();
|
|
||||||
hideBanner();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cookieModal) {
|
|
||||||
cookieModal.addEventListener('click', (e) => {
|
|
||||||
if (e.target === cookieModal) hideSettingsModal();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && cookieModal && cookieModal.classList.contains('show')) {
|
|
||||||
hideSettingsModal();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// PUBLIC API
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
window.CookieConsent = {
|
|
||||||
getConsent: () => consentState,
|
|
||||||
hasConsent: (category) => consentState.preferences[category] === true,
|
|
||||||
updateConsent: saveConsent,
|
|
||||||
showSettings: showSettingsModal
|
|
||||||
};
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// INITIALIZE
|
|
||||||
// ==========================================
|
|
||||||
|
|
||||||
initCookieConsent();
|
|
||||||
});
|
|
||||||
227
Profice WebSite/scripts/cursor-simple.js
Normal file
227
Profice WebSite/scripts/cursor-simple.js
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
// Simple cursor.js - Fixed version with better line effects
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// Check if touch device
|
||||||
|
if (window.matchMedia("(pointer: coarse)").matches) return;
|
||||||
|
|
||||||
|
const toggleBtn = document.getElementById('cursorToggle');
|
||||||
|
const body = document.body;
|
||||||
|
|
||||||
|
// Start with system cursor
|
||||||
|
let isCustomCursor = false;
|
||||||
|
|
||||||
|
function updateCursorState() {
|
||||||
|
if (isCustomCursor) {
|
||||||
|
body.classList.remove('system-cursor');
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.classList.add('active');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
body.classList.add('system-cursor');
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize cursor state
|
||||||
|
updateCursorState();
|
||||||
|
|
||||||
|
// Toggle button click handler
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
isCustomCursor = !isCustomCursor;
|
||||||
|
localStorage.setItem('customCursor', isCustomCursor);
|
||||||
|
updateCursorState();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create canvas for custom cursor
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.id = "custom-cursor";
|
||||||
|
canvas.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 999999;
|
||||||
|
display: none;
|
||||||
|
`;
|
||||||
|
document.body.appendChild(canvas);
|
||||||
|
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tentacles = [];
|
||||||
|
const mouse = { x: 0, y: 0 };
|
||||||
|
const oldMouse = { x: 0, y: 0 };
|
||||||
|
|
||||||
|
// Mouse move handler
|
||||||
|
document.addEventListener("mousemove", (e) => {
|
||||||
|
mouse.x = e.clientX;
|
||||||
|
mouse.y = e.clientY;
|
||||||
|
|
||||||
|
if (isCustomCursor) {
|
||||||
|
canvas.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
canvas.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Window resize handler
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tentacle class with better line effects
|
||||||
|
class Tentacle {
|
||||||
|
constructor(x, y, targetX, targetY) {
|
||||||
|
this.startX = x;
|
||||||
|
this.startY = y;
|
||||||
|
this.endX = targetX;
|
||||||
|
this.endY = targetY;
|
||||||
|
this.life = 1.0;
|
||||||
|
this.decay = 0.015;
|
||||||
|
this.growth = 0;
|
||||||
|
this.maxLength = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
// Grow the tentacle
|
||||||
|
if (this.growth < 1.0) {
|
||||||
|
this.growth += 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate actual end point based on growth
|
||||||
|
const currentEndX = this.startX + (this.endX - this.startX) * this.growth;
|
||||||
|
const currentEndY = this.startY + (this.endY - this.startY) * this.growth;
|
||||||
|
|
||||||
|
this.currentEndX = currentEndX;
|
||||||
|
this.currentEndY = currentEndY;
|
||||||
|
|
||||||
|
// Decay over time
|
||||||
|
this.life -= this.decay;
|
||||||
|
}
|
||||||
|
|
||||||
|
draw(ctx) {
|
||||||
|
if (this.life <= 0) return;
|
||||||
|
|
||||||
|
const opacity = this.life * this.growth;
|
||||||
|
|
||||||
|
// Draw main line with gradient effect
|
||||||
|
const gradient = ctx.createLinearGradient(
|
||||||
|
this.startX, this.startY,
|
||||||
|
this.currentEndX, this.currentEndY
|
||||||
|
);
|
||||||
|
gradient.addColorStop(0, `rgba(20, 20, 20, ${opacity * 0.8})`);
|
||||||
|
gradient.addColorStop(1, `rgba(20, 20, 20, ${opacity * 0.2})`);
|
||||||
|
|
||||||
|
ctx.strokeStyle = gradient;
|
||||||
|
ctx.lineWidth = 3 * opacity * this.growth;
|
||||||
|
ctx.lineCap = 'round';
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(this.startX, this.startY);
|
||||||
|
ctx.lineTo(this.currentEndX, this.currentEndY);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Draw glowing endpoint
|
||||||
|
const glowSize = 6 * opacity;
|
||||||
|
const glowGradient = ctx.createRadialGradient(
|
||||||
|
this.currentEndX, this.currentEndY, 0,
|
||||||
|
this.currentEndX, this.currentEndY, glowSize
|
||||||
|
);
|
||||||
|
glowGradient.addColorStop(0, `rgba(20, 20, 20, ${opacity})`);
|
||||||
|
glowGradient.addColorStop(1, `rgba(20, 20, 20, 0)`);
|
||||||
|
|
||||||
|
ctx.fillStyle = glowGradient;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.currentEndX, this.currentEndY, glowSize, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Draw connection dots along the line
|
||||||
|
const dotCount = 3;
|
||||||
|
for (let i = 1; i <= dotCount; i++) {
|
||||||
|
const t = i / (dotCount + 1);
|
||||||
|
const dotX = this.startX + (this.currentEndX - this.startX) * t;
|
||||||
|
const dotY = this.startY + (this.currentEndY - this.startY) * t;
|
||||||
|
const dotOpacity = opacity * (1 - t) * 0.5;
|
||||||
|
|
||||||
|
ctx.fillStyle = `rgba(20, 20, 20, ${dotOpacity})`;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(dotX, dotY, 2, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation loop
|
||||||
|
function animate() {
|
||||||
|
if (!isCustomCursor) {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Create new tentacles on movement
|
||||||
|
const dx = mouse.x - oldMouse.x;
|
||||||
|
const dy = mouse.y - oldMouse.y;
|
||||||
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
|
||||||
|
if (distance > 3) {
|
||||||
|
// Create multiple tentacles in movement direction
|
||||||
|
const angle = Math.atan2(dy, dx);
|
||||||
|
const spread = 0.3;
|
||||||
|
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
const spreadAngle = angle + (Math.random() - 0.5) * spread;
|
||||||
|
const length = 60 + Math.random() * 80;
|
||||||
|
const targetX = mouse.x + Math.cos(spreadAngle) * length;
|
||||||
|
const targetY = mouse.y + Math.sin(spreadAngle) * length;
|
||||||
|
tentacles.push(new Tentacle(mouse.x, mouse.y, targetX, targetY));
|
||||||
|
}
|
||||||
|
|
||||||
|
oldMouse.x = mouse.x;
|
||||||
|
oldMouse.y = mouse.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update and draw tentacles
|
||||||
|
for (let i = tentacles.length - 1; i >= 0; i--) {
|
||||||
|
const tentacle = tentacles[i];
|
||||||
|
tentacle.update();
|
||||||
|
if (tentacle.life <= 0) {
|
||||||
|
tentacles.splice(i, 1);
|
||||||
|
} else {
|
||||||
|
tentacle.draw(ctx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Limit tentacle count
|
||||||
|
if (tentacles.length > 15) {
|
||||||
|
tentacles.splice(0, tentacles.length - 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw cursor point with glow
|
||||||
|
const cursorGradient = ctx.createRadialGradient(
|
||||||
|
mouse.x, mouse.y, 0,
|
||||||
|
mouse.x, mouse.y, 8
|
||||||
|
);
|
||||||
|
cursorGradient.addColorStop(0, 'rgba(20, 20, 20, 0.8)');
|
||||||
|
cursorGradient.addColorStop(1, 'rgba(20, 20, 20, 0)');
|
||||||
|
|
||||||
|
ctx.fillStyle = cursorGradient;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(mouse.x, mouse.y, 6, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Add central bright point
|
||||||
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(mouse.x, mouse.y, 2, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
});
|
||||||
@@ -27,27 +27,57 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
body.classList.add('system-cursor');
|
body.classList.add('system-cursor');
|
||||||
if (toggleBtn) {
|
if (toggleBtn) {
|
||||||
toggleBtn.classList.remove('active');
|
toggleBtn.classList.remove('active');
|
||||||
const icon = toggleBtn.querySelector('.cursor-icon');
|
let icon = toggleBtn.querySelector('.cursor-icon');
|
||||||
if (icon) {
|
if (icon) {
|
||||||
// Check if we're on a page in the sites/ folder
|
// Replace img with spidy.png if needed
|
||||||
const currentPath = window.location.pathname;
|
if (icon.tagName !== 'IMG') {
|
||||||
const isInSitesFolder = currentPath.includes('/sites/');
|
const newIcon = document.createElement('img');
|
||||||
const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
|
newIcon.className = 'cursor-icon';
|
||||||
icon.src = imagePath;
|
newIcon.alt = 'Spider Cursor';
|
||||||
|
|
||||||
|
// Check if we're on a page in the sites/ folder
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const isInSitesFolder = currentPath.includes('/sites/');
|
||||||
|
const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
|
||||||
|
newIcon.src = imagePath;
|
||||||
|
|
||||||
|
icon.parentNode.replaceChild(newIcon, icon);
|
||||||
|
} else {
|
||||||
|
// Update existing img
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const isInSitesFolder = currentPath.includes('/sites/');
|
||||||
|
const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
|
||||||
|
icon.src = imagePath;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Custom cursor (secondary) - show cursor icon
|
// Custom cursor (secondary) - show standard cursor icon
|
||||||
body.classList.remove('system-cursor');
|
body.classList.remove('system-cursor');
|
||||||
if (toggleBtn) {
|
if (toggleBtn) {
|
||||||
toggleBtn.classList.add('active');
|
toggleBtn.classList.add('active');
|
||||||
const icon = toggleBtn.querySelector('.cursor-icon');
|
let icon = toggleBtn.querySelector('.cursor-icon');
|
||||||
if (icon) {
|
if (icon) {
|
||||||
// Check if we're on a page in the sites/ folder
|
// Replace img with cursor.png if needed
|
||||||
const currentPath = window.location.pathname;
|
if (icon.tagName !== 'IMG') {
|
||||||
const isInSitesFolder = currentPath.includes('/sites/');
|
const newIcon = document.createElement('img');
|
||||||
const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';
|
newIcon.className = 'cursor-icon';
|
||||||
icon.src = imagePath;
|
newIcon.alt = 'Custom Cursor';
|
||||||
|
|
||||||
|
// Check if we're on a page in the sites/ folder
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const isInSitesFolder = currentPath.includes('/sites/');
|
||||||
|
const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';
|
||||||
|
newIcon.src = imagePath;
|
||||||
|
|
||||||
|
icon.parentNode.replaceChild(newIcon, icon);
|
||||||
|
} else {
|
||||||
|
// Update existing img
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const isInSitesFolder = currentPath.includes('/sites/');
|
||||||
|
const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';
|
||||||
|
icon.src = imagePath;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -63,29 +93,40 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const canvas = document.createElement("canvas");
|
function initCursor() {
|
||||||
canvas.id = "venom-cursor";
|
const canvas = document.createElement("canvas");
|
||||||
document.body.appendChild(canvas);
|
canvas.id = "venom-cursor";
|
||||||
|
document.body.appendChild(canvas);
|
||||||
|
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const width = window.innerWidth;
|
||||||
|
const height = window.innerHeight;
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
|
||||||
|
const tentacles = [];
|
||||||
|
const mouse = { x: 0, y: 0 };
|
||||||
|
const oldMouse = { x: 0, y: 0 };
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", (e) => {
|
||||||
|
mouse.x = e.clientX;
|
||||||
|
mouse.y = e.clientY;
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
});
|
||||||
|
|
||||||
|
return { canvas, ctx, tentacles, mouse, oldMouse };
|
||||||
|
}
|
||||||
|
|
||||||
const ctx = canvas.getContext("2d");
|
const cursorElements = initCursor();
|
||||||
const width = window.innerWidth;
|
const canvas = cursorElements.canvas;
|
||||||
const height = window.innerHeight;
|
const ctx = cursorElements.ctx;
|
||||||
canvas.width = width;
|
const tentacles = cursorElements.tentacles;
|
||||||
canvas.height = height;
|
const mouse = cursorElements.mouse;
|
||||||
|
const oldMouse = cursorElements.oldMouse;
|
||||||
const tentacles = [];
|
|
||||||
const mouse = { x: 0, y: 0 };
|
|
||||||
const oldMouse = { x: 0, y: 0 };
|
|
||||||
|
|
||||||
document.addEventListener("mousemove", (e) => {
|
|
||||||
mouse.x = e.clientX;
|
|
||||||
mouse.y = e.clientY;
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
canvas.width = window.innerWidth;
|
|
||||||
canvas.height = window.innerHeight;
|
|
||||||
});
|
|
||||||
|
|
||||||
class Tentacle {
|
class Tentacle {
|
||||||
constructor(mx, my, targetX, targetY) {
|
constructor(mx, my, targetX, targetY) {
|
||||||
@@ -130,7 +171,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
ctx.clearRect(0, 0, width, height);
|
if (isCursorDisabled) {
|
||||||
|
requestAnimationFrame(render);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
// 1. Create new tentacles on movement
|
// 1. Create new tentacles on movement
|
||||||
const distMoved = Math.hypot(mouse.x - oldMouse.x, mouse.y - oldMouse.y);
|
const distMoved = Math.hypot(mouse.x - oldMouse.x, mouse.y - oldMouse.y);
|
||||||
|
|||||||
1
Profice WebSite/scripts/cursor.min.js
vendored
Normal file
1
Profice WebSite/scripts/cursor.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
Profice WebSite/scripts/leads.min.js
vendored
Normal file
1
Profice WebSite/scripts/leads.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
// leads.js // ========================================== // 1. MENU TOGGLE // ========================================== const menuToggle = document.getElementById('menuToggle');const slideMenu = document.getElementById('slideMenu');const overlay = document.getElementById('overlay');if (menuToggle && slideMenu && overlay){function toggleMenu(){menuToggle.classList.toggle('active');slideMenu.classList.toggle('active');overlay.classList.toggle('active');}menuToggle.addEventListener('click', toggleMenu);overlay.addEventListener('click', toggleMenu);}// ========================================== // 2. LEADS TABLE LOGIC // ========================================== function getLeads(){const storedLeads = localStorage.getItem('myLeads');if (storedLeads){return JSON.parse(storedLeads);}else{return [];}}function populateLeadsTable(){const tableBody = document.getElementById('leadsTableBody');const leadsData = getLeads();if (!tableBody) return;if (leadsData.length === 0){tableBody.innerHTML = ` <tr> <td colspan="4" class="empty-state"> <p>Keine Anfragen vorhanden</p> </td> </tr> `;return;}tableBody.innerHTML = leadsData.map(lead => ` <tr> <td>${lead.datum}</td> <td>${lead.dienstleistung}</td> <td> <span class="status-badge ${lead.status}">${lead.statusText}</span> </td> <td> <a href="#" class="action-btn" data-id="${lead.id}">Details ansehen</a> </td> </tr> `).join('');document.querySelectorAll('.action-btn').forEach(btn =>{btn.addEventListener('click', function(e){e.preventDefault();const leadId = this.getAttribute('data-id');// Redirect to lead details page window.location.href = `lead-details.html?id=${leadId}`;});});}document.addEventListener('DOMContentLoaded', populateLeadsTable);
|
||||||
@@ -1,217 +0,0 @@
|
|||||||
// login.js
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
const loginForm = document.getElementById('loginForm');
|
|
||||||
const loginBtn = document.getElementById('loginSubmit');
|
|
||||||
const successMessage = document.getElementById('successMessage');
|
|
||||||
const errorMessage = document.getElementById('errorMessage');
|
|
||||||
const errorText = document.getElementById('errorText');
|
|
||||||
const registerBtn = document.getElementById('registerBtn');
|
|
||||||
|
|
||||||
// Register button functionality
|
|
||||||
if (registerBtn) {
|
|
||||||
registerBtn.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
window.location.href = 'register.html';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if user is already logged in
|
|
||||||
checkExistingSession();
|
|
||||||
|
|
||||||
// Login form submission
|
|
||||||
if (loginForm) {
|
|
||||||
loginForm.addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const email = document.getElementById('email').value;
|
|
||||||
const password = document.getElementById('password').value;
|
|
||||||
const remember = document.getElementById('remember').checked;
|
|
||||||
|
|
||||||
// Simple validation
|
|
||||||
if (!email || !password) {
|
|
||||||
showError('Bitte füllen Sie alle Felder aus.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Email validation
|
|
||||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
||||||
if (!emailRegex.test(email)) {
|
|
||||||
showError('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show loading state
|
|
||||||
setLoadingState(true);
|
|
||||||
hideMessages();
|
|
||||||
|
|
||||||
// Send login data to PHP API
|
|
||||||
const loginData = {
|
|
||||||
type: 'login',
|
|
||||||
email: email,
|
|
||||||
password: password,
|
|
||||||
remember: remember
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('../scripts/add/send.php', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(loginData)
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
// Store session (for demo purposes - in real app, this would come from server)
|
|
||||||
const sessionData = {
|
|
||||||
user: { email: email },
|
|
||||||
loginTime: new Date().toISOString(),
|
|
||||||
remember: remember
|
|
||||||
};
|
|
||||||
|
|
||||||
if (remember) {
|
|
||||||
localStorage.setItem('userSession', JSON.stringify(sessionData));
|
|
||||||
} else {
|
|
||||||
sessionStorage.setItem('userSession', JSON.stringify(sessionData));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
showSuccess('Anmeldung erfolgreich! Sie werden weitergeleitet...');
|
|
||||||
|
|
||||||
// Redirect after delay
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = '../index.html';
|
|
||||||
}, 2000);
|
|
||||||
} else {
|
|
||||||
showError('Anmeldung fehlgeschlagen: ' + result.message);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Login error:', error);
|
|
||||||
showError('Netzwerkfehler bei der Anmeldung. Bitte versuchen Sie es später erneut.');
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingState(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Loading state management
|
|
||||||
function setLoadingState(loading) {
|
|
||||||
if (loginBtn) {
|
|
||||||
const btnText = loginBtn.querySelector('.btn-text');
|
|
||||||
const btnLoading = loginBtn.querySelector('.btn-loading');
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
loginBtn.disabled = true;
|
|
||||||
if (btnText) btnText.style.display = 'none';
|
|
||||||
if (btnLoading) btnLoading.style.display = 'inline-block';
|
|
||||||
} else {
|
|
||||||
loginBtn.disabled = false;
|
|
||||||
if (btnText) btnText.style.display = 'inline-block';
|
|
||||||
if (btnLoading) btnLoading.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Message display functions
|
|
||||||
function showSuccess(message) {
|
|
||||||
if (successMessage) {
|
|
||||||
const messageElement = successMessage.querySelector('p');
|
|
||||||
if (messageElement) {
|
|
||||||
messageElement.textContent = message;
|
|
||||||
}
|
|
||||||
successMessage.classList.add('show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError(message) {
|
|
||||||
if (errorMessage && errorText) {
|
|
||||||
errorText.textContent = message;
|
|
||||||
errorMessage.classList.add('show');
|
|
||||||
|
|
||||||
// Hide after 5 seconds
|
|
||||||
setTimeout(() => {
|
|
||||||
errorMessage.classList.remove('show');
|
|
||||||
}, 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideMessages() {
|
|
||||||
if (successMessage) successMessage.classList.remove('show');
|
|
||||||
if (errorMessage) errorMessage.classList.remove('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check existing session - DISABLED auto-redirect
|
|
||||||
function checkExistingSession() {
|
|
||||||
const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
|
|
||||||
|
|
||||||
if (sessionData) {
|
|
||||||
try {
|
|
||||||
const session = JSON.parse(sessionData);
|
|
||||||
const loginTime = new Date(session.loginTime);
|
|
||||||
const now = new Date();
|
|
||||||
const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
|
|
||||||
|
|
||||||
// Auto-logout after 24 hours
|
|
||||||
if (sessionAge < 24) {
|
|
||||||
// User is still logged in - just log it, don't redirect
|
|
||||||
console.log('User already logged in');
|
|
||||||
// DISABLED: window.location.href = '../index.html';
|
|
||||||
} else {
|
|
||||||
// Session expired, remove it
|
|
||||||
console.log('Session expired, removing...');
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Session parsing error:', error);
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Logout function (can be called from other pages)
|
|
||||||
function logout() {
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
window.location.href = 'sites/login.html';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get current user (can be called from other pages)
|
|
||||||
function getCurrentUser() {
|
|
||||||
const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
|
|
||||||
|
|
||||||
if (sessionData) {
|
|
||||||
try {
|
|
||||||
const session = JSON.parse(sessionData);
|
|
||||||
const loginTime = new Date(session.loginTime);
|
|
||||||
const now = new Date();
|
|
||||||
const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
|
|
||||||
|
|
||||||
if (sessionAge < 24) {
|
|
||||||
return session.user;
|
|
||||||
} else {
|
|
||||||
// Session expired
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Session parsing error:', error);
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if user is logged in (can be called from other pages)
|
|
||||||
function isLoggedIn() {
|
|
||||||
return getCurrentUser() !== null;
|
|
||||||
}
|
|
||||||
@@ -1,272 +0,0 @@
|
|||||||
// register.js
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
const registerForm = document.getElementById('registerForm');
|
|
||||||
const registerBtn = document.getElementById('registerSubmit');
|
|
||||||
const successMessage = document.getElementById('successMessage');
|
|
||||||
const errorMessage = document.getElementById('errorMessage');
|
|
||||||
const errorText = document.getElementById('errorText');
|
|
||||||
const passwordInput = document.getElementById('password');
|
|
||||||
const confirmPasswordInput = document.getElementById('confirmPassword');
|
|
||||||
const passwordStrength = document.getElementById('passwordStrength');
|
|
||||||
|
|
||||||
// Check if user is already logged in
|
|
||||||
checkExistingSession();
|
|
||||||
|
|
||||||
// Password strength checker
|
|
||||||
if (passwordInput && passwordStrength) {
|
|
||||||
passwordInput.addEventListener('input', function() {
|
|
||||||
const password = this.value;
|
|
||||||
const strength = checkPasswordStrength(password);
|
|
||||||
updatePasswordStrength(strength);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Password confirmation checker
|
|
||||||
if (confirmPasswordInput && passwordInput) {
|
|
||||||
confirmPasswordInput.addEventListener('input', function() {
|
|
||||||
const password = passwordInput.value;
|
|
||||||
const confirmPassword = this.value;
|
|
||||||
|
|
||||||
if (confirmPassword && password !== confirmPassword) {
|
|
||||||
this.setCustomValidity('Passwörter stimmen nicht überein');
|
|
||||||
} else {
|
|
||||||
this.setCustomValidity('');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Registration form submission
|
|
||||||
if (registerForm) {
|
|
||||||
registerForm.addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// Get form data
|
|
||||||
const formData = {
|
|
||||||
type: 'register',
|
|
||||||
name: `${document.getElementById('firstName').value} ${document.getElementById('lastName').value}`,
|
|
||||||
email: document.getElementById('email').value,
|
|
||||||
phone: document.getElementById('phone').value,
|
|
||||||
company: document.getElementById('company').value,
|
|
||||||
password: passwordInput.value,
|
|
||||||
confirmPassword: confirmPasswordInput.value,
|
|
||||||
terms: document.getElementById('terms').checked,
|
|
||||||
newsletter: document.getElementById('newsletter').checked,
|
|
||||||
registrationTime: new Date().toISOString()
|
|
||||||
};
|
|
||||||
|
|
||||||
// Validation
|
|
||||||
const validation = validateRegistrationForm(formData);
|
|
||||||
if (!validation.valid) {
|
|
||||||
showError(validation.message);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show loading state
|
|
||||||
setLoadingState(true);
|
|
||||||
hideMessages();
|
|
||||||
|
|
||||||
// Send registration data to PHP API
|
|
||||||
try {
|
|
||||||
const response = await fetch('../scripts/add/send.php', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(formData)
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
// Store user data (for demo purposes)
|
|
||||||
const userData = {
|
|
||||||
firstName: document.getElementById('firstName').value,
|
|
||||||
lastName: document.getElementById('lastName').value,
|
|
||||||
email: formData.email,
|
|
||||||
phone: formData.phone,
|
|
||||||
company: formData.company,
|
|
||||||
registrationTime: formData.registrationTime,
|
|
||||||
newsletter: formData.newsletter
|
|
||||||
};
|
|
||||||
|
|
||||||
// Store in localStorage (for demo purposes)
|
|
||||||
localStorage.setItem('userData', JSON.stringify(userData));
|
|
||||||
localStorage.setItem('userRegistered', 'true');
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
showSuccess('Registrierung erfolgreich! Sie werden weitergeleitet...');
|
|
||||||
|
|
||||||
// Redirect after delay
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = '../index.html';
|
|
||||||
}, 2000);
|
|
||||||
} else {
|
|
||||||
showError('Registrierung fehlgeschlagen: ' + result.message);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Registration error:', error);
|
|
||||||
showError('Netzwerkfehler bei der Registrierung. Bitte versuchen Sie es später erneut.');
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingState(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Password strength checker function
|
|
||||||
function checkPasswordStrength(password) {
|
|
||||||
let strength = 0;
|
|
||||||
|
|
||||||
// Length check
|
|
||||||
if (password.length >= 8) strength++;
|
|
||||||
if (password.length >= 12) strength++;
|
|
||||||
|
|
||||||
// Character variety checks
|
|
||||||
if (/[a-z]/.test(password)) strength++; // lowercase
|
|
||||||
if (/[A-Z]/.test(password)) strength++; // uppercase
|
|
||||||
if (/[0-9]/.test(password)) strength++; // numbers
|
|
||||||
if (/[^a-zA-Z0-9]/.test(password)) strength++; // special characters
|
|
||||||
|
|
||||||
return strength;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update password strength indicator
|
|
||||||
function updatePasswordStrength(strength) {
|
|
||||||
const strengthBar = passwordStrength.querySelector('.strength-bar');
|
|
||||||
const strengthText = passwordStrength.querySelector('.strength-text');
|
|
||||||
|
|
||||||
// Remove all strength classes
|
|
||||||
passwordStrength.classList.remove('strength-weak', 'strength-medium', 'strength-strong');
|
|
||||||
|
|
||||||
if (strength <= 2) {
|
|
||||||
passwordStrength.classList.add('strength-weak');
|
|
||||||
strengthText.textContent = 'Schwach';
|
|
||||||
} else if (strength <= 4) {
|
|
||||||
passwordStrength.classList.add('strength-medium');
|
|
||||||
strengthText.textContent = 'Mittel';
|
|
||||||
} else {
|
|
||||||
passwordStrength.classList.add('strength-strong');
|
|
||||||
strengthText.textContent = 'Stark';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form validation
|
|
||||||
function validateRegistrationForm(data) {
|
|
||||||
// Required fields check
|
|
||||||
if (!data.firstName || !data.lastName || !data.email || !data.password) {
|
|
||||||
return { valid: false, message: 'Bitte füllen Sie alle Pflichtfelder aus.' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Name validation
|
|
||||||
if (data.firstName.length < 2 || data.lastName.length < 2) {
|
|
||||||
return { valid: false, message: 'Vorname und Nachname müssen mindestens 2 Zeichen lang sein.' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Email validation
|
|
||||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
||||||
if (!emailRegex.test(data.email)) {
|
|
||||||
return { valid: false, message: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Password validation
|
|
||||||
if (data.password.length < 8) {
|
|
||||||
return { valid: false, message: 'Das Passwort muss mindestens 8 Zeichen lang sein.' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Password confirmation
|
|
||||||
if (data.password !== data.confirmPassword) {
|
|
||||||
return { valid: false, message: 'Die Passwörter stimmen nicht überein.' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Terms acceptance
|
|
||||||
if (!data.terms) {
|
|
||||||
return { valid: false, message: 'Sie müssen die Nutzungsbedingungen akzeptieren.' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Phone validation (if provided)
|
|
||||||
if (data.phone) {
|
|
||||||
const phoneRegex = /^[\d\s\-\+\(\)]+$/;
|
|
||||||
if (!phoneRegex.test(data.phone)) {
|
|
||||||
return { valid: false, message: 'Bitte geben Sie eine gültige Telefonnummer ein.' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { valid: true, message: 'Validierung erfolgreich' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Loading state management
|
|
||||||
function setLoadingState(loading) {
|
|
||||||
if (registerBtn) {
|
|
||||||
const btnText = registerBtn.querySelector('.btn-text');
|
|
||||||
const btnLoading = registerBtn.querySelector('.btn-loading');
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
registerBtn.disabled = true;
|
|
||||||
if (btnText) btnText.style.display = 'none';
|
|
||||||
if (btnLoading) btnLoading.style.display = 'inline-block';
|
|
||||||
} else {
|
|
||||||
registerBtn.disabled = false;
|
|
||||||
if (btnText) btnText.style.display = 'inline-block';
|
|
||||||
if (btnLoading) btnLoading.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Message display functions
|
|
||||||
function showSuccess(message) {
|
|
||||||
if (successMessage) {
|
|
||||||
const messageElement = successMessage.querySelector('p');
|
|
||||||
if (messageElement) {
|
|
||||||
messageElement.textContent = message;
|
|
||||||
}
|
|
||||||
successMessage.classList.add('show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError(message) {
|
|
||||||
if (errorMessage && errorText) {
|
|
||||||
errorText.textContent = message;
|
|
||||||
errorMessage.classList.add('show');
|
|
||||||
|
|
||||||
// Hide after 5 seconds
|
|
||||||
setTimeout(() => {
|
|
||||||
errorMessage.classList.remove('show');
|
|
||||||
}, 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideMessages() {
|
|
||||||
if (successMessage) successMessage.classList.remove('show');
|
|
||||||
if (errorMessage) errorMessage.classList.remove('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check existing session (same as login.js) - DISABLED auto-redirect
|
|
||||||
function checkExistingSession() {
|
|
||||||
const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
|
|
||||||
|
|
||||||
if (sessionData) {
|
|
||||||
try {
|
|
||||||
const session = JSON.parse(sessionData);
|
|
||||||
const loginTime = new Date(session.loginTime);
|
|
||||||
const now = new Date();
|
|
||||||
const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
|
|
||||||
|
|
||||||
// Auto-logout after 24 hours
|
|
||||||
if (sessionAge < 24) {
|
|
||||||
// User is still logged in - just log it, don't redirect
|
|
||||||
console.log('User already logged in');
|
|
||||||
// DISABLED: window.location.href = '../index.html';
|
|
||||||
} else {
|
|
||||||
// Session expired, remove it
|
|
||||||
console.log('Session expired, removing...');
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Session parsing error:', error);
|
|
||||||
localStorage.removeItem('userSession');
|
|
||||||
sessionStorage.removeItem('userSession');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -59,23 +59,10 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ==========================================
|
// ==========================================
|
||||||
// 3. LOGIN BUTTON
|
// 3. LOGIN BUTTON (REMOVED)
|
||||||
// ==========================================
|
// ==========================================
|
||||||
|
|
||||||
const loginBtn = document.getElementById('loginBtn');
|
// Login button functionality has been removed
|
||||||
if (loginBtn) {
|
|
||||||
const currentPath = window.location.pathname;
|
|
||||||
let loginPath = 'sites/login.html';
|
|
||||||
|
|
||||||
if (currentPath.includes('/sites/')) {
|
|
||||||
loginPath = currentPath.includes('login.html') ? 'register.html' : 'login.html';
|
|
||||||
}
|
|
||||||
|
|
||||||
loginBtn.onclick = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
window.location.href = loginPath;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
// ==========================================
|
||||||
// 4. FORM SUBMISSION
|
// 4. FORM SUBMISSION
|
||||||
|
|||||||
1
Profice WebSite/scripts/script.min.js
vendored
Normal file
1
Profice WebSite/scripts/script.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", function(){const API_ENDPOINT = 'scripts/add/send.php';const isLocalFile = window.location.protocol === 'file:';// ========================================== // 1. SMOOTH SCROLLING // ========================================== function initSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(link =>{link.addEventListener('click', function(e){const targetId = this.getAttribute('href');if (targetId === '#') return;const targetElement = document.querySelector(targetId);if (targetElement){e.preventDefault();const header = document.querySelector('.top-banner');const headerHeight = header ? header.offsetHeight : 90;window.scrollTo({top: targetElement.offsetTop - headerHeight - 20, behavior: 'smooth'});history.pushState(null, null, targetId);}});});}initSmoothScrolling();// ========================================== // 2. MENU TOGGLE // ========================================== const menuToggle = document.getElementById('menuToggle');const slideMenu = document.getElementById('slideMenu');const overlay = document.getElementById('overlay');if (menuToggle && slideMenu && overlay){const toggleMenu = () =>{menuToggle.classList.toggle('active');slideMenu.classList.toggle('active');overlay.classList.toggle('active');};menuToggle.addEventListener('click', toggleMenu);overlay.addEventListener('click', toggleMenu);}// ========================================== // 3. LOGIN BUTTON (REMOVED) // ========================================== // Login button functionality has been removed // ========================================== // 4. FORM SUBMISSION // ========================================== const contactForm = document.getElementById('contactForm');const successMessage = document.getElementById('successMessage');if (contactForm){contactForm.addEventListener('submit', async function(e){e.preventDefault();const getValue = (id) =>{const el = document.getElementById(id);return el ? el.value : '';};const serviceSelect = document.getElementById('service');const selectedServiceText = serviceSelect ? serviceSelect.options[serviceSelect.selectedIndex].text : 'Dienstleistung';const formData ={type: 'contact', name: getValue('name'), organisation: getValue('organisation'), contact: getValue('contact'), service: getValue('service'), budget: getValue('budget'), description: getValue('description')};// Always store locally for dashboard try{const localLead ={id: Date.now(), datum: new Date().toLocaleDateString('de-DE'), dienstleistung: selectedServiceText, status: 'open', statusText: 'Offen', description: formData.description};const existingLeads = JSON.parse(localStorage.getItem('myLeads') || '[]');existingLeads.unshift(localLead);localStorage.setItem('myLeads', JSON.stringify(existingLeads.slice(0, 100)));}catch (err){}// Send to API if not local file if (!isLocalFile){try{const response = await fetch(API_ENDPOINT,{method: 'POST', headers:{'Content-Type': 'application/json'}, body: JSON.stringify(formData)});const result = await response.json();if (!result.success){alert('Fehler beim Senden: ' + (result.message || 'Unbekannter Fehler'));return;}}catch (error){alert('Netzwerkfehler beim Senden des Formulars');return;}}// Show success contactForm.style.display = 'none';if (successMessage) successMessage.classList.add('show');contactForm.reset();});}});
|
||||||
@@ -1,83 +1,170 @@
|
|||||||
// scroll-header.js
|
/**
|
||||||
|
* Ultra-Smooth Scroll Header - Butter Performance
|
||||||
|
* Uses advanced techniques for maximum smoothness
|
||||||
|
*/
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
const topBanner = document.querySelector('.top-banner');
|
const topBanner = document.querySelector('.top-banner');
|
||||||
const slideMenu = document.querySelector('.slide-menu');
|
const slideMenu = document.querySelector('.slide-menu');
|
||||||
|
|
||||||
if (!topBanner) return;
|
if (!topBanner) return;
|
||||||
|
|
||||||
// Scroll threshold to trigger the shrink effect
|
// Configuration for ultra-smooth performance
|
||||||
const scrollThreshold = 50;
|
const scrollThreshold = 50;
|
||||||
|
const rafDelay = 8; // 120fps for ultra-smooth
|
||||||
|
const transitionDuration = 400; // Slightly longer for smoother feel
|
||||||
|
|
||||||
|
// State tracking with performance optimization
|
||||||
let isScrolled = false;
|
let isScrolled = false;
|
||||||
let isTransitioning = false;
|
|
||||||
let lastScrollY = 0;
|
let lastScrollY = 0;
|
||||||
let scrollDirection = 'down';
|
let scrollDirection = 'down';
|
||||||
|
let rafId = null;
|
||||||
|
let lastUpdateTime = 0;
|
||||||
|
let scrollVelocity = 0;
|
||||||
|
let lastScrollTime = 0;
|
||||||
|
|
||||||
function updateHeaderState(scrolled) {
|
// Calculate scroll velocity for smoother transitions
|
||||||
if (isTransitioning) return;
|
function calculateVelocity(currentScrollY, currentTime) {
|
||||||
|
if (lastScrollTime === 0) {
|
||||||
if (scrolled && !isScrolled) {
|
lastScrollTime = currentTime;
|
||||||
isTransitioning = true;
|
return 0;
|
||||||
topBanner.classList.add('scrolled');
|
|
||||||
isScrolled = true;
|
|
||||||
|
|
||||||
if (slideMenu) {
|
|
||||||
slideMenu.style.top = '80px';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset transition flag after animation completes
|
|
||||||
setTimeout(() => {
|
|
||||||
isTransitioning = false;
|
|
||||||
}, 250);
|
|
||||||
|
|
||||||
} else if (!scrolled && isScrolled) {
|
|
||||||
isTransitioning = true;
|
|
||||||
topBanner.classList.remove('scrolled');
|
|
||||||
isScrolled = false;
|
|
||||||
|
|
||||||
if (slideMenu) {
|
|
||||||
slideMenu.style.top = '110px';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset transition flag after animation completes
|
|
||||||
setTimeout(() => {
|
|
||||||
isTransitioning = false;
|
|
||||||
}, 250);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const timeDelta = currentTime - lastScrollTime;
|
||||||
|
const scrollDelta = Math.abs(currentScrollY - lastScrollY);
|
||||||
|
const velocity = scrollDelta / timeDelta;
|
||||||
|
|
||||||
|
lastScrollTime = currentTime;
|
||||||
|
return velocity;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleScroll() {
|
// Ultra-smooth header state update with velocity-based easing
|
||||||
|
function updateHeaderState(scrolled, velocity = 0) {
|
||||||
|
if (scrolled === isScrolled) return;
|
||||||
|
|
||||||
|
// Add velocity-based class for different transition speeds
|
||||||
|
if (velocity > 5) {
|
||||||
|
topBanner.classList.add('fast-scroll');
|
||||||
|
} else {
|
||||||
|
topBanner.classList.remove('fast-scroll');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use requestAnimationFrame for smooth DOM updates
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (scrolled) {
|
||||||
|
topBanner.classList.add('scrolled');
|
||||||
|
if (slideMenu) {
|
||||||
|
slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
|
slideMenu.style.top = '80px';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
topBanner.classList.remove('scrolled');
|
||||||
|
if (slideMenu) {
|
||||||
|
slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
|
slideMenu.style.top = '110px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
isScrolled = scrolled;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Advanced scroll handler with velocity detection
|
||||||
|
function handleScroll(currentTime) {
|
||||||
|
// Ultra-high frequency throttling
|
||||||
|
if (currentTime - lastUpdateTime < rafDelay) {
|
||||||
|
rafId = requestAnimationFrame(handleScroll);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
const velocity = calculateVelocity(currentScrollY, currentTime);
|
||||||
|
|
||||||
// Detect scroll direction
|
// Detect scroll direction with hysteresis for stability
|
||||||
if (currentScrollY > lastScrollY) {
|
const scrollDelta = currentScrollY - lastScrollY;
|
||||||
scrollDirection = 'down';
|
if (Math.abs(scrollDelta) > 1) {
|
||||||
} else if (currentScrollY < lastScrollY) {
|
scrollDirection = scrollDelta > 0 ? 'down' : 'up';
|
||||||
scrollDirection = 'up';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Only update when crossing threshold in the right direction
|
// Apply hysteresis to prevent flickering
|
||||||
if (scrollDirection === 'down' && currentScrollY > scrollThreshold && !isScrolled) {
|
let shouldScroll;
|
||||||
updateHeaderState(true);
|
if (scrollDirection === 'down') {
|
||||||
} else if (scrollDirection === 'up' && currentScrollY <= scrollThreshold && isScrolled) {
|
shouldScroll = currentScrollY > scrollThreshold + 10;
|
||||||
updateHeaderState(false);
|
} else {
|
||||||
|
shouldScroll = currentScrollY > scrollThreshold - 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateHeaderState(shouldScroll, velocity);
|
||||||
|
|
||||||
lastScrollY = currentScrollY;
|
lastScrollY = currentScrollY;
|
||||||
|
lastUpdateTime = currentTime;
|
||||||
|
rafId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use requestAnimationFrame for smooth scroll handling
|
// Optimized scroll listener with passive event
|
||||||
let ticking = false;
|
function onScroll() {
|
||||||
function requestTick() {
|
if (!rafId) {
|
||||||
if (!ticking) {
|
rafId = requestAnimationFrame(handleScroll);
|
||||||
requestAnimationFrame(handleScroll);
|
|
||||||
ticking = true;
|
|
||||||
setTimeout(() => { ticking = false; }, 16); // ~60fps
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Optimized scroll event listener
|
// Add scroll listener with maximum performance
|
||||||
window.addEventListener('scroll', requestTick, { passive: true, capture: false });
|
window.addEventListener('scroll', onScroll, {
|
||||||
|
passive: true,
|
||||||
|
capture: false
|
||||||
|
});
|
||||||
|
|
||||||
// Initial check
|
// Handle resize with debouncing
|
||||||
handleScroll();
|
let resizeTimeout;
|
||||||
|
function onResize() {
|
||||||
|
clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(() => {
|
||||||
|
lastScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
updateHeaderState(lastScrollY > scrollThreshold);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', onResize, { passive: true });
|
||||||
|
|
||||||
|
// Handle visibility change to pause/resume animations
|
||||||
|
function onVisibilityChange() {
|
||||||
|
if (document.hidden) {
|
||||||
|
if (rafId) {
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
rafId = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
lastScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
updateHeaderState(lastScrollY > scrollThreshold);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('visibilitychange', onVisibilityChange);
|
||||||
|
|
||||||
|
// Initialize with smooth transition
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateHeaderState(window.pageYOffset > scrollThreshold);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add smooth scroll behavior to internal links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||||
|
link.addEventListener('click', function(e) {
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
if (targetElement) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Smooth scroll with header offset
|
||||||
|
const headerHeight = topBanner.offsetHeight;
|
||||||
|
const targetPosition = targetElement.offsetTop - headerHeight - 20;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
1
Profice WebSite/scripts/scroll-header.min.js
vendored
Normal file
1
Profice WebSite/scripts/scroll-header.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", function(){const topBanner = document.querySelector('.top-banner');const slideMenu = document.querySelector('.slide-menu');if (!topBanner) return;// Configuration for ultra-smooth performance const scrollThreshold = 50;const rafDelay = 8;// 120fps for ultra-smooth const transitionDuration = 400;// Slightly longer for smoother feel // State tracking with performance optimization let isScrolled = false;let lastScrollY = 0;let scrollDirection = 'down';let rafId = null;let lastUpdateTime = 0;let scrollVelocity = 0;let lastScrollTime = 0;// Calculate scroll velocity for smoother transitions function calculateVelocity(currentScrollY, currentTime){if (lastScrollTime === 0){lastScrollTime = currentTime;return 0;}const timeDelta = currentTime - lastScrollTime;const scrollDelta = Math.abs(currentScrollY - lastScrollY);const velocity = scrollDelta / timeDelta;lastScrollTime = currentTime;return velocity;}// Ultra-smooth header state update with velocity-based easing function updateHeaderState(scrolled, velocity = 0){if (scrolled === isScrolled) return;// Add velocity-based class for different transition speeds if (velocity > 5){topBanner.classList.add('fast-scroll');}else{topBanner.classList.remove('fast-scroll');}// Use requestAnimationFrame for smooth DOM updates requestAnimationFrame(() =>{if (scrolled){topBanner.classList.add('scrolled');if (slideMenu){slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';slideMenu.style.top = '80px';}}else{topBanner.classList.remove('scrolled');if (slideMenu){slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';slideMenu.style.top = '110px';}}});isScrolled = scrolled;}// Advanced scroll handler with velocity detection function handleScroll(currentTime){// Ultra-high frequency throttling if (currentTime - lastUpdateTime < rafDelay){rafId = requestAnimationFrame(handleScroll);return;}const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;const velocity = calculateVelocity(currentScrollY, currentTime);// Detect scroll direction with hysteresis for stability const scrollDelta = currentScrollY - lastScrollY;if (Math.abs(scrollDelta) > 1){scrollDirection = scrollDelta > 0 ? 'down' : 'up';}// Apply hysteresis to prevent flickering let shouldScroll;if (scrollDirection === 'down'){shouldScroll = currentScrollY > scrollThreshold + 10;}else{shouldScroll = currentScrollY > scrollThreshold - 10;}updateHeaderState(shouldScroll, velocity);lastScrollY = currentScrollY;lastUpdateTime = currentTime;rafId = null;}// Optimized scroll listener with passive event function onScroll(){if (!rafId){rafId = requestAnimationFrame(handleScroll);}}// Add scroll listener with maximum performance window.addEventListener('scroll', onScroll,{passive: true, capture: false});// Handle resize with debouncing let resizeTimeout;function onResize(){clearTimeout(resizeTimeout);resizeTimeout = setTimeout(() =>{lastScrollY = window.pageYOffset || document.documentElement.scrollTop;updateHeaderState(lastScrollY > scrollThreshold);}, 100);}window.addEventListener('resize', onResize,{passive: true});// Handle visibility change to pause/resume animations function onVisibilityChange(){if (document.hidden){if (rafId){cancelAnimationFrame(rafId);rafId = null;}}else{lastScrollY = window.pageYOffset || document.documentElement.scrollTop;updateHeaderState(lastScrollY > scrollThreshold);}}document.addEventListener('visibilitychange', onVisibilityChange);// Initialize with smooth transition requestAnimationFrame(() =>{updateHeaderState(window.pageYOffset > scrollThreshold);});// Add smooth scroll behavior to internal links document.querySelectorAll('a[href^="#"]').forEach(link =>{link.addEventListener('click', function(e){const targetId = this.getAttribute('href');if (targetId === '#') return;const targetElement = document.querySelector(targetId);if (targetElement){e.preventDefault();// Smooth scroll with header offset const headerHeight = topBanner.offsetHeight;const targetPosition = targetElement.offsetTop - headerHeight - 20;window.scrollTo({top: targetPosition, behavior: 'smooth'});}});});});
|
||||||
595
Profice WebSite/scripts/tech-onepager.js
Normal file
595
Profice WebSite/scripts/tech-onepager.js
Normal file
@@ -0,0 +1,595 @@
|
|||||||
|
/**
|
||||||
|
* Tech-Onepager JavaScript - Interactive Elements and Animations
|
||||||
|
* System being built aesthetic with smooth micro-animations
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
|
// ===== GLOBAL VARIABLES =====
|
||||||
|
let currentTooltip = null;
|
||||||
|
|
||||||
|
// ===== SYSTEM GRAPHIC ANIMATIONS =====
|
||||||
|
const systemGraphic = document.getElementById('systemGraphic');
|
||||||
|
const connections = document.getElementById('connections');
|
||||||
|
const dataPoints = document.getElementById('dataPoints');
|
||||||
|
|
||||||
|
if (systemGraphic && connections) {
|
||||||
|
initializeSystemGraphic();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeSystemGraphic() {
|
||||||
|
const nodes = systemGraphic.querySelectorAll('.node');
|
||||||
|
const centralNode = systemGraphic.querySelector('.central-node');
|
||||||
|
|
||||||
|
// Draw connection lines
|
||||||
|
drawConnections();
|
||||||
|
|
||||||
|
// Initialize tooltip system
|
||||||
|
initializeTooltips();
|
||||||
|
|
||||||
|
// Add node interactions
|
||||||
|
nodes.forEach(node => {
|
||||||
|
node.addEventListener('mouseenter', function() {
|
||||||
|
activateConnection(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
node.addEventListener('mouseleave', function() {
|
||||||
|
deactivateConnections();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Special handling for central node
|
||||||
|
if (node.classList.contains('central-node')) {
|
||||||
|
node.addEventListener('click', function() {
|
||||||
|
triggerCentralNode(this);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll-based activation
|
||||||
|
setupScrollActivation();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== TOOLTIP SYSTEM =====
|
||||||
|
function initializeTooltips() {
|
||||||
|
const nodes = systemGraphic.querySelectorAll('.node[data-tooltip]');
|
||||||
|
|
||||||
|
nodes.forEach(node => {
|
||||||
|
let hoverTimeout;
|
||||||
|
|
||||||
|
node.addEventListener('mouseenter', function() {
|
||||||
|
const tooltip = this.getAttribute('data-tooltip');
|
||||||
|
if (!tooltip) return;
|
||||||
|
|
||||||
|
// Clear any existing timeout
|
||||||
|
clearTimeout(hoverTimeout);
|
||||||
|
|
||||||
|
// Set 1-second delay before showing tooltip
|
||||||
|
hoverTimeout = setTimeout(() => {
|
||||||
|
showTooltip(this, tooltip);
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
node.addEventListener('mouseleave', function() {
|
||||||
|
// Clear the timeout if mouse leaves before 1 second
|
||||||
|
clearTimeout(hoverTimeout);
|
||||||
|
|
||||||
|
// Hide any visible tooltip
|
||||||
|
hideTooltip();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showTooltip(node, text) {
|
||||||
|
// Remove any existing tooltip
|
||||||
|
hideTooltip();
|
||||||
|
|
||||||
|
// Create tooltip element
|
||||||
|
const tooltip = document.createElement('div');
|
||||||
|
tooltip.className = 'node-tooltip';
|
||||||
|
tooltip.textContent = text;
|
||||||
|
|
||||||
|
// Position the tooltip
|
||||||
|
const nodeRect = node.getBoundingClientRect();
|
||||||
|
const systemGraphicRect = systemGraphic.getBoundingClientRect();
|
||||||
|
|
||||||
|
// Calculate position relative to system graphic
|
||||||
|
let left = nodeRect.left - systemGraphicRect.left + (nodeRect.width / 2) - 140; // Center horizontally
|
||||||
|
let top = nodeRect.top - systemGraphicRect.top - 60; // Position above node
|
||||||
|
|
||||||
|
// Adjust if tooltip goes outside bounds
|
||||||
|
if (left < 10) left = 10;
|
||||||
|
if (left + 280 > systemGraphicRect.width - 10) left = systemGraphicRect.width - 290;
|
||||||
|
if (top < 10) top = nodeRect.top - systemGraphicRect.top + nodeRect.height + 10; // Show below if not enough space above
|
||||||
|
|
||||||
|
tooltip.style.left = left + 'px';
|
||||||
|
tooltip.style.top = top + 'px';
|
||||||
|
|
||||||
|
// Add to system graphic
|
||||||
|
systemGraphic.appendChild(tooltip);
|
||||||
|
|
||||||
|
// Trigger show animation
|
||||||
|
setTimeout(() => {
|
||||||
|
tooltip.classList.add('show');
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
currentTooltip = tooltip;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideTooltip() {
|
||||||
|
if (currentTooltip) {
|
||||||
|
currentTooltip.classList.remove('show');
|
||||||
|
setTimeout(() => {
|
||||||
|
if (currentTooltip && currentTooltip.parentNode) {
|
||||||
|
currentTooltip.parentNode.removeChild(currentTooltip);
|
||||||
|
}
|
||||||
|
currentTooltip = null;
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup function
|
||||||
|
function cleanupTooltips() {
|
||||||
|
hideTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add cleanup on page unload
|
||||||
|
window.addEventListener('beforeunload', cleanupTooltips);
|
||||||
|
|
||||||
|
function drawConnections() {
|
||||||
|
const centralNode = systemGraphic.querySelector('.central-node');
|
||||||
|
const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)');
|
||||||
|
|
||||||
|
const centralRect = centralNode.getBoundingClientRect();
|
||||||
|
const graphicRect = systemGraphic.getBoundingClientRect();
|
||||||
|
|
||||||
|
const centerX = centralRect.left - graphicRect.left + centralRect.width / 2;
|
||||||
|
const centerY = centralRect.top - graphicRect.top + centralRect.height / 2;
|
||||||
|
|
||||||
|
connections.innerHTML = '';
|
||||||
|
|
||||||
|
otherNodes.forEach(node => {
|
||||||
|
const nodeRect = node.getBoundingClientRect();
|
||||||
|
const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2;
|
||||||
|
const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2;
|
||||||
|
|
||||||
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line.setAttribute('x1', centerX);
|
||||||
|
line.setAttribute('y1', centerY);
|
||||||
|
line.setAttribute('x2', nodeX);
|
||||||
|
line.setAttribute('y2', nodeY);
|
||||||
|
line.setAttribute('class', 'connection-line');
|
||||||
|
line.setAttribute('data-target', node.dataset.node);
|
||||||
|
|
||||||
|
connections.appendChild(line);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function triggerCentralNode(node) {
|
||||||
|
// Add triggered class for growth animation
|
||||||
|
node.classList.add('triggered');
|
||||||
|
|
||||||
|
// Activate all connections
|
||||||
|
const lines = connections.querySelectorAll('.connection-line');
|
||||||
|
lines.forEach((line, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
line.classList.add('active');
|
||||||
|
}, index * 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove triggered class after animation
|
||||||
|
setTimeout(() => {
|
||||||
|
node.classList.remove('triggered');
|
||||||
|
|
||||||
|
// Deactivate connections
|
||||||
|
setTimeout(() => {
|
||||||
|
lines.forEach(line => line.classList.remove('active'));
|
||||||
|
}, 500);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function activateConnection(node) {
|
||||||
|
const targetNode = node.dataset.node;
|
||||||
|
const line = connections.querySelector(`[data-target="${targetNode}"]`);
|
||||||
|
if (line) {
|
||||||
|
line.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deactivateConnections() {
|
||||||
|
const lines = connections.querySelectorAll('.connection-line');
|
||||||
|
lines.forEach(line => line.classList.remove('active'));
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupScrollActivation() {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const lines = connections.querySelectorAll('.connection-line');
|
||||||
|
lines.forEach((line, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
line.classList.add('active');
|
||||||
|
setTimeout(() => {
|
||||||
|
line.classList.remove('active');
|
||||||
|
}, 2000);
|
||||||
|
}, index * 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.5 });
|
||||||
|
|
||||||
|
observer.observe(systemGraphic);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== PROCESS LINE ANIMATION =====
|
||||||
|
const processLine = document.getElementById('processLine');
|
||||||
|
const processSteps = document.querySelectorAll('.process-step');
|
||||||
|
const processConnectors = document.querySelectorAll('.process-connector');
|
||||||
|
const stepDetails = document.querySelectorAll('.step-detail');
|
||||||
|
|
||||||
|
if (processLine) {
|
||||||
|
setupProcessAnimation();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupProcessAnimation() {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
animateProcessLine();
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.3 });
|
||||||
|
|
||||||
|
observer.observe(processLine);
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateProcessLine() {
|
||||||
|
// Animate connectors sequentially
|
||||||
|
processConnectors.forEach((connector, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
connector.classList.add('active');
|
||||||
|
}, 500 + (index * 500));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activate steps sequentially
|
||||||
|
processSteps.forEach((step, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
step.classList.add('active');
|
||||||
|
activateStepDetail(index + 1);
|
||||||
|
}, 200 + (index * 500));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function activateStepDetail(stepNumber) {
|
||||||
|
const detail = document.querySelector(`[data-step-detail="${stepNumber}"]`);
|
||||||
|
if (detail) {
|
||||||
|
setTimeout(() => {
|
||||||
|
detail.classList.add('active');
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step click interactions
|
||||||
|
processSteps.forEach((step, index) => {
|
||||||
|
step.addEventListener('click', () => {
|
||||||
|
// Reset all steps
|
||||||
|
processSteps.forEach(s => s.classList.remove('active'));
|
||||||
|
processConnectors.forEach(c => c.classList.remove('active'));
|
||||||
|
stepDetails.forEach(d => d.classList.remove('active'));
|
||||||
|
|
||||||
|
// Activate up to clicked step
|
||||||
|
for (let i = 0; i <= index; i++) {
|
||||||
|
processSteps[i].classList.add('active');
|
||||||
|
activateStepDetail(i + 1);
|
||||||
|
|
||||||
|
if (i < processConnectors.length) {
|
||||||
|
processConnectors[i].classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== INTERACTION CARD ANIMATIONS =====
|
||||||
|
const phoneInteraction = document.getElementById('phoneInteraction');
|
||||||
|
const chatInteraction = document.getElementById('chatInteraction');
|
||||||
|
|
||||||
|
if (phoneInteraction) {
|
||||||
|
setupPhoneInteraction();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (chatInteraction) {
|
||||||
|
setupChatInteraction();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupPhoneInteraction() {
|
||||||
|
const microphone = phoneInteraction.querySelector('.microphone');
|
||||||
|
const pulseRing = phoneInteraction.querySelector('.pulse-ring');
|
||||||
|
const micIcon = phoneInteraction.querySelector('.mic-icon');
|
||||||
|
|
||||||
|
if (microphone && pulseRing && micIcon) {
|
||||||
|
microphone.addEventListener('mouseenter', () => {
|
||||||
|
pulseRing.style.animation = 'pulse 0.8s infinite';
|
||||||
|
micIcon.style.transform = 'scale(1.1)';
|
||||||
|
});
|
||||||
|
|
||||||
|
microphone.addEventListener('mouseleave', () => {
|
||||||
|
pulseRing.style.animation = 'pulse 2s infinite';
|
||||||
|
micIcon.style.transform = 'scale(1)';
|
||||||
|
});
|
||||||
|
|
||||||
|
microphone.addEventListener('click', () => {
|
||||||
|
// Enhanced click animation
|
||||||
|
microphone.style.transform = 'scale(0.9)';
|
||||||
|
micIcon.style.transform = 'scale(0.8)';
|
||||||
|
|
||||||
|
// Create ripple effect
|
||||||
|
const ripple = document.createElement('div');
|
||||||
|
ripple.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: rippleEffect 0.6s ease-out;
|
||||||
|
pointer-events: none;
|
||||||
|
`;
|
||||||
|
microphone.appendChild(ripple);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
microphone.style.transform = 'scale(1.15)';
|
||||||
|
micIcon.style.transform = 'scale(1.1)';
|
||||||
|
setTimeout(() => {
|
||||||
|
microphone.style.transform = 'scale(1)';
|
||||||
|
micIcon.style.transform = 'scale(1)';
|
||||||
|
ripple.remove();
|
||||||
|
}, 200);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// Show feedback
|
||||||
|
showInteractionFeedback('KI Telefon wird verbunden...');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupChatInteraction() {
|
||||||
|
const chatWindow = chatInteraction.querySelector('.chat-window');
|
||||||
|
const typingIndicator = chatInteraction.querySelector('.typing-indicator');
|
||||||
|
const chatHeader = chatInteraction.querySelector('.chat-header');
|
||||||
|
|
||||||
|
if (chatWindow && typingIndicator && chatHeader) {
|
||||||
|
chatInteraction.addEventListener('mouseenter', () => {
|
||||||
|
// Enhanced typing animation
|
||||||
|
const spans = typingIndicator.querySelectorAll('span');
|
||||||
|
spans.forEach((span, index) => {
|
||||||
|
span.style.animation = 'typing 1.2s infinite ease-in-out';
|
||||||
|
span.style.animationDelay = `${-0.32 + (index * 0.16)}s`;
|
||||||
|
span.style.background = 'var(--accent-teal)';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animate chat window
|
||||||
|
chatWindow.style.transform = 'scale(1.02)';
|
||||||
|
chatHeader.style.background = 'linear-gradient(135deg, var(--accent-green), var(--accent-teal))';
|
||||||
|
});
|
||||||
|
|
||||||
|
chatInteraction.addEventListener('mouseleave', () => {
|
||||||
|
const spans = typingIndicator.querySelectorAll('span');
|
||||||
|
spans.forEach(span => {
|
||||||
|
span.style.background = 'var(--primary-mid)';
|
||||||
|
});
|
||||||
|
chatWindow.style.transform = 'scale(1)';
|
||||||
|
chatHeader.style.background = 'linear-gradient(135deg, var(--accent-teal), var(--accent-green))';
|
||||||
|
});
|
||||||
|
|
||||||
|
const chatBtn = chatInteraction.querySelector('.interaction-btn.secondary');
|
||||||
|
if (chatBtn) {
|
||||||
|
chatBtn.addEventListener('click', () => {
|
||||||
|
// Enhanced click animation
|
||||||
|
chatWindow.style.transform = 'scale(0.95)';
|
||||||
|
setTimeout(() => {
|
||||||
|
chatWindow.style.transform = 'scale(1.05)';
|
||||||
|
setTimeout(() => {
|
||||||
|
chatWindow.style.transform = 'scale(1)';
|
||||||
|
}, 200);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
showInteractionFeedback('KI Chat wird gestartet...');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showInteractionFeedback(message) {
|
||||||
|
// Create temporary feedback element
|
||||||
|
const feedback = document.createElement('div');
|
||||||
|
feedback.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 100px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: var(--accent-teal);
|
||||||
|
color: white;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
z-index: 10000;
|
||||||
|
box-shadow: 0 8px 30px rgba(38, 166, 154, 0.4);
|
||||||
|
animation: slideDown 0.3s ease;
|
||||||
|
`;
|
||||||
|
feedback.textContent = message;
|
||||||
|
|
||||||
|
document.body.appendChild(feedback);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
feedback.style.animation = 'slideUp 0.3s ease';
|
||||||
|
setTimeout(() => {
|
||||||
|
feedback.remove();
|
||||||
|
}, 300);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== HERO BUTTON INTERACTIONS =====
|
||||||
|
const kiPhoneBtn = document.getElementById('kiPhoneBtn');
|
||||||
|
const chatBtn = document.getElementById('chatBtn');
|
||||||
|
|
||||||
|
if (kiPhoneBtn) {
|
||||||
|
kiPhoneBtn.addEventListener('click', () => {
|
||||||
|
showInteractionFeedback('KI Telefon wird verbunden...');
|
||||||
|
// Scroll to interaction section
|
||||||
|
document.getElementById('interaction')?.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'center'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (chatBtn) {
|
||||||
|
chatBtn.addEventListener('click', () => {
|
||||||
|
showInteractionFeedback('KI Chat wird gestartet...');
|
||||||
|
// Scroll to interaction section
|
||||||
|
document.getElementById('interaction')?.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'center'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== SYSTEM CARD HOVER EFFECTS =====
|
||||||
|
const systemCards = document.querySelectorAll('.system-card');
|
||||||
|
|
||||||
|
systemCards.forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', function() {
|
||||||
|
// Add subtle glow effect
|
||||||
|
this.style.boxShadow = '0 25px 50px rgba(38, 166, 154, 0.2)';
|
||||||
|
|
||||||
|
// Animate internal components
|
||||||
|
const flowItems = this.querySelectorAll('.flow-item, .phone-icon, .ki-processor, .crm-output');
|
||||||
|
flowItems.forEach((item, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
item.style.transform = 'translateY(-2px)';
|
||||||
|
setTimeout(() => {
|
||||||
|
item.style.transform = 'translateY(0)';
|
||||||
|
}, 200);
|
||||||
|
}, index * 100);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', function() {
|
||||||
|
this.style.boxShadow = '0 12px 30px rgba(79, 71, 71, 0.1)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== DATA CARD ANIMATIONS =====
|
||||||
|
const dataCards = document.querySelectorAll('.data-card');
|
||||||
|
|
||||||
|
const dataCardObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry, index) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setTimeout(() => {
|
||||||
|
entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
|
||||||
|
}, index * 100);
|
||||||
|
dataCardObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.1 });
|
||||||
|
|
||||||
|
dataCards.forEach(card => {
|
||||||
|
dataCardObserver.observe(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== SMOOTH SCROLL FOR INTERNAL LINKS =====
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== UTILITY ANIMATIONS =====
|
||||||
|
// Add CSS animations dynamically
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rippleEffect {
|
||||||
|
from {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
// ===== PERFORMANCE OPTIMIZATION =====
|
||||||
|
// Throttle scroll events
|
||||||
|
let ticking = false;
|
||||||
|
function requestTick() {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(updateScrollEffects);
|
||||||
|
ticking = true;
|
||||||
|
setTimeout(() => { ticking = false; }, 16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateScrollEffects() {
|
||||||
|
// Add scroll-based effects here if needed
|
||||||
|
// Parallax, fade-ins, etc.
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', requestTick, { passive: true });
|
||||||
|
|
||||||
|
// ===== INITIALIZATION COMPLETE =====
|
||||||
|
console.log('Tech-Onepager initialized successfully');
|
||||||
|
});
|
||||||
1
Profice WebSite/scripts/tech-onepager.min.js
vendored
Normal file
1
Profice WebSite/scripts/tech-onepager.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,11 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Profice - Automatisierung</title>
|
<meta name="description" content="Profice - automatisation Lösungen für digitale Transformation.">
|
||||||
|
<meta name="keywords" content="Profice, automatisation, Webentwicklung, KI, Automatisierung">
|
||||||
|
<meta name="author" content="Profice">
|
||||||
|
<meta property="og:title" content="automatisation - Profice">
|
||||||
|
<meta property="og:description" content="Profice automatisation Lösungen">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<title>automatisation - Profice</title>
|
||||||
|
|
||||||
|
<!-- Preload critical resources -->
|
||||||
|
<link rel="preload" href="../style/design.css" as="style">
|
||||||
|
<link rel="preload" href="../style/cursor.css" as="style">
|
||||||
|
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
<link rel="stylesheet" href="../style/design.css">
|
||||||
<link rel="stylesheet" href="../style/service.css">
|
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
<link rel="stylesheet" href="../style/cursor.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -23,26 +36,11 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-banner-center">
|
<div class="top-banner-center"><!-- Navigation removed --></div>
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Home</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Enterprise</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Pricing</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
<div class="top-banner-right">
|
||||||
<button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
|
<button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
|
||||||
<img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
|
<img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
|
||||||
</button>
|
</button>
|
||||||
<button id="loginBtn" class="login-btn" aria-label="Log in" title="Log in">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
||||||
<polyline points="10 17 15 12 10 7"></polyline>
|
|
||||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Log in
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -61,51 +59,51 @@
|
|||||||
<div class="service-container">
|
<div class="service-container">
|
||||||
<!-- Service Header -->
|
<!-- Service Header -->
|
||||||
<div class="service-header">
|
<div class="service-header">
|
||||||
<div class="service-icon">⚙️</div>
|
<div class="service-icon">âš™ï¸</div>
|
||||||
<h1 class="service-title">Automatisierung</h1>
|
<h1 class="service-title">Automatisierung</h1>
|
||||||
<p class="service-subtitle">Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen</p>
|
<p class="service-subtitle">Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Service Description -->
|
<!-- Service Description -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Unsere Automatisierungslösungen</h2>
|
<h2 class="section-title">Unsere Automatisierungslösungen</h2>
|
||||||
<p class="section-text">
|
<p class="section-text">
|
||||||
Wir automatisieren Ihre Geschäftsprozesse, um Effizienz zu steigern und menschliche Fehler zu reduzieren.
|
Wir automatisieren Ihre Geschäftsprozesse, um Effizienz zu steigern und menschliche Fehler zu reduzieren.
|
||||||
Von einfachen wiederkehrenden Aufgaben bis zu komplexen Workflow-Integrationen - wir finden die optimale Lösung.
|
Von einfachen wiederkehrenden Aufgaben bis zu komplexen Workflow-Integrationen - wir finden die optimale Lösung.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Service Features -->
|
<!-- Service Features -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Was wir automatisieren können</h2>
|
<h2 class="section-title">Was wir automatisieren können</h2>
|
||||||
<div class="features-grid">
|
<div class="features-grid">
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📧</div>
|
<div class="feature-icon">📧</div>
|
||||||
<h3>E-Mail-Automatisierung</h3>
|
<h3>E-Mail-Automatisierung</h3>
|
||||||
<p>Automatische Antwortverwaltung und E-Mail-Kampagnen</p>
|
<p>Automatische Antwortverwaltung und E-Mail-Kampagnen</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📄</div>
|
<div class="feature-icon">📄</div>
|
||||||
<h3>Datenverarbeitung</h3>
|
<h3>Datenverarbeitung</h3>
|
||||||
<p>Automatische Datenmigration und -bereinigung</p>
|
<p>Automatische Datenmigration und -bereinigung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📋</div>
|
<div class="feature-icon">📋</div>
|
||||||
<h3>Report-Generierung</h3>
|
<h3>Report-Generierung</h3>
|
||||||
<p>Automatische Erstellung von Berichten und Analysen</p>
|
<p>Automatische Erstellung von Berichten und Analysen</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🔄</div>
|
<div class="feature-icon">🔄</div>
|
||||||
<h3>Workflow-Integration</h3>
|
<h3>Workflow-Integration</h3>
|
||||||
<p>Verbindung verschiedener Systeme für nahtlose Prozesse</p>
|
<p>Verbindung verschiedener Systeme für nahtlose Prozesse</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📊</div>
|
<div class="feature-icon">📊</div>
|
||||||
<h3>Monitoring</h3>
|
<h3>Monitoring</h3>
|
||||||
<p>Automatische Systemüberwachung und Alarmierung</p>
|
<p>Automatische Systemüberwachung und Alarmierung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🎯</div>
|
<div class="feature-icon">🎯</div>
|
||||||
<h3>Task-Management</h3>
|
<h3>Task-Management</h3>
|
||||||
<p>Intelligente Aufgabenverteilung und -verfolgung</p>
|
<p>Intelligente Aufgabenverteilung und -verfolgung</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -126,8 +124,8 @@
|
|||||||
<div class="process-item">
|
<div class="process-item">
|
||||||
<div class="process-number">2</div>
|
<div class="process-number">2</div>
|
||||||
<div class="process-content">
|
<div class="process-content">
|
||||||
<h3>Lösungsdesign</h3>
|
<h3>Lösungsdesign</h3>
|
||||||
<p>Entwicklung maßgeschneiderter Automatisierungslösungen</p>
|
<p>Entwicklung maßgeschneiderter Automatisierungslösungen</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process-item">
|
<div class="process-item">
|
||||||
@@ -148,7 +146,7 @@
|
|||||||
<div class="process-number">5</div>
|
<div class="process-number">5</div>
|
||||||
<div class="process-content">
|
<div class="process-content">
|
||||||
<h3>Monitoring</h3>
|
<h3>Monitoring</h3>
|
||||||
<p>Laufende Überwachung und Optimierung</p>
|
<p>Laufende Ãœberwachung und Optimierung</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -167,27 +165,27 @@
|
|||||||
<h2 class="section-title">Ihre Vorteile</h2>
|
<h2 class="section-title">Ihre Vorteile</h2>
|
||||||
<div class="benefits-grid">
|
<div class="benefits-grid">
|
||||||
<div class="benefit-item">
|
<div class="benefit-item">
|
||||||
<div class="benefit-icon">⏰️</div>
|
<div class="benefit-icon">â°ï¸</div>
|
||||||
<h3>Zeitersparnis</h3>
|
<h3>Zeitersparnis</h3>
|
||||||
<p>Bis zu 80% Zeitersparnis bei wiederkehrenden Aufgaben</p>
|
<p>Bis zu 80% Zeitersparnis bei wiederkehrenden Aufgaben</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="benefit-item">
|
<div class="benefit-item">
|
||||||
<div class="benefit-icon">🎯</div>
|
<div class="benefit-icon">🎯</div>
|
||||||
<h3>Qualitätssteigerung</h3>
|
<h3>Qualitätssteigerung</h3>
|
||||||
<p>Reduzierung menschlicher Fehler und konsistente Ergebnisse</p>
|
<p>Reduzierung menschlicher Fehler und konsistente Ergebnisse</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="benefit-item">
|
<div class="benefit-item">
|
||||||
<div class="benefit-icon">💰</div>
|
<div class="benefit-icon">💰</div>
|
||||||
<h3>Kostensenkung</h3>
|
<h3>Kostensenkung</h3>
|
||||||
<p>Optimierung von Ressourcen und Betriebskosten</p>
|
<p>Optimierung von Ressourcen und Betriebskosten</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="benefit-item">
|
<div class="benefit-item">
|
||||||
<div class="benefit-icon">📈</div>
|
<div class="benefit-icon">📈</div>
|
||||||
<h3>Skalierbarkeit</div>
|
<h3>Skalierbarkeit</div>
|
||||||
<p>Einfache Handhabung wachsender Geschäftsanforderungen</p>
|
<p>Einfache Handhabung wachsender Geschäftsanforderungen</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="benefit-item">
|
<div class="benefit-item">
|
||||||
<div class="benefit-icon">😊</div>
|
<div class="benefit-icon">😊</div>
|
||||||
<h3>Mitarbeiterzufriedenheit</h3>
|
<h3>Mitarbeiterzufriedenheit</h3>
|
||||||
<p>Fokus auf kreative und strategische Aufgaben</p>
|
<p>Fokus auf kreative und strategische Aufgaben</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -196,7 +194,7 @@
|
|||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Bereit für mehr Effizienz?</h2>
|
<h2 class="section-title">Bereit für mehr Effizienz?</h2>
|
||||||
<p class="section-text">Lassen Sie uns Ihre Prozesse analysieren und Potenziale identifizieren.</p>
|
<p class="section-text">Lassen Sie uns Ihre Prozesse analysieren und Potenziale identifizieren.</p>
|
||||||
<div class="cta-buttons">
|
<div class="cta-buttons">
|
||||||
<a href="offers.html?service=automatisation" class="cta-btn primary">Automatisierungs-Analyse</a>
|
<a href="offers.html?service=automatisation" class="cta-btn primary">Automatisierungs-Analyse</a>
|
||||||
@@ -206,8 +204,98 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer Banner -->
|
||||||
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||||
|
<style>
|
||||||
|
.footer-banner a { color: white !important; }
|
||||||
|
</style>
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Company Info Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-description">
|
||||||
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Services</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||||||
|
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||||||
|
<a href="offers.html" class="footer-link">Kontakt</a>
|
||||||
|
<a href="leads.html" class="footer-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legal Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Rechtliches</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
<a href="#" class="footer-link">AGB</a>
|
||||||
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Kontakt</h4>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+49 123 456789</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>info@profice.de</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-media">
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-bottom-content">
|
||||||
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#" class="footer-link">Datenschutz</a>
|
||||||
|
<span class="separator">•</span>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script src="../scripts/script.js"></script>
|
<script src="../scripts/script.js"></script>
|
||||||
<script src="../scripts/cursor.js"></script>
|
<script src="../scripts/cursor.js"></script>
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
<!-- Optimized script loading -->
|
||||||
|
<script src="../scripts/script.js" defer></script>
|
||||||
|
<script src="../scripts/cursor.js" defer></script>
|
||||||
|
<script src="../scripts/scroll-header.min.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Profice - KI Integration</title>
|
<meta name="description" content="Profice - ki integration Lösungen für digitale Transformation.">
|
||||||
|
<meta name="keywords" content="Profice, ki integration, Webentwicklung, KI, Automatisierung">
|
||||||
|
<meta name="author" content="Profice">
|
||||||
|
<meta property="og:title" content="ki integration - Profice">
|
||||||
|
<meta property="og:description" content="Profice ki integration Lösungen">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<title>ki integration - Profice</title>
|
||||||
|
|
||||||
|
<!-- Preload critical resources -->
|
||||||
|
<link rel="preload" href="../style/design.css" as="style">
|
||||||
|
<link rel="preload" href="../style/cursor.css" as="style">
|
||||||
|
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
<link rel="stylesheet" href="../style/design.css">
|
||||||
<link rel="stylesheet" href="../style/service.css">
|
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
<link rel="stylesheet" href="../style/cursor.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -23,14 +36,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-banner-center">
|
<div class="top-banner-center"><!-- Navigation removed --></div>
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Home</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Enterprise</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Pricing</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
<div class="top-banner-right">
|
||||||
<button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
|
<button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
|
||||||
<img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
|
<img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
|
||||||
@@ -61,17 +67,17 @@
|
|||||||
<div class="service-container">
|
<div class="service-container">
|
||||||
<!-- Service Header -->
|
<!-- Service Header -->
|
||||||
<div class="service-header">
|
<div class="service-header">
|
||||||
<div class="service-icon">🤖</div>
|
<div class="service-icon">🤖</div>
|
||||||
<h1 class="service-title">KI Integration</h1>
|
<h1 class="service-title">KI Integration</h1>
|
||||||
<p class="service-subtitle">Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren</p>
|
<p class="service-subtitle">Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Service Description -->
|
<!-- Service Description -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Unsere KI-Dienstleistungen</h2>
|
<h2 class="section-title">Unsere KI-Dienstleistungen</h2>
|
||||||
<p class="section-text">
|
<p class="section-text">
|
||||||
Wir integrieren künstliche Intelligenz in Ihre Geschäftsprozesse, um Effizienz zu steigern und neue Möglichkeiten zu erschließen.
|
Wir integrieren künstliche Intelligenz in Ihre Geschäftsprozesse, um Effizienz zu steigern und neue Möglichkeiten zu erschließen.
|
||||||
Von der Datenanalyse über automatisierte Prozesse bis zu intelligenten Chatbots - wir machen KI für Sie nutzbar.
|
Von der Datenanalyse über automatisierte Prozesse bis zu intelligenten Chatbots - wir machen KI für Sie nutzbar.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -80,34 +86,34 @@
|
|||||||
<h2 class="section-title">Was wir bieten</h2>
|
<h2 class="section-title">Was wir bieten</h2>
|
||||||
<div class="features-grid">
|
<div class="features-grid">
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📊</div>
|
<div class="feature-icon">📊</div>
|
||||||
<h3>Datenanalyse</h3>
|
<h3>Datenanalyse</h3>
|
||||||
<p>Intelligente Auswertung Ihrer Geschäftsdaten für bessere Entscheidungen</p>
|
<p>Intelligente Auswertung Ihrer Geschäftsdaten für bessere Entscheidungen</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🤖</div>
|
<div class="feature-icon">🤖</div>
|
||||||
<h3>Chatbots</h3>
|
<h3>Chatbots</h3>
|
||||||
<p>24/7 Kundenbetreuung und automatisierte Kommunikation</p>
|
<p>24/7 Kundenbetreuung und automatisierte Kommunikation</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">⚙️</div>
|
<div class="feature-icon">âš™ï¸</div>
|
||||||
<h3>Prozessautomatisierung</h3>
|
<h3>Prozessautomatisierung</h3>
|
||||||
<p>Automatisierung wiederkehrender Aufgaben zur Effizienzsteigerung</p>
|
<p>Automatisierung wiederkehrender Aufgaben zur Effizienzsteigerung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🔍</div>
|
<div class="feature-icon">ðŸ”</div>
|
||||||
<h3>Bilderkennung</h3>
|
<h3>Bilderkennung</h3>
|
||||||
<p>Automatische Analyse von Bildern und Dokumenten</p>
|
<p>Automatische Analyse von Bildern und Dokumenten</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📈</div>
|
<div class="feature-icon">📈</div>
|
||||||
<h3>Vorhersagemodelle</h3>
|
<h3>Vorhersagemodelle</h3>
|
||||||
<p>Prognosen für Trends und Geschäftsentwicklungen</p>
|
<p>Prognosen für Trends und Geschäftsentwicklungen</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🎯</div>
|
<div class="feature-icon">🎯</div>
|
||||||
<h3>Personalisierung</h3>
|
<h3>Personalisierung</h3>
|
||||||
<p>Individuelle KI-Lösungen für Ihre spezifischen Bedürfnisse</p>
|
<p>Individuelle KI-Lösungen für Ihre spezifischen Bedürfnisse</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -120,7 +126,7 @@
|
|||||||
<div class="process-number">1</div>
|
<div class="process-number">1</div>
|
||||||
<div class="process-content">
|
<div class="process-content">
|
||||||
<h3>Analyse & Potenzial</h3>
|
<h3>Analyse & Potenzial</h3>
|
||||||
<p>Identifizierung von KI-Einsatzmöglichkeiten in Ihrem Unternehmen</p>
|
<p>Identifizierung von KI-Einsatzmöglichkeiten in Ihrem Unternehmen</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process-item">
|
<div class="process-item">
|
||||||
@@ -173,11 +179,11 @@
|
|||||||
|
|
||||||
<!-- Use Cases -->
|
<!-- Use Cases -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Anwendungsfälle</h2>
|
<h2 class="section-title">Anwendungsfälle</h2>
|
||||||
<div class="use-cases-grid">
|
<div class="use-cases-grid">
|
||||||
<div class="use-case-item">
|
<div class="use-case-item">
|
||||||
<h3>Kundenservice</h3>
|
<h3>Kundenservice</h3>
|
||||||
<p>Intelligente Chatbots für 24/7 Unterstützung</p>
|
<p>Intelligente Chatbots für 24/7 Unterstützung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="use-case-item">
|
<div class="use-case-item">
|
||||||
<h3>Vertrieb</h3>
|
<h3>Vertrieb</h3>
|
||||||
@@ -189,19 +195,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="use-case-item">
|
<div class="use-case-item">
|
||||||
<h3>Finanzen</h3>
|
<h3>Finanzen</h3>
|
||||||
<p>Betrugsprüfung und Risikoanalyse</p>
|
<p>Betrugsprüfung und Risikoanalyse</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="use-case-item">
|
<div class="use-case-item">
|
||||||
<h3>Produktion</h3>
|
<h3>Produktion</h3>
|
||||||
<p>Qualitätssicherung und Predictive Maintenance</p>
|
<p>Qualitätssicherung und Predictive Maintenance</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Bereit für KI in Ihrem Unternehmen?</h2>
|
<h2 class="section-title">Bereit für KI in Ihrem Unternehmen?</h2>
|
||||||
<p class="section-text">Lassen Sie uns die Potenziale für Ihr Unternehmen analysieren.</p>
|
<p class="section-text">Lassen Sie uns die Potenziale für Ihr Unternehmen analysieren.</p>
|
||||||
<div class="cta-buttons">
|
<div class="cta-buttons">
|
||||||
<a href="offers.html?service=ki-integration" class="cta-btn primary">KI-Analyse anfordern</a>
|
<a href="offers.html?service=ki-integration" class="cta-btn primary">KI-Analyse anfordern</a>
|
||||||
<a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
|
<a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
|
||||||
@@ -210,8 +216,98 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer Banner -->
|
||||||
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||||
|
<style>
|
||||||
|
.footer-banner a { color: white !important; }
|
||||||
|
</style>
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Company Info Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-description">
|
||||||
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Services</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||||||
|
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||||||
|
<a href="offers.html" class="footer-link">Kontakt</a>
|
||||||
|
<a href="leads.html" class="footer-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legal Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Rechtliches</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
<a href="#" class="footer-link">AGB</a>
|
||||||
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Kontakt</h4>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+49 123 456789</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>info@profice.de</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-media">
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-bottom-content">
|
||||||
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#" class="footer-link">Datenschutz</a>
|
||||||
|
<span class="separator">•</span>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script src="../scripts/script.js"></script>
|
<script src="../scripts/script.js"></script>
|
||||||
<script src="../scripts/cursor.js"></script>
|
<script src="../scripts/cursor.js"></script>
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
<!-- Optimized script loading -->
|
||||||
|
<script src="../scripts/script.js" defer></script>
|
||||||
|
<script src="../scripts/cursor.js" defer></script>
|
||||||
|
<script src="../scripts/scroll-header.min.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Profice - Leads Dashboard</title>
|
<meta name="description" content="Profice Leads Dashboard - Verwalten Sie Ihre Projektanfragen und digitalen Transformationen.">
|
||||||
|
<meta name="keywords" content="Leads Dashboard, Anfragen, Projektmanagement, Profice">
|
||||||
|
<meta name="author" content="Profice">
|
||||||
|
<meta property="og:title" content="Leads Dashboard - Profice">
|
||||||
|
<meta property="og:description" content="Verwalten Sie Ihre Projektanfragen">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="robots" content="noindex, nofollow">
|
||||||
|
<title>Leads Dashboard - Profice</title>
|
||||||
|
|
||||||
|
<!-- Preload critical resources -->
|
||||||
|
<link rel="preload" href="../style/design.css" as="style">
|
||||||
|
<link rel="preload" href="../style/cursor.css" as="style">
|
||||||
|
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
<link rel="stylesheet" href="../style/design.css">
|
||||||
<link rel="stylesheet" href="../style/leads.css">
|
<link rel="stylesheet" href="../style/leads.min.css">
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
<link rel="stylesheet" href="../style/cursor.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -13,7 +27,7 @@
|
|||||||
<header class="top-banner dark-theme">
|
<header class="top-banner dark-theme">
|
||||||
<div class="top-banner-left">
|
<div class="top-banner-left">
|
||||||
<div class="banner-left">
|
<div class="banner-left">
|
||||||
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
@@ -23,26 +37,11 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-banner-center">
|
<div class="top-banner-center"><!-- Navigation removed --></div>
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Startseite</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Preise</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
<div class="top-banner-right">
|
||||||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
||||||
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
||||||
</button>
|
</button>
|
||||||
<button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
||||||
<polyline points="10 17 15 12 10 7"></polyline>
|
|
||||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Anmelden
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -61,7 +60,7 @@
|
|||||||
<!-- Leads Widget -->
|
<!-- Leads Widget -->
|
||||||
<div class="dashboard-container">
|
<div class="dashboard-container">
|
||||||
<h2 class="dashboard-title">Meine Anfragen</h2>
|
<h2 class="dashboard-title">Meine Anfragen</h2>
|
||||||
<p class="dashboard-subtitle">Übersicht Ihrer aktuellen Projektanfragen</p>
|
<p class="dashboard-subtitle">Ãœbersicht Ihrer aktuellen Projektanfragen</p>
|
||||||
|
|
||||||
<div class="leads-table-wrapper">
|
<div class="leads-table-wrapper">
|
||||||
<table class="leads-table" id="leadsTable">
|
<table class="leads-table" id="leadsTable">
|
||||||
@@ -74,7 +73,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="leadsTableBody">
|
<tbody id="leadsTableBody">
|
||||||
<!-- Populated by leads.js -->
|
<!-- Populated by leads.min.js -->
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@@ -110,8 +109,95 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="../scripts/leads.js"></script>
|
<!-- Footer Banner -->
|
||||||
<script src="../scripts/cursor.js"></script>
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
<style>
|
||||||
|
.footer-banner a { color: white !important; }
|
||||||
|
</style>
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Company Info Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-description">
|
||||||
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Services</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||||||
|
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||||||
|
<a href="offers.html" class="footer-link">Kontakt</a>
|
||||||
|
<a href="leads.html" class="footer-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legal Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Rechtliches</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
<a href="#" class="footer-link">AGB</a>
|
||||||
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Kontakt</h4>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+49 123 456789</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>info@profice.de</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-media">
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-bottom-content">
|
||||||
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#" class="footer-link">Datenschutz</a>
|
||||||
|
<span class="separator">•</span>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Optimized script loading -->
|
||||||
|
<script src="../scripts/script.js" defer></script>
|
||||||
|
<script src="../scripts/leads.min.js" defer></script>
|
||||||
|
<script src="../scripts/cursor.js" defer></script>
|
||||||
|
<script src="../scripts/scroll-header.min.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -1,138 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Profice - Anmeldung</title>
|
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
|
||||||
<link rel="stylesheet" href="../style/login.css">
|
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Top Banner -->
|
|
||||||
<header class="top-banner dark-theme">
|
|
||||||
<div class="top-banner-left">
|
|
||||||
<div class="banner-left">
|
|
||||||
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</button>
|
|
||||||
<a href="../index.html" class="logo-link">
|
|
||||||
<img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-center">
|
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Startseite</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Preise</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
|
||||||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
|
||||||
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
|
||||||
</button>
|
|
||||||
<button id="registerBtn" class="login-btn register" aria-label="Registrieren" title="Registrieren">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
||||||
<circle cx="8.5" cy="7" r="4"></circle>
|
|
||||||
<line x1="20" y1="8" x2="20" y2="14"></line>
|
|
||||||
<line x1="23" y1="11" x2="17" y2="11"></line>
|
|
||||||
</svg>
|
|
||||||
Registrieren
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Slide Menu -->
|
|
||||||
<nav class="slide-menu" id="slideMenu">
|
|
||||||
<a href="../index.html">Startseite</a>
|
|
||||||
<a href="offers.html">Kontakt & Anfrage</a>
|
|
||||||
<a href="leads.html">Leads Dashboard</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Overlay -->
|
|
||||||
<div class="overlay" id="overlay"></div>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="main-content login-content">
|
|
||||||
<div class="login-container">
|
|
||||||
<div class="login-header">
|
|
||||||
<div class="login-icon">🔐</div>
|
|
||||||
<h1 class="login-title">Willkommen zurück</h1>
|
|
||||||
<p class="login-subtitle">Melden Sie sich an, um auf Ihr Konto zuzugreifen</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form id="loginForm" class="login-form">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">E-Mail</label>
|
|
||||||
<input type="email" id="email" name="email" required placeholder="ihre@email.de">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password">Passwort</label>
|
|
||||||
<input type="password" id="password" name="password" required placeholder="Passwort">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-options">
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" id="remember" name="remember">
|
|
||||||
<span class="checkbox-custom"></span>
|
|
||||||
Angemeldet bleiben
|
|
||||||
</label>
|
|
||||||
<a href="#" class="forgot-password">Passwort vergessen?</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="login-btn-submit" id="loginSubmit">
|
|
||||||
<span class="btn-text">Anmelden</span>
|
|
||||||
<span class="btn-loading" style="display: none;">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
|
|
||||||
<polyline points="22 6 12 16 2 6"></polyline>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="login-divider">
|
|
||||||
<span>oder</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="social-login">
|
|
||||||
<button type="button" class="social-btn google-btn">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c-.82 2.33-2.85 4.08-5.92 4.08-.57 0-1.11-.08-1.63-.24V14.6c.52.16 1.06.24 1.63.24 3.07 0 5.52-2.51 5.52-5.52 0-.1 0-.2-.01-.3-.57-2.53-2.11-4.52-4.52-4.52zM12 23c-1.61 0-3.09-.59-4.23-1.57l.01-.02V18.6l-.01.02c1.14-.98 2.62-1.57 4.23-1.57 3.07 0 5.52 2.51 5.52 5.52 0 .1 0 .2-.01.3z"/>
|
|
||||||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
||||||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.46l-2.85 2.22c-.81-.62-1.79-1.11-2.85-1.36-.52-.16-1.06-.24-1.63-.24-3.07 0-5.52 2.51-5.52 5.52 0 .1 0 .2.01.3.57 2.53 2.11 4.52 4.52 4.52z"/>
|
|
||||||
</svg>
|
|
||||||
Mit Google anmelden
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login-footer">
|
|
||||||
<p>Noch kein Konto? <a href="register.html">Jetzt registrieren</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="success-message" id="successMessage">
|
|
||||||
<div class="success-icon">✅</div>
|
|
||||||
<h3>Erfolgreich angemeldet!</h3>
|
|
||||||
<p>Sie werden weitergeleitet...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="error-message" id="errorMessage">
|
|
||||||
<div class="error-icon">❌</div>
|
|
||||||
<h3>Anmeldung fehlgeschlagen</h3>
|
|
||||||
<p id="errorText">Bitte überprüfen Sie Ihre Anmeldedaten.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="../scripts/script.js"></script>
|
|
||||||
<script src="../scripts/cursor.js"></script>
|
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
|
||||||
<script src="../scripts/login.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,9 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Profice</title>
|
<meta name="description" content="Kontaktieren Sie Profice für Ihre digitale Transformation. Webentwicklung, KI-Integration und Automatisierungslösungen.">
|
||||||
|
<meta name="keywords" content="Kontakt, Anfrage, Webentwicklung, KI, Automatisierung, Profice">
|
||||||
|
<meta name="author" content="Profice">
|
||||||
|
<meta property="og:title" content="Kontakt & Anfrage - Profice">
|
||||||
|
<meta property="og:description" content="Kontaktieren Sie uns für Ihre digitale Transformation">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<title>Kontakt & Anfrage - Profice</title>
|
||||||
|
|
||||||
|
<!-- Preload critical resources -->
|
||||||
|
<link rel="preload" href="../style/design.css" as="style">
|
||||||
|
<link rel="preload" href="../style/cursor.css" as="style">
|
||||||
|
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
<link rel="stylesheet" href="../style/design.css">
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
<link rel="stylesheet" href="../style/cursor.css">
|
||||||
</head>
|
</head>
|
||||||
@@ -12,7 +26,7 @@
|
|||||||
<header class="top-banner dark-theme">
|
<header class="top-banner dark-theme">
|
||||||
<div class="top-banner-left">
|
<div class="top-banner-left">
|
||||||
<div class="banner-left">
|
<div class="banner-left">
|
||||||
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
@@ -22,26 +36,11 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-banner-center">
|
<div class="top-banner-center"><!-- Navigation removed --></div>
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Startseite</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Preise</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
<div class="top-banner-right">
|
||||||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
||||||
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
||||||
</button>
|
</button>
|
||||||
<button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
||||||
<polyline points="10 17 15 12 10 7"></polyline>
|
|
||||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Anmelden
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -63,7 +62,7 @@
|
|||||||
<form id="contactForm">
|
<form id="contactForm">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="name">Name *</label>
|
<label for="name">Name *</label>
|
||||||
<input type="text" id="name" name="name" required placeholder="Ihr vollständiger Name">
|
<input type="text" id="name" name="name" required placeholder="Ihr vollständiger Name">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -77,18 +76,18 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="service">Gewünschte Dienstleistung *</label>
|
<label for="service">Gewünschte Dienstleistung *</label>
|
||||||
<select id="service" name="service" required>
|
<select id="service" name="service" required>
|
||||||
<option value="" disabled selected>Bitte wählen...</option>
|
<option value="" disabled selected>Bitte wählen...</option>
|
||||||
<option value="website">Website</option>
|
<option value="website">Website</option>
|
||||||
<option value="ki-integration">KI Integration</option>
|
<option value="ki-integration">KI Integration</option>
|
||||||
<option value="automatisation">Automatisation</option>
|
<option value="automatisation">Automatisation</option>
|
||||||
<option value="unabhaengige-wahl">Unabhängige Wahl</option>
|
<option value="unabhaengige-wahl">Unabhängige Wahl</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="budget">Budget (€)</label>
|
<label for="budget">Budget (€)</label>
|
||||||
<input type="text" id="budget" name="budget" placeholder="z.B. 5000 - 10000">
|
<input type="text" id="budget" name="budget" placeholder="z.B. 5000 - 10000">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -107,8 +106,94 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="../scripts/script.js"></script>
|
<!-- Footer Banner -->
|
||||||
<script src="../scripts/cursor.js"></script>
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
<style>
|
||||||
|
.footer-banner a { color: white !important; }
|
||||||
|
</style>
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Company Info Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-description">
|
||||||
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Services</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||||||
|
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||||||
|
<a href="offers.html" class="footer-link">Kontakt</a>
|
||||||
|
<a href="leads.html" class="footer-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legal Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Rechtliches</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
<a href="#" class="footer-link">AGB</a>
|
||||||
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Kontakt</h4>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+49 123 456789</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>info@profice.de</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-media">
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-bottom-content">
|
||||||
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#" class="footer-link">Datenschutz</a>
|
||||||
|
<span class="separator">•</span>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Optimized script loading -->
|
||||||
|
<script src="../scripts/script.js" defer></script>
|
||||||
|
<script src="../scripts/cursor.js" defer></script>
|
||||||
|
<script src="../scripts/scroll-header.min.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -1,174 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Registrierung - Profice</title>
|
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
|
||||||
<link rel="stylesheet" href="../style/login.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Top Banner -->
|
|
||||||
<header class="top-banner dark-theme">
|
|
||||||
<div class="top-banner-left">
|
|
||||||
<div class="banner-left">
|
|
||||||
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</button>
|
|
||||||
<a href="../index.html" class="logo-link">
|
|
||||||
<img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-center">
|
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Startseite</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Preise</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
|
||||||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
|
||||||
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
|
||||||
</button>
|
|
||||||
<button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
||||||
<polyline points="10 17 15 12 10 7"></polyline>
|
|
||||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Anmelden
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Slide Menu -->
|
|
||||||
<nav class="slide-menu" id="slideMenu">
|
|
||||||
<a href="../index.html">Startseite</a>
|
|
||||||
<a href="offers.html">Kontakt & Anfrage</a>
|
|
||||||
<a href="leads.html">Leads Dashboard</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Overlay -->
|
|
||||||
<div class="overlay" id="overlay"></div>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="main-content login-content">
|
|
||||||
<div class="login-container">
|
|
||||||
<div class="login-header">
|
|
||||||
<div class="login-icon">👤</div>
|
|
||||||
<h1 class="login-title">Konto erstellen</h1>
|
|
||||||
<p class="login-subtitle">Registrieren Sie sich, um auf alle Funktionen zuzugreifen</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form id="registerForm" class="login-form">
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="firstName">Vorname *</label>
|
|
||||||
<input type="text" id="firstName" name="firstName" required placeholder="Max">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="lastName">Nachname *</label>
|
|
||||||
<input type="text" id="lastName" name="lastName" required placeholder="Mustermann">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">E-Mail *</label>
|
|
||||||
<input type="email" id="email" name="email" required placeholder="ihre@email.de">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="phone">Telefonnummer</label>
|
|
||||||
<input type="tel" id="phone" name="phone" placeholder="+49 123 456789">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="company">Unternehmen</label>
|
|
||||||
<input type="text" id="company" name="company" placeholder="Firmenname (optional)">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password">Passwort *</label>
|
|
||||||
<input type="password" id="password" name="password" required placeholder="Mindestens 8 Zeichen">
|
|
||||||
<div class="password-strength" id="passwordStrength">
|
|
||||||
<div class="strength-bar"></div>
|
|
||||||
<span class="strength-text">Passwortstärke</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="confirmPassword">Passwort bestätigen *</label>
|
|
||||||
<input type="password" id="confirmPassword" name="confirmPassword" required placeholder="Passwort wiederholen">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-options">
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" id="terms" name="terms" required>
|
|
||||||
<span class="checkbox-custom"></span>
|
|
||||||
Ich stimme den <a href="#" class="terms-link">Nutzungsbedingungen</a> und <a href="#" class="terms-link">Datenschutzrichtlinien</a> zu *
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-options">
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" id="newsletter" name="newsletter">
|
|
||||||
<span class="checkbox-custom"></span>
|
|
||||||
Ich möchte den Newsletter erhalten
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="login-btn-submit" id="registerSubmit">
|
|
||||||
<span class="btn-text">Konto erstellen</span>
|
|
||||||
<span class="btn-loading" style="display: none;">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
|
|
||||||
<polyline points="22 6 12 16 2 6"></polyline>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="login-divider">
|
|
||||||
<span>oder</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="social-login">
|
|
||||||
<button type="button" class="social-btn google-btn">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c-.82 2.33-2.85 4.08-5.92 4.08-.57 0-1.11-.08-1.63-.24V14.6c.52.16 1.06.24 1.63.24 3.07 0 5.52-2.51 5.52-5.52 0-.1 0-.2-.01-.3-.57-2.53-2.11-4.52-4.52-4.52zM12 23c-1.61 0-3.09-.59-4.23-1.57l.01-.02V18.6l-.01.02c1.14-.98 2.62-1.57 4.23-1.57 3.07 0 5.52 2.51 5.52 5.52 0 .1 0 .2-.01.3z"/>
|
|
||||||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
||||||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.46l-2.85 2.22c-.81-.62-1.79-1.11-2.85-1.36-.52-.16-1.06-.24-1.63-.24-3.07 0-5.52 2.51-5.52 5.52 0 .1 0 .2.01.3.57 2.53 2.11 4.52 4.52 4.52z"/>
|
|
||||||
</svg>
|
|
||||||
Mit Google registrieren
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login-footer">
|
|
||||||
<p>Bereits ein Konto? <a href="login.html">Jetzt anmelden</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="success-message" id="successMessage">
|
|
||||||
<div class="success-icon">✅</div>
|
|
||||||
<h3>Registrierung erfolgreich!</h3>
|
|
||||||
<p>Ihr Konto wurde erstellt. Sie werden weitergeleitet...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="error-message" id="errorMessage">
|
|
||||||
<div class="error-icon">❌</div>
|
|
||||||
<h3>Registrierung fehlgeschlagen</h3>
|
|
||||||
<p id="errorText">Bitte überprüfen Sie Ihre Eingaben.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="../scripts/script.js"></script>
|
|
||||||
<script src="../scripts/cursor.js"></script>
|
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
|
||||||
<script src="../scripts/register.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,11 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Profice - Website Entwicklung</title>
|
<meta name="description" content="Profice - website Lösungen für digitale Transformation.">
|
||||||
|
<meta name="keywords" content="Profice, website, Webentwicklung, KI, Automatisierung">
|
||||||
|
<meta name="author" content="Profice">
|
||||||
|
<meta property="og:title" content="website - Profice">
|
||||||
|
<meta property="og:description" content="Profice website Lösungen">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<title>website - Profice</title>
|
||||||
|
|
||||||
|
<!-- Preload critical resources -->
|
||||||
|
<link rel="preload" href="../style/design.css" as="style">
|
||||||
|
<link rel="preload" href="../style/cursor.css" as="style">
|
||||||
|
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../style/design.css">
|
<link rel="stylesheet" href="../style/design.css">
|
||||||
<link rel="stylesheet" href="../style/service.css">
|
|
||||||
<link rel="stylesheet" href="../style/cursor.css">
|
<link rel="stylesheet" href="../style/cursor.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -23,14 +36,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-banner-center">
|
<div class="top-banner-center"><!-- Navigation removed --></div>
|
||||||
<nav class="main-nav">
|
|
||||||
<a href="../index.html#hero-section" class="nav-link">Home</a>
|
|
||||||
<a href="../index.html#enterprise" class="nav-link">Enterprise</a>
|
|
||||||
<a href="../index.html#pricing" class="nav-link">Pricing</a>
|
|
||||||
<a href="../index.html#services" class="nav-link">Lösungen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="top-banner-right">
|
<div class="top-banner-right">
|
||||||
<button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
|
<button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
|
||||||
<img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
|
<img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
|
||||||
@@ -61,17 +67,17 @@
|
|||||||
<div class="service-container">
|
<div class="service-container">
|
||||||
<!-- Service Header -->
|
<!-- Service Header -->
|
||||||
<div class="service-header">
|
<div class="service-header">
|
||||||
<div class="service-icon">🌐</div>
|
<div class="service-icon">ðŸŒ</div>
|
||||||
<h1 class="service-title">Website Entwicklung</h1>
|
<h1 class="service-title">Website Entwicklung</h1>
|
||||||
<p class="service-subtitle">Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren</p>
|
<p class="service-subtitle">Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Service Description -->
|
<!-- Service Description -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Unsere Webentwicklungsdienstleistungen</h2>
|
<h2 class="section-title">Unsere Webentwicklungsdienstleistungen</h2>
|
||||||
<p class="section-text">
|
<p class="section-text">
|
||||||
Wir entwickeln maßgeschneiderte Websites, die nicht nur gut aussehen, sondern auch Ergebnisse liefern.
|
Wir entwickeln maßgeschneiderte Websites, die nicht nur gut aussehen, sondern auch Ergebnisse liefern.
|
||||||
Von der Konzeption über das Design bis zur Implementierung und Wartung begleiten wir Sie durch den gesamten Prozess.
|
Von der Konzeption über das Design bis zur Implementierung und Wartung begleiten wir Sie durch den gesamten Prozess.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -80,32 +86,32 @@
|
|||||||
<h2 class="section-title">Was wir bieten</h2>
|
<h2 class="section-title">Was wir bieten</h2>
|
||||||
<div class="features-grid">
|
<div class="features-grid">
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🎨</div>
|
<div class="feature-icon">🎨</div>
|
||||||
<h3>Responsive Design</h3>
|
<h3>Responsive Design</h3>
|
||||||
<p>Perfekte Darstellung auf allen Geräten - von Desktop bis Mobile</p>
|
<p>Perfekte Darstellung auf allen Geräten - von Desktop bis Mobile</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">⚡</div>
|
<div class="feature-icon">âš¡</div>
|
||||||
<h3>Performance-Optimierung</h3>
|
<h3>Performance-Optimierung</h3>
|
||||||
<p>Schnelle Ladezeiten und beste Nutzererfahrung</p>
|
<p>Schnelle Ladezeiten und beste Nutzererfahrung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🔒</div>
|
<div class="feature-icon">🔒</div>
|
||||||
<h3>SEO-Freundlich</h3>
|
<h3>SEO-Freundlich</h3>
|
||||||
<p>Technische Grundlagen für gute Suchmaschinenplatzierungen</p>
|
<p>Technische Grundlagen für gute Suchmaschinenplatzierungen</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🔧</div>
|
<div class="feature-icon">🔧</div>
|
||||||
<h3>CMS-Integration</h3>
|
<h3>CMS-Integration</h3>
|
||||||
<p>Einfache Content-Verwaltung für Ihre Mitarbeiter</p>
|
<p>Einfache Content-Verwaltung für Ihre Mitarbeiter</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">🛡️</div>
|
<div class="feature-icon">🛡ï¸</div>
|
||||||
<h3>Sicherheit</h3>
|
<h3>Sicherheit</h3>
|
||||||
<p>Schutz vor Bedrohungen und sichere Datenverarbeitung</p>
|
<p>Schutz vor Bedrohungen und sichere Datenverarbeitung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-icon">📊</div>
|
<div class="feature-icon">📊</div>
|
||||||
<h3>Analytics & Tracking</h3>
|
<h3>Analytics & Tracking</h3>
|
||||||
<p>Detaillierte Auswertung Ihrer Website-Performance</p>
|
<p>Detaillierte Auswertung Ihrer Website-Performance</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,7 +154,7 @@
|
|||||||
<div class="process-number">5</div>
|
<div class="process-number">5</div>
|
||||||
<div class="process-content">
|
<div class="process-content">
|
||||||
<h3>Support & Wartung</h3>
|
<h3>Support & Wartung</h3>
|
||||||
<p>Laufende Optimierung und technische Unterstützung</p>
|
<p>Laufende Optimierung und technische Unterstützung</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -174,8 +180,8 @@
|
|||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="service-section">
|
<section class="service-section">
|
||||||
<h2 class="section-title">Bereit für Ihre neue Website?</h2>
|
<h2 class="section-title">Bereit für Ihre neue Website?</h2>
|
||||||
<p class="section-text">Lassen Sie uns Ihr Projekt an und wir erstellen ein maßgeschneidertes Angebot.</p>
|
<p class="section-text">Lassen Sie uns Ihr Projekt an und wir erstellen ein maßgeschneidertes Angebot.</p>
|
||||||
<div class="cta-buttons">
|
<div class="cta-buttons">
|
||||||
<a href="offers.html?service=website" class="cta-btn primary">Projekt starten</a>
|
<a href="offers.html?service=website" class="cta-btn primary">Projekt starten</a>
|
||||||
<a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
|
<a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
|
||||||
@@ -184,8 +190,98 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer Banner -->
|
||||||
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||||
|
<style>
|
||||||
|
.footer-banner a { color: white !important; }
|
||||||
|
</style>
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Company Info Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-description">
|
||||||
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Services</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||||||
|
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||||||
|
<a href="offers.html" class="footer-link">Kontakt</a>
|
||||||
|
<a href="leads.html" class="footer-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legal Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Rechtliches</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
<a href="#" class="footer-link">AGB</a>
|
||||||
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 class="footer-title">Kontakt</h4>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+49 123 456789</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>info@profice.de</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-media">
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-bottom-content">
|
||||||
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#" class="footer-link">Datenschutz</a>
|
||||||
|
<span class="separator">•</span>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script src="../scripts/script.js"></script>
|
<script src="../scripts/script.js"></script>
|
||||||
<script src="../scripts/cursor.js"></script>
|
<script src="../scripts/cursor.js"></script>
|
||||||
<script src="../scripts/scroll-header.js"></script>
|
<!-- Optimized script loading -->
|
||||||
|
<script src="../scripts/script.js" defer></script>
|
||||||
|
<script src="../scripts/cursor.js" defer></script>
|
||||||
|
<script src="../scripts/scroll-header.min.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,307 +0,0 @@
|
|||||||
/* Cookie Consent System - Matches Profice Design System */
|
|
||||||
|
|
||||||
/* Cookie Banner */
|
|
||||||
.cookie-banner {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: var(--primary-light);
|
|
||||||
border-top: 1px solid var(--primary-mid);
|
|
||||||
padding: 20px 40px;
|
|
||||||
z-index: 10000;
|
|
||||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
transform: translateY(100%);
|
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-banner.show {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-banner-content {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-text {
|
|
||||||
flex: 1;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-text h3 {
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-text p {
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-text a {
|
|
||||||
color: var(--accent-teal);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-text a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn-primary {
|
|
||||||
background: var(--primary-dark);
|
|
||||||
color: var(--primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn-primary:hover {
|
|
||||||
background: var(--primary-mid);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn-secondary {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
border: 2px solid var(--primary-mid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn-secondary:hover {
|
|
||||||
background: var(--primary-mid);
|
|
||||||
color: var(--primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn-settings {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--accent-teal);
|
|
||||||
border: none;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn-settings:hover {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cookie Settings Modal */
|
|
||||||
.cookie-modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 10001;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal.show {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-content {
|
|
||||||
background: var(--primary-light);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 30px;
|
|
||||||
max-width: 600px;
|
|
||||||
width: 90%;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
transform: scale(0.9);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal.show .cookie-modal-content {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
border-bottom: 1px solid var(--primary-mid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-title {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-close {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-close:hover {
|
|
||||||
background: var(--primary-mid);
|
|
||||||
color: var(--primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-option {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid var(--primary-mid);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-option-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-option-title {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-option-description {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-toggle {
|
|
||||||
position: relative;
|
|
||||||
width: 50px;
|
|
||||||
height: 26px;
|
|
||||||
background: var(--primary-mid);
|
|
||||||
border-radius: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-toggle.active {
|
|
||||||
background: var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-toggle-slider {
|
|
||||||
position: absolute;
|
|
||||||
top: 3px;
|
|
||||||
left: 3px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-toggle.active .cookie-toggle-slider {
|
|
||||||
transform: translateX(24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-toggle.disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 25px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid var(--primary-mid);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.cookie-banner {
|
|
||||||
padding: 15px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-banner-content {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-content {
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-footer {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-btn {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.cookie-text h3 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-text p {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cookie-modal-content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -32,9 +32,9 @@ body:not(.system-cursor) label {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 9999;
|
z-index: 999999;
|
||||||
mix-blend-mode: normal;
|
mix-blend-mode: normal;
|
||||||
display: none; /* Hidden by default */
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show custom cursor only when not system cursor */
|
/* Show custom cursor only when not system cursor */
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ body {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Top Banner */
|
/* Top Banner - Ultra Smooth Performance */
|
||||||
.top-banner {
|
.top-banner {
|
||||||
background-color: var(--primary-light);
|
background-color: var(--primary-light);
|
||||||
color: var(--primary-dark);
|
color: var(--primary-dark);
|
||||||
@@ -29,50 +29,99 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
border-bottom: 1px solid #4f47471a;
|
border-bottom: 3px solid var(--accent-orange);
|
||||||
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
overflow: hidden;
|
||||||
padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
will-change: height, padding;
|
/* Ultra-smooth transitions with hardware acceleration */
|
||||||
|
transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||||
|
padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||||
|
background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
|
||||||
|
/* Performance optimizations */
|
||||||
|
will-change: height, padding, transform;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
contain: layout style paint;
|
contain: layout style paint;
|
||||||
|
|
||||||
|
/* Prevent sub-pixel rendering issues */
|
||||||
|
box-shadow: 0 0 0 rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrolled state with smooth transitions */
|
||||||
|
.top-banner.scrolled {
|
||||||
|
height: 70px;
|
||||||
|
padding: 5px 30px;
|
||||||
|
background-color: rgba(235, 235, 222, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 2px 20px rgba(79, 71, 71, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fast scroll state for velocity-based transitions */
|
||||||
|
.top-banner.fast-scroll {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light blink effect for top banner */
|
||||||
|
.top-banner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--accent-orange);
|
||||||
|
animation: lightBlink 3s ease-in-out infinite;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes lightBlink {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-banner-left {
|
.top-banner-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-banner-center {
|
.top-banner-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex: 2;
|
flex: 2;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-banner-right {
|
.top-banner-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
.top-banner.scrolled {
|
|
||||||
padding: 2px 30px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-banner.scrolled .menu-toggle,
|
|
||||||
.top-banner.scrolled #cursorToggle {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-banner.scrolled .opening-hours {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 8px 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-left {
|
.banner-left {
|
||||||
@@ -85,9 +134,62 @@ body {
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.logo-link {
|
||||||
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
will-change: height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-banner.scrolled .logo {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid var(--primary-dark);
|
||||||
|
color: var(--primary-dark);
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
will-change: width, height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-banner.scrolled .menu-toggle,
|
||||||
|
.top-banner.scrolled #cursorToggle {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opening-hours {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--primary-mid);
|
||||||
|
background: rgba(79, 71, 71, 0.08);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
transition: font-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||||
|
padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
will-change: font-size, padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-banner.scrolled .opening-hours {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 8px 15px;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
@@ -656,7 +758,7 @@ body {
|
|||||||
.top-banner.dark-theme {
|
.top-banner.dark-theme {
|
||||||
background-color: var(--primary-dark);
|
background-color: var(--primary-dark);
|
||||||
color: var(--primary-light);
|
color: var(--primary-light);
|
||||||
border-bottom: 1px solid rgba(235, 235, 222, 0.1);
|
border-bottom: 3px solid var(--accent-orange);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-banner.dark-theme .company-name {
|
.top-banner.dark-theme .company-name {
|
||||||
@@ -692,6 +794,21 @@ body {
|
|||||||
transition: padding-top 0.2s ease-out;
|
transition: padding-top 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Green Highlight Box */
|
||||||
|
.green-highlight-box {
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(34, 197, 94, 0.5); /* 50% transparent green */
|
||||||
|
padding: 8px 16px 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--primary-dark);
|
||||||
|
font-weight: 500;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||||
|
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
|
||||||
|
margin-right: 80px; /* Move even further to the left */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1039,4 +1156,339 @@ body {
|
|||||||
.opening-hours {
|
.opening-hours {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Banner Styles */
|
||||||
|
.footer-banner {
|
||||||
|
background: #2a2a2a !important;
|
||||||
|
color: var(--primary-light) !important;
|
||||||
|
padding: 60px 0 30px;
|
||||||
|
margin: 80px 0 0 0;
|
||||||
|
border-top: 3px solid var(--accent-orange);
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-banner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
|
||||||
|
animation: shimmer 3s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 40px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 40px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo-img {
|
||||||
|
height: 40px;
|
||||||
|
width: auto;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-description p {
|
||||||
|
line-height: 1.6;
|
||||||
|
opacity: 0.8;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-title {
|
||||||
|
color: var(--accent-orange);
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
color: var(--primary-light);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--accent-orange);
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link::before {
|
||||||
|
content: '▸';
|
||||||
|
position: absolute;
|
||||||
|
left: -15px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
color: var(--accent-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
width: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-media {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--primary-light);
|
||||||
|
text-decoration: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
background: var(--accent-orange);
|
||||||
|
transform: translateY(-3px) scale(1.1);
|
||||||
|
box-shadow: 0 8px 25px rgba(245, 124, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover svg {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link.instagram:hover {
|
||||||
|
background: linear-gradient(45deg, #E4405F, #C13584, #833AB4);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link.linkedin:hover {
|
||||||
|
background: #0077B5;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link.facebook:hover svg {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link.instagram:hover svg {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
padding-top: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom p {
|
||||||
|
opacity: 0.6;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-links .footer-link {
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-links .footer-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
opacity: 0.4;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-banner {
|
||||||
|
padding: 40px 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.footer-banner {
|
||||||
|
padding: 30px 0 20px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-title {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo-img {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chat Send Button Styles */
|
||||||
|
.chat-send {
|
||||||
|
background: var(--accent-teal);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
box-shadow: 0 2px 8px rgba(38, 166, 154, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send:hover {
|
||||||
|
background: #1e8e82;
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send img {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
/* Details Page Styles */
|
|
||||||
|
|
||||||
.service-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
border-bottom: 2px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon-large {
|
|
||||||
font-size: 64px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title-large {
|
|
||||||
font-size: 36px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-description-large {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.6;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-content {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-section {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
padding: 30px;
|
|
||||||
background: var(--primary-light);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 20px rgba(79, 71, 71, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-text {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-list,
|
|
||||||
.benefit-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-list li,
|
|
||||||
.benefit-list li {
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px solid rgba(119, 119, 100, 0.1);
|
|
||||||
color: var(--primary-dark);
|
|
||||||
font-size: 16px;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-list li:before,
|
|
||||||
.benefit-list li:before {
|
|
||||||
content: "✓";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
color: var(--accent-teal);
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-list li:last-child,
|
|
||||||
.benefit-list li:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button-container {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 40px;
|
|
||||||
padding-top: 30px;
|
|
||||||
border-top: 1px solid rgba(119, 119, 100, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message h2 {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message p {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.service-icon-large {
|
|
||||||
font-size: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title-large {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-description-large {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-section {
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,408 +0,0 @@
|
|||||||
/* Lead Details Page Styles */
|
|
||||||
|
|
||||||
.lead-details-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 120px 20px 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
border-bottom: 3px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-icon {
|
|
||||||
font-size: 72px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-title {
|
|
||||||
font-size: 42px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-subtitle {
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.6;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-details-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-section {
|
|
||||||
padding: 40px;
|
|
||||||
border-bottom: 1px solid rgba(119, 119, 100, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-section:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Status Styles */
|
|
||||||
.status-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-new {
|
|
||||||
background: #e3f2fd;
|
|
||||||
color: #1976d2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-in-progress {
|
|
||||||
background: #fff3e0;
|
|
||||||
color: #f57c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-completed {
|
|
||||||
background: #e8f5e8;
|
|
||||||
color: #2e7d32;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-cancelled {
|
|
||||||
background: #ffebee;
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-info {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Info Grid */
|
|
||||||
.info-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
background: var(--primary-light);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border-left: 4px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Service Info */
|
|
||||||
.service-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
background: var(--primary-light);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-details {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--accent-teal);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-description {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Description Box */
|
|
||||||
.description-box {
|
|
||||||
background: var(--primary-light);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 16px;
|
|
||||||
border-left: 4px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-text {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 16px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Timeline */
|
|
||||||
.timeline {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 15px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 2px;
|
|
||||||
background: rgba(119, 119, 100, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-dot {
|
|
||||||
position: absolute;
|
|
||||||
left: -22px;
|
|
||||||
top: 5px;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(119, 119, 100, 0.3);
|
|
||||||
border: 2px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item.active .timeline-dot {
|
|
||||||
background: var(--accent-teal);
|
|
||||||
box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-content h4 {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-content p {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Action Buttons */
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
padding: 12px 24px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary {
|
|
||||||
background: var(--accent-teal);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary:hover {
|
|
||||||
background: #1e8e82;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.secondary {
|
|
||||||
background: var(--primary-light);
|
|
||||||
color: var(--primary-dark);
|
|
||||||
border: 1px solid rgba(119, 119, 100, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.secondary:hover {
|
|
||||||
background: var(--primary-mid);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation Buttons */
|
|
||||||
.navigation-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 40px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
|
||||||
padding: 16px 32px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.primary {
|
|
||||||
background: var(--accent-teal);
|
|
||||||
color: white;
|
|
||||||
border: 2px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.primary:hover {
|
|
||||||
background: white;
|
|
||||||
color: var(--accent-teal);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.secondary {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
border: 2px solid var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.secondary:hover {
|
|
||||||
background: var(--primary-dark);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Error Message */
|
|
||||||
.error-message {
|
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message h2 {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message p {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.lead-details-container {
|
|
||||||
padding: 100px 15px 20px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-icon {
|
|
||||||
font-size: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-title {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-subtitle {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-section {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-info {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
font-size: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-container {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons,
|
|
||||||
.navigation-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn,
|
|
||||||
.cta-btn {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Print Styles */
|
|
||||||
@media print {
|
|
||||||
.top-banner,
|
|
||||||
.slide-menu,
|
|
||||||
.overlay,
|
|
||||||
.navigation-buttons,
|
|
||||||
.action-buttons {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-details-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead-details-card {
|
|
||||||
box-shadow: none;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
Profice WebSite/style/leads.min.css
vendored
Normal file
1
Profice WebSite/style/leads.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
.leads-content{max-width:900px}.dashboard-container{background:white;padding:40px;border-radius:24px;box-shadow:0 15px 50px rgba(79,71,71,0.1);margin-bottom:30px}.dashboard-title{color:var(--primary-dark);font-size:28px;margin-bottom:8px;font-weight:600}.dashboard-subtitle{color:var(--primary-mid);font-size:15px;margin-bottom:30px}.leads-table-wrapper{overflow-x:auto;border-radius:16px;border:1px solid rgba(119,119,100,0.15)}.leads-table{width:100%;border-collapse:collapse;min-width:500px}.leads-table thead{background:var(--primary-light)}.leads-table th{padding:16px 20px;text-align:left;font-weight:600;color:var(--primary-dark);font-size:14px;text-transform:uppercase;letter-spacing:0.5px}.leads-table td{padding:18px 20px;border-top:1px solid rgba(119,119,100,0.1);color:var(--primary-dark);font-size:15px}.leads-table tbody tr{transition:background 0.2s ease}.leads-table tbody tr:hover{background:rgba(235,235,222,0.5)}.status-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}.status-badge.completed{background:rgba(102,187,106,0.15);color:var(--accent-green)}.status-badge.in-progress{background:rgba(245,124,0,0.15);color:var(--accent-orange)}.status-badge.open{background:rgba(119,119,100,0.15);color:var(--primary-mid)}.action-btn{padding:8px 16px;background:transparent;border:2px solid var(--accent-teal);color:var(--accent-teal);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block}.action-btn:hover{background:var(--accent-teal);color:white}.offers-section{margin-top:30px}.offers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.offer-card{background:var(--primary-light);border-radius:20px;padding:30px;text-align:center;transition:all 0.3s ease;cursor:pointer}.offer-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(79,71,71,0.15);background:white}.offer-icon{font-size:40px;margin-bottom:16px}.offer-title{color:var(--primary-dark);font-size:20px;font-weight:600;margin-bottom:12px}.offer-description{color:var(--primary-mid);font-size:14px;line-height:1.6;margin-bottom:20px}.offer-btn{display:inline-block;padding:10px 24px;background:var(--accent-teal);color:white;text-decoration:none;border-radius:25px;font-size:14px;font-weight:600;transition:all 0.3s ease}.offer-btn:hover{background:#1e8e82;box-shadow:0 5px 20px rgba(38,166,154,0.3)}.slide-menu a.active{background:var(--primary-light);border-left-color:var(--accent-teal);color:var(--accent-teal)}.empty-state{text-align:center;padding:40px;color:var(--primary-mid)}.empty-state p{font-size:16px}@media (max-width:600px){.dashboard-container{padding:25px}.dashboard-title{font-size:22px}.leads-table th,.leads-table td{padding:12px 14px;font-size:13px}.offer-card{padding:20px}.offers-grid{grid-template-columns:1fr}}
|
||||||
@@ -1,547 +0,0 @@
|
|||||||
/* Login Page Styles */
|
|
||||||
|
|
||||||
.login-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 120px 20px 20px 20px;
|
|
||||||
background: linear-gradient(135deg, var(--primary-light) 0%, white 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 450px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 60px rgba(79, 71, 71, 0.15);
|
|
||||||
padding: 50px 40px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: linear-gradient(90deg, var(--accent-teal), var(--accent-green));
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-icon {
|
|
||||||
font-size: 64px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-title {
|
|
||||||
font-size: 32px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-subtitle {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form .form-group {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form .form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form .form-group input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px 45px 14px 18px;
|
|
||||||
border: 2px solid rgba(119, 119, 100, 0.2);
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
background: var(--primary-light);
|
|
||||||
color: var(--primary-dark);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form .form-group input:focus {
|
|
||||||
border-color: var(--accent-teal);
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 18px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle {
|
|
||||||
position: absolute;
|
|
||||||
right: 15px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle:hover {
|
|
||||||
background: rgba(119, 119, 100, 0.1);
|
|
||||||
color: var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-options {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label input[type="checkbox"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-custom {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border: 2px solid rgba(119, 119, 100, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 8px;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
|
|
||||||
background: var(--accent-teal);
|
|
||||||
border-color: var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
|
|
||||||
content: '✓';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forgot-password {
|
|
||||||
color: var(--accent-teal);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forgot-password:hover {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn-submit {
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
background: var(--accent-teal);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn-submit:hover:not(:disabled) {
|
|
||||||
background: #1e8e82;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn-submit:disabled {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-loading svg {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-divider {
|
|
||||||
text-align: center;
|
|
||||||
margin: 30px 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-divider::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(119, 119, 100, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-divider span {
|
|
||||||
background: white;
|
|
||||||
padding: 0 20px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
font-size: 14px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-login {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
border: 2px solid rgba(119, 119, 100, 0.2);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: white;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-btn:hover {
|
|
||||||
border-color: var(--primary-mid);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 15px rgba(79, 71, 71, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.google-btn:hover {
|
|
||||||
border-color: #4285f4;
|
|
||||||
background: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-footer {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-footer a {
|
|
||||||
color: var(--accent-teal);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-footer a:hover {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Messages */
|
|
||||||
.success-message,
|
|
||||||
.error-message {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
transform: translateY(-100%);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message.show,
|
|
||||||
.error-message.show {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message {
|
|
||||||
background: linear-gradient(135deg, #e8f5e8, #d4edda);
|
|
||||||
color: #2e7d32;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
background: linear-gradient(135deg, #ffebee, #f8d7da);
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-icon,
|
|
||||||
.error-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message h3,
|
|
||||||
.error-message h3 {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message p,
|
|
||||||
.error-message p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Login Button Styles */
|
|
||||||
.login-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: 2px solid var(--primary-dark);
|
|
||||||
color: var(--primary-dark);
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn:hover {
|
|
||||||
background: var(--primary-dark);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: 2px solid var(--primary-dark);
|
|
||||||
color: var(--primary-dark);
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-btn:hover {
|
|
||||||
background: var(--primary-dark);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Register Button (White version) */
|
|
||||||
.login-btn.register {
|
|
||||||
background: transparent;
|
|
||||||
border: 2px solid white;
|
|
||||||
color: white;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn.register:hover {
|
|
||||||
background: white;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure login button is white on register page */
|
|
||||||
body .login-btn {
|
|
||||||
background: transparent !important;
|
|
||||||
border: 2px solid white !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .login-btn:hover {
|
|
||||||
background: white !important;
|
|
||||||
color: var(--primary-dark) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form Row for Two Columns */
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row .form-group {
|
|
||||||
flex: 1;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Password Strength Indicator */
|
|
||||||
.password-strength {
|
|
||||||
margin-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-bar {
|
|
||||||
flex: 1;
|
|
||||||
height: 4px;
|
|
||||||
background: #e0e0e0;
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-bar::before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: 0%;
|
|
||||||
transition: width 0.3s ease, background-color 0.3s ease;
|
|
||||||
background: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Password Strength Levels */
|
|
||||||
.strength-weak .strength-bar::before {
|
|
||||||
width: 33%;
|
|
||||||
background: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-medium .strength-bar::before {
|
|
||||||
width: 66%;
|
|
||||||
background: #ff9800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-strong .strength-bar::before {
|
|
||||||
width: 100%;
|
|
||||||
background: #4caf50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-weak .strength-text {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-medium .strength-text {
|
|
||||||
color: #ff9800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strength-strong .strength-text {
|
|
||||||
color: #4caf50;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Terms Links */
|
|
||||||
.terms-link {
|
|
||||||
color: var(--accent-teal);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terms-link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.login-content {
|
|
||||||
padding: 100px 15px 20px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
padding: 40px 30px;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-icon {
|
|
||||||
font-size: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-title {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-subtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-options {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-btn {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.login-container {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form .form-group input {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 12px 40px 12px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-icon,
|
|
||||||
.password-toggle {
|
|
||||||
right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,339 +0,0 @@
|
|||||||
/* Service Page Styles */
|
|
||||||
|
|
||||||
.service-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 120px 20px 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
border-bottom: 3px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
font-size: 72px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title {
|
|
||||||
font-size: 42px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-subtitle {
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.6;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-section {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
padding: 40px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 28px;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-text {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--primary-mid);
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Features Grid */
|
|
||||||
.features-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
|
||||||
background: var(--primary-light);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 16px;
|
|
||||||
text-align: center;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 15px 40px rgba(79, 71, 71, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item h3 {
|
|
||||||
color: var(--accent-teal);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item p {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Process Timeline */
|
|
||||||
.process-timeline {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 40px auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-number {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
background: var(--accent-teal);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-content h3 {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-content p {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tech Grid */
|
|
||||||
.tech-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-item {
|
|
||||||
background: var(--primary-dark);
|
|
||||||
color: white;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: 25px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-item:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
background: var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Benefits Grid */
|
|
||||||
.benefits-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 25px;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-item {
|
|
||||||
background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
|
|
||||||
color: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 16px;
|
|
||||||
text-align: center;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-item:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 15px 40px rgba(38, 166, 154, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-item h3 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-item p {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Use Cases Grid */
|
|
||||||
.use-cases-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 25px;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.use-case-item {
|
|
||||||
background: var(--primary-light);
|
|
||||||
padding: 25px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border-left: 4px solid var(--accent-teal);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.use-case-item:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 25px rgba(79, 71, 71, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.use-case-item h3 {
|
|
||||||
color: var(--accent-teal);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.use-case-item p {
|
|
||||||
color: var(--primary-mid);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CTA Buttons */
|
|
||||||
.cta-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 40px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
|
||||||
padding: 16px 32px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.primary {
|
|
||||||
background: var(--accent-teal);
|
|
||||||
color: white;
|
|
||||||
border: 2px solid var(--accent-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.primary:hover {
|
|
||||||
background: white;
|
|
||||||
color: var(--accent-teal);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.secondary {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--primary-dark);
|
|
||||||
border: 2px solid var(--primary-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.secondary:hover {
|
|
||||||
background: var(--primary-dark);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.service-container {
|
|
||||||
padding: 100px 15px 20px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
font-size: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-subtitle {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-section {
|
|
||||||
padding: 30px 20px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-text {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-grid,
|
|
||||||
.benefits-grid,
|
|
||||||
.use-cases-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-item {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-number {
|
|
||||||
margin: 0 auto 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-content {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
30
Profice WebSite/style/tech-onepager-fixed.css
Normal file
30
Profice WebSite/style/tech-onepager-fixed.css
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
/* Fixed list styling for system cards */
|
||||||
|
.what-it-does ul,
|
||||||
|
.result ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.what-it-does li,
|
||||||
|
.result li {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.what-it-does li::before {
|
||||||
|
content: '→';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--primary-mid);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result li::before {
|
||||||
|
content: '✓';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--accent-green);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
2321
Profice WebSite/style/tech-onepager.css
Normal file
2321
Profice WebSite/style/tech-onepager.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user