updates

static/index.html

@@ -144,22 +144,14 @@
                 />
               </div>
               <div class="output-container mt-5" style="display: none">
-                <h3>Verification Output</h3>
+                <h3 class="mt-4 mb-4">Verification Output</h3>
                 <div id="verification-output"></div>
 
-                <h3>Certificates</h3>
+                <h3 class="mt-4 pt-4 mb-4" id="certificates-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>
+                  <h4>Certificate chain</h4>
                   <ul id="certificate-list"></ul>
-                  <p><strong style="font-weight: 600">Details</strong></p>
+                  <h4>Details</h4>
                   <div class="details">
                     <strong>Basic info</strong>
                     <div>
@@ -231,6 +223,10 @@
                 </div>
               </div>
             </div>
+            <div class="col mt-4 pt-4" id="logo">
+              <img src="images/logo.png" />
+              <p class="small mt-3 mb-5">This demo is a provisional version for demo purposes only.</p>
+            </div>
           </div>
           <div class="col right-column">
             <div class="display-generate">

static/style.css

@@ -20,19 +20,37 @@ h1 {
 
 h2 {
   font-weight: 600;
-  font-size: 16px;
+  font-size: 18px;
 }
 
 h3 {
   font-weight: 600;
-  font-size: 18px;
+  font-size: 16px;
+}
+
+h4 {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.small {
+  font-size: 12px;
 }
 
 p {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #56687A;
+  color: #56687a;
+}
+
+select,
+textarea {
+  resize: none;
+}
+
+.form-control:focus {
+  box-shadow: none;
 }
 
 .badge.bg-secondary {
@@ -67,7 +85,7 @@ p {
   background: rgba(247, 249, 250, 1);
   display: flex;
   justify-content: center;
-  height: 35rem;
+  min-height: 512px;
 }
 
 .image-container img {
@@ -106,6 +124,7 @@ p {
 label {
   font-size: 14px;
   font-weight: 600;
+  margin-bottom: .5rem;
 }
 
 label.form-check-label {
@@ -121,8 +140,8 @@ label.form-check-label {
 }
 
 img.thumbnail {
-  width:100px;
-  height:100px;
+  width: 100px;
+  height: 100px;
 }
 
 #original-image {
@@ -132,14 +151,15 @@ img.thumbnail {
 }
 
 #resultLabel {
-  display:none;
+  display: none;
 }
 
 .action-menu {
   display: none;
 }
 
-.action-menu button, .action-menu a.btn {
+.action-menu button,
+.action-menu a.btn {
   width: 175px;
 }
 
@@ -155,14 +175,14 @@ img.thumbnail {
 }
 
 .alert-primary {
-  border-color: #FEF3C7;
-    background-color: rgba(254, 243, 199, 0.25);
-   
+  border-color: #fef3c7;
+  background-color: rgba(254, 243, 199, 0.25);
 }
 
-.alert-primary h4, .alert-primary p {
+.alert-primary h4,
+.alert-primary p {
   font-size: 14px;
-  color: #1F2937;
+  color: #1f2937;
 }
 
 .alert-primary h4 {
@@ -174,20 +194,19 @@ img.thumbnail {
 }
 
 .alert-secondary {
-  border-color: #DDE9FF;
-  background-color: #F4F8FF;
+  border-color: #dde9ff;
+  background-color: #f4f8ff;
 }
 
 .alert-secondary p {
   font-size: 14px;
-  color: #1F2937;
+  color: #1f2937;
 }
 
-
 .how-it-works {
   margin-top: 3rem;
   font-size: 12px;
-  color: #56687A;
+  color: #56687a;
 }
 
 .how-it-works strong {
@@ -200,14 +219,23 @@ img.thumbnail {
   background: #f7f9fa;
   border: 1px solid #d8dfe5;
   overflow-y: auto;
+  margin-right: 1rem;
+}
+
+#certificates-h3 {
+  border-top: 1px solid rgba(227, 234, 240, 1);
 }
 
 .certificate .details {
   color: rgba(86, 104, 122, 1);
   font-size: 12px;
   font-weight: 400;
-  margin: 0;
   padding: 1rem;
+  margin: 0 2rem 0 0;
+  height: 480px;
+  background: #f7f9fa;
+  border: 1px solid #d8dfe5;
+  overflow-y: auto;
 }
 
 .certificate .details > div {
@@ -230,7 +258,7 @@ img.thumbnail {
 
 .certificate #certificate-list {
   padding: 0;
-  margin: 0 0 32px 0;
+  margin: 0 2rem 32px 0;
   border-bottom: 1px solid #d8dfe5;
 }
 
@@ -264,4 +292,12 @@ img.thumbnail {
 
 .alert#verifyResultDescription {
   margin-right: 2rem;
+}
+
+#logo {
+  border-top: 1px solid rgba(227, 234, 240, 1);
+}
+
+#logo img {
+  width: 156px;
 }