Update and clean up UI

- Add 'Project highlights' section to README - Replace hero image in README with info graphic - Add info graphic to app - Replace default Tailwind colors with a custom color palette - Fix focus styles in dark mode - Change some wording to improve clarity
clemensheithecker · Mar 28, 2021 · 84ea745 · 84ea745 · vercel · Mar 28, 2021
1 parent 878126b
commit 84ea745
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,129 @@
-<p align="center">
-  <img src="https://repository-images.githubusercontent.com/347136521/69873c80-853a-11eb-8368-084c1238e134" width="600">
-</p>
-
 # Rearrange PDF as Duplex Scan
 
-An app to fix the page order of a double-sided PDF scan from a scanner without a duplex feature. It rearranges a PDF with page order in the form `(1,3,5,4,2)` to the correct order `(1,2,3,4,5)`.
+An app to fix the page order of a double-sided PDF scan from a scanner without a duplex feature. It reorders the pages of a PDF from e.g. `(1,3,5,4,2)` to the correct order `(1,2,3,4,5)`.
+
+<div align="center">
+  <svg
+    width="490"
+    height="292"
+    viewBox="0 0 980 584"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path fill="#fff" d="M0 0h980v584H0z" />
+    <g clip-path="url(#clip0)">
+      <path
+        d="M812.5 521.5h75a15.001 15.001 0 0015-15v-71.895a7.503 7.503 0 00-2.197-5.303l-40.605-40.605a7.503 7.503 0 00-5.303-2.197H812.5a15.001 15.001 0 00-15 15v105a15.001 15.001 0 0015 15z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M833.992 453.828l2.953-26.016h28.688v8.473h-20.356l-1.265 11.004a16.107 16.107 0 017.699-1.934c4.875 0 8.695 1.512 11.461 4.536 2.766 3.023 4.148 7.254 4.148 12.691 0 3.305-.703 6.27-2.109 8.895-1.383 2.601-3.375 4.628-5.977 6.082-2.601 1.429-5.672 2.144-9.211 2.144-3.093 0-5.964-.621-8.613-1.863-2.648-1.266-4.746-3.035-6.293-5.309-1.523-2.273-2.332-4.863-2.426-7.769h10.055c.211 2.133.949 3.797 2.215 4.992 1.289 1.172 2.965 1.758 5.027 1.758 2.297 0 4.067-.821 5.309-2.461 1.242-1.664 1.863-4.008 1.863-7.031 0-2.907-.715-5.133-2.144-6.68-1.43-1.547-3.457-2.32-6.082-2.32-2.414 0-4.372.632-5.872 1.898l-.984.914-8.086-2.004z"
+        fill="#000"
+      />
+      <path
+        d="M632.335 521.5h74.176c3.935 0 7.708-1.58 10.49-4.393a15.087 15.087 0 004.345-10.607v-71.895a7.544 7.544 0 00-2.173-5.303l-40.159-40.605a7.377 7.377 0 00-5.244-2.197h-41.435c-3.934 0-7.708 1.58-10.49 4.393A15.087 15.087 0 00617.5 401.5v105c0 3.978 1.563 7.794 4.345 10.607a14.753 14.753 0 0010.49 4.393z"
+        fill="#D4D4D8"
+      />
+      <path
+        d="M681.781 459.734h5.801v8.192h-5.801V479h-10.16v-11.074h-20.989l-.457-6.399 21.34-33.715h10.266v31.922zm-21.481 0h11.321v-18.07l-.668 1.16-10.653 16.91z"
+        fill="#000"
+      />
+      <path
+        d="M452.5 521.5h75a15.001 15.001 0 0015-15v-71.895a7.503 7.503 0 00-2.197-5.303l-40.605-40.605a7.503 7.503 0 00-5.303-2.197H452.5a15.001 15.001 0 00-15 15v105a15.001 15.001 0 0015 15z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M482.816 448.906h5.414c2.579 0 4.489-.644 5.731-1.933 1.242-1.289 1.863-3 1.863-5.133 0-2.063-.621-3.668-1.863-4.817-1.219-1.148-2.906-1.722-5.063-1.722-1.945 0-3.574.539-4.886 1.617-1.313 1.055-1.969 2.437-1.969 4.148h-10.16c0-2.671.715-5.062 2.144-7.171 1.453-2.133 3.469-3.797 6.047-4.993 2.602-1.195 5.461-1.793 8.578-1.793 5.414 0 9.657 1.301 12.727 3.903 3.07 2.578 4.605 6.14 4.605 10.687 0 2.344-.714 4.5-2.144 6.469-1.43 1.969-3.305 3.48-5.625 4.535 2.883 1.031 5.027 2.578 6.433 4.641 1.43 2.062 2.145 4.5 2.145 7.312 0 4.547-1.664 8.192-4.992 10.934-3.305 2.742-7.688 4.113-13.149 4.113-5.109 0-9.293-1.348-12.55-4.043-3.235-2.695-4.852-6.258-4.852-10.687h10.16c0 1.922.715 3.492 2.145 4.711 1.453 1.218 3.234 1.828 5.343 1.828 2.414 0 4.301-.633 5.661-1.899 1.382-1.289 2.074-2.988 2.074-5.097 0-5.11-2.813-7.664-8.438-7.664h-5.379v-7.946z"
+        fill="#000"
+      />
+      <path
+        d="M272.335 521.5h74.176c3.935 0 7.708-1.58 10.49-4.393a15.087 15.087 0 004.345-10.607v-71.895a7.544 7.544 0 00-2.173-5.303l-40.159-40.605a7.377 7.377 0 00-5.244-2.197h-41.435c-3.934 0-7.708 1.58-10.49 4.393A15.087 15.087 0 00257.5 401.5v105c0 3.978 1.563 7.794 4.345 10.607a14.753 14.753 0 0010.49 4.393z"
+        fill="#D4D4D8"
+      />
+      <path
+        d="M326.808 479h-35.086v-6.961l16.559-17.648c2.273-2.485 3.949-4.653 5.027-6.504 1.102-1.852 1.652-3.61 1.652-5.274 0-2.273-.574-4.054-1.722-5.343-1.149-1.313-2.789-1.969-4.922-1.969-2.297 0-4.113.797-5.449 2.39-1.313 1.571-1.969 3.645-1.969 6.223h-10.195c0-3.117.738-5.965 2.214-8.543 1.5-2.578 3.61-4.594 6.329-6.047 2.718-1.476 5.8-2.215 9.246-2.215 5.273 0 9.363 1.266 12.269 3.797 2.93 2.532 4.395 6.106 4.395 10.723 0 2.531-.656 5.109-1.969 7.734-1.312 2.625-3.562 5.684-6.75 9.176l-11.637 12.27h22.008V479z"
+        fill="#000"
+      />
+      <path
+        d="M92.5 521.5h75a15.001 15.001 0 0015-15v-71.895a7.503 7.503 0 00-2.197-5.303l-40.605-40.605a7.503 7.503 0 00-5.303-2.197H92.5a15 15 0 00-15 15v105a15.001 15.001 0 0015 15z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M137.16 479H127v-39.164l-12.129 3.762v-8.262l21.199-7.594h1.09V479z"
+        fill="#000"
+      />
+    </g>
+    <path
+      d="M64.928 349.041h-9.914L52.939 355h-4.623l9.668-25.594h3.99L71.66 355h-4.64l-2.092-5.959zm-8.666-3.586h7.418l-3.71-10.617-3.708 10.617zM75.668 355v-15.855h-2.9v-3.165h2.9v-1.74c0-2.109.586-3.738 1.758-4.886 1.172-1.149 2.812-1.723 4.922-1.723.75 0 1.546.105 2.39.316l-.105 3.34a8.391 8.391 0 00-1.635-.141c-2.039 0-3.059 1.049-3.059 3.147v1.687h3.868v3.165h-3.868V355h-4.271zm16.611-23.643v4.623h3.358v3.165h-3.358v10.617c0 .726.14 1.254.422 1.582.293.316.809.474 1.547.474.492 0 .99-.058 1.494-.175v3.304c-.973.27-1.91.405-2.812.405-3.282 0-4.922-1.811-4.922-5.432v-10.775h-3.13v-3.165h3.13v-4.623h4.271zm15.012 23.995c-2.707 0-4.904-.85-6.592-2.549-1.676-1.711-2.513-3.985-2.513-6.821v-.527c0-1.898.363-3.592 1.09-5.08.738-1.5 1.769-2.666 3.093-3.498 1.324-.832 2.801-1.248 4.43-1.248 2.59 0 4.588.826 5.994 2.478 1.418 1.653 2.127 3.991 2.127 7.014v1.723h-12.428c.129 1.57.651 2.812 1.565 3.726.925.914 2.086 1.371 3.48 1.371 1.957 0 3.551-.791 4.781-2.373l2.303 2.198c-.762 1.136-1.781 2.021-3.059 2.654-1.265.621-2.689.932-4.271.932zm-.51-16.295c-1.172 0-2.121.41-2.847 1.23-.715.82-1.172 1.963-1.372 3.428h8.139v-.317c-.094-1.429-.474-2.507-1.142-3.234-.668-.738-1.594-1.107-2.778-1.107zm21.428.826a10.55 10.55 0 00-1.74-.141c-1.957 0-3.276.75-3.955 2.25V355h-4.272v-19.02h4.078l.106 2.127c1.031-1.652 2.461-2.478 4.289-2.478.609 0 1.113.082 1.512.246l-.018 4.008z"
+      fill="#27272A"
+    />
+    <g clip-path="url(#clip1)">
+      <path
+        d="M812.335 239.5h74.176c3.935 0 7.708-1.58 10.49-4.393a15.087 15.087 0 004.345-10.607v-71.895a7.544 7.544 0 00-2.173-5.303l-40.159-40.605a7.377 7.377 0 00-5.244-2.197h-41.435c-3.934 0-7.708 1.58-10.49 4.393A15.087 15.087 0 00797.5 119.5v105c0 3.978 1.563 7.794 4.345 10.607a14.753 14.753 0 0010.49 4.393z"
+        fill="#D4D4D8"
+      />
+      <path
+        d="M866.808 197h-35.086v-6.961l16.559-17.648c2.273-2.485 3.949-4.653 5.027-6.504 1.102-1.852 1.652-3.61 1.652-5.274 0-2.273-.574-4.054-1.722-5.343-1.149-1.313-2.789-1.969-4.922-1.969-2.297 0-4.113.797-5.449 2.39-1.313 1.571-1.969 3.645-1.969 6.223h-10.195c0-3.117.738-5.965 2.214-8.543 1.5-2.578 3.61-4.594 6.329-6.047 2.718-1.476 5.8-2.215 9.246-2.215 5.273 0 9.363 1.266 12.269 3.797 2.93 2.532 4.395 6.106 4.395 10.723 0 2.531-.656 5.109-1.969 7.734-1.312 2.625-3.562 5.684-6.75 9.176l-11.637 12.27h22.008V197z"
+        fill="#000"
+      />
+      <path
+        d="M632.335 239.5h74.176c3.935 0 7.708-1.58 10.49-4.393a15.087 15.087 0 004.345-10.607v-71.895a7.544 7.544 0 00-2.173-5.303l-40.159-40.605a7.377 7.377 0 00-5.244-2.197h-41.435c-3.934 0-7.708 1.58-10.49 4.393A15.087 15.087 0 00617.5 119.5v105c0 3.978 1.563 7.794 4.345 10.607a14.753 14.753 0 0010.49 4.393z"
+        fill="#D4D4D8"
+      />
+      <path
+        d="M681.781 177.734h5.801v8.192h-5.801V197h-10.16v-11.074h-20.989l-.457-6.399 21.34-33.715h10.266v31.922zm-21.481 0h11.321v-18.07l-.668 1.16-10.653 16.91z"
+        fill="#000"
+      />
+      <path
+        d="M452.5 239.5h75a15.001 15.001 0 0015-15v-71.895a7.503 7.503 0 00-2.197-5.303l-40.605-40.605a7.503 7.503 0 00-5.303-2.197H452.5a15.001 15.001 0 00-15 15v105a15.001 15.001 0 0015 15z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M473.992 171.828l2.953-26.016h28.688v8.473h-20.356l-1.265 11.004a16.107 16.107 0 017.699-1.934c4.875 0 8.695 1.512 11.461 4.536 2.766 3.023 4.148 7.254 4.148 12.691 0 3.305-.703 6.27-2.109 8.895-1.383 2.601-3.375 4.628-5.977 6.082-2.601 1.429-5.672 2.144-9.211 2.144-3.093 0-5.964-.621-8.613-1.863-2.648-1.266-4.746-3.035-6.293-5.309-1.523-2.273-2.332-4.863-2.426-7.769h10.055c.211 2.133.949 3.797 2.215 4.992 1.289 1.172 2.965 1.758 5.027 1.758 2.297 0 4.067-.821 5.309-2.461 1.242-1.664 1.863-4.008 1.863-7.031 0-2.907-.715-5.133-2.144-6.68-1.43-1.547-3.457-2.32-6.082-2.32-2.414 0-4.372.632-5.872 1.898l-.984.914-8.086-2.004z"
+        fill="#000"
+      />
+      <path
+        d="M272.5 239.5h75a15.001 15.001 0 0015-15v-71.895a7.503 7.503 0 00-2.197-5.303l-40.605-40.605a7.503 7.503 0 00-5.303-2.197H272.5a15.001 15.001 0 00-15 15v105a15.001 15.001 0 0015 15z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M302.816 166.906h5.414c2.579 0 4.489-.644 5.731-1.933 1.242-1.289 1.863-3 1.863-5.133 0-2.063-.621-3.668-1.863-4.817-1.219-1.148-2.906-1.722-5.063-1.722-1.945 0-3.574.539-4.886 1.617-1.313 1.055-1.969 2.437-1.969 4.148h-10.16c0-2.671.715-5.062 2.144-7.171 1.453-2.133 3.469-3.797 6.047-4.993 2.602-1.195 5.461-1.793 8.578-1.793 5.414 0 9.657 1.301 12.727 3.903 3.07 2.578 4.605 6.14 4.605 10.687 0 2.344-.714 4.5-2.144 6.469-1.43 1.969-3.305 3.48-5.625 4.535 2.883 1.031 5.027 2.578 6.433 4.641 1.43 2.062 2.145 4.5 2.145 7.312 0 4.547-1.664 8.192-4.992 10.934-3.305 2.742-7.688 4.113-13.149 4.113-5.109 0-9.293-1.348-12.55-4.043-3.235-2.695-4.852-6.258-4.852-10.687h10.16c0 1.922.715 3.492 2.145 4.711 1.453 1.218 3.234 1.828 5.343 1.828 2.414 0 4.301-.633 5.661-1.899 1.382-1.289 2.074-2.988 2.074-5.097 0-5.11-2.813-7.664-8.438-7.664h-5.379v-7.946z"
+        fill="#000"
+      />
+      <path
+        d="M92.5 239.5h75a15.001 15.001 0 0015-15v-71.895a7.503 7.503 0 00-2.197-5.303l-40.605-40.605a7.503 7.503 0 00-5.303-2.197H92.5a15 15 0 00-15 15v105a15.001 15.001 0 0015 15z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M137.16 197H127v-39.164l-12.129 3.762v-8.262l21.199-7.594h1.09V197z"
+        fill="#000"
+      />
+    </g>
+    <path
+      d="M42.602 73V47.406h8.771c2.895 0 5.098.58 6.61 1.74 1.511 1.16 2.267 2.89 2.267 5.186 0 1.172-.316 2.227-.95 3.164-.632.938-1.558 1.664-2.777 2.18 1.383.375 2.45 1.084 3.2 2.127.761 1.031 1.142 2.273 1.142 3.726 0 2.403-.773 4.248-2.32 5.537C57.01 72.356 54.807 73 51.935 73h-9.333zm4.447-11.549v7.998h4.94c1.394 0 2.484-.346 3.269-1.037.785-.691 1.177-1.652 1.177-2.883 0-2.66-1.359-4.02-4.078-4.078H47.05zm0-3.27h4.36c1.382 0 2.46-.31 3.234-.931.785-.633 1.177-1.523 1.177-2.672 0-1.266-.363-2.18-1.09-2.742-.714-.563-1.833-.844-3.357-.844h-4.324v7.19zm26.226 15.17c-2.707 0-4.904-.849-6.591-2.548-1.676-1.711-2.514-3.985-2.514-6.82v-.528c0-1.898.363-3.592 1.09-5.08.738-1.5 1.77-2.666 3.093-3.498 1.325-.832 2.801-1.248 4.43-1.248 2.59 0 4.588.826 5.994 2.478 1.418 1.653 2.127 3.99 2.127 7.014v1.723H68.477c.129 1.57.65 2.812 1.564 3.726.926.914 2.086 1.371 3.48 1.371 1.957 0 3.551-.79 4.782-2.373l2.303 2.198c-.762 1.136-1.782 2.021-3.06 2.654-1.265.621-2.689.932-4.27.932zm-.51-16.294c-1.171 0-2.12.41-2.847 1.23-.715.82-1.172 1.963-1.371 3.428h8.139v-.317c-.094-1.43-.475-2.507-1.143-3.234-.668-.738-1.594-1.107-2.777-1.107zM85.739 73V57.145h-2.9V53.98h2.9v-1.74c0-2.11.586-3.738 1.758-4.887 1.172-1.148 2.813-1.722 4.922-1.722.75 0 1.547.105 2.39.316l-.105 3.34a8.416 8.416 0 00-1.635-.14c-2.039 0-3.058 1.048-3.058 3.146v1.688h3.867v3.163H90.01V73h-4.272zm10.46-9.685c0-1.864.368-3.54 1.107-5.028.738-1.5 1.775-2.648 3.111-3.445 1.336-.809 2.871-1.213 4.605-1.213 2.567 0 4.647.826 6.241 2.478 1.605 1.653 2.472 3.844 2.601 6.575l.018 1.002c0 1.875-.363 3.55-1.09 5.027-.715 1.477-1.746 2.62-3.094 3.428-1.336.808-2.883 1.213-4.64 1.213-2.684 0-4.834-.891-6.451-2.672-1.606-1.793-2.409-4.178-2.409-7.155v-.21zm4.271.369c0 1.957.404 3.492 1.213 4.605.808 1.102 1.933 1.652 3.375 1.652 1.441 0 2.56-.562 3.357-1.687.809-1.125 1.213-2.772 1.213-4.94 0-1.921-.416-3.445-1.248-4.57-.82-1.125-1.94-1.687-3.358-1.687-1.394 0-2.501.556-3.322 1.67-.82 1.101-1.23 2.754-1.23 4.957zm26.982-5.801a10.565 10.565 0 00-1.74-.14c-1.957 0-3.275.75-3.955 2.25V73h-4.272V53.98h4.078l.106 2.127c1.031-1.652 2.461-2.478 4.289-2.478.609 0 1.113.082 1.512.246l-.018 4.008zm10.723 15.469c-2.707 0-4.904-.85-6.592-2.55-1.676-1.71-2.514-3.984-2.514-6.82v-.527c0-1.898.364-3.592 1.09-5.08.738-1.5 1.77-2.666 3.094-3.498 1.324-.832 2.801-1.248 4.43-1.248 2.589 0 4.588.826 5.994 2.478 1.418 1.653 2.127 3.99 2.127 7.014v1.723h-12.428c.129 1.57.65 2.812 1.564 3.726.926.914 2.086 1.371 3.481 1.371 1.957 0 3.551-.79 4.781-2.373l2.303 2.198c-.762 1.136-1.781 2.021-3.059 2.654-1.265.621-2.689.932-4.271.932zm-.51-16.295c-1.172 0-2.121.41-2.848 1.23-.714.82-1.171 1.963-1.371 3.428h8.139v-.317c-.094-1.43-.475-2.507-1.143-3.234-.668-.738-1.593-1.107-2.777-1.107z"
+      fill="#27272A"
+    />
+    <defs>
+      <clipPath id="clip0">
+        <path fill="#fff" transform="translate(40 364)" d="M0 0h900v180H0z" />
+      </clipPath>
+      <clipPath id="clip1">
+        <path fill="#fff" transform="translate(40 82)" d="M0 0h900v180H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+</div>
 
 Try out the app on [pdf-duplex-scan.vercel.app](https://pdf-duplex-scan.vercel.app) with two example PDF files: [Example 1](https://github.com/clemensheithecker/pdf-duplex-scan/raw/main/pdf-examples/pdf-example-1.pdf) and [Example 2](https://github.com/clemensheithecker/pdf-duplex-scan/raw/main/pdf-examples/pdf-example-2.pdf).
 
+## Project highlights
+
+- Drag-and-drop file selection
+- Form validation
+- Array reordering based on pattern
+- User interface for dark and light color schemes
+- JavaScript browser validation
+
 ## Getting started
 
 Check out the app by running the project locally: