commit 8ad8129a9df43fcba9492ce81ff067ed79e810e9 Author: Ihor_Zhekov Date: Wed Jan 28 14:02:01 2026 +0100 initial commit diff --git a/images/additional/cursor.png b/images/additional/cursor.png new file mode 100644 index 0000000..d70d430 Binary files /dev/null and b/images/additional/cursor.png differ diff --git a/images/additional/spidy.png b/images/additional/spidy.png new file mode 100644 index 0000000..2dcc8af Binary files /dev/null and b/images/additional/spidy.png differ diff --git a/images/icons/iconography-01.jpg b/images/icons/iconography-01.jpg new file mode 100644 index 0000000..8743a8a Binary files /dev/null and b/images/icons/iconography-01.jpg differ diff --git a/images/icons/iconography-01.png b/images/icons/iconography-01.png new file mode 100644 index 0000000..4c75a11 Binary files /dev/null and b/images/icons/iconography-01.png differ diff --git a/images/icons/iconography-02.jpg b/images/icons/iconography-02.jpg new file mode 100644 index 0000000..2d5f6aa Binary files /dev/null and b/images/icons/iconography-02.jpg differ diff --git a/images/icons/iconography-02.png b/images/icons/iconography-02.png new file mode 100644 index 0000000..14aaf69 Binary files /dev/null and b/images/icons/iconography-02.png differ diff --git a/images/icons/iconography-03.jpg b/images/icons/iconography-03.jpg new file mode 100644 index 0000000..ca99772 Binary files /dev/null and b/images/icons/iconography-03.jpg differ diff --git a/images/icons/iconography-03.png b/images/icons/iconography-03.png new file mode 100644 index 0000000..ce6f89b Binary files /dev/null and b/images/icons/iconography-03.png differ diff --git a/images/icons/iconography-04 - Kopie.jpg b/images/icons/iconography-04 - Kopie.jpg new file mode 100644 index 0000000..f3e3e3a Binary files /dev/null and b/images/icons/iconography-04 - Kopie.jpg differ diff --git a/images/icons/iconography-04 - Kopie.png b/images/icons/iconography-04 - Kopie.png new file mode 100644 index 0000000..cb3a551 Binary files /dev/null and b/images/icons/iconography-04 - Kopie.png differ diff --git a/images/icons/iconography-05.jpg b/images/icons/iconography-05.jpg new file mode 100644 index 0000000..ac6d288 Binary files /dev/null and b/images/icons/iconography-05.jpg differ diff --git a/images/icons/iconography-05.png b/images/icons/iconography-05.png new file mode 100644 index 0000000..61e57d4 Binary files /dev/null and b/images/icons/iconography-05.png differ diff --git a/images/icons/iconography-06.jpg b/images/icons/iconography-06.jpg new file mode 100644 index 0000000..98e29cb Binary files /dev/null and b/images/icons/iconography-06.jpg differ diff --git a/images/icons/iconography-06.png b/images/icons/iconography-06.png new file mode 100644 index 0000000..1e4f6f1 Binary files /dev/null and b/images/icons/iconography-06.png differ diff --git a/images/icons/iconography-07 - Kopie.jpg b/images/icons/iconography-07 - Kopie.jpg new file mode 100644 index 0000000..64f803a Binary files /dev/null and b/images/icons/iconography-07 - Kopie.jpg differ diff --git a/images/icons/iconography-07.jpg b/images/icons/iconography-07.jpg new file mode 100644 index 0000000..64f803a Binary files /dev/null and b/images/icons/iconography-07.jpg differ diff --git a/images/icons/iconography-07.png b/images/icons/iconography-07.png new file mode 100644 index 0000000..92b3a73 Binary files /dev/null and b/images/icons/iconography-07.png differ diff --git a/images/icons/iconography-08.jpg b/images/icons/iconography-08.jpg new file mode 100644 index 0000000..293a6a1 Binary files /dev/null and b/images/icons/iconography-08.jpg differ diff --git a/images/icons/iconography-08.png b/images/icons/iconography-08.png new file mode 100644 index 0000000..2057da8 Binary files /dev/null and b/images/icons/iconography-08.png differ diff --git a/images/icons/iconography-09.jpg b/images/icons/iconography-09.jpg new file mode 100644 index 0000000..8a816da Binary files /dev/null and b/images/icons/iconography-09.jpg differ diff --git a/images/icons/iconography-09.png b/images/icons/iconography-09.png new file mode 100644 index 0000000..55a4b12 Binary files /dev/null and b/images/icons/iconography-09.png differ diff --git a/images/icons/iconography-10.jpg b/images/icons/iconography-10.jpg new file mode 100644 index 0000000..6de5ef1 Binary files /dev/null and b/images/icons/iconography-10.jpg differ diff --git a/images/icons/iconography-10.png b/images/icons/iconography-10.png new file mode 100644 index 0000000..a1b36ed Binary files /dev/null and b/images/icons/iconography-10.png differ diff --git a/images/logo/Appicon 1024X1024-01.png b/images/logo/Appicon 1024X1024-01.png new file mode 100644 index 0000000..c06e07d Binary files /dev/null and b/images/logo/Appicon 1024X1024-01.png differ diff --git a/images/logo/LOGO E3.jpg b/images/logo/LOGO E3.jpg new file mode 100644 index 0000000..2672503 Binary files /dev/null and b/images/logo/LOGO E3.jpg differ diff --git a/images/logo/Logo-01-complete.PNG b/images/logo/Logo-01-complete.PNG new file mode 100644 index 0000000..98f29e4 Binary files /dev/null and b/images/logo/Logo-01-complete.PNG differ diff --git a/images/logo/Logo-01.jpg b/images/logo/Logo-01.jpg new file mode 100644 index 0000000..4957ea2 Binary files /dev/null and b/images/logo/Logo-01.jpg differ diff --git a/images/logo/Logo-01.png b/images/logo/Logo-01.png new file mode 100644 index 0000000..803c96f Binary files /dev/null and b/images/logo/Logo-01.png differ diff --git a/images/logo/Logo-02.jpg b/images/logo/Logo-02.jpg new file mode 100644 index 0000000..c17416a Binary files /dev/null and b/images/logo/Logo-02.jpg differ diff --git a/images/logo/Logo-02.png b/images/logo/Logo-02.png new file mode 100644 index 0000000..4346e76 Binary files /dev/null and b/images/logo/Logo-02.png differ diff --git a/images/logo/Logo-03.jpg b/images/logo/Logo-03.jpg new file mode 100644 index 0000000..e3f2819 Binary files /dev/null and b/images/logo/Logo-03.jpg differ diff --git a/images/logo/Logo-03.png b/images/logo/Logo-03.png new file mode 100644 index 0000000..42807cd Binary files /dev/null and b/images/logo/Logo-03.png differ diff --git a/images/logo/Logo-04.jpg b/images/logo/Logo-04.jpg new file mode 100644 index 0000000..717a378 Binary files /dev/null and b/images/logo/Logo-04.jpg differ diff --git a/images/logo/Logo-04.png b/images/logo/Logo-04.png new file mode 100644 index 0000000..db015ea Binary files /dev/null and b/images/logo/Logo-04.png differ diff --git a/images/logo/Logo-05.jpg b/images/logo/Logo-05.jpg new file mode 100644 index 0000000..1df8d43 Binary files /dev/null and b/images/logo/Logo-05.jpg differ diff --git a/images/logo/Logo-05.png b/images/logo/Logo-05.png new file mode 100644 index 0000000..1cda111 Binary files /dev/null and b/images/logo/Logo-05.png differ diff --git a/images/logo/Logo-06.jpg b/images/logo/Logo-06.jpg new file mode 100644 index 0000000..d06c645 Binary files /dev/null and b/images/logo/Logo-06.jpg differ diff --git a/images/logo/Logo-06.png b/images/logo/Logo-06.png new file mode 100644 index 0000000..2a0fd67 Binary files /dev/null and b/images/logo/Logo-06.png differ diff --git a/images/logo/Logo-07.jpg b/images/logo/Logo-07.jpg new file mode 100644 index 0000000..1dad7b3 Binary files /dev/null and b/images/logo/Logo-07.jpg differ diff --git a/images/logo/Logo-07.png b/images/logo/Logo-07.png new file mode 100644 index 0000000..3224ded Binary files /dev/null and b/images/logo/Logo-07.png differ diff --git a/images/logo/Logo-08.jpg b/images/logo/Logo-08.jpg new file mode 100644 index 0000000..c5cf31c Binary files /dev/null and b/images/logo/Logo-08.jpg differ diff --git a/images/logo/Logo-08.png b/images/logo/Logo-08.png new file mode 100644 index 0000000..64b36ca Binary files /dev/null and b/images/logo/Logo-08.png differ diff --git a/images/logo/Logo-09.jpg b/images/logo/Logo-09.jpg new file mode 100644 index 0000000..fb9917c Binary files /dev/null and b/images/logo/Logo-09.jpg differ diff --git a/images/logo/Logo-09.png b/images/logo/Logo-09.png new file mode 100644 index 0000000..e9cf29d Binary files /dev/null and b/images/logo/Logo-09.png differ diff --git a/images/logo/Logo-10.jpg b/images/logo/Logo-10.jpg new file mode 100644 index 0000000..2384cf8 Binary files /dev/null and b/images/logo/Logo-10.jpg differ diff --git a/images/logo/Logo-10.png b/images/logo/Logo-10.png new file mode 100644 index 0000000..5579f7e Binary files /dev/null and b/images/logo/Logo-10.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d676847 --- /dev/null +++ b/index.html @@ -0,0 +1,187 @@ + + + + + + Profice - Digitale Lösungen + + + + +
+
+ +
+ +
+ +
+ +
+ + +
+
+ + + + +
+ +
+ +
+
+

