<style>
.status {
height: 3px;
width: 3em;
border-radius: 1px;
background-color: inherit;
animation-duration: 1s;
animation-timing-function: ease-in-out;
margin: 3px auto 6px 4px;
}
@keyframes success {
0% {
background-color: inherit;
}
10% {
background-color: rgb(18, 206, 96);
;
}
100% {
background-color: inherit;
}
}
@keyframes fail {
0% {
background-color: inherit;
}
10% {
background-color: rgb(221, 55, 13);
;
}
100% {
background-color: inherit;
}
}
</style>
</head>
<svg style='width:100%;height:70px;margin-bottom:30px;' class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'/><polyline class='svgC' points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg>
<div id="cArea">
<div>
<input id="link-to" type="text" placeholder="Enter your link" />
</div>
<!--[Config]-->
<div id="advanced" style="display:none;">
<label>Input your redirect page link</label>
<br>
<input id="link-page" type="text" value="
https://freeplayme.blogspot.com/p/r2.html"disabled="">
</div>
</div>
<div id="">
<button id="create-link" class="button">Generate</button>
<div class="status" id="notifi"></div>
</div>
<div id="cArea">
<textarea id="result" style="word-break: break-all;"
onkeyup="document.getElementById('open').href = this.value || 'javascript:0'"></textarea>
<div>
<a name="result" class="copy-btn button" href="javascript:()">Copy</a>
<a id="open" class="copy-btn outline button" target="_blank">Open</a>
</div>
</div>
<script>
function validate() {
if (document.getElementById("link-to").value.length == 0) {
return false
}
if (document.getElementById("link-page").value.length == 0) {
return false
}
return true
}
var notifi = document.getElementById("notifi");
document.getElementById("create-link").addEventListener("click", () => {
if (!validate()) {
document.getElementById("result").value = "";
notifi.style["animation-name"] = null;
notifi.offsetHeight;
notifi.style["animation-name"] = "fail";
return;
}
var linkPage = document.getElementById("link-page").value.trim();
var linkTo = document.getElementById("link-to").value.trim();
linkTo = linkTo.replace(/^((?!(\w+:))(\/\/)?)/, "http://"); // auto add http://
var data = {
url: linkTo,
},
base = btoa(encodeURIComponent(JSON.stringify(data))).replace(/={1,}$/, ""),
queryVal = "~" + "=" + base,
result;
if (linkPage.indexOf("#") != -1) {
var urlAndHash = linkPage.split("#", 2);
if (urlAndHash[0].indexOf("?") != -1) {
result = urlAndHash[0] + "&" + queryVal + "#" + urlAndHash[1];
}
else {
result = urlAndHash[0] + "?" + queryVal + "#" + urlAndHash[1];
}
} else {
if (linkPage.indexOf("?") != -1) {
result = linkPage + "&" + queryVal;
}
else {
result = linkPage + "?" + queryVal;
}
}
document.getElementById("result").value = result;
document.getElementById("open").href = result;
notifi.style["animation-name"] = null;
notifi.offsetHeight;
notifi.style["animation-name"] = "success";
});
//@ntdm11 :>
</script>
<script>
var a = document.getElementsByClassName('copy-btn');
for (let i = 0; i < a.length; i++) {
a[i].addEventListener('click', function () {
var b = a[i].getAttribute("name");
var text = document.getElementById(b);
text.select();
document.execCommand('copy');
});
}
</script>