Minor updates

bradsec · Dec 22, 2023 · db48b94 · db48b94
1 parent 8eff952
commit db48b94
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 37 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -27,7 +27,7 @@
   --font-color-footer: var(--color-gray-5);
   --font-family: "Roboto", sans-serif;
   --base-font-size: 1em;
-  --line-height: 1.4;
+  --line-height: 1.4em;
   /* Branding */
   --branding-font-color: var(--color-gray-8);
   --branding-span-font-color: var(--color-gray-5);
@@ -39,8 +39,8 @@
   --link-hover-color: var(--color-gray-6);
   --link-active-color: var(--color-blue-3);
   /* Hero text settings */
-  --hero-font-size: 1.5em;
-  --hero-line-height: 1.6;
+  --hero-font-size: 1.4em;
+  --hero-line-height: 1.4em;
   --hero-letter-spacing: 0.05em;
   /* Button settings */
   --button-padding: 18px 24px;
@@ -70,8 +70,6 @@
     --bg-color: var(--color-gray-8);
     --font-color: var(--color-gray-4);
     --font-family: "Roboto", sans-serif;
-    --base-font-size: 1em;
-    --line-height: 1.4;
   /* Branding */
   --branding-font-color: var(--color-gray-2);
   --branding-span-font-color: var(--color-gray-4);
@@ -170,16 +168,14 @@ footer {
 .hero {
   text-align: center;
   font-size: var(--hero-font-size);
+  letter-spacing: var(--hero-letter-spacing);
+  line-height: var(--hero-line-height);
   margin-bottom: 15px;
   margin-top: 5px;
-  letter-spacing: -0.03em;
 }
 
 .hero p {
-  font-size: 1.25em;
   margin: 0 auto;
-  letter-spacing: var(--hero-letter-spacing);
-  line-height: var(--hero-line-height);
 }
 
 .wrapper {
@@ -246,13 +242,13 @@ button[type="submit"] {
 }
 
 /* Media query for small screens */
-@media (max-width: 768px) { /* Adjust the max-width as needed for your design */
+@media (max-width: 768px) { 
   .button,
   button,
   button[type="submit"] {
-    display: block; /* Change to block to take the full width */
-    width: 100%; /* Set width to 100% to fill the container */
-    margin: 4px 0; /* Adjust margin as needed */
+    display: block; 
+    width: 100%; 
+    margin: 4px 0; 
   }
 }
 
@@ -344,6 +340,13 @@ button[disabled]:hover {
 
 /* Checkbox toggles */
 
+.toggle-description {
+  color: var(--color-gray-5);
+  font-size: 0.8em;
+  line-height: 1.2em;
+
+}
+
 .toggle-group {
   display: flex;
   align-items: center;
@@ -354,7 +357,7 @@ button[disabled]:hover {
 .toggle-item {
   display: flex;
   align-items: center;
-  margin: 15px;
+  margin: 10px 15px 10px 0;
 }
 
 .toggle-item label {
@@ -567,28 +570,24 @@ select::-ms-expand {
 }
 
 #file-link {
-  display: flex;
-  margin: 8px 4px 8px 0;
-  font-weight: 600;
+  font-weight: bold;
+  margin: 0 auto;
   text-align: center;
-  display: inline-block;
-  background-color: none;
-  color: var(--color-green-1);
-  padding: var(--button-padding);
-  cursor: pointer;
-  border: 1px solid var(--color-green-1);
-  border-radius: 4px;
-  word-break: break-word;
+  display: inline;
 }
 
-#file-link .material-icons-outlined {
-  margin-right: 8px; /* Space between icon and text */
-  flex-shrink: 0; /* Prevents the icon from shrinking */
+.file-link {
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px;
+  word-break: break-word;
 }
 
-#file-link .download-text {
-  margin: 1px solid red;
-  text-align: left; /* Aligns text to the left */
+.file-link span {
+  margin-right: auto;
+  padding-right: 5px;
 }
 
 /* Flash on file add */

diff --git a/index.html b/index.html
@@ -80,7 +80,7 @@
           </div>
         </div>
         <div class="hero">
-          Merge multiple PDF documents, convert images to PDF, or combine PDFs and images into a single PDF document, all within your browser. Free and private with no uploads to servers.
+          Effortlessly merge PDFs, convert images to PDF, or blend both into one document, all free and secure in your browser.
         </div>
       </header>
       <main>
@@ -138,7 +138,7 @@
               Image Hash
             </label>
           </div>
-          <p class="small">The above options apply to new image files in file list only. Image Details adds the image name, and EXIF details including GPS and date (if available) to the top of the page above the image. Image Landscape fits the images to landscape A4 pages (default is portrait). Image number will add an image number in the bottom right of page. Image Hash will add a SHA-256 hash value for the input image.</p>         
+          <p class="toggle-description">Image Details adds the image name, and EXIF details including GPS and date (if available). Image Landscape fits the images to landscape A4 pages (default is portrait). Image Number will add an image number in the bottom right. Image Hash will add the unique SHA-256 hash value for the input image.</p>         
         </div>
         </div>
         <div id="progress-container">
@@ -154,11 +154,11 @@
         <button id="reset-button" onclick="resetPage()" style="display: none">
           Clear File List
         </button>
-        <a id="file-link" style="display: none">File Link</a>
+        <div id="file-link"></div>
       </main>
       <footer>
         <p>
-          Images will be fit to a standard A4 page size. Filetypes supported: <span class="bold">.pdf, .jpg, .png, .gif, .webp </span>. On a desktop PC the new PDF will save automatically into the default downloads folder. On mobile devices the PDF may need to be saved manually. All processing is done locally within your browser using the <a href="https://pdf-lib.js.org/" target="_blank">pdf-lib</a> javascript library and HTML5 FileReader API. No files or personal data are uploaded to any server. 
+          Filetypes supported: PDF, JPG, PNG, GIF, WEBP. All processing is done locally within your browser using the <a href="https://pdf-lib.js.org/" target="_blank">pdf-lib</a> javascript library and HTML5 FileReader API. No files or personal data are uploaded to any server.
         </p>
       </footer>
       <script src="js/fontkit.umd.min.js"></script>

diff --git a/js/pdfmerge.js b/js/pdfmerge.js
@@ -433,6 +433,7 @@ function sleep(ms) {
 }
 
 async function convertToPDF() {
+  currentPageIndex = 0;
   const TIMEOUT_DURATION = 60000; // Timeout duration in milliseconds (60 seconds)
   const { PDFDocument, rgb } = PDFLib;
 
@@ -707,13 +708,13 @@ function preparefileLink(pdfBytes) {
 
   // Display a link to the downloaded file
   fileLink.href = blobUrl;
-  fileLink.textContent = `View ${filename} (${fileSize})`;
+  fileLink.innerHTML = `<a href="${blobUrl}" class="file-link"><span class="material-icons-outlined" style="font-size:45px;">picture_as_pdf</span>${filename} (${fileSize})</a>`;
   fileLink.style.display = "block"; // Make sure it's visible
 
   // Clean up after a delay
   setTimeout(() => {
     URL.revokeObjectURL(blobUrl);
-    document.body.removeChild(anchor);
+    fileLink.innerHTML = "";
   }, 60000); // Cleanup after 60 seconds
 }