Update templates/index.html

templates/index.html

@@ -12,53 +12,51 @@
         <form id="scrapeForm">
             <div class="form-group">
                 <label for="url">Website URL:</label>
-                <input type="url" id="url" name="url" placeholder="https://example.com" required>
+                <input type="url" id="url" name="url" required placeholder="https://example.com">
             </div>
             <div class="form-group">
-                <label for="bot_name">Bot Name:</label>
-                <input type="text" id="bot_name" name="bot_name" placeholder="MyDemoBot">
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email" required placeholder="your.email@example.com">
             </div>
             <div class="form-group">
-                <label for="nativemsg_token">NativeMSG API Token:</label>
-                <input type="password" id="nativemsg_token" name="nativemsg_token" placeholder="Enter your token">
+                <label for="botName">Bot Name:</label>
+                <input type="text" id="botName" name="botName" placeholder="Enter Bot Name">
+            </div>
+            <div class="form-group">
+                <label for="apiToken">NativeMSG API Token:</label>
+                <input type="password" id="apiToken" name="apiToken" placeholder="Enter NativeMSG Tokens">
             </div>
             <button type="submit">Scrape Website</button>
         </form>
 
-        <h2>Scraped Data</h2>
-        <textarea id="response" readonly></textarea>
+        <div id="result">
+            <h2>Result</h2>
+            <div id="message"></div>
+        </div>
     </div>
 
     <script>
-        document.getElementById('scrapeForm').addEventListener('submit', async (event) => {
-            event.preventDefault();
-
+        document.getElementById('scrapeForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
             const url = document.getElementById('url').value;
-            const bot_name = document.getElementById('bot_name').value || undefined;
-            const nativemsg_token = document.getElementById('nativemsg_token').value || undefined;
-            const responseArea = document.getElementById('response');
+            const email = document.getElementById('email').value;
+            const botName = document.getElementById('botName').value;
+            const apiToken = document.getElementById('apiToken').value;
+            const messageDiv = document.getElementById('message');
 
-            responseArea.value = 'Loading...';
+            messageDiv.textContent = 'Scraping in progress...';
 
             try {
-                const queryParams = new URLSearchParams({ url, use_sample: false });
-                if (bot_name) queryParams.append('bot_name', bot_name);
-                if (nativemsg_token) queryParams.append('nativemsg_token', nativemsg_token);
-
-                const response = await fetch(`/scrape?${queryParams.toString()}`, {
-                    method: 'GET',
-                    headers: { 'Content-Type': 'application/json' }
-                });
-
+                const response = await fetch(`/scrape?url=${encodeURIComponent(url)}&email=${encodeURIComponent(email)}${botName ? `&bot_name=${encodeURIComponent(botName)}` : ''}${apiToken ? `&nativemsg_token=${encodeURIComponent(apiToken)}` : ''}`);
                 if (!response.ok) {
                     throw new Error(`HTTP error! Status: ${response.status}`);
                 }
-
                 const data = await response.json();
-                responseArea.value = JSON.stringify(data, null, 2);
+                messageDiv.textContent = `RCS for website is generated and sent to ${email}.`;
+                messageDiv.style.color = 'green';
             } catch (error) {
-                console.error('Error:', error);
-                responseArea.value = `Error: ${error.message}`;
+                messageDiv.textContent = `Error: ${error.message}`;
+                messageDiv.style.color = 'red';
             }
         });
     </script>