cleaned up
This commit is contained in:
622
Profice WebSite/index.html
Normal file
622
Profice WebSite/index.html
Normal file
@@ -0,0 +1,622 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user