Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

fbbed72

verified ·

1 Parent(s): b1b25e4

Update index.html

Browse files

Files changed (1) hide show

index.html +107 -148

index.html CHANGED Viewed

@@ -2,191 +2,150 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HUIUCL Database v3.0</title>
     <style>
-        :root { --bg: #f9f7f2; --card: #ffffff; --primary: #5d5b54; --accent: #d4a373; --border: #e0ddd5; }
-        body { font-family: 'Pretendard', sans-serif; background: var(--bg); color: var(--primary); margin: 0; line-height: 1.6; }
-        nav { position: sticky; top: 0; background: rgba(249, 247, 242, 0.9); backdrop-filter: blur(10px); padding: 15px; text-align: center; border-bottom: 1px solid var(--border); z-index: 100; }
-        nav a { margin: 0 15px; text-decoration: none; color: var(--primary); font-weight: 600; cursor: pointer; }
-        header { text-align: center; padding: 40px 20px; }
-        h1 { font-weight: 300; letter-spacing: 8px; color: var(--accent); margin: 0; }
-        .container { max-width: 1100px; margin: 0 auto; padding: 0 20px 100px; }
-        section { display: none; }
-        section.active { display: block; }
-        .filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px; }
-        .filter-btn { background: var(--card); border: 1px solid var(--border); padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; }
-        .filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
-        .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border); border-radius: 30px; font-size: 1rem; margin-bottom: 20px; box-sizing: border-box; outline: none; }
-        .table-wrapper { background: white; 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 #eee; }
-        th { background: #f1eee6; color: #777; font-size: 0.85rem; }
-        .word-cell { font-weight: bold; color: var(--accent); width: 25%; font-size: 1.1rem; }
-        .meaning-cell { width: 55%; }
-        .path-cell { font-size: 0.7rem; color: #bbb; width: 20%; text-align: right; }
-        .desc-box { background: #fafafa; border-left: 3px solid var(--accent); padding: 8px 12px; margin-top: 10px; font-size: 0.85rem; color: #666; }
-        .tag { display: inline-block; background: #eee; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; margin-right: 5px; color: #555; }
     </style>
 </head>
 <body>
-<nav>
-    <a onclick="showSection('dictionary')">DICTIONARY</a>
-    <a onclick="showSection('grammar')">GRAMMAR</a>
-</nav>
-<header>
-    <h1>HUIUCL</h1>
-    <div style="color:#999; font-size:0.85rem; margin-top:5px;">DATABASE v3.0 FINAL REVISION</div>
-</header>
 <div class="container">
-    <section id="dictionary" class="active">
-        <input type="text" id="searchInput" class="search-box" placeholder="단어명, 한국어 의미, 영어 의미 검색..." oninput="renderTable()">
-        <div class="filter-container" id="categoryButtons">
-            <button class="filter-btn active" onclick="filterCategory('모두', this)">모두 보기</button>
-        </div>
-        <div class="table-wrapper">
-            <table>
-                <thead>
-                    <tr><th>단어 (Word)</th><th>의미 및 용법 (Meaning/Usage)</th><th style="text-align:right;">분류</th></tr>
-                </thead>
-                <tbody id="dictBody"></tbody>
-            </table>
-        </div>
-    </section>
-    <section id="grammar"><div id="grammarContent"></div></section>
 </div>
 <script>
-    let db = {};
-    let currentCat = '모두';
-    function showSection(id) {
-        document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
-        document.getElementById(id).classList.add('active');
-    }
     window.onload = () => {
-        fetch('Huiucl.json').then(r => r.json()).then(data => {
-            db = data;
-            initUI();
-            renderTable();
-            renderGrammar();
-        });
     };
-    function initUI() {
-        const container = document.getElementById('categoryButtons');
-        Object.keys(db).forEach(key => {
-            if (key === "Settings") return;
-            const btn = document.createElement('button');
-            btn.className = 'filter-btn';
-            btn.innerText = key;
-            btn.onclick = (e) => {
-                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-                e.target.classList.add('active');
-                currentCat = key;
-                renderTable();
-            };
-            container.appendChild(btn);
-        });
-    }
-    function renderTable() {
         const query = document.getElementById('searchInput').value.toLowerCase();
         const body = document.getElementById('dictBody');
         body.innerHTML = '';
-        const targets = currentCat === '모두' ? Object.keys(db).filter(k => k !== "Settings") : [currentCat];
-        targets.forEach(cat => parseData(db[cat], cat, query));
     }
-    function parseData(obj, path, query) {
         if (path.includes("Grammar_Rules")) return;
-        for (let key in obj) {
             const val = obj[key];
             if (!val) continue;
-            // 1. 단어 객체 (의미 정보 포함)
-            if (typeof val === 'object' && (val.meaning_ko || val.ko || val.definition || val.뜻)) {
-                const ko = val.meaning_ko || val.ko || val.뜻 || val.definition || "";
-                const en = val.meaning_en || val.en || "";
-                const note = val.usage || val.note || "";
-                if (key.toLowerCase().includes(query) || (typeof ko === 'string' && ko.includes(query))) {
-                    addRow(key, ko, en, note, path);
-                }
-                if (val.derivations) {
-                    for (let dKey in val.derivations) {
-                        addRow(dKey, val.derivations[dKey], "", "", path, true);
-                    }
                 }
-                if (val.tense_variants) parseData(val.tense_variants, path + " > " + key, query);
             }
-            // 2. 단순 문자열 (대명사, 인사 등)
-            else if (typeof val === 'string') {
-                if (key.toLowerCase().includes(query) || val.toLowerCase().includes(query)) {
-                    addRow(key, val, "", "", path);
                 }
             }
-            // 3. 중첩 객체 (재귀 - 단, 데이터용 키는 제외)
-            else if (typeof val === 'object' && !["usage", "note", "definition", "tense_variants"].includes(key)) {
-                parseData(val, path + " > " + key, query);
-            }
         }
     }
-    function addRow(word, ko, en, note, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
-        if (isSub) row.className = 'variation-row';
-        let meaningHtml = `<div style="font-weight:600; font-size:1.05rem;">${ko}</div>`;
-        if (en) meaningHtml += `<div style="color:#888; font-size:0.9rem;">${en}</div>`;
-        if (note) meaningHtml += `<div class="desc-box"><span class="tag">USAGE</span>${note}</div>`;
         row.innerHTML = `
-            <td class="word-cell">${isSub ? '↳ ' : ''}${word}</td>
-            <td class="meaning-cell">${meaningHtml}</td>
             <td class="path-cell">${path}</td>
         `;
     }
-    function renderGrammar() {
-        const target = document.getElementById('grammarContent');
-        let html = "";
-        // Settings 출력
-        if (db.Settings) {
-            html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; border:1px solid var(--border);">
-                <h2 style="margin-top:0; color:var(--accent);">Basic Phonology & Syntax</h2>
-                <p><strong>어순:</strong> ${db.Settings.Syntax.Word_Order.join(' / ')}</p>
-                <p><strong>Vowels:</strong> ${Object.keys(db.Settings.Phonology.Vowels).join(', ')}</p>
-                <p><strong>Consonants:</strong> ${Object.keys(db.Settings.Phonology.Consonants).join(', ')}</p>
-            </div>`;
-        }
-        function collectRules(obj, path) {
-            for (let k in obj) {
-                if (k === "Grammar_Rules") {
-                    html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; border:1px solid var(--border);">
-                        <h3 style="margin-top:0; color:var(--accent);">${path} Rules</h3>`;
-                    for (let rule in obj[k]) {
-                        html += `<p style="margin:8px 0; border-bottom:1px solid #f9f9f9; padding-bottom:5px;"><strong>${rule}:</strong> ${obj[k][rule]}</p>`;
-                    }
-                    html += `</div>`;
-                } else if (typeof obj[k] === 'object' && k !== "Settings") {
-                    collectRules(obj[k], path ? path + " > " + k : k);
-                }
-            }
-        }
-        collectRules(db, "");
-        target.innerHTML = html;
-    }
 </script>
 </body>
 </html>

 <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>
+        </table>
+    </div>
 </div>
 <script>
+    let rawData = {};
     window.onload = () => {
+        fetch('Huiucl.json')
+            .then(res => res.json())
+            .then(data => {
+                rawData = data;
+                render();
+            });
     };
+    function render() {
         const query = document.getElementById('searchInput').value.toLowerCase();
         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>
 </body>
 </html>