623 lines
29 KiB
HTML
623 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Profice - Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing. KI-Telefonassistenten, Chatbots und interne KI-Systeme.">
|
|
<meta name="keywords" content="KI Telefonassistent, Chatbot, digitale Mitarbeiter, Automatisierung, KI Systeme">
|
|
<meta name="author" content="Profice">
|
|
<meta property="og:title" content="Profice - Digitale Mitarbeiter">
|
|
<meta property="og:description" content="Wir bauen funktionierende KI-Systeme für Unternehmen">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
|
|
<meta name="robots" content="index, follow">
|
|
<title>Profice - Digitale Mitarbeiter</title>
|
|
|
|
<!-- Preconnect to external domains -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
|
|
<!-- Preload critical resources -->
|
|
<link rel="preload" href="style/design.css" as="style">
|
|
<link rel="preload" href="style/tech-onepager.css" as="style">
|
|
<link rel="preload" href="style/cursor.css" as="style">
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="style/design.css">
|
|
<link rel="stylesheet" href="style/tech-onepager.css">
|
|
<link rel="stylesheet" href="style/cursor.css">
|
|
|
|
<!-- DNS prefetch for external resources -->
|
|
<link rel="dns-prefetch" href="//www.googletagmanager.com">
|
|
<link rel="dns-prefetch" href="//connect.facebook.net">
|
|
<link rel="dns-prefetch" href="//www.google-analytics.com">
|
|
</head>
|
|
<body>
|
|
<!-- Tech Background -->
|
|
<div class="tech-background">
|
|
<div class="grid-overlay"></div>
|
|
<div class="dot-pattern"></div>
|
|
<div class="gradient-overlay"></div>
|
|
</div>
|
|
|
|
<!-- Top Banner -->
|
|
<header class="top-banner dark-theme">
|
|
<div class="top-banner-left">
|
|
<div class="banner-left">
|
|
<button class="menu-toggle" id="menuToggle" >
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<a href="index.html" class="logo-link">
|
|
<img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" >
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top-banner-center">
|
|
<!-- Navigation removed -->
|
|
</div>
|
|
|
|
<div class="top-banner-right">
|
|
<button id="cursorToggle" >
|
|
<img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Slide Menu -->
|
|
<nav class="slide-menu" id="slideMenu">
|
|
<a href="index.html" class="active">Startseite</a>
|
|
<a href="sites/offers.html">Kontakt & Anfrage</a>
|
|
<a href="sites/leads.html">Leads Dashboard</a>
|
|
</nav>
|
|
|
|
<div class="overlay" id="overlay"></div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section" id="hero">
|
|
<div class="hero-container">
|
|
<div class="hero-left">
|
|
<div class="hero-text">
|
|
<h1 class="hero-headline">
|
|
Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.
|
|
</h1>
|
|
<p class="hero-subline">
|
|
KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
|
|
</p>
|
|
<p class="hero-proof">
|
|
Für Unternehmen, die wachsen wollen ohne mehr Personal einzustellen.
|
|
</p>
|
|
<div class="hero-buttons">
|
|
<button class="cta-btn primary" id="kiPhoneBtn">Mit KI sprechen</button>
|
|
<button class="cta-btn secondary" id="chatBtn">Im Chat starten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-right">
|
|
<div class="system-graphic" id="systemGraphic">
|
|
<!-- Connection Lines (behind nodes) -->
|
|
<svg class="connections" id="connections">
|
|
<!-- Lines will be drawn by JavaScript -->
|
|
</svg>
|
|
|
|
<!-- Central KI Node -->
|
|
<div class="node central-node" data-node="ki-assistent" data-tooltip="Der zentrale KI-Assistent verarbeitet alle Anfragen und koordiniert die Kommunikation zwischen den verschiedenen Systemen. Er ist das Herzstück Ihrer digitalen Mitarbeiter.">
|
|
<div class="node-content">
|
|
<div class="node-icon">🤖</div>
|
|
<div class="node-label">KI ASSISTENT</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connected Nodes in circular pattern -->
|
|
<div class="node phone-node" data-node="telefon" data-tooltip="Automatisierte Telefonannahme mit KI-Spracherkennung. Der KI-Assistent nimmt Anrufe entgegen, versteht Kundenanfragen und leitet sie an die richtige Abteilung weiter.">
|
|
<div class="node-content">
|
|
<div class="node-icon">📞</div>
|
|
<div class="node-label">Telefon</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node chat-node" data-node="chat" data-tooltip="Intelligenter Website-Chat der nächsten Generation. Versteht natürliche Sprache, kategorisiert Anfragen und strukturiert Daten für die Übergabe an menschliche Mitarbeiter.">
|
|
<div class="node-content">
|
|
<div class="node-icon">💬</div>
|
|
<div class="node-label">Website Chat</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node crm-node" data-node="crm" data-tooltip="Nahtlose CRM-Integration. Alle Kundendaten und Interaktionen werden automatisch erfasst und in Ihrem CRM-System synchronisiert für eine 360°-Kundensicht.">
|
|
<div class="node-content">
|
|
<div class="node-icon">📊</div>
|
|
<div class="node-label">CRM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node ticket-node" data-node="tickets" data-tooltip="Automatisiertes Ticketsystem. KI erstellt, kategorisiert und priorisiert Support-Tickets und sorgt für eine schnelle und effiziente Bearbeitung aller Anfragen.">
|
|
<div class="node-content">
|
|
<div class="node-icon">🎫</div>
|
|
<div class="node-label">Ticketsystem</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node team-node" data-node="team" data-tooltip="Intelligente Team-Koordination. Der KI-Assistent verteilt Aufgaben an die richtigen Teammitglieder und sorgt für optimale Auslastung und schnelle Reaktionszeiten.">
|
|
<div class="node-content">
|
|
<div class="node-icon">👥</div>
|
|
<div class="node-label">Team</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Systeme Section -->
|
|
<section class="systeme-section" id="systeme">
|
|
<div class="container">
|
|
<h2 class="section-headline">Keine Beratung. Wir bauen funktionierende Systeme.</h2>
|
|
|
|
<div class="systeme-grid">
|
|
<!-- KI Telefonassistent -->
|
|
<div class="system-card" data-system="phone">
|
|
<div class="system-visual">
|
|
<div class="phone-system">
|
|
<div class="phone-icon">📞</div>
|
|
<div class="waveform">
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
</div>
|
|
<div class="ki-processor">🤖</div>
|
|
<div class="crm-output">📊</div>
|
|
</div>
|
|
</div>
|
|
<h3>KI Telefonassistent</h3>
|
|
<div class="system-details">
|
|
<div class="what-it-does">
|
|
<h4>Was es tut:</h4>
|
|
<ul>
|
|
<li>Annahme eingehender Anrufe</li>
|
|
<li>Verständnis der Kundenanfrage</li>
|
|
<li>Weiterleitung an richtige Abteilung</li>
|
|
<li>Dokumentation im CRM</li>
|
|
</ul>
|
|
</div>
|
|
<div class="result">
|
|
<h4>Ergebnis:</h4>
|
|
<ul>
|
|
<li>-52% unnötige Anrufe</li>
|
|
<li>24/7 Erreichbarkeit</li>
|
|
<li>Qualifiziertere Weiterleitungen</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KI Chat -->
|
|
<div class="system-card" data-system="chat">
|
|
<div class="system-visual">
|
|
<div class="chat-system">
|
|
<div class="website-input">🌐</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="ki-processor">🤖</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="category-output">📋</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="human-output">👤</div>
|
|
</div>
|
|
</div>
|
|
<h3>KI Chat</h3>
|
|
<div class="system-details">
|
|
<div class="what-it-does">
|
|
<h4>Was es tut:</h4>
|
|
<ul>
|
|
<li>Website-Besucher verstehen</li>
|
|
<li>Kategorisierung der Anfragen</li>
|
|
<li>Strukturierte Datenerfassung</li>
|
|
<li>Übergabe an menschliche Mitarbeiter</li>
|
|
</ul>
|
|
</div>
|
|
<div class="result">
|
|
<h4>Ergebnis:</h4>
|
|
<ul>
|
|
<li>+38% Konversionsrate</li>
|
|
<li>0 Wartezeit</li>
|
|
<li>Strukturierte Leads</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interne KI -->
|
|
<div class="system-card" data-system="internal">
|
|
<div class="system-visual">
|
|
<div class="internal-system">
|
|
<div class="search-input">🔍</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="documents-cloud">💬</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="ki-processor">🤖</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="answer-output">💡</div>
|
|
</div>
|
|
</div>
|
|
<h3>Interne KI</h3>
|
|
<div class="system-details">
|
|
<div class="what-it-does">
|
|
<h4>Was es tut:</h4>
|
|
<ul>
|
|
<li>Interne Dokumente analysieren</li>
|
|
<li>Mitarbeiterfragen beantworten</li>
|
|
<li>Wissen zentralisieren</li>
|
|
<li>Training neuer Mitarbeiter</li>
|
|
</ul>
|
|
</div>
|
|
<div class="result">
|
|
<h4>Ergebnis:</h4>
|
|
<ul>
|
|
<li>-67% Suchzeit</li>
|
|
<li>100% Wissensverfügbarkeit</li>
|
|
<li>Schnellere Einarbeitung</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Nicht für jeden Section -->
|
|
<section class="qualification-section" id="qualification">
|
|
<div class="container">
|
|
<div class="qualification-grid">
|
|
<div class="qual-left">
|
|
<h3>Nicht geeignet wenn...</h3>
|
|
<ul class="qual-list negative">
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Nur eine "schöne Website" gewollt</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Keine digitalen Prozesse vorhanden</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Technik-Aversion im Team</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Keine Notwendigkeit zur Skalierung</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="qual-right">
|
|
<h3>Sehr sinnvoll wenn...</h3>
|
|
<ul class="qual-list positive">
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Hoher Anrufaufkommen</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Überlasteter Support</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Wachsendes Unternehmen</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Prozessoptimierung gewünscht</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3 Schritte Section -->
|
|
<section class="process-section" id="process">
|
|
<div class="container">
|
|
<h2 class="section-headline">In 3 Schritten zum digitalen Mitarbeiter.</h2>
|
|
|
|
<div class="process-line" id="processLine">
|
|
<div class="process-step active" data-step="1">
|
|
<div class="step-circle">1</div>
|
|
<div class="step-label">Analyse</div>
|
|
</div>
|
|
<div class="process-connector" id="connector1"></div>
|
|
<div class="process-step" data-step="2">
|
|
<div class="step-circle">2</div>
|
|
<div class="step-label">Bau</div>
|
|
</div>
|
|
<div class="process-connector" id="connector2"></div>
|
|
<div class="process-step" data-step="3">
|
|
<div class="step-circle">3</div>
|
|
<div class="step-label">Betrieb</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-details">
|
|
<div class="step-detail" data-step-detail="1">
|
|
<h3>1. Analyse</h3>
|
|
<p>Wir verstehen eure aktuellen Prozesse, identifizieren Automatisierungspotenziale und definieren klare Ziele.</p>
|
|
</div>
|
|
<div class="step-detail" data-step-detail="2">
|
|
<h3>2. Bau</h3>
|
|
<p>Entwicklung der KI-Systeme, Integration in bestehende Tools und umfangreiche Tests.</p>
|
|
</div>
|
|
<div class="step-detail" data-step-detail="3">
|
|
<h3>3. Betrieb</h3>
|
|
<p>Go-live, Monitoring, kontinuierliche Optimierung und Schulung eures Teams.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ergebnisse Section -->
|
|
<section class="results-section" id="results">
|
|
<div class="container">
|
|
<h2 class="section-headline">Messbare Ergebnisse</h2>
|
|
|
|
<div class="results-grid">
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">-52%</div>
|
|
<div class="card-label">Unnötige Anrufe</div>
|
|
<div class="card-detail">Durch KI-Vorfilterung</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">24/7</div>
|
|
<div class="card-label">Automatisierte Antworten</div>
|
|
<div class="card-detail">Ohne Ausfallzeiten</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">+38%</div>
|
|
<div class="card-label">Konversionsrate</div>
|
|
<div class="card-detail">Durch sofortige Reaktion</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">-67%</div>
|
|
<div class="card-label">Suchzeit intern</div>
|
|
<div class="card-detail">Durch Wissens-KI</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">0</div>
|
|
<div class="card-label">Wartezeit</div>
|
|
<div class="card-detail">Sofortige Verfügbarkeit</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">100%</div>
|
|
<div class="card-label">Wissensverfügbarkeit</div>
|
|
<div class="card-detail">Im gesamten Team</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interaction Section -->
|
|
<section class="interaction-section" id="interaction">
|
|
<div class="container">
|
|
<h2 class="section-headline">Sprich nicht mit uns. Sprich mit unserem System.</h2>
|
|
|
|
<div class="interaction-cards">
|
|
<div class="interaction-card" id="phoneInteraction">
|
|
<div class="card-visual">
|
|
<div class="microphone">
|
|
<div class="mic-icon">🎤</div>
|
|
<div class="pulse-ring"></div>
|
|
</div>
|
|
</div>
|
|
<h3>KI Telefon</h3>
|
|
<p>Teste unseren KI-Telefonassistenten jetzt</p>
|
|
<button class="interaction-btn primary">Jetzt anrufen</button>
|
|
</div>
|
|
|
|
<div class="interaction-card" id="chatInteraction">
|
|
<h3>KI Chat</h3>
|
|
<p>Starte eine Konversation mit unserer KI</p>
|
|
<div class="card-visual">
|
|
<div class="chat-window">
|
|
<div class="chat-header">KI Support</div>
|
|
<div class="chat-messages">
|
|
</div>
|
|
<div class="chat-input-container">
|
|
<input type="text" class="chat-input" placeholder="Ihre Nachricht..." maxlength="500">
|
|
<button class="chat-send" type="button">
|
|
<img src="images/icons/iconography-02.png" alt="Senden">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Banner -->
|
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
|
<style>
|
|
.footer-banner a { color: white !important; }
|
|
</style>
|
|
<div class="footer-container">
|
|
<div class="footer-content">
|
|
<!-- Company Info Section -->
|
|
<div class="footer-section">
|
|
<div class="footer-description">
|
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links Section -->
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">Services</h4>
|
|
<nav class="footer-nav">
|
|
<a href="#systeme" class="footer-link">KI Systeme</a>
|
|
<a href="#interaction" class="footer-link">Demo</a>
|
|
<a href="sites/offers.html" class="footer-link">Kontakt</a>
|
|
<a href="sites/leads.html" class="footer-link">Dashboard</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Legal Section -->
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">Rechtliches</h4>
|
|
<nav class="footer-nav">
|
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
|
<a href="#" class="footer-link">Impressum</a>
|
|
<a href="#" class="footer-link">AGB</a>
|
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Contact Section -->
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">Kontakt</h4>
|
|
<div class="footer-contact">
|
|
<div class="contact-item">
|
|
<span class="contact-icon">📞</span>
|
|
<span>+49 123 456789</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<span class="contact-icon">✉️</span>
|
|
<span>info@profice.de</span>
|
|
</div>
|
|
</div>
|
|
<div class="social-media">
|
|
<div class="social-icons">
|
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
|
<img src="images/icons/instagram.png" alt="Instagram" width="40" height="40">
|
|
</a>
|
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
|
<img src="images/icons/facebook.png" alt="Facebook" width="40" height="40">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<div class="footer-bottom-content">
|
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
|
<div class="footer-bottom-links">
|
|
<a href="#" class="footer-link">Datenschutz</a>
|
|
<span class="separator">•</span>
|
|
<a href="#" class="footer-link">Impressum</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Debug Section (remove for production) -->
|
|
<div id="debug-panel" style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.9); color: white; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; z-index: 9999; max-width: 300px; display: none;">
|
|
<h4 style="margin: 0 0 10px 0;">Debug Panel</h4>
|
|
<button onclick="testPHP()" style="background: #007bff; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test PHP</button>
|
|
<button onclick="testForm()" style="background: #28a745; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test Form</button>
|
|
<button onclick="toggleDebug()" style="background: #dc3545; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Hide</button>
|
|
<div id="debug-output" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></div>
|
|
</div>
|
|
|
|
<!-- Debug Toggle Button -->
|
|
<button id="debug-toggle" onclick="toggleDebug()" style="position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white; border: none; padding: 10px; border-radius: 50%; cursor: pointer; z-index: 9998; width: 40px; height: 40px; font-weight: bold;">?</button>
|
|
|
|
<!-- Optimized script loading -->
|
|
<script src="scripts/script.js" defer></script>
|
|
<script src="scripts/tech-onepager.js" defer></script>
|
|
<script src="scripts/cursor.js" defer></script>
|
|
<script src="scripts/scroll-header.min.js" defer></script>
|
|
<script src="scripts/chat.js" defer></script>
|
|
|
|
<!-- Debug Script -->
|
|
<script>
|
|
function toggleDebug() {
|
|
const panel = document.getElementById('debug-panel');
|
|
const toggle = document.getElementById('debug-toggle');
|
|
if (panel.style.display === 'none') {
|
|
panel.style.display = 'block';
|
|
toggle.style.display = 'none';
|
|
} else {
|
|
panel.style.display = 'none';
|
|
toggle.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function logDebug(message, isError = false) {
|
|
const output = document.getElementById('debug-output');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const color = isError ? '#ff6b6b' : '#51cf66';
|
|
output.innerHTML += `<div style="color: ${color};">[${timestamp}] ${message}</div>`;
|
|
output.scrollTop = output.scrollHeight;
|
|
}
|
|
|
|
async function testPHP() {
|
|
logDebug('Testing PHP connection...');
|
|
try {
|
|
const response = await fetch('scripts/add/test.php');
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
logDebug(`✓ PHP OK: ${result.message}`);
|
|
logDebug(`PHP Version: ${result.server_info?.php_version || 'Unknown'}`);
|
|
} else {
|
|
logDebug(`✗ PHP Error: HTTP ${response.status}`, true);
|
|
}
|
|
} catch (error) {
|
|
logDebug(`✗ PHP Failed: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
async function testForm() {
|
|
logDebug('Testing contact form...');
|
|
try {
|
|
const response = await fetch('scripts/add/send.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
type: 'contact',
|
|
name: 'Debug Test',
|
|
contact: 'test@example.com',
|
|
service: 'website',
|
|
description: 'Debug test submission'
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
logDebug('✓ Form submission successful');
|
|
logDebug(`Webhook: ${result.data?.webhook_result?.success ? 'OK' : 'Failed'}`);
|
|
} else {
|
|
logDebug(`✗ Form failed: ${result.message}`, true);
|
|
}
|
|
} else {
|
|
logDebug(`✗ Form Error: HTTP ${response.status}`, true);
|
|
}
|
|
} catch (error) {
|
|
logDebug(`✗ Form Failed: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
// Auto-test on load
|
|
window.addEventListener('load', () => {
|
|
setTimeout(() => {
|
|
logDebug('Debug panel ready - Click ? button to show');
|
|
testPHP();
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|