ProjeXCode Forum: [Request By Anime Lore] Post Generator Median UI (Custom Theme)

February 16, 2022

Share this Threads

Reuqest Dari Anime Lore

Tambahkan CSS pada class Tag Body :

counter-reset: section;

CSS Style :

#default{display:none;}
#row1{display: grid;grid-template-columns: repeat(3,minmax(auto,auto));grid-gap: 12px;}
#dataInput span{display:block;}
#row1 #dataInput input{width:100%;}
#addtionalGenre span:nth-child(1){margin-top:0;}
#addtionalGenre span{margin-top:12px;}
#row2{display: grid;grid-template-columns: repeat(2,minmax(auto,auto));margin-top: 18px;}
#row2 #dataInput input#musim{width:80%;}
#row3{display: grid;grid-template-columns: repeat(2,auto);margin-top:8px;margin-bottom: 12px;}
#row3 #dataInput input{width:80%;}
#btnGenre{display: flex;margin-top: 12px;gap: 10px;align-items: center;}
#addtionalGenre span::before {
  counter-increment: section;
  content: counter(section) " :";
}
#btnGenre span:nth-child(1) {
        padding: 6px 12px;
        background: white;
        color: black;
        border-radius: 8px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        cursor: pointer;
        border: 2px solid red;
}

#btnGenre span:nth-child(2) {
        padding: 6px 12px;
        background: red;
        color: white;
        border-radius: 8px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        cursor: pointer;
}
#Batch span:nth-child(1),#Soundtrack span:nth-child(1){margin-bottom: 8px;display: block;}
#sinopsi{width: 100%;height: 60vh;}
#areaRes{width: 100%;height: 100vh;}
#addtionalGenre input{width:100%;}
#copied{border-radius: 8px;text-align: center;}
#btnRes{padding: 10px;width: 100%;text-align: center;font-size: 18px;font-weight: 800;background: red;border-radius: 8px;color: white;margin-bottom: 8px;cursor: pointer;text-transform: uppercase;}

HTML Structure

  <div id="row1">
    <div id='dataInput'>
<span>Name Anime :</span>
<input id='nameAnime' type='text' placeholder="Nama Anime"/>
    </div>
<div id='dataInput'>
    <span>Image URL :</span>
<input id='imageURL' type='text' placeholder="URL Gambar"/>
 </div>
<div id='dataInput'>
  <span>Youtube ID :</span>
<input id='youtubeID' type='text' placeholder="Video ID"/>
</div>
 <div id='dataInput'>
<span>Tipe :</span>
    <input id='type' type='text' placeholder="Tipe Anime"/>
</div>
 <div id='dataInput'>
<span>Durasi :</span>
  <input id='durasi' type='text' placeholder="Durasi Anime"/>
</div>
<div id='dataInput'>
    <span>Episode :</span>
     <input id='episode' type='text' placeholder="Episode Anime"/>
    </div>
<div id='dataInput'>
    <span>Studio :</span>
    <input id='studio' type='text' placeholder="Studio Anime"/>
</div>
<div id='dataInput'>
    <span>Sumber :</span>
    <input id='sumber' type='text' placeholder="Sumber Anime"/>
</div>
<div id='dataInput'>
    <span>Rating :</span>
    <input id='rating' type='text' placeholder="Rating Anime"/>
</div>
</div>
<div id="row2">
<div id='dataInput'>
    <span>Musim :</span>
    <div>
        <input class='musimRadio' id='Fall' type="radio" name='musim' value='Fall'/>
        <label for="Fall">Fall</label>
        <input class='musimRadio' id='Summer' type="radio" name='musim' value='Summer'/>
        <label for="Summer">Summer</label>
        <input class='musimRadio' id='Winter' type="radio" name='musim' value='Winter'/>
        <label for="Winter">Winter</label>
        <input class='musimRadio' id='Spring' type="radio" name='musim' value='Spring'/>
        <label for="Spring">Spring</label>
    </div>
    <span>Tahun :</span>
    <input id='musim' type='text' placeholder="Isi Tahun Aja"/>
</div>
<div id='dataInput'>
    <span>Genre :</span>
    <span id="addtionalGenre"><span class='spangenre'><input class="genre" id="genre" type="text" placeholder="1 Input 1 Genre"/></span></span>
    <div id="btnGenre">
        <span>Add</span>
        <span>Remove</span>
    </div>
</div>
</div>
<div id='dataInput'>
    <span>Sinopsi :</span>
    <textarea id='sinopsi' type='text'></textarea>
</div>
<div id="row3">
    <div id="Batch">
        <span>Batch</span>
<div id='dataInput'>
    <span>Resolusi :</span>
    <input id='resolusi' type='text'/>
</div>
<div id='dataInput'>
    <span>Link :</span>
    <input id='linkBatch' type='text'/>
</div>
</div>
<div id="Soundtrack">
    <span>Soundtrack</span>
<div id='dataInput'>
<span>Size :</span>
<input id='size' type='text'/>
</div>
<div id='dataInput'>
    <span>Link :</span>
    <input id='linkSoundtrack' type='text'/>
    </div>
