Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

b1b25e4

verified ·

1 Parent(s): cc472d6

Update index.html

Browse files

Files changed (1) hide show

index.html +82 -81

index.html CHANGED Viewed

@@ -3,29 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HUIUCL Database</title>
     <style>
-        :root { --bg-color: #f9f7f2; --card-bg: #ffffff; --primary-color: #5d5b54; --accent-color: #d4a373; --border-color: #e0ddd5; }
-        body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-color); color: var(--primary-color); margin: 0; padding: 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-color); z-index: 100; }
-        nav a { margin: 0 15px; text-decoration: none; color: var(--primary-color); font-weight: 600; cursor: pointer; }
         header { text-align: center; padding: 40px 20px; }
-        h1 { font-weight: 300; letter-spacing: 8px; color: var(--accent-color); 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-bg); border: 1px solid var(--border-color); padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; }
-        .filter-btn.active { background: var(--accent-color); color: white; border-color: var(--accent-color); }
-        .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border-color); 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-color); width: 25%; }
-        .meaning-cell { width: 55%; font-size: 0.95rem; }
         .path-cell { font-size: 0.7rem; color: #bbb; width: 20%; text-align: right; }
-        .usage-text { font-size: 0.85rem; color: #7a7a7a; background: #fcfcfc; border-left: 3px solid var(--accent-color); padding: 5px 10px; margin-top: 8px; }
     </style>
 </head>
 <body>
@@ -37,19 +38,19 @@
 <header>
     <h1>HUIUCL</h1>
-    <div style="color:#999; font-size:0.8rem; margin-top:5px;">DATABASE v2.8 (Strict Object Handing)</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>단어</th><th>의미 및 상세 설명</th><th style="text-align:right;">분류</th></tr>
                 </thead>
                 <tbody id="dictBody"></tbody>
             </table>
@@ -59,8 +60,8 @@
 </div>
 <script>
-    let conlangData = {};
-    let currentCategory = '모두';
     function showSection(id) {
         document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
@@ -68,122 +69,122 @@
     }
     window.onload = () => {
-        fetch('Huiucl.json').then(res => res.json()).then(data => {
-            conlangData = data;
-            initFilterButtons();
             renderTable();
-            renderGrammarPage();
         });
     };
-    function initFilterButtons() {
-        const btnContainer = document.getElementById('categoryButtons');
-        Object.keys(conlangData).forEach(key => {
             if (key === "Settings") return;
             const btn = document.createElement('button');
             btn.className = 'filter-btn';
             btn.innerText = key;
-            btn.onclick = (e) => filterCategory(key, e.target);
-            btnContainer.appendChild(btn);
         });
     }
-    function filterCategory(cat, btn) {
-        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        currentCategory = cat;
-        renderTable();
-    }
     function renderTable() {
         const query = document.getElementById('searchInput').value.toLowerCase();
         const body = document.getElementById('dictBody');
         body.innerHTML = '';
-        const cats = currentCategory === '모두' ? Object.keys(conlangData).filter(k => k !== "Settings") : [currentCategory];
-        cats.forEach(cat => strictProcess(conlangData[cat], cat, query));
     }
-    function strictProcess(obj, path, query) {
-        // 문법 규칙 제외
         if (path.includes("Grammar_Rules")) return;
         for (let key in obj) {
             const val = obj[key];
             if (!val) continue;
-            // 출력 제외 예약어
-            const skipKeys = ["usage", "note", "definition", "tense_variants", "ko", "en"];
-            if (skipKeys.includes(key)) continue;
-            // 1. 단어 정보가 담긴 객체인 경우
-            if (typeof val === 'object') {
-                const kor = val.meaning_ko || val.ko || val.뜻 || val.definition || "";
-                const eng = val.meaning_en || val.en || "";
-                const usage = val.usage || val.note || "";
-                // 한국어 뜻이나 영문 키에 정보가 있는 '진짜 단어'인 경우 출력
-                if (kor || eng) {
-                    if (key.toLowerCase().includes(query) || (typeof kor === 'string' && kor.includes(query))) {
-                        appendRow(key, kor, eng, usage, path);
-                    }
-                    // 파생어 처리
-                    if (val.derivations) {
-                        for (let dKey in val.derivations) {
-                            appendRow(dKey, val.derivations[dKey], "", "", path, true);
-                        }
                     }
-                    // 시제 변형이 있다면 내부 탐색
-                    if (val.tense_variants) strictProcess(val.tense_variants, path + " > " + key, query);
-                }
-                // 하위 데이터가 더 있다면 재귀 탐색
-                else {
-                    strictProcess(val, path + " > " + key, query);
                 }
             }
-            // 2. 대명사/인사말 등 단순 문자열인 경우
             else if (typeof val === 'string') {
                 if (key.toLowerCase().includes(query) || val.toLowerCase().includes(query)) {
-                    appendRow(key, val, "", "", path);
                 }
             }
         }
     }
-    function appendRow(word, kor, eng, usage, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'variation-row';
-        let content = `<strong>${typeof kor === 'object' ? JSON.stringify(kor) : kor}</strong>`;
-        if (eng) content += ` <span style="color:#888;">(${eng})</span>`;
-        if (usage) content += `<div class="usage-text">※ ${usage}</div>`;
         row.innerHTML = `
-            <td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
-            <td class="meaning-cell">${content}</td>
             <td class="path-cell">${path}</td>
         `;
     }
-    function renderGrammarPage() {
         const target = document.getElementById('grammarContent');
         let html = "";
-        function findRules(obj, path) {
-            for (let key in obj) {
-                if (key === "Grammar_Rules") {
-                    html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05);">
-                        <h3 style="margin-top:0; color:var(--accent-color);">${path || 'General'} Rules</h3>`;
-                    for (let rKey in obj[key]) {
-                        html += `<p><strong>${rKey}:</strong> ${obj[key][rKey]}</p>`;
                     }
                     html += `</div>`;
-                } else if (typeof obj[key] === 'object' && key !== "Settings") {
-                    findRules(obj[key], path ? path + " > " + key : key);
                 }
             }
         }
-        findRules(conlangData, "");
         target.innerHTML = html;
     }
 </script>

 <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>
 <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>
 <script>
+    let db = {};
+    let currentCat = '모두';
     function showSection(id) {
         document.querySelectorAll('section').forEach(s => s.classList.remove('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>