<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
:root {
--primary: #015478;
--white: #fff;
--icon-clr: #aaaaaa;
--facebook-clr: #3b5998;
--twitter-clr: #55acee;
--instagram-clr: #bc2a8d;
--reddit-clr: #ff4500;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Open Sans", sans-serif;
user-select: none;
}
.ss_wrap {
position: relative;
margin: 0px !important;
}
.ss_wrap .ss_btn {
background: var(--white);
color: var(--icon-clr);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
font-size: 1.4rem;
border-radius: 3px;
cursor: pointer;
}
.ss_btn .icon {
display: flex;
}
.dd_list .icon{
font-size: 1.3rem;
}
.ss_wrap .dd_list {
position: absolute;
}
.ss_wrap .dd_list ul {
display: none;
width: auto;
background: var(--white);
margin: 0 10px;
box-shadow: 0px 0px 20px #ededed;
border-radius: 3px;
position: relative;
}
.ss_wrap .dd_list ul li a {
display: flex;
width: 50px;
height: 50px;
margin: 0 10px;
justify-content: center;
align-items: center;
color: var(--icon-clr);
}
.ss_wrap .dd_list ul:before {
content: "";
position: absolute;
border: 8px solid;
}
/* social share 3 */
.ss_wrap.ss_wrap_3 {
display: flex;
justify-content: center;
align-items: center;
}
.ss_wrap.ss_wrap_3 .dd_list {
top: 50px;
left: 50%;
transform: translateX(-50%);
}
.ss_wrap.ss_wrap_3 .dd_list ul {
flex-direction: column;
width: 175px;
border-radius: 3px;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a {
width: 100%;
margin: 0;
justify-content: unset;
padding: 0 10px;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a span {
display: flex;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a span.icon {
width: 25px;
margin-right: 10px;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a span.text {
width: 125px;
}
.ss_wrap.ss_wrap_3 .dd_list ul:before {
top: -15px;
left: 50%;
transform: translateX(-50%);
border-color: transparent transparent var(--primary) transparent;
}
.ss_wrap.ss_wrap_3 .icon{
color: black;
}
.ss_wrap.ss_wrap_3 span.text:hover {
color: var(--primary);
}
.ss_wrap .ss_btn.active + .dd_list ul {
display: flex;
}
</style>
</head>
<body>
<div class="social_share_wrap">
<div class="ss_wrap ss_wrap_3">
<div class="ss_btn">
<span class="icon">
<ion-icon name="share-social"></ion-icon>
</span>Share
</div>
<div class="dd_list">
<ul>
<li><a href="#" class="facebook" onclick="shareFacebook()">
<span class="icon">
<ion-icon name="logo-facebook"></ion-icon>
</span>
<span class="text">
Facebook
</span>
</a></li>
<li><a href="#" class="whatsapp" onclick="shareWhatsapp()">
<span class="icon">
<ion-icon name="logo-whatsapp"></ion-icon>
</span>
<span class="text">
Whatsapp
</span>
</a></li>
<li><a href="#" class="email" onclick="shareEmail()">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<span class="text">
Email
</span>
</a></li>
<li><a href="#" class="sms" onclick="shareSMS()">
<span class="icon">
<ion-icon name="chatbox"></ion-icon>
</span>
<span class="text">
SMS
</span>
</a></li>
<li><a href="#" class="copy-link" onclick="copyLink()">
<span class="icon">
<ion-icon name="copy"></ion-icon>
</span>
<span class="text">
Copy Link
</span>
</a></li>
</ul>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var ss_btn_3 = document.querySelector(".ss_wrap_3 .ss_btn");
var dd_list_3 = document.querySelector(".ss_wrap_3 .dd_list");
ss_btn_3.addEventListener("click", function (event) {
event.stopPropagation();
this.classList.toggle("active");
});
dd_list_3.addEventListener("click", function (event) {
event.stopPropagation();
});
// Add an event listener to close the dropdown when clicking anywhere outside
document.addEventListener('click', function () {
ss_btn_3.classList.remove("active");
});
// Prevent event propagation when clicking on icons
var icons = document.querySelectorAll(".ss_wrap_3 .icon");
icons.forEach(function (icon) {
icon.addEventListener("click", function (event) {
event.stopPropagation();
});
});
});
function showCopiedMessage() {
alert('Link Copied');
}
function shareFacebook() {
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href));
}
function shareWhatsapp() {
window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(window.location.href));
}
function shareEmail() {
window.open('mailto:?body=Check this out: ' + encodeURIComponent(window.location.href));
}
function shareSMS() {
window.open('sms:&body=' + encodeURIComponent(window.location.href));
}
function copyLink() {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = window.location.href;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
// Show the "Link Copied" message
showCopiedMessage();
}
// Add an event listener to close the share box when clicking anywhere on the screen
document.body.addEventListener('click', function (event) {
// Check if the click is outside the share box
var shareBox = document.querySelector('.social_share_wrap');
if (!shareBox.contains(event.target)) {
// Clicked outside the share box, close it
var ss_btn = document.querySelector(".ss_wrap_3 .ss_btn");
ss_btn.classList.remove("active");
}
});
</script>
</body>
</html>