</div>
</div>
<div id="btnRes">
    <span>Result</span>
</div>
<div id="copied"></div>
<textarea id='areaRes'></textarea>
    <div id='default'>
    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhAWEgjfIk2hS_lrruNSf08ykwTgLVwNVDc0etiVYCe4saJgeDZ9lLDzpkKQbztrCQM5J8k5bzdVjA8rCSyX5OhwA4dYN9rESVTnTZaKUdEkEobgnjIn4SecZ0F2CyFKfc2SOLD_drpBU79gnAsxjHsaYSVt0jb9BJxyNzaXzrNzFxHd-kyqa7jBEBEGw" style="display: none;" />

<div class="lazyYoutube" data-embed="bUtDhdVhUkI"><div class="playBut"><svg class="svg-play" viewbox="0 0 213.7 213.7">
<polygon class="triangle" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="circle" cx="106.8" cy="106.8" r="103.3"></circle></svg></div></div>

<p style='font-size: 12px; margin-top: 0px; text-align: center;' class="title-trailer">Trailer Adachi to Shimamura</p>





<input checked="" class="allTabs hidden" id="forall-tabs1" name="postTabs" type="radio" />
<input class="allTabs hidden" id="forall-tabs2" name="postTabs" type="radio" />
<input class="allTabs hidden" id="forall-tabs3" name="postTabs" type="radio" />

<div class="postTabs">
<div class="tabsHead">
<label data-text="Info &amp; Detail"></label><label data-text="Sinopsis Anime"></label>
<label data-text="Tautan Download"></label>
</div>





<div class="tabsContent">
<div class="tabsContent-1">
<div class="info"><div class="box">
<span><b>Tipe</b>TV (BD Version)</span>
<span><b>Durasi</b>22 Menit</span>
<span><b>Episode</b>12 Episode</span>
<span><b>Musim</b><a href="/search/label/Fall 2020">Fall 2020</a></span>
<span><b>Studio</b><a href="/search/label/Tezuka Productions">Tezuka Productions</a></span>
<span><b>Sumber</b>Light novel</span>
<span><b>Genre</b>Romantic</span>
<span><b>Rating</b>Remaja</span>
</div></div></div>





<div class="tabsContent-2">
<p style="font-size: 15px; margin-top: -13px; text-align: justify;">
Lantai dua ruang olahraga, tempat Adachi dan Shimamura bertemu. Meski dalam waktu pelajaran, keduanya sering bolos dan menghabiskan waktu mereka untuk nongkrong dan ngobrol di sini. Namun, perlahan hubungan persahabatan mereka berubah...</p>
</div>




<div class="tabsContent-3" style="margin-top: -10px;">
<h6 style="margin-bottom: -10px;">Download Batch</h6>
<div class="downloadInfo">
<span class="fileType" data-text="rar"></span><div class="fileName resolusi"><span>Adachi to Shimamura Batch</span>
<span class="fileSize">1080p</span></div>
<a aria-label="Download" class="button fileLink" href="https://drive.google.com/file/d/1-AZlNycw2FVAcho7JrybiVMMC1_Ch4dB"><i class="icon download"></i></a>
</div>


<h6 style="margin-bottom: -10px;">Download Soundtrack</h6>
<div class="downloadInfo">
<span class="fileType" data-text="zip"></span><div class="fileName soundtrack"><span>Soundtrack Adachi to Shimamura</span>
<span class="fileSize">51 MB</span></div>
<a aria-label="Download" class="button fileLink" href="https://drive.google.com/file/d/10ta5JcC3svChXx1NSXU-BOKvY65uMH6P"><i class="icon download"></i></a>
</div></div></div>




<p class="note note"><b>Pemberitahuan</b><br />
Jika terdapat tautan yang error, silahkan laporkan di halaman <a href="/p/kontak.html" target="_blank">kontak</a>.</p></div>
</div>

Script JS

