Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

77dd2ba

verified ·

1 Parent(s): ca13343

Upload 2 files

Browse files

Files changed (2) hide show

Conlang_1.json +0 -0
index.html +121 -19

Conlang_1.json ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -1,19 +1,121 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Huiucl Dictionary</title>
+    <style>
+        body { font-family: 'Malgun Gothic', sans-serif; background-color: #1a1a2e; color: #e2e2e2; padding: 20px; line-height: 1.6; }
+        h1 { color: #4ecca3; text-align: center; }
+        .filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
+        button {
+            background: #16213e; border: 1px solid #4ecca3; color: #4ecca3;
+            padding: 8px 16px; cursor: pointer; border-radius: 20px; transition: 0.3s;
+        }
+        button:hover, button.active { background: #4ecca3; color: #1a1a2e; }
+        table { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: collapse; background: #0f3460; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
+        th, td { padding: 12px; border: 1px solid #16213e; text-align: left; }
+        th { background: #1a1a2e; color: #4ecca3; position: sticky; top: 0; }
+        .cat-path { font-size: 0.8rem; color: #8892b0; }
+    </style>
+</head>
+<body>
+<h1>Huiucl(후이우클) 온라인 사전</h1>
+<div class="filter-container" id="categoryButtons">
+    <button onclick="displayCategory('모두')" id="btn-all" class="active">모두 보기</button>
+</div>
+<table id="dictTable">
+    <thead>
+        <tr>
+            <th>단어 (Huiucl)</th>
+            <th>뜻 (한국어)</th>
+            <th>분류 경로</th>
+        </tr>
+    </thead>
+    <tbody id="dictBody"></tbody>
+</table>
+<script>
+    let conlangData = {};
+    // 1. JSON 파일 직접 로드
+    fetch('Conlang_1.json')
+        .then(response => {
+            if (!response.ok) throw new Error("파일을 찾을 수 없습니다.");
+            return response.json();
+        })
+        .then(data => {
+            conlangData = data;
+            createButtons();
+            displayCategory('모두');
+        })
+        .catch(error => {
+            console.error("Error:", error);
+            document.getElementById('dictBody').innerHTML = `<tr><td colspan="3" style="text-align:center; color:red;">데이터를 로드할 수 없습니다. (서버 환경이나 파일 경로를 확인하세요)</td></tr>`;
+        });
+    // 2. 최상위 카테고리 버튼 생성
+    function createButtons() {
+        const container = document.getElementById('categoryButtons');
+        Object.keys(conlangData).forEach(key => {
+            if (key === "설정") return;
+            const btn = document.createElement('button');
+            btn.innerText = key;
+            btn.onclick = (e) => {
+                setActive(e.target);
+                displayCategory(key);
+            };
+            container.appendChild(btn);
+        });
+    }
+    // 3. 카테고리별 데이터 표시 (재귀 탐색)
+    function displayCategory(category) {
+        const body = document.getElementById('dictBody');
+        body.innerHTML = '';
+        if (category === '모두') {
+            Object.keys(conlangData).forEach(cat => {
+                if (cat !== "설정") traverseData(conlangData[cat], cat);
+            });
+        } else {
+            traverseData(conlangData[category], category);
+        }
+    }
+    function traverseData(obj, path) {
+        const body = document.getElementById('dictBody');
+        for (const key in obj) {
+            // "뜻"이 있으면 단어 데이터로 간주
+            if (typeof obj[key] === 'string') {
+                addRow(key, obj[key], path);
+            } else if (obj[key].hasOwnProperty('뜻')) {
+                addRow(key, obj[key].뜻, path);
+            } else if (typeof obj[key] === 'object' && key !== "변형" && key !== "설정") {
+                // 하위 카테고리가 있으면 더 깊이 들어감
+                traverseData(obj[key], `${path} > ${key}`);
+            }
+        }
+    }
+    function addRow(word, meaning, path) {
+        const body = document.getElementById('dictBody');
+        const row = body.insertRow();
+        row.innerHTML = `
+            <td><strong>${word}</strong></td>
+            <td>${meaning}</td>
+            <td class="cat-path">${path}</td>
+        `;
+    }
+    function setActive(target) {
+        document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
+        target.classList.add('active');
+    }
+</script>
+</body>
+</html>