updates

static/index.html

@@ -75,7 +75,7 @@
     <div class="container-fluid" id="body">
       <div class="container">
         <div class="row">
-          <div class="col">
+          <div class="col" style="min-width: 0; padding-right: 0">
             <div class="display-generate">
               <div class="image-container">
                 <img src="images/placeholder.png" class="placeholder" />
@@ -110,19 +110,25 @@
               </div>
             </div>
             <div class="display-verify">
-              <div class="row mt-5 pb-4" id="original-image">
-                <div class="col flex-grow-0">
-                  <img id="uploaded-image" class="thumbnail" />
+              <div id="original-image">
+                <div class="row mt-5">
+                  <div class="col mb-4">
+                    <h2>Uploaded image</h2>
+                  </div>
                 </div>
-                <div class="col">
-                  <strong>Uploaded image</strong><br />
-                  Content Credentials <span id="contentCredentialResults"></span
-                  ><br />
-                  Digital watermark <span id="digitalWatermarkResults"></span>
+                <div class="row pb-4">
+                  <div class="col flex-grow-0">
+                    <img id="uploaded-image" class="thumbnail" />
+                  </div>
+                  <div class="col">
+                    Content Credentials
+                    <span id="contentCredentialResults"></span><br />
+                    Digital watermark <span id="digitalWatermarkResults"></span>
+                  </div>
                 </div>
               </div>
               <div class="mt-3" id="resultLabel">
-                <strong>Result</strong>
+                <h2 class="mb-4">Result</h2>
                 <div
                   class="alert alert-secondary"
                   role="alert"
@@ -137,94 +143,94 @@
                   style="display: none"
                 />
               </div>
-              <div class="output-container" style="display:none;">
-              <h3>Verification Output</h3>
-              <div id="verification-output"></div>
-
-              <h3>Certificates</h3>
-              <div class="certificate" id="certificate-output">
-                <p>
-                  Details about the certificate used for signing.<br />
-                  Truepic maintains the first and only purpose-built C2PA
-                  certificate authority.
-                </p>
-
-                <p>
-                  <strong style="font-weight: 600">Certificate chain</strong>
-                </p>
-                <ul id="certificate-list"></ul>
-                <p><strong style="font-weight: 600">Details</strong></p>
-                <div class="details">
-                  <strong>Basic info</strong>
-                  <div>
-                    <label>Type</label>
-                    X.509 Certificate
-                  </div>
-                  <div>
-                    <label>Serial Number</label>
-                    <div class="serialNumber"></div>
-                  </div>
-                  <div>
-                    <label>Issued</label>
-                    <div class="issued"></div>
-                  </div>
-                  <div>
-                    <label>Expired</label>
-                    <div class="expired"></div>
-                  </div>
-                  <strong>Subject</strong>
-                  <div>
-                    <label>Common Name</label>
-                    <div class="subjectCommonName"></div>
-                  </div>
-                  <div>
-                    <label>Organization</label>
-                    <div class="subjectOrganization"></div>
-                  </div>
-                  <div>
-                    <label>Organization Unit</label>
-                    <div class="subjectOrganizationUnit"></div>
-                  </div>
-                  <div>
-                    <label>Country</label>
-                    <div class="subjectCountry"></div>
-                  </div>
-
-                  <strong>Issuer</strong>
-                  <div>
-                    <label>Common Name</label>
-                    <div class="issuerCommonName"></div>
-                  </div>
-                  <div>
-                    <label>Organization</label>
-                    <div class="issuerOrganization"></div>
-                  </div>
-                  <div>
-                    <label>Organization Unit</label>
-                    <div class="issuerOrganizationUnit"></div>
-                  </div>
-                  <div>
-                    <label>Country</label>
-                    <div class="issuerCountry"></div>
-                  </div>
-                  <strong>Public Key Info</strong>
-
-                  <div>
-                    <label>Algorithm</label>
-                    <div class="algorithm"></div>
-                  </div>
-                  <div id="modulusContainer">
-                    <label>Modulus</label>
-                    <div class="modulus"></div>
-                  </div>
-                  <div id="curveContainer">
-                    <label>Curve</label>
-                    <div class="namedCurve"></div>
+              <div class="output-container mt-5" style="display: none">
+                <h3>Verification Output</h3>
+                <div id="verification-output"></div>
+
+                <h3>Certificates</h3>
+                <div class="certificate" id="certificate-output">
+                  <p>
+                    Details about the certificate used for signing.<br />
+                    Truepic maintains the first and only purpose-built C2PA
+                    certificate authority.
+                  </p>
+
+                  <p>
+                    <strong style="font-weight: 600">Certificate chain</strong>
+                  </p>
+                  <ul id="certificate-list"></ul>
+                  <p><strong style="font-weight: 600">Details</strong></p>
+                  <div class="details">
+                    <strong>Basic info</strong>
+                    <div>
+                      <label>Type</label>
+                      X.509 Certificate
+                    </div>
+                    <div>
+                      <label>Serial Number</label>
+                      <div class="serialNumber"></div>
+                    </div>
+                    <div>
+                      <label>Issued</label>
+                      <div class="issued"></div>
+                    </div>
+                    <div>
+                      <label>Expired</label>
+                      <div class="expired"></div>
+                    </div>
+                    <strong>Subject</strong>
+                    <div>
+                      <label>Common Name</label>
+                      <div class="subjectCommonName"></div>
+                    </div>
+                    <div>
+                      <label>Organization</label>
+                      <div class="subjectOrganization"></div>
+                    </div>
+                    <div>
+                      <label>Organization Unit</label>
+                      <div class="subjectOrganizationUnit"></div>
+                    </div>
+                    <div>
+                      <label>Country</label>
+                      <div class="subjectCountry"></div>
+                    </div>
+
+                    <strong>Issuer</strong>
+                    <div>
+                      <label>Common Name</label>
+                      <div class="issuerCommonName"></div>
+                    </div>
+                    <div>
+                      <label>Organization</label>
+                      <div class="issuerOrganization"></div>
+                    </div>
+                    <div>
+                      <label>Organization Unit</label>
+                      <div class="issuerOrganizationUnit"></div>
+                    </div>
+                    <div>
+                      <label>Country</label>
+                      <div class="issuerCountry"></div>
+                    </div>
+                    <strong>Public Key Info</strong>
+
+                    <div>
+                      <label>Algorithm</label>
+                      <div class="algorithm"></div>
+                    </div>
+                    <div id="modulusContainer">
+                      <label>Modulus</label>
+                      <div class="modulus"></div>
+                    </div>
+                    <div id="curveContainer">
+                      <label>Curve</label>
+                      <div class="namedCurve"></div>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-            </div>
           </div>
           <div class="col right-column">
             <div class="display-generate">
