Video

Ark ReCode/index.html

@@ -18,37 +18,14 @@
     <input type="text" id="charName" placeholder="Masukkan nama karakter...">
     <button onclick="fetchData()">Cari</button>
     <br>
-    <button onclick="playVideo('Edalia')">Edalia</button>
-    <button onclick="playVideo('Ermes')">Ermes</button>
+    <button class="chara" onclick="playVideo('Edalia')">Edalia</button>
+    <button class="chara" onclick="playVideo('Ermes')">Ermes</button>    
     <div id="result"></div>
   </div>
 
   <!-- Tempat Video Ditampilkan -->
   <div id="videoWrapper"></div>
 
-  <script>
-    function playVideo(charName) {
-      const fileName = `Ark Re Code - ${charName}.mp4`;
-      const videoPath = `https://gilbertclaus.pythonanywhere.com/video/Ark ReCode/${fileName}`;
-      const encodedURL = encodeURI(videoPath);
-
-      const wrapper = document.getElementById("videoWrapper");
-      wrapper.innerHTML = "";
-
-      const video = document.createElement("video");
-      video.src = encodedURL;
-      video.width = 360;
-      video.controls = true;
-      video.autoplay = true;
-      video.volume = 0.1;
-      video.style.marginTop = "20px";
-      wrapper.appendChild(video);
-    }
-
-    function fetchData() {
-      const name = document.getElementById("charName").value;
-      alert(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
-    }
-  </script>
+  <script src="script.js"></script>
 </body>
 </html>

Ark ReCode/s.js

@@ -0,0 +1,111 @@
+
+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>";
+    }
+}
+
+const express = require("express");
+const cors = require("cors");
+const fetch = require("node-fetch");
+const cheerio = require("cheerio");
+
+const app = express();
+app.use(cors());
+
+const headers = {
+    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
+};
+
+async function fetchHtml(url) {
+    const response = await fetch(url, { headers });
+    return response.text();
+}
+
+function parseData(cari, html) {
+    const $ = cheerio.load(html);
+    const rows = $("tr").slice(1);
+    let result = null;
+
+    rows.each((index, row) => {
+        const cols = $(row).find("td");
+        const characterName = $(cols[0]).find("a").text().trim();
+        let skill3Link = $(cols[2]).find("a[href*='SK3']").attr("href") || "";
+        let tapLink = $(cols[3]).find("a[href*='Tap']").attr("href") || "";
+
+        if (characterName.includes(cari)) {
+            result = { Karakter: characterName, Skill3: skill3Link, Tap: tapLink };
+            return false; // Keluar dari loop
+        }
+    });
+
+    return result;
+}
+
+app.get("/api", async (req, res) => {
+    const cari = req.query.name;
+    if (!cari) return res.json({ error: "Masukkan nama karakter!" });
+
+    const url = "https://arkrecodewiki.miraheze.org/wiki/Love_Link";
+    try {
+        const html = await fetchHtml(url);
+        const segments = html.split("Show Spoilers");
+
+        if (segments.length < 7) return res.json({ error: "Data tidak ditemukan" });
+
+        const skillData = parseData(cari, segments[1]);
+
+        res.json({ skills: skillData || "Tidak ditemukan" });
+    } catch (error) {
+        res.json({ error: "Gagal mengambil data" });
+    }
+});
+
+app.listen(3000, () => {
+    console.log("Server berjalan di http://localhost:3000");
+});

Ark ReCode/script.js

@@ -1,111 +1,35 @@
-
-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>";
-    }
+function playVideo(charName) {
+    const fileName = `Ark Re Code - ${charName}.mp4`;
+    const videoPath = `https://gilbertclaus.pythonanywhere.com/video/Ark ReCode/${fileName}`;
+    const encodedURL = encodeURI(videoPath);
+
+    const wrapper = document.getElementById("videoWrapper");
+    wrapper.innerHTML = "";
+
+    const video = document.createElement("video");
+    video.src = encodedURL;
+    video.width = 360;
+    video.controls = true;
+    video.autoplay = true;
+    video.volume = 0.1;
+    video.style.marginTop = "20px";
+    wrapper.appendChild(video);
 }
 
