Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

94d5ad0

verified ·

1 Parent(s): d81e85c

Update index.html

Browse files

Files changed (1) hide show

index.html +62 -79

index.html CHANGED Viewed

@@ -3,40 +3,29 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HUIUCL Online Archive</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: 1000px; 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; transition: 0.2s; }
         .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; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
         .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; table-layout: fixed; }
-        th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eee; overflow: hidden; text-overflow: ellipsis; }
-        th { background: #f1eee6; color: #777; font-size: 0.85rem; font-weight: 600; }
-        .word-cell { font-weight: bold; color: var(--accent-color); width: 30%; }
-        .meaning-cell { width: 50%; }
         .path-cell { font-size: 0.7rem; color: #bbb; width: 20%; text-align: right; }
-        .variation-row { background: #faf9f6; font-size: 0.95rem; }
     </style>
 </head>
 <body>
@@ -48,32 +37,25 @@
 <header>
     <h1>HUIUCL</h1>
-    <div style="color:#999; font-size:0.8rem; margin-top:5px;">DATABASE v2.5 (Full Load)</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 style="width:30%">단어</th>
-                        <th style="width:50%">의미</th>
-                        <th style="width:20%; text-align:right;">분류</th>
-                    </tr>
                 </thead>
                 <tbody id="dictBody"></tbody>
             </table>
         </div>
     </section>
-    <section id="grammar">
-        <div id="grammarContent"></div>
-    </section>
 </div>
 <script>
@@ -86,14 +68,12 @@
     }
     window.onload = () => {
-        fetch('Huiucl.json')
-            .then(res => res.json())
-            .then(data => {
-                conlangData = data;
-                initFilterButtons();
-                renderTable();
-                renderGrammarPage();
-            });
     };
     function initFilterButtons() {
@@ -125,54 +105,69 @@
             : [currentCategory];
         categories.forEach(cat => {
-            processData(conlangData[cat], cat, query);
         });
     }
-    function processData(obj, path, query) {
-        if (path.includes("Grammar_Rules")) return;
         for (let key in obj) {
             const val = obj[key];
             if (!val) continue;
-            // 1. 단어 객체 구조 (meaning_ko 혹은 ko/en 키가 있는 경우)
-            if (typeof val === 'object' && (val.meaning_ko || val.ko || val.뜻)) {
-                const ko = val.meaning_ko || val.ko || val.뜻 || "";
-                const en = val.meaning_en || val.en || "";
-                if (key.toLowerCase().includes(query) || ko.toLowerCase().includes(query)) {
-                    appendRow(key, `${ko} ${en ? '/ ' + en : ''}`, path);
                 }
-                // 파생어 처리
                 if (val.derivations) {
                     for (let dKey in val.derivations) {
-                        const dMean = val.derivations[dKey];
-                        if (dKey.toLowerCase().includes(query) || dMean.toLowerCase().includes(query)) {
-                            appendRow(dKey, dMean, path, true);
-                        }
                     }
                 }
             }
-            // 2. 대명사/인사말 구조 (단순 키-값 쌍인 경우)
             else if (typeof val === 'string') {
                 if (key.toLowerCase().includes(query) || val.toLowerCase().includes(query)) {
-                    appendRow(key, val, path);
                 }
             }
-            // 3. 중첩된 카테고리 (계속 탐색)
             else if (typeof val === 'object') {
-                processData(val, path + " > " + key, query);
             }
         }
     }
-    function appendRow(word, meaning, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'variation-row';
         row.innerHTML = `
             <td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
-            <td class="meaning-cell">${meaning}</td>
             <td class="path-cell">${path}</td>
         `;
     }
@@ -180,34 +175,22 @@
     function renderGrammarPage() {
         const target = document.getElementById('grammarContent');
         let html = "";
-        if (conlangData.Settings) {
-            const s = conlangData.Settings;
-            html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05);">
-                <h2 style="margin-top:0; color:var(--accent-color);">System Settings</h2>
-                <p><strong>어순 (Word Order):</strong> ${s.Syntax.Word_Order.join(', ')}</p>
-                <p><strong>명령문:</strong> ${s.Syntax.Imperative["2"]}</p>
-                <hr style="border:0; border-top:1px solid #eee; margin:20px 0;">
-                <p><strong>Vowels:</strong> ${Object.keys(s.Phonology.Vowels).join(', ')}</p>
-                <p><strong>Consonants:</strong> ${Object.keys(s.Phonology.Consonants).join(', ')}</p>
-            </div>`;
-        }
-        function extractRules(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; border-bottom:2px solid var(--accent-color); display:inline-block; padding-bottom:5px;">${path} Rules</h3>`;
                     for (let rKey in obj[key]) {
-                        html += `<p style="margin:10px 0;"><strong>${rKey}:</strong> ${obj[key][rKey]}</p>`;
                     }
                     html += `</div>`;
                 } else if (typeof obj[key] === 'object' && key !== "Settings") {
-                    extractRules(obj[key], path ? path + " > " + key : key);
                 }
             }
         }
