From 2e19db145b5e0576fa06a156e6e65dc490a7129c Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 8 Feb 2023 00:42:27 +0800
Subject: [PATCH] add dialog for pdf

---
 src/editor/index.html | 10 ++++++++++
 src/scss/styles.scss  |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/src/editor/index.html b/src/editor/index.html
index 7453ec2..7f850c0 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -22,6 +22,7 @@
         <button id="fn-download-html">Download HTML</button>
         <button id="fn-new-data">New Data</button>
         <button id="fn-upload-data">Upload Data</button>
+        <button onclick="dialog.showModal()">PDF?</button>
         <input type="file" name="upload-data" style="display: none;">
         <button id="fn-load-sample">Load Sample</button>
       </div>
@@ -33,6 +34,15 @@
     </div>
   </div>
 
+  <dialog id="dialog">
+    <form method="dialog">
+      <p>The HTML that JSONCV generates is optimized for printing in an A4 letter, so it can be used to create a well-formatted PDF document.</p>
+      <p>You can first click "Download HTML", then open the HTML in a browser and choose "Print" from the menu (or press ⌘+P), it will open a modal where you should find the option to save it as a PDF.</p>
+      <p>For best compatibility, I recommend using Firefox rather than Chrome to complete this process.</p>
+      <button>OK</button>
+    </form>
+  </dialog>
+
   <script src="main.js" type="module"></script>
 </body>
 </html>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index c05627e..50afaa4 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -118,6 +118,10 @@ body {
   overflow-x: auto;
 }
 
+dialog {
+  width: min(400px, 80%);
+}
+
 
 @keyframes bgFade {
   0% {