updates

static/index.html

@@ -293,6 +293,8 @@
                 >
                   Submit
                 </button>
+
+                <div class="error mt-3">Something went wrong. Please try again.</div>
               </form>
 
               <div class="how-it-works">
@@ -350,6 +352,8 @@
                 >
                   Submit
                 </button>
+
+                <div class="error mt-3">Something went wrong. Please try again.</div>
               </form>
               <div class="how-it-works">
                 <p><strong>How it works</strong></p>
@@ -494,6 +498,7 @@
           .setAttribute("src", fileReader.result);
       };
 
+      document.querySelector('.display-generate .error').style.display = "none";
       placeholder = document.querySelector(".display-verify .placeholder");
       spinner = document.querySelector(".display-verify .spinner");
 
@@ -600,6 +605,7 @@
         })
         .catch((error) => {
           console.log(error);
+          document.querySelector('.display-generate .error').style.display = "none";
           // Handle errors
         });
     }

static/style.css

@@ -124,15 +124,13 @@ textarea {
 label {
   font-size: 14px;
   font-weight: 600;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 label.form-check-label {
   font-weight: 400;
 }
 
-
-
 .display-verify {
   display: none;
 }
@@ -305,18 +303,19 @@ img.thumbnail {
   width: 156px;
 }
 
-.check-icon, .x-icon {
+.check-icon,
+.x-icon {
   width: 16px;
-    height: 16px;
-    display: inline-block;
+  height: 16px;
+  display: inline-block;
 }
 
 .check-icon {
-  background-image: url('images/check.svg');
+  background-image: url("images/check.svg");
 }
 
 .x-icon {
-  background-image: url('images/x.svg');
+  background-image: url("images/x.svg");
 }
 
 .btn-primary {
@@ -327,7 +326,9 @@ img.thumbnail {
   border-radius: 0;
 }
 
-.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary:focus {
   background-color: rgba(206, 206, 206, 1);
   border-color: rgba(206, 206, 206, 1);
   box-shadow: none !important;
@@ -341,10 +342,14 @@ img.thumbnail {
 .btn-primary.active:hover {
   background-color: #165ad9;
   border-color: #165ad9;
-  
 }
 
 .btn-primary.active:active {
   background-color: #1247b2;
   background-color: #1247b2;
-}
+}
+
+.error {
+  color: #d8394b;
+  display: none;
+}