diff --git a/README.md b/README.md
index 0ec999b..7fbb596 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
# whisper-ui
- Secure and very easy to use sending of encrypted data anywhere (browser ui)
+ Secure and very easy to use local encryption to send data anywhere (browser ui)
## Motivation
Make it super easy to locally encrypt sensible data for designated recipients ensuring privacy, integrity and compliance on whatever way the data is transported. Keys should be considered throw away material and not be reused often in order to render the transported cryptograms useless, even if they are retained in e.g. mailboxes.
+## Demo
+See it in action and test it at [whisper.syncorix.com](https://whisper.syncorix.com/). Use at your own risk according to [LICENSE](LICENSE).
+
## How does it work?

This is quite simple: Whisper! uses [asymmetric cryptography](https://en.wikipedia.org/wiki/Public-key_cryptography) and
@@ -31,12 +34,15 @@ Drop encrypted stuff you received, then decrypt locally and download result:
## Features (free)
+* Easy to use and portable across major browsers
+* Completely local, you can disconnect internet after the page is loaded
* A keypair is automatically generated locally and stored in the browser's IndexedDB
* The private key is created with [```{ extractable: false }```](src/ts/whisper-crypto.ts) and cannot be [exported by the application](https://www.w3.org/TR/WebCryptoAPI/#cryptokey-interface-members).
* The public part of the keypair can be copied and distributed to those who want to send you sensitive data
* The private part remains local and is the only way to decrypt data addressed to you
+* Pretty secure algorithms like ECDH-ES, P-256 for key pair, ECDH-ES+A256KW for key wrapping and A256GCM for content encryption
* Use the hosted version (the good stuff happens locally anyway) or self host and modify it
-* TODO: List security and compliance features
+* TODO: continue
## Advanced and convenience features (non-free)
* Get a branded, maintained and supported installation for your organization and its partners
diff --git a/build/build-iconify.ts b/build/build-iconify.ts
index 3abd13f..d67f623 100644
--- a/build/build-iconify.ts
+++ b/build/build-iconify.ts
@@ -23,6 +23,7 @@ const chosenIcons: Array = [
'lock-open-check-outline',
'robot-dead',
'security',
+ 'trash-can-outline',
'tray-arrow-down',
];
diff --git a/src/css/mdi-icons.css b/src/css/mdi-icons.css
index 6ddb0f8..53cf736 100644
--- a/src/css/mdi-icons.css
+++ b/src/css/mdi-icons.css
@@ -71,6 +71,10 @@
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 12h7c-.53 4.11-3.28 7.78-7 8.92zH5V6.3l7-3.11M12 1L3 5v6c0 5.55 3.84 10.73 9 12c5.16-1.27 9-6.45 9-12V5z'/%3E%3C/svg%3E");
}
+.icon--mdi--trash-can-outline {
+ --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z'/%3E%3C/svg%3E");
+}
+
.icon--mdi--tray-arrow-down {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 12h2v5h16v-5h2v5c0 1.11-.89 2-2 2H4a2 2 0 0 1-2-2zm10 3l5.55-5.46l-1.42-1.41L13 11.25V2h-2v9.25L7.88 8.13L6.46 9.55z'/%3E%3C/svg%3E");
}
diff --git a/src/css/styles.css b/src/css/styles.css
index d83bc72..a164b84 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -6,6 +6,16 @@
/* Syncorix Lime Greem */
}
+/* for foreground elements like dialogs */
+::backdrop {
+ background-color: white;
+ opacity: 0.75;
+}
+
+dialog {
+ border: 1px solid gray;
+}
+
/* create a box w/ margins to put content into */
.content-box {
margin-top: 2rem;
diff --git a/src/index.html b/src/index.html
index ba7435c..7d00aa7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -354,7 +354,7 @@