updates

static/index.html

@@ -57,10 +57,16 @@
             </div>
           </div>
           <div class="col right-column">
-            <div class="alert alert-secondary" role="alert">
+            <div class="alert alert-primary" role="alert">
               <h4>Support our work!</h4>
-              <p>Like this Space in the nav above</p>
-              <p>Joining the conversation in the Community tab</p>
+              <p>
+                <img src="images/heart_icon.svg" /> Like this Space in the nav
+                above
+              </p>
+              <p>
+                <img src="images/wave_icon.svg" /> Joining the conversation in
+                the Community tab
+              </p>
             </div>
           </div>
         </div>
@@ -131,6 +137,7 @@
                   style="display: none"
                 />
               </div>
+              <div class="output-container" style="display:none;">
               <h3>Verification Output</h3>
               <div id="verification-output"></div>
 
@@ -217,6 +224,7 @@
                 </div>
               </div>
             </div>
+            </div>
           </div>
           <div class="col right-column">
             <div class="display-generate">
@@ -260,33 +268,35 @@
                 <button type="submit" class="btn btn-primary">Submit</button>
               </form>
 
-              <h3>How it works</h3>
+              <div class="how-it-works">
+                <p><strong>How it works</strong></p>
 
-              <p>
-                Images are generated using a hosted model and AI disclosure is
-                added to the file. This information, referred to as Content
-                Credentials, serves as a nutrition label for the content. We
-                employ the tamper-evident open C2PA standard, which utilizes PKI
-                and is resistant to forgery. You can download and transfer the
-                image to supported editing tools like Photoshop, where your edit
-                history can also be securely added to the file. This historical
-                information, known as provenance, accompanies your media and can
-                be extracted and displayed using a tool or website.
-              </p>
-              <p>Want to know more? Read our community blog post.</p>
+                <p>
+                  Images are generated using a hosted model and AI disclosure is
+                  added to the file. This information, referred to as Content
+                  Credentials, serves as a nutrition label for the content. We
+                  employ the tamper-evident open C2PA standard, which utilizes
+                  PKI and is resistant to forgery. You can download and transfer
+                  the image to supported editing tools like Photoshop, where
+                  your edit history can also be securely added to the file. This
+                  historical information, known as provenance, accompanies your
+                  media and can be extracted and displayed using a tool or
+                  website.
+                </p>
+                <p>Want to know more? Read our community blog post.</p>
+              </div>
             </div>
             <div class="display-verify">
               <form class="verify-upload-form" enctype="multipart/form-data">
                 <div class="form-group mb-3">
                   <label>Upload image</label>
-                  <div class="custom-select">
-                    <input
-                      type="file"
-                      class="form-control"
-                      name="fileUpload"
-                      id="fileUpload"
-                    />
-                  </div>
+
+                  <input
+                    type="file"
+                    class="form-control"
+                    name="fileUpload"
+                    id="fileUpload"
+                  />
                 </div>
 
                 <div class="form-check mb-3">
@@ -304,21 +314,23 @@
 
                 <button type="submit" class="btn btn-primary">Submit</button>
               </form>
+              <div class="how-it-works">
+                <p><strong>How it works</strong></p>
 
-              <h3>How it works</h3>
-
-              <p>
-                Images are generated using a hosted model and AI disclosure is
-                added to the file. This information, referred to as Content
-                Credentials, serves as a nutrition label for the content. We
-                employ the tamper-evident open C2PA standard, which utilizes PKI
-                and is resistant to forgery. You can download and transfer the
-                image to supported editing tools like Photoshop, where your edit
-                history can also be securely added to the file. This historical
-                information, known as provenance, accompanies your media and can
-                be extracted and displayed using a tool or website.
-              </p>
-              <p>Want to know more? Read our community blog post.</p>
+                <p>
+                  Images are generated using a hosted model and AI disclosure is
+                  added to the file. This information, referred to as Content
+                  Credentials, serves as a nutrition label for the content. We
+                  employ the tamper-evident open C2PA standard, which utilizes
+                  PKI and is resistant to forgery. You can download and transfer
+                  the image to supported editing tools like Photoshop, where
+                  your edit history can also be securely added to the file. This
+                  historical information, known as provenance, accompanies your
+                  media and can be extracted and displayed using a tool or
+                  website.
+                </p>
+                <p>Want to know more? Read our community blog post.</p>
+              </div>
             </div>
           </div>
         </div>
@@ -349,8 +361,9 @@
     );
     const verificationOutput = document.getElementById("verification-output");
     const certificateList = document.getElementById("certificate-list");
-    var certificates = [];
+    const outputContainer = document.getElementById("output-container");
 
+    var certificates = [];
 
     generateTab.addEventListener("click", (event) => {
       event.target.classList.add("active");
@@ -414,6 +427,8 @@
         document.getElementById("result").remove(); // JCL make sure to remove the correct one
       spinner.style.display = "block";
 
+      outputContainer.style.display = "none";
+
       const formData = new FormData(uploadForm);
 
       // Add additional form data as needed
@@ -491,6 +506,8 @@
             truepicDisplay.appendChild(truepic);
 
             verifyImageContainer.appendChild(truepicDisplay);
+
+            outputContainer.style.display = "block";
           }
           // Handle response data
         })

static/style.css

@@ -22,6 +22,7 @@ p {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
+  color: #56687A;
 }
 
 .badge.bg-secondary {
@@ -140,4 +141,34 @@ img.thumbnail {
 .action-menu .btn:hover {
   background-color: transparent;
   color: var(--primary-color);
+}
+
+.alert-primary {
+  border-color: #FEF3C7;
+    background-color: rgba(254, 243, 199, 0.25);
+   
+}
+
+.alert-primary h4, .alert-primary p {
+  font-size: 14px;
+  color: #1F2937;
+}
+
+.alert-primary h4 {
+  font-weight: 600;
+}
+
+.alert-primary p {
+  margin-bottom: 0;
+}
+
+.how-it-works {
+  margin-top: 3rem;
+  font-size: 12px;
+  color: #56687A;
+}
+
+.how-it-works strong {
+  font-weight: 600;
+  color: black;
 }