Spaces:

GilbertClaus
/

Test-HTML

Running

App Files Files Community

GilbertClaus commited on Mar 31, 2025

Commit

0bcdffe

1 Parent(s): 31d903b

Trust

Browse files

Files changed (3) hide show

index.html +72 -81
script.js +59 -0
style.css +41 -17

index.html CHANGED Viewed

@@ -1,82 +1,73 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>WSP ChatBot</title>
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
-		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-		<style>
-			#response {
-				margin-top: 20px;
-				padding: 10px;
-				min-height: 50px;
-			}
-			#response h3 {
-				color: #333;
-				font-size: 1.2em;
-			}
-			#response strong {
-				color: #d9534f;
-			}
-			#response ul {
-				padding-left: 20px;
-			}
-			#response li {
-				margin-bottom: 5px;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="container">
-			<h2>Free ChatBot</h2>
-			<div class="form-group">
-				<input
-					type="text"
-					class="form-control"
-					id="userInput"
-					placeholder="Enter your question" />
-			</div>
-			<button class="btn btn-success" onclick="sendMessage()">Ask!</button>
-			<div id="response"></div>
-		</div>
-		<script>
-			async function sendMessage() {
-				const input = document.getElementById('userInput').value;
-				const responseDiv = document.getElementById('response');
-				if (!input) {
-					responseDiv.innerHTML = 'Please enter a message.';
-					return;
-				}
-				responseDiv.innerHTML = 'Loading...';
-				try {
-					const response = await fetch(
-						'https://openrouter.ai/api/v1/chat/completions',
-						{
-							method: 'POST',
-							headers: {
-								Authorization: 'Bearer <API Key from Open Router>',
-								'HTTP-Referer': 'https://www.sitename.com',
-								'X-Title': 'SiteName',
-								'Content-Type': 'application/json',
-							},
-							body: JSON.stringify({
-								model: 'deepseek/deepseek-r1:free',
-								messages: [{ role: 'user', content: input }],
-							}),
-						},
-					);
-					const data = await response.json();
-					console.log(data);
-					const markdownText =
-						data.choices?.[0]?.message?.content || 'No response received.';
-					responseDiv.innerHTML = marked.parse(markdownText);
-				} catch (error) {
-					responseDiv.innerHTML = 'Error: ' + error.message;
-				}
-			}
-		</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>
+    <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 ADDED Viewed

	@@ -0,0 +1,59 @@

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

style.css CHANGED Viewed

@@ -1,28 +1,52 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

 body {
+    font-family: Arial, sans-serif;
+    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);
 }