481 lines
22 KiB
HTML
481 lines
22 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="robots" content="noindex, nofollow">
|
||
|
|
<title>Dashboard - BotKonzept</title>
|
||
|
|
|
||
|
|
<!-- Favicon -->
|
||
|
|
<link rel="icon" type="image/svg+xml" href="logo/20250119_Logo_Botkozept.svg">
|
||
|
|
|
||
|
|
<!-- Google Fonts -->
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- Font Awesome -->
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
|
|
|
||
|
|
<!-- Custom CSS -->
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<link rel="stylesheet" href="css/dashboard.css">
|
||
|
|
</head>
|
||
|
|
<body class="dashboard-body">
|
||
|
|
<!-- Dashboard Navigation -->
|
||
|
|
<nav class="dashboard-nav">
|
||
|
|
<div class="nav-brand">
|
||
|
|
<a href="index.html" class="logo">
|
||
|
|
<img src="logo/20250119_Logo_Botkozept.svg" alt="BotKonzept Logo">
|
||
|
|
<span>BotKonzept</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="nav-user">
|
||
|
|
<div class="trial-badge" id="trialBadge">
|
||
|
|
<i class="fas fa-clock"></i>
|
||
|
|
<span>Trial: <strong id="trialDays">7</strong> Tage übrig</span>
|
||
|
|
</div>
|
||
|
|
<div class="user-menu">
|
||
|
|
<button class="user-btn" id="userMenuBtn">
|
||
|
|
<div class="user-avatar">
|
||
|
|
<i class="fas fa-user"></i>
|
||
|
|
</div>
|
||
|
|
<span id="userName">Max Mustermann</span>
|
||
|
|
<i class="fas fa-chevron-down"></i>
|
||
|
|
</button>
|
||
|
|
<div class="user-dropdown" id="userDropdown">
|
||
|
|
<a href="#settings"><i class="fas fa-cog"></i> Einstellungen</a>
|
||
|
|
<a href="#billing"><i class="fas fa-credit-card"></i> Abrechnung</a>
|
||
|
|
<a href="#support"><i class="fas fa-life-ring"></i> Support</a>
|
||
|
|
<hr>
|
||
|
|
<a href="index.html" class="logout"><i class="fas fa-sign-out-alt"></i> Abmelden</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Dashboard Layout -->
|
||
|
|
<div class="dashboard-layout">
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<aside class="dashboard-sidebar">
|
||
|
|
<nav class="sidebar-nav">
|
||
|
|
<a href="#overview" class="nav-item active" data-section="overview">
|
||
|
|
<i class="fas fa-home"></i>
|
||
|
|
<span>Übersicht</span>
|
||
|
|
</a>
|
||
|
|
<a href="#documents" class="nav-item" data-section="documents">
|
||
|
|
<i class="fas fa-file-pdf"></i>
|
||
|
|
<span>Dokumente</span>
|
||
|
|
</a>
|
||
|
|
<a href="#chatbot" class="nav-item" data-section="chatbot">
|
||
|
|
<i class="fas fa-robot"></i>
|
||
|
|
<span>Chatbot</span>
|
||
|
|
</a>
|
||
|
|
<a href="#embed" class="nav-item" data-section="embed">
|
||
|
|
<i class="fas fa-code"></i>
|
||
|
|
<span>Einbinden</span>
|
||
|
|
</a>
|
||
|
|
<a href="#analytics" class="nav-item" data-section="analytics">
|
||
|
|
<i class="fas fa-chart-line"></i>
|
||
|
|
<span>Analytics</span>
|
||
|
|
</a>
|
||
|
|
<a href="#settings" class="nav-item" data-section="settings">
|
||
|
|
<i class="fas fa-cog"></i>
|
||
|
|
<span>Einstellungen</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Upgrade CTA -->
|
||
|
|
<div class="sidebar-cta">
|
||
|
|
<div class="cta-icon">
|
||
|
|
<i class="fas fa-crown"></i>
|
||
|
|
</div>
|
||
|
|
<h4>Upgrade auf Starter</h4>
|
||
|
|
<p>Unbegrenzte Dokumente & mehr Features</p>
|
||
|
|
<a href="#upgrade" class="btn btn-primary btn-sm btn-block">
|
||
|
|
<span class="discount-badge">30% Rabatt</span>
|
||
|
|
Jetzt upgraden
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="dashboard-main">
|
||
|
|
<!-- Overview Section -->
|
||
|
|
<section id="overview" class="dashboard-section active">
|
||
|
|
<div class="section-header">
|
||
|
|
<h1>Willkommen zurück! 👋</h1>
|
||
|
|
<p>Hier ist eine Übersicht Ihres Chatbots</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Stats Cards -->
|
||
|
|
<div class="stats-grid">
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-icon blue">
|
||
|
|
<i class="fas fa-file-pdf"></i>
|
||
|
|
</div>
|
||
|
|
<div class="stat-content">
|
||
|
|
<span class="stat-value" id="docCount">0</span>
|
||
|
|
<span class="stat-label">Dokumente</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-icon green">
|
||
|
|
<i class="fas fa-comments"></i>
|
||
|
|
</div>
|
||
|
|
<div class="stat-content">
|
||
|
|
<span class="stat-value" id="messageCount">0</span>
|
||
|
|
<span class="stat-label">Nachrichten</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-icon purple">
|
||
|
|
<i class="fas fa-users"></i>
|
||
|
|
</div>
|
||
|
|
<div class="stat-content">
|
||
|
|
<span class="stat-value" id="visitorCount">0</span>
|
||
|
|
<span class="stat-label">Besucher</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-icon orange">
|
||
|
|
<i class="fas fa-check-circle"></i>
|
||
|
|
</div>
|
||
|
|
<div class="stat-content">
|
||
|
|
<span class="stat-value" id="satisfactionRate">-</span>
|
||
|
|
<span class="stat-label">Zufriedenheit</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Quick Actions -->
|
||
|
|
<div class="quick-actions">
|
||
|
|
<h2>Schnellstart</h2>
|
||
|
|
<div class="actions-grid">
|
||
|
|
<a href="#documents" class="action-card" data-section="documents">
|
||
|
|
<div class="action-icon">
|
||
|
|
<i class="fas fa-upload"></i>
|
||
|
|
</div>
|
||
|
|
<h3>PDF hochladen</h3>
|
||
|
|
<p>Fügen Sie neue Dokumente zu Ihrer Wissensdatenbank hinzu</p>
|
||
|
|
</a>
|
||
|
|
<a href="#embed" class="action-card" data-section="embed">
|
||
|
|
<div class="action-icon">
|
||
|
|
<i class="fas fa-code"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Code kopieren</h3>
|
||
|
|
<p>Holen Sie sich den Embed-Code für Ihre Website</p>
|
||
|
|
</a>
|
||
|
|
<a href="#chatbot" class="action-card" data-section="chatbot">
|
||
|
|
<div class="action-icon">
|
||
|
|
<i class="fas fa-comment-dots"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Chatbot testen</h3>
|
||
|
|
<p>Testen Sie Ihren Chatbot live</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Trial Banner -->
|
||
|
|
<div class="trial-banner" id="trialBanner">
|
||
|
|
<div class="banner-content">
|
||
|
|
<div class="banner-icon">
|
||
|
|
<i class="fas fa-gift"></i>
|
||
|
|
</div>
|
||
|
|
<div class="banner-text">
|
||
|
|
<h3>🎉 Exklusives Angebot: 30% Frühbucher-Rabatt!</h3>
|
||
|
|
<p>Upgraden Sie jetzt und sparen Sie €176,40 im ersten Jahr. Angebot endet in <strong id="offerCountdown">48:00:00</strong></p>
|
||
|
|
</div>
|
||
|
|
<a href="#upgrade" class="btn btn-primary">
|
||
|
|
Jetzt für €34,30/Monat upgraden
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Documents Section -->
|
||
|
|
<section id="documents" class="dashboard-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h1>Dokumente</h1>
|
||
|
|
<p>Verwalten Sie Ihre Wissensdatenbank</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Upload Area -->
|
||
|
|
<div class="upload-area" id="uploadArea">
|
||
|
|
<div class="upload-content">
|
||
|
|
<div class="upload-icon">
|
||
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
||
|
|
</div>
|
||
|
|
<h3>PDF-Dateien hochladen</h3>
|
||
|
|
<p>Ziehen Sie Dateien hierher oder klicken Sie zum Auswählen</p>
|
||
|
|
<input type="file" id="fileInput" accept=".pdf" multiple hidden>
|
||
|
|
<button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
|
||
|
|
<i class="fas fa-plus"></i> Dateien auswählen
|
||
|
|
</button>
|
||
|
|
<p class="upload-hint">Unterstützt: PDF (max. 10MB pro Datei)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Upload Progress -->
|
||
|
|
<div class="upload-progress" id="uploadProgress" style="display: none;">
|
||
|
|
<div class="progress-header">
|
||
|
|
<span>Wird hochgeladen...</span>
|
||
|
|
<span id="uploadPercent">0%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" id="progressFill"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Documents List -->
|
||
|
|
<div class="documents-list">
|
||
|
|
<div class="list-header">
|
||
|
|
<h2>Hochgeladene Dokumente</h2>
|
||
|
|
<span class="doc-count" id="totalDocs">0 Dokumente</span>
|
||
|
|
</div>
|
||
|
|
<div class="documents-table" id="documentsTable">
|
||
|
|
<div class="empty-state">
|
||
|
|
<i class="fas fa-folder-open"></i>
|
||
|
|
<h3>Noch keine Dokumente</h3>
|
||
|
|
<p>Laden Sie Ihr erstes PDF hoch, um zu beginnen</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Chatbot Section -->
|
||
|
|
<section id="chatbot" class="dashboard-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h1>Chatbot testen</h1>
|
||
|
|
<p>Testen Sie Ihren Chatbot mit Ihren hochgeladenen Dokumenten</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chatbot-test-container">
|
||
|
|
<div class="chat-window">
|
||
|
|
<div class="chat-header">
|
||
|
|
<div class="chat-avatar">
|
||
|
|
<i class="fas fa-robot"></i>
|
||
|
|
</div>
|
||
|
|
<div class="chat-info">
|
||
|
|
<span class="chat-name">Ihr Chatbot</span>
|
||
|
|
<span class="chat-status"><i class="fas fa-circle"></i> Online</span>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-sm btn-outline" id="clearChat">
|
||
|
|
<i class="fas fa-trash"></i> Leeren
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="chat-messages" id="chatMessages">
|
||
|
|
<div class="message bot">
|
||
|
|
<p>Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen helfen?</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chat-input-area">
|
||
|
|
<input type="text" id="chatInput" placeholder="Stellen Sie eine Frage...">
|
||
|
|
<button class="send-btn" id="sendBtn">
|
||
|
|
<i class="fas fa-paper-plane"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chat-tips">
|
||
|
|
<h3>💡 Tipps</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Stellen Sie Fragen zu Ihren hochgeladenen Dokumenten</li>
|
||
|
|
<li>Der Bot antwortet basierend auf Ihrer Wissensdatenbank</li>
|
||
|
|
<li>Je mehr Dokumente, desto besser die Antworten</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Embed Section -->
|
||
|
|
<section id="embed" class="dashboard-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h1>Chatbot einbinden</h1>
|
||
|
|
<p>Integrieren Sie den Chatbot in Ihre Website</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="embed-container">
|
||
|
|
<!-- Embed Code -->
|
||
|
|
<div class="embed-card">
|
||
|
|
<h2><i class="fas fa-code"></i> Embed-Code</h2>
|
||
|
|
<p>Kopieren Sie diesen Code und fügen Sie ihn vor dem <code></body></code>-Tag Ihrer Website ein:</p>
|
||
|
|
|
||
|
|
<div class="code-block">
|
||
|
|
<pre id="embedCode"><script src="https://botkonzept.de/embed/<span id="customerId">IHRE-ID</span>.js"></script></pre>
|
||
|
|
<button class="copy-btn" onclick="copyEmbedCode()">
|
||
|
|
<i class="fas fa-copy"></i> Kopieren
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="copy-success" id="copySuccess" style="display: none;">
|
||
|
|
<i class="fas fa-check"></i> Code kopiert!
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Webhook URLs -->
|
||
|
|
<div class="embed-card">
|
||
|
|
<h2><i class="fas fa-link"></i> API-Endpunkte</h2>
|
||
|
|
<p>Für fortgeschrittene Integrationen:</p>
|
||
|
|
|
||
|
|
<div class="endpoint-list">
|
||
|
|
<div class="endpoint-item">
|
||
|
|
<label>Chat-Webhook:</label>
|
||
|
|
<div class="endpoint-url">
|
||
|
|
<code id="chatWebhook">https://sb-XXXXX.userman.de/webhook/rag-chat-webhook/chat</code>
|
||
|
|
<button class="copy-btn-sm" onclick="copyToClipboard('chatWebhook')">
|
||
|
|
<i class="fas fa-copy"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="endpoint-item">
|
||
|
|
<label>Upload-Formular:</label>
|
||
|
|
<div class="endpoint-url">
|
||
|
|
<code id="uploadUrl">https://sb-XXXXX.userman.de/form/rag-upload-form</code>
|
||
|
|
<button class="copy-btn-sm" onclick="copyToClipboard('uploadUrl')">
|
||
|
|
<i class="fas fa-copy"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Installation Guide -->
|
||
|
|
<div class="embed-card">
|
||
|
|
<h2><i class="fas fa-book"></i> Installationsanleitung</h2>
|
||
|
|
|
||
|
|
<div class="install-steps">
|
||
|
|
<div class="install-step">
|
||
|
|
<div class="step-num">1</div>
|
||
|
|
<div class="step-content">
|
||
|
|
<h4>Code kopieren</h4>
|
||
|
|
<p>Klicken Sie auf "Kopieren" um den Embed-Code in die Zwischenablage zu kopieren.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="install-step">
|
||
|
|
<div class="step-num">2</div>
|
||
|
|
<div class="step-content">
|
||
|
|
<h4>In Website einfügen</h4>
|
||
|
|
<p>Fügen Sie den Code vor dem schließenden <code></body></code>-Tag ein.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="install-step">
|
||
|
|
<div class="step-num">3</div>
|
||
|
|
<div class="step-content">
|
||
|
|
<h4>Fertig!</h4>
|
||
|
|
<p>Der Chatbot erscheint automatisch unten rechts auf Ihrer Website.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="platform-guides">
|
||
|
|
<h4>Plattform-spezifische Anleitungen:</h4>
|
||
|
|
<div class="platform-links">
|
||
|
|
<a href="#" class="platform-link">
|
||
|
|
<i class="fab fa-wordpress"></i> WordPress
|
||
|
|
</a>
|
||
|
|
<a href="#" class="platform-link">
|
||
|
|
<i class="fab fa-shopify"></i> Shopify
|
||
|
|
</a>
|
||
|
|
<a href="#" class="platform-link">
|
||
|
|
<i class="fab fa-wix"></i> Wix
|
||
|
|
</a>
|
||
|
|
<a href="#" class="platform-link">
|
||
|
|
<i class="fab fa-squarespace"></i> Squarespace
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Analytics Section -->
|
||
|
|
<section id="analytics" class="dashboard-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h1>Analytics</h1>
|
||
|
|
<p>Verstehen Sie, wie Besucher mit Ihrem Chatbot interagieren</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="analytics-placeholder">
|
||
|
|
<div class="placeholder-icon">
|
||
|
|
<i class="fas fa-chart-bar"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Analytics verfügbar im Starter-Plan</h3>
|
||
|
|
<p>Upgraden Sie, um detaillierte Statistiken zu sehen:</p>
|
||
|
|
<ul>
|
||
|
|
<li><i class="fas fa-check"></i> Häufigste Fragen</li>
|
||
|
|
<li><i class="fas fa-check"></i> Antwortqualität</li>
|
||
|
|
<li><i class="fas fa-check"></i> Besucherstatistiken</li>
|
||
|
|
<li><i class="fas fa-check"></i> Conversion-Tracking</li>
|
||
|
|
</ul>
|
||
|
|
<a href="#upgrade" class="btn btn-primary">
|
||
|
|
<i class="fas fa-crown"></i> Jetzt upgraden
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Settings Section -->
|
||
|
|
<section id="settings" class="dashboard-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h1>Einstellungen</h1>
|
||
|
|
<p>Passen Sie Ihren Chatbot an</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="settings-grid">
|
||
|
|
<!-- Appearance Settings -->
|
||
|
|
<div class="settings-card">
|
||
|
|
<h2><i class="fas fa-palette"></i> Erscheinungsbild</h2>
|
||
|
|
|
||
|
|
<div class="setting-group">
|
||
|
|
<label>Primärfarbe</label>
|
||
|
|
<div class="color-picker">
|
||
|
|
<input type="color" id="primaryColor" value="#6366f1">
|
||
|
|
<span>#6366f1</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-group">
|
||
|
|
<label>Chatbot-Name</label>
|
||
|
|
<input type="text" id="botName" value="Assistent" placeholder="z.B. Support-Bot">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-group">
|
||
|
|
<label>Begrüßungsnachricht</label>
|
||
|
|
<textarea id="welcomeMessage" rows="3">Hallo! Wie kann ich Ihnen helfen?</textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="btn btn-primary" onclick="saveSettings()">
|
||
|
|
<i class="fas fa-save"></i> Speichern
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Account Settings -->
|
||
|
|
<div class="settings-card">
|
||
|
|
<h2><i class="fas fa-user"></i> Konto</h2>
|
||
|
|
|
||
|
|
<div class="setting-group">
|
||
|
|
<label>E-Mail</label>
|
||
|
|
<input type="email" id="accountEmail" value="max@beispiel.de" disabled>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-group">
|
||
|
|
<label>Plan</label>
|
||
|
|
<div class="plan-info">
|
||
|
|
<span class="plan-badge trial">Trial</span>
|
||
|
|
<span>Endet am <strong id="trialEndDate">01.02.2025</strong></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="#upgrade" class="btn btn-outline btn-block">
|
||
|
|
<i class="fas fa-crown"></i> Plan upgraden
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
<script src="js/dashboard.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|