-        extractRules(conlangData, "");
-        target.innerHTML = html;
     }
 </script>
 </body>

 <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-tag { font-size: 0.8rem; color: #888; display: block; margin-top: 4px; border-top: 1px dashed #eee; padding-top: 4px; }
     </style>
 </head>
 <body>
 <header>
     <h1>HUIUCL</h1>
+    <div style="color:#999; font-size:0.8rem; margin-top:5px;">DATABASE v2.7 (Manual Mapping)</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>
         </div>
     </section>
+    <section id="grammar"><div id="grammarContent"></div></section>
 </div>
 <script>
     }
     window.onload = () => {
+        fetch('Huiucl.json').then(res => res.json()).then(data => {
+            conlangData = data;
+            initFilterButtons();
+            renderTable();
+            renderGrammarPage();
+        });
     };
     function initFilterButtons() {
             : [currentCategory];
         categories.forEach(cat => {
+            manualProcess(conlangData[cat], cat, query);
         });
     }
+    // 하나하나 성격에 맞춰 지정 처리하는 수동 매핑 엔진
+    function manualProcess(obj, path, query) {
+        if (path.includes("Grammar_Rules")) return; // 문법 규칙은 사전에서 제외
         for (let key in obj) {
             const val = obj[key];
             if (!val) continue;
+            // 1. [단어 객체] - meaning_ko, ko, definition 등의 키가 있는 경우
+            if (typeof val === 'object' && (val.meaning_ko || val.ko || val.definition || val.뜻)) {
+                let mainWord = key;
+                let kor = val.meaning_ko || val.ko || val.뜻 || val.definition || "";
+                let eng = val.meaning_en || val.en || "";
+                let extra = val.usage || val.note || "";
+                if (mainWord.toLowerCase().includes(query) || kor.toLowerCase().includes(query)) {
+                    appendRow(mainWord, kor, eng, extra, path);
                 }
+                // 하위 파생어 처리
                 if (val.derivations) {
                     for (let dKey in val.derivations) {
+                        appendRow(dKey, val.derivations[dKey], "", "", path, true);
                     }
                 }
+                // 조동사 등 내부 텐스 변형이 있는 경우 (acam, acac 등)
+                if (val.tense_variants) {
+                    manualProcess(val.tense_variants, path + " > " + key, query);
+                }
             }
+            // 2. [단순 키-값] - 대명사, 인사말 등 (key: "string")
             else if (typeof val === 'string') {
                 if (key.toLowerCase().includes(query) || val.toLowerCase().includes(query)) {
+                    appendRow(key, val, "", "", path);
                 }
             }
+            // 3. [조사/접사 구조] - 키 내부에 또 설명이 있거나, 묶여 있는 경우
             else if (typeof val === 'object') {
+                // 특정 키(usage, note, definition) 자체가 단어로 뜨지 않도록 필터링하며 재귀 탐색
+                if (!["usage", "note", "definition", "tense_variants"].includes(key)) {
+                    manualProcess(val, path + " > " + key, query);
+                }
             }
         }
     }
+    function appendRow(word, kor, eng, usage, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'variation-row';
+        let meaningHtml = `<strong>${kor}</strong>`;
+        if (eng) meaningHtml += ` <span style="color:#888;">(${eng})</span>`;
+        if (usage) meaningHtml += `<span class="usage-tag">※ ${usage}</span>`;
         row.innerHTML = `
             <td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
+            <td class="meaning-cell">${meaningHtml}</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 || "<p>로드된 문법 규칙이 없습니다.</p>";
     }
 </script>
 </body>