mirror of
https://github.com/PR0M3TH3AN/Nostr-Static-Contact-Form.git
synced 2025-09-07 06:48:42 +00:00
update
This commit is contained in:
thePR0M3TH3AN
@@ -5,25 +5,26 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Contact Form</title>
|
<title>Contact Form</title>
|
||||||
<style>
|
<style>
|
||||||
/* Basic reset and typography */
|
/* Prevent scrollbars inside the iframe */
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden !important; /* no vertical or horizontal scroll */
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
padding: 20px;
|
padding: 0 !important;
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
background-color: #f4f4f4;
|
|
||||||
color: #333;
|
color: #333;
|
||||||
|
overscroll-behavior: none; /* no bounce on mobile */
|
||||||
|
-ms-overflow-style: none; /* IE/Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
}
|
}
|
||||||
/* Centered container */
|
/* Hide WebKit scrollbars just in case */
|
||||||
.form-container {
|
body::-webkit-scrollbar { display: none; }
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 0;
|
margin: 0 0 10px 0;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -32,35 +33,7 @@
|
|||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
input[type="text"],
|
textarea { resize: vertical; min-height: 100px; }
|
||||||
input[type="email"],
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
background-color: #3b82f6;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
background-color: #2563eb;
|
|
||||||
}
|
|
||||||
#result {
|
#result {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
@@ -68,22 +41,84 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- Load nostr‑tools v2.10.4 -->
|
<!-- Load nostr-tools v2.10.4 -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="background:#fff !important;">
|
||||||
<div class="form-container">
|
<!-- Full-screen container (no overflow) -->
|
||||||
<h2>Contact Us</h2>
|
<div
|
||||||
<form id="contact-form">
|
class="form-container"
|
||||||
<label for="name">Name</label>
|
style="
|
||||||
<input type="text" id="name" placeholder="Your name" required />
|
width:100% !important;
|
||||||
<label for="email">Email</label>
|
height:100dvh !important; /* fill viewport without causing scroll */
|
||||||
<input type="email" id="email" placeholder="Your email" required />
|
background:#fff !important;
|
||||||
<label for="message">Message</label>
|
border-radius:0 !important;
|
||||||
<textarea id="message" placeholder="Your message" required></textarea>
|
box-shadow:none !important;
|
||||||
<button type="submit">Send Message</button>
|
margin:0 !important;
|
||||||
</form>
|
padding:24px !important;
|
||||||
<div id="result"></div>
|
box-sizing:border-box !important; /* include padding in height */
|
||||||
|
display:flex !important;
|
||||||
|
align-items:center !important;
|
||||||
|
justify-content:center !important;
|
||||||
|
overflow:hidden !important; /* belt & suspenders */
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="form-inner" style="width:100% !important; max-width:640px !important;">
|
||||||
|
<h2>Contact Form</h2>
|
||||||
|
<form id="contact-form">
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
placeholder="Your name"
|
||||||
|
required
|
||||||
|
style="
|
||||||
|
width:100% !important; padding:10px !important; margin-top:5px !important;
|
||||||
|
border:1px solid #000 !important; border-radius:0 !important; box-sizing:border-box !important;
|
||||||
|
background:#fff !important; color:inherit !important; box-shadow:none !important;
|
||||||
|
-webkit-appearance:none !important; appearance:none !important;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
placeholder="Your email"
|
||||||
|
required
|
||||||
|
style="
|
||||||
|
width:100% !important; padding:10px !important; margin-top:5px !important;
|
||||||
|
border:1px solid #000 !important; border-radius:0 !important; box-sizing:border-box !important;
|
||||||
|
background:#fff !important; color:inherit !important; box-shadow:none !important;
|
||||||
|
-webkit-appearance:none !important; appearance:none !important;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<label for="message">Message</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
placeholder="Your message"
|
||||||
|
required
|
||||||
|
style="
|
||||||
|
width:100% !important; padding:10px !important; margin-top:5px !important;
|
||||||
|
border:1px solid #000 !important; border-radius:0 !important; box-sizing:border-box !important;
|
||||||
|
background:#fff !important; color:inherit !important; box-shadow:none !important;
|
||||||
|
-webkit-appearance:none !important; appearance:none !important;
|
||||||
|
min-height:100px !important; resize:vertical !important;
|
||||||
|
"
|
||||||
|
></textarea>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
style="
|
||||||
|
display:block !important; width:100% !important; padding:10px !important; margin-top:20px !important;
|
||||||
|
background:#000 !important; color:#fff !important; border:1px solid #000 !important;
|
||||||
|
border-radius:0 !important; font-size:1em !important; cursor:pointer !important;
|
||||||
|
box-shadow:none !important; text-shadow:none !important;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div id="result"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -105,12 +140,10 @@
|
|||||||
form.addEventListener("submit", async (ev) => {
|
form.addEventListener("submit", async (ev) => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
resultDiv.textContent = "";
|
resultDiv.textContent = "";
|
||||||
// Collect form values.
|
|
||||||
const name = document.getElementById("name").value.trim();
|
const name = document.getElementById("name").value.trim();
|
||||||
const email = document.getElementById("email").value.trim();
|
const email = document.getElementById("email").value.trim();
|
||||||
const message = document.getElementById("message").value.trim();
|
const message = document.getElementById("message").value.trim();
|
||||||
|
|
||||||
// Build the Markdown message.
|
|
||||||
const content = `
|
const content = `
|
||||||
# Contact Form Submission
|
# Contact Form Submission
|
||||||
|
|
||||||
@@ -121,21 +154,15 @@ ${message}
|
|||||||
`.trim();
|
`.trim();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Decode the recipient NPUB to get its public key.
|
|
||||||
const decoded = window.NostrTools.nip19.decode(recipientNpub);
|
const decoded = window.NostrTools.nip19.decode(recipientNpub);
|
||||||
if (decoded.type !== "npub") {
|
if (decoded.type !== "npub") throw new Error("Invalid recipient NPUB");
|
||||||
throw new Error("Invalid recipient NPUB");
|
|
||||||
}
|
|
||||||
const targetPubHex = decoded.data;
|
const targetPubHex = decoded.data;
|
||||||
|
|
||||||
// Generate an ephemeral key pair.
|
|
||||||
const ephemeralPriv = window.NostrTools.generateSecretKey();
|
const ephemeralPriv = window.NostrTools.generateSecretKey();
|
||||||
const ephemeralPubHex = window.NostrTools.getPublicKey(ephemeralPriv);
|
const ciphertext = await window.NostrTools.nip04.encrypt(
|
||||||
|
ephemeralPriv, targetPubHex, content
|
||||||
|
);
|
||||||
|
|
||||||
// Encrypt the content using NIP-04.
|
|
||||||
const ciphertext = await window.NostrTools.nip04.encrypt(ephemeralPriv, targetPubHex, content);
|
|
||||||
|
|
||||||
// Build the event template (kind 4 for DMs).
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
const now = Math.floor(Date.now() / 1000);
|
||||||
const eventTemplate = {
|
const eventTemplate = {
|
||||||
kind: 4,
|
kind: 4,
|
||||||
@@ -144,10 +171,7 @@ ${message}
|
|||||||
content: ciphertext,
|
content: ciphertext,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Finalize the event (this computes the event ID and signature).
|
|
||||||
const event = window.NostrTools.finalizeEvent(eventTemplate, ephemeralPriv);
|
const event = window.NostrTools.finalizeEvent(eventTemplate, ephemeralPriv);
|
||||||
|
|
||||||
// Publish the event to the relays.
|
|
||||||
await Promise.any(pool.publish(RELAYS, event));
|
await Promise.any(pool.publish(RELAYS, event));
|
||||||
|
|
||||||
resultDiv.textContent = "Success: Your message has been sent.";
|
resultDiv.textContent = "Success: Your message has been sent.";
|
||||||
|
|||||||
Reference in New Issue
Block a user