fix error message and css

Author: lucthienphong1120

render.js

@@ -102,7 +102,7 @@ class CertData {
         } else {
             // Display an error message if there is an error loading the data source file
             this.error.style.display = 'block';
-            this.resource.style.display = 'none';
+            document.getElementById("pdfViewer").style.display = "none";
             if (this.urlParams.get('data')) {
                 this.urlParams.delete('data');
                 var newUrl = `${window.location.pathname}?${this.urlParams.toString()}`;

style.css

@@ -139,9 +139,9 @@ main {
 .certificate {
     position: relative;
     width: 70%;
-    min-height: 300px;
+    min-height: 400px;
     float: left;
-    margin-right: 30px;
+    margin-right: 20px;
     border: 1px solid #ccc;
 }
 
@@ -190,7 +190,7 @@ main {
 }
 
 .buttons {
-    margin-top: 20px;
+    margin-top: 15px;
     display: flex;
     justify-content: space-around;
 }
@@ -312,6 +312,7 @@ footer {
 @media screen and (max-width: 880px) {
     .certificate {
         width: 100%;
+        min-height: 300px;
         float: none;
         margin-right: 0;
         margin-bottom: 20px;

verify.html

@@ -56,8 +56,8 @@
         </section>
         <section class="details">
             <h1>Certificate Title</h1>
-            <p id="courseTitle"></p>
-            <p>Certify for: <span id="certifiedName"></span></p>
+            <p id="courseTitle">Certificate Name</p>
+            <p>Certify for: <span id="certifiedName">Nguyễn Văn A</span></p>
         </section>
         <section class="description">
             <h2>Certificate Description</h2>