Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

78e2dfd

verified ·

1 Parent(s): c60dc40

Update index.html

Browse files

Files changed (1) hide show

index.html +142 -100

index.html CHANGED Viewed

@@ -2,76 +2,105 @@
 <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>
-        </table>
     </div>
 </div>
 <script>
     let rawData = {};
     window.onload = () => {
-        fetch('Huiucl.json')
-            .then(res => res.json())
-            .then(data => {
-                rawData = data;
-                render();
-            });
     };
     function render() {
@@ -79,85 +108,98 @@
         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>
 </body>
 </html>

 <html lang="ko">
 <head>
     <meta charset="UTF-8">
+    <title>HUIUCL Database v4.0</title>
     <style>
         :root {
             --bg: #f8f9fa;
+            --header-bg: #2d2d2d;
+            --accent: #d4a373;
+            --text: #333;
+            --border: #e9ecef;
         }
+        body { font-family: 'Pretendard', -apple-system, sans-serif; background: var(--bg); color: var(--text); margin: 0; }
+        /* UI 복구 및 개선 */
+        nav { background: var(--header-bg); padding: 1rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+        nav .nav-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; }
+        nav a { color: #fff; text-decoration: none; font-weight: 500; cursor: pointer; opacity: 0.8; transition: 0.3s; }
+        nav a:hover { opacity: 1; color: var(--accent); }
+        header { background: #fff; padding: 40px 20px; text-align: center; border-bottom: 1px solid var(--border); }
+        h1 { margin: 0; letter-spacing: 10px; font-weight: 300; color: #1a1a1a; }
+        .version { font-size: 0.8rem; color: #aaa; margin-top: 10px; }
+        .container { max-width: 1200px; margin: 30px auto; padding: 0 20px; }
+        .search-wrapper { margin-bottom: 30px; position: relative; }
+        .search-box { width: 100%; padding: 18px 25px; border: 1px solid #ddd; border-radius: 50px; font-size: 1.1rem; box-sizing: border-box; outline: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; }
+        .search-box:focus { border-color: var(--accent); box-shadow: 0 4px 20px rgba(212, 163, 115, 0.2); }
+        .table-card { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
+        table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+        th { background: #fdfcfb; padding: 18px; text-align: left; font-size: 0.85rem; color: #888; text-transform: uppercase; border-bottom: 2px solid var(--border); }
+        td { padding: 20px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-all; }
+        .word-cell { width: 20%; font-size: 1.15rem; font-weight: 700; color: #1a1a1a; }
+        .meaning-cell { width: 60%; }
+        .cat-cell { width: 20%; text-align: right; font-size: 0.75rem; color: #bbb; }
+        .ko-text { font-size: 1.05rem; font-weight: 600; color: var(--accent); margin-bottom: 5px; }
+        .en-text { font-size: 0.95rem; color: #666; }
+        .usage-box { margin-top: 12px; padding: 10px; background: #f9f9f9; border-radius: 6px; border-left: 3px solid #ddd; font-size: 0.85rem; color: #777; }
+        .sub-row { background: #fcfcfc; }
+        .sub-mark { color: var(--accent); margin-right: 5px; }
+        section { display: none; }
+        section.active { display: block; }
     </style>
 </head>
 <body>
+<nav>
+    <div class="nav-container">
+        <a onclick="showTab('dictionary')">DICTIONARY</a>
+        <a onclick="showTab('grammar')">GRAMMAR</a>
     </div>
+</nav>
+<header>
+    <h1>HUIUCL</h1>
+    <div class="version">CORE ARCHIVE v4.0 (STRICT MAPPING)</div>
+</header>
+<div class="container">
+    <section id="dictionary" class="active">
+        <div class="search-wrapper">
+            <input type="text" id="searchInput" class="search-box" placeholder="단어, 뜻, 파생어, 분류를 입력하세요..." oninput="render()">
+        </div>
+        <div class="table-card">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Word</th>
+                        <th>Meaning & Usage</th>
+                        <th style="text-align:right">Category</th>
+                    </tr>
+                </thead>
+                <tbody id="dictBody"></tbody>
+            </table>
+        </div>
+    </section>
+    <section id="grammar">
+        <div id="grammarContent"></div>
+    </section>
 </div>
 <script>
     let rawData = {};
+    function showTab(id) {
+        document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
+        document.getElementById(id).classList.add('active');
+    }
     window.onload = () => {
+        fetch('Huiucl.json').then(res => res.json()).then(data => {
+            rawData = data;
+            render();
+        });
     };
     function render() {
         const body = document.getElementById('dictBody');
         body.innerHTML = '';
+        for (const cat in rawData) {
+            if (cat === "Settings") continue;
+            deepSearch(rawData[cat], cat, query);
         }
     }
+    function deepSearch(obj, path, query) {
         if (path.includes("Grammar_Rules")) return;
+        for (const key in obj) {
+            const val = obj[key];
+            if (!val) continue;
+            // 1. 단어 데이터 판별 로직 (morpheme sa- 같은 케이스 대응)
+            const info = extractInfo(key, val);
+            if (info.isWord) {
+                if (match(info.word, info.ko, info.en, path, query)) {
+                    append(info.word, info.ko, info.en, info.usage, path);
+                }
                 // 파생어 처리
+                if (val.derivations) {
+                    for (const dk in val.derivations) {
+                        append(dk, val.derivations[dk], "", "", path, true);
                     }
                 }
+                // 시제 변형(tense_variants) 등 내부 재귀
+                if (typeof val === 'object' && val.tense_variants) {
+                    deepSearch(val.tense_variants, path + " > " + key, query);
                 }
             }
+            // 2. 하위 카테고리인 경우 계속 탐색
+            else if (typeof val === 'object') {
+                deepSearch(val, path + " > " + key, query);
             }
+        }
+    }
+    function extractInfo(key, val) {
+        let res = { isWord: false, word: key, ko: "", en: "", usage: "" };
+        // 케이스 A: 단순 문자열 (Pronouns 등)
+        if (typeof val === 'string') {
+            res.isWord = true;
+            res.ko = val;
+        }
+        // 케이스 B: 객체형 (Auxiliary_Verbs, Affixes 등)
+        else if (typeof val === 'object') {
+            // morpheme: "sa-" 같은 역구조 대응
+            if (val.morpheme) {
+                res.word = val.morpheme;
+                res.ko = val.meaning_ko || val.ko || val.definition || "";
+                res.en = val.meaning_en || val.en || "";
+            } else {
+                res.ko = val.meaning_ko || val.ko || val.뜻 || val.definition || "";
+                res.en = val.meaning_en || val.en || "";
             }
+            res.usage = val.usage || val.note || "";
+            // ko나 en이 오브젝트로 나오는 것 방지
+            if (typeof res.ko === 'object') res.ko = res.ko.ko || res.ko.meaning_ko || "";
+            if (typeof res.en === 'object') res.en = res.en.en || res.en.meaning_en || "";
+            if (res.ko || res.en) res.isWord = true;
         }
+        return res;
     }
+    function match(w, k, e, p, q) {
+        return (w+k+e+p).toLowerCase().includes(q);
+    }
+    function append(w, ko, en, use, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'sub-row';
+        let meaning = `<div class="ko-text">${ko}</div>`;
+        if (en) meaning += `<div class="en-text">${en}</div>`;
+        if (use) {
+            const useStr = typeof use === 'object' ? (use.ko || use.en || JSON.stringify(use)) : use;
+            meaning += `<div class="usage-box"><strong>USAGE:</strong> ${useStr}</div>`;
         }
         row.innerHTML = `
+            <td class="word-cell">${isSub ? '<span class="sub-mark">↳</span>' : ''}${w}</td>
+            <td class="meaning-cell">${meaning}</td>
+            <td class="cat-cell">${path}</td>
         `;
     }
 </script>
 </body>
 </html>