Transformieren Sie Ihr Unternehmen digital

+

Maßgeschneiderte Lösungen für Web, KI-Integration und Prozessautomatisierung. Wir bringen Ihre Vision in die digitale Realität.

+
+ Projekt starten + Mehr erfahren +
+
+
+ [Bild: Digitale Transformation Illustration] +
+
+ +
+

Enterprise Solutions

+
+

Maßgeschneiderte Lösungen für große Unternehmen mit komplexen Anforderungen.

+
+
+

Skalierbarkeit

+

Lösungen, die mit Ihrem Unternehmen wachsen

+
+
+

Sicherheit

+

Enterprise-grade Sicherheit und Compliance

+
+
+

Integration

+

Nahtlose Integration mit bestehenden Systemen

+
+
+
+
+ +
+

Preise

+
+
+

Starter

+
€999
+

Perfekt für kleine Unternehmen

+
    +
  • Webentwicklung
    • +
  • Grundlegende KI-Integration
    • +
  • 3 Monate Support
    • +
+
+
+

Professional

+
€2.499
+

Ideal für wachsende Unternehmen

+
    +
  • Erweiterte Webentwicklung
    • +
  • KI & Automatisierung
    • +
  • 6 Monate Support
    • +
  • SEO Optimierung
    • +
+
+
+

Enterprise

+
Individuell
+

Für große Unternehmen

+
    +
  • Volle Enterprise-Lösungen
    • +
  • Custom KI-Entwicklung
    • +
  • 12 Monate Support
    • +
  • Dediziertes Team
    • +
+
+
+
+ +
+

Unsere Expertise

+
+ +
+
+ 🌐 +
+

Webentwicklung

+

Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.

+
+ +
+
+ 🤖 +
+

KI Integration

+

Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.

+
+ +
+
+ ⚙️ +
+

Automatisierung

+

Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.

+
+
+
+ +
+
+
+

Warum Profice?

+

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.

+
    +
  • Individuelle Beratung
    • +
  • Transparente Prozesse
    • +
  • Zukunftssichere Technologien
    • +
