Demo Click Disini
Style Css :
div#dataInfo *,textarea,input[id='title']{display:block;}
textarea{width:100%;height:500px;}
input[id='title']{width:100%;margin:12px 0;padding:10px 0;text-align:center;}
input[type='submit']{width:100%;padding:8px;margin:12px 0 0;cursor:pointer;}
div#addtionalServer,div#addtionalDownload{margin:12px 0;}
.flex{display:flex!important;justify-content:space-between;gap:12px;}
.flex div#dataInfo{width:100%;}
.itemExtend{margin:6px 0;}
:is(#serverServer,#serverDownload) .flex{align-items:center;}
:is(#serverServer,#serverDownload) input{margin:5px 0 0;}
:is(#serverServer,#serverDownload) #deleteBtn{cursor:pointer;padding:4px 6px;background:red;color:white;border-radius:3px;}
:is(#serverServer,#serverDownload) #deleteBtn:hover{background:black;color:red;}
.alert{position:fixed;bottom:0;left:0;background:red;color:white;padding:8px 12px;text-align:center;border-radius:0 4px 4px 0;font-weight:800;font-size:18px;}
Markup HTML :
<div id='dataInfo'>
<h4>IMDB ID : </h4>
<input type='text' id='idIMDB' placeholder='IMDB ID'/>
</div>
<div class='flex'>
<div id='dataInfo'>
<h4>MENU Server : </h4>
<input type='link' id='GDFRAME' placeholder='GDFRAME'/>
<input type='link' id='HYDRAX' placeholder='HYDRAX'/>
<div id='addtionalServer' class='flex'>
<button id='add'>Add</button>
<button id='remove'>Remove All</button>
</div>
<div id='serverServer'></div>
</div>
<div id='dataInfo'>
<h4>MENU Download : </h4>
<input type='link' id='Acefile' placeholder='Acefile'/>
<input type='link' id='Sharepw' placeholder='Sharepw'/>
<div id='addtionalDownload' class='flex'>
<button id='add'>Add</button>
<button id='remove'>Remove All</button>
</div>
<div id='serverDownload'></div>
</div>
</div>
<input type='submit' id='submit'/>
<input type='text' id='title' placeholder='Marvel The Marvel'/>
<div class='flex'>
<textarea id='result' placeholder='structure post'></textarea>
<textarea id='label' placeholder='label post'></textarea>
</div>
Script.js :
// Data Optional
let newDownload = 0,newServer = 0,apikey = '95cc8ace';
const quality = 'HD',index = 'Miss_Index';
function remover(selector) {
setTimeout(function(){document.getElementById(selector).remove();},2000);
}
// Event Trigger Server
document.getElementById('addtionalDownload').children[0].addEventListener('click',function(){
newDownload +=1;
const newTag = document.createElement('div');
newTag.id = `newDownload${newDownload}`;
newTag.className = 'flex itemExtend';
newTag.innerHTML = `<div><input type='link' class='linkDownload' placeholder='link'><input type='text' class='platformDownload' placeholder='Platform'></div><div id='deleteBtn' onclick='remove("newDownload${newDownload}")'>Detele</div>`
document.getElementById('serverDownload').appendChild(newTag)
});
document.getElementById('addtionalServer').children[1].addEventListener('click',function(){
document.getElementById('serverServer').innerHTML = '';
});
// Event Trigger Download
document.getElementById('addtionalServer').children[0].addEventListener('click',function(){
newServer +=1;
const newTag = document.createElement('div');
newTag.id = `newServer${newServer}`;
newTag.className = 'flex itemExtend';
newTag.innerHTML = `<div><input type='link' class='linkServer' placeholder='link'><input type='text' class='platformServer' placeholder='Server'></div><div id='deleteBtn' onclick='remove("newServer${newServer}")'>Detele</div>`
document.getElementById('serverServer').appendChild(newTag)
});
document.getElementById('addtionalDownload').children[1].addEventListener('click',function(){
document.getElementById('serverDownload').innerHTML = '';
});
document.getElementById('submit').addEventListener('click',function(){
let server = '',download='',GDFRAME = document.getElementById('GDFRAME').value,HYDRAX = document.getElementById('HYDRAX').value,Acefile = document.getElementById('Acefile').value,Sharepw = document.getElementById('Sharepw').value,label=[];
for(let o=0;o<document.getElementsByClassName('linkServer').length;o++){
server +=`<a href='${document.getElementsByClassName('linkServer')[o].value}' target='smartplay'>${document.getElementsByClassName('platformServer')[o].value}</a>\n`;
}
for(let o=0;o<document.getElementsByClassName('linkDownload').length;o++){
download +=`<a href='${document.getElementsByClassName('linkDownload')[o].value}' target='smartplay'>${document.getElementsByClassName('platformDownload')[o].value}</a>\n`;
}
fetch(`https://www.omdbapi.com/?apikey=${apikey}&i=${document.getElementById('idIMDB').value}`)
.then(res=> res.json())
.then(res=>{
label.push(quality);
label.push(res.Country);
label.push(res.Genre);
label.push(res.imdbRating);
label.push(res.Year);
document.getElementById('title').value = `${res.Title} (${res.Year})`;
document.getElementById('result').innerHTML = `<!--[ IMAGE BOX ]-->
<div class="separator" style="clear: both;"><a href="${res.Poster}" style="display: block; padding: 1em 0; text-align: center; "><img alt="${res.Title}" border="0" height="320" data-original-height="300" data-original-width="200" src="${res.Poster}"/></a></div>
<!--[ MENU SERVER ]-->
<div id='index-server'>
<a href='${GDFRAME}' id='firstplay' target='smartplay'>GDFRAME</a>
<a href='${HYDRAX}' target='smartplay'>HYDRAX</a>
${server}
</div>
<!--[ DOWNLOAD MENU ]-->
<div id='index-download'>
<a href='${Acefile}' target='_blank'>Acefile</a>
<a href='${Sharepw}' target='_blank'>SharerPw</a>
${download}
</div>
<!--[ POST INFO ]-->
<span id='index-quality'>${quality}</span>
<span id='index-country'>${res.Country}</span>
<span id='index-moviestar'>${res.Actors}</span>
<span id='index-director'>${res.Director}</span>
<span id='index-genres'>${res.Genre}</span>
<span id='index-imdb'>${res.imdbRating}</span>
<span id='index-published'>${res.Released}</span>
<span id='index-translator'>${index}</span>
<span id='index-synopsis'>${res.Plot}</span>`;
document.getElementById('label').value = label;
})
.catch(err=>alert('error'));
});
document.querySelector('input#title').addEventListener('click',function(){
const alert = document.createElement('div');
alert.id = 'titleCopied';
alert.className = 'alert';
if(this.value != ''){
this.select();
this.setSelectionRange(0, 99999);
navigator.clipboard.writeText(this.value);
alert.innerHTML =`<span class='title'>Title Copied...!!</div>`;
}else{
alert.innerHTML =`<span class='title'>Input is Empty...!!</div>`;
}
document.querySelector('body').appendChild(alert);
remover('titleCopied');
});
document.querySelector('textarea#result').addEventListener('click',function(){
const alert = document.createElement('div');
alert.id = 'resultCopied';
alert.className = 'alert';
if(this.value != ''){
this.select();
this.setSelectionRange(0, 99999);
navigator.clipboard.writeText(this.value);
alert.innerHTML =`<span class='title'>Post Structure Copied...!!</div>`;
}else{
alert.innerHTML =`<span class='title'>Post Structure is Empty...!!</div>`;
}
document.querySelector('body').appendChild(alert);
remover('resultCopied');
});
document.querySelector('textarea#label').addEventListener('click',function(){
const alert = document.createElement('div');
alert.id = 'labelCopied';
alert.className = 'alert';
if(this.value != ''){
this.select();
this.setSelectionRange(0, 99999);
navigator.clipboard.writeText(this.value);
alert.innerHTML =`<span class='title'>Label Copied...!!</div>`;
}else{
alert.innerHTML =`<span class='title'>Label is Empty...!!</div>`;
}
document.querySelector('body').appendChild(alert);
remover('labelCopied');
});
Untuk Full Structure :
<style>
div#dataInfo *,textarea,input[id='title']{display:block;}
textarea{width:100%;height:500px;}
input[id='title']{width:100%;margin:12px 0;padding:10px 0;text-align:center;}
input[type='submit']{width:100%;padding:8px;margin:12px 0 0;cursor:pointer;}
div#addtionalServer,div#addtionalDownload{margin:12px 0;}
.flex{display:flex!important;justify-content:space-between;gap:12px;}
.flex div#dataInfo{width:100%;}
.itemExtend{margin:6px 0;}
:is(#serverServer,#serverDownload) .flex{align-items:center;}
:is(#serverServer,#serverDownload) input{margin:5px 0 0;}
:is(#serverServer,#serverDownload) #deleteBtn{cursor:pointer;padding:4px 6px;background:red;color:white;border-radius:3px;}
:is(#serverServer,#serverDownload) #deleteBtn:hover{background:black;color:red;}
.alert{position:fixed;bottom:0;left:0;background:red;color:white;padding:8px 12px;text-align:center;border-radius:0 4px 4px 0;font-weight:800;font-size:18px;}
</style>
<div id='dataInfo'>
<h4>IMDB ID : </h4>
<input type='text' id='idIMDB' placeholder='IMDB ID'/>
</div>
<div class='flex'>
<div id='dataInfo'>
<h4>MENU Server : </h4>
<input type='link' id='GDFRAME' placeholder='GDFRAME'/>
<input type='link' id='HYDRAX' placeholder='HYDRAX'/>
<div id='addtionalServer' class='flex'>
<button id='add'>Add</button>
<button id='remove'>Remove All</button>
</div>
<div id='serverServer'></div>
</div>
<div id='dataInfo'>
<h4>MENU Download : </h4>
<input type='link' id='Acefile' placeholder='Acefile'/>
<input type='link' id='Sharepw' placeholder='Sharepw'/>
<div id='addtionalDownload' class='flex'>
<button id='add'>Add</button>
<button id='remove'>Remove All</button>
</div>
<div id='serverDownload'></div>
</div>
</div>
<input type='submit' id='submit'/>
<input type='text' id='title' placeholder='Marvel The Marvel'/>
<div class='flex'>
<textarea id='result' placeholder='structure post'></textarea>
<textarea id='label' placeholder='label post'></textarea>
</div>
<script>
// Data Optional
let newDownload = 0,newServer = 0,apikey = '95cc8ace';
const quality = 'HD',index = 'Miss_Index';
function remove(selector) {
setTimeout(function(){document.getElementById(selector).remove();},2000);
}
// Event Trigger Server
document.getElementById('addtionalDownload').children[0].addEventListener('click',function(){
newDownload +=1;
const newTag = document.createElement('div');
newTag.id = `newDownload${newDownload}`;
newTag.className = 'flex itemExtend';
newTag.innerHTML = `<div><input type='link' class='linkDownload' placeholder='link'><input type='text' class='platformDownload' placeholder='Platform'></div><div id='deleteBtn' onclick='remove("newDownload${newDownload}")'>Detele</div>`
document.getElementById('serverDownload').appendChild(newTag)
});
document.getElementById('addtionalServer').children[1].addEventListener('click',function(){
document.getElementById('serverServer').innerHTML = '';
});
// Event Trigger Download
document.getElementById('addtionalServer').children[0].addEventListener('click',function(){
newServer +=1;
const newTag = document.createElement('div');
newTag.id = `newServer${newServer}`;
newTag.className = 'flex itemExtend';
newTag.innerHTML = `<div><input type='link' class='linkServer' placeholder='link'><input type='text' class='platformServer' placeholder='Server'></div><div id='deleteBtn' onclick='remove("newServer${newServer}")'>Detele</div>`
document.getElementById('serverServer').appendChild(newTag)
});
document.getElementById('addtionalDownload').children[1].addEventListener('click',function(){
document.getElementById('serverDownload').innerHTML = '';
});
document.getElementById('submit').addEventListener('click',function(){
let server = '',download='',GDFRAME = document.getElementById('GDFRAME').value,HYDRAX = document.getElementById('HYDRAX').value,Acefile = document.getElementById('Acefile').value,Sharepw = document.getElementById('Sharepw').value,label=[];
for(let o=0;o<document.getElementsByClassName('linkServer').length;o++){
server +=`<a href='${document.getElementsByClassName('linkServer')[o].value}' target='smartplay'>${document.getElementsByClassName('platformServer')[o].value}</a>\n`;
}
for(let o=0;o<document.getElementsByClassName('linkDownload').length;o++){
download +=`<a href='${document.getElementsByClassName('linkDownload')[o].value}' target='smartplay'>${document.getElementsByClassName('platformDownload')[o].value}</a>\n`;
}
fetch(`https://www.omdbapi.com/?apikey=${apikey}&i=${document.getElementById('idIMDB').value}`)
.then(res=> res.json())
.then(res=>{
label.push(quality);
label.push(res.Country);
label.push(res.Genre);
label.push(res.imdbRating);
label.push(res.Year);
document.getElementById('title').value = `${res.Title} (${res.Year})`;
document.getElementById('result').innerHTML = `<!--[ IMAGE BOX ]-->
<div class="separator" style="clear: both;"><a href="${res.Poster}" style="display: block; padding: 1em 0; text-align: center; "><img alt="${res.Title}" border="0" height="320" data-original-height="300" data-original-width="200" src="${res.Poster}"/></a></div>
<!--[ MENU SERVER ]-->
<div id='index-server'>
<a href='${GDFRAME}' id='firstplay' target='smartplay'>GDFRAME</a>
<a href='${HYDRAX}' target='smartplay'>HYDRAX</a>
${server}
</div>
<!--[ DOWNLOAD MENU ]-->
<div id='index-download'>
<a href='${Acefile}' target='_blank'>Acefile</a>
<a href='${Sharepw}' target='_blank'>SharerPw</a>
${download}
</div>
<!--[ POST INFO ]-->
<span id='index-quality'>${quality}</span>
<span id='index-country'>${res.Country}</span>
<span id='index-moviestar'>${res.Actors}</span>
<span id='index-director'>${res.Director}</span>
<span id='index-genres'>${res.Genre}</span>
<span id='index-imdb'>${res.imdbRating}</span>
<span id='index-published'>${res.Released}</span>
<span id='index-translator'>${index}</span>
<span id='index-synopsis'>${res.Plot}</span>`;
document.getElementById('label').value = label;
})
.catch(err=>alert('error'));
});
document.querySelector('input#title').addEventListener('click',function(){
const alert = document.createElement('div');
alert.id = 'titleCopied';
alert.className = 'alert';
if(this.value != ''){
this.select();
this.setSelectionRange(0, 99999);
navigator.clipboard.writeText(this.value);
alert.innerHTML =`<span class='title'>Title Copied...!!</div>`;
}else{
alert.innerHTML =`<span class='title'>Input is Empty...!!</div>`;
}
document.querySelector('body').appendChild(alert);
remover('titleCopied');
});
document.querySelector('textarea#result').addEventListener('click',function(){
const alert = document.createElement('div');
alert.id = 'resultCopied';
alert.className = 'alert';
if(this.value != ''){
this.select();
this.setSelectionRange(0, 99999);
navigator.clipboard.writeText(this.value);
alert.innerHTML =`<span class='title'>Post Structure Copied...!!</div>`;
}else{
alert.innerHTML =`<span class='title'>Post Structure is Empty...!!</div>`;
}
document.querySelector('body').appendChild(alert);
remover('resultCopied');
});
document.querySelector('textarea#label').addEventListener('click',function(){
const alert = document.createElement('div');
alert.id = 'labelCopied';
alert.className = 'alert';
if(this.value != ''){
this.select();
this.setSelectionRange(0, 99999);
navigator.clipboard.writeText(this.value);
alert.innerHTML =`<span class='title'>Label Copied...!!</div>`;
}else{
alert.innerHTML =`<span class='title'>Label is Empty...!!</div>`;
}
document.querySelector('body').appendChild(alert);
remover('labelCopied');
});
</script>
Ini Request-an Jadi theme kalian belum tentu cocok.
https://www.forum.projexcode.com/2022/09/request-link-ke-halaman-info-post.html
Similar Threads