$('#btnGenre span:nth-child(1)').click(function(){
       $('#addtionalGenre').append('<span class="spangenre"><input class="genre" id="genre" type="text" placeholder="1 Input 1 Genre"/></span>')
        })

        $('#btnGenre span:nth-child(2)').each(function(){
  $(this).click(function(){
  var data = document.getElementsByClassName('spangenre');
  for(var i = 0; i < data.length;i++){
   var datas = data[i];
    }
        data.length > 1 && datas.remove()
  })
});
$('#btnRes').click(function(){
// Get Value From Input
var addGenre = [],
addMusim = [];
let nameAnime = $('#nameAnime').val(),
imageURL = $('#imageURL').val(),
youtubeID = $('#youtubeID').val(),
tipe = $('#type').val(),
durasi = $('#durasi').val(),
episode = $('#episode').val(),
musim = $('#musim').val(),
musimRadio = document.getElementsByClassName('musimRadio'),
studio = $('#studio').val(),
sumber = $('#sumber').val(),
genre = document.getElementsByClassName('genre'),
rating = $('#rating').val(),
batch = $('#linkBatch').val(),
size = $('#size').val(),
resolusi = $('#resolusi').val(),
soundtrack = $('#linkSoundtrack').val(),
sinopsi = $('#sinopsi').val();

// Getting Musim Value Using Loop
for(var e=0;e<musimRadio.length;e++){
    if(musimRadio[e].checked){
    addMusim.push(musimRadio[e].value + ' ' + musim);
    }
}

// Getting Genre Value Using Loop
for(var i=0;i<genre.length;i++){
    addGenre.push(genre[i].value);
}

// Append Data
$('#default img').attr('src',imageURL)
$('.lazyYoutube').attr('data-embed', youtubeID)
$('.title-trailer').html('Trailer '+ nameAnime)
$('.tabsContent-1 .box span:nth-child(1)').html('<b>Tipe</b>'+tipe)
$('.tabsContent-1 .box span:nth-child(2)').html('<b>Durasi</b>'+durasi)
$('.tabsContent-1 .box span:nth-child(3)').html('<b>Episode</b>'+episode)
$('.tabsContent-1 .box span:nth-child(4)').html('<b>Musim</b><a href="/search/label/'+addMusim+'">'+addMusim+'</a>')
$('.tabsContent-1 .box span:nth-child(5)').html('<b>Studio</b><a href="/search/label/'+studio+'">'+studio+'</a>')
$('.tabsContent-1 .box span:nth-child(6)').html('<b>Sumber</b>'+sumber)
$('.tabsContent-1 .box span:nth-child(7)').html('<b>Genre</b>'+addGenre)
$('.tabsContent-1 .box span:nth-child(8)').html('<b>Rating</b>'+rating)
$('.tabsContent-2 p').html(sinopsi)
$('.tabsContent-3 .resolusi').html(nameAnime)
$('.tabsContent-3 .soundtrack').html('Soundtrack '+nameAnime)
$('.fileSize:nth-child(1)').html(resolusi)
$('.fileSize:nth-child(2)').html(size)
$('.fileLink:nth-child(1)').html(batch)
$('.fileLink:nth-child(2)').html(soundtrack)
// Result Data
let res = $('#default').html();
$('#areaRes').val(res)
})
$('#areaRes').on("click",function(){
    var copyText = document.getElementById("areaRes");
    var statues = document.getElementById('copied');
    statues.style.marginBottom = '15px';
    statues.style.padding = '15px';
    if(!copyText.value){
      statues.innerHTML = 'Not Copied, Field Empty'
      statues.style.color = 'red';
      statues.style.background = '#ffbdbd';
    }else{
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
    statues.innerHTML = 'Successfull Copied'
    statues.style.color = 'Green';
    statues.style.background = '#9cff9c';
    }
  })

Demo Cek Disini

Zets

Status

Sun Feb 27, 12:10:00 AM GMT+9

Bro, Gue Coba Full Copy Di Post Tapi Gak Work. Outout Gak Keluar

김서정

Sun Feb 27, 07:20:00 AM GMT+9

di situsmu udah di pasang Jquery Library belum ?
kalo belum taruh ini diatas tag </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Wed Mar 02, 11:56:00 PM GMT+9

Sudah Saya Pasang Bro, Dan Hasilnya Sama Saja
Seperti Ini https://downloadanimeloreid.blogspot.com/p/test.html

Apakah Ada Solusi Sobat?

Thu Mar 03, 12:10:00 AM GMT+9

tag penutup scriptnya gada itu, coba dicek lgi

Thu Mar 03, 01:52:00 AM GMT+9

My Bad. Thanks Gan Atas Perhatiannya

Thu Mar 03, 09:52:00 AM GMT+9

Sama2,thanks udah request juga

audi sw

Wed Apr 20, 10:34:00 PM GMT+9

min bisa gak kalau dibuat mal generator yang dari request-by-anime-lore-post-generator kalau bisa sih disama kan sama yang diweb site saya di https://koitonime.blogspot.com/2022/01/cue.html

Thu Apr 21, 03:05:00 AM GMT+9

harus diganti output dalam scriptnya

Thu Apr 21, 08:00:00 AM GMT+9

maksud saya mal grabber nya kayak punya [Request By Dani_Edtz_] Post Generator KumaStream With MAL Grabber tapi html strukturnya diganti mirip request-by-anime-lore-post-generator tapi dibedakan dikit kalau bisa disama kan diweb saya https://koitonime.blogspot.com/2022/01/cue.html

Fri Apr 22, 02:25:00 PM GMT+9

iya aku tau dari awal maksudmu tpi itu harus di ubah selector dalam script js, agar result nya nnti menjadi structure mu

Fri Apr 22, 10:23:00 PM GMT+9

kalau gitu toturial nya gimana min gak paham saya

Similar Threads

Request Tools [Request By Anime Lore] Post Generator Median UI (Custom Theme)

Title Role Staff

Title Role Senior Member

Title Role Member

Title Role Junior Member

Title Role New Member

Title Badge Moderator

Title Color Moderator

Title Badge Staff

Title Color Staff

Title Badge Member

Title Color Member

Status Info

Status Verified

ADS Title User

Similar Threads