Add an example of encrypting an HTML page

diff --git a/.github/1.png b/.github/1.png
new file mode 100644 (file)
index 0000000..c03d314
Binary files /dev/null and b/.github/1.png differ

diff --git a/.github/2.png b/.github/2.png
new file mode 100644 (file)
index 0000000..cc33f2c
Binary files /dev/null and b/.github/2.png differ

diff --git a/.github/3.png b/.github/3.png
new file mode 100644 (file)
index 0000000..6df2c4d
Binary files /dev/null and b/.github/3.png differ

diff --git a/README.md b/README.md
index 87a79d1041cc206292b3bdab47b785660cca7a4a..a23ceb07c30963e4a3961ca69a4dfb0ade6878a8 100644 (file)
--- a/README.md
+++ b/README.md
@@ -86,6 +86,20 @@ You can also import the function dynamically (useful for lazy-loading or testing
 const { decrypt } = await import('https://cdn.statically.io/gh/ardislu/static-encrypt/master/decrypt.js');
 ```
 
+### Encrypt an entire HTML page
+
+The generated HTML file uses [`document.write()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) to replace the entire document when the correct password is entered. So you can input arbitrary HTML into the "Content" box to simulate a new page loading in:
+
+1. Populate HTML into the "Content" box then encrypt and download the HTML page normally:
+
+![The static-encrypt frontend populate with HTML in the "Content" box.](./.github/1.png)
+
+2. The HTML will be displayed only when the correct password is input:
+
+![The downloaded password-protected HTML page with the correct password input.](./.github/2.png)
+
+![The HTML from the "Content" box rendered correctly.](./.github/3.png)
+
 ### TypeScript
 
 `*.d.ts` files are generated from the [JSDoc](https://jsdoc.app/) comments using `tsc`: