Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

c37a8db

verified ·

1 Parent(s): 77dd2ba

Update index.html

Browse files

Files changed (1) hide show

index.html +195 -120

index.html CHANGED Viewed

@@ -1,121 +1,196 @@
-<!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>

+<!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>
+        :root {
+            --bg-color: #f9f7f2;      /* 메인 베이지 배경 */
+            --card-bg: #ffffff;       /* 화이트 카드 */
+            --primary-color: #5d5b54;  /* 진한 회갈색 (텍스트) */
+            --accent-color: #d4a373;   /* 포인트 컬러 (베이지 브라운) */
+            --border-color: #e0ddd5;
+        }
+        body {
+            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--primary-color);
+            margin: 0;
+            padding: 40px 20px;
+            line-height: 1.6;
+        }
+        header { text-align: center; margin-bottom: 40px; }
+        h1 { font-weight: 300; letter-spacing: 5px; color: var(--accent-color); margin-bottom: 10px; }
+        .sub-title { font-size: 0.9rem; color: #999; }
+        /* 검색창 섹션 */
+        .search-container {
+            max-width: 600px;
+            margin: 0 auto 30px auto;
+            display: flex;
+            gap: 10px;
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 12px 20px;
+            border: 1px solid var(--border-color);
+            border-radius: 30px;
+            outline: none;
+            background-color: var(--card-bg);
+        }
+        input[type="text"]:focus { border-color: var(--accent-color); }
+        /* 카테고리 버튼 */
+        .filter-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 8px;
+            margin-bottom: 40px;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        button {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            color: var(--primary-color);
+            padding: 6px 16px;
+            cursor: pointer;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            transition: all 0.2s;
+        }
+        button:hover, button.active {
+            background: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+        /* 테이블 디자인 */
+        .table-wrapper {
+            max-width: 900px;
+            margin: 0 auto;
+            background: var(--card-bg);
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+        }
+        table { width: 100%; border-collapse: collapse; }
+        th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bg-color); }
+        th { background: #f1eee6; font-weight: 600; font-size: 0.9rem; color: #777; }
+        tr:last-child td { border-bottom: none; }
+        tr:hover { background-color: #fafafa; }
+        .word-cell { font-weight: bold; color: var(--accent-color); font-size: 1.1rem; }
+        .path-cell { font-size: 0.75rem; color: #bbb; }
+    </style>
+</head>
+<body>
+<header>
+    <h1>HUIUCL</h1>
+    <div class="sub-title">인공어 후이우클 온라인 사전 아카이브</div>
+</header>
+<div class="search-container">
+    <input type="text" id="searchInput" placeholder="단어 또는 뜻을 검색하세요..." onkeyup="filterData()">
+</div>
+<div class="filter-container" id="categoryButtons">
+    <button onclick="changeCategory('모두')" id="btn-all" class="active">모두 보기</button>
+</div>
+<div class="table-wrapper">
+    <table>
+        <thead>
+            <tr>
+                <th style="width: 30%;">단어</th>
+                <th style="width: 40%;">의미</th>
+                <th style="width: 30%;">분류</th>
+            </tr>
+        </thead>
+        <tbody id="dictBody"></tbody>
+    </table>
+</div>
+<script>
+    let conlangData = {};
+    let currentCategory = '모두';
+    // 1. JSON 로드
+    fetch('Conlang_1.json')
+        .then(res => res.json())
+        .then(data => {
+            conlangData = data;
+            initButtons();
+            renderTable();
+        });
+    function initButtons() {
+        const container = document.getElementById('categoryButtons');
+        Object.keys(conlangData).forEach(key => {
+            if (key === "설정") return;
+            const btn = document.createElement('button');
+            btn.innerText = key;
+            btn.onclick = (e) => {
+                document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
+                e.target.classList.add('active');
+                currentCategory = key;
+                renderTable();
+            };
+            container.appendChild(btn);
+        });
+    }
+    // 검색 및 필터링 핵심 함수
+    function renderTable() {
+        const body = document.getElementById('dictBody');
+        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+        body.innerHTML = '';
+        const targets = currentCategory === '모두'
+            ? Object.keys(conlangData).filter(k => k !== "설정")
+            : [currentCategory];
+        targets.forEach(cat => {
+            traverse(conlangData[cat], cat, searchTerm);
+        });
+    }
+    function traverse(obj, path, search) {
+        for (const key in obj) {
+            if (typeof obj[key] === 'string' || obj[key].hasOwnProperty('뜻')) {
+                const word = key;
+                const meaning = typeof obj[key] === 'string' ? obj[key] : obj[key].뜻;
+                // 검색어 필터링
+                if (word.toLowerCase().includes(search) || meaning.toLowerCase().includes(search)) {
+                    addRow(word, meaning, path);
+                }
+            } else if (typeof obj[key] === 'object' && key !== "변형") {
+                traverse(obj[key], `${path} > ${key}`, search);
+            }
+        }
+    }
+    function addRow(word, meaning, path) {
+        const body = document.getElementById('dictBody');
+        const row = body.insertRow();
+        row.innerHTML = `
+            <td class="word-cell">${word}</td>
+            <td>${meaning}</td>
+            <td class="path-cell">${path}</td>
+        `;
+    }
+    function filterData() {
+        renderTable();
+    }
+</script>
+</body>
 </html>