+
+
+ [Bild: Team bei der Arbeit] +
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/scripts/cursor.js b/scripts/cursor.js new file mode 100644 index 0000000..eac0759 --- /dev/null +++ b/scripts/cursor.js @@ -0,0 +1,208 @@ +// cursor.js + +document.addEventListener("DOMContentLoaded", function () { + // 1. Проверка на мобильные (там курсор не нужен) + if (window.matchMedia("(pointer: coarse)").matches) return; + + // --- SETTINGS --- + const CONFIG = { + tentacleCount: 10, + triggerDist: 20, + maxLength: 450, + connectionDist: 150, + thickness: 1, + color: "rgba(20, 20, 20, 1)", + prediction: 3.5 + }; + + + const toggleBtn = document.getElementById('cursorToggle'); + const body = document.body; + + let isCursorDisabled = localStorage.getItem('venomCursorDisabled') === 'true'; + + function updateCursorState() { + if (isCursorDisabled) { + body.classList.add('system-cursor'); + if (toggleBtn) { + toggleBtn.classList.remove('active'); + const icon = toggleBtn.querySelector('.cursor-icon'); + if (icon) { + // 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'; + icon.src = imagePath; + } + } + } else { + body.classList.remove('system-cursor'); + if (toggleBtn) { + toggleBtn.classList.add('active'); + const icon = toggleBtn.querySelector('.cursor-icon'); + if (icon) { + // 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'; + icon.src = imagePath; + } + } + } + } + + updateCursorState(); + + if (toggleBtn) { + toggleBtn.addEventListener('click', () => { + isCursorDisabled = !isCursorDisabled; + localStorage.setItem('venomCursorDisabled', isCursorDisabled); + updateCursorState(); + }); + } + + const canvas = document.createElement("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; + }); + + class Tentacle { + constructor(mx, my, targetX, targetY) { + this.dead = false; + this.anchor = { x: targetX, y: targetY }; + this.currentDist = 0; // For calculating connection opacity + } + + update(currentMouse) { + const dx = currentMouse.x - this.anchor.x; + const dy = currentMouse.y - this.anchor.y; + this.currentDist = Math.sqrt(dx*dx + dy*dy); + + if (this.currentDist > CONFIG.maxLength) { + this.dead = true; + } + } + + draw(ctx, currentMouse) { + if (this.dead) return; + + // Tension (0..1) + const tension = Math.min(this.currentDist / CONFIG.maxLength, 1); + const dynamicThickness = CONFIG.thickness * (1 - tension * 0.9); + + // Draw main line (Cursor -> Anchor) + ctx.beginPath(); + ctx.moveTo(currentMouse.x, currentMouse.y); + ctx.lineTo(this.anchor.x, this.anchor.y); + + ctx.lineWidth = Math.max(0.2, dynamicThickness); + ctx.strokeStyle = CONFIG.color; + ctx.lineCap = "butt"; + ctx.stroke(); + + // Draw anchor point + ctx.beginPath(); + ctx.arc(this.anchor.x, this.anchor.y, 1.5 * (1 - tension), 0, Math.PI * 2); + ctx.fillStyle = CONFIG.color; + ctx.fill(); + } + } + + function render() { + ctx.clearRect(0, 0, width, height); + + // 1. Create new tentacles on movement + const distMoved = Math.hypot(mouse.x - oldMouse.x, mouse.y - oldMouse.y); + + if (distMoved > CONFIG.triggerDist) { + const vx = mouse.x - oldMouse.x; + const vy = mouse.y - oldMouse.y; + + // "Spread" of shots increased slightly for better geometry + const targetX = mouse.x + vx * CONFIG.prediction + (Math.random() - 0.5) * 60; + const targetY = mouse.y + vy * CONFIG.prediction + (Math.random() - 0.5) * 60; + + tentacles.push(new Tentacle(mouse.x, mouse.y, targetX, targetY)); + oldMouse.x = mouse.x; + oldMouse.y = mouse.y; + } + + // Remove old ones (FIFO) + if (tentacles.length > CONFIG.tentacleCount) { + tentacles.shift(); + } + + // 2. Draw main tentacles + for (let i = tentacles.length - 1; i >= 0; i--) { + const t = tentacles[i]; + t.update(mouse); + if (t.dead) { + tentacles.splice(i, 1); + } else { + t.draw(ctx, mouse); + } + } + + // 3. DRAW CONNECTIONS BETWEEN ANCHORS (New logic) + // Iterate through all pairs of active tentacles + ctx.beginPath(); // Begin common path for optimization + ctx.lineWidth = 0.5; // Connections are always thin + + for (let i = 0; i < tentacles.length; i++) { + for (let j = i + 1; j < tentacles.length; j++) { + const t1 = tentacles[i]; + const t2 = tentacles[j]; + + // Calculate distance between ends of two tentacles + const dx = t1.anchor.x - t2.anchor.x; + const dy = t1.anchor.y - t2.anchor.y; + const dist = Math.sqrt(dx*dx + dy*dy); + + // If they are close to each other — connect + if (dist < CONFIG.connectionDist) { + // Opacity depends on how far apart they are + // And how much the tentacles themselves are stretched + const alpha = (1 - dist / CONFIG.connectionDist) * 0.6; + + ctx.beginPath(); // New path for each to control opacity + ctx.strokeStyle = `rgba(20, 20, 20, ${alpha})`; + ctx.moveTo(t1.anchor.x, t1.anchor.y); + ctx.lineTo(t2.anchor.x, t2.anchor.y); + ctx.stroke(); + } + } + } + + // 4. Cursor (Rhombus) + ctx.beginPath(); + ctx.fillStyle = CONFIG.color; + ctx.moveTo(mouse.x, mouse.y - 5); + ctx.lineTo(mouse.x + 5, mouse.y); + ctx.lineTo(mouse.x, mouse.y + 5); + ctx.lineTo(mouse.x - 5, mouse.y); + ctx.fill(); + + requestAnimationFrame(render); + } + + render(); +}); \ No newline at end of file diff --git a/scripts/details.js b/scripts/details.js new file mode 100644 index 0000000..5aa0f81 --- /dev/null +++ b/scripts/details.js @@ -0,0 +1,124 @@ +// details.js + +document.addEventListener("DOMContentLoaded", function() { + const serviceDetails = { + 'seo-optimierung': { + title: 'SEO Optimierung', + icon: '🔍', + description: 'Verbessern Sie Ihre Sichtbarkeit in Suchmaschinen und erreichen Sie mehr Kunden online.', + fullDescription: 'Unsere SEO-Optimierungsdienste helfen Ihnen, in Suchmaschinen besser gefunden zu werden. Wir analysieren Ihre Website, identifizieren Optimierungspotenziale und implementieren bewährte Strategien, um Ihr Ranking zu verbessern und mehr qualifizierte Besucher anzuziehen.', + features: [ + 'Keyword-Analyse und -Recherche', + 'On-Page Optimierung', + 'Technische SEO-Audits', + 'Content-Strategie', + 'Link-Building', + 'Performance-Tracking' + ], + benefits: [ + 'Höhere Sichtbarkeit in Suchmaschinen', + 'Mehr qualifizierte Besucher', + 'Verbesserte Conversion-Raten', + 'Langfristiger ROI' + ] + }, + 'cloud-migration': { + title: 'Cloud Migration', + icon: '☁️', + description: 'Modernisieren Sie Ihre IT-Infrastruktur mit sicheren und skalierbaren Cloud-Lösungen.', + fullDescription: 'Wir begleiten Sie bei der Migration Ihrer IT-Systeme in die Cloud. Von der Analyse Ihrer bestehenden Infrastruktur bis zur vollständigen Implementierung sorgen wir für einen reibungslosen Übergang mit minimalem Geschäftsausfall.', + features: [ + 'Infrastruktur-Analyse', + 'Migrationsplanung', + 'Datenübertragung', + 'Sicherheit & Compliance', + 'Performance-Optimierung', + 'Schulung & Support' + ], + benefits: [ + 'Kosteneinsparungen', + 'Bessere Skalierbarkeit', + 'Erhöhte Sicherheit', + 'Flexiblere Arbeitsweise' + ] + }, + 'datenanalyse': { + title: 'Datenanalyse', + icon: '📊', + description: 'Gewinnen Sie wertvolle Einblicke aus Ihren Daten mit unseren Analyse-Lösungen.', + fullDescription: 'Wir helfen Ihnen, Ihre Daten in wertvolle Erkenntnisse umzuwandeln. Mit modernen Analyse-Tools und -Methoden identifizieren wir Trends, Muster und Chancen, die Ihre Geschäftsentscheidungen verbessern.', + features: [ + 'Datenerfassung & -bereinigung', + 'Statistische Analyse', + 'Visualisierung & Dashboards', + 'Predictive Analytics', + 'Berichterstellung', + 'Consulting' + ], + benefits: [ + 'Bessere Entscheidungen', + 'Prozessoptimierung', + 'Kostensenkungen', + 'Wettbewerbsvorteile' + ] + } + }; + + const urlParams = new URLSearchParams(window.location.search); + const serviceId = urlParams.get('service'); + const detailsContainer = document.getElementById('service-details'); + + if (serviceId && serviceDetails[serviceId]) { + const service = serviceDetails[serviceId]; + + detailsContainer.innerHTML = ` +
+
${service.icon}
+

${service.title}

+

${service.description}

+
+ +
+
+

Beschreibung

+

${service.fullDescription}

+
+ +
+

Unsere Leistungen

+
    + ${service.features.map(feature => `
  • ${feature}
    • `).join('')} +
+
+ +
+

Ihre Vorteile

+
    + ${service.benefits.map(benefit => `
  • ${benefit}
    • `).join('')} +
+
+ +
+

Interesse?

+

Kontaktieren Sie uns für eine persönliche Beratung und ein maßgeschneidertes Angebot.

+
+ Kontakt aufnehmen + Zurück zum Dashboard +
+
+
+ `; + + // Update page title + document.title = `Profice - ${service.title}`; + } else { + // Fallback if no service specified + detailsContainer.innerHTML = ` +
+

Service nicht gefunden

+

Der angeforderte Service konnte nicht gefunden werden.

+ Zurück zum Dashboard +
+ `; + } +}); diff --git a/scripts/lead-details.js b/scripts/lead-details.js new file mode 100644 index 0000000..2c35d5b --- /dev/null +++ b/scripts/lead-details.js @@ -0,0 +1,203 @@ +// lead-details.js + +document.addEventListener("DOMContentLoaded", function() { + const urlParams = new URLSearchParams(window.location.search); + const leadId = urlParams.get('id'); + const detailsContainer = document.getElementById('leadDetailsContent'); + + function getLeads() { + const storedLeads = localStorage.getItem('myLeads'); + if (storedLeads) { + return JSON.parse(storedLeads); + } else { + return []; + } + } + + function getStatusClass(status) { + const statusClasses = { + 'neu': 'status-new', + 'in-bearbeitung': 'status-in-progress', + 'abgeschlossen': 'status-completed', + 'storniert': 'status-cancelled' + }; + return statusClasses[status] || 'status-new'; + } + + function formatDate(dateString) { + const date = new Date(dateString); + return date.toLocaleDateString('de-DE', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + } + + if (leadId && detailsContainer) { + const leadsData = getLeads(); + const lead = leadsData.find(l => l.id == leadId); + + if (lead) { + detailsContainer.innerHTML = ` +
+ +
+

Status

+
+ ${lead.statusText} +

Letzte Aktualisierung: ${formatDate(lead.datum)}

+
+
+ + +
+

Kontaktinformationen

+
+
+
Name
+
${lead.name || 'Nicht angegeben'}
+
+
+
Organisation
+
${lead.organisation || 'Nicht angegeben'}
+
+
+
Kontakt
+
${lead.contact || 'Nicht angegeben'}
+
+
+
Budget
+
${lead.budget || 'Nicht angegeben'}
+
+
+
+ + +
+

Dienstleistung

+
+
${getServiceIcon(lead.dienstleistung)}
+
+

${lead.dienstleistung}

+

${getServiceDescription(lead.dienstleistung)}

+
+
+
+ + + ${lead.description ? ` +
+

Projektbeschreibung

+
+

${lead.description}

+
+
+ ` : ''} + + +
+

Zeitstrahl

+
+
+
+
+

Anfrage erhalten

+

${formatDate(lead.datum)}

+
+
+
+
+
+

