Spaces:

GilbertClaus
/

Test-HTML

Running

App Files Files Community

GilbertClaus commited on Apr 4, 2025

Commit

b05b4ac

1 Parent(s): 0bcdffe

Web

Browse files

Files changed (4) hide show

Ark ReCode/index.html +73 -0
script.js → Ark ReCode/script.js +0 -0
style.css → Ark ReCode/style.css +0 -0
index.html +64 -59

Ark ReCode/index.html ADDED Viewed

	@@ -0,0 +1,73 @@

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

script.js → Ark ReCode/script.js RENAMED Viewed

File without changes

style.css → Ark ReCode/style.css RENAMED Viewed

File without changes

index.html CHANGED Viewed

@@ -1,73 +1,78 @@
 <!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="en">
 <head>
+  <meta charset="UTF-8">
+  <title>Website Viewer</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: sans-serif;
+      background-color: #121212;
+      color: #eee;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    header {
+      padding: 10px;
+      background-color: #1f1f1f;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+    input[type="text"] {
+      flex: 1;
+      padding: 8px;
+      background-color: #2a2a2a;
+      color: #fff;
+      border: 1px solid #444;
+      border-radius: 4px;
+    }
+    button {
+      padding: 8px 12px;
+      background-color: #333;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    button:hover {
+      background-color: #555;
+    }
+    iframe {
+      flex: 1;
+      border: none;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <input type="text" id="urlInput" placeholder="Masukkan URL (contoh: https://example.com)">
+    <button onclick="loadWebsite()">Load</button>
+  </header>
+  <iframe id="viewer" src=""></iframe>
+  <script>
+    function loadWebsite() {
+      const url = document.getElementById('urlInput').value;
+      const iframe = document.getElementById('viewer');
+      // Validasi dasar
+      if (url.startsWith('http://') || url.startsWith('https://')) {
+        iframe.src = url;
+      } else {
+        alert("Masukkan URL lengkap dengan http:// atau https://");
+      }
+    }
+  </script>
 </body>
 </html>