<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script>
CriandoIcons("facebook","skype","telegram","yandex","google","instagram","whatsapp","paypal",
"bradesco","itau","patreon","bitcoin","twitter","mercadopago");
BotoesDenuncia();
</script>
@import "https://use.fontawesome.com/releases/v5.4.1/css/all.css";
button{
margin: 5px;
}
body{
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}
let emailC="vostrikovalxsycc@gmail.com";
let icon=[];
let uri=[];
//let ext=["http://www.","https://www.","https://mail.","https://web.","https://.org",".com"];
let url=["https://www.facebook.com/animale","https://www.instagram.com/animale","https://mail.yandex.com/?uid=869376094#compose",
"https://mail.google.com/mail/?view=cm&fs=1&tf=1&to="+emailC+"&su=DenunciaAnimale&body=my-text&ui=2&tf=1&pli=1",
"https://web.telegram.org","https://www.skype.com","https://chat.whatsapp.com/animale/","https://www.patreon.com/animale",
"https://www.bitcoin.com/","https://www.paypal.com/animale","https://www.mercadopago.com.br/animale",
"https://pagueseguro.uol.com.br/animale","https://www.visa.com/animale","https://www.bradesco.com/animale","https://www.itau.com/animale",
"https://www.twitter.com/animale"];
function CriandoIcons(...args){
for(j=0;j<args.length;j++)
for(i=0;i<url.length;i++)
// for(k=0;k<ext.length;k++)
if(url[i].split(/[/?#]/)[2].replace(/^\w+./,"").length>15){
if(args[j]==url[i].split(/[/?#]/)[2].replace(/(.\w+){1,3}$/,"").replace(/^\w+./,""))
icon.push(url[i].split(/[/?#]/)[2].replace(/(.\w+){1,3}$/,"").replace(/^\w+./,""));
}else{
if(args[j]==url[i].split(/[/?#]/)[2].replace(/(.\w+){1}$/,"").replace(/^\w+./,""))
icon.push(url[i].split(/[/?#]/)[2].replace(/(.\w+){1}$/,"").replace(/^\w+./,""));
}
}
function BoobleSort() {
icon.sort();
for(j=0;j<icon.length;j++)
for(i=0;i<url.length;i++)
if(url[i].split(/[/?#]/)[2].replace(/^\w+./,"").length>15){
if(icon[j]==url[i].split(/[/?#]/)[2].replace(/(.\w+){1,3}$/,"").replace(/^\w+./,""))
uri.push(url[i]);
}
else{
if(icon[j]==url[i].split(/[/?#]/)[2].replace(/(.\w+){1}$/,"").replace(/^\w+./,""))
uri.push(url[i]);
// alert(uri.toString());
}
}
function genericSocialShare(i){
window.open(uri[i],'sharer','toolbar=0,status=0,width=648,height=395');
return true;
}
function BotoesDenuncia(){
BoobleSort();
document.writeln("<div class='middle'>");
for(i=0;i<icon.length;i++)
document.write("<button onclick=genericSocialShare("+i+") style='margin:8px;'><i class='fab fa-"+icon[i]+"'> "+icon[i]+"</i></button>");
document.writeln("</div>");
}
function LinkDenuncia(){
BoobleSort();
document.writeln("<div class='middle'>");
for(i=0;i<icon.length;i++)
document.write("<a class='btn' onclick=genericSocialShare("+i+")><i class='fab fa-"+icon[i]+"'>"+icon[i]+"</i></a>");
document.writeln("</div>");
}