In Bearbeitung

+

${lead.status !== 'neu' ? 'Anfrage wird bearbeitet' : 'Ausstehend'}

+
+
+
+
+
+

Abgeschlossen

+

${lead.status === 'abgeschlossen' ? 'Projekt erfolgreich abgeschlossen' : 'Ausstehend'}

+
+
+
+
+ + +
+

Aktionen

+
+ + + +
+
+
+ `; + + // Update page title + document.title = `Profice - Anfrage von ${lead.name || 'Unbekannt'}`; + } else { + detailsContainer.innerHTML = ` +
+

Anfrage nicht gefunden

+

Die angeforderte Anfrage konnte nicht gefunden werden.

+ Zurück zum Dashboard +
+ `; + } + } else { + detailsContainer.innerHTML = ` +
+

Keine Anfrage-ID angegeben

+

Bitte navigieren Sie über das Leads Dashboard zu den Details.

+ Zum Dashboard +
+ `; + } +}); + +function getServiceIcon(service) { + const icons = { + 'Website': '🌐', + 'KI Integration': '🤖', + 'Automatisation': '⚙️', + 'Unabhängige Wahl': '🎯' + }; + return icons[service] || '📋'; +} + +function getServiceDescription(service) { + const descriptions = { + 'Website': 'Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.', + 'KI Integration': 'Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.', + 'Automatisation': 'Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.', + 'Unabhängige Wahl': 'Maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen.' + }; + return descriptions[service] || 'Individuelle Dienstleistung.'; +} + +function shareLead() { + if (navigator.share) { + navigator.share({ + title: document.title, + text: 'Details meiner Projektanfrage bei Profice', + url: window.location.href + }); + } else { + // Fallback for browsers that don't support Web Share API + navigator.clipboard.writeText(window.location.href); + alert('Link wurde in die Zwischenablage kopiert!'); + } +} + +function exportLead() { + window.print(); +} diff --git a/scripts/leads.js b/scripts/leads.js new file mode 100644 index 0000000..18fb993 --- /dev/null +++ b/scripts/leads.js @@ -0,0 +1,75 @@ +// 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 = ` + + +

Keine Anfragen vorhanden

