| | <!DOCTYPE html> |
| | <html lang="id"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Ark Re Code Scraper</title> |
| | <link rel="stylesheet" href="style.css"> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <h1>Ark Re Code Scraper</h1> |
| | |
| | <label for="charName">Cari Karakter:</label> |
| | <input type="text" id="charName" placeholder="Masukkan nama karakter..."> |
| | <button onclick="fetchData()">Cari</button> |
| |
|
| | <div id="result"></div> |
| | </div> |
| |
|
| | <script> |
| | async function fetchData() { |
| | const charName = document.getElementById("charName").value; |
| | const resultDiv = document.getElementById("result"); |
| | |
| | if (!charName) { |
| | resultDiv.innerHTML = "<p>Masukkan nama karakter terlebih dahulu!</p>"; |
| | return; |
| | } |
| | |
| | try { |
| | const response = await fetch(`http://localhost:3000/api?name=${charName}`); |
| | const data = await response.json(); |
| | |
| | if (data.error) { |
| | resultDiv.innerHTML = `<p>${data.error}</p>`; |
| | return; |
| | } |
| | |
| | let output = "<h2>Hasil Pencarian:</h2>"; |
| | |
| | if (data.skills) { |
| | output += `<h3>Skill & Discipline</h3>`; |
| | output += `<p>Karakter: ${data.skills.Karakter}</p>`; |
| | output += `<p>Link Skill 3: <a href="${data.skills.Skill3}" target="_blank">${data.skills.Skill3}</a></p>`; |
| | output += `<p>Link Idle + Tap: <a href="${data.skills.Tap}" target="_blank">${data.skills.Tap}</a></p>`; |
| | } |
| | |
| | if (data.story) { |
| | output += `<h3>Story Part II</h3>`; |
| | output += `<p>Member: ${data.story.Member}</p>`; |
| | output += `<p>Video: <a href="${data.story.Video}" target="_blank">${data.story.Video}</a></p>`; |
| | } |
| | |
| | if (data.chatAnimations) { |
| | output += `<h3>Chat Animations</h3>`; |
| | output += `<p>Karakter: ${data.chatAnimations.Karakter}</p>`; |
| | output += `<p>Video: <a href="${data.chatAnimations.Video}" target="_blank">${data.chatAnimations.Video}</a></p>`; |
| | } |
| | |
| | if (data.illustration) { |
| | output += `<h3>Illustrations</h3>`; |
| | output += `<p>Karakter: ${data.illustration.Karakter}</p>`; |
| | output += `<img src="${data.illustration.Image}" alt="Illustration" width="300">`; |
| | } |
| | |
| | resultDiv.innerHTML = output; |
| | } catch (error) { |
| | resultDiv.innerHTML = "<p>Gagal mengambil data.</p>"; |
| | } |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
