Update index.html

index.html

@@ -11,60 +11,28 @@
             --primary-color: #5d5b54;
             --accent-color: #d4a373;
             --border-color: #e0ddd5;
-            --variation-bg: #faf9f6;
         }
 
-        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: 20px; 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: 500; font-size: 0.9rem; transition: 0.2s; cursor: pointer; }
-        nav a:hover { color: var(--accent-color); }
-
-        header { text-align: center; padding: 60px 20px; }
+        body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-color); color: var(--primary-color); 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-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; }
-        .sub-title { font-size: 0.9rem; color: #999; margin-top: 10px; }
 
-        .container { max-width: 1000px; margin: 0 auto; padding: 0 20px 100px; }
+        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
         section { display: none; }
-        section.active { display: block; animation: fadeIn 0.5s; }
-
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-
-        /* 사전(DICTIONARY) 스타일 */
-        .search-container { margin-bottom: 30px; display: flex; gap: 10px; }
-        input[type="text"] { flex: 1; padding: 12px 24px; border: 1px solid var(--border-color); border-radius: 30px; outline: none; font-size: 1rem; }
-        
-        .table-wrapper { background: var(--card-bg); 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 #f1f1f1; }
-        th { background: #f1eee6; font-size: 0.9rem; color: #777; font-weight: 500; }
-        
+        section.active { display: block; }
+
+        /* 사전 스타일 */
+        .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border-color); border-radius: 30px; font-size: 1rem; margin-bottom: 25px; box-sizing: border-box; outline: none; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
+        .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.9rem; }
         .word-cell { font-weight: bold; color: var(--accent-color); width: 25%; }
-        .meaning-cell { width: 45%; }
-        .eng-cell { width: 30%; font-size: 0.85rem; color: #999; font-style: italic; }
-
-        .variation-row { background-color: var(--variation-bg); }
-        .variation-mark { color: #ccc; margin-right: 8px; }
-
-        /* 문법 & 아카이브 스타일 동일 */
-        .card { background: var(--card-bg); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 20px; }
-        .archive-layout { display: flex; gap: 30px; }
-        .story-list { width: 250px; flex-shrink: 0; }
-        .story-item { padding: 15px; background: var(--card-bg); margin-bottom: 10px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-color); font-size: 0.9rem; }
-        .story-item.active { border-color: var(--accent-color); color: var(--accent-color); background: #fdfcf9; }
-        .story-content { flex: 1; background: var(--card-bg); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); min-height: 400px; }
-        .story-line { margin-bottom: 25px; }
-        .huiucl-text { font-size: 1.2rem; color: var(--accent-color); font-weight: 600; margin-bottom: 5px; }
-        .korean-text { font-size: 1rem; color: #777; border-left: 2px solid var(--border-color); padding-left: 15px; }
+        .variation-row { background: #faf9f6; font-size: 0.95rem; }
+
+        .card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
     </style>
 </head>
 <body>
@@ -72,170 +40,128 @@
 <nav>
     <a onclick="showSection('dictionary')">DICTIONARY</a>
     <a onclick="showSection('grammar')">GRAMMAR</a>
-    <a onclick="showSection('archive')">ARCHIVE</a>
 </nav>
 
 <header>
     <h1>HUIUCL</h1>
-    <div class="sub-title">v2.0 Revision - Online Dictionary & Archive</div>
+    <div style="color:#999; font-size:0.8rem; margin-top:5px;">SYSTEM ARCHIVE v2.0</div>
 </header>
 
 <div class="container">
     <section id="dictionary" class="active">
-        <div class="search-container">
-            <input type="text" id="searchInput" placeholder="HUIUCL 단어, 한국어 뜻, 또는 영문 의미 검색..." onkeyup="renderTable()">
-        </div>
+        <input type="text" id="searchInput" class="search-box" placeholder="단어, 뜻, 파생어를 입력하세요..." oninput="renderTable()">
         <div class="table-wrapper">
             <table>
                 <thead>
                     <tr>
-                        <th style="width:25%">단어 (Word)</th>
-                        <th style="width:45%">의미 (Meaning)</th>
-                        <th style="width:30%">English</th>
+                        <th>단어</th>
+                        <th>의미 (KO)</th>
+                        <th>Meaning (EN)</th>
                     </tr>
                 </thead>
-                <tbody id="dictBody">
-                    </tbody>
+                <tbody id="dictBody"></tbody>
             </table>
         </div>
     </section>
 
     <section id="grammar">
-        <div class="card">
-            <h2 style="font-weight: 300;">Grammar & Phonology</h2>
-            <div id="grammarContent">
-                </div>
-        </div>
-    </section>
-
-    <section id="archive">
-        <div class="archive-layout">
-            <div class="story-list">
-                <div class="story-item active" onclick="loadStory(0, this)">01. 탄생 (Clama)</div>
-                <div class="story-item" onclick="loadStory(1, this)">02. 준비 중...</div>
-            </div>
-            <div class="story-content" id="storyViewer"></div>
+        <div class="card" id="grammarBox">
+            <h2>Grammar Settings</h2>
+            <div id="settingsContent">데이터를 불러오는 중...</div>
         </div>
     </section>
 </div>
 
 <script>
-    let conlangData = {};
+    let rawData = {};
 
     function showSection(id) {
         document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
         document.getElementById(id).classList.add('active');
     }
 
-    // 초기 데이터 로드
+    // JSON 로드
     window.onload = () => {
         fetch('Huiucl.json')
             .then(res => res.json())
             .then(data => {
-                conlangData = data;
-                loadGrammar();
+                rawData = data;
                 renderTable();
-                loadStory(0);
+                renderGrammar();
             })
-            .catch(err => console.error("데이터를 불러오지 못했습니다. JSON 파일명을 확인하세요.", err));
+            .catch(err => {
+                document.getElementById('dictBody').innerHTML = '<tr><td colspan="3" style="text-align:center; padding:50px;">JSON 파일을 찾을 수 없습니다. (Huiucl.json 확인)</td></tr>';
+            });
     };
 
-    // 사전 렌더링 로직
     function renderTable() {
+        const query = document.getElementById('searchInput').value.toLowerCase();
         const body = document.getElementById('dictBody');
-        const search = document.getElementById('searchInput').value.toLowerCase();
         body.innerHTML = '';
 
-        // Settings, Pronouns 등을 제외한 실제 단어들 순회
-        const skipKeys = ["Settings", "Pronouns"];
-        
-        for (const word in conlangData) {
-            if (skipKeys.includes(word)) continue;
-
-            const entry = conlangData[word];
-            const kor = entry.meaning_ko || "";
-            const eng = entry.meaning_en || "";
-
-            // 검색 필터링 (표제어 또는 의미)
-            if (word.toLowerCase().includes(search) || kor.includes(search) || eng.toLowerCase().includes(search)) {
-                addRow(word, kor, eng, false);
-            }
+        // 재귀적으로 단어 데이터를 찾는 함수
+        function findEntries(obj) {
+            for (let key in obj) {
+                const item = obj[key];
+                
+                // 단어 엔트리 조건: meaning_ko 필드가 있을 때
+                if (item && typeof item === 'object' && item.meaning_ko) {
+                    const word = key;
+                    const kor = item.meaning_ko;
+                    const eng = item.meaning_en || '';
+
+                    // 검색 조건 대조
+                    if (word.toLowerCase().includes(query) || kor.includes(query) || eng.toLowerCase().includes(query)) {
+                        appendRow(word, kor, eng, false);
+                    }
 
-            // 파생어(derivations) 처리
-            if (entry.derivations) {
-                for (const dWord in entry.derivations) {
-                    const dMeaning = entry.derivations[dWord];
-                    // 파생어도 검색 대상에 포함
-                    if (dWord.toLowerCase().includes(search) || dMeaning.toLowerCase().includes(search)) {
-                        addRow(dWord, dMeaning, "-", true);
+                    // 파생어(derivations) 순회
+                    if (item.derivations) {
+                        for (let dKey in item.derivations) {
+                            const dMean = item.derivations[dKey];
+                            if (dKey.toLowerCase().includes(query) || dMean.toLowerCase().includes(query)) {
+                                appendRow(dKey, dMean, '-', true);
+                            }
+                        }
                     }
+                } else if (item && typeof item === 'object' && key !== "Settings") {
+                    // 더 깊은 계층이 있다면 다시 탐색
+                    findEntries(item);
                 }
             }
         }
+
+        findEntries(rawData);
     }
 
-    function addRow(word, meaning, eng, isVar) {
+    function appendRow(word, kor, eng, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
-        if (isVar) row.className = "variation-row";
-
+        if (isSub) row.className = 'variation-row';
+        
         row.innerHTML = `
-            <td class="word-cell">${isVar ? '<span class="variation-mark">↳</span>' : ''}${word}</td>
-            <td class="meaning-cell">${meaning}</td>
-            <td class="eng-cell">${eng}</td>
+            <td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
+            <td>${kor}</td>
+            <td style="color:#aaa; font-size:0.85rem;">${eng}</td>
         `;
     }
 
-    // 문법 데이터 로드
-    function loadGrammar() {
-        const container = document.getElementById('grammarContent');
-        if (!conlangData.Settings) return;
-
-        const set = conlangData.Settings;
-        let html = `
-            <h3>Syntax (어순)</h3>
-            <p>기본 어순: ${set.Syntax.Word_Order.join(' / ')}</p>
-            <p>${set.Syntax.Imperative["2"]}</p>
-            <hr style="border:0; border-top:1px solid #eee; margin:20px 0;">
-            <h3>Phonology (음성)</h3>
-            <p><strong>Vowels:</strong> ${Object.keys(set.Phonology.Vowels).join(', ')}</p>
-            <p><strong>Consonants:</strong> ${Object.keys(set.Phonology.Consonants).join(', ')} (c=[k'], t=[t'])</p>
-        `;
-        container.innerHTML = html;
-    }
-
-    // 아카이브 로직
-    const stories = [
-        {
-            title: "기록 01: 탄생",
-            lines: [
-                { h: "unal cinicl si hamolhilasna clamam..", k: "우주와 하몰히라스나가 태어났다." },
-                { h: "su u clum hoct.", k: "그는 신이었다." }
-            ]
-        },
-        {
-            title: "기록 02: 준비 중",
-            lines: [{ h: "...", k: "다음 데이터 업데이트를 기다려주세요." }]
+    function renderGrammar() {
+        const target = document.getElementById('settingsContent');
+        if (!rawData.Settings) {
+            target.innerHTML = "설정 데이터가 없습니다.";
+            return;
         }
-    ];
-
-    function loadStory(index, el) {
-        if(el) {
-            document.querySelectorAll('.story-item').forEach(item => item.classList.remove('active'));
-            el.classList.add('active');
-        }
-        const story = stories[index];
-        let html = `<h2 style="font-weight:300; margin-bottom:40px; text-align:center; color:var(--accent-color);">${story.title}</h2>`;
-        story.lines.forEach(line => {
-            html += `
-                <div class="story-line">
-                    <div class="huiucl-text">${line.h}</div>
-                    <div class="korean-text">${line.k}</div>
-                </div>`;
-        });
-        document.getElementById('storyViewer').innerHTML = html;
+        const s = rawData.Settings;
+        target.innerHTML = `
+            <h3>Phonology</h3>
+            <p>Vowels: ${Object.keys(s.Phonology.Vowels).join(', ')}</p>
+            <p>Consonants: ${Object.keys(s.Phonology.Consonants).join(', ')}</p>
+            <h3>Syntax</h3>
+            <p>Order: ${s.Syntax.Word_Order.join(', ')}</p>
+            <p>${s.Syntax.Imperative["2"]}</p>
+        `;
     }
 </script>
-
 </body>
 </html>