Spaces:

GilbertClaus
/

Test-HTML

Running

App Files Files Community

GilbertClaus commited on Apr 5, 2025

Commit

1d818b8

1 Parent(s): d368c83

Ark

Browse files

Files changed (4) hide show

Ark ReCode/index.html +47 -66
Ark ReCode/script.js +52 -0
Ark ReCode/style.css +47 -26
index.html +1 -1

Ark ReCode/index.html CHANGED Viewed

@@ -1,73 +1,54 @@
 <!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>

 <!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>
+  <!-- Background Video -->
+  <video id="bgVideo" autoplay loop muted>
+    <source src="https://video.twimg.com/ext_tw_video/1892164405464629249/pu/vid/avc1/1280x720/cgW9XdNOX1DPI6Rq.mp4" type="video/mp4">
+  </video>
+  <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>
+    <br>
+    <button onclick="playVideo('Edalia')">Edalia</button>
+    <button 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>
 </body>
 </html>

Ark ReCode/script.js CHANGED Viewed

@@ -1,3 +1,55 @@
 const express = require("express");
 const cors = require("cors");
 const fetch = require("node-fetch");

+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");

Ark ReCode/style.css CHANGED Viewed

@@ -3,50 +3,71 @@ body {
     background-color: #f0f0f0;
     text-align: center;
     padding: 20px;
-}
-.container {
-    background: white;
     padding: 20px;
     border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     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;
-}
-button:hover {
     background: #0056b3;
-}
-#result {
     margin-top: 15px;
     text-align: left;
     padding: 10px;
-}
-img {
-    border-radius: 5px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-}

     background-color: #f0f0f0;
     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;
+  }

index.html CHANGED Viewed

@@ -64,7 +64,7 @@
   }
   function ark() {
-    window.location.href = "/Ark%20ReCode";
   }
 </script>

   }
   function ark() {
+    window.location.href = "./Ark%20ReCode";
   }
 </script>