| <!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> |
|
|
