Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

c60dc40

verified ·

1 Parent(s): fbbed72

Update index.html

Browse files

Files changed (1) hide show

index.html +96 -84

index.html CHANGED Viewed

@@ -2,34 +2,59 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <title>HUIUCL Database Final</title>
     <style>
-        :root { --bg: #f4f1ea; --card: #ffffff; --accent: #8b7355; --text: #333; }
-        body { font-family: sans-serif; background: var(--bg); color: var(--text); padding: 20px; }
         .container { max-width: 1200px; margin: 0 auto; }
-        .search-box { width: 100%; padding: 15px; margin-bottom: 20px; border: 2px solid #ddd; border-radius: 8px; font-size: 1.1rem; }
-        .table-wrapper { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; }
         table { width: 100%; border-collapse: collapse; table-layout: fixed; }
-        th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; word-break: break-all; }
-        th { background: #f8f8f8; font-weight: bold; border-bottom: 2px solid #ddd; }
-        .word-cell { font-weight: bold; color: var(--accent); width: 20%; font-size: 1.1rem; }
-        .path-cell { font-size: 0.8rem; color: #999; width: 20%; }
-        .usage-tag { background: #f0f0f0; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; color: #666; display: block; margin-top: 5px; }
-        .meaning-item { margin-bottom: 4px; }
-        .sub-row { background: #fafafa; font-size: 0.9rem; }
     </style>
 </head>
 <body>
 <div class="container">
-    <input type="text" id="searchInput" class="search-box" placeholder="단어, 뜻, 분류 검색..." oninput="render()">
     <div class="table-wrapper">
         <table>
             <thead>
                 <tr>
-                    <th style="width:20%">단어 (Word)</th>
-                    <th style="width:60%">의미 및 용법</th>
-                    <th style="width:20%">분류</th>
                 </tr>
             </thead>
             <tbody id="dictBody"></tbody>
@@ -54,95 +79,82 @@
         const body = document.getElementById('dictBody');
         body.innerHTML = '';
-        // 모든 카테고리 순회 (Settings 제외)
-        for (const cat in rawData) {
-            if (cat === "Settings") continue;
-            extract(rawData[cat], cat, query);
         }
     }
-    function extract(obj, path, query) {
         if (path.includes("Grammar_Rules")) return;
-        for (const key in obj) {
-            const val = obj[key];
-            if (!val) continue;
-            // 1. 문자열인 경우 (단순 대명사, 인사말 등)
-            if (typeof val === 'string') {
-                if (isMatch(key, val, path, query)) {
-                    appendRow(key, val, "", "", path);
                 }
             }
-            // 2. 객체인 경우 (단어 정보 포함)
-            else if (typeof val === 'object') {
-                // 이 객체가 '단어 정보'를 담고 있는지 확인
-                const info = getWordInfo(val);
-                if (info.hasData) {
-                    if (isMatch(key, info.ko + info.en + info.usage, path, query)) {
-                        appendRow(key, info.ko, info.en, info.usage, path);
-                    }
-                    // 파생어 처리
-                    if (val.derivations) {
-                        for (const dKey in val.derivations) {
-                            appendRow(dKey, val.derivations[dKey], "", "", path, true);
-                        }
-                    }
-                    // 시제 변형 등 하위 데이터가 더 있다면 탐색 (단, 데이터 키는 제외)
-                    for (const subKey in val) {
-                        if (!["meaning_ko", "meaning_en", "ko", "en", "definition", "usage", "note", "derivations"].includes(subKey)) {
-                            extract({ [subKey]: val[subKey] }, path + " > " + key, query);
-                        }
-                    }
-                } else {
-                    // 단어 데이터가 아니면 더 깊게 탐색
-                    extract(val, path + " > " + key, query);
                 }
             }
         }
     }
-    // 객체 안에서 한글 뜻, 영어 뜻, 사용법을 긁어모으는 함수
-    function getWordInfo(obj) {
-        let info = {
-            ko: obj.meaning_ko || obj.ko || obj.뜻 || obj.definition || "",
-            en: obj.meaning_en || obj.en || "",
-            usage: obj.usage || obj.note || "",
-            hasData: false
-        };
-        // ko나 definition이 또 객체인 경우 (에러 방지)
-        if (typeof info.ko === 'object') info.ko = info.ko.ko || info.ko.meaning_ko || JSON.stringify(info.ko);
-        if (typeof info.en === 'object') info.en = info.en.en || info.en.meaning_en || "";
-        if (info.ko || info.en || info.usage) info.hasData = true;
-        return info;
-    }
-    function isMatch(word, content, path, query) {
-        const target = (word + content + path).toLowerCase();
-        return target.includes(query);
-    }
-    function appendRow(word, ko, en, usage, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'sub-row';
-        let meaningHtml = `<div class="meaning-item"><strong>${ko}</strong></div>`;
-        if (en) meaningHtml += `<div class="meaning-item" style="color: #666;">${en}</div>`;
-        if (usage) {
-            // usage가 객체인 경우 대응
-            const usageText = typeof usage === 'object' ? JSON.stringify(usage) : usage;
-            meaningHtml += `<div class="usage-tag">※ ${usageText}</div>`;
         }
         row.innerHTML = `
-            <td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
             <td>${meaningHtml}</td>
-            <td class="path-cell">${path}</td>
         `;
     }
 </script>

 <html lang="ko">
 <head>
     <meta charset="UTF-8">
+    <title>HUIUCL Archive v4.0</title>
     <style>
+        :root {
+            --bg: #f8f9fa;
+            --primary: #2c3e50;
+            --accent: #e67e22;
+            --border: #dcdde1;
+            --card-bg: #ffffff;
+        }
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--primary); margin: 0; padding: 20px; }
         .container { max-width: 1200px; margin: 0 auto; }
+        /* Search UI */
+        .search-area { position: sticky; top: 0; background: var(--bg); padding: 10px 0 20px; z-index: 100; }
+        .search-box { width: 100%; padding: 18px; border: 2px solid var(--border); border-radius: 12px; font-size: 1.1rem; outline: none; transition: border-color 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
+        .search-box:focus { border-color: var(--accent); }
+        /* Table UI */
+        .table-wrapper { background: var(--card-bg); border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid var(--border); }
         table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+        th { background: #f1f2f6; padding: 18px; text-align: left; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #7f8c8d; border-bottom: 2px solid var(--border); }
+        td { padding: 18px; border-bottom: 1px solid #f1f2f6; vertical-align: top; word-break: break-all; }
+        /* Content Styling */
+        .word-text { font-size: 1.2rem; font-weight: 800; color: var(--accent); display: block; margin-bottom: 5px; }
+        .meaning-ko { font-size: 1.05rem; font-weight: 600; color: #2f3640; margin-bottom: 4px; }
+        .meaning-en { font-size: 0.95rem; color: #7f8c8d; font-style: italic; }
+        .usage-card { background: #fffcf0; border: 1px solid #f1e4b3; border-radius: 8px; padding: 10px; margin-top: 10px; font-size: 0.85rem; color: #5d5d5d; line-height: 1.5; }
+        .usage-label { font-weight: 800; color: #b88e2f; margin-right: 5px; font-size: 0.75rem; }
+        .path-tag { display: inline-block; padding: 4px 10px; background: #ebedef; border-radius: 20px; font-size: 0.75rem; color: #34495e; font-weight: bold; }
+        .derivation-item { font-size: 0.9rem; padding: 5px 0; color: #636e72; border-top: 1px dashed #eee; margin-top: 5px; }
+        tr:hover { background-color: #fdfdfd; }
+        .sub-row { background-color: #fafbfc; }
     </style>
 </head>
 <body>
 <div class="container">
+    <div class="search-area">
+        <input type="text" id="searchInput" class="search-box" placeholder="Search by word, meaning, or category..." oninput="render()">
+    </div>
     <div class="table-wrapper">
         <table>
             <thead>
                 <tr>
+                    <th style="width: 25%;">Word / Morpheme</th>
+                    <th style="width: 55%;">Meaning & Description</th>
+                    <th style="width: 20%;">Category</th>
                 </tr>
             </thead>
             <tbody id="dictBody"></tbody>
         const body = document.getElementById('dictBody');
         body.innerHTML = '';
+        for (const section in rawData) {
+            if (section === "Settings") continue;
+            processNode(rawData[section], section, query);
         }
     }
+    function processNode(node, path, query) {
         if (path.includes("Grammar_Rules")) return;
+        for (const key in node) {
+            const item = node[key];
+            if (!item) continue;
+            // 1. 핵심: 이 노드가 "단어 데이터"를 담고 있는가?
+            const isWordData = (typeof item === 'object' && (item.meaning_ko || item.ko || item.definition || item.morpheme));
+            if (isWordData) {
+                // sa- 같은 Morpheme 예외 처리: item.morpheme이 있으면 그걸 단어로 사용
+                const displayWord = item.morpheme || key;
+                const info = {
+                    ko: item.meaning_ko || item.ko || item.뜻 || item.definition || "",
+                    en: item.meaning_en || item.en || "",
+                    usage: item.usage || item.note || ""
+                };
+                // 검색 필터
+                if (displayWord.toLowerCase().includes(query) || info.ko.includes(query) || info.en.toLowerCase().includes(query) || path.toLowerCase().includes(query)) {
+                    appendRow(displayWord, info, path);
+                }
+                // 파생어 처리
+                if (item.derivations) {
+                    for (const dKey in item.derivations) {
+                        appendRow(dKey, { ko: item.derivations[dKey], en: "", usage: "" }, path, true);
+                    }
+                }
+                // 조동사 시제 변형(tense_variants) 같은 하위 객체 탐색
+                if (item.tense_variants) {
+                    processNode(item.tense_variants, path + " > " + displayWord, query);
                 }
             }
+            // 2. 단순 문자열인 경우 (대명사 등)
+            else if (typeof item === 'string') {
+                if (key.toLowerCase().includes(query) || item.toLowerCase().includes(query)) {
+                    appendRow(key, { ko: item, en: "", usage: "" }, path);
+                }
+            }
+            // 3. 데이터가 아닌 단순 카테고리 층인 경우 (재귀)
+            else if (typeof item === 'object') {
+                // 'morpheme'이 키인 경우를 방지하기 위해 필터링
+                if (!["derivations", "tense_variants"].includes(key)) {
+                    processNode(item, path + " > " + key, query);
                 }
             }
         }
     }
+    function appendRow(word, info, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'sub-row';
+        // 의미부 구성
+        let meaningHtml = `<div class="meaning-ko">${info.ko}</div>`;
+        if (info.en) meaningHtml += `<div class="meaning-en">${info.en}</div>`;
+        if (info.usage) {
+            meaningHtml += `<div class="usage-card"><span class="usage-label">USAGE</span>${info.usage}</div>`;
         }
         row.innerHTML = `
+            <td>
+                <span class="word-text">${isSub ? '↳ ' : ''}${word}</span>
+            </td>
             <td>${meaningHtml}</td>
+            <td><span class="path-tag">${path}</span></td>
         `;
     }
 </script>