add support for multiple domains

app/static/index.html

@@ -21,12 +21,12 @@
 	  </a>
         </p>
         <form class="text-gen-form">
-          <label for="text-gen-input">Check for a domain</label>
-          <input
+          <label for="text-gen-input">A list of domain names </label>
+	  <textarea
             id="text-gen-input"
             type="text"
-            value="www.google.com"
-          />
+	    value="www.google.com">
+	  </textarea>
           <button id="text-gen-submit">Submit</button>
           <p class="text-gen-output"></p>
         </form>

app/static/script.js

@@ -5,16 +5,27 @@ const translateText = async (text) => {
   const inferJson = await inferResponse.json();
   console.log(inferResponse);
   console.log(inferJson);
-  const res  = 'The probability of being DGA is : ' + inferJson.probability
+  const res = `domain:"${text}",probDGA:${inferJson.probability}`;
   return res
-
 };
 
+
 textGenForm.addEventListener("submit", async (event) => {
   event.preventDefault();
 
   const textGenInput = document.getElementById("text-gen-input");
   const textGenParagraph = document.querySelector(".text-gen-output");
 
-  textGenParagraph.textContent = await translateText(textGenInput.value);
+  // Split the inputted text into separate domains
+  const domains = textGenInput.value.trim().split('\n');
+  
+  let output = '';
+  
+  // Loop over each domain and submit it to the URL one at a time
+  for (let i = 0; i < domains.length; i++) {
+    output += await translateText(domains[i]) + '\n';
+  }
+  
+  textGenParagraph.textContent = output;
 });
+

app/static/style.css

@@ -1,20 +1,3 @@
-body {
-  --text: hsl(0 0% 15%);
-  padding: 2.5rem;
-  font-family: sans-serif;
-  color: var(--text);
-}
-
-body.dark-theme {
-  --text: hsl(0 0% 90%);
-  background-color: hsl(223 39% 7%);
-}
-
-main {
-  max-width: 80rem;
-  text-align: center;
-}
-
 section {
   display: flex;
   flex-direction: column;
@@ -30,16 +13,49 @@ form {
   margin: 0 auto;
 }
 
-input {
+input,
+textarea {
   width: 100%;
+  height: 8rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: vertical;
+  text-align: left;
+}
+
+label {
+  font-size: 1.2rem;
+  color: #777;
+  margin-top: 1rem;
 }
 
 button {
   cursor: pointer;
+  background-color: #4CAF50;
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 5px;
+  font-size: 1rem;
+  margin-top: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 2rem 0;
+  text-align: center;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #333;
 }
 
 .text-gen-output {
   min-height: 1.2rem;
   margin: 1rem;
-  border: 0.5px solid grey;
+  padding: 0.5rem;
+  border: 1px solid grey;
+  border-radius: 5px;
 }
+