diff --git a/index.html b/index.html
index e8fa118..385e859 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
+
diff --git a/static/app.js b/static/app.js
index a49c634..aee7621 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,10 +1,29 @@
import config from './config.js';
import { generateKey, encryptData, decryptData, exportKey, importKey } from './crypto.js';
-
const textarea = document.getElementById('secretInput');
const shareButton = document.getElementById('shareButton');
+const sendToButton = document.getElementById('sendToButton');
const spinner = document.getElementById('spinner');
+// Hide send to button when textarea content changes
+textarea.addEventListener('input', () => {
+ sendToButton.classList.add('hidden');
+});
+
+async function handleSendTo() {
+ try {
+ if (navigator.share) {
+ await navigator.share({
+ title: 'Secret Share',
+ text: 'Here\'s a secret for you',
+ url: textarea.value
+ });
+ }
+ } catch (error) {
+ console.error('Sharing failed:', error);
+ }
+}
+
async function handleShare() {
if (!textarea.value.trim()) return;
@@ -33,6 +52,11 @@ async function handleShare() {
const shareUrl = `${window.location.origin}/${encodedData}`;
textarea.value = shareUrl;
+
+ // Show send to button if Web Share API is available
+ if (navigator.share) {
+ sendToButton.classList.remove('hidden');
+ }
} catch (error) {
console.error('Sharing failed:', error);
} finally {
@@ -76,4 +100,5 @@ async function handlePageLoad() {
}
shareButton.addEventListener('click', handleShare);
+sendToButton.addEventListener('click', handleSendTo);
window.addEventListener('load', handlePageLoad);
diff --git a/static/styles.css b/static/styles.css
index 928ae97..f6f72b1 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -51,12 +51,21 @@ button {
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
+ margin-left: 10px;
+}
+
+#sendToButton {
+ background-color: #7b68ee;
}
button:hover {
background-color: #00c4aa;
}
+#sendToButton:hover {
+ background-color: #6a5acd;
+}
+
.spinner {
position: absolute;
top: 50%;