+ + + `; + return; + } + + tableBody.innerHTML = leadsData.map(lead => ` + + ${lead.datum} + ${lead.dienstleistung} + + ${lead.statusText} + + + Details ansehen + + + `).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); \ No newline at end of file diff --git a/scripts/login.js b/scripts/login.js new file mode 100644 index 0000000..63113db --- /dev/null +++ b/scripts/login.js @@ -0,0 +1,207 @@ +// login.js + +document.addEventListener("DOMContentLoaded", function() { + console.log('Login page loaded'); + + 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'); + + console.log('Elements found:', { + loginForm: !!loginForm, + loginBtn: !!loginBtn, + successMessage: !!successMessage, + errorMessage: !!errorMessage, + registerBtn: !!registerBtn + }); + + // Register button functionality + if (registerBtn) { + registerBtn.addEventListener('click', function(e) { + e.preventDefault(); + console.log('Register button clicked on login page'); + window.location.href = 'register.html'; + }); + } + + // Check if user is already logged in + checkExistingSession(); + + // Login form submission + if (loginForm) { + loginForm.addEventListener('submit', function(e) { + e.preventDefault(); + console.log('Login form submitted'); + + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; + const remember = document.getElementById('remember').checked; + + console.log('Login data:', { email, password: '[hidden]', remember }); + + // 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(); + + // Simulate login process (for demo purposes) + setTimeout(() => { + // Store session (for demo purposes) + 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); + + setLoadingState(false); + }, 1500); + }); + } + + // 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 +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, redirect to dashboard + console.log('User already logged in, redirecting...'); + 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; +} diff --git a/scripts/register.js b/scripts/register.js new file mode 100644 index 0000000..ee87f06 --- /dev/null +++ b/scripts/register.js @@ -0,0 +1,268 @@ +// register.js + +document.addEventListener("DOMContentLoaded", function() { + console.log('Register page loaded'); + + 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'); + + console.log('Elements found:', { + registerForm: !!registerForm, + registerBtn: !!registerBtn, + passwordInput: !!passwordInput, + confirmPasswordInput: !!confirmPasswordInput, + passwordStrength: !!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', function(e) { + e.preventDefault(); + console.log('Register form submitted'); + + // Get form data + const formData = { + firstName: document.getElementById('firstName').value, + lastName: 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() + }; + + console.log('Registration data:', { ...formData, password: '[hidden]', confirmPassword: '[hidden]' }); + + // Validation + const validation = validateRegistrationForm(formData); + if (!validation.valid) { + showError(validation.message); + return; + } + + // Show loading state + setLoadingState(true); + hideMessages(); + + // Simulate registration (for demo purposes) + setTimeout(() => { + // Store user data (for demo purposes) + const userData = { + firstName: formData.firstName, + lastName: formData.lastName, + 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 zum Login weitergeleitet...'); + + // Redirect to login page after delay + setTimeout(() => { + window.location.href = 'login.html'; + }, 3000); + + setLoadingState(false); + }, 2000); + }); + } + + // 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) +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, redirect to dashboard + console.log('User already logged in, redirecting...'); + 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'); + } + } +} diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..8761825 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,134 @@ +// script.js + +// ========================================== +// 1. MENU TOGGLE LOGIC +// ========================================== +const menuToggle = document.getElementById('menuToggle'); +const slideMenu = document.getElementById('slideMenu'); +const overlay = document.getElementById('overlay'); +const loginBtn = document.getElementById('loginBtn'); + +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); +} + +// Login button functionality +if (loginBtn) { + console.log('Login button found:', loginBtn); + loginBtn.addEventListener('click', function(e) { + e.preventDefault(); + console.log('Login button clicked!'); + console.log('Current path:', window.location.pathname); + + // Check if we're already on the login page + if (window.location.pathname.includes('login.html')) { + // If on login page, go to register page + console.log('Navigating to register page'); + window.location.href = 'register.html'; + } else if (window.location.pathname.includes('register.html')) { + // If on register page, go to login page + console.log('Navigating to login page from register'); + window.location.href = 'login.html'; + } else { + // If on any other page, go to login page + console.log('Navigating to login page from other'); + window.location.href = 'sites/login.html'; + } + }); +} else { + console.error('Login button not found in DOM'); +} + +// ========================================== +// 2. FORM SUBMISSION LOGIC +// ========================================== +const contactForm = document.getElementById('contactForm'); +const successMessage = document.getElementById('successMessage'); + +if (contactForm) { + contactForm.addEventListener('submit', async function(e) { + e.preventDefault(); + + const nameInput = document.getElementById('name'); + const orgInput = document.getElementById('organisation'); + const contactInput = document.getElementById('contact'); + const serviceSelect = document.getElementById('service'); + const budgetInput = document.getElementById('budget'); + const descInput = document.getElementById('description'); + + const selectedServiceText = serviceSelect ? serviceSelect.options[serviceSelect.selectedIndex].text : 'Dienstleistung'; + + const formData = { + name: nameInput ? nameInput.value : '', + organisation: orgInput ? orgInput.value : '', + contact: contactInput ? contactInput.value : '', + service: serviceSelect ? serviceSelect.value : '', + budget: budgetInput ? budgetInput.value : '', + description: descInput ? descInput.value : '', + timestamp: new Date().toISOString() + }; + + // --- LOCALSTORAGE --- + try { + const localLead = { + id: Date.now(), + datum: new Date().toLocaleDateString('de-DE'), + dienstleistung: selectedServiceText, + status: 'open', + statusText: 'Offen', + description: formData.description + }; + + let existingLeads = JSON.parse(localStorage.getItem('myLeads')) || []; + existingLeads.unshift(localLead); + localStorage.setItem('myLeads', JSON.stringify(existingLeads)); + } catch (err) { + console.error('Ошибка сохранения в LocalStorage:', err); + } + // false if test, true if production + const USE_PRODUCTION = true; + const WEBHOOK_TEST = 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8207-1e335e64518f'; + const WEBHOOK_PROD = 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f'; + const N8N_WEBHOOK_URL = USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST; + + let iframe = document.getElementById('hidden-iframe'); + if (!iframe) { + iframe = document.createElement('iframe'); + iframe.id = 'hidden-iframe'; + iframe.name = 'hidden-iframe'; + iframe.style.display = 'none'; + document.body.appendChild(iframe); + } + + const tempForm = document.createElement('form'); + tempForm.method = 'POST'; + tempForm.action = N8N_WEBHOOK_URL; + tempForm.target = 'hidden-iframe'; + + for (const [key, value] of Object.entries(formData)) { + const input = document.createElement('input'); + input.type = 'hidden'; + input.name = key; + input.value = value; + tempForm.appendChild(input); + } + + document.body.appendChild(tempForm); + tempForm.submit(); + document.body.removeChild(tempForm); + + contactForm.style.display = 'none'; + if (successMessage) { + successMessage.classList.add('show'); + } + + console.log('Form submitted successfully'); + }); +} \ No newline at end of file diff --git a/scripts/scroll-header.js b/scripts/scroll-header.js new file mode 100644 index 0000000..7299505 --- /dev/null +++ b/scripts/scroll-header.js @@ -0,0 +1,83 @@ +// scroll-header.js +document.addEventListener("DOMContentLoaded", function() { + const topBanner = document.querySelector('.top-banner'); + const slideMenu = document.querySelector('.slide-menu'); + + if (!topBanner) return; + + // Scroll threshold to trigger the shrink effect + const scrollThreshold = 50; + let isScrolled = false; + let isTransitioning = false; + let lastScrollY = 0; + let scrollDirection = 'down'; + + function updateHeaderState(scrolled) { + if (isTransitioning) return; + + if (scrolled && !isScrolled) { + isTransitioning = true; + 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); + } + } + + function handleScroll() { + const currentScrollY = window.pageYOffset || document.documentElement.scrollTop; + + // Detect scroll direction + if (currentScrollY > lastScrollY) { + scrollDirection = 'down'; + } else if (currentScrollY < lastScrollY) { + scrollDirection = 'up'; + } + + // Only update when crossing threshold in the right direction + if (scrollDirection === 'down' && currentScrollY > scrollThreshold && !isScrolled) { + updateHeaderState(true); + } else if (scrollDirection === 'up' && currentScrollY <= scrollThreshold && isScrolled) { + updateHeaderState(false); + } + + lastScrollY = currentScrollY; + } + + // Use requestAnimationFrame for smooth scroll handling + let ticking = false; + function requestTick() { + if (!ticking) { + requestAnimationFrame(handleScroll); + ticking = true; + setTimeout(() => { ticking = false; }, 16); // ~60fps + } + } + + // Optimized scroll event listener + window.addEventListener('scroll', requestTick, { passive: true, capture: false }); + + // Initial check + handleScroll(); +}); diff --git a/sites/automatisation.html b/sites/automatisation.html new file mode 100644 index 0000000..9111066 --- /dev/null +++ b/sites/automatisation.html @@ -0,0 +1,213 @@ + + + + + + Profice - Automatisierung + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+
+ +
+
⚙️
+

Automatisierung

+

Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen

+
+ + +
+

Unsere Automatisierungslösungen

+

+ 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. +

+
+ + +
+

Was wir automatisieren können

+
+
+
📧
+

E-Mail-Automatisierung

+

Automatische Antwortverwaltung und E-Mail-Kampagnen

+
+
+
📄
+

Datenverarbeitung

+

Automatische Datenmigration und -bereinigung

+
+
+
📋
+

Report-Generierung

+

Automatische Erstellung von Berichten und Analysen

+
+
+
🔄
+

Workflow-Integration

+

Verbindung verschiedener Systeme für nahtlose Prozesse

+
+
+
📊
+

Monitoring

+

Automatische Systemüberwachung und Alarmierung

+
+
+
🎯
+

Task-Management

+

Intelligente Aufgabenverteilung und -verfolgung

+
+
+
+ + +
+

Unser Automatisierungsprozess

+
+
+
1
+
+

Prozessanalyse

+

Identifizierung von Automatisierungspotenzialen

+
+
+
+
2
+
+

Lösungsdesign

+

Entwicklung maßgeschneiderter Automatisierungslösungen

+
+
+
+
3
+
+

Implementierung

+

Setup und Konfiguration der Automatisierungstools

+
+
+
+
4
+
+

Testing

+

Gewissenhafte Tests vor der Live-Schaltung

+
+
+
+
5
+
+

Monitoring

+

Laufende Überwachung und Optimierung

+
+
+
+
+ + +
+

Automatisierungstechnologien

+
+
Zapier
+
+
+ + +
+

Ihre Vorteile

+
+
+
⏰️
+

Zeitersparnis

+

Bis zu 80% Zeitersparnis bei wiederkehrenden Aufgaben

+
+
+
🎯
+

Qualitätssteigerung

+

Reduzierung menschlicher Fehler und konsistente Ergebnisse

+
+
+
💰
+

Kostensenkung

+

Optimierung von Ressourcen und Betriebskosten

+
+
+
📈
+

Skalierbarkeit

+

Einfache Handhabung wachsender Geschäftsanforderungen

+
+
+
😊
+

Mitarbeiterzufriedenheit

+

Fokus auf kreative und strategische Aufgaben

+
+
+ + + +
+

Bereit für mehr Effizienz?

+

Lassen Sie uns Ihre Prozesse analysieren und Potenziale identifizieren.

+
+ Automatisierungs-Analyse + Mehr erfahren +
+
+ +
+ + + + + + diff --git a/sites/details.html b/sites/details.html new file mode 100644 index 0000000..8fb2e55 --- /dev/null +++ b/sites/details.html @@ -0,0 +1,76 @@ + + + + + + Profice - Service Details + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+
+
+ +
+
+ ← Zurück zum Dashboard +
+
+
+ + + + + + + diff --git a/sites/ki-integration.html b/sites/ki-integration.html new file mode 100644 index 0000000..77f9ba1 --- /dev/null +++ b/sites/ki-integration.html @@ -0,0 +1,217 @@ + + + + + + Profice - KI Integration + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+
+ +
+
🤖
+

KI Integration

+

Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren

+
+ + +
+

Unsere KI-Dienstleistungen

+

+ 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. +

+
+ + +
+

Was wir bieten

+
+
+
📊
+

Datenanalyse

+

Intelligente Auswertung Ihrer Geschäftsdaten für bessere Entscheidungen

+
+
+
🤖
+

Chatbots

+

24/7 Kundenbetreuung und automatisierte Kommunikation

+
+
+
⚙️
+

Prozessautomatisierung

+

Automatisierung wiederkehrender Aufgaben zur Effizienzsteigerung

+
+
+
🔍
+

Bilderkennung

+

Automatische Analyse von Bildern und Dokumenten

+
+
+
📈
+

Vorhersagemodelle

+

Prognosen für Trends und Geschäftsentwicklungen

+
+
+
🎯
+

Personalisierung

+

Individuelle KI-Lösungen für Ihre spezifischen Bedürfnisse

+
+
+
+ + +
+

Unser KI-Integrationsprozess

+
+
+
1
+
+

Analyse & Potenzial

+

Identifizierung von KI-Einsatzmöglichkeiten in Ihrem Unternehmen

+
+
+
+
2
+
+

Datenstrategie

+

Planung der Datenerfassung und -verarbeitung

+
+
+
+
3
+
+

Modellentwicklung

+

Training oder Auswahl passender KI-Modelle

+
+
+
+
4
+
+

Integration

+

Nahtlose Anbindung an Ihre bestehenden Systeme

+
+
+
+
5
+
+

Optimierung

+

Kontinuierliche Verbesserung der KI-Modelle

+
+
+
+
+ + +
+

KI-Technologien

+
+
TensorFlow
+
PyTorch
+
Scikit-learn
+
OpenAI API
+
Google Cloud AI
+
Azure ML
+
AWS SageMaker
+
Hugging Face
+
LangChain
+
Dialogflow
+
+
+ + +
+

Anwendungsfälle

+
+
+

Kundenservice

+

Intelligente Chatbots für 24/7 Unterstützung

+
+
+

Vertrieb

+

Predictive Lead Scoring und Verkaufsoptimierung

+
+
+

Marketing

+

Personalisierte Kampagnen und Content-Optimierung

+
+
+

Finanzen

+

Betrugsprüfung und Risikoanalyse

+
+
+

Produktion

+

Qualitätssicherung und Predictive Maintenance

+
+
+
+ + +
+

Bereit für KI in Ihrem Unternehmen?

+

Lassen Sie uns die Potenziale für Ihr Unternehmen analysieren.

+
+ KI-Analyse anfordern + Mehr erfahren +
+
+
+
+ + + + + + diff --git a/sites/lead-details.html b/sites/lead-details.html new file mode 100644 index 0000000..efd5a52 --- /dev/null +++ b/sites/lead-details.html @@ -0,0 +1,87 @@ + + + + + + Profice - Anfrage Details + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+
+ +
+
📋
+

Anfrage Details

+

Alle Informationen zu Ihrer Projektanfrage

+
+ + +
+ +
+ + +
+ ← Zurück zum Dashboard + Neue Anfrage +
+
+
+ + + + + + + diff --git a/sites/leads.html b/sites/leads.html new file mode 100644 index 0000000..689f51a --- /dev/null +++ b/sites/leads.html @@ -0,0 +1,117 @@ + + + + + + Profice - Leads Dashboard + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+ +
+

Meine Anfragen

+

Übersicht Ihrer aktuellen Projektanfragen

+ +
+ + + + + + + + + + + + +
DatumDienstleistungStatusAktion
+
+
+ + +
+

Andere Angebote von uns

+

Entdecken Sie weitere Dienstleistungen

+ +
+
+
🔍
+

SEO Optimierung

+

Verbessern Sie Ihre Sichtbarkeit in Suchmaschinen und erreichen Sie mehr Kunden online.

+ Details ansehen +
+ +
+
☁️
+

Cloud Migration

+

Modernisieren Sie Ihre IT-Infrastruktur mit sicheren und skalierbaren Cloud-Lösungen.

+ Details ansehen +
+ +
+
📊
+

Datenanalyse

+

Gewinnen Sie wertvolle Einblicke aus Ihren Daten mit unseren Analyse-Lösungen.

+ Details ansehen +
+
+
+
+ + + + + + diff --git a/sites/login.html b/sites/login.html new file mode 100644 index 0000000..6d0f27c --- /dev/null +++ b/sites/login.html @@ -0,0 +1,138 @@ + + + + + + Profice - Login + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+ +
+ + + + + + + diff --git a/sites/offers.html b/sites/offers.html new file mode 100644 index 0000000..139150b --- /dev/null +++ b/sites/offers.html @@ -0,0 +1,114 @@ + + + + + + Profice + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+
+

Kontaktieren Sie uns

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+

Vielen Dank!

+

Ihre Anfrage wurde erfolgreich gesendet. Wir melden uns bald bei Ihnen.

+
+
+
+ + + + + + \ No newline at end of file diff --git a/sites/register.html b/sites/register.html new file mode 100644 index 0000000..5806e02 --- /dev/null +++ b/sites/register.html @@ -0,0 +1,174 @@ + + + + + + Register - Profice + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+ +
+ + + + + + + diff --git a/sites/website.html b/sites/website.html new file mode 100644 index 0000000..996b65f --- /dev/null +++ b/sites/website.html @@ -0,0 +1,191 @@ + + + + + + Profice - Website Entwicklung + + + + + + +
+
+ +
+
+ +
+
+ + +
+
+ + + + + +
+ + +
+
+ +
+
🌐
+

Website Entwicklung

+

Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren

+
+ + +
+

Unsere Webentwicklungsdienstleistungen

+

+ 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. +

+
+ + +
+

Was wir bieten

+
+
+
🎨
+

Responsive Design

+

Perfekte Darstellung auf allen Geräten - von Desktop bis Mobile

+
+
+
⚡
+

Performance-Optimierung

+

Schnelle Ladezeiten und beste Nutzererfahrung

+
+
+
🔒
+

SEO-Freundlich

+

Technische Grundlagen für gute Suchmaschinenplatzierungen

+
+
+
🔧
+

CMS-Integration

+

Einfache Content-Verwaltung für Ihre Mitarbeiter

+
+
+
🛡️
+

Sicherheit

+

Schutz vor Bedrohungen und sichere Datenverarbeitung

+
+
+
📊
+

Analytics & Tracking

+

Detaillierte Auswertung Ihrer Website-Performance

+
+
+
+ + +
+

Unser Prozess

+
+
+
1
+
+

Analyse & Konzeption

+

Wir verstehen Ihre Ziele und entwickeln eine passende Strategie

+
+
+
+
2
+
+

Design & Prototyping

+

Visuelle Konzepte und interaktive Prototypen

+
+
+
+
3
+
+

Entwicklung

+

Saubere, performante Code-Implementierung

+
+
+
+
4
+
+

Testing & Launch

+

Gewissenhafte Tests und erfolgreicher Start

+
+
+
+
5
+
+

Support & Wartung

+

Laufende Optimierung und technische Unterstützung

+
+
+
+
+ + +
+

Technologien

+
+
HTML5
+
CSS3
+
JavaScript
+
React
+
Vue.js
+
Angular
+
Node.js
+
PHP
+
WordPress
+
Shopify
+
WooCommerce
+
+
+ + +
+

Bereit für Ihre neue Website?

+

Lassen Sie uns Ihr Projekt an und wir erstellen ein maßgeschneidertes Angebot.

+
+ Projekt starten + Mehr erfahren +
+
+
+
+ + + + + + diff --git a/style/cursor.css b/style/cursor.css new file mode 100644 index 0000000..feb6603 --- /dev/null +++ b/style/cursor.css @@ -0,0 +1,79 @@ +/* cursor.css */ + +body, +html, +a, +button, +input, +textarea, +select, +.menu-toggle, +label { + cursor: none !important; +} + +#venom-cursor { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 9999; + mix-blend-mode: normal; +} + +@media (pointer: coarse) { + body, html, a, button, input, textarea, select { + cursor: auto !important; + } + + #venom-cursor { + display: none; + } +} + +body.system-cursor, +body.system-cursor * { + cursor: auto !important; +} + +body.system-cursor #venom-cursor { + display: none !important; + opacity: 0; + pointer-events: none; +} + +#cursorToggle { + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: 2px solid var(--primary-dark); + color: var(--primary-dark); + width: 45px; + height: 45px; + border-radius: 12px; + cursor: none; + transition: all 0.3s ease; + font-size: 20px; +} + +#cursorToggle:hover { + background: var(--primary-dark); + color: var(--primary-light); +} + +body.system-cursor #cursorToggle { + opacity: 1; +} + +.top-banner.dark-theme #cursorToggle { + border-color: var(--primary-light); + color: var(--primary-light); +} + +.top-banner.dark-theme #cursorToggle:hover { + background: var(--primary-light); + color: var(--primary-dark); +} \ No newline at end of file diff --git a/style/design.css b/style/design.css new file mode 100644 index 0000000..7bc1120 --- /dev/null +++ b/style/design.css @@ -0,0 +1,1042 @@ +:root { + --primary-dark: #4F4747; + --primary-light: #EBEBDE; + --primary-mid: #777764; + --accent-orange: #F57C00; + --accent-teal: #26A69A; + --accent-green: #66BB6A; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +body { + background-color: var(--primary-light); + color: var(--primary-dark); + min-height: 100vh; +} + +/* Top Banner */ +.top-banner { + background-color: var(--primary-light); + color: var(--primary-dark); + padding: 5px 40px; + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + z-index: 1001; + border-bottom: 1px solid #4f47471a; + height: 110px; + transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), + padding 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: height, padding; + transform: translateZ(0); + backface-visibility: hidden; + contain: layout style paint; +} + +.top-banner-left { + display: flex; + align-items: center; + flex: 1; +} + +.top-banner-center { + display: flex; + justify-content: center; + flex: 2; +} + +.top-banner-right { + display: flex; + justify-content: flex-end; + flex: 1; +} + +.top-banner.scrolled { + padding: 2px 30px; + height: 80px; +} + +.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 { + display: flex; + align-items: center; + gap: 15px; +} + +.banner-left #cursorToggle { + margin-right: 15px; +} + +.search-container { + display: flex; + align-items: center; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 25px; + padding: 8px 8px 8px 15px; + transition: all 0.3s ease; + order: 1; + width: 250px; +} + +.search-container:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.3); +} + +.search-container form { + display: flex; + align-items: center; + width: 100%; +} + +.search-field { + background: transparent; + border: none; + color: white; + font-size: 14px; + width: 100%; + outline: none; + padding: 0; + margin-right: 8px; +} + +.search-field::placeholder { + color: rgba(255, 255, 255, 0.7); +} + +.search-field:focus::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.search-btn { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + cursor: pointer; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; + border-radius: 50%; + flex-shrink: 0; +} + +.search-btn:hover { + background: rgba(255, 255, 255, 0.3); +} + +.search-container { + display: flex; + align-items: center; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 25px; + padding: 8px 8px 8px 15px; + transition: all 0.3s ease; + order: 1; + width: 250px; +} + +.search-container:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.3); +} + +.search-container form { + display: flex; + align-items: center; + width: 100%; +} + +.search-field { + background: transparent; + border: none; + color: white; + font-size: 14px; + width: 100%; + outline: none; + padding: 0; + margin-right: 8px; +} + +.search-field::placeholder { + color: rgba(255, 255, 255, 0.7); +} + +.search-field:focus::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.search-btn { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + cursor: pointer; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; + border-radius: 50%; + flex-shrink: 0; +} + +.search-btn:hover { + background: rgba(255, 255, 255, 0.3); +} + +.main-nav { + display: flex; + align-items: center; + gap: 25px; +} + +.nav-link { + text-decoration: none; + color: white; + font-weight: 500; + font-size: 18px; + padding: 8px 12px; + border-radius: 8px; + transition: color 0.3s ease, transform 0.2s ease, background 0.3s ease; + position: relative; +} + +.nav-link:hover { + color: white; + transform: translateY(-2px); + background: rgba(255, 255, 255, 0.1); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--accent-teal); + transition: width 0.3s ease; +} + +.nav-link:hover::after { + width: 100%; +} + +.logo-link { + text-decoration: none; + display: flex; + align-items: center; + gap: 0; + margin-left: 0; + margin-right: 15px; +} + +.logo { + height: 50px; + width: auto; + transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: height; +} + +.top-banner.scrolled .logo { + 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.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: font-size, padding; +} + +.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; + align-items: center; + justify-content: center; + gap: 5px; + transition: background 0.3s ease, color 0.3s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: width, height; +} + +#cursorToggle { + background: transparent; + border: 2px solid var(--primary-dark); + color: var(--primary-dark); + width: 60px; + height: 60px; + border-radius: 12px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease; + will-change: width, height; +} + +.cursor-icon { + width: 60px; + height: 60px; + object-fit: contain; + transition: opacity 0.3s ease; + opacity: 1 !important; + filter: none !important; +} + +#cursorToggle:hover { + background: var(--primary-dark); +} + +#cursorToggle:hover .cursor-icon { + filter: brightness(0) invert(1) !important; + opacity: 1 !important; +} + +.menu-toggle:hover { + background: var(--primary-dark); +} + +.menu-toggle:hover span { + background: var(--primary-light); +} + +.menu-toggle span { + display: block; + width: 20px; + height: 2px; + background: var(--primary-dark); + border-radius: 2px; + transition: all 0.3s ease; +} + +.menu-toggle.active { + background: var(--primary-dark); +} + +.menu-toggle.active span { + background: var(--primary-light); +} + +.menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.menu-toggle.active span:nth-child(2) { + opacity: 0; +} + +.menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +/* Slide Menu */ +.slide-menu { + position: fixed; + top: 110px; + left: -280px; + width: 280px; + background: white; + box-shadow: 4px 0 25px rgba(79, 71, 71, 0.15); + border-radius: 0 20px 20px 0; + padding: 30px 0; + transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.3s ease; + z-index: 1000; +} + +.top-banner.scrolled ~ .slide-menu, +.top-banner.scrolled + .overlay + .slide-menu { + top: 80px; +} + +.slide-menu.active { + left: 0; +} + +.slide-menu a { + display: block; + padding: 18px 30px; + color: var(--primary-dark); + text-decoration: none; + font-size: 17px; + font-weight: 500; + transition: all 0.3s ease; + border-left: 4px solid transparent; +} + +.slide-menu a:hover { + background: var(--primary-light); + border-left-color: var(--accent-teal); + padding-left: 40px; + color: var(--accent-teal); +} + +.slide-menu a.active { + background: var(--primary-light); + border-left-color: var(--accent-teal); + color: var(--accent-teal); +} + +/* Main Content */ +.main-content { + max-width: 700px; + margin: 50px auto; + padding: 110px 20px 20px 20px; + transition: padding-top 0.2s ease-out; +} + +.form-container { + background: white; + padding: 45px; + border-radius: 24px; + box-shadow: 0 15px 50px rgba(79, 71, 71, 0.1); +} + +.form-title { + color: var(--primary-dark); + font-size: 28px; + margin-bottom: 35px; + text-align: center; + font-weight: 600; +} + +.form-group { + margin-bottom: 24px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + color: var(--primary-mid); + font-weight: 500; + font-size: 14px; +} + +.form-group input, +.form-group textarea, +.form-group select { + width: 100%; + padding: 14px 18px; + border: 2px solid rgba(119, 119, 100, 0.2); + border-radius: 14px; + font-size: 16px; + transition: all 0.3s ease; + background: var(--primary-light); + color: var(--primary-dark); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--accent-teal); + background: white; + box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.15); +} + +.form-group textarea { + min-height: 120px; + resize: vertical; +} + +.form-group select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234F4747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 14px center; + background-size: 18px; +} + +.submit-btn { + width: 100%; + padding: 16px; + background: var(--accent-teal); + color: white; + border: none; + border-radius: 25px; + font-size: 17px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; +} + +.submit-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(38, 166, 154, 0.35); + background: #1e8e82; +} + +.submit-btn:active { + transform: translateY(0); +} + +/* Login Button Styles */ +.login-btn { + 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; + position: relative; + z-index: 10; + pointer-events: auto; +} + +.login-btn:hover { + background: white; + color: var(--primary-dark); + 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); +} + +/* Top Banner Right Layout */ +.top-banner-right { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 15px; + flex: 1; + position: relative; + z-index: 10; +} + +/* Service Details Buttons */ +.service-details { + display: flex; + gap: 15px; + margin-top: 15px; + flex-wrap: wrap; + justify-content: center; +} + +.service-btn { + padding: 12px 24px; + background: var(--accent-teal); + color: white; + text-decoration: none; + border-radius: 25px; + font-size: 14px; + font-weight: 500; + transition: all 0.3s ease; + display: inline-block; +} + +.service-btn:hover { + background: white; + color: var(--accent-teal); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(38, 166, 154, 0.3); +} + +/* Success Message */ +.success-message { + display: none; + text-align: center; + padding: 30px; + color: var(--accent-teal); +} + +.success-message.show { + display: block; +} + +.success-message h3 { + font-size: 24px; + margin-bottom: 10px; +} + +/* Overlay */ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(79, 71, 71, 0.3); + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 999; +} + +.overlay.active { + opacity: 1; + visibility: visible; +} + +@media (max-width: 600px) { + .top-banner { + flex-direction: column; + gap: 15px; + text-align: center; + padding: 15px 20px; + } + + .banner-left { + width: 100%; + justify-content: center; + } + + .form-container { + padding: 25px; + } + + .logo { + height: 100px; + width: auto; + } +} + +/* ADDITIONS FOR HOME PAGE & DARK HEADER */ + + +/* 1. Dark Header Theme */ +.top-banner.dark-theme { + background-color: var(--primary-dark); + color: var(--primary-light); + border-bottom: 1px solid rgba(235, 235, 222, 0.1); +} + +.top-banner.dark-theme .company-name { + color: var(--primary-light); +} + +.top-banner.dark-theme .opening-hours { + background: rgba(235, 235, 222, 0.1); + color: var(--primary-light); +} + +.top-banner.dark-theme .menu-toggle { + border-color: var(--primary-light); +} + +.top-banner.dark-theme .menu-toggle span { + background: var(--primary-light); +} + +.top-banner.dark-theme .menu-toggle:hover { + background: var(--primary-light); +} + +.top-banner.dark-theme .menu-toggle:hover span { + background: var(--primary-dark); +} + +/* 2. Home Page Layout */ +.home-content { + max-width: 1200px; + margin: 0 auto; + padding: 110px 20px 20px 20px; + transition: padding-top 0.2s ease-out; +} + +/* Hero Section */ +.hero-section { + display: flex; + align-items: center; + justify-content: space-between; + padding: 80px 20px; + gap: 40px; + min-height: 80vh; +} + +.hero-text { + flex: 1; + max-width: 600px; +} + +.hero-text h1 { + font-size: 48px; + line-height: 1.2; + margin-bottom: 24px; + color: var(--primary-dark); + font-weight: 700; +} + +.hero-text p { + font-size: 18px; + line-height: 1.6; + margin-bottom: 35px; + color: var(--primary-mid); +} + +.hero-buttons { + display: flex; + gap: 15px; +} + +.cta-btn { + padding: 15px 30px; + border-radius: 30px; + font-size: 16px; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; +} + +.cta-btn.primary { + background-color: var(--accent-teal); + color: white; + border: 2px solid var(--accent-teal); +} + +.cta-btn.primary:hover { + background-color: #1e8e82; + border-color: #1e8e82; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(38, 166, 154, 0.2); +} + +.cta-btn.secondary { + background-color: transparent; + color: var(--primary-dark); + border: 2px solid var(--primary-dark); +} + +.cta-btn.secondary:hover { + background-color: var(--primary-dark); + color: var(--primary-light); +} + +.hero-image-placeholder { + flex: 1; + height: 400px; + background-color: rgba(119, 119, 100, 0.1); + border-radius: 24px; + display: flex; + align-items: center; + justify-content: center; + border: 2px dashed var(--primary-mid); + color: var(--primary-mid); +} + +/* Services Section */ +.services-section { + padding: 60px 20px; + margin-bottom: 60px; +} + +.section-title { + text-align: center; + font-size: 32px; + color: var(--primary-dark); + margin-bottom: 50px; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.service-card { + background: white; + padding: 40px; + border-radius: 24px; + box-shadow: 0 15px 50px rgba(79, 71, 71, 0.05); + transition: transform 0.3s ease; + text-align: center; +} + +.service-card:hover { + transform: translateY(-10px); +} + +.service-icon { + font-size: 48px; + margin-bottom: 20px; + color: var(--accent-teal); +} + +.service-card h3 { + font-size: 22px; + color: var(--primary-dark); + margin-bottom: 15px; +} + +.service-card p { + color: var(--primary-mid); + line-height: 1.6; +} + +/* Info Section */ +.info-section { + background-color: white; + padding: 80px 40px; + border-radius: 24px; + margin-bottom: 80px; + box-shadow: 0 15px 50px rgba(79, 71, 71, 0.05); +} + +.info-container { + display: flex; + align-items: center; + gap: 50px; +} + +.info-content { + flex: 1; +} + +.info-content h2 { + font-size: 32px; + color: var(--primary-dark); + margin-bottom: 20px; +} + +.info-content p { + color: var(--primary-mid); + font-size: 17px; + line-height: 1.6; + margin-bottom: 30px; +} + +.info-list { + list-style: none; +} + +.info-list li { + margin-bottom: 15px; + padding-left: 30px; + position: relative; + color: var(--primary-dark); + font-weight: 500; +} + +.info-list li::before { + content: "✓"; + position: absolute; + left: 0; + color: var(--accent-green); + font-weight: bold; +} + +.info-image-placeholder { + flex: 1; + height: 300px; + background-color: var(--primary-light); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + border: 2px dashed var(--primary-mid); + color: var(--primary-mid); +} + +/* Enterprise Section */ +.enterprise-section { + padding: 80px 20px; + background: white; + text-align: center; +} + +.enterprise-content { + max-width: 800px; + margin: 0 auto; +} + +.enterprise-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + margin-top: 50px; +} + +.feature-item { + background: var(--primary-light); + padding: 30px; + border-radius: 16px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.feature-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(79, 71, 71, 0.1); +} + +.feature-item h3 { + color: var(--accent-teal); + margin-bottom: 15px; + font-size: 20px; +} + +.feature-item p { + color: var(--primary-mid); + line-height: 1.6; +} + +/* Pricing Section */ +.pricing-section { + padding: 80px 20px; + background: var(--primary-light); + text-align: center; +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + max-width: 1000px; + margin: 50px auto 0; +} + +.pricing-card { + background: white; + padding: 40px 30px; + border-radius: 16px; + box-shadow: 0 5px 20px rgba(79, 71, 71, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.pricing-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(79, 71, 71, 0.15); +} + +.pricing-card.featured { + border: 2px solid var(--accent-teal); + transform: scale(1.05); +} + +.pricing-card h3 { + color: var(--primary-dark); + font-size: 24px; + margin-bottom: 20px; +} + +.price { + font-size: 36px; + font-weight: bold; + color: var(--accent-teal); + margin-bottom: 15px; +} + +.pricing-card p { + color: var(--primary-mid); + margin-bottom: 25px; +} + +.pricing-card ul { + list-style: none; + text-align: left; +} + +.pricing-card li { + padding: 8px 0; + border-bottom: 1px solid rgba(119, 119, 100, 0.1); + color: var(--primary-dark); +} + +.pricing-card li:before { + content: "✓ "; + color: var(--accent-teal); + font-weight: bold; + margin-right: 8px; +} + +/* Responsive Home */ +@media (max-width: 900px) { + .hero-section { + flex-direction: column; + text-align: center; + padding-top: 40px; + } + + .hero-text h1 { + font-size: 36px; + } + + .hero-buttons { + justify-content: center; + } + + .info-container { + flex-direction: column-reverse; + } + + .hero-image-placeholder, + .info-image-placeholder { + width: 100%; + } +} + +/* Navigation responsive */ +@media (max-width: 768px) { + .main-nav { + display: none; + } + + .top-banner { + justify-content: space-between; + } + + .banner-left { + flex: 1; + } + + .opening-hours { + display: none; + } +} \ No newline at end of file diff --git a/style/details.css b/style/details.css new file mode 100644 index 0000000..2e13d8c --- /dev/null +++ b/style/details.css @@ -0,0 +1,151 @@ +/* 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; + } +} diff --git a/style/lead-details.css b/style/lead-details.css new file mode 100644 index 0000000..51ee4ae --- /dev/null +++ b/style/lead-details.css @@ -0,0 +1,408 @@ +/* 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; + } +} diff --git a/style/leads.css b/style/leads.css new file mode 100644 index 0000000..017cc0c --- /dev/null +++ b/style/leads.css @@ -0,0 +1,219 @@ +/* Leads Dashboard Styles */ + +.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 */ +.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 Badges */ +.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 Button */ +.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 */ +.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); +} + +/* Active menu link */ +.slide-menu a.active { + background: var(--primary-light); + border-left-color: var(--accent-teal); + color: var(--accent-teal); +} + +/* Empty state */ +.empty-state { + text-align: center; + padding: 40px; + color: var(--primary-mid); +} + +.empty-state p { + font-size: 16px; +} + +/* Responsive */ +@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; + } +} diff --git a/style/login.css b/style/login.css new file mode 100644 index 0000000..f877ec7 --- /dev/null +++ b/style/login.css @@ -0,0 +1,547 @@ +/* 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; + } +} diff --git a/style/service.css b/style/service.css new file mode 100644 index 0000000..aafe64e --- /dev/null +++ b/style/service.css @@ -0,0 +1,339 @@ +/* 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; + } +}