@@ -428,6 +434,8 @@
       spinner.style.display = "block";
 
       outputContainer.style.display = "none";
+      document.getElementById("resultLabel").style.display = "none";
+      uploadedImageContainer.style.display = "none";
 
       const formData = new FormData(uploadForm);
 

static/style.css

@@ -18,6 +18,16 @@ h1 {
   font-size: 26px;
 }
 
+h2 {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: 18px;
+}
+
 p {
   font-weight: 400;
   font-size: 16px;
@@ -53,7 +63,7 @@ p {
 }
 
 .image-container {
-  margin: 2rem 1rem 0 0;
+  margin: 2rem 2rem 0 0;
   background: rgba(247, 249, 250, 1);
   display: flex;
   justify-content: center;
@@ -118,6 +128,7 @@ img.thumbnail {
 #original-image {
   border-bottom: 1px solid rgba(227, 234, 240, 1);
   display: none;
+  flex-direction: column;
 }
 
 #resultLabel {
@@ -162,6 +173,17 @@ img.thumbnail {
   margin-bottom: 0;
 }
 
+.alert-secondary {
+  border-color: #DDE9FF;
+  background-color: #F4F8FF;
+}
+
+.alert-secondary p {
+  font-size: 14px;
+  color: #1F2937;
+}
+
+
 .how-it-works {
   margin-top: 3rem;
   font-size: 12px;
@@ -171,4 +193,75 @@ img.thumbnail {
 .how-it-works strong {
   font-weight: 600;
   color: black;
+}
+
+#verification-output {
+  height: 480px;
+  background: #f7f9fa;
+  border: 1px solid #d8dfe5;
+  overflow-y: auto;
+}
+
+.certificate .details {
+  color: rgba(86, 104, 122, 1);
+  font-size: 12px;
+  font-weight: 400;
+  margin: 0;
+  padding: 1rem;
+}
+
+.certificate .details > div {
+  clear: both;
+  padding: 0.4rem 0;
+}
+
+.certificate .details strong {
+  padding: 0.5rem 0;
+  display: block;
+  color: black;
+}
+
+.certificate .details div label {
+  float: left;
+  width: 175px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.certificate #certificate-list {
+  padding: 0;
+  margin: 0 0 32px 0;
+  border-bottom: 1px solid #d8dfe5;
+}
+
+.certificate #certificate-list li {
+  border: 1px solid #d8dfe5;
+  border-bottom: none;
+  list-style: none;
+  padding: 0.8rem 0 0.8rem 1.5rem;
+  font-size: 14px;
+}
+
+.certificate #certificate-list li:not(:first-child) {
+  background: url(images/li.svg) no-repeat 2.5rem 50%;
+  padding: 0.8rem 0 0.8rem 4.5rem;
+}
+
+.certificate #certificate-list li.active {
+  background-color: #f7f9fa;
+  font-weight: 600;
+}
+
+.certificate #certificate-list li:hover,
+.certificate #certificate-list li.active:hover {
+  background-color: #e9f4ff;
+  cursor: pointer;
+}
+
+.output-container {
+  border-top: 1px solid rgba(227, 234, 240, 1);
+}
+
+.alert#verifyResultDescription {
+  margin-right: 2rem;
 }