<div class="share-container">
<button id="share-btn" class="share-btn">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
Share this page
</button>
<p id="message"></p>
</div>
* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f8fafc;
}
.share-btn {
display: flex;
align-items: center;
gap: 10px;
background: #2563eb;
color: white;
border: none;
padding: 12px 24px;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.share-btn:hover { background: #1d4ed8; }
#message {
margin-top: 10px;
color: #64748b;
font-size: 0.9rem;
text-align: center;
}
const btn = document.getElementById("share-btn");
const msg = document.getElementById("message");
btn.addEventListener("click", async () => {
if (navigator.share) {
try {
await navigator.share({
title: "Check this out!",
text: "I found this amazing snippet.",
url: window.location.href
});
msg.textContent = "Thanks for sharing!";
} catch (err) {
msg.textContent = "Share cancelled.";
}
} else {
// Fallback for desktop or unsupported browsers
// In a real app, you might open a modal or copy link here
msg.textContent = "Web Share API not supported on this device.";
// Simple fallback: Copy URL
navigator.clipboard.writeText(window.location.href);
setTimeout(() => msg.textContent = "Link copied to clipboard!", 500);
}
});