-const express = require("express");
-const cors = require("cors");
-const fetch = require("node-fetch");
-const cheerio = require("cheerio");
-
-const app = express();
-app.use(cors());
-
-const headers = {
-    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
-};
-
-async function fetchHtml(url) {
-    const response = await fetch(url, { headers });
-    return response.text();
-}
-
-function parseData(cari, html) {
-    const $ = cheerio.load(html);
-    const rows = $("tr").slice(1);
-    let result = null;
-
-    rows.each((index, row) => {
-        const cols = $(row).find("td");
-        const characterName = $(cols[0]).find("a").text().trim();
-        let skill3Link = $(cols[2]).find("a[href*='SK3']").attr("href") || "";
-        let tapLink = $(cols[3]).find("a[href*='Tap']").attr("href") || "";
-
-        if (characterName.includes(cari)) {
-            result = { Karakter: characterName, Skill3: skill3Link, Tap: tapLink };
-            return false; // Keluar dari loop
-        }
-    });
-
-    return result;
-}
-
-app.get("/api", async (req, res) => {
-    const cari = req.query.name;
-    if (!cari) return res.json({ error: "Masukkan nama karakter!" });
-
-    const url = "https://arkrecodewiki.miraheze.org/wiki/Love_Link";
-    try {
-        const html = await fetchHtml(url);
-        const segments = html.split("Show Spoilers");
-
-        if (segments.length < 7) return res.json({ error: "Data tidak ditemukan" });
-
-        const skillData = parseData(cari, segments[1]);
-
-        res.json({ skills: skillData || "Tidak ditemukan" });
-    } catch (error) {
-        res.json({ error: "Gagal mengambil data" });
+function fetchData() {
+    const input = document.getElementById("charName").value.trim();
+    const charaBtn = document.getElementById("chara");
+
+    if (input === "") {
+        // Ambil status tombol pertama sebagai acuan
+        const isHidden = charaBtns[0].style.display === "none" || charaBtns[0].style.display === "";
+
+        // Toggle semua tombol
+        charaBtns.forEach(btn => {
+        btn.style.display = isHidden ? "inline-block" : "none";
+        });
+    } else {
+        const name = document.getElementById("charName").value;
+        alert(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
     }
-});
-
-app.listen(3000, () => {
-    console.log("Server berjalan di http://localhost:3000");
-});
+}

Ark ReCode/style.css

@@ -4,70 +4,75 @@ body {
     text-align: center;
     padding: 20px;
     margin: 0;
-  }
-  
-  .container {
-    background: rgba(128, 128, 128, 0.5);
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-    max-width: 500px;
-    margin: auto;
-  }
-  
-  h1 {
-    font-size: 22px;
-    color: #333;
-  }
-  
-  input {
-    width: 80%;
-    padding: 8px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-  }
-  
-  button {
-    background: #007bff;
-    color: white;
-    padding: 8px 15px;
-    border: none;
-    cursor: pointer;
-    border-radius: 5px;
-    margin: 5px;
-  }
-  
-  button:hover {
-    background: #0056b3;
-  }
-  
-  #result {
-    margin-top: 15px;
-    text-align: left;
-    padding: 10px;
-  }
-  
-  #videoWrapper {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-  }
-  
-  #videoWrapper video {
-    width: 360px;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }  
-  
-  #bgVideo {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    min-width: 100%;
-    min-height: 100%;
-    z-index: -1;
-    object-fit: cover;
-  }
+}
+
+.container {
+background: rgba(128, 128, 128, 0.5);
+padding: 20px;
+border-radius: 10px;
+box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+max-width: 500px;
+margin: auto;
+}
+
+h1 {
+font-size: 22px;
+color: #333;
+}
+
+input {
+width: 80%;
+padding: 8px;
+margin: 10px 0;
+border: 1px solid #ccc;
+border-radius: 5px;
+}
+
+button {
+background: #007bff;
+color: white;
+padding: 8px 15px;
+border: none;
+cursor: pointer;
+border-radius: 5px;
+margin: 5px;
+}
+
+button:hover {
+background: #0056b3;
+}
+
+#result {
+margin-top: 15px;
+text-align: left;
+padding: 10px;
+}
+
+#videoWrapper {
+display: flex;
+justify-content: center;
+margin-top: 20px;
+}
+
+#videoWrapper video {
+width: 360px;
+height: auto;
+border-radius: 10px;
+box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}  
+
+#bgVideo {
+position: fixed;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+min-width: 100%;
+min-height: 100%;
+z-index: -1;
+object-fit: cover;
+}
+
+.chara {
+display: none